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
CREATE TABLE `tbl_karyawan` ( `id` int(11) NOT NULL AUTO_INCREMENT, `nama_lengkap` varchar(50) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL, `alamat` text CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL, `jenkel` varchar(10) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL, `jabatan` varchar(100) CHARACTER SET latin1 COLLATE latin1_swedish_ci NOT NULL, `umur` int(11) NOT NULL, `foto` varchar(255) CHARACTER SET latin1 COLLATE latin1_swedish_ci NULL DEFAULT NULL, PRIMARY KEY (`id`) USING BTREE )
3. Untuk mencobanya agar sobat tidak memasukkan satu persatu maka sobat eksekusi saja query sql dibawah ini
INSERT INTO `tbl_karyawan` VALUES (1, 'Jono Jondah', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Supir', 36, 'avatar1.png'); INSERT INTO `tbl_karyawan` VALUES (2, 'Tini Skak', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Programmer', 24, 'avatar3.png'); INSERT INTO `tbl_karyawan` VALUES (3, 'Jini oh jini', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Service technician', 262, 'avatar3.png'); INSERT INTO `tbl_karyawan` VALUES (4, 'Slamet', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Office Boy', 32, 'avatar1.png'); INSERT INTO `tbl_karyawan` VALUES (5, 'Sule Rharjo', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Akuntan', 29, 'avatar2.png'); INSERT INTO `tbl_karyawan` VALUES (6, 'Cristiano Ronaldinho', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Systems programmer', 32, 'avatar2.png'); INSERT INTO `tbl_karyawan` VALUES (7, 'Angelina Ozawa', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Sekertaris', 38, 'avatar3.png'); INSERT INTO `tbl_karyawan` VALUES (8, 'Titin', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Perempuan', 'Konsultan', 2823, 'avatar3.png'); INSERT INTO `tbl_karyawan` VALUES (9, 'Pongki', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Analis', 6413, 'avatar2.png'); INSERT INTO `tbl_karyawan` VALUES (10, 'Budun', 'Jalan Rajawali Cilacap Selatan Jawa Tengah', 'Laki-laki', 'Fotografer', 331, 'avatar1.png');
Cara Membuat Multiple Delete dengan Ajax
1.Buat file koneksi.php yang berfugsi untuk menyambungkan aplikasi dengan database dan isikan dengan kode dibawah
<?php
define('HOST','localhost');
define('USER','root');
define('PASS','');
define('DB1', 'db_dewankomputer');
// Buat Koneksinya
$db1 = new mysqli(HOST, USER, PASS, DB1);
?>
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
2. Buat file index.php, pada bagian tag <head> kita isikan dengan kode dibawah
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
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
<style>
.removeRow{
background-color: #FF6347;
color:#FFFFFF;
}
</style>
4. Kemudian masih di index.php pada tag <body> isikan dengan kode dibawah ini
<nav class="navbar navbar-dark bg-primary">
<a class="navbar-brand text-white" href="index.php">
Dewan Komputer
</a>
</nav>
<div class="container">
<h3 align="center" class="mb-3 mt-3">Menghapus Multiple Data Menggunakan Ajax pada PHP</h3>
<?php
include 'koneksi.php';
$query = "SELECT * FROM tbl_karyawan";
$dewan1 = $db1->prepare($query);
$dewan1->execute();
$res1 = $dewan1->get_result();
if($res1->num_rows > 0){
?>
<div align="right">
<button type="button" name="btn_delete" id="btn_delete" class="btn btn-danger mb-4 mt-4">Delete Selected</button>
</div>
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Nama Lengkap</th>
<th>Jenis Kelamin</th>
<th>Alamat</th>
<th><input type="checkbox" class="form-control check_all"/></th>
</tr>
</thead>
<tbody>
<?php while($row = $res1->fetch_assoc()){ ?>
<tr class="check" id="<?php echo $row["id"]; ?>">
<td><?php echo $row["nama_lengkap"]; ?></td>
<td><?php echo $row["jenkel"]; ?></td>
<td><?php echo $row["alamat"]; ?></td>
<td>
<input type="checkbox" name="id[]" class="form-control chk_boxes1" value="<?php echo $row["id"]; ?>"/>
</td>
</tr>
<?php } ?>
</tbody>
</table>
</div>
<?php } ?>
<div class="text-center">© <?php echo date('Y'); ?> Copyright:
<a href="https://dewankomputer.com/"> Dewan Komputer</a>
</div>
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)
<script>
$(document).ready(function(){
$('.chk_boxes1').click(function(){
if($(this).is(':checked')){
$(this).closest('tr').addClass('removeRow');
} else {
$(this).closest('tr').removeClass('removeRow');
}
});
$('#btn_delete').click(function(){
if(confirm("Apakah Anda yakin ingin menghapus data ini?")){
var id = [];
$(':checkbox:checked').each(function(i){
id[i] = $(this).val();
});
if(id.length === 0){
alert("Pilih minimal satu data");
}else{
$.ajax({
url:'delete.php',
method:'POST',
data:{id:id},
success:function(){
for(var i=0; i<id.length; i++){
$('tr#'+id[i]+'').fadeOut('slow');
}
}
});
}
} else {
return false;
}
});
$('.check_all').click(function() {
$('.chk_boxes1').prop('checked', this.checked);
if($(this).is(':checked')){
$('.check').addClass('removeRow');
} else {
$('.check').removeClass('removeRow');
}
});
});
</script>
Penjelasan :
– Pada kode dibawah adalah untuk mengubah warna row jika checkbox tercentang
$('.chk_boxes1').click(function(){
if($(this).is(':checked')){
$(this).closest('tr').addClass('removeRow');
} else {
$(this).closest('tr').removeClass('removeRow');
}
});
– 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 { }
$('#btn_delete').click(function(){
if(confirm("Apakah Anda yakin ingin menghapus data ini?")){
var id = [];
$(':checkbox:checked').each(function(i){
id[i] = $(this).val();
});
if(id.length === 0){
alert("Pilih minimal satu data");
}else{
$.ajax({
url:'delete.php',
method:'POST',
data:{id:id},
success:function(){
for(var i=0; i<id.length; i++){
$('tr#'+id[i]+'').fadeOut('slow');
}
}
});
}
} else {
return false;
}
});
– Pada kode dibawah untuk mencentang semua checkbox saat klik check all atau checkbox paling atas
$('.check_all').click(function() {
$('.chk_boxes1').prop('checked', this.checked);
if($(this).is(':checked')){
$('.check').addClass('removeRow');
} else {
$('.check').removeClass('removeRow');
}
});
6. Kemudian buat file delete.php dan isikan dengan script dibawah
<?php
include 'koneksi.php';
if(isset($_POST["id"])){
foreach($_POST["id"] as $id){
$query = "DELETE FROM tbl_karyawan WHERE id=?";
$dewan1 = $db1->prepare($query);
$dewan1->bind_param("i", $id);
$dewan1->execute();
}
}
?>
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 :