Pertama-tama kita buat terlebih dahulu tabel MySQL, dengan struktur sebagai berikut :
CREATE TABLE `item_hapusmultipledata` (
`item_id` int(11) NOT NULL,
`item_nama` varchar(250) NOT NULL,
`item_kode` varchar(250) NOT NULL,
`item_deskripsi` text NOT NULL,
`item_harga` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COLLATE=latin1_swedish_ci;
Kemudian input data-data ke dalam tabel MySQL, pada contoh tutorial kali ini kita menggunakan data-data sebagai berikut :
CREATE TABLE `item_tambahmultipledata` (
`item_id` int(11) NOT NULL,
`item_nama` varchar(250) NOT NULL,
`item_kode` varchar(250) NOT NULL,
`item_deskripsi` text NOT NULL,
`item_harga` varchar(30) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COLLATE=latin1_swedish_ci;
Untuk membuat tampilan halaman depan untuk menampilkan interfacenay sebagai berikut :
<?php
$connect = mysqli_connect("DB-HOSTNAME", "DB-USERNAME", "DB-PASSWORD", "DB-NAME");
$query = "SELECT * FROM item_hapusmultipledata";
$result = mysqli_query($connect, $query);
?>
<!DOCTYPE html>
<html>
<head>
<title>Hapus banyak data dengan checkbox - Ajax Jquery - PHP - Mysql</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
.box
{
width:600px;
background:green;
color:white;
margin:0 auto;
padding:10px;
text-align:center;
}
</style>
</head>
<body>
<div class="container">
<br />
<h3 align="center">Hapus banyak data dengan checkbox - Ajax Jquery - PHP - Mysql</h3><br />
<div id="notifikasi"></div><br/><br />
<h3 align="center">DATA BARANG</h3><br />
<?php
if(mysqli_num_rows($result) > 0)
{
?>
<div class="table-responsive">
<table class="table table-bordered">
<tr>
<th>Nama Barang</th>
<th>Kode</th>
<th>Deskripsi</th>
<th>Harga</th>
<th><input type="checkbox" id="cek_semua" /> Cek Semua</th>
</tr>
<?php
while($row = mysqli_fetch_array($result))
{
?>
<tr id="<?php echo $row["item_id"]; ?>" >
<td><?php echo $row["item_nama"]; ?></td>
<td><?php echo $row["item_kode"]; ?></td>
<td><?php echo $row["item_deskripsi"]; ?></td>
<td><?php echo $row["item_harga"]; ?></td>
<td><input type="checkbox" name="item_id[]" class="hapus_barang" value="<?php echo $row["item_id"]; ?>" /></td>
</tr>
<?php
}
?>
</table>
</div>
<?php
}
?>
<div align="Left">
<button type="button" name="btn_delete" id="btn_delete" class="btn btn-success">Hapus</button>
</div>
</body>
</html>
<script>
$(document).ready(function(){
$('#notifikasi').hide();
$('#btn_delete').click(function(){
if(confirm("Are you sure you want to delete this?"))
{
var id = [];
$(':checkbox:checked').each(function(i){
id[i] = $(this).val();
});
if(id.length === 0) //tell you if the array is empty
{
alert("Please Select atleast one checkbox");
}
else
{
$.ajax({
url:'hapus.php',
method:'POST',
data:{id:id},
success:function()
{
for(var i=0; i<id.length; i++)
{
$('#cek_semua').prop('checked',false);
$(".box").remove();
$("#notifikasi").append('<div class="box">Data berhasil dihapus</div>');
$('#notifikasi').show();
$('#notifikasi').delay(3000).fadeOut('slow');
$('tr#'+id[i]+'').remove();
}
}
});
}
}
else
{
return false;
}
});
$('#cek_semua').click(function () {
$('.hapus_barang').prop('checked',this.checked);
});
$('.hapus_barang').click(function () {
if ($('.hapus_barang:checked').length == $('.hapus_barang').length){
$('#cek_semua').prop('checked',true);
}
else {
$('#cek_semua').prop('checked',false);
}
});
});
</script>
Untuk proses menghapus data, kita akan membuat sebuah file PHP, dan diberi nama , hapus.php
<?php
$connect = mysqli_connect("DB-HOSTNAME", "DB-USERNAME", "DB-PASSWORD", "DB-NAME");
if(isset($_POST["id"]))
{
foreach($_POST["id"] as $id)
{
$query = "DELETE FROM item_hapusmultipledata WHERE item_id = '".$id."'";
mysqli_query($connect, $query);
}
}
?>
Pada demo saya sertakan tombol "KEMBALIKAN DATA" untuk mengembalikan data-data default dan tidak ada dalam script yang didownload, silahkan modifikasi sendiri ya...
Setelah selesai bisa di coba programnya, untuk demo silahkan klik di bawah ini :
