Dalam posting tutorial ini kita akan melihat bagaimana cara untuk menghapus baris dari tabel MySQL dengan Bootstrap Modal di PHP. Itu merupakan proses yang paling umum dari sistem CRUD (create, read, update dan delete), tapi seperti yang saya beri judul pada postingan ini, kita akan mengatur dialog konfirmasi menggunakan bootstrap dan bootbox daripada menggunakan dialog konfirmasi Javascript, dalam hal UI bootstrap memberikan UI jauh lebih baik daripada dialog JavaScript, dan mendapatkan konfirmasi tentang penghapusan data selalu baik untuk memastikan menghapus data atau tidak.
Yang saya gunakan di sini adalah plugin bootbox untuk kustom dialog bootstrap dan proses menghapus dilakukan dengan jQuery Ajax dengan efek FadeOut. Kamu juga dapat melihat live demo tutorial sederhana ini sehingga kamu bisa mendapatkan ide, lalu membaca tutorial ini dan men-download kode dari link yang diberikan dan jika kamu pernah menggunakan bootstrap untuk situs kamu, kamu harus mencoba ini, mari kita mulai ngoding.
Catatan: Bootbox.js
Bootbox.js adalah library JavaScript kecil yang memungkinkan kita untuk membuat kotak dialog yang terprogram menggunakan Bootstrap modal, tanpa harus khawatir tentang membuat, mengelola atau menghapus setiap elemen DOM yang diperlukan. Bootbox.js didesain untuk membuat penggunaan Bootstrap modal lebih mudah!
Membuat table database
Berikut ini adalah tabel Contoh Barang dengan data Dumping, database yang telah saya digunakan di sini bernama “codingan”, maka dari itu buatah database di PHPMyAdmin kamu dan copy paste kode SQL berikut ini untuk membuat tabel tb_barang dengan data demo. Atau kamu bisa meng-import file tb_barang.sql ke database yang sudah kamu buat jika kamu lebih suka cara ini.
CREATE TABLE IF NOT EXISTS `tb_barang` ( `id_barang` int(11) NOT NULL, `nama_barang` varchar(40) NOT NULL ) ENGINE=InnoDB AUTO_INCREMENT=9 DEFAULT CHARSET=latin1; INSERT INTO `tb_barang` (`id_barang`, `nama_barang`) VALUES (1, 'Asus Zenfone 3S'), (2, 'Apple iPhone 7 Plus'), (3, 'Samsung Galaxy S7 edge'), (4, 'HTC 10'), (5, 'Sony Xperia Z5 Premium'), (6, 'Microsoft Lumia 650'), (7, 'Google Pixel'), (8, 'Nokia 3310'); ALTER TABLE `tb_barang` ADD PRIMARY KEY (`id_barang`); ALTER TABLE `tb_barang` MODIFY `id_barang` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=9;
Konfigurasi database
Ini adalah kode untuk konfigurasi/koneksi ke databse dengan ekstensi PDO, edit file berikut sesuai kredensial database kamu dan simpan dengan nama “dbconfig.php”.
<?php
$DBhost = "localhost";
$DBuser = "root";
$DBpass = "";
$DBname = "codingan";
try{
$DBcon = new PDO("mysql:host=$DBhost;dbname=$DBname",$DBuser,$DBpass);
$DBcon->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}catch(PDOException $ex){
die($ex->getMessage());
}
Menampilkan data dari table MySQL
Berikut ini adalah kode sederhana untuk menampilkan detail produk dari tabel tb_barang, kolom terakhir disini adalah untuk menghapus data dengan tag anchor bersamaan dengan attribut data-id HTML5 yang menyimpan ID barang dan ini akan memicu class hapus_barang menggunakan jQuery, dengan menggunakan ini kita bisa mendapatkan ID barang untuk menghapus dari tabel.
<table class="table table-bordered table-condensed table-hover table-striped">
<tr>
<th>#ID</th>
<th>Nama Barang</th>
<th>Aksi</th>
</tr>
<?php
require_once 'dbconfig.php';
$query = "SELECT id_barang, nama_barang FROM tb_barang";
$stmt = $DBcon->prepare( $query );
$stmt->execute();
while ($row=$stmt->fetch(PDO::FETCH_ASSOC) ) {
extract($row);
?>
<tr>
<td><?php echo $id_barang; ?></td>
<td><?php echo $nama_barang; ?></td>
<td>
<a class="hapus_barang" data-id="<?php echo $id_barang; ?>" href="javascript:void(0)">
<i class="glyphicon glyphicon-trash"></i>
</a></td>
</tr>
<?php
}
?>
</table>
Kustom dialog
Ini adalah kustom dialog yang saya gunakan di sini untuk melakukan beberapa callback ajax terutama untuk menghapus data menggunakan metode ajax. dalam fungsi tombol hapus saya membuat panggilan ajax untuk menghapus baris SQL yang diklik saat ini.
bootbox.dialog({
message: "Anda yakin ingin menghapus?",
title: "<i class='glyphicon glyphicon-trash'></i> Hapus!",
buttons: {
success: {
label: "Batal",
className: "btn-success",
callback: function() {
$('.bootbox').modal('hide');
}
},
danger: {
label: "Hapus!",
className: "btn-danger",
callback: function() {
$.post('hapus.php', { 'delete':pid })
.done(function(response){
bootbox.alert(response);
parent.fadeOut('slow');
})
.fail(function(){
bootbox.alert('Ada yang salah...');
})
}
}
}
});
Kode jQuery untuk menghapus data
Menggunakan $.ajax
Metode jQuery AJAX ini untuk menghapus baris yang diklik tanpa me-refresh halaman, ini harus ada dalam fungsi callback dialog penghapusan ini, kamu dapat melihat kode di bawah. Jika baris dihapus dialog lain akan muncul yang merupakan peringatan untuk baris yang telah berhasil diapus dan baris tersebut akan menghilang dengan efek FadeOut.
$.ajax({
type: 'POST',
url: 'hapus.php',
data: 'hapus='+pid
})
.done(function(response){
bootbox.alert(response);
parent.fadeOut('slow');
})
.fail(function(){
bootbox.alert('Ada yang salah...');
})
Menggunakan $.post untuk melakukan hal yang sama
$.post('hapus.php', { 'hapus':pid })
.done(function(response){
bootbox.alert(response);
parent.fadeOut('slow');
})
.fail(function(){
bootbox.alert('Ada yang salah...');
})
Hapus.php
File ini akan dipanggil melalui ajax dan setelah mendapatkan id dari baris yang diklik itu akan menghapus baris dan menampilkan pesan penghapusan barang pada kotak peringatan sebagai respon.
<?php
require_once 'dbconfig.php';
if ($_REQUEST['hapus']) {
$pid = $_REQUEST['hapus'];
$query = "DELETE FROM tb_barang WHERE id_barang=:pid";
$stmt = $DBcon->prepare( $query );
$stmt->execute(array(':pid'=>$pid));
if ($stmt) {
echo "Barang berhasil dihapus...";
}
}
Bagaimana itu terjadi:
$('.hapus_barang').click(function(e){ : Menghapus barang yang diklik.
var pid = $(this).attr('data-id'); : Mendapatkan ID barang.
var parent = $(this).parent("td").parent("tr"); : Membuat efek FadeOut dari baris <tr> yang diklik.
Berharap kalian menyukai tutorial ini, dan jangan lupa untuk berbagi tutorial ini dengan teman-teman kamu.
