Aplikasi CRUD PHP MariaDB Data Santri Sederhana

MWI – Sobat pembelajar MuSa, apa kabarnya, yuk lanjutkan materi kita kali ini kita bahas PHP dan DB-nya. Membuat aplikasi CRUD PHP MariaDB merupakan langkah awal yang sangat baik bagi siapa saja yang ingin menguasai pemrograman web dasar. Melalui panduan ini, Anda dapat belajar mengelola data santri secara terstruktur, mulai dari menampilkan, menambah, mengubah, hingga menghapus data.

Keunggulan Menggunakan PDO dan Prepared Statement

Penggunaan PHP Data Objects (PDO) menawarkan tingkat keamanan yang lebih tinggi daripada ekstensi MySQLi biasa. Selain itu, PDO mendukung prepared statement untuk mencegah serangan SQL Injection. Akibatnya, aplikasi web Anda menjadi jauh lebih aman dari ancaman peretas.

Di samping itu, Anda juga dapat memanfaatkan kerangka kerja Bootstrap 5 untuk mempercantik tampilan tabel, form, dan modal konfirmasi hapus data.

Topologi dan Struktur Berkas Proyek

Sebelum menulis kode, Anda perlu menyiapkan struktur folder proyek pada server lokal (XAMPP atau Laragon). Pertama-tama, buatlah folder bernama santri di dalam direktori htdocs atau www.

Selanjutnya, susun berkas proyek dengan struktur sebagai berikut:

• koneksi.php (Menyimpan koneksi database PDO dan fungsi bantu)
• header.php (Menyimpan bagian atas halaman dan navigasi)
• footer.php (Menyimpan bagian bawah halaman dan skrip Bootstrap)
• index.php (Menampilkan seluruh daftar data santri – Read)
• tambah.php (Menyediakan form penambahan santri baru – Create)
• edit.php (Menyediakan form perbaikan data santri – Update)
• hapus.php (Memproses penghapusan data santri – Delete)

Membuat Database dan Tabel MariaDB

Langkah berikutnya, Anda harus menyiapkan database db_santri di phpMyAdmin. Buka tab SQL lalu jalankan perintah berikut untuk membuat tabel santri. Buka phpMyAdmin, pilih tab SQL, tempel kode berikut, lalu klik Kirim (Go):

CREATE DATABASE db_santri
  CHARACTER SET utf8mb4
  COLLATE utf8mb4_general_ci;
USE db_santri;
CREATE TABLE santri (
  id            INT AUTO_INCREMENT PRIMARY KEY,
  nama          VARCHAR(100) NOT NULL,
  jenis_kelamin ENUM('L','P') NOT NULL,
  tanggal_lahir DATE NULL,
  asal_daerah   VARCHAR(100),
  kamar         VARCHAR(20),
  no_hp_wali    VARCHAR(20),
  created_at    TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

Arti setiap kolom

Kolom	Tipe	Fungsi
id	INT AUTO_INCREMENT	Nomor unik santri, naik otomatis
nama	VARCHAR(100)	Nama lengkap (wajib diisi)
jenis_kelamin	ENUM(‘L’,’P’)	Hanya boleh L atau P
tanggal_lahir	DATE	Tanggal lahir, boleh kosong
asal_daerah	VARCHAR(100)	Kota atau kabupaten asal
kamar	VARCHAR(20)	Nama atau nomor kamar
no_hp_wali	VARCHAR(20)	Nomor HP wali santri
created_at	TIMESTAMP	Waktu data dibuat, terisi otomatis

Data contoh

Isi beberapa baris agar halaman daftar tidak kosong saat kita melakukan pengujian. Nama di bawah hanya data contoh.

INSERT INTO santri 
    (nama, jenis_kelamin, tanggal_lahir, asal_daerah, kamar, no_hp_wali) VALUES
    ('Ahmad Fauzi', 'L', '2010-03-14', 'Bandung', 'A1', '081234567801'),
    ('Muhammad Rizky', 'L', '2009-11-02', 'Garut', 'A2', '081234567802'),
    ('Siti Aisyah', 'P', '2010-07-21', 'Tasikmalaya', 'B1', '081234567803'),
    ('Nur Hidayah', 'P', '2011-01-09', 'Cianjur', 'B2', '081234567804'),
   ('Ilham Maulana', 'L', '2009-05-30', 'Sukabumi', 'A1', '081234567805');

Koneksi database dan kerangka tampilan

Semua halaman memakai tiga berkas pendukung: satu untuk koneksi ke MariaDB, dua untuk kerangka tampilan Bootstrap. Setelah menyiapkan tabel, buatlah berkas koneksi.php untuk mengisikan konfigurasi PDO seperti berikut:

<?php
session_start();
$host = 'localhost';
$db   = 'db_santri';
$user = 'root';
$pass = '';
try {
    $pdo = new PDO(
        "mysql:host=$host;dbname=$db;charset=utf8mb4",
        $user,
        $pass
    );
    $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    $pdo->setAttribute(PDO::ATTR_DEFAULT_FETCH_MODE, PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    die('Koneksi database gagal: ' . $e->getMessage());
}
// Fungsi bantu: mengamankan teks sebelum ditampilkan di HTML
function e($teks)
{
    return htmlspecialchars($teks ?? '', ENT_QUOTES, 'UTF-8');
}

Penjelasan

• session_start() menyalakan session. Kita memakainya untuk pesan sukses atau gagal antar halaman.
• new PDO(…) membuka koneksi. Driver mysql sama dengan MariaDB.
• ERRMODE_EXCEPTION membuat kesalahan SQL muncul sebagai error yang jelas, bukan tanpa penjelasan gagal.
• FETCH_ASSOC membuat setiap baris hasil query berbentuk array dengan nama kolom, misalnya $s[‘nama’].
• Pada XAMPP dan Laragon bawaan, user root tidak memakai password. Sesuaikan $user dan $pass jika berbeda.
• Fungsi e() penggunannya untuk menampilkan data dari database atau form.

Menampilkan dan Mengelola Data Santri

header.php

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Data Santri</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="bg-light">
<nav class="navbar navbar-dark bg-success mb-4">
  <div class="container">
    <a class="navbar-brand" href="index.php">Data Santri</a>
  </div>
</nav>
<div class="container">
<?php if (isset($_SESSION['pesan'])): ?>
  <div class="alert alert-<?= $_SESSION['tipe'] ?? 'success' ?> alert-dismissible fade show">
    <?= e($_SESSION['pesan']) ?>
    <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
  </div>
  <?php unset($_SESSION['pesan'], $_SESSION['tipe']); ?>
<?php endif; ?>

footer.php

    </div>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>

Bagian <div class=”container”> dibuka di header.php dan ditutup di footer.php. Isi setiap halaman berada di antara keduanya. Blok alert di header.php akan dijelaskan pada bagian Penyempurnaan.

Aturan penting: setiap halaman diawali <?php require ‘koneksi.php’; di baris pertama, tanpa spasi atau baris kosong sebelumnya. Perintah header(‘Location: …’) hanya bisa jalan sebelum ada keluaran HTML.

Kemudian, Anda dapat memanggil data dari tabel menggunakan query SELECT pada berkas index.php. Gunakan fungsi e() setiap kali Anda menampilkan data ke layar guna mencegah serangan Cross-Site Scripting (XSS).

Kita akan lanjutkan ke materi berikutnya tentang menampilkan data santri pada part ke-2