harus diakui.. hari ini nulis blognya aktif sekali.. terima kasih kepada user di FB yang bertanya.. dan saya merasa sangat perlu untuk share ilmunya.. walau ada kekurangan, tapi saya akan berusaha memperbaiki.

berawal dari masalah di FB
saya memutuskan untuk membuat contoh datatable yang juga memiliki kemampuan sama seperti link tersebut.. kasusnya mungkin saya ambil list yang sudah saya buat dahulu yaitu provinsi.. dimana kita ingin dapat merubah nama provinsi

2016-04-10_21-29-51
tampilan awal

pada awalnya kita akan mendapatkan tampilan seperti ini. Lalu nanti kita ingin edit secara cepat … langsung ke fieldnya.. lalu kita bisa ketik dan save.

sumber yang wajib dibaca:
http://vitalets.github.io/x-editable/

seperti pada tutorial sebelumnya, anda wajib masuk ke bitbucket saya. alamat masih sama.. tapi mari baca perlahan-lahan dahulu.

MEMULAI

target awal
target awal

target awal kita adalah gambar berikut. ini adalah gambar datatable sederhana! dimana terdapat kolom id, kode, dan nama.

lalu target kita adalah membuat table sederhana ini. download saja file2nya dari bitbucket punyaku lalu usahakan untuk mengikuti tutorial sebelumnya hingga tutorial no 2 nya.

hasil dari tutorial itu adalah anda bisa membuat table provinsi dan kabupaten. dimana provinsi yang akan kita gunakan disini

Datatable bermasalah?

saat  lihat kodenya.. pasti anda lihat ada file 004?? itu adalah buatan orang.. lebih baik di ignore saja

datatable provinsi

buka link berikut (005-detailprovinsi.php )
maaf atas penamaan yang buruk.. tp saya tidak sempat membuat yang enak dibaca.. apabila tidak ada kendala maka akan keluar tampilan seperti di atas.. kita bahas alur saja. disini saya memakai jquery-ui (walau harus ku akui ada banyak pilihan di websiteny)

  • panggil semua css yang berhubungan
  • panggil semua js
  • pastikan moment.js ada!   ini yang bikin masalah sedari awal
  • pastikan table siap . ingat ada thead.. tfooter juga boleh ada kok
  • buat datatable provinsi..
  • ada option yang ditambahkan yaitu : drawCallback
  • pastikan drawCallback menjalankan fungsi.. tetapi untuk awal2.. comment saja biar tidak jalan.. tujuannya agar datatable anda muncul!
  • setelah muncul.. baru pastikan drawCallback ada
  • pastikan perintah ini ada. bila tidak maka kedepannya kita akan banyak mengetik?!?
    $.fn.editable.defaults.mode = ‘inline’;
  • target dari fungsi provEditable adalah 2 kolom yaitu kode dan nama . awalnya hanya nama tapi lalu kutambah dengan code
  • perhatikan option di dalamnya
    1. clear . tidak wajib
    2. placeholder . untuk memberi tulisan bila isinya kosong
    3. url . target untuk edit? tapi saya merasa tidak ada efeknya?

      ternyata pas dicoba memang ngak ada efeknya?

  • alamat url ada di atas jadi pastikan ada.. kemungkinan terpakai untuk tipe yang lain

Fungsi edittable

bila diperhatikan. kita dapat melihat bahwa target untuk edittable pada class nama_prov dan code_prov *sekali lagi saya memberi nama yang buruk*

$(‘.nama_prov’).editable({});

jadi yang harus kita lakukan adalah mengedit data datatable (dalam kasus ini ada di scripts/province2.php untuk memastikan pada bagian nama dan code memakai class.

  1. pada tutorial tertulis memakai <a> tetapi kita bisa memakai span
  2. berikan atribut penting seperti
    • data-name
    • data-pk . jangan data-id karena tidak akan diproses
    • data-type . masukkan text karena tutorial ini memakai text
    • data-url . link untuk melakukan update.. jangan mencontoh yang kutulis disana… pastikan alamatnya full jangan hanya sekedar update.php saja.. tambahkan hingga
      http://my.local/update.php
  3. lakukan hal yang sama untuk lainnya

fokus2apabila sebelumnya kita tidak memberikan kemampuan edittable, maka tidak ada underline di kolom tersebut! berikutnya adalah klik kolom yang memiliki underline dan akan muncul textbox untuk mengedit

UPDATE

pada tutorial ini masih mudah karena data-nama berisi target nama field (yang sebenarnya tidak boleh karena ini berhubungan dengan sql inject?!?) , juga data-pk yang merupakan id/kode dari field tersebut.

  • Target update adalah : 006-editProvince.php
  • didalamnya terdapat koneksi (wajib ada)
  • cek apakah view yang akan dibuka valid?
  • jalankan view bila sesuai
  • perhatikan bahwa field dan value dibaca langsung.. hati-hati karena bisa saja anda melakukan kesalahan penulisan
  • yang kurang dari code ini adalah cek kesalahan query
  • dan hati-hati bila anda lupa memasukkan pik!! atau id.. bisa terjadi semua data malah ke update semua!!

    karena barusan saya keupdate semua karena lupa ID nya

  • pastikan ada limit di query. saya baru tambahkan di offline dan blum di upload . mungkin besok atau lusa
  • saat selesai edit maka automatis tampilannya akan berubah menjadi nama yang di edit!! tapi apakah sudah berubah?
  • refresh halaman nya. caranya bisa dengan klik sortnya, ganti tipe / panjang halaman dll . Tidak perlu refresh F5.. lihat apakah sudah berhasil ganti?

KESIMPULAN

dengan bantuan jquery ini kita bisa cepat untuk edit banyak data. dibandingkan edit di form (berbeda halaman atau muncul sebagai popup), lebih enak bila edit di table langsung.

namun harap ingat ada sedikit bisa di bilang kekurangan. harapan saya adalah playsafe

  • catat nilai awal sebelum di ubah
  • buat history
  • pastikan yang dirubah jangan banyak-banyak
  • index data dengan optimal
  • dan lain-lain

saat tulisan ini selesai. saya akan mencoba option yang lain seperti

  • select
  • date
  • check
  • select2 ?!? hmm ini menarik

jangan lupa membaca tutorial datatable pertama saya di blog ini.. mirip dengan tutorial sebelumnya.. namun sebagai reminder.. ilmu boleh sama, tetapi implementasi harus lebih baik..

kalau kemarin ketik yang penting jadi.. sekarang harus ada validasi agar jadi lebih baik!

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s