Fields jQuery Plugin, Mudahnya Mengambil dan Mengeset Nilai di Form pada Client Scripts

Tidaklah berlebihan memang jika PHPMaker adalah tools web development yang paling dahsyat sekaligus fleksibel sampai saat ini. Mengapa? Karena sejak versi 12, PHPMaker memperkenalkan lagi sebuah fitur baru yang bernama Fields jQuery Plugin.

Fitur ini disediakan bagi Web Developer untuk mempermudah mengambil maupun mengeset nilai elemen di sebuah form; khususnya pada event yang terjadi di sisi client. Kita dapat mengoptimalkan fitur ini melalui bagian Startup Script dan Form_CustomValidate yang terdapat di bawah lokasi Client Scripts pada project PHPMaker.

Mungkin masih ada di antara kita yang belum paham apa itu jQuery Plugin. Jadi, yang dimaksud dengan jQuery plugin adalah suatu metode baru yang digunakan untuk memperluas (extend) object prototype dari jQuery. Dengan cara ini, maka kita dapat mengaktifkan semua object jQuery untuk mewariskan method apapun yang dapat kita tambahkan ke dalamnya.

Seperti yang kita ketahui selama ini, ketika kita memanggil jQuery() maka kita sedang membuat sebuah object jQuery baru, dengan semua method yang diwariskan dari jQuery tersebut.

Kembali ke Fields jQuery Plugin di PHPMaker, supaya lebih mudah dipahami, mari kita simak contoh berikut:

$("input[name='x_Field1']").change(function() { // Asumsi Field1 adalah text input
    if (this.value == "xxx") {
        $(this).fields("FieldA").value("yyy"); // Set nilai yyy ke FieldA
    } else {
        $(this).fields("FieldB").value("zzz"); // Set nilai zzz ke FieldB
    }
});

Dari contoh barusan, ketika terjadi event change di Field1 dan jika nilai di Field1 sama dengan xxx, maka sistem akan mengeset nilai yyy ke dalam FieldA. Jika tidak, maka set nilai zzz ke dalam FieldB.

Perhatikanlah kode di bagian ini:

    .fields("<nama_field>")

Nah, itulah yang disebut dengan Fields jQuery Plugin. Sudah mulai jelas, bukan?

Perlu diketahui, bahwa parameter nama_field untuk Fields jQuery Plugin ini tidak diawali dengan prefix x_ lagi, seperti yang selama ini kita gunakan di versi 11 dan sebelumnya jika menggunakan jQuery native (tanpa plugin).

Seperti yang sudah diuraikan pada alinea kedua artikel ini, selain digunakan di Startup Script, kita sebagai Web Developer juga dapat mengoptimalkan Fields jQuery Plugin ini dari bagian Form_CustomValidate di bawah Client Scripts, seperti contoh kode di bawah ini:

function(fobj) { // DO NOT CHANGE THIS LINE!
     var $qty = $(this).fields("Qty"); // Ambil nilai sebuah field sebagai object jQuery berdasarkan nama field
     if ($qty.toNumber() % 10 != 0) // Asumsi: Qty adalah textbox, dan jika tidak kelipatan 10
         return this.OnError($qty, "Nilai Pesanan harus kelipatan 10."); // kembalikan false jika tidak valid
    return true; // Kembalikan true jika valid
 }

Dari contoh di atas, kita dapat mengambil nilai dari field Qty menggunakan Fields jQuery Plugin tadi dengan sangat mudahnya. Sekali lagi, kita tidak menggunakan prefix x_ dalam hal ini.

Kita juga dapat mengkonversi dan memastikan nilai yang ditampung pada variabel $qty tadi adalah numerik, dengan menggunakan method .toNumber() milik Fields jQuery Plugin tadi. Hal ini penting, karena secara standar, nilai yang ditampung dari input text tipenya masih string.

Sekarang mari kita lihat contoh lainnya, masih untuk Form_CustomValidate:

function(fobj) { // DO NOT CHANGE THIS LINE!
     var $row = $(this).fields(); // Ambil semua fields
     if ($row["Start"].toJsDate() > $row["End"].toJsDate()) // Asumsi: field Start dan End adalah input textbox
         return this.OnError($row["End"], "Tanggal akhir harus lebih besar atau sama dengan tanggal awal."); // Kembalikan false jika tidak valid
    return true; // Kembalikan true jika valid
 } 

Dari contoh ini, kita dapat menyimpulkan bahwa Fields jQuery Plugin juga memiliki method .toJsDate() untuk mengkonversi nilai dari input textbox menjadi tipe Date di Javascript, sehingga bisa dibandingkan nilainya. Dalam hal ini, kita mendapatkan nilai tanggal sebagai object Date yang bersifat native.

Terakhir, mari kita lihat contoh untuk memanipulasi nilai tanggal dengan menambahkan sejumlah nilai hari ke dalamnya:

function(fobj) { // DO NOT CHANGE THIS LINE!
     var $start = $(this).fields("Start"), $end = $(this).fields("End"); // Ambil field sebagai object jQuery berdasarkan nama field-nya
     if ($start.toDate().add(7, "days").isAfter($end.toDate())) // Asumsi: field Start dan End adalah input textbox
         return this.OnError($end, "Tanggal akhir harus sedikitnya 7 hari setelah tanggal awal."); // Kembalikan false jika tidak valid
    return true; // Kembalikan true jika valid
 } 

Dari contoh terakhir ini, kita menggunakan method .toDate untuk mendapatkan nilai field tanggal sebagai object moment. Artinya, kita bisa memanipulasi nilai tanggal ini dengan menambahkan nilai 7 hari, yang selanjutnya akan dibandingkan lagi dengan tanggal akhir menggunakan .isAfter().

Wow, betapa kerennya PHPMaker, bukan? Jadi, masih bertahan menggunakan cara-cara kuno dalam membangun Aplikasi Web, atau ingin segera beralih menggunakan PHPMaker, nih? Hehehe… 😀