Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Fields jQuery Plugin, Mudahnya Mengambil dan Mengeset Nilai di Form pada Client Scripts
Mudahnya Mendapatkan URL Aplikasi Web yang Dihasilkan oleh PHPMaker
Mudahnya Menyembunyikan Tombol Ubah di Halaman View dari PHPMaker

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

Sen, 12 Oktober 2015 oleh Masino Sinaga Tinggalkan Komentar

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… 😀

Ditempatkan di bawah: PHPMaker Ditag dengan:Belajar PHPMaker, Client Scripts, Fields jQuery Plugin, Form_CustomValidate, jQuery, jQuery Plugin, PHPMaker Indonesia, Startup Script, Tutorial PHPMaker

Masino Sinaga

Web Developer pengguna PHPMaker untuk membangun Aplikasi Web sejak tahun 2004. Sampai sekarang masih aktif dan rajin membagikan pengalamannya menggunakan PHPMaker melalui situs masinosinaga.com, ilovephpmaker.com, dan phpmakerprojects.com.

Mudahnya Mendapatkan URL Aplikasi Web yang Dihasilkan oleh PHPMaker
Mudahnya Menyembunyikan Tombol Ubah di Halaman View dari PHPMaker

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses

Pos-pos Terbaru

  • Masino Extensions for PHPMaker 2025 Now Changed!
  • Begini Mudahnya Mengurangi Lebar Combobox pada PHPMaker 2025
  • Mudahnya Mengubah Nilai Delay Auto Hide Success Message di PHPMaker 2025
  • Mudahnya Berpindah Layout dari Table ke Cards di Halaman List lewat PHPMaker 2025
  • Jangan Lupa Pakai AdjustSql Saat Insert atau Update Data Lewat ExecuteStatement

Menu

  • Siapa Saya?
  • Web Development
  • PHPMaker
  • Umum
  • Syarat dan Ketentuan
  • Sitemap (Peta Situs)
  • Komentar

Komentar Terbaru

  • Masino Sinaga pada Cara Mengetahui Detail Error di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • Dendi pada Cara Mengetahui Detail Error di Aplikasi Web yang Dihasilkan oleh PHPMaker 2021
  • Charly pada PHPMaker: PHP Code Generator + PHP Framework
  • Masino Sinaga pada PHPMaker: PHP Code Generator + PHP Framework
  • Masino Sinaga pada PHPMaker: PHP Code Generator + PHP Framework

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Projects
  6. PHPMaker Learning

Baru di PHPMaker?

Baca ini terlebih dulu ...

  1. Ayo Menjadi Web Developer yang Cerdas!
  2. PHPMaker: PHP Code Generator + PHP Framework
  3. Pertanyaan-Pertanyaan yang Paling Sering Diajukan Seputar PHPMaker
  4. Tips buat Anda Pemula yang Baru Mengenal dan Menggunakan PHPMaker
  5. Bacalah Help, Bacalah Help, dan Bacalah Help di PHPMaker!

(c) Masino Sinaga 2009 - 2025 | WordPress | Catat masuk | Kembali ke atas