--> Skip to main content

Bootstrap Modal Confirmation Delete using PHP MySQL

In this tutorial we'll learn how to delete a row by appear the delete confirmation dialog in advance before we decide to click it.

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:
(Figure.1)

When the program is successfully deleted, it will display a notification window (alert dialog) that the selected row has been successfully deleted.
(Figure.2)

Step-by-Step Guide

1. Create Database
Create 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";
 }
}
?>


Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar