Menghapus banyak record dengan checkbox menggunakan jQuery, PHP dan MySQL

Menghapus record satu per satu sangat memakan waktu ketika ada terlalu banyak record. Kamu dapat membuatnya lebih user friendly dengan memungkinkan pengguna untuk menghapus banyak record hanya dengan satu klik. Kamu dapat menambahkan checkbox dengan masing-masing record dan memungkinkan untuk memilih checkbox dan kemudian mengimplementasikan fungsi untuk menghapus beberapa record yang dipilih melalui tombol delete. Jadi dalam tutorial ini kamu akan belajar cara menghapus banyak record dengan checkbox menggunakan jQuery, PHP dan MySQL.

Jadi mari kita mulai coding. Sebelum mulai, kita lihat pada struktur file yang digunakan untuk tutorial ini.

Langkah 1: Membuat table database.

Pertama kita akan membuat tabel database MySQL “pegawai” untuk menampilkan record pegawai.

CREATE TABLE IF NOT EXISTS `pegawai` (
  `id` int(11) NOT NULL AUTO_INCREMENT COMMENT 'primary key',
  `nama_pegawai` varchar(255) NOT NULL COMMENT 'nama pegawai',
  `gaji_pegawai` double NOT NULL COMMENT 'gaji pegawai',
  `usia_pegawai` int(11) NOT NULL COMMENT 'usia pegawai',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci COMMENT='table demo datatable' AUTO_INCREMENT=11 ;

Kemudian mengimport record/value pegawai ke table pegawai menggunakan statement INSERT.

INSERT INTO `pegawai` (`id`, `nama_pegawai`, `gaji_pegawai`, `usia_pegawai`) VALUES
(1, 'Slamet Madyo Suwarno', 3500000, 35),
(2, 'Udu Mukidi', 4000000, 29),
(3, 'Tri Utami', 3000000, 31),
(4, 'Eko Jatmiko', 3200000, 35),
(5, 'Dwi Santoso', 4000000, 33),
(6, 'Ginting Hasibuan', 5000000, 61),
(7, 'Bejo Hertanto', 3400000, 33),
(8, 'Riska Wulandari', 3300000, 37),
(9, 'Soedjiman Tjawet', 4000000, 41),
(10, 'Sulis Handayani', 3250000, 36);

Langkah 2: Membuat koneksi ke database.

Kita akan membuat file konek_db.php untuk membuat koneksi dengan database MySQL untuk menampilkan record pegawai.

<?php
/* Menghubungkan ke database */
$servername = 'localhost';
$username = 'root';
$password = '';
$dbname = 'codingan_demo';
$conn = mysqli_connect($servername, $username, $password, $dbname) or die("Connection failed: " . mysqli_connect_error());
if (mysqli_connect_errno()) {
    printf("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
?>

Langkah 3: Menyertakan file Bootstrap dan JavaScript.

Karena di tutorial ini saya telah membuat HTML menggunakan Bootstrap, jadi saya menyertakan file Bootstrap dan juga jQuery di tag head di index.php.

<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.min.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.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="script/hapus.js"></script>

Langkah 4: Menampilkan record pegawai dengan Checkbox dan tombol hapus.

Sekarang di index.php, kita akan menampilkan record pegawai dari tabel pegawai dengan checkbox dan tombol hapus.

<div class="container">
 <h2>Menghapus banyak record dengan checkbox menggunakan jQuery, PHP dan MySQL</h2>
 <table id="pegawai_grid" class="table table-condensed table-hover table-striped bootgrid-table" width="60%" cellspacing="0">
  <thead>
    <tr>
    <th><input type="checkbox" id="pilih_semua"></th>
    <th>Nama</th>
    <th>Gaji</th>
    <th>Usia</th>
    </tr>
     </thead>
  <tbody>
  <?php
  $sql = "SELECT id, nama_pegawai, gaji_pegawai, usia_pegawai FROM pegawai LIMIT 10";
  $resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
  while( $rows = mysqli_fetch_assoc($resultset) ) {
  ?>
    <tr id="<?php echo $rows["id"]; ?>">
    <td><input type="checkbox" class="pgw_checkbox" data-pwg-id="<?php echo $rows["id"]; ?>"></td>
    <td><?php echo $rows["nama_pegawai"]; ?></td>
    <td><?php echo $rows["gaji_pegawai"]; ?></td>
    <td><?php echo $rows["usia_pegawai"]; ?></td>
    </tr>
  <?php
  }
  ?>
  </tbody>
 </table>
 <div class="row">
  <div class="col-md-3 well">
   <span class="baris_dipilih" id="jumlah_pilih">0 Dipilih</span>
   <a type="button" id="hapus_record" class="btn btn-primary pull-right">Hapus</a>
  </div>
 </div>
</div>

Langkah 5: Memilih semua checkbox menggunakan jQuery.

Sekarang di hapus.js, kita akan menangani fungsi untuk memilih semua checkbox di samping setiap record pegawai ketika mengklik “Pilih Semua” untuk membuat semua checkboc dicentang. Juga menangani untuk menampilkan jumlah baris yang dipilih.

jQuery('#pilih_semua').on('click', function(e) {
 if($(this).is(':checked',true)) {
  $(".pgw_checkbox").prop('checked', true);
 }
 else {
  $(".pgw_checkbox").prop('checked',false);
 }
 // mengatur semua jumlah checkbox yang dicentang
 $("#jumlah_pilih").html($("input.pgw_checkbox:checked").length+" Dipilih");
});
// mengatur jumlah checkbox tertentu yang dicentang
$(".pgw_checkbox").on('click', function(e) {
 $("#jumlah_pilih").html($("input.pgw_checkbox:checked").length+" Dipilih");
});

Langkah 6: Menghapus semua record yang dipilih dengan jQuery Ajax.

Sekarang kita akan menangani fungsi untuk menghapus semua record yang dipilih menggunakan jQuery Ajax. Kita akan mendapatkan rincian checkbox yang dipilih dan kemudian membuat permintaan Ajax ke script hapus.php untuk menghapus record dari tabel pegawai.

// hapus record yang dicentang
jQuery('#hapus_record').on('click', function(e) {
 var pegawai = [];
 $(".pgw_checkbox:checked").each(function() {
  pegawai.push($(this).data('pwg-id'));
 });
 if(pegawai.length <=0)  {
  alert("Silahkan pilih record.");
 }
 else {
  var message = "Apakah Anda yakin ingin menghapus record yang dipilih?";
  var checked = confirm(message);
  if(checked == true) {
   var selected_values = pegawai.join(",");
   $.ajax({
    type: "POST",
    url: "hapus.php",
    cache:false,
    data: 'pwg_id='+selected_values,
    success: function(response) {
     // menghilangkan baris pegawai yang dihapus
     var pgw_ids = response.split(",");
     for (var i=0; i<pgw_ids.length; i++ ) {
      $("#"+pgw_ids[i]).remove();
     }
    }
   });
  }
 }
});

Langkah 7: Menghapus record dari database MySQL.

Sekarang terakhir pada file hapus.php, kita akan menangani fungsi untuk mendapatkan ID pegawai yang akan dihapus dan kemudian mengeksekusi query DELETE MySQL untuk menghapus record pegawai dari database.

<?php
include_once("konek_db.php");
if(isset($_POST['pwg_id'])) {
 $pwg_id = trim($_POST['pwg_id']);
 $sql = "DELETE FROM pegawai WHERE id in ($pwg_id)";
 $resultset = mysqli_query($conn, $sql) or die("database error:". mysqli_error($conn));
 echo $pwg_id;
}
?>

Kamu dapat melihat live demo dari link Demo dan men-download script dari link Download di bawah. Kamu mungkin juga ingin membaca Menghapus baris dari MySQL dengan Bootstrap Modal.