Delete Records with Bootstrap Confirm Modal using PHP & MySQL

Posted on

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]

19 thoughts on “Delete Records with Bootstrap Confirm Modal using PHP & MySQL

  1. Hello, Thank you so much for the demos and samples. The best examples that I have come across so far.
    You have no idea how much you have helped me.
    Thank you sir

  2. hello, very good example, I’m using it with datatables with page, but I have a problem on the first page of the page delete the record and in the following not. Where would the problem be? Thank you

  3. Hello. This is excellent. But I have a problem. When click “No”, the modal doesnt not HIDE…. i tried everything… so $(‘.bootbox’).modal(‘hide’); i thinks is not working.. i put a alert(‘I said No’) instead and works… but not the HIDE MODAL…. please help!

  4. I can delete, but the list cannot refreshed. That makes the checkbox still checked. The download link is error. i cannot download the source, only copy + paste the tutorial. does any other link to download?. Thank you.

    1. I have just checked demo and its working fine with list update. Also checked download link and its working. Please try again. Thanks!

  5. Good work but i have a problem. I used this script with Datatables. This script works fine only in the first page. Can you help me?

Leave a Reply

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