Aplikasi CRUD PHP MariaDB: Cara Tambah dan Edit Data Santri

MWI – Halo sobat pembelajar web MuSa, kita akan lanjutan materi ke-2. Tambah dan edit data PHP MariaDB merupakan proses penting saat Anda membangun aplikasi web berbasis database secara interaktif. Melalui panduan ini, Anda akan belajar cara membuat form input serta memproses perubahan data menggunakan prepared statement PDO agar aplikasi tetap aman.

Keunggulan Prepared Statement Saat Menambah dan Mengubah Data

Proses penambahan serta pembaruan data sangat rentan terhadap serangan SQL Injection apabila Anda tidak melakukan validasi secara benar. Oleh karena itu, penerapan prepared statement pada PDO menjadi solusi utama untuk mengamankan query SQL dari manipulasi input pihak luar.

Di samping itu, Anda dapat membaca panduan dasar CRUD PHP MariaDB di artikel sebelumnya untuk memahami alur koneksi database serta struktur dasar tabel proyek. Untuk referensi dokumentasi resmi mengenai keamanan fungsi form, Anda juga dapat mengunjungi halaman dokumentasi resmi PHP PDO.

Read: menampilkan daftar santri

Halaman index.php mengambil semua baris dari tabel santri dengan SELECT, lalu menampilkannya di tabel Bootstrap.

<?php
require 'koneksi.php';

$stmt   = $pdo->query('SELECT * FROM santri ORDER BY id DESC');
$daftar = $stmt->fetchAll();

include 'header.php';
?>

<div class="d-flex justify-content-between align-items-center mb-3">
  <h4 class="mb-0">Daftar Santri</h4>
  <a href="tambah.php" class="btn btn-success">+ Tambah Santri</a>
</div>

<div class="card shadow-sm">
  <div class="table-responsive">
    <table class="table table-striped table-hover mb-0">
      <thead class="table-success">
        <tr>
          <th>No</th>
          <th>Nama</th>
          <th>L/P</th>
          <th>Tanggal Lahir</th>
          <th>Asal Daerah</th>
          <th>Kamar</th>
          <th>No. HP Wali</th>
          <th>Aksi</th>
        </tr>
      </thead>
      <tbody>
        <?php if (count($daftar) === 0): ?>
          <tr>
            <td colspan="8" class="text-center text-muted">Belum ada data santri.</td>
          </tr>
        <?php endif; ?>

        <?php foreach ($daftar as $no => $s): ?>
          <tr>
            <td><?= $no + 1 ?></td>
            <td><?= e($s['nama']) ?></td>
            <td><?= e($s['jenis_kelamin']) ?></td>
            <td><?= e($s['tanggal_lahir']) ?></td>
            <td><?= e($s['asal_daerah']) ?></td>
            <td><?= e($s['kamar']) ?></td>
            <td><?= e($s['no_hp_wali']) ?></td>
            <td>
              <a href="edit.php?id=<?= $s['id'] ?>" class="btn btn-sm btn-warning">Edit</a>
              <!-- tombol Hapus ditambahkan pada bagian Delete -->
            </td>
          </tr>
        <?php endforeach; ?>
      </tbody>
    </table>
  </div>
</div>

<?php include 'footer.php'; ?>

Penjelasan

• $pdo->query(…) menjalankan SELECT yang tidak membawa data dari pengguna, jadi aman tanpa prepare.
• fetchAll() mengambil seluruh baris menjadi array, satu elemen per santri.
• foreach ($daftar as $no => $s) mengulang setiap santri. Variabel $no awal nilainya 0, maka nomor urut harus plus 1 menjadi $no + 1.
• <?= … ?> adalah singkatan dari <?php echo … ?>.
• e() mengubah karakter khusus seperti < dan > menjadi teks biasa. Tanpa e(), nama yang berisi kode <script> bisa dijalankan browser (serangan XSS).
• Jika tabel kosong, satu baris pesan harus kita tampilkan agar halaman tidak tampak rusak.

Uji coba: buka http://localhost/santri/. Lima data contoh harus tampil di tabel. Tombol Tambah dan Edit belum berfungsi akan kita buat pada tutorial selanjutnya.

Membuat Form Tambah Santri Baru (tambah.php)

Langkah pertama, buatlah berkas tambah.php untuk menampilkan form input data santri baru. Isikan kode pemrosesan INSERT berikut pada bagian paling atas berkas:

<?php
require 'koneksi.php';

$errors = [];
$data = [
    'nama'          => '',
    'jenis_kelamin' => '',
    'tanggal_lahir' => '',
    'asal_daerah'   => '',
    'kamar'         => '',
    'no_hp_wali'    => '',
];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    foreach ($data as $kolom => $nilai) {
        $data[$kolom] = trim($_POST[$kolom] ?? '');
    }

    if ($data['nama'] === '') {
        $errors[] = 'Nama wajib diisi.';
    }
    if (!in_array($data['jenis_kelamin'], ['L', 'P'])) {
        $errors[] = 'Jenis kelamin wajib dipilih.';
    }

    if (count($errors) === 0) {
        $sql = 'INSERT INTO santri
                  (nama, jenis_kelamin, tanggal_lahir, asal_daerah, kamar, no_hp_wali)
                VALUES
                  (:nama, :jk, :tgl, :asal, :kamar, :hp)';
        $stmt = $pdo->prepare($sql);
        $stmt->execute([
            ':nama'  => $data['nama'],
            ':jk'    => $data['jenis_kelamin'],
            ':tgl'   => $data['tanggal_lahir'] ?: null,
            ':asal'  => $data['asal_daerah'],
            ':kamar' => $data['kamar'],
            ':hp'    => $data['no_hp_wali'],
        ]);

        $_SESSION['pesan'] = 'Data santri berhasil ditambahkan.';
        header('Location: index.php');
        exit;
    }
}

include 'header.php';
?>

<h4 class="mb-3">Tambah Santri</h4>

<?php if ($errors): ?>
  <div class="alert alert-danger">
    <ul class="mb-0">
      <?php foreach ($errors as $pesan): ?>
        <li><?= e($pesan) ?></li>
      <?php endforeach; ?>
    </ul>
  </div>
<?php endif; ?>

<form method="post" class="card card-body shadow-sm">
  <div class="mb-3">
    <label class="form-label">Nama Lengkap</label>
    <input type="text" name="nama" class="form-control" value="<?= e($data['nama']) ?>" required>
  </div>

  <div class="mb-3">
    <label class="form-label">Jenis Kelamin</label>
    <select name="jenis_kelamin" class="form-select" required>
      <option value="">-- Pilih --</option>
      <option value="L" <?= $data['jenis_kelamin'] === 'L' ? 'selected' : '' ?>>Laki-laki</option>
      <option value="P" <?= $data['jenis_kelamin'] === 'P' ? 'selected' : '' ?>>Perempuan</option>
    </select>
  </div>

  <div class="mb-3">
    <label class="form-label">Tanggal Lahir</label>
    <input type="date" name="tanggal_lahir" class="form-control" value="<?= e($data['tanggal_lahir']) ?>">
  </div>

  <div class="mb-3">
    <label class="form-label">Asal Daerah</label>
    <input type="text" name="asal_daerah" class="form-control" value="<?= e($data['asal_daerah']) ?>">
  </div>

  <div class="row">
    <div class="col-md-6 mb-3">
      <label class="form-label">Kamar</label>
      <input type="text" name="kamar" class="form-control" value="<?= e($data['kamar']) ?>">
    </div>
    <div class="col-md-6 mb-3">
      <label class="form-label">No. HP Wali</label>
      <input type="text" name="no_hp_wali" class="form-control" value="<?= e($data['no_hp_wali']) ?>">
    </div>
  </div>

  <div>
    <button type="submit" class="btn btn-success">Simpan</button>
    <a href="index.php" class="btn btn-secondary">Batal</a>
  </div>
</form>

<?php include 'footer.php'; ?>

Cara kerja halaman ini

1. Saat halaman terbuka biasa (metode GET), PHP hanya menampilkan form kosong.
2. Saat tombol Simpan ada yang menekan, form akan terkirim dengan metode POST ke halaman yang sama, lalu blok if ($_SERVER[‘REQUEST_METHOD’] === ‘POST’) berjalan.
3. trim() membuang spasi di awal dan akhir isian.
4. Jika ada isian yang salah, maka kesalahan akan terkumpul pada array $errors.
5. Jika tidak ada kesalahan, data tersimpan, pesan sukses muncul, lalu pengguna teralihkan ke index.php.
6. Jika ada kesalahan, form tampil lagi dengan isian yang tadi diketik (lewat value=”<?= e(…) ?>”), sehingga pengguna tidak mengetik ulang.

Mengapa memakai prepared statement

Menyisipkan isian form langsung ke teks SQL berbahaya. Nama seperti x’; DROP TABLE santri; — bisa mengubah arti perintah dan menghapus tabel (serangan SQL injection). Pada prepared statement, SQL dan data akan terkirim terpisah: :nama hanyalah tempat kosong, dan nilainya selalu sebagai data, bukan perintah.

Catatan kecil

• $data[‘tanggal_lahir’] ?: null mengirim NULL jika tanggal kosong, karena kolom DATE menolak teks kosong.
• header(‘Location: …’) setelah simpan mencegah data tersimpan dua kali ketika pengguna menekan Refresh. Pola ini bernama Post/Redirect/Get.
• exit wajib ada setelah header(…) agar kode di bawahnya berhenti.

Uji coba: klik Tambah Santri, isi data, lalu simpan. Pesan hijau muncul dan santri baru tampil paling atas. Coba juga kosongkan nama untuk melihat pesan kesalahan.

Selanjutnya, Kita dapat membuat elemen form HTML menggunakan Bootstrap 5 agar tampilan antarmuka terasa rapi dan nyaman terlihat.

Membuat Form Edit dan Update Santri (edit.php)

Langkah kedua, buatlah berkas edit.php untuk memproses perbaikan data santri yang tersimpan. Pertama-tama, ambil data santri berdasarkan parameter ID menggunakan perintah SELECT:

<?php
require 'koneksi.php';

$id = (int) ($_GET['id'] ?? 0);

$stmt = $pdo->prepare('SELECT * FROM santri WHERE id = ?');
$stmt->execute([$id]);
$santri = $stmt->fetch();

if (!$santri) {
    $_SESSION['pesan'] = 'Data santri tidak ditemukan.';
    $_SESSION['tipe']  = 'danger';
    header('Location: index.php');
    exit;
}

$errors = [];

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $kolomForm = ['nama', 'jenis_kelamin', 'tanggal_lahir', 'asal_daerah', 'kamar', 'no_hp_wali'];
    foreach ($kolomForm as $kolom) {
        $santri[$kolom] = trim($_POST[$kolom] ?? '');
    }

    if ($santri['nama'] === '') {
        $errors[] = 'Nama wajib diisi.';
    }
    if (!in_array($santri['jenis_kelamin'], ['L', 'P'])) {
        $errors[] = 'Jenis kelamin wajib dipilih.';
    }

    if (count($errors) === 0) {
        $sql = 'UPDATE santri SET
                  nama          = :nama,
                  jenis_kelamin = :jk,
                  tanggal_lahir = :tgl,
                  asal_daerah   = :asal,
                  kamar         = :kamar,
                  no_hp_wali    = :hp
                WHERE id = :id';
        $stmt = $pdo->prepare($sql);
        $stmt->execute([
            ':nama'  => $santri['nama'],
            ':jk'    => $santri['jenis_kelamin'],
            ':tgl'   => $santri['tanggal_lahir'] ?: null,
            ':asal'  => $santri['asal_daerah'],
            ':kamar' => $santri['kamar'],
            ':hp'    => $santri['no_hp_wali'],
            ':id'    => $id,
        ]);

        $_SESSION['pesan'] = 'Data santri berhasil diperbarui.';
        header('Location: index.php');
        exit;
    }
}

include 'header.php';
?>

<h4 class="mb-3">Edit Santri</h4>

<?php if ($errors): ?>
  <div class="alert alert-danger">
    <ul class="mb-0">
      <?php foreach ($errors as $pesan): ?>
        <li><?= e($pesan) ?></li>
      <?php endforeach; ?>
    </ul>
  </div>
<?php endif; ?>

<form method="post" class="card card-body shadow-sm">
  <div class="mb-3">
    <label class="form-label">Nama Lengkap</label>
    <input type="text" name="nama" class="form-control" value="<?= e($santri['nama']) ?>" required>
  </div>

  <div class="mb-3">
    <label class="form-label">Jenis Kelamin</label>
    <select name="jenis_kelamin" class="form-select" required>
      <option value="">-- Pilih --</option>
      <option value="L" <?= $santri['jenis_kelamin'] === 'L' ? 'selected' : '' ?>>Laki-laki</option>
      <option value="P" <?= $santri['jenis_kelamin'] === 'P' ? 'selected' : '' ?>>Perempuan</option>
    </select>
  </div>

  <div class="mb-3">
    <label class="form-label">Tanggal Lahir</label>
    <input type="date" name="tanggal_lahir" class="form-control" value="<?= e($santri['tanggal_lahir']) ?>">
  </div>

  <div class="mb-3">
    <label class="form-label">Asal Daerah</label>
    <input type="text" name="asal_daerah" class="form-control" value="<?= e($santri['asal_daerah']) ?>">
  </div>

  <div class="row">
    <div class="col-md-6 mb-3">
      <label class="form-label">Kamar</label>
      <input type="text" name="kamar" class="form-control" value="<?= e($santri['kamar']) ?>">
    </div>
    <div class="col-md-6 mb-3">
      <label class="form-label">No. HP Wali</label>
      <input type="text" name="no_hp_wali" class="form-control" value="<?= e($santri['no_hp_wali']) ?>">
    </div>
  </div>

  <div>
    <button type="submit" class="btn btn-success">Simpan Perubahan</button>
    <a href="index.php" class="btn btn-secondary">Batal</a>
  </div>
</form>

<?php include 'footer.php'; ?>

Perbedaan dengan tambah.php

Hal	tambah.php	edit.php
Sumber id	Tidak ada	$_GET[‘id’] dari tautan Edit
Isi awal form	Kosong	Data lama dari SELECT
Perintah SQL	INSERT	UPDATE … WHERE id = :id
Pesan sukses	Berhasil ditambahkan	Berhasil diperbarui

Poin penting

• (int) mengubah id menjadi angka, sehingga isian aneh pada URL tidak ikut ke query.
• $stmt->fetch() bernilai false jika id tidak ada. Pada kasus itu pengguna akan kembali ke daftar dengan pesan merah (danger).
• Form tidak memakai atribut action, jadi data dikirim ke alamat yang sama, lengkap dengan ?id=…. Itu sebabnya id tetap tersedia saat form dikirim.
• Jangan lupa WHERE id = :id. Tanpa itu, UPDATE mengubah seluruh baris di tabel.
• Jika isian salah, $santri sudah berisi data yang terisi, sehingga form tampil lagi dengan isian terakhir.

Uji coba: klik Edit pada satu santri, ubah kamar, lalu simpan. Perubahan harus langsung terlihat di daftar. Coba juga membuka edit.php?id=9999 untuk melihat pesan data tidak tidak ada.

Demikian materi kedua ini, akna kita lanjutkan pada materi ke-3