Delete Records with Bootstrap Confirm Modal using PHP & MySQL

In this tutorial you will learn how to implement records delete with Bootstrap confirm modal using PHP and MySQL. Use of default JavaScript confirm modal is common in website to make sure to delete the records or not. The Bootstrap confirms dialogs are very smooth and better UI than default JavaScript confirm dialog. So here we have cover up functionality to display records with PHP and MySQL and then handle record delete with Bootstrap Confirm Modal using Bootbox Bootstrap Modal plugin.

So let’s start the coding.

Steps1: Create MySQL Database Table
For this tutorial, we have used MySQL database table "employee" to display employee records. So we will use below code to create table.
CREATE TABLE IF NOT EXISTS `employee` (
`id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'primary key',
`employee_name` varchar(255) NOT NULL COMMENT 'employee name',
`employee_salary` double NOT NULL COMMENT 'employee salary',
`employee_age` int(11) NOT NULL COMMENT 'employee age',
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 COMMENT='datatable demo table' AUTO_INCREMENT=11 ;


Now we will import employee data using below queries
INSERT INTO `employee` (`id`, `employee_name`, `employee_salary`, `employee_age`) VALUES
(1, 'Tiger Nixon', 3208000, 61),
(2, 'Garrett Winters', 170750, 63),
(3, 'Ashton Cox', 86000, 66),
(4, 'Cedric Kelly', 433060, 22),
(5, 'Airi Satou', 162700, 33),
(6, 'Brielle Williamsons', 372000, 61),
(7, 'Herrod Chandler', 137500, 59),
(8, 'Rhona Davidson', 327900, 55),
(9, 'Colleen Hurst', 205500, 39),
(10, 'Sonya Frost', 103600, 23);


Steps2: Create MySQL Database Connection
We will create db_connect.php PHP file to make connection with MySQL database.

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "phpzag_demos";
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
if (mysqli_connect_errno()) {
printf("Connect failed: %s\n", mysqli_connect_error());
exit();
?>


Steps3: Include Bootstrap, jQuery and JavaScript Files
In this tutorial, we have created PHP file index.php and included all necessary library files (Bootstrap, jQuery and Bootbox plugin for confirm modal) and CSS files in head tag. In this tutorial, we have created HTML using Bootstrap. The JavaScript file deleteRecords.js handle employee record delete on click event by making Ajax request.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.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="script/bootbox.min.js"></script>
<script type="text/javascript" src="script/deleteRecords.js"></script>


Steps4: List Employee Records
Now in index.php, we will display employee records from MySQL database table with delete button to delete records.

<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Employee Name</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<?php
$sql = "SELECT id, employee_name, employee_salary, employee_age FROM employee LIMIT 5";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
while( $rows = mysqli_fetch_assoc($resultset) ) {
?>
<tr>
<td><?php echo $rows["employee_name"]; ?></td>
<td>
<a class="delete_employee" data-emp-id="<?php echo $rows["id"]; ?>" href="javascript:void(0)">
<i class="glyphicon glyphicon-trash"></i>
</a></td>
</tr>
<?php
}
?>
</tbody>
</table>


Steps5: Delete Records with jQuery Ajax
Now in deleteRecords.js JavaScript file, we will handle to get clicked employee id if user click on Delete button in confirm dialog and make Ajax request to server deleteRecords.php to delete clicked employee records from MySQL database table employee.

$(document).ready(function(){
$('.delete_employee').click(function(e){
e.preventDefault();
var empid = $(this).attr('data-emp-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: 'deleteRecords.php',
data: 'empid='+empid
})
.done(function(response){
bootbox.alert(response);
parent.fadeOut('slow');
})
.fail(function(){
bootbox.alert('Error....');
})
}
}
}
});
});
});


Steps6: Delete Records from MySQL Database
Now finally in deleteRecords.php, we will delete employee record from MySQL database table.
<?php
include_once("db_connect.php");
if($_REQUEST['empid']) {
$sql = "DELETE FROM employee WHERE id='".$_REQUEST['empid']."'";
$resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
if($resultset) {
echo "Record Deleted";
}
}
?>


You can view the live demo from the Demo link and can download the script from the Download link below.
Demo [sociallocker]Download[/sociallocker]