Silakan teman-teman perhatikan gambar berikut :

Tabel Hari Libur

Bisa dilihat pada sisi kiri terdapat form input data, dan sisi kanan berupa tabel data yang menunjukkan data yang sudah direkam ke database. Jika ingin edit data tersebut kira-kira bagaimana proses menampilkan data dari tabel ke form input?

Umumnya pada tombol edit terdapat link seperti “…php?blablaba&id=25” misalnya. Selanjutnya kita akan meng-query dengan id tersebut untuk mengambil data, dan menampilkannya ke form input value.

 

Dengan menjalankan query seperti skenario di atas artinya kita request data lagi ke server, padahal data tersebut sudah ada di halaman itu, halaman yang sama dengan si form input. Lalu bagaimana cara mengakses data dari tabel agar muncul di form tanpa harus request lagi ke server? Yah, sesuai judul… kita akan menggunakan data-attribute. Untuk mempersingkat waktu, urusan definisi kita serahkan saja pada ahlinya.

Di sini saya akan memodifikasi kode halaman libur_kalender.php yang sudah kita bahas pada postingan sebelumnya. Berikut langkah-langkahnya :

1. Tambahkan Data Attribute pada Button Edit

Intinya semua data yang akan dimunculkan di form kita letakkan di data-attribute button edit. Dalam kasus ini kita memiliki tiga buah data yaitu tahun dan tanggal_libur serta id datanya.

Tabel – Edit Button – Before

 

Tabel – Edit Button – After

 

Dari kode di atas terdapat penambahan selector berupa id “tabel_libur” pada div sebelum table. Penambahan data-attribute pada tag achor <a> di kolom ke-empat (Edit – baris 19) berupa :

  1. data-id, menampilkan id
  2. data-tahun, menampilkan tahun
  3. data-libur, menampilkan tanggal hari libur

Selain itu juga terdapat penambahan class “edit-libur” pada tag anchor <a> tersebut.

 

2. Modifikasi Form

Form – Before

 

Form – After

 

Yang perlu diperhatikan antara lain :

  1. id=”tahun”, pada baris ke-5
  2. id=”multidate”, pada baris ke-11
  3. Penambahan hidden inpit dengan id=”idlibur”, pada baris ke-16
  4. id=”mode”, pada baris ke-17. (Optional, untuk menandai script mana yang akan dieksekusi di sisi server)
  5. id=”button-submit”, pada baris ke-18
  6. Penambahan button dengan id=”button-cancel”, pada baris ke-19

 

3. jQuery in Action

Dengan jQuery kita akan menampilkan nilai dari data-attribute pada tabel ke elemen input form.

 

Urutan kerjanya kira-kira begini :

  1. Baris ke 1 => By default, tombol CANCEL (id “button-cancel”) disembunyikan.
  2. Baris ke 2 => Ketika klik tombol edit (class “edit-libur”) pada tabel, maka :
    • Baris ke 4 => set value yang ber-id “idlibur” dengan nilai dari data-attribute id (data-id)
    • Baris ke 5 => set value yang ber-id “tahun” dengan nilai dari data-attribute tahun (data-tahun)
    • Baris ke 6 => set value yang ber-id “multidate” dengan nilai dari data-attribute libur (data-libur)
    • Baris ke 7 => set value yang ber-id “mode” dengan nilai “update” (awalnya “simpan”)
    • Baris ke 8 => set value yang ber-id “button-submt” dengan nilai “UPDATE” (awalnya “SIMPAN”)
    • Baris ke 9 => tampilkan tombol CANCEL (id “button-cancel”)
  3. Baris ke 12 => ketika tombol CANCEL (id “button-cancel”) di-klik, maka :
    • Baris ke 14 => Kosongkan value semua elemen form (text, select, textarea)
    • Baris ke 15 => set value yang ber-id “mode” dengan nilai “simpan” (kembalikan ke semula)
    • Baris ke 16 => set value yang ber-id “button-submt” dengan nilai “SIMPAN” (kembalikan ke semula)
    • Baris ke 17 => sembunyikan lagi tombol CANCEL (id “button-cancel”)

Nah sekarang kita sudah bisa menampilkan data untuk diedit tanpa perlu meng-query lagi. Ga ada lodang loading lagi, pokoknya begitu klik data langsung muncul di form.

Rasanya cukup sekian dulu untuk hari ini, terima kasih telah berkunjung, please share, rate, comment, follow sosmed kami, karena itu bisa nambah semangat dan membuat kita semua bahagia… Hehehe…

DEMO