Menghapus Banyak Data Sekaligus Dengan Checkbox

Apr 2, 2022 by MyPHPtutorials Level: Pemula Komentar Print

Fitur menghapus banyak data sekaligus dengan checkbox akan memberikan pengalaman yang lebih baik kepada pengguna. Sehingga pengguna website kita tidak perlu menghapus data satu persatu. Tutorial php ini akan menjelaskan cara untuk memberikan pengguna memilih banyak data dan menghapus data sekaligus menggunakan sebuah tombol hapus. Tutorial ini dilengkapi dengan video tutorial yang dapat diakses di channel Youtube MyPHPtutorials

Video tutorial menghapus banyak data sekaligus dengan checkbox

Video tutorial hapus data dengan checkbox

Berikut langkah langkah membuat fitur hapus data dengan checkbox

  1. Membuat table di database
  2. Membuat halaman untuk menampilkan data
  3. Menambahkan fitur hapus data dengan checkbox

Membuat Table di Database

Pada tutorial ini kita akan menggunakan table siswa seperti di bawah. Gunakan tool seperti phpMyAdmin untuk buat table siswa di bawah.

Kolom Tipe Data Keterangan
id integer primary key, auto increament
nis varchar
nama varchar
jenis_kelamin varchar (10)
tgl_lahir date

Kolom lain bisa ditambahkan sesuai dengan kebutuhan.

Halaman Untuk Menampilkan Data Siswa

Pertama buat file untuk membuat koneksi ke database menggunakan PDO seperti di bawah.

<?php
$host = "mysql";
$username = "root";
$password = "change_me";
$database = "tutorials";

return new PDO("mysql:host=$host;dbname=$database", $username, $password, array(
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION
));

Kemudian buat file php baru untuk menampilkan data siswa misal file index.php di bawah

<?php
$pdo = include "koneksi.php";
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Hapus Data Dengan Checkbox</title>
        <style>
            table {
                border: 1px solid #ddd;
                border-collapse: collapse;
            }
            table td, table th {
                padding: 8px;
                border: 1px solid #ddd;
            }
        </style>
    </head>
    <body>
        <h1>Data Siswa</h1>
        <form action="" method="POST">
            <table>
                <thead>
                    <tr>
                        <th>NIS</th>
                        <th>Nama</th>
                        <th>Jenis Kelamis</th>
                        <th>Tanggal Lahir</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $query = $pdo->prepare("select * from siswa");
                    $query->execute();
                    while($siswa = $query->fetch()) {
                    ?>
                    <tr>
                        <td><?php echo htmlentities($siswa['nis']);?></td>
                        <td><?php echo htmlentities($siswa['nama']);?></td>
                        <td><?php echo htmlentities($siswa['jenis_kelamin']);?></td>
                        <td><?php echo htmlentities($siswa['tgl_lahir']);?></td>
                    </tr>
                    <?php 
                    }
                    ?>
                </tbody>
            </table>
        </form>
    </body>
</html>

Kode php di atas akan menampilkan semua data siswa. Beberapa tutorial lain di website ini dapat menjelaskan lebih dalam cara untuk menampilkan data seperti tutorial Menyimpan Data ke Database & Menampilkan Data dengan PHP atau PHP PDO MySQL, Simpan Edit Hapus Data dengan PDO

Menambahkan Fitur Hapus Data Dengan Checkbox

Setelah data ditampilkan sekarang kita tambahkan fitur untuk menghapus data sekaligus. Pertama tambahkan checkbox di header table untuk pilih semua data

<thead>
            <tr>
               <th><input type="checkbox"></th>
                    <th>NIS</th>
                    <th>Nama</th>
                    <th>Jenis Kelamis</th>
                    <th>Tanggal Lahir</th>
            </tr>
    </thead>

Tambahkan checkbox pada masing masing data

<tr>
    <td><input type="checkbox" class="siswa" name="siswa[]" value="<?php echo $siswa['id'];?>"></td>
        <td><?php echo htmlentities($siswa['nis']);?></td>
        <td><?php echo htmlentities($siswa['nama']);?></td>
        <td><?php echo htmlentities($siswa['jenis_kelamin']);?></td>
        <td><?php echo htmlentities($siswa['tgl_lahir']);?></td>
</tr>

Perhatikan attribute name dari checkbox menggunakan kurung siku name="siswa[]" agar dapat mengirim data banyak berupa array ke server. lalu tambahkan javascript untuk menampilkan konfirmasi hapus data dan memilih semua data

<script>
            function konfirmasi() {
                return confirm('Apakah ada yakin menghapus data siswa tersebut?');
            }

            function selectAll(input) {
                let checkboxes = document.querySelectorAll('.siswa');
                checkboxes.forEach(function (checkbox) {
                    checkbox.checked = input.checked;
                });
            }
        </script>

Gunakan fungsi konfirmasi pada form yang seperti <form action="" method="POST" onsubmit="return konfirmasi()"> pada attribute onsubmit. Dan gunakan fungsi selectAll pada checkbox di header table seperti <input type="checkbox" onchange="selectAll(this)"> di attribute onchange. Langkah terakhir adalah tambahkan kode php untuk hapus data sekaligus.

<?php
$pdo = include "koneksi.php";
if(!empty($_POST)) {
    foreach($_POST['siswa'] as $idSiswa) {
        $query = $pdo->prepare("delete from siswa where id=:id");
        $query->execute(array('id' => $idSiswa));
    }

    header("Location: checkbox.php");
    exit;
}
?>

Jika digabungkan file index.php akan menjadi seperti di bawah.

<?php
$pdo = include "koneksi.php";
if(!empty($_POST)) {
    foreach($_POST['siswa'] as $idSiswa) {
        $query = $pdo->prepare("delete from siswa where id=:id");
        $query->execute(array('id' => $idSiswa));
    }

    header("Location: checkbox.php");
    exit;
}
?>
<!DOCTYPE html>
<html>
    <head>
        <title>Hapus Data Dengan Checkbox</title>
        <style>
            table {
                border: 1px solid #ddd;
                border-collapse: collapse;
            }
            table td, table th {
                padding: 8px;
                border: 1px solid #ddd;
            }
        </style>
    </head>
    <body>
        <h1>Data Siswa</h1>
        <form action="" method="POST" onsubmit="return konfirmasi()">
            <p><button type="submit">Hapus</button></p>
            <table>
                <thead>
                    <tr>
                        <th><input type="checkbox" onchange="selectAll(this)"></th>
                        <th>NIS</th>
                        <th>Nama</th>
                        <th>Jenis Kelamis</th>
                        <th>Tanggal Lahir</th>
                    </tr>
                </thead>
                <tbody>
                    <?php
                    $query = $pdo->prepare("select * from siswa");
                    $query->execute();
                    while($siswa = $query->fetch()) {
                    ?>
                    <tr>
                        <td><input type="checkbox" class="siswa" name="siswa[]" value="<?php echo $siswa['id'];?>"></td>
                        <td><?php echo htmlentities($siswa['nis']);?></td>
                        <td><?php echo htmlentities($siswa['nama']);?></td>
                        <td><?php echo htmlentities($siswa['jenis_kelamin']);?></td>
                        <td><?php echo htmlentities($siswa['tgl_lahir']);?></td>
                    </tr>
                    <?php 
                    }
                    ?>
                </tbody>
            </table>
            <p><button type="submit">Hapus</button></p>
        </form>
        <script>
            function konfirmasi() {
                return confirm('Apakah ada yakin menghapus data siswa tersebut?');
            }

            function selectAll(input) {
                let checkboxes = document.querySelectorAll('.siswa');
                checkboxes.forEach(function (checkbox) {
                    checkbox.checked = input.checked;
                });
            }
        </script>
    </body>
</html>

Demo dari tutorial ini dapat dilihat di video tutorial di channel youtube.

Kesimpulan

Pada tutorial php menghapus banyak data sekaligus menggunakan checkbox ini telah dijelaskan cara untuk memberikan penggunakan fitur untuk menghapus banyak data yang dipilih dengan checkbox. Diperlukan javascript untuk menampilkan konfirmasi hapus dan juga memilih semua data dengan sekali klik. Attribute name dari checkbox harus menggunakan kurung siku seperti name="siswa[]" agar dapat mengirim banyak data ke server sekaligus berupa array.

Silahkan login atau register sebelum meninggalkan komentar.