Bootstrap Modal Confirmation Delete using PHP MySQL
When we present the data in a table on the website, then give access or action to delete, there should be a confirmation dialog first. The Delete Confirmation Dialog here using Bootstrap modal.We implement Bootbox.js to create dialog boxes in Bootstrap modals.
The following is the expected output in this tutorial, as shown in Figure 1 and Figure 2 below:
When the program is successfully deleted, it will display a notification window (alert dialog) that the selected row has been successfully deleted.
Step-by-Step Guide
1. Create DatabaseCreate a database to accommodate the data that we will later call through php script. Here the database named student_demo with table's name is student like script sql below:
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 Database Connection
We will create connection.php file to make connection with MySQL database.
<?php
$con=mysqli_connect("localhost","root","","student_demo");
?>3. Create file modalkonfirmasi.php
The next step is to create the main page interface to display the table whose data comes from the MySQL database. In this file we also call bootbox.min.js libraries that simplify us in the modal boostrap settings.
Since this file is the main page, you can name this file as index.php. In the example of this tutorial we name it with modalkonfirmasi.php. Here is the program code:
<!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 In this file we handle the click of student id , then store it in variable
studentid. File delete.js will call deleterecord.php by sending value from variable studentid . The value of the variable studentid is stored in the delete data.
$(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
This file will process the deletion of a row that has been clicked on the previous process, where the student id submitted by the delete data will be matched in the database data. If the process succeeds it will appear alert dialog like Figure.2 above
<?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";
}
}
?>