Aplikasi CRUD PHP MariaDB: Hapus Data dengan Modal Bootstrap

MWI – Halo sobat pembelajar web MuSa. Hapus data PHP MariaDB merupakan tahap akhir dalam membangun aplikasi web berbasis CRUD yang utuh dan interaktif. Melalui panduan ini, Anda akan belajar cara memproses penghapusan data secara aman menggunakan prepared statement PDO serta menambahkan modal konfirmasi Bootstrap agar pengguna tidak sengaja menghapus data santri.

Keunggulan Modal Konfirmasi Saat Hapus Data PHP

Proses penghapusan data dari database bersifat permanen dan tidak dapat kita batalkan secara otomatis. Oleh karena itu, penggunaan modal konfirmasi menjadi solusi penting untuk mencegah kesalahan klik dari sisi pengguna saat mengelola sistem.

Di samping itu, Anda dapat membaca panduan tambah dan edit data PHP pada artikel sebelumnya untuk melengkapi fitur aplikasi santri Anda[cite: 1, 2]. Untuk referensi teknis mengenai komponen antarmuka modal, Anda juga dapat mengunjungi dokumentasi resmi Bootstrap Modal.

Membuat Berkas Proses Hapus Data

Langkah pertama, buatlah berkas hapus.php untuk memproses query DELETE secara aman[cite: 1]. Isikan kode pemrosesan prepared statement berikut pada berkas Kita. Penghapusan lewat modal konfirmasi Bootstrap, lalu hapus.php menjalankan DELETE untuk satu santri saja.

Tiga langkah di bawah menambah tombol Hapus pada index.php, lalu membuat hapus.php.

Langkah 1: tombol Hapus di index.php

Ganti baris komentar <!– tombol Hapus … –> pada kolom Aksi dengan tombol berikut.

<button type="button" class="btn btn-sm btn-danger"
        data-bs-toggle="modal" data-bs-target="#modalHapus"
        data-id="<?= $s['id'] ?>" data-nama="<?= e($s['nama']) ?>">Hapus</button>

Langkah 2: modal dan skrip di index.php

Tempel kode ini tepat di atas baris <?php include ‘footer.php’; ?>.

<div class="modal fade" id="modalHapus" tabindex="-1">
  <div class="modal-dialog">
    <form method="post" action="hapus.php" class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Konfirmasi Hapus</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        Yakin ingin menghapus data <strong id="namaHapus"></strong>?
        <input type="hidden" name="id" id="idHapus">
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Batal</button>
        <button type="submit" class="btn btn-danger">Ya, Hapus</button>
      </div>
    </form>
  </div>
</div>
<script>
document.getElementById('modalHapus').addEventListener('show.bs.modal', function (event) {
  var tombol = event.relatedTarget;
  document.getElementById('idHapus').value = tombol.getAttribute('data-id');
  document.getElementById('namaHapus').textContent = tombol.getAttribute('data-nama');
});
</script>

Langkah 3: hapus.php

<?php
require 'koneksi.php';
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $id = (int) ($_POST['id'] ?? 0);
    $stmt = $pdo->prepare('DELETE FROM santri WHERE id = ?');
    $stmt->execute([$id]);
    if ($stmt->rowCount() > 0) {
        $_SESSION['pesan'] = 'Data santri berhasil dihapus.';
    } else {
        $_SESSION['pesan'] = 'Data santri tidak ditemukan.';
        $_SESSION['tipe']  = 'danger';
    }
}
header('Location: index.php');
exit;

Penjelasan Kode hapus.php

Pertama, skrip di atas mengambil parameter ID dari URL menggunakan metode GET. Kemudian, prepared statement akan mengeksekusi perintah DELETE hanya jika ID tersebut tersedia. Setelah proses hapus selesai, sistem menyimpan pesan notifikasi ke dalam session dan mengarahkan kembali pengguna ke halaman utama index.php.

Menambahkan Tombol dan Modal Konfirmasi pada Halaman Utama (index.php)

Langkah kedua, buka kembali berkas index.php lalu tambahkan tombol hapus yang memicu modal konfirmasi pada kolom aksi setiap baris tabel santri:

Selanjutnya, letakkan struktur modal konfirmasi berikut di dalam perulangan foreach pada berkas index.php:

Penjelasan Penggunaan Modal Bootstrap

Atribut id pada elemen modal terbuat secara dinamis menggunakan nilai ID santri, seperti modalHapus1 atau modalHapus2. Hal ini memastikan bahwa setiap tombol hapus hanya akan membuka modal yang sesuai dengan data baris tersebut. Ketika pengguna menekan tombol “Ya, Hapus”, browser baru akan menjalankan skrip hapus.php.

Cara kerja

1. Satu modal untuk semua baris. Setiap tombol Hapus membawa data-id dan data-nama miliknya.
2. Saat modal akan tampil, skrip kecil menyalin nilai itu ke teks nama dan ke kolom tersembunyi idHapus.
3. Tombol Ya, Hapus mengirim id ke hapus.php dengan metode POST.
4. rowCount() menghitung baris yang benar-benar terhapus, sehingga pesan yang tampil sesuai kenyataan.
5. hapus.php tidak menampilkan apa pun. Halaman ini langsung mengalihkan pengguna kembali ke daftar.

Mengapa memakai POST, bukan tautan biasa

Tautan seperti hapus.php?id=3 bisa terbuka tanpa sengaja, misalnya lewat prefetch browser atau salah klik, lalu menghapus data. Metode POST hanya berjalan lewat form yang sengaja dikirim, dan modal memberi satu kesempatan untuk membatalkan.

Uji coba: klik Hapus pada satu santri. Modal menampilkan namanya. Klik Batal, data harus tetap ada. Klik Hapus lagi lalu Ya, Hapus, dan data harus hilang dengan pesan hijau.

Penyempurnaan: pesan, validasi, dan pencarian

Aplikasi sudah berfungsi penuh. Tiga penyempurnaan berikut membuatnya lebih nyaman dan lebih aman.

1. Pesan sukses atau gagal (flash message)

Pesan ini sudah ikut terpasang di header.php. Cara kerjanya:

1. Setelah simpan atau hapus, halaman menulis pesan ke $_SESSION[‘pesan’], lalu mengalihkan pengguna.
2. Halaman tujuan menampilkan pesan itu sebagai alert Bootstrap.
3. unset(…) langsung menghapus pesan, sehingga hanya tampil satu kali dan hilang saat halaman reload (termuat ulang).
4. $_SESSION[‘tipe’] menentukan warna: kosong berarti success (hijau), danger berarti merah.

2. Validasi tambahan

Atribut required pada HTML hanya memeriksa di browser dan mudah terlewati. Karena itu pemeriksaan di PHP tetap wajib. Tambahkan kode berikut di tambah.php, tepat setelah pemeriksaan jenis kelamin. Pada edit.php, ganti $data dengan $santri.

if (mb_strlen($data['nama']) > 100) {
    $errors[] = 'Nama maksimal 100 karakter.';
}
if ($data['no_hp_wali'] !== '' && !preg_match('/^[0-9+]{8,15}$/', $data['no_hp_wali'])) {
    $errors[] = 'No. HP wali hanya boleh angka (8-15 digit).';
}
if ($data['tanggal_lahir'] !== '') {
    $tgl = DateTime::createFromFormat('Y-m-d', $data['tanggal_lahir']);
    if (!$tgl || $tgl->format('Y-m-d') !== $data['tanggal_lahir']) {
        $errors[] = 'Format tanggal lahir tidak valid.';
    }
}

3. Pencarian nama

Pada index.php, ganti dua baris pertama setelah require (yang berisi $stmt dan $daftar) dengan kode berikut.

$cari = trim($_GET['cari'] ?? '');
if ($cari !== '') {
    $stmt = $pdo->prepare('SELECT * FROM santri WHERE nama LIKE :cari ORDER BY id DESC');
    $stmt->execute([':cari' => "%$cari%"]);
} else {
    $stmt = $pdo->query('SELECT * FROM santri ORDER BY id DESC');
}
$daftar = $stmt->fetchAll();

Lalu tambahkan form pencarian di bawah judul Daftar Santri, sebelum <div class=”card shadow-sm”>.

<form method="get" class="row g-2 mb-3">
  <div class="col-sm-8 col-md-6">
    <input type="text" name="cari" class="form-control"
           placeholder="Cari nama santri..." value="<?= e($cari) ?>">
  </div>
  <div class="col-auto">
    <button class="btn btn-outline-success">Cari</button>
    <a href="index.php" class="btn btn-outline-secondary">Reset</a>
  </div>
</form>
<p class="text-muted">Menampilkan <?= count($daftar) ?> santri.</p>

Tanda % pada “%$cari%” berarti “teks apa saja” di depan dan belakang, sehingga mencari ahmad juga menemukan Ahmad Fauzi. Form pencarian memakai metode GET agar kata kunci muncul di URL dan hasilnya bisa terlihat.

Tiga kebiasaan aman yang sudah kita kerjakan

Kebiasaan	Melindungi dari	Di mana dipakai
Prepared statement (:nama, ?)	SQL injection	tambah.php, edit.php, hapus.php, pencarian
Fungsi e() saat menampilkan data	XSS	Semua <?= … ?>
Validasi di sisi PHP	Data kosong atau salah format	tambah.php, edit.php

Ketiga kebiasaan ini sebaiknya terpakai di setiap aplikasi PHP yang ada, sekecil apa pun aplikasinya.

Akhirnya, seluruh rangkaian tutorial pembuatan aplikasi CRUD PHP MariaDB telah selesai kita kembangkan secara utuh dan siap untuk kita gunakan sebagai media pembelajaran web yang interaktif. (ms)