Cara Membuat Multiple Edit Tabel dengan JQuery PHP

Cara Membuat Multiple Edit Tabel dengan JQuery PHP – Hai ketemu lagi dengan saya dan pada kesempatan kali ini saya akan membahas tentang membuat multiple edit data yang ada pada tabel menggunakan JQuery dan plugin TableEdit. Plugin ini sudah pernah saya bahas sebelumnya namun masih penggunaan dasarnya saja dan hanya mengedit 1 row saja. Pada postingan kali ini saya ingin membahas juga untuk cara mengedit multiple row. Dengan begini user tidak perlu lagi repot-repot untuk ke menu lain untuk mengedit datanya dan cara ini juga cocok untuk user yang terbiasa mengolah data dengan excel. Hal ini pun pernah saya alami saay membuat project yang mana usernya sudah bertahun-tahun mengolah datanya menggunakan excel, maka saat kita buat menggunakan aplikasi yang berntuknya form-form seperti itu user akan kagok dan malah beranggapan dengan adanya aplikasi malah jadi tambah repot tanpa memikirkan manfaat ke depannya dan hanya karena masalah sepele seperti ini.

Baca juga :

Cara Membuat Tabel yang bisa Diedit dengan JQuery TableEdit PHP

Cara Membuat Multiple Delete dengan Checkbox dan AJAX pada PHP

Jika sobat belum melihat postingan yang pertama mungkin sobat harus melihatnya terlebih dahulu agar tidak bingung di postingan ini. Langsung saja tidak usah bertele-tele saya jelaskan langkah-langkahnya dibawah ini.

Membuat Database MySQL

1. Pertama yang WAJIB ada yaitu sobat harus membuat sebuah database. Sobat bisa menggunakan tools bantu seperti navicat, heidi SQL atau lainnya. Sobat juga bisa membuatnya dengan mengakses url localhost/phpmyadmin -> klik tab Database dan tuliskan db_dewankomputer-> Klik tombol Create/Buat.

 

2. Buat tabel untuk mengetesnya dengan mengetikkan query dibawah ini pada tab SQL lalu klik tombol Kirim/Go

 

3. Untuk mencobanya agar sobat tidak memasukkan satu persatu maka sobat eksekusi saja query sql dibawah ini

 

Membuat Multiple Edit pada Table

1.Buat file koneksi.php yang berfugsi untuk menyambungkan aplikasi dengan database dan isikan dengan kode dibawah

isikan sesuai dengan host, user, password, dan nama database sobat. Untuk contoh di bawah ini saya berinama database dengan nama db_dewankomputer.

Jika sobat ingin tahu cara mengkoneksikan dengan dua database atau lebih dalam satu aplikasi maka sobat bisa kunjungi postingan dibawah ini

Cara Membuat Koneksi dengan Database MySQL bisa Dua atau Lebih Koneksi database/Multiple Connection dalam Satu Host maupun beda Host

 

2. Buat file index.php dan masukkan librari css dan js pada tag <head> seperti dibawah ini

Untuk librari css dan js saya menggunakan online karena hanya untuk keperluan demo, jika sobat ingin membuatnya untuk development maka sobat perlu mendownloadnya terlebih dahulu atau sobat bisa mendowload bersama project ini diakhir postingan. Karena kita menggunakan Ajax jadi kita wajib untuk memasukkan jquery.js/jquery.min.js.

 

3. Masih di index.php, selanjutnya kita membuat susunan tabelnya. Tabel kita masukkan ke dalam tag <form>…</form>, hal ini karena kita nanti akan menggunakan ajax form submit. Itu saja sudah cukup karena nantinya kita akan membuat array dalam mengirim datanya sehingga kita tinggal me-loopingnya saja di form actionnya.

 

4. Selanjutnya membuat javascript/ajax untuk menampilkan datanya, ini masih di file index.php atau jika sobat ingin memisahkan tentu bisa membuat file .js yang kemudian di include-kan ke index.php.

Penjelasan :

Pada kode diatas merupakan script untuk menampilkan datanya ke dalam tabel. Pada contoh kali ini saya menggunakan ajax untuk menampilkan datanya. Tentu karena ini hanya contoh saya hanya menampilkannya standar tanpa searching dan pagination atau lainnya. Jika sobat ingin menggunakan untuk project yang sesungguhnya tentu dikombinasikan dengan searching dan pagination yang mana itu juga sudah sering saya bahas. Jika sobat masih bingung tentang searching dan pagination maka tinggal cari saja di pencarian blog ini.

 

Selanjutnya pada script diatas ini adalah script untuk mengubah isi pada record tabel menjadi sebuah input text atau combobox. Sobat juga bisa mengubah menjadi textarea, radio button, checkbox sesuai kebutuhan. Saya sudah memberikan caranya tinggal sobat kembangkan sendiri. Seperti yang terlihat pada script diatas, jika checkbox tercentang maka semua yang 1 baris dengan checkbox tersebut akan berubah menjadi input text dan jika tidak tercentang maka akan kembali hanya tulisan seperti sebelumnya.

 

Sedangkan pada script terakhir pada javascriptnya kita membuat ajax yang berfungsi sebagai action dari form tersebut. karena kita menggunakan ajax maka kita bisa membuatnya lebih enak dipakai karena aplikasi kita juga bisa kita ubah tanpa harus merefresh halaman. Pada script diatas kita berikan validasi jika checkbox ada yang tercentang maka ajax akan dijalankan, dan jika tidak ada yang tercentang maka tidak usah dijalankan. Dan jika berhasil diupdate semua datanya maka kita memanggil ‘fetch_data();’ yang berfungsi untuk merefresh datanya tanpa harua loading halaman. Inilah fungsinya kita membuat function fetch_data() jadi kita tidak perlu menuliskan datanya berkali-kali, karena kita cukup membuat function dan kita panggil saat load, update berhasil maupun jika ada tombol saat berhasil dihapus kita cukup memanggil function fetch_data() dan data otomatis akan terefresh.

 

5. Melihat dari javascript pada nomer 4, selanjutnya kita perlu membuat fileĀ  ambil_data.php, karena kita menggunakan native maka hanya perlu membuat file saja jika sobat menggunakan cara OOP/MVC bahkan jika sobat menggunakan framework seperti CodeIgniter, Laravel, dll maka sobat hanya tinggal perlu menyesuaikan backend aplikasinya saja yang mana hasil ajaxnya adalah sebuah json. Caranya adalah sebagai berikut

 

6. Selanjut adalah membuat file untuk actionnya yaitu sebagai berikut

Seperti yang bisa dilihat diatas kita melooping query update-nya karena saat kita mengirimkan datanya pun adalah sebagai array. Untuk penulisan querynya pun saya selalu menggunakan prepare statement karena cara ini adalah cara paling aman untuk menghindari sql injection. Namun akan lebih aman lagi jika kita menggunakan Header Ajax dan Session Login.

 

7. Jika kita jalankan maka akan menjadi seperti gambar dibawah

 

Saat kita load pertama-kali maka akan normal seperti biasa namun jika kita klik checkbox maka yang tadinya hanya label berubah menjadi input text dan combobox. Sobat pun bisa membuatnya berubah menjadi radio button, checkbox, textarea atau yang lainnya sesuai kebutuhan. Dan jika klik tombol Multiple Update maka 3 data yang dicentang akan terupdate otomatis dan akan merefresh tanpa me-loading halaman karena kita menggunakan Ajax.

Sekian postingan saya sobat bisa lihat postingan saya yang lain banyak juga yang berhubungan dengan Ajax yang mungkin bisa di masukkan ke dalam project sobat, sampai ketemu lagi pada postingan selanjutnya.

 

Jika sobat ingin mendownload tutorial diatas maka sobat bisa klik link dibawah ini :

Sampai jumpa pada postingan saya selanjutnya..

Leave a Reply

Your email address will not be published. Required fields are marked *

twenty − 11 =