--> Skip to main content

Membuat Boostrap Modal Konfirmasi delete baris tabel PHP MySQL

Tutorial pemrograman web kita kali ini akan mengupas bagaimana caranya menghapus sebuah baris pada tabel dengan munculnya jendela konfirmasi delete terlebih dahulu berupa bootstrap modal.

Ketika kita menyajikan data dalam bentuk tabel pada website, kemudian memberikan akses atau aksi untuk menghapus (delete), sebaiknya ada jendela konfirmasi terlebih dahulu. Konfirmasi penghapusan disini menggunakan modal. Apa itu modal ?. Silahkan baca tutorial tentang  pengertian modal dan implementasi pada navbar.

Dalam tutorial ini kita menggunakan bantuan librari Bootbox.js yang menjadikan proses pembuatan modal bootstrap menjadi lebih mudah.

Berikut ini adalah output yang diharapkan dalam tutorial kali ini, seperti yang ditunjukkan oleh Gambar.1 dan Gambar.2 dibawah ini :

Bootstrap Modal Confirm Dialog
(Gambar.1 Confirm Dialog)

Ketika program berhasil dihapus, maka akan muncul jendela pemberitahuan (alert dialog) bahwa baris yang dipilih sudah berhasil dihapus.

Alert Dialog Delete data tabel MySQL
(Gambar.2 Alert Dialog)


Langkah-langkahnya

1. Create Database
Buatlah sebuah database untuk menampung data-data yang nantinya akan kita panggil melalui script php. Disini database diberinama student_demo dengan nama tabelnya adalah student seperti script sql dibawah ini :
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 file koneksi.php
File koneksi.php bertujuan untuk membuat establishment ke database, seperti yang ditunjukkan kode php dibawah ini :
<?php
$con=mysqli_connect("localhost","root","","student_demo");

?>

3. Create file modalkonfirmasi.php
Langkah berikutnya adalah pembuatan interface halaman utama untuk menampilkan tabel yang data-datanya berasal dari database MySQL. Pada file ini juga memanggil librari bootbox.min.js yang mempermudah kita dalam pengaturan modal boostrap.

Karena file ini adalah halaman utama, anda dapat memberinama file ini sebagai index.php. Dalam contoh tutorial ini kita memberinama dengan modalkonfirmasi.php. Berikut ini adalah kode programnya :
<!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
Pada file ini kita menghandle proses klik id student yang kemudian disimpan dalam variabel studentid. Kemudian file delete.js akan memanggil file deleterecord.php dengan mengirimkan nilai dari variabel studentid. Nilai dari variabel studentid disimpan dalam data delete.
$(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
File inilah yang akan memproses penghapusan dari sebuah row yang telah diklik pada proses sebelumnya, dimana id student yang dikirimkan oleh data delete akan dicocokkan dalam data database. Jika proses berhasil maka akan muncul alert dialog seperti Gambar.2 diatas
<?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