Membuat Kofirmasi Delete Data Menggunakan Modal Bootstrap


Membuat Kofirmasi Delete Data Menggunakan Modal Bootstrap - ROOT93

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

Related Posts :

7 Responses to "Membuat Kofirmasi Delete Data Menggunakan Modal Bootstrap"

  1. Wahhh mantepp nih, coba mas buat website native yang simple dong mas, semisal pake laravel gitu :D

    ReplyDelete
  2. Hanya bisa baca-baca kalau tentang PHP ini mas, belum paham hehee

    ReplyDelete
  3. Modal mah duit adanya ge mang, disini mah suka yang ngga ngga wae segala Modal Bootstrap lah di delete.... Lieur ah c mamang mah

    ReplyDelete
  4. saya berkunjung mmbaca bahasa program sahabat meski jujur nggak ngerti bang good post

    ReplyDelete
  5. Saya hanya bisa mangut-mangut nih.
    Sering dengar boostrap, tapi belum pernah praktek langsung

    ReplyDelete

Silahkan untuk meninggalkan komentar, santai saja dan mulailah berkomentar...