Konfirmasi Delete Data Dengan Bootstrap Modal

Dalam tutorial pemrograman web kali ini, kita akan membuat aplikasi web bagaimana caranya memunculkan jendela konfirmasi (confirm dialog) sebelum menghapus suatu baris pada tabel yang data-datanya dipanggil dari database MySQL. Begitu proses penghapusan sudah dilakukan akan muncul jendela pemberitahuan (alert dialog) bahwa proses delete telah berhasil dilakukan.

Jendela (window) dari confirm dialog dan alert dialog ini, kita sebut dengan modal. Karena dalam tutorial menggunakan Bootstrap, maka digunakan boostrap modal. Namun disini kita menggunakan bantuan librari Bootbox.js yang merupakan librari yang membantu kita dalam pengelolaan bootstrap modal.

konfirmasi delete data MySQL
Gambar.1. Confirm Dialog

Berikut ini adalah output atau hasil akhir yang akan kita kerjakan dalam tutorial kali ini, seperti yang ditunjukkan oleh Gambar.1 dibawah ini yang menyatakan konfirmasi penghapusan data :

Sedangkan Gambar.2 dibawah ini menyatakan jendela pemberitahuan (alert dialog) :

alert Dialog
Gambar.2. Alert Dialog

Langkah-langkahnya

1. Create Database
Berilah nama database, dalam contoh ini kita berinama student_demo dengan nama tabelnya 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
Berikut ini adalah file koneksi.php yang bertujuan untuk memanggil data dari database :

<?php
$con=mysqli_connect("localhost","root","","student_demo");

?>

3. Create file modalkonfirmasi.php
Berilah nama file modalkonfirmasi.php (bisa disesuaikan dengan nama lain). File ini menampilkan data-data dari database yang disajikan dalam bentuk tabel. Dalam file ini juga memanggil bootbox.min.js yang merupakan librari dalam mempermudah pengaturan bootstrap modal dan juga file deleterecord.php (file yang melakukan proses delete baris sebuah tabel mysql)

<!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 ini akan menangani id student yang dipilih untuk dihapus dimana disimpan dalam variabel studentid. Selanjutnya file delete.js akan memanggil 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.js
Tujuan dari file ini untuk mengeksekusi penghapusan sebuah baris yang dikirim oleh proses sebelumnya.Jika 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";
	}
}
?>

Leave a Reply

Your email address will not be published. Required fields are marked *