Mengaktifkan TextBox Saat CheckBox Tercentang di Aplikasi Web dari PHPMaker

Tidak terasa sudah lebih dari 100 artikel saya tulis di situs ini membahas betapa dahsyat sekaligus fleksibelnya PHPMaker sebagai tools dalam membangun Aplikasi Web. Dahsyat, karena hanya dalam hitungan detik atau menit saja, semua file script untuk Aplikasi Web Anda dapat dihasilkan. Fleksibel, karena Anda sebagai Web Developer cukup hanya menambahkan beberapa baris (baca: sedikit) kode saja ke bagian Server Events untuk menerapkan business-logic tertentu melalui file project PHPMaker.

Semuanya itu dapat dilakukan tanpa harus memodifikasi file script yang sudah dihasilkan. Anda juga tidak perlu sama sekali memodifikasi file template PHPMaker. Fleksibilitas yang dimiliki oleh PHPMaker jelas dapat meningkatkan produktivitas kerja Web Developer. Nah, di artikel ini kita masih akan terus membahas fleksibilitas yang dimiliki oleh PHPMaker. Kali ini tidak hanya menggunakan Server Events, tapi juga melalui fitur Client Scripts yang sudah disediakan dari dalam file project PHPMaker.

Apa itu Client Scripts? Client Scripts adalah skrip yang dijalankan di sisi client; yang dalam hal ini di sisi browser. Tapi bukan berarti kita menyuruh Pengguna menambahkan skrip di browser yang mereka gunakan. Bukan itu artinya. Yang dimaksud dengan Client Scripts di PHPMaker adalah, skrip yang bisa ditambahkan oleh Web Developer melalui project PHPMaker, di mana skrip ini nantinya akan dieksekusi di sisi browser yang digunakan oleh client ketika mereka mengakses Aplikasi Web yang kita buat dengan PHPMaker. Cukup jelas maknanya, bukan?

Mungkin di antara Anda ada yang bertanya, mengapa PHPMaker menyediakan fitur Client Scripts? Bukankah Server Events saja sudah cukup seperti yang selama ini sudah saya bahas di sebagian besar artikel saya di situs ini? Jawabannya adalah, karena tidak semua business-logic harus dieksekusi di sisi server. Beberapa business-logic tertentu dapat dieksekusi cukup hanya dari sisi browser yang digunakan oleh Pengguna. Itulah mengapa kita juga membutuhkan fitur Client Scripts untuk menaruh kode yang mewakili business-logic yang dapat dijalankan dari sisi browser.

Contoh yang paling sering terjadi di sebuah Aplikasi Web adalah kira-kira seperti ini. Katakanlah ketika seorang Pengguna memberi tanda centang pada elemen CheckBox yang mewakili field AndaMhs di sebuah Form untuk menginput data, maka elemen Textbox yang mewakili field NamaMhs di bawahnya akan menjadi aktif atau enabled sekaligus kursor mouse akan fokus kepadanya. Sebaliknya, jika CheckBox tadi tidak tercentang, maka kondisi TextBox tadi menjadi non-aktif atau disabled dan segala teks yang ada di dalamnya akan dihapus atau dikosongkan.

Nah, untuk menerapkan business-logic seperti itu, maka kita harus menggunakan fitur Client Scripts di PHPMaker. Cukup taruh kode jQuery ini ke lokasi berikut di dalam project PHPMaker Anda: Client Scripts -> Table-Specific -> Add/Copy Page -> Startup Script (pastikan bahwa sebelumnya Anda sudah memilih Table yang tepat dari panel Database di sebelah kiri dari project PHPMaker Anda untuk menambahkan kode ini pada Table yang seharusnya):

$(document).ready(function() {
	// Kondisi saat Form di-load
	if($("input[name='x_AndaMhs[]']:checked").val()){
		$('#x_NamaMhs').removeAttr('disabled');
	} else {
		$('#x_NamaMhs').attr('disabled','disabled'); 
	}
	// Kondisi saat CheckBox diklik
	$('input:checkbox[name="x_AndaMhs\[\]"]').click(function() {
		if (!$(this).is(':checked')) {
			$('#x_NamaMhs').attr('disabled','disabled'); 
			$('#x_NamaMhs').val('');
		} else {
			$('#x_NamaMhs').removeAttr('disabled');
			$('#x_NamaMhs').focus();
		}
	});
});

Ada beberapa hal penting yang sebaiknya Anda ketahui mengenai contoh kode barusan.

1. Dalam contoh tadi kita mengasumsikan bahwa hanya ada dua field yang terlibat dalam business-logic tersebut. Pertama field AndaMhs yang tipe-nya ENUM dan memiliki nilai pilihan Y dan N, sedangkan yang kedua field NamaMhs yang tipe-nya VARCHAR(50). Sementara Database yang kita gunakan dalam hal ini adalah MySQL (mendukung tipe data ENUM).
2. PHPMaker secara standar akan otomatis mengkonversi field AndaMhs menjadi elemen CheckBox di Aplikasi Web yang dihasilkan olehnya. Mengapa? Karena field tersebut mengandung data pilihan Y dan N. PHPMaker akan men-generate property name dan id milik elemen CheckBox tadi masing-masing menggunakan nama yang sama sebagai sebuah array, yaitu: AndaMhs[] (perhatikan ada karakter [] di bagian akhir!). Jadi, dalam hal ini tidak menggunakan AndaMhs.
3. PHPMaker selalu menambahkan awalan (prefix) x_ di setiap property name dan id dari setiap Field, dan diikuti dengan nama Field-nya. Dari kedua contoh Field tadi, maka masing-masing akan berubah menjadi x_AndaMhs[] dan x_NamaMhs. Untuk keperluan penulisan kode di bagian Client Scripts, maka pastikan Anda selalu menyertakan prefix tadi.
4. Ada dua kondisi yang harus ditangani di contoh tadi. Pertama, kondisi saat Form pertama kali dimuat (di-load), dan yang kedua saat elemen CheckBox diklik oleh Pengguna (ditandai dengan komentar pada kode tadi). Artinya, kondisi pertama dapat digunakan untuk menentukan kondisi awal kedua Field tersebut secara standar (default) saat Form dimuat, yang dalam hal ini tergantung kepada nilai default di tabel yang bertalian. Sedangkan kode yang berada di bawah kondisi yang kedua dapat Anda gunakan saat event click terjadi pada elemen CheckBox.
5. Kita menggunakan Startup Script karena PHPMaker akan menempatkan kode itu pada bagian bawah dari halaman Add. Mengapa? Karena kode jQuery atau Javascript yang ditempatkan di bagian bawah halaman akan lebih cepat dimuat oleh browser. Sebagai informasi juga, contoh kode itu telah berhasil dicoba dengan menggunakan library jquery v1.11.0.
6. Anda tidak perlu repot-repot lagi meng-include--kan deklarasi skrip jQuery tadi di bagian atas Aplikasi Web. Mengapa? Karena sejak versi 9, PHPMaker sudah otomatis menyertakan pendeklarasian skrip jQuery di bagian header dari Aplikasi Web yang di-generate olehnya. Artinya, PHPMaker lebih menyarankan Anda sebagai Web Developer untuk menggunakan kode jQuery daripada Javascript melalui fitur Client Scripts.
7. Kode di atas juga bisa langsung Anda gunakan di Form/halaman Edit. Cukup dengan menyalinnya ke lokasi: Server Events -> Table-Specific -> Edit Page -> Startup Script.

Dengan menggunakan fitur Client Scripts, maka Anda sebagai Web Developer dapat menerapkan business-logic yang dijalankan di sisi browser. Semua kode yang Anda tambahkan di fitur ini akan disimpan di dalam file project PHPMaker. Sekali lagi, Anda tidak perlu memodifikasi file script yang sudah dihasilkan oleh PHPMaker.

Karena kode tersebut disimpan di dalam file project PHPMaker, maka Anda dapat mengelola dan memahami kode tersebut dengan mudah di waktu mendatang ketika file project tersebut dibuka kembali melalui PHPMaker. Mengapa? Karena kode tersebut akan ditampilkan dengan pola berbasiskan object Table di dalam file project PHPMaker Anda. Bandingkan jika Anda harus membuka satu per satu file script di sisi Aplikasi Web yang jumlahnya sangat banyak itu!

Betapa dahsyat dan fleksibel-nya PHPMaker, bukan? 🙂