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.

Also, read:

• Load Dynamic Content in Bootstrap Popover with Ajax, PHP & MySQL
• Create Dynamic Bootstrap Tabs with PHP & MySQL
• Bootstrap Contact Form with Captcha using Ajax and PHP
• Multi Select Dropdown with Checkbox using Bootstrap, jQuery and PHP

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 may also like:

• Star Rating System with Ajax, PHP and MySQL
• Create Event Calendar with jQuery, PHP and MySQL
• Build Your Own CAPTCHA Script with PHP
• Convert Unix Timestamp To Readable Date Time in PHP
• Inventory Management System with Ajax, PHP & MySQL
• Create Live Editable Table with jQuery, PHP and MySQL
• Live Add Edit Delete datatables Records with Ajax, PHP and MySQL
• Stripe Payment Gateway Integration in PHP
• Export Data to Excel with PHP and MySQL
• Star Rating System with Ajax, PHP and MySQL
• Create Dynamic Bootstrap Tabs with PHP & MySQL
• How To Create Simple REST API in PHP

You can view the live demo from the Demo link and can download the script from the Download link below.
Demo Download