Membuat Kofirmasi Delete Data Menggunakan Modal Bootstrap

Artikel ini masih ada hubungan dengan artikel sebelumnya tentang CRUD PHP Ajax Dengan Modal Boostrap. Pada contoh script sebelumnya untuk konfirmasi delete data, saya hanya menggunakan script alert biasa sebagai konfirmasi apakah data akan di delete atau tidak, dan supaya konfirmasi delete data tersebut menggunakan modal bootstrap, Anda perlu melakukan sedikit perubahan seperti yang akan saya jelaskan pada tutorial berikut ini :

Membuat Konfirmasi Delete Data Menggunakan Modal Bootstrap
Saya asumsikan bahwa Anda sudah mengerti dan membaca tutorial sebelumnya tentang CRUD PHP Ajax Dengan Modal Boostrap karena dalam tutorial ini saya hanya akan jelaskan point utamanya saja, karena tutorial ini masih berhubungan dengan tutorial sebelumnya

Baca : CRUD PHP Ajax Dengan Modal Bootstrap

File - file yang perlu dipersiapkan

ajax.delete.php
File ini nantinya akan mengembalikan nilai data dalam bentuk json yang akan diambil oleh ajax/javascript untuk ditampilkan didalam modal saat proses konfirmasi data. Didalam modal konfirmasi delete nantinya akan mengandung id data sebagai parameter atau nilai yang digunakan untuk proses delete data berdasarkan id tertentu

<?php

include ('koneksi.php');
include ('function.php');
?>

<?php
if(isset($_POST["delete_id"])){

 if(!detail_data(trim($_POST['delete_id']))){  
  die ("Data tidak ditemukan");
 }
}


$array=array(
 0=>"$id",'id'=>"$id",
 1=>"$nim",'nim'=>"$nim",
 2=>"$nama_mahasiswa",'nama_mahasiswa'=>"$nama_mahasiswa"
);
echo json_encode($array);
?>

ajax.delete.proses
File ini tentunya nanti akan bertugas untuk melakukan proses delete data, dimana file ini juga akan memanggil fungsi delete_data() yang sudah dibuat sebelumnya pada file function.php

<?php
include ('koneksi.php');
include ('function.php');
?>
<?php
if(isset($_POST['delete_id'])){
 if(empty($_POST['delete_id'])){
    $id_err="id masih ksong";
    }else{
    $id=$_POST['delete_id'];
    $id=mysqli_real_escape_string($koneksi, $id);
    }
    if(delete_data($id)){
 
        $result = tampil_data();
        if($result){      
        echo "<table width='100%' class='table table-striped table-bordered table-hover'>";
        echo "<tr>";
        echo "<th>NIM</th>";
        echo "<th>NAMA MAHASISWA</th>";    
        echo "<th>AKSI</th>";
        echo "</tr>";      
        while($row=mysqli_fetch_array($result)){
        echo "<tr>";
        echo "<td>".$row['nim']."</td>";        
        echo "<td>".$row['nama_mahasiswa']."</td>";     
        echo "<td>";
        echo "<a href='#' name='delete' id='".$row['id']."; ?>' class='delete_data'><i class='fa fa-trash fa-fw small' alt='delete' title='delete'></i></a>";

        echo "<a href='#' data-target='#confirm-detail' id='".$row['id']."; ?>' class='lihat_data'><i class='fa fa-eye fa-fw small' alt='detail' title='detail'></i></a>";
        
      echo "<a href='#' name='update' id='".$row['id']."; ?>' class='update_data'><i class='fa fa-edit fa-fw small' alt='edit' title='edit'></i></a>";

        echo "</td>";
        echo "</tr>";
        }
        echo "</table>";
         mysqli_free_result($result);   
    
        }    
 }else{
  die("error");
 }
        mysqli_close($koneksi);

}
?>

modal.js
Untuk bagian delete data pada modal.js sebelumnya (baca : CRUD PHP Ajax Melalui Modal Bootstrap) Anda perlu menggantinya dengan script berikut ini

$(document).on('click', '.delete_data', function(){  
           var delete_id = $(this).attr("id");  
           $.ajax({  
                url:"ajax.delete.php",  
                method:"post",  
                data:{delete_id:delete_id},  
                dataType:"json",  
                success:function(data){ 
                     $('#delete_id_p').val(data.id);  
                     $('#delete').val("Delete");  
                     $('#delete_modal').modal('show');  
                }  
           });  
      });
  $('#delete_form').on("submit", function(event){  
           event.preventDefault();  
           if($('#delete_id_p').val() == "")  
           {  
                alert("Id data tidak boleh kosong");  
            
           }  
           
           else  
           {  
                $.ajax({  
                     url:"ajax.delete.proses.php",  
                     method:"POST",
                     data:$('#delete_form').serialize(),  
                     beforeSend:function(){  
                          $('#Delete').val("Deleting");  
                     },  
                     success:function(data){  
                          $('#delete_form')[0].reset();  
                          $('#delete_modal').modal('hide');
                          $('#tabel_mahasiswa').html(data);  
                          $('#sukses_hapus').modal('show');  
                          
                     }  
                });  
           }  
      });

modal.php
Pada bagian file modal.php Anda perlu menambahkan bagian modal untuk menampilkan konfirmasi untuk delete data dan juga pesan konfirmasi modal setelah data berhasil di delete

    <!-- Modal Delete -->
    <div class="modal fade" id="delete_modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Hapus data</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
          Yakin akan dihapus ?
          <form method="post" id="delete_form" />
          <input type="hidden" name="delete_id" id="delete_id_p" />
          
          </div>
          <div class="modal-footer">
          <input type="submit" name="delete" id="delete" value="Delete" class="btn btn-success" /> 
          </form>  
          <button type="button" data-dismiss="modal" class="btn">Cancel</button>          
          </div>
        </div>
      </div>
    </div>
    <!-- Modal Delete Sukses -->
    <div class="modal fade" id="sukses_hapus">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Hapus data</h5>
            <button class="close" type="button" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">×</span>
            </button>
          </div>
          <div class="modal-body">
          Data telah dihapus       
          </div>
          <div class="modal-footer">
          <button type="button" data-dismiss="modal" class="btn">Tutup</button>           
          </div>
        </div>
      </div>
    </div>

Demo

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple