Pada artikel ini, kita akan membahas cara mengimplementasikan fitur penghapusan data menggunakan Ajax dan PHP. Dengan menggunakan teknik ini, pengguna dapat menghapus data tanpa memuat ulang halaman, sehingga memungkinkan aplikasi web menjadi lebih responsif dan efisien.


Langkah 1: Membuat Tabel

Untuk membuat contoh penghapusan data, pertama-tama kita perlu membuat tabel database yang berisi data yang ingin dihapus. Berikut adalah contoh struktur tabel MySQL untuk data pengguna:

sql
CREATE TABLE `users` (
    `id` int(11) NOT NULL AUTO_INCREMENT,
    `name` varchar(50) NOT NULL,
    `email` varchar(50) NOT NULL,
    `phone` varchar(20) DEFAULT NULL,
    PRIMARY KEY (`id`)
  ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

Langkah 2: Menampilkan Data

Setelah membuat tabel, langkah selanjutnya adalah menampilkan data pengguna di aplikasi web. Untuk melakukan ini, kita akan menggunakan DataTables, sebuah plugin jQuery yang memungkinkan kita untuk membuat tabel interaktif dengan dukungan Ajax. Berikut adalah contoh kode untuk menampilkan data pengguna menggunakan DataTables:

css
<table id="user-table" class="table table-striped">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>
            <th>Phone</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>
wasm
$(document).ready(function(){
    $('#user-table').DataTable({
        "ajax": "get-users.php",
        "columns": [
            { "data": "id" },
            { "data": "name" },
            { "data": "email" },
            { "data": "phone" },
            {
                "data": null,
                "render": function(data, type, row){
                    return '<button type="button" class="btn btn-danger btn-sm" data-toggle="modal" data-target="#delete-modal" data-id="' + row.id + '">Delete</button>';
                }
            }
        ]
    });
});

Dalam kode di atas, kita menggunakan $('#user-table').DataTable() untuk membuat tabel dan mendefinisikan kolom-kolomnya menggunakan "columns". Untuk memuat data, kita menggunakan "ajax" untuk mengambil data dari server melalui get-users.php.

Kita juga menambahkan kolom "Action" dan menampilkan tombol "Delete" pada setiap baris menggunakan kode HTML. Tombol ini akan membuka modal penghapusan dan mengirimkan ID pengguna ke modal menggunakan atribut data-id.

Langkah 3: Membuat Modal Penghapusan

Setelah menampilkan tombol "Delete", langkah selanjutnya adalah membuat modal penghapusan dan mengimplementasikan logika penghapusan menggunakan Ajax dan PHP. Berikut adalah contoh kode untuk membuat modal penghapusan:

python
<div class="modal fade" id="delete-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Delete User</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <p>Are you sure you want to delete this user?</p>
                <input type="hidden" id="delete-id" name="id">
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-danger" id="delete-button">Delete</button>
            </div>
        </div>
    </div>
</div>



Kita membuat modal dengan ID "delete-modal" dan menambahkan atribut "data-dismiss" pada tombol "Close" untuk menutup modal. Kita juga menambahkan input hidden dengan ID "delete-id" untuk menyimpan ID pengguna yang akan dihapus.

Langkah 4: Mengimplementasikan Logika Penghapusan

Setelah membuat modal, langkah selanjutnya adalah mengimplementasikan logika penghapusan menggunakan Ajax dan PHP. Berikut adalah contoh kode untuk mengirim permintaan penghapusan menggunakan Ajax dan menangani respons dari server:

javascript
$(document).on('click', '#delete-button', function(){
    var id = $('#delete-id').val();
    $.ajax({
        url: 'delete-user.php',
        type: 'POST',
        data: {id: id},
        success: function(response){
            $('#delete-modal').modal('hide');
            $('#user-table').DataTable().ajax.reload();
        }
    });
});

$(document).on('show.bs.modal', '#delete-modal', function(event){
    var button = $(event.relatedTarget);
    var id = button.data('id');
    $('#delete-id').val(id);
});

Kode di atas menambahkan event listener pada tombol "Delete" dan menangani kliknya. Ketika tombol di klik, kita mengambil ID pengguna dari input hidden dengan ID "delete-id" dan mengirimnya ke server menggunakan Ajax. Setelah permintaan selesai, kita menyembunyikan modal penghapusan dan memuat ulang data pengguna menggunakan DataTables.

Kita juga menambahkan event listener pada modal penghapusan menggunakan show.bs.modal untuk menangani saat modal ditampilkan. Saat modal ditampilkan, kita mengambil ID pengguna dari tombol "Delete" yang diklik dan memasukkannya ke dalam input hidden dengan ID "delete-id".

Langkah 5: Mengimplementasikan Logika Penghapusan di Server

Terakhir, kita perlu mengimplementasikan logika penghapusan di server menggunakan PHP. Berikut adalah contoh kode untuk menghapus pengguna dari database:

php
<?php
if(isset($_POST['id'])){
    $id = $_POST['id'];
    $conn = mysqli_connect('localhost', 'username', 'password', 'database');
    $sql = "DELETE FROM users WHERE id=$id";
    mysqli_query($conn, $sql);
    mysqli_close($conn);
}
?>

Kode di atas mengecek jika ID pengguna dikirim dari client menggunakan $_POST['id']. Jika ya, kita membuka koneksi ke database dan menjalankan query DELETE untuk menghapus pengguna dari tabel. Setelah itu, kita menutup koneksi dan mengembalikan respons kosong ke client.