Tutorial Menghapus Data PHP/MySQL Melalui Konfirmasi Bootstrap Modal

Halo sobat, dalam artikel kali ini kita akan membagikan tutorial menghapus data di dalam database MySQL melalui modal konfirmasi Bootstrap.

Tutorial kali ini adalah lanjutan dari Tutorial Membuat Form Serta Melakukan Edit/Update Data Dinamis di Dalam Modal Bootstrap. Untuk script dari tutorial sebelumnya silahkan sobat download disini.

Baca Juga 

Oke, langsung saja, untuk tutorial kali ini alurnya ketika melakukan penghapusan data perintah/query untuk menghapus data di dalam database tidak akan langsung dilakukan dan sebelumnya akan muncul alert/konfirmasi apakah data akan benar-benar dihapus atau tidak.





Langkah pertama,  setelah sobat mendownload file dari tutorial sebelumnya silahkan sobat ekstrak file tersebut ke dalam localhost dan export tabelnya kedalam database.

Langkah selanjutnya sobat buka file bootstrap.php dan pastekan potongan script berikut di dalam tabel, script ini untuk menambah tombol yang akan mengeksekusi perintah hapus.

<?php echo "<td><a class='btn btn-danger' data-toggle='modal' data-target='#konfirmasi_hapus' data-href='hapus.php?id=".$row['id']."'>Hapus</a></td>"; ?>

 

kemudian pastekan script untuk tampilan modalnya :

    <div class="modal fade" id="konfirmasi_hapus" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <b>Anda yakin ingin menghapus data ini ?</b><br><br>
                    <a class="btn btn-danger btn-ok"> Hapus</a>
                    <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-close"></i> Batal</button>
                </div>
            </div>
        </div>
    </div>

Kemudian pastekan potongan script Javascript di bawah ini, script ini akan jalan ketika tombol perintah hapus yang berada di dalam modal bootstrap ditekan maka akan langsung mengarahkan ke file hapus.php (berdasarkan parameter data-href=’hapus.php?id=”.$row[‘id’].”) dengan membawa parameter id dari baris data tersebut.

  <script type="text/javascript">
    //Hapus Data
    $(document).ready(function() {
        $('#konfirmasi_hapus').on('show.bs.modal', function(e) {
            $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
        });
    });
  </script>

DIbawah ini full script dari bootstrap.php  :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>Passing Data To Modal</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  </head>

  <body>
    <div class="container">
      <div class="row"> 
        <table class="table table-bordered">
          <tr>
            <th>No</th>
            <th>Nama Barang</th>
            <th>Deskripsi Barang</th>
            <th colspan="2">Opsi</th>
          </tr>
          <?php
            $servername = "localhost";
            $username = "root";
            $password = "root";
            $dbname = "test";

            // Membuat Koneksi
            $koneksi = new mysqli($servername, $username, $password, $dbname);
            
            // Melakukan Cek Koneksi
            if ($koneksi->connect_error) {
                die("Koneksi Gagal : " . $koneksi->connect_error);
            } 

            //Melakukan query
            $sql = "SELECT * FROM barang";
            $hasil = $koneksi->query($sql);
            $no = 1;
            if ($hasil->num_rows > 0) {
                foreach ($hasil as $row) { ?>
                  <tr>     
                  <td><?php echo $no; ?></td>
                  <td><?php echo $row['nama_barang']; ?></td>
                  <td><?php echo $row['desc_barang']; ?></td>
                  <?php echo "<td><a href='#myModal' class='btn btn-default' id='custId' data-toggle='modal' data-id=".$row['id'].">Detail</a></td>"; ?>
                  <?php echo "<td><a class='btn btn-danger' data-toggle='modal' data-target='#konfirmasi_hapus' data-href='hapus.php?id=".$row['id']."'>Hapus</a></td>"; ?>
                  </tr>
            <?php 
            $no++; 
            } 
              } else { 
            echo "0 results"; 
              } $koneksi->close(); 
            ?>

        </table>
      </div>
    </div>

    <div class="modal fade" id="myModal" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Detail Barang</h4>
                </div>
                <div class="modal-body">
                    <div class="fetched-data"></div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Keluar</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="konfirmasi_hapus" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <b>Anda yakin ingin menghapus data ini ?</b><br><br>
                    <a class="btn btn-danger btn-ok"> Hapus</a>
                    <button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-close"></i> Batal</button>
                </div>
            </div>
        </div>
    </div>

  <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script type="text/javascript">
    $(document).ready(function(){
        $('#myModal').on('show.bs.modal', function (e) {
            var rowid = $(e.relatedTarget).data('id');
            //menggunakan fungsi ajax untuk pengambilan data
            $.ajax({
                type : 'post',
                url : 'detail.php',
                data :  'rowid='+ rowid,
                success : function(data){
                $('.fetched-data').html(data);//menampilkan data ke dalam modal
                }
            });
         });
    });

    //Hapus Data
    $(document).ready(function() {
        $('#konfirmasi_hapus').on('show.bs.modal', function(e) {
            $(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
        });
    });

  </script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  </body>
</html>

 





Langkah selanjutnya setelah itu sobat buat file baru dan beri nama hapus.php dan pastekan script dibawah ini :

<?php
    $servername = "localhost";
    $username = "root";
    $password = "root";
    $dbname = "test";

    // membuat koneksi
    $koneksi = new mysqli($servername, $username, $password, $dbname);

    // melakukan pengecekan koneksi
    if ($koneksi->connect_error) {
        die("Connection failed: " . $koneksi->connect_error);
    } 

    //menangkap parameter yang dikirimkan dari detail.php
    $id = $_GET['id'];

    //perintah untuk melakukan hapus
    //melakukan penghapusan data berdasarkan ID
    $sql = "DELETE FROM barang WHERE id=$id";

    if ($koneksi->query($sql) === TRUE) {
        //jika  berhasil langsung diarahkan kembali ke file bootstrap.php
        header('location:bootstrap.php');
    } else {
        // jika gagal tampil ini
        echo "Gagal Melakukan penghapusan data: " . $koneksi->error;
    }

    $koneksi->close();
?>

 

Script query yang ada di dalam file hapus.php adalah untuk melakukan perintah melakukan penghapusan data berdasarkan id dari parameter data-href=’hapus.php?id=”.$row[‘id’].” ketika data berhasil dihapus maka akan langsung diarahan kembali ke halaman bootstrap.php dan jika ada gagal melakukan penghapusan data maka akan tampil halaman error.

 

Jika langkah-langkah diatas sudah dilakukan silahkan sobat jalankan file bootstrap.php. Jika tidak ada error hasilnya akan seperti ini :

Dan ketika ditekan tombol hapus maka datanya akan terhapus secara otomatis, jika ditekan tombol batal datanya akan tetap ada dan tampilan modal akan hilang.

Demikian artikel tutorial kali ini, untuk script ini bisa di download disini.

 

Terima kasih sudah menyempatkan diri untuk membaca tutorial ini. Jika ada kritik, saran maupun masukkan silahkan menuliskannya di dalam kolom komentar yang ada di bawah ini.





One Comment

Add a Comment

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