Tutorial AJAX PHP

Delete Record Menggunakan AJAX PHP dan Bootbox Notifikasi

Delete Record Menggunakan AJAX PHP dan Bootbox Notifikasi

Tutorial Delete Record Menggunakan AJAX PHP dan Bootbox Notifikasi ini membahas bagaimana cara menghapus data dan menampilkan data sebelum dihapus dan setelah dihapus muncul pop-up bahwa data berhasil dihapus. Develindo.com

Selain bootstrap dan ajax ada tambahan menggunakan plugin bootbox.js untuk menampilkan pesan notifikasinya.

Ikuti langkah berikut ini

Buat database dengan nama praktek dan buat tabel dengan nama tb_siswa

 

Buat file Koneksi.php

koneksi.php
 

<?php
//set time zone location sesuai negara, jadikan Asia Jakarta
date_default_timezone_set('Asia/Jakarta');

//set koneksi ke server sesuai host, user, password dan database
$server="localhost";
$user="root";
$pass="";
$database="praktek";
mysql_connect($server,$user,$pass)
 or die('Koneksi Ke database Error'); //mengkoneksikan dengan server 
jika tidak akan muncul pesan error
mysql_select_db($database) or 
die('Database Tidak Ditemukan');   //mengkoneksikan dengan database jika
 tidak akan muncul pesan database tidak ada

?>


index.php
 

 <!DOCTYPE html>
 <html>
      <head>
           <title>Develindo | Delete Record Menggunakan AJAX PHP dan Bootbox Notifikasi</title>
           <!-- Bootstrap core CSS -->
           <link href="css/bootstrap.css" rel="stylesheet">
           <!-- Bootstrap core JavaScript-->
           <script src="js/jquery.min.js"></script>
           <script src="js/bootstrap.js"></script>
           <script src="js/bootbox.min.js"></script>

      </head>
      <body>
           <br /><br />
           <div class="container" style="width:800px;">
                <h2 align="center">Delete Record Menggunakan AJAX PHP dan Bootbox Notifikasi</h2>
                <h3 align="center">Data Seluruh Siswa</h3>
                <br /><br />

                <div id="tabel_siswa">
                <div class="table-responsive">
                     <table class="table table-bordered">
                     <thead>
                          <tr>
                               <th>NIS</th>
                               <th>NISN</th>
                               <th>Nama Lengkap</th>
                               <th>Gender</th>
                          </tr>
                          </thead>
                          <tbody>
                          <?php
                          //panggil fungsi koneksi.php
                          include "koneksi.php";
                          //ambil data dari tb_siswa dan lakukan perulangan dengan while
                          $ambildata=mysql_query("select*from tb_siswa order by id_siswa");
                          while($a = mysql_fetch_array($ambildata))
                          {
                          ?>
                          <tr>
                               <td>
                               <strong><?php echo $a['id_siswa']; ?></strong>
                               </td>
                               <td><?php echo $a['nisn'];?></td>
                               <td><?php echo $a['nama_siswa'];?></td>
                               <td><?php echo $a['gender_siswa'];?></td>
                               <td>
                              
 <a class="btn btn-primary btn-xs delete_data" id="<?php echo 
$a['id_siswa'];?>-<?php echo $a['nama_siswa'];?>" 
href="javascript:void(0);">Hapus</a>
                               </td>
                          </tr>
                          <?php
                          }
                          ?>
                          <tbody>
                     </table>
                </div>
                </div>
           </div>
      </body>
 </html>
<script>
$(document).ready(function () {
    $(document).on('click', '.delete_data', function (e) {
        e.preventDefault();
        var id = $(this).prop('id');
        var splited = id.split("-");
        var pid = splited[0];
        var nama = splited[1];
        var parent = $(this).parent("td").parent("tr");
       
 var mes = 'Apakah anda perlu menghapus data ini ? 
<br><pre><p class="text-primary"><strong>' + 
nama + '</strong></p></pre>';
        bootbox.dialog({
            message: mes,
            title: "Hapus Data  yang dipilih !",
            closeButton: true,
            buttons: {
                success: {
                    label: "No",
                    className: "btn-danger",
                    callback: function () {
                        $('.bootbox').modal('hide');
                    }
                },
                danger: {
                    label: "<i class='fa fa-trash'></i> Remove",
                    className: "btn-default",
                    callback: function () {

                        $.post('delete.php', { 'delete': pid })
                            .done(function (response) {
                                bootbox.alert(response);
                                parent.fadeOut('slow');

                            })
                            .fail(function () {
                                bootbox.alert('Something Went Wrog ....');
                            })

                    }
                }
            }
        });
    });

});
</script>


delete.php
 

<?php
error_reporting(0);
 include "koneksi.php";
 if (isset($_POST['delete'])) {
     $pid = mysql_real_escape_string($_POST["delete"]);
     $folder=mysql_fetch_array(mysql_query("select * from tb_siswa where id_siswa='$pid'"));
     $deletefolder="images/siswa/$folder[foto_siswa]";
     unlink($deletefolder);

     $query = mysql_query("DELETE FROM tb_siswa WHERE id_siswa=$pid");
     if ($query) {
            echo "<h3><span class='text-success'>Data Berhasil dihapus ! </span></h3>";
        }else{
      echo "<span class='text-primary'> Terjadi Kesalahan Coba lagi yah! </span>";
      }
}
?>

 

Hasilnya akan muncul seperti ini saat anda menekan tombol Hapus


Download File
 

Download Source Code Preview Demo

Develindo Web | Tutorial Pemrograman Website