Sekilas cuman CRUD doang kan ya. Bisa nambah, bisa save, bisa delete, bisa edit inline, sama bisa reset. Walaupun begitu, contoh ini merupakan contoh yang paling penting dan paling urgent :v Coba bayangkan, misal kita ingin bikin aplikasi perpustakaan atau aplikasi rumah sakit atau apalah. Pastinya kita butuh nambah petugas, nambah buku, edit nama petugas, edit nama dokter, hapus buku yang sudah hilang, dan lain lain. Nah, kali ini di Fastplaz nya sendiri khususnya di githubnya ada repo yang khusus buat example. Nah salah satunya ini. Oke langsung saja.
1. Di dalam folder source terdapat beberapa folder seperti ini. Nah yang menjadi folder utama yaitu main.pas. Kenapa ekstensionnya .pas? Yaiyalah kan Fastplaz kan berbasis Pascal -_-. Oya coba lihat di folder src. Terdapat contacts_controller. Ini merupakan controller nya dari aplikasi contacts_grid ini. Controller ini buat apa? Sama kayak framework pada umumnya. Controller ini buat ngatur jalannya program. Query juga dimasukkan sini.
Berikut penampakan main.pas nya http://pastebin.com/ExBvYFQR .Nah untuk file main.pas nya kita biarkan saja :v Karena nggak ngefek :v Ngefek ding, tapi cuman kalau misal kita pengen benerin halaman utamanya. Kalau mau edit controllernya di main.pas ini terus tinggal kita bikin file di modulnya. Kemudian buka folder src. Nah ada contacts_controller dan contacts_modal. Nah di contacts_controller, penampakannya seperti ini http://pastebin.com/tcWm0anm
Nah di sekrinsyut an di atas merupakan sekrinsyutan yang udah diubah :v Pertamanya kan dia dijadikan json array. Nah sekarang, diubah jadi json object :o. Kenapa diubah? Noh, bisa dilihat sendiri syntax di atas. Dan lihat apa perbedaannya sama yang barusan kalian download di github. Enak yang mana query nya? Dijamin enak yang ini :v Nah, pada awalnya saya udah seneng nih yeeeyyy querynya sama kayak query sql biasa. Yeey.. Bahagiaa.. Tiba- tiba jleb. Jsonnya ga bisa dipangil. No row in the table. Oke fix. Coba bisa dibandingkan bentuk jsonnya.
Json yang lama = json bentuk array
Json yang baru = json bentuk object
Nah apa perbedaannya? Coba cari disini. DIBACA!
Oke kalau udah tau perbedaannya, berarti udah tau masalah yang akan kita hadapi dong ya. Yaitu, model pemanggilan json array berbeda dengan json object. Nah disini juga, saya harus menampilkan data hasil query kedalam suatu tabel. Bukan tabel biasa saudara saudara. Di contoh, om Luri menggunakan jquery simple datagrid. Nah sekarang, suruh ganti pake jquery DataTable. Oh my God. Gue males nyentuh jquery -_-. Oke, karena saya wanita tangguh maka akhirnya saya oprek jugak. Nah disini ada beberapa syntax yang bisa dilihat untuk pengubahan dari jquery simple datagrid ke jquery Data Table.
1. Penampakan ini merupakan form nya. Setiap inputan memiliki value sendiri- sendiri. Value tersebut akan terintegrasi dengan file Contacts_ controller. Jadi waktu user mengetikkan fullname, maka nanti di contacts_controller, fullname tersebut akan terpanggil dengan $Contacts.name.
2. Ini penampakan untuk table nya. Di sini perlu diingat table id nya =contacts-table. Data-url di sini untuk ngakses json nya di ./contacts?act=data.
3. Nah ini script yang dibawah inilah kunci segalanya :v Akhirnya jsonnya bisa dimasukin ke table :v Kok bisa? Nah ini json yang udah dikeluarin di url tadi terus dipanggil lewat di ajax. Nah terus json nya yang udah dipanggil lewat ajax tadi dimasukin ke jquery DataTable. Ohiya jangan lupa id table nya tadi ._. Untuk kode nya bisa dilihat di sini http://pastebin.com/aWuCRa6S
4. Nah untuk kode di bawah ini fungsinya buat apa? Fungsinya agar data yang udah tampil di DataTable tadi bisa ke select :v Nah pas awal- awal pas nggak ada fungsi selected ini tadi, data hasil query bisa ditampilin. Bisa. Tapi nggak bisa di select :v Nah berhubung udah ada selected ini jadi bisa diselect :v Nah muncul masalah baru lagi. Ini bener- bener meres otak :v Masalahnya yang baru adalah data yang udah ke select, nggak bisa tampil di form nya. Oke fix. Setelah bertapa kesana kemari akhirnya saya menemukan solusi :v yaitu row = table.row[this] data. Lalu dimasukin ke val(row.id), row.nama dll. Fix. Akhirnya bisa. Bahagia ._.
5. Nah akhirnya bisa muncul yeeey. Bisa diselect yeey ^^. Nah masalah muncul lagi. Save nya nggak bisa. Delete nya nggak bisa. Edit nya nggak bisa. Yang bisa cuman reset doang -_-
6. Berikut syntax save nya. Ohiya jangan lupa liat yang bagian contacts_controller yang save. Coba dicermati. Kalau reset nya udah bener.
7. Nah ini syntax delete nya. Jangan lupa dataType nya diubah ke json dulu.
8. Di bawah ini merupakan fungsi. Fungsi sama dengan function :v Jadi disini merupakan fungsi yang akan dipanggil jika delete, save, edit, berhasil. Ohiya jangan lupa di fnDestroy pada datatable nya. Biar nanti nggak nge loop :v
Finally, jadi jugak :v
Untuk refensi bisa dibaca datatables.net. Official website ini sangat perlu dibaca dengan baik- baik dan teliti. Kadang hal kecil sangat berharga dan membuat error kita teratasi ._.
Tidak ada komentar:
Posting Komentar