Begini Mudah dan Cepatnya Menambahkan Custom Attributes dari PHPMaker

Sudah tidak terhitung lagi banyaknya kemudahan, keuntungan, dan kenikmatan yang dirasakan oleh Web Developer ketika menggunakan PHPMaker dalam membangun Aplikasi Web. Mulai dari hal yang paling sederhana, sampai yang paling kompleks sekalipun, bisa ditangani oleh PHPMaker.

Intinya, Web Developer tidak lagi pusing-pusing memikirkan menulis dan menempatkan kode di file-file script untuk menghasilkan fitur tertentu. Mereka cukup hanya menulis sedikit kode saja dari project PHPMaker. Selebihnya, biarkan PHPMaker yang mengurus dan menyelesaikannya.

Kali ini saya akan menunjukkan kepada Anda betapa mudah dan cepatnya kita sebagai Web Developer dapat menambahkan Custom Attribute atau atribut yang bersifat kostum pada Field tertentu.

Semuanya cukup dilakukan dari dalam project PHPMaker. Tidak perlu mengubah kode di file script yang sudah dihasilkan oleh PHPMaker. Tidak perlu mengubah Template yang digunakan oleh PHPMaker.

Katakanlah kita ingin menerapkan kondisi seperti ini. Ketika Pengguna menempatkan kursor pada sebuah Field yang menggunakan elemen TextBox di Form Add maupun Edit, maka warna latar belakang control TextBox tersebut akan berubah menjadi kuning. Ketika kursor meninggalkan TextBox tadi, maka warna latar belakang control TextBox kembali menjadi putih.

Penasaran ingin tahu bagaimana caranya? Simak langkah-langkah berikut.

Pertama, klik salah satu Field yang Anda inginkan dari panel Database di sebelah kiri dari project PHPMaker Anda, lalu pastikan tab Fields di sebelah kanan yang sedang terpilih.

Kedua, dari panel Edit Tag di sebelah kanan bawah, salin kode berikut ke dalam Custom attributes:

"onfocus='setBackgroundColor(this.id)' onblur='clearBackgroundColor(this.id)'"

Ketiga, klik tab Code (Server Events, Client Scripts and Custom Templates), pergi ke lokasi ini: Client Scripts -> Global -> Pages with header/footer -> Global Code, lalu salin kode berikut ke dalam editor kode di sebelah kanannya:

function setBackgroundColor(x) {
	document.getElementById(x).style.backgroundColor = "yellow";
}

function clearBackgroundColor(x) {
	document.getElementById(x).style.backgroundColor = "white";
}

Keempat, atau langkah yang terakhir, generate ulang semua file script seperti biasa menggunakan PHPMaker. Selesai.

Setelah itu, jalankan Aplikasi Web dari browser, lalu cobalah untuk menambah data, klik pada Field yang Anda pilih pada langkah Pertama di atas, perhatikanlah bahwa seharusnya warna latar belakang TextBox menjadi kuning. Lalu cobalah untuk memindahkan kursor mouse ke Field lain dengan menekan tombol Tab di keyboard, maka warna latar belakang TextBox menjadi putih kembali.

Hal yang sama juga berlaku saat Anda mengubah data. Dengan kata lain, hanya dengan menulis kode sedikit itu saja, Anda sebagai Web Developer sudah bisa membuat perubahan warna latar belakang pada Field yang kita inginkan. Baik saat mendapat event focus maupun saat event lost focus.

Dengan cara ini, maka kita juga dapat menerapkan kondisi tersebut pada Field tertentu lainnya. Cukup hanya dengan mengulangi langkah nomor 2 di atas pada Field lain yang kita inginkan. Konsep yang digunakan oleh PHPMaker ini tentu saja semakin menyederhanakan kode yang ditulis oleh Web Developer, sehingga proses development menjadi lebih cepat.

Betapa cepat, mudah, dan menyenangkan sekali menggunakan PHPMaker, bukan? Masih bertahan membangun Aplikasi Web dengan cara-cara kuno dan menghabiskan banyak waktu Anda di depan komputer? Semuanya terserah kepada Anda! 🙂