Memanggil Javascript untuk Event Field Tertentu di Aplikasi Web dari PHPMaker

Luar biasa nikmatnya memang membangun Aplikasi Web dengan menggunakan PHPMaker. Betapa tidak? Web Developer benar-benar sangat dibantu dan dimanjakan dengan begitu banyaknya fitur yang powerful, flexible, sekaligus smart! Proses pengembangan pun menjadi kegiatan yang sangat menyenangkan.

Hari ini saya menemukan satu ilmu baru lagi yang sangat sayang untuk dilewatkan begitu saja. Apa itu? Yaitu betapa mudahnya kita dapat menghubungkan sebuah Field dengan event tertentu yang akan mengeksekusi kode dalam sebuah fungsi Javascript atau jQuery.

Katakanlah di Aplikasi Web yang dihasilkan oleh PHPMaker, ketika Pengguna sedang mengetikkan data di field Purchasing_Quantity, sistem akan otomatis memanggil kode Javascript yang terdapat di dalam fungsi bernama MyEvent.

Solusinya kita cukup menambahkan kode PHP berikut ke dalam server event Row_Rendered:

     $this->Purchasing_Quantity->EditAttrs["onkeyup"] = "MyEvent(event);";

Ternyata object Field memiliki property yang bernama EditAttrs yang memiliki sebuah parameter dalam bentuk elemen array di dalamnya. Parameter ini merupakan event yang sering digunakan di Javascript. Dalam contoh di atas, kita menambahkan Event onkeyup Javascript sehingga nantinya menjadi bagian atribut dari Field Purchasing_Quantity yang dihasilkan oleh PHPMaker.

Property EditAttrs di sebuah Field sangat bermanfaat jika kita ingin menambahkan atribut tertentu kepada Field tersebut. Disebut dengan EditAttrs, karena atribut ini hanya akan di-generate oleh PHPMaker saat sebuah Field dalam mode Edit. Meskipun demikian, bukan berarti property ini hanya ada di halaman Edit saja, tapi tersedia juga di halaman Add.

Anda bisa mengganti contoh parameter onkeyup di atas, misalnya menjadi onchange atau onclick, dan sebagainya; sesuai dengan kebutuhan.

Jadi, dengan property EditAttrs kita dapat menghubungkan sebuah Event dalam Javascript (yang terjadi di sisi Client) dengan sebuah Field, cukup dengan hanya menggunakan server event Row_Rendered. Sesuatu yang belum pernah saya bayangkan sebelumnya! Biasanya, kita hanya fokus kepada event di sisi server saja jika menambahkan kode di bagian Server Events. Ternyata tidak selamanya begitu, hehe…

Dengan cara ini pula, maka kita dapat menambahkan kondisi tertentu (if else) melalui kode PHP sesuai dengan kebutuhan. Contoh, jika Level Pengguna yang sedang login adalah 1, maka panggil fungsi A, jika level 2, maka panggil fungsi B, dan seterusnya. Itu hanya contoh saja, silahkan dikembangkan. Dalam contoh ini kita hanya mengacu kepada satu function Javascript saja

Oke, kembali ke kode! Selanjutnya, pastikan juga Anda telah menambahkan kode function MyEvent ke dalam bagian Startup Script yang terdapat di bagian Client Scripts -> Table-Specific -> Add Page dan/atau Edit Page:

function MyEvent(event) {
     var elm_name = $(event.target).attr('name');
     alert(elm_name);
}

Dalam contoh barusan, sengaja kita tidak membahas terlalu detail isi dari function Javascript ini. Function tersebut hanya berisi kode untuk mengambil nama elemen yang bertalian, lalu menampilkannya ke layar dengan menggunakan alert.

Tentu saja Anda bisa mengganti atribut name menjadi id, jika misalnya ingin mengetahui id dari elemen atau Field yang di-generate oleh PHPMaker.

Dari business-logic sederhana di atas, maka kita bisa mengembangkannya untuk kebutuhan lain. Misalnya, kita dapat menampilkan hasil perhitungan antara sebuah Field dengan Field lain, lalu menampilkannya pada Field tertentu lainnya menggunakan kode jQuery berdasarkan id elemen yang bertalian.

Jika Anda ingin melihat Property lainnya dari sebuah Field, silahkan baca artikel ini.

Sekilas hal di atas memang kelihatan sangat sepele. Tapi yakinlah, suatu saat kita sebagai Web Developer pasti akan mengalami sekaligus membutuhkan trik yang satu ini.

PHPMaker memang keren, bah! 😀