Cara Membuat Multiple Delete dengan Checkbox dan AJAX pada PHP

Cara Membuat Multiple Delete dengan Checkbox dan AJAX serta efek animasinya pada PHP – Hai ketemu lagi dengan saya, setelah sebelumnya saya membahas tentang menghapus multipe data menggunakan checkbox dengan cara yang paling simpel atau paling mudah. Pada kesempatan kali ini saya akan melanjutkan postingan tersebut namun pada kali ini saya akan menggunakan Javascript / Ajax. Dengan menggunakan ajax kita bisa memberikan efek animasi fade out dan juga tentunya kita bisa menghapus data tanpa refresh halaman/loading. Cara ini cukup populer sekarang ini karena refresh halaman hanya akan membuat aplikasi terasa lambat karena harus me-load terus menerus.

Baca juga :

Cara Membuat Multiple Delete dengan Checkbox pada PHP

Langsung saja tanpa basa-basi sobat bisa ikuti langkah-langkah 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

 

Cara Membuat Multiple Delete dengan Ajax

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, pada bagian tag <head> kita isikan dengan kode dibawah

Jika sudah ada pada project sobat maka tidak perlu lagi. Untuk bootstrap.css tentu untuk mempercantik tampilan dan untuk jquery.min.js tentunya librari wajib jika ingin menggunakan Ajax. Karena untuk keperluan demo jadi saya contohkan dengan librari online namun jika sobat ingin menggunakan untuk development maka sobat perlu mendownloadnya terlebih dahulu supaya bisa berjalan offline atau sobat bisa download bersama project ini pada akhir postingan.

 

3. Masih di tag <head> tambahkan kode css dibawah ini untuk membedakan warna row yang sudah dicentang

 

4. Kemudian masih di index.php pada tag <body> isikan dengan kode dibawah ini

 

5. Pada bagian akhir kita membuat javascipt dan ajaxnya masih di file index.php pada tag <body> paling bawah tambahkan kode dibawah (Jika bingung urutanya bisa download project di akhir postingan)

Penjelasan :

– Pada kode dibawah adalah untuk mengubah warna row jika checkbox tercentang

– Pada kode dibawah adalah untuk action hapus datanya menggunakan ajax. Jika sobat tidak membutuhkan warning pertanyaan yes/no “Apakah Anda yakin ingin menghapus data ini?” maka sobat perlu menghapus if(confirm()){ … } else { }

 

– Pada kode dibawah untuk mencentang semua checkbox saat klik check all atau checkbox paling atas

 

6. Kemudian buat file delete.php dan isikan dengan script dibawah

 

7. Jalankan project sobat dan jika berhasil maka akan muncul seperti gambar dibawah

 

Cara diatas sebenarnya hampir sama seperti cara sebelumnya, hanya beda sedikit saja. Jika sobat masih bingung/masih error maka sobat bisa mendownload project dibawah ini. Jika ada pertanyaan silahkan tinggalkan komentar pada kolom komentar dibawah.

Sekian postingan saya tentang Cara Membuat Multiple Delete dengan Checkbox dan AJAX pada PHP. Jika ada salah kata saya mohon maaf dan jika ada pertanyaan silahkan tinggalkan pada kolom komentar dibawah.

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 *

seventeen − eight =