Konfirmasi delete dalam tutorial ini diimplementasikan dalam proses penghapusan sebuah baris pada tabel yang menyajikan informasi tentang student .
Jendela yang memunculkan suatu pemberitahuan apakah kita akan menghapus sesuatu atau tidak, kita namakan confirm dialog. Sedangkan jendela yang mengingatkan kita bahwa proses delete (penghapusan) telah selesai dinamakan alert dialog.
Proses penyajian confirm dialog dan alert dialog akan menggunakan Modal pada Bootstrap. Bagi yang belum mengetahui apa itu Modal ?. Silahkan baca tutorial berikut : Cara Membuat Modal Pada Bootstrap. Penggunaan modal dalam tutorial memunculkan konfirmasi delete kali ini, kita akan menggunakan bantuan librari Bootbox.js yang merupakan librari yang membantu kita dalam pengelolaan bootstrap modal.
Berikut ini adalah output yang akan kita kerjakan dalam tutorial kali ini, seperti yang ditunjukkan oleh Gambar.1 dibawah ini yang memunculkan confirm dialog :
Pada saat bagian yang kita delete telah berhasil dilakukan, maka akan muncul alert dialog seperti Gambar.2 dibawah ini :
Langkah-langkahnya
1. Create DatabaseLangkah pertama kita membuat database untuk menampung data-data tentang student yang terdiri dari
id_student dan student_name. Dalam contoh ini databasenya diberinam student_demo dengan nama tabel adalah student seperti script sql dibawah ini :
CREATE TABLE IF NOT EXISTS `student` (
`id_student` bigint(10) NOT NULL,
`student_name` varchar(50) NOT NULL,
PRIMARY KEY (`id_student`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO `student` (`id_student`, `student_name`) VALUES
(5112100001, 'Andi Fityar'),
(5112100002, 'Gilang Marsul'),
(5112100003, 'Dina Lestari'),
(5112100004, 'Budianto'),
(5112100005, 'Rahayu Lestari'),
(5112100006, 'Umar Bakri'),
(5112100007, 'Rachel Salva'),
(5112100008, 'Doni Saharo'),
(5112100009, 'Putria Marsha'),
(5112100010, 'Desi Mandari'),
(5112100011, 'Dariaman Parvi'),
(5112100012, 'Faisal Samuel');2. Create file koneksi.php
File ini memiliki fungsi untuk membangun komunikasi dengan database seperti yang ditunjukkan oleh script php dibawah ini :
<?php
$con=mysqli_connect("localhost","root","","student_demo");
?>3. Create file modalkonfirmasi.php
Tahap selanjutnya kita membuat halaman utama yang akan menampilkan tabel tentang student (pelajar) , dimana data-datanya berupa id_student dan student_name dipanggil dari dari database MySQL.
Dalam file ini, kita juga akan memanggil librari bootbox.min.js yang mempermudah kita dalam pengaturan modal boostrap. File-file lainnya yang dipanggil seperti informatika.css hanyalah bagian untuk mempercantik tampilan (bukan inti dari tutorial ini).
Dalam contoh tutorial ini kita memberinama dengan modalkonfirmasi.php. Berikut ini adalah kode programnya :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="ilmu-detil.blogspot.com">
<title>Bootstrap Modal Confirmation</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/ilmudetil.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="assets/js/bootbox.min.js"></script>
<script type="text/javascript" src="delete.js"></script>
</head>
<body>
<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="index.html">
Pusat Ilmu Secara Detil</a>
</div>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-left">
<li class="clr1 active"><a href="index.html">Home</a></li>
<li class="clr2"><a href="">Programming</a></li>
<li class="clr3"><a href="">English</a></li>
</ul>
</div>
</div>
</div>
</br></br></br></br>
<div class ="container">
<div class="row">
<div class="col-md-9">
<table class="table table-bordered table-condensed table-hover table-striped">
<tr>
<th>No</th>
<th>ID Student</th>
<th>Name</th>
<th>Action</th>
</tr>
<?php
require_once 'koneksi.php';
$query = "SELECT *FROM student LIMIT 6";
$result = mysqli_query($con, $query);
$no=0;
while($row=mysqli_fetch_array($result))
{
$no++;
echo "<tr>";
echo "<td>$no</td>";
echo "<td>".$row['id_student']."</td>";
echo "<td>". $row['student_name'] . "</td>";
echo "<td><a class='delete_student' data-student-id=".$row['id_student']." href='javascript:void(0)'>
<i class='glyphicon glyphicon-trash'></i>
</a>
</td>";
echo "</tr>";
}
?>
</table>
</div>
</div>
</div>
</body>
</html>4.Create file delete.js
Dalam file delete.js, kita menghandle proses klik
id student yang kemudian disimpan dalam variabel studentid. Setelah itu file delete.js akan menghubungi file deleterecord.php dengan mengirimkan nilai dari variabel studentid. Nilai dari variabel studentid disimpan dalam data delete.
$(document).ready(function(){
$('.delete_student').click(function(e){
e.preventDefault();
var studentid = $(this).attr('data-student-id');
var parent = $(this).parent("td").parent("tr");
bootbox.dialog({
message: "Are you sure you want to Delete ?",
title: "<i class='glyphicon glyphicon-trash'></i> Delete !",
buttons: {
success: {
label: "No",
className: "btn-success",
callback: function() {
$('.bootbox').modal('hide');
}
},
danger: {
label: "Delete!",
className: "btn-danger",
callback: function() {
$.ajax({
type: 'POST',
url: 'deleterecord.php',
data: 'delete='+studentid
})
.done(function(response){
bootbox.alert(response);
parent.fadeOut('slow');
})
.fail(function(){
bootbox.alert('Error....');
})
}
}
}
});
});
});5.Create file deleterecord.php
File ini mengeksekusi proses penghapusan terhadap sebuah baris tabel yang telah dipilih pada proses sebelumnya, dimana id student yang dikirimkan oleh data delete akan diperiksa dalam data database apakah sesuai atau tidak. Jika nantinya proses berhasil, maka akan muncul alert dialog seperti Gambar.2 diatas :
<?php
include_once("koneksi.php");
if($_REQUEST['delete'])
{
$sql = "DELETE FROM student WHERE id_student='".$_REQUEST['delete']."'";
$resultset = mysqli_query($con, $sql) or die("database error:". mysqli_error($conn));
if($resultset)
{
echo "Record Deleted Successfully";
}
}
?>