Membuat Tabel JSON Lengkap Dengan CRUD Ajax dan Popup

tabel JSON data with popup CRUD

Melanjutkan postingan yang lalu tentang membuat Tabel dengan JSON data, kali ini akan lebih lengkap dengan sistem CRUD yang telah di perbaiki dan lebih meningkatkan kinerja tabel JSON yang akan dibuat.

Postingan sebelumnya telah menerangkan bagaimana menampilkan data dari database dengan mengkonversi terlebih dahulu datanya menjadi format JSON lalu ditampilkan pada tabel bootstrap.

Dengan menampilkan data dengan JSON table, mengurangi loading data yang sangat lama jika kita menampilkan banyak data ke dalam tabel. JSON table yang ada pada postingan ini juga dilengkapi dengan CRUD ajax, CRUD popup dan Notifikasi bootstrap nan elegan menggunakan Jquery Timer.

Fungsi dari kombinasi semuanya adalah membuat kinerja dari web admin yang anda kelola menjadi sangat ringan karna mengurangi reload atau refresh page berlebihan disetiap aksinya. JSON dapat menampilkan data lebih ringan, ajax dapat melakukan pengiriman data tanpa reload halaman, popup mengurangi halaman edit dan tambah data yang berlebihan dan Jquery Timer memberikan tampilan notifikasi yang sangat menarik untuk di pandang mata.

Logika JSON table ini adalah sebagai berikut :

• Kita melakukan input data ke database melalui form input data yang dibuat menjadi popup input data.

• Menyimpan data dengan ajax untuk mengurangi reload halaman dan data tersimpan ke database.

• Menampilkan data yang tersimpan di database ke table bootstrap dengan JSON data. JSON data didapat saat melakukan query dari database lalu di encode menjadi JSON dan tampilkan ke tabel menggunakan Jquery.bootsrap.js sebagai library agar data dapat tampil di bootsrap table.

• Menambah menu edit dan delete di file php konversi data JSON, karna library Jquery yang digunakan tidak menyediakan menu edit dan delete.

• Setelah data tampil, memberikan fungsi pada menu edit menggunakan popup edit, memahami teknik mengirimkan id data ke popup css dan melakukan update data menggunakan ajax.

• Terakhir memberikan fungsi kepada menu delete menggunakan ajax popup dikombinasikan dengan css popup, memahami event click, show dan hide pada javascript.

• Sebagai pelengkap membuat popup notifikasi bootstrap dengan ajax timer yang berfungsi memberikan informasi jika ada aksi yang error ataupun berhasil. Dengan ajax timer notifikasi akan hilang dengan sendiri setelah beberapa saat tampil di layar.

Setelah memahami Logika JSON table, saatnya kita menerapkan kedalam script. Untuk penyimpanan data kita buat database yang saya misalkan dengan nama user, silahkan gunakan script dibawah untuk import databasenya.



Lalu file koneksi.php untuk menghubungkan database dengan web yang akan kita buat, dibawah ini script koneksi.

Lanjut untuk membuat tampilan utamanya yaitu tampilan dimana nanti akan ditampilkan tabel JSON beserta datanya, dibawah ini scrip tampilannya. Jangan lupa menggunakan jquery bootsrap-table.js dan bootstrap-table.css yang dapat anda search di google.



Kemudian lakukan pemanggilan data dari database ke file konversi JSON, pada file ini data yang akan ditampilkan dirubah dulu menjadi format JSON. Dibawah ini script untuk konversinya dan pada file ini juga ditambahkan menu edit dan delete.



Untuk penambahan data dan edit data menggunakan popup css yang membuat web admin menjadi lebih menarik, berikut script popupnya dan juga script css nya.



Agar setiap aksi tidak mereload halaman kita menggunakan ajax di setiap aksinya, dibawah ini scrip ajax untuk penambahan data, edit data dan juga delete data.


Lalu setelah melewati ajax tidak lupa kita membuat script query untuk berhubungan dengan database melalui mysql guna menyimpan data, update data dan juga delete data. Dibawah ini adalah script prosesnya.



Dan terakhir sebagai pelengkap kita menambahkan notifikasi ala bootstrap yang telah di modifikasi menjadi popup css dan ajax timer. Dibawah ini script untuk membuat notifikasi atau alertnya.



Setelah semua script selesai, program anda sudah siap untuk di try running. Pastikan semua plugin terpasang dengan benar agar anda dapat melihat event-event disetiap klik nya. Dibawah ini ada video demo yang bisa menjadi panduan anda untuk mendapatkan hasil maksimal.

Jika anda mengalami kesulitan silahkan kontak admin di menu kontak di bawah halaman ini untuk dapat berkomunikasi langsung dengan admin dan mendapatkan solusi. Jangan segan jangan sungkan, kita belajar kita bisa. Salam PHP INDONESIA.