MODUL PEMROGRAMAN WEBSITE 2

Mata Kuliah: Pemrograman Website 2
Kode MK: INF2419
SKS: 3 (Praktikum)
Semester: Genap 2025/2026
Program Studi: Informatika
Fakultas: FEBI / Saintek
Universitas: UIN K.H. Abdurrahman Wahid Pekalongan

Dosen Pengampu: Mohammad Reza Maulana, M.Kom
NIP: 199110082025051002

Pertemuan: 5 dari 16
Durasi: 150 menit (3 × 50 menit)
Studi Kasus Berkelanjutan: Sistem Manajemen Perpustakaan

PERTEMUAN 5

FORM HANDLING DENGAN PHP

A. INFORMASI PERTEMUAN

Aspek	Keterangan
Capaian Pembelajaran Lulusan (CPL)	CPL04: Menguasai konsep teoretis bidang ilmu komputer/informatika dan mampu memformulasikan penyelesaian masalah prosedural.
Capaian Pembelajaran Mata Kuliah (CPMK)	CPMK04.1: Memahami konsep dasar pengembangan web backend menggunakan PHP dan database
Sub-CPMK	Sub-CPMK04.1.2: Menjelaskan dan menggunakan sintaks dasar PHP untuk menghasilkan output dinamis (form handling)
Indikator Pencapaian	Mahasiswa mampu: 1. Membuat form HTML untuk input data 2. Memahami perbedaan method GET dan POST 3. Menggunakan superglobal variables ($_GET, $_POST, $_REQUEST) 4. Melakukan validasi input data 5. Melakukan sanitasi data untuk keamanan 6. Menampilkan error message yang informatif 7. Menerapkan form handling dalam sistem perpustakaan
Alokasi Waktu	• Teori: 60 menit • Praktikum: 90 menit • Total: 150 menit (3 × 50 menit)

B. PENDAHULUAN

1. Deskripsi Singkat

Pertemuan kelima ini membahas form handling dalam PHP, yaitu cara menerima, memproses, dan memvalidasi input data dari user. Form adalah interface utama untuk interaksi user dengan aplikasi web. Mahasiswa akan mempelajari method GET vs POST, superglobal variables, validasi input, sanitasi data, dan penerapan security basics dalam konteks sistem perpustakaan untuk input dan pencarian data buku.

2. Keterkaitan dengan Pertemuan Lain

Pertemuan ini merupakan jembatan penting menuju CRUD:

Pertemuan 2-3: Menggunakan variabel, operator, dan kontrol alur untuk validasi
Pertemuan 4: Form data diterima sebagai array associative
Pertemuan 6-7: Form akan terintegrasi dengan database (CRUD)
Pertemuan 9-16: Konsep yang sama diterapkan dalam Laravel dengan fitur lebih advanced

3. Manfaat Pembelajaran

Mampu menerima input dari user dengan aman
Dapat memvalidasi data sebelum diproses
Memahami security risks dan cara mencegahnya
Siap membuat fitur input data buku dan pencarian
Menguasai konsep dasar untuk CRUD database

4. Relevansi dengan Studi Kasus

Dalam sistem perpustakaan, form handling digunakan untuk:

Form input data buku baru
Form pencarian buku (search)
Form filter data (kategori, harga, dll)
Validasi data buku (required fields, format, dll)
Error handling dan user feedback

C. MATERI TEORI

1. Form HTML Basics

a. Struktur Form HTML

Form adalah elemen HTML untuk mengumpulkan input dari user.

Sintaks Dasar:

<form action="proses.php" method="POST">
    <!-- Input fields -->
    <input type="text" name="judul">
    <button type="submit">Submit</button>
</form>

Atribut Penting Form:

action: URL tujuan pengiriman data (file PHP yang akan memproses)
method: Cara pengiriman data (GET atau POST)
enctype: Encoding type (untuk upload file: multipart/form-data)

b. Input Types

1. Text Input:

<input type="text" name="judul" placeholder="Judul Buku">
<input type="email" name="email" placeholder="Email">
<input type="number" name="harga" min="0">
<input type="tel" name="telepon" placeholder="08xx">
<input type="url" name="website">

2. Textarea:

<textarea name="deskripsi" rows="4" cols="50"></textarea>

3. Select (Dropdown):

<select name="kategori">
    <option value="">-- Pilih Kategori --</option>
    <option value="Programming">Programming</option>
    <option value="Database">Database</option>
    <option value="Web Design">Web Design</option>
</select>

4. Radio Button:

<input type="radio" name="bahasa" value="Indonesia"> Indonesia
<input type="radio" name="bahasa" value="Inggris"> Inggris

5. Checkbox:

<input type="checkbox" name="tersedia" value="1"> Tersedia
<input type="checkbox" name="bestseller" value="1"> Best Seller

6. Hidden Input:

<input type="hidden" name="id" value="123">

7. Date Input:

<input type="date" name="tanggal_terbit">

c. Contoh Form Lengkap

<form action="proses_buku.php" method="POST">
    <div class="mb-3">
        <label>Judul Buku:</label>
        <input type="text" name="judul" class="form-control" required>
    </div>
    
    <div class="mb-3">
        <label>Kategori:</label>
        <select name="kategori" class="form-control" required>
            <option value="">-- Pilih --</option>
            <option value="Programming">Programming</option>
            <option value="Database">Database</option>
        </select>
    </div>
    
    <div class="mb-3">
        <label>Pengarang:</label>
        <input type="text" name="pengarang" class="form-control" required>
    </div>
    
    <div class="mb-3">
        <label>Harga:</label>
        <input type="number" name="harga" class="form-control" min="0" required>
    </div>
    
    <div class="mb-3">
        <label>Stok:</label>
        <input type="number" name="stok" class="form-control" min="0" required>
    </div>
    
    <button type="submit" class="btn btn-primary">Simpan</button>
</form>

2. Method GET vs POST

a. Method GET

Karakteristik:

Data dikirim melalui URL (query string)
Visible di address bar
Dapat di-bookmark
Terbatas panjangnya (~2000 karakter)
Tidak aman untuk data sensitif
Bisa di-cache oleh browser

Contoh URL GET:

http://localhost/perpustakaan/search.php?keyword=PHP&kategori=Programming

Kapan Menggunakan GET:

Search/filter data
Pagination
Data yang boleh di-share via URL
Idempotent operation (tidak mengubah data)

Contoh Form GET:

<form action="search.php" method="GET">
    <input type="text" name="keyword" placeholder="Cari buku...">
    <button type="submit">Cari</button>
</form>

Menerima Data GET di PHP:

<?php
$keyword = $_GET['keyword'];
$kategori = $_GET['kategori'];
 
echo "Mencari: $keyword";
echo "Kategori: $kategori";
?>

b. Method POST

Karakteristik:

Data dikirim di request body
Tidak visible di URL
Tidak dapat di-bookmark
Tidak terbatas panjang
Lebih aman (tapi tetap bisa disadap tanpa HTTPS)
Tidak di-cache

Kapan Menggunakan POST:

Submit data baru (Create)
Update data
Delete data
Data sensitif (password, dll)
Upload file
Data panjang (deskripsi, konten)

Contoh Form POST:

<form action="tambah_buku.php" method="POST">
    <input type="text" name="judul">
    <textarea name="deskripsi"></textarea>
    <button type="submit">Simpan</button>
</form>

Menerima Data POST di PHP:

<?php
$judul = $_POST['judul'];
$deskripsi = $_POST['deskripsi'];
 
echo "Judul: $judul";
echo "Deskripsi: $deskripsi";
?>

c. Perbandingan GET vs POST

Aspek	GET	POST
Visibility	Terlihat di URL	Tidak terlihat
Security	Kurang aman	Lebih aman
Bookmarkable	Ya	Tidak
Cacheable	Ya	Tidak
Data Length	Terbatas (~2000 char)	Unlimited
Back Button	Aman	Bisa re-submit
Use Case	Search, Filter	Create, Update, Delete

3. Superglobal Variables

Superglobal adalah variabel built-in PHP yang selalu tersedia di semua scope.

a. $_GET

Berisi data dari URL query string atau form method GET.

<?php
// URL: search.php?keyword=PHP&kategori=Programming
 
$keyword = $_GET['keyword'];     // "PHP"
$kategori = $_GET['kategori'];   // "Programming"
 
// Cek apakah key ada
if (isset($_GET['keyword'])) {
    echo $_GET['keyword'];
}
 
// Atau gunakan null coalescing
$keyword = $_GET['keyword'] ?? 'default';
?>

b. $_POST

Berisi data dari form method POST.

<?php
// Form: <input name="judul" value="PHP Programming">
 
$judul = $_POST['judul'];  // "PHP Programming"
 
// Cek apakah ada
if (isset($_POST['judul'])) {
    $judul = $_POST['judul'];
}
 
// Best practice
$judul = $_POST['judul'] ?? '';
?>

c. $_REQUEST

Berisi gabungan $_GET, $_POST, dan $_COOKIE.

<?php
// Bisa dari GET atau POST
$keyword = $_REQUEST['keyword'];
 
// Tidak recommended! 
// Lebih baik eksplisit gunakan $_GET atau $_POST
?>

⚠️ Warning: Hindari $_REQUEST karena tidak jelas sumber datanya.

d. $_SERVER

Berisi informasi server dan request.

<?php
// Request method
$method = $_SERVER['REQUEST_METHOD'];  // GET atau POST
 
// URL saat ini
$url = $_SERVER['REQUEST_URI'];
 
// User Agent
$user_agent = $_SERVER['HTTP_USER_AGENT'];
 
// IP Address
$ip = $_SERVER['REMOTE_ADDR'];
 
// Document Root
$root = $_SERVER['DOCUMENT_ROOT'];
?>

e. $_FILES

Berisi informasi file yang di-upload (akan dibahas lebih detail jika ada waktu).

<?php
$file = $_FILES['upload'];
$file_name = $file['name'];
$file_size = $file['size'];
$file_tmp = $file['tmp_name'];
?>

4. Validasi Input

Validasi adalah proses memastikan data yang diterima sesuai dengan requirement.

a. Jenis Validasi

1. Required Field Validation

<?php
$judul = $_POST['judul'] ?? '';
 
if (empty($judul)) {
    $errors[] = "Judul tidak boleh kosong";
}
?>

2. Length Validation

<?php
if (strlen($judul) < 3) {
    $errors[] = "Judul minimal 3 karakter";
}
 
if (strlen($judul) > 200) {
    $errors[] = "Judul maksimal 200 karakter";
}
?>

3. Format Validation

<?php
// Email
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $errors[] = "Format email tidak valid";
}
 
// URL
if (!filter_var($url, FILTER_VALIDATE_URL)) {
    $errors[] = "Format URL tidak valid";
}
 
// Numeric
if (!is_numeric($harga)) {
    $errors[] = "Harga harus berupa angka";
}
?>

4. Range Validation

<?php
$harga = $_POST['harga'] ?? 0;
 
if ($harga < 10000) {
    $errors[] = "Harga minimal Rp 10.000";
}
 
if ($harga > 1000000) {
    $errors[] = "Harga maksimal Rp 1.000.000";
}
?>

5. Pattern Validation (Regex)

<?php
// ISBN: 978-602-1234-56-7
$isbn = $_POST['isbn'] ?? '';
$pattern = '/^\d{3}-\d{3}-\d{4}-\d{2}-\d$/';
 
if (!preg_match($pattern, $isbn)) {
    $errors[] = "Format ISBN tidak valid (contoh: 978-602-1234-56-7)";
}
 
// Telepon: 08xxxxxxxxxx
$telepon = $_POST['telepon'] ?? '';
if (!preg_match('/^08\d{8,11}$/', $telepon)) {
    $errors[] = "Format telepon tidak valid (contoh: 081234567890)";
}
?>

b. Validasi Lengkap Contoh

<?php
$errors = [];
 
// Ambil data
$judul = $_POST['judul'] ?? '';
$pengarang = $_POST['pengarang'] ?? '';
$harga = $_POST['harga'] ?? 0;
$stok = $_POST['stok'] ?? 0;
$email = $_POST['email'] ?? '';
 
// Validasi Judul
if (empty($judul)) {
    $errors[] = "Judul tidak boleh kosong";
} elseif (strlen($judul) < 3) {
    $errors[] = "Judul minimal 3 karakter";
} elseif (strlen($judul) > 200) {
    $errors[] = "Judul maksimal 200 karakter";
}
 
// Validasi Pengarang
if (empty($pengarang)) {
    $errors[] = "Pengarang tidak boleh kosong";
}
 
// Validasi Harga
if (!is_numeric($harga)) {
    $errors[] = "Harga harus berupa angka";
} elseif ($harga < 10000) {
    $errors[] = "Harga minimal Rp 10.000";
}
 
// Validasi Stok
if (!is_numeric($stok)) {
    $errors[] = "Stok harus berupa angka";
} elseif ($stok < 0) {
    $errors[] = "Stok tidak boleh negatif";
}
 
// Validasi Email
if (!empty($email) && !filter_var($email, FILTER_VALIDATE_EMAIL)) {
    $errors[] = "Format email tidak valid";
}
 
// Cek hasil validasi
if (count($errors) == 0) {
    // Valid! Proses data
    echo "Data valid, siap disimpan";
} else {
    // Ada error
    foreach ($errors as $error) {
        echo "- $error<br />";
    }
}
?>

5. Sanitasi Data

Sanitasi adalah proses membersihkan data dari karakter berbahaya.

a. Kenapa Perlu Sanitasi?

Security Risks:

XSS (Cross-Site Scripting)
SQL Injection
Code Injection
HTML Injection

b. Fungsi Sanitasi

1. htmlspecialchars()

Mengkonversi karakter khusus HTML menjadi entities.

<?php
$input = "<script>alert('XSS')</script>";
$clean = htmlspecialchars($input);
echo $clean;  
// Output: &lt;script&gt;alert('XSS')&lt;/script&gt;
// Browser akan tampilkan sebagai text, tidak execute script
?>

2. strip_tags()

Menghapus HTML dan PHP tags.

<?php
$input = "<h1>Judul</h1><script>alert('XSS')</script>";
$clean = strip_tags($input);
echo $clean;  // Output: Judul
?>

3. trim()

Menghapus whitespace di awal dan akhir.

<?php
$input = "  PHP Programming  ";
$clean = trim($input);
echo $clean;  // "PHP Programming"
?>

4. filter_var()

Filter dengan berbagai option.

<?php
// Sanitize string
$clean = filter_var($input, FILTER_SANITIZE_STRING);
 
// Sanitize email
$clean = filter_var($email, FILTER_SANITIZE_EMAIL);
 
// Sanitize URL
$clean = filter_var($url, FILTER_SANITIZE_URL);
 
// Sanitize number
$clean = filter_var($input, FILTER_SANITIZE_NUMBER_INT);
?>

c. Sanitasi Lengkap

<?php
function sanitize_input($data) {
    $data = trim($data);                  // Hapus spasi
    $data = stripslashes($data);          // Hapus backslashes
    $data = htmlspecialchars($data);      // Convert HTML chars
    return $data;
}
 
// Penggunaan
$judul = sanitize_input($_POST['judul']);
$pengarang = sanitize_input($_POST['pengarang']);
?>

d. Best Practice

Flow yang Benar:

Terima data dari form
Sanitasi untuk keamanan
Validasi untuk business rules
Proses jika valid

<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // 1. Terima & Sanitasi
    $judul = sanitize_input($_POST['judul'] ?? '');
    $harga = filter_var($_POST['harga'] ?? 0, FILTER_SANITIZE_NUMBER_INT);
    
    // 2. Validasi
    $errors = [];
    if (empty($judul)) {
        $errors[] = "Judul wajib diisi";
    }
    
    if ($harga < 10000) {
        $errors[] = "Harga minimal Rp 10.000";
    }
    
    // 3. Proses jika valid
    if (count($errors) == 0) {
        // Simpan ke database / array
        $success = "Data berhasil disimpan!";
    }
}
?>

6. Form Security Basics

a. CSRF Protection

CSRF (Cross-Site Request Forgery): Serangan yang memaksa user mengirim request tanpa sepengetahuan.

Cara Mencegah: Gunakan token di form.

<?php
// Generate token
session_start();
if (!isset($_SESSION['csrf_token'])) {
    $_SESSION['csrf_token'] = bin2hex(random_bytes(32));
}
?>
 
<form method="POST">
    <!-- Hidden CSRF Token -->
    <input type="hidden" name="csrf_token" 
           value="<?php echo $_SESSION['csrf_token']; ?>">
    
    <!-- Form fields -->
    <button type="submit">Submit</button>
</form>
 
<?php
// Validasi token di proses
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    if (!isset($_POST['csrf_token']) || 
        $_POST['csrf_token'] !== $_SESSION['csrf_token']) {
        die("Invalid CSRF token");
    }
    
    // Proses form
}
?>

Note: CSRF akan dihandle otomatis oleh Laravel di pertemuan selanjutnya.

b. SQL Injection Prevention

Akan dibahas detail di pertemuan 7 (Database).

Preview: Gunakan prepared statements, jangan concat query.

// ❌ BAD: SQL Injection vulnerable
$query = "SELECT * FROM buku WHERE judul = '$judul'";
 
// ✅ GOOD: Prepared statement
$stmt = $conn->prepare("SELECT * FROM buku WHERE judul = ?");
$stmt->bind_param("s", $judul);

c. XSS Prevention

Selalu escape output dengan htmlspecialchars().

<?php
// ❌ BAD
echo $_POST['judul'];  // XSS vulnerable
 
// ✅ GOOD
echo htmlspecialchars($_POST['judul']);
?>

D. PRAKTIKUM

1. Tujuan Praktikum

Membuat form input data buku
Membuat form pencarian buku
Memproses data form dengan validasi
Menampilkan error message yang informatif
Mengimplementasikan sanitasi data
Membuat sistem CRUD sederhana (tanpa database, menggunakan array)

2. PRAKTIKUM 1: Form Input Buku Sederhana

Tujuan

Membuat form input data buku dengan validasi dasar.

Langkah-langkah

Buat file form_buku.php:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Input Buku</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-8">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h4 class="mb-0"><i class="bi bi-plus-circle"></i> Form Input Buku Baru</h4>
                    </div>
                    <div class="card-body">
                        <?php
                        // Variabel untuk menyimpan pesan
                        $success = '';
                        $errors = [];
                        
                        // Variabel untuk menyimpan input (untuk keep value)
                        $judul = '';
                        $kategori = '';
                        $pengarang = '';
                        $penerbit = '';
                        $tahun = '';
                        $harga = '';
                        $stok = '';
                        
                        // Proses form jika di-submit
                        if ($_SERVER['REQUEST_METHOD'] == 'POST') {
                            // Ambil dan sanitasi data
                            $judul = trim(htmlspecialchars($_POST['judul'] ?? ''));
                            $kategori = trim($_POST['kategori'] ?? '');
                            $pengarang = trim(htmlspecialchars($_POST['pengarang'] ?? ''));
                            $penerbit = trim(htmlspecialchars($_POST['penerbit'] ?? ''));
                            $tahun = trim($_POST['tahun'] ?? '');
                            $harga = trim($_POST['harga'] ?? '');
                            $stok = trim($_POST['stok'] ?? '');
                            
                            // Validasi Judul
                            if (empty($judul)) {
                                $errors[] = "Judul buku wajib diisi";
                            } elseif (strlen($judul) < 3) {
                                $errors[] = "Judul minimal 3 karakter";
                            }
                            
                            // Validasi Kategori
                            if (empty($kategori)) {
                                $errors[] = "Kategori wajib dipilih";
                            }
                            
                            // Validasi Pengarang
                            if (empty($pengarang)) {
                                $errors[] = "Pengarang wajib diisi";
                            }
                            
                            // Validasi Penerbit
                            if (empty($penerbit)) {
                                $errors[] = "Penerbit wajib diisi";
                            }
                            
                            // Validasi Tahun
                            if (empty($tahun)) {
                                $errors[] = "Tahun terbit wajib diisi";
                            } elseif (!is_numeric($tahun)) {
                                $errors[] = "Tahun harus berupa angka";
                            } elseif ($tahun < 1900 || $tahun > date('Y')) {
                                $errors[] = "Tahun tidak valid (1900 - " . date('Y') . ")";
                            }
                            
                            // Validasi Harga
                            if (empty($harga)) {
                                $errors[] = "Harga wajib diisi";
                            } elseif (!is_numeric($harga)) {
                                $errors[] = "Harga harus berupa angka";
                            } elseif ($harga < 10000) {
                                $errors[] = "Harga minimal Rp 10.000";
                            }
                            
                            // Validasi Stok
                            if (empty($stok) && $stok !== '0') {
                                $errors[] = "Stok wajib diisi";
                            } elseif (!is_numeric($stok)) {
                                $errors[] = "Stok harus berupa angka";
                            } elseif ($stok < 0) {
                                $errors[] = "Stok tidak boleh negatif";
                            }
                            
                            // Jika tidak ada error, proses data
                            if (count($errors) == 0) {
                                $success = "Data buku berhasil disimpan!";
                                
                                // Reset form
                                $judul = '';
                                $kategori = '';
                                $pengarang = '';
                                $penerbit = '';
                                $tahun = '';
                                $harga = '';
                                $stok = '';
                            }
                        }
                        ?>
                        
                        <!-- Tampilkan pesan sukses -->
                        <?php if ($success): ?>
                        <div class="alert alert-success alert-dismissible fade show">
                            <i class="bi bi-check-circle"></i> <?php echo $success; ?>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                        <?php endif; ?>
                        
                        <!-- Tampilkan error -->
                        <?php if (count($errors) > 0): ?>
                        <div class="alert alert-danger alert-dismissible fade show">
                            <h6><i class="bi bi-exclamation-triangle"></i> Terdapat kesalahan:</h6>
                            <ul class="mb-0">
                                <?php foreach ($errors as $error): ?>
                                    <li><?php echo $error; ?></li>
                                <?php endforeach; ?>
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                        <?php endif; ?>
                        
                        <!-- Form -->
                        <form method="POST" action="">
                            <div class="mb-3">
                                <label for="judul" class="form-label">Judul Buku <span class="text-danger">*</span></label>
                                <input type="text" class="form-control <?php echo (!empty($errors) && empty($judul)) ? 'is-invalid' : ''; ?>" 
                                       id="judul" name="judul" value="<?php echo htmlspecialchars($judul); ?>" 
                                       placeholder="Masukkan judul buku">
                            </div>
                            
                            <div class="mb-3">
                                <label for="kategori" class="form-label">Kategori <span class="text-danger">*</span></label>
                                <select class="form-select" id="kategori" name="kategori">
                                    <option value="">-- Pilih Kategori --</option>
                                    <option value="Programming" <?php echo ($kategori == 'Programming') ? 'selected' : ''; ?>>Programming</option>
                                    <option value="Database" <?php echo ($kategori == 'Database') ? 'selected' : ''; ?>>Database</option>
                                    <option value="Web Design" <?php echo ($kategori == 'Web Design') ? 'selected' : ''; ?>>Web Design</option>
                                    <option value="Networking" <?php echo ($kategori == 'Networking') ? 'selected' : ''; ?>>Networking</option>
                                </select>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="pengarang" class="form-label">Pengarang <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="pengarang" name="pengarang" 
                                           value="<?php echo htmlspecialchars($pengarang); ?>" 
                                           placeholder="Nama pengarang">
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="penerbit" class="form-label">Penerbit <span class="text-danger">*</span></label>
                                    <input type="text" class="form-control" id="penerbit" name="penerbit"
                                           value="<?php echo htmlspecialchars($penerbit); ?>" 
                                           placeholder="Nama penerbit">
                                </div>
                            </div>
                            
                            <div class="row">
                                <div class="col-md-4 mb-3">
                                    <label for="tahun" class="form-label">Tahun Terbit <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="tahun" name="tahun" 
                                           value="<?php echo htmlspecialchars($tahun); ?>" 
                                           min="1900" max="<?php echo date('Y'); ?>" 
                                           placeholder="<?php echo date('Y'); ?>">
                                </div>
                                
                                <div class="col-md-4 mb-3">
                                    <label for="harga" class="form-label">Harga (Rp) <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="harga" name="harga" 
                                           value="<?php echo htmlspecialchars($harga); ?>" 
                                           min="10000" step="1000" 
                                           placeholder="75000">
                                </div>
                                
                                <div class="col-md-4 mb-3">
                                    <label for="stok" class="form-label">Stok <span class="text-danger">*</span></label>
                                    <input type="number" class="form-control" id="stok" name="stok" 
                                           value="<?php echo htmlspecialchars($stok); ?>" 
                                           min="0" 
                                           placeholder="10">
                                </div>
                            </div>
                            
                            <div class="alert alert-info">
                                <small><i class="bi bi-info-circle"></i> <strong>Catatan:</strong> Field dengan tanda (*) wajib diisi</small>
                            </div>
                            
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary">
                                    <i class="bi bi-save"></i> Simpan Data Buku
                                </button>
                                <button type="reset" class="btn btn-secondary">
                                    <i class="bi bi-x-circle"></i> Reset Form
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
                
                <!-- Info Validasi -->
                <div class="card mt-3">
                    <div class="card-header bg-info text-white">
                        <h6 class="mb-0"><i class="bi bi-shield-check"></i> Aturan Validasi</h6>
                    </div>
                    <div class="card-body">
                        <ul class="mb-0">
                            <li>Judul minimal 3 karakter</li>
                            <li>Kategori harus dipilih</li>
                            <li>Tahun terbit antara 1900 - <?php echo date('Y'); ?></li>
                            <li>Harga minimal Rp 10.000</li>
                            <li>Stok tidak boleh negatif</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Testing:

Akses: http://localhost/perpustakaan/form_buku.php
Coba submit tanpa mengisi form (akan muncul error)
Isi form dengan data tidak valid (lihat error message)
Isi form dengan benar (akan muncul success message)
Perhatikan bahwa nilai input tetap ada setelah submit (keep value)

3. PRAKTIKUM 2: Form Pencarian Buku dengan GET

Tujuan

Membuat form pencarian buku menggunakan method GET dan menampilkan hasil.

Langkah-langkah

Buat file search_buku.php:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pencarian Buku</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
</head>
<body>
    <div class="container mt-5">
        <h1 class="mb-4"><i class="bi bi-search"></i> Pencarian Buku Perpustakaan</h1>
        
        <?php
        // Data buku (dalam praktik nyata, ini dari database)
        $buku_list = [
            [
                "kode" => "BK-001",
                "judul" => "Pemrograman PHP untuk Pemula",
                "kategori" => "Programming",
                "pengarang" => "Budi Raharjo",
                "penerbit" => "Informatika",
                "tahun" => 2023,
                "harga" => 75000,
                "stok" => 10
            ],
            [
                "kode" => "BK-002",
                "judul" => "Mastering MySQL Database",
                "kategori" => "Database",
                "pengarang" => "Andi Nugroho",
                "penerbit" => "Graha Ilmu",
                "tahun" => 2022,
                "harga" => 95000,
                "stok" => 5
            ],
            [
                "kode" => "BK-003",
                "judul" => "Laravel Framework Advanced",
                "kategori" => "Programming",
                "pengarang" => "Siti Aminah",
                "penerbit" => "Informatika",
                "tahun" => 2024,
                "harga" => 125000,
                "stok" => 8
            ],
            [
                "kode" => "BK-004",
                "judul" => "Web Design Principles",
                "kategori" => "Web Design",
                "pengarang" => "Dedi Santoso",
                "penerbit" => "Andi",
                "tahun" => 2023,
                "harga" => 85000,
                "stok" => 15
            ],
            [
                "kode" => "BK-005",
                "judul" => "Network Security Fundamentals",
                "kategori" => "Networking",
                "pengarang" => "Rina Wijaya",
                "penerbit" => "Erlangga",
                "tahun" => 2023,
                "harga" => 110000,
                "stok" => 3
            ],
            [
                "kode" => "BK-006",
                "judul" => "PHP Web Services",
                "kategori" => "Programming",
                "pengarang" => "Budi Raharjo",
                "penerbit" => "Informatika",
                "tahun" => 2024,
                "harga" => 90000,
                "stok" => 12
            ],
            [
                "kode" => "BK-007",
                "judul" => "PostgreSQL Advanced",
                "kategori" => "Database",
                "pengarang" => "Ahmad Yani",
                "penerbit" => "Graha Ilmu",
                "tahun" => 2024,
                "harga" => 115000,
                "stok" => 7
            ],
            [
                "kode" => "BK-008",
                "judul" => "JavaScript Modern",
                "kategori" => "Programming",
                "pengarang" => "Siti Aminah",
                "penerbit" => "Informatika",
                "tahun" => 2023,
                "harga" => 80000,
                "stok" => 0
            ]
        ];
        
        // Ambil parameter pencarian dari GET
        $keyword = isset($_GET['keyword']) ? trim($_GET['keyword']) : '';
        $kategori = isset($_GET['kategori']) ? trim($_GET['kategori']) : '';
        $min_harga = isset($_GET['min_harga']) ? trim($_GET['min_harga']) : '';
        $max_harga = isset($_GET['max_harga']) ? trim($_GET['max_harga']) : '';
        
        // Sanitasi input
        $keyword = htmlspecialchars($keyword);
        $kategori = htmlspecialchars($kategori);
        
        // Lakukan pencarian jika ada parameter
        $hasil = [];
        $is_search = false;
        
        if (!empty($keyword) || !empty($kategori) || !empty($min_harga) || !empty($max_harga)) {
            $is_search = true;
            
            foreach ($buku_list as $buku) {
                $match = true;
                
                // Filter by keyword (judul atau pengarang)
                if (!empty($keyword)) {
                    if (stripos($buku['judul'], $keyword) === false && 
                        stripos($buku['pengarang'], $keyword) === false) {
                        $match = false;
                    }
                }
                
                // Filter by kategori
                if (!empty($kategori) && $buku['kategori'] != $kategori) {
                    $match = false;
                }
                
                // Filter by harga minimum
                if (!empty($min_harga) && $buku['harga'] < $min_harga) {
                    $match = false;
                }
                
                // Filter by harga maksimum
                if (!empty($max_harga) && $buku['harga'] > $max_harga) {
                    $match = false;
                }
                
                if ($match) {
                    $hasil[] = $buku;
                }
            }
        }
        ?>
        
        <!-- Form Pencarian -->
        <div class="card mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0"><i class="bi bi-funnel"></i> Filter Pencarian</h5>
            </div>
            <div class="card-body">
                <form method="GET" action="">
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="keyword" class="form-label">Kata Kunci (Judul / Pengarang)</label>
                            <input type="text" class="form-control" id="keyword" name="keyword" 
                                   value="<?php echo $keyword; ?>" 
                                   placeholder="Masukkan kata kunci...">
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="kategori" class="form-label">Kategori</label>
                            <select class="form-select" id="kategori" name="kategori">
                                <option value="">-- Semua Kategori --</option>
                                <option value="Programming" <?php echo ($kategori == 'Programming') ? 'selected' : ''; ?>>Programming</option>
                                <option value="Database" <?php echo ($kategori == 'Database') ? 'selected' : ''; ?>>Database</option>
                                <option value="Web Design" <?php echo ($kategori == 'Web Design') ? 'selected' : ''; ?>>Web Design</option>
                                <option value="Networking" <?php echo ($kategori == 'Networking') ? 'selected' : ''; ?>>Networking</option>
                            </select>
                        </div>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="min_harga" class="form-label">Harga Minimum (Rp)</label>
                            <input type="number" class="form-control" id="min_harga" name="min_harga" 
                                   value="<?php echo $min_harga; ?>" 
                                   min="0" step="10000" 
                                   placeholder="0">
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="max_harga" class="form-label">Harga Maksimum (Rp)</label>
                            <input type="number" class="form-control" id="max_harga" name="max_harga" 
                                   value="<?php echo $max_harga; ?>" 
                                   min="0" step="10000" 
                                   placeholder="1000000">
                        </div>
                    </div>
                    
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-search"></i> Cari
                        </button>
                        <a href="search_buku.php" class="btn btn-secondary">
                            <i class="bi bi-arrow-counterclockwise"></i> Reset
                        </a>
                    </div>
                </form>
            </div>
        </div>
        
        <!-- Hasil Pencarian -->
        <?php if ($is_search): ?>
        <div class="card">
            <div class="card-header bg-success text-white">
                <h5 class="mb-0">
                    <i class="bi bi-table"></i> Hasil Pencarian 
                    <span class="badge bg-light text-dark"><?php echo count($hasil); ?> buku</span>
                </h5>
            </div>
            <div class="card-body">
                <?php if (count($hasil) > 0): ?>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>No</th>
                                <th>Kode</th>
                                <th>Judul</th>
                                <th>Kategori</th>
                                <th>Pengarang</th>
                                <th>Penerbit</th>
                                <th>Tahun</th>
                                <th>Harga</th>
                                <th>Stok</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php 
                            $no = 1;
                            foreach ($hasil as $buku): 
                            ?>
                            <tr>
                                <td><?php echo $no++; ?></td>
                                <td><code><?php echo $buku['kode']; ?></code></td>
                                <td>
                                    <strong><?php echo $buku['judul']; ?></strong>
                                    <?php if ($buku['tahun'] >= 2024): ?>
                                        <span class="badge bg-danger">NEW</span>
                                    <?php endif; ?>
                                </td>
                                <td><span class="badge bg-primary"><?php echo $buku['kategori']; ?></span></td>
                                <td><?php echo $buku['pengarang']; ?></td>
                                <td><?php echo $buku['penerbit']; ?></td>
                                <td><?php echo $buku['tahun']; ?></td>
                                <td>Rp <?php echo number_format($buku['harga'], 0, ',', '.'); ?></td>
                                <td class="text-center">
                                    <?php if ($buku['stok'] > 0): ?>
                                        <span class="badge bg-success"><?php echo $buku['stok']; ?></span>
                                    <?php else: ?>
                                        <span class="badge bg-danger">Habis</span>
                                    <?php endif; ?>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
                
                <!-- Info Parameter Pencarian -->
                <div class="alert alert-info mt-3 mb-0">
                    <strong><i class="bi bi-info-circle"></i> Parameter Pencarian:</strong>
                    <ul class="mb-0">
                        <?php if (!empty($keyword)): ?>
                            <li>Kata kunci: <strong><?php echo $keyword; ?></strong></li>
                        <?php endif; ?>
                        <?php if (!empty($kategori)): ?>
                            <li>Kategori: <strong><?php echo $kategori; ?></strong></li>
                        <?php endif; ?>
                        <?php if (!empty($min_harga)): ?>
                            <li>Harga minimal: <strong>Rp <?php echo number_format($min_harga, 0, ',', '.'); ?></strong></li>
                        <?php endif; ?>
                        <?php if (!empty($max_harga)): ?>
                            <li>Harga maksimal: <strong>Rp <?php echo number_format($max_harga, 0, ',', '.'); ?></strong></li>
                        <?php endif; ?>
                    </ul>
                </div>
                
                <?php else: ?>
                <div class="alert alert-warning mb-0">
                    <i class="bi bi-exclamation-triangle"></i> 
                    <strong>Tidak ada buku yang ditemukan</strong> dengan kriteria pencarian tersebut.
                    Silakan coba dengan kriteria lain.
                </div>
                <?php endif; ?>
            </div>
        </div>
        
        <?php else: ?>
        <!-- Tampilkan semua buku jika belum search -->
        <div class="card">
            <div class="card-header bg-secondary text-white">
                <h5 class="mb-0">
                    <i class="bi bi-book"></i> Semua Buku Perpustakaan 
                    <span class="badge bg-light text-dark"><?php echo count($buku_list); ?> buku</span>
                </h5>
            </div>
            <div class="card-body">
                <div class="alert alert-info">
                    <i class="bi bi-info-circle"></i> Gunakan form di atas untuk mencari buku berdasarkan kriteria tertentu.
                </div>
                
                <div class="row">
                    <?php foreach ($buku_list as $buku): ?>
                    <div class="col-md-6 mb-3">
                        <div class="card h-100">
                            <div class="card-body">
                                <h6 class="card-title"><?php echo $buku['judul']; ?></h6>
                                <p class="card-text mb-2">
                                    <small class="text-muted">
                                        <strong><?php echo $buku['pengarang']; ?></strong> | 
                                        <?php echo $buku['penerbit']; ?> (<?php echo $buku['tahun']; ?>)
                                    </small>
                                </p>
                                <p class="mb-2">
                                    <span class="badge bg-primary"><?php echo $buku['kategori']; ?></span>
                                    <?php if ($buku['stok'] > 0): ?>
                                        <span class="badge bg-success">Tersedia</span>
                                    <?php else: ?>
                                        <span class="badge bg-danger">Habis</span>
                                    <?php endif; ?>
                                </p>
                                <p class="mb-0">
                                    <strong>Harga:</strong> Rp <?php echo number_format($buku['harga'], 0, ',', '.'); ?><br />
                                    <strong>Stok:</strong> <?php echo $buku['stok']; ?> buku
                                </p>
                            </div>
                        </div>
                    </div>
                    <?php endforeach; ?>
                </div>
            </div>
        </div>
        <?php endif; ?>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Testing:

Akses: http://localhost/perpustakaan/search_buku.php
Lihat semua buku ditampilkan (sebelum search)
Cari buku dengan keyword "PHP" (akan filter judul/pengarang)
Filter berdasarkan kategori "Programming"
Filter berdasarkan range harga (misal: 70000 - 100000)
Kombinasikan beberapa filter sekaligus
Perhatikan URL berubah dengan query string (GET method)
Copy URL dan paste di tab baru - filter tetap aktif (bookmarkable)

4. PRAKTIKUM 3: Form dengan Validasi Lengkap

Tujuan

Membuat form input buku dengan validasi lengkap dan handling error per field.

Langkah-langkah

Buat file form_buku_advanced.php:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form Buku Advanced</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
</head>
<body>
    <div class="container mt-5">
        <div class="row justify-content-center">
            <div class="col-md-10">
                <?php
                // Function sanitasi
                function sanitize_input($data) {
                    $data = trim($data);
                    $data = stripslashes($data);
                    $data = htmlspecialchars($data);
                    return $data;
                }
                
                // Variabel untuk error per field
                $errors = [];
                $success = '';
                
                // Variabel untuk keep value
                $judul = '';
                $kategori = '';
                $pengarang = '';
                $penerbit = '';
                $tahun = '';
                $isbn = '';
                $harga = '';
                $stok = '';
                $deskripsi = '';
                $bahasa = '';
                
                // Proses form
                if ($_SERVER['REQUEST_METHOD'] == 'POST') {
                    // Terima dan sanitasi data
                    $judul = sanitize_input($_POST['judul'] ?? '');
                    $kategori = sanitize_input($_POST['kategori'] ?? '');
                    $pengarang = sanitize_input($_POST['pengarang'] ?? '');
                    $penerbit = sanitize_input($_POST['penerbit'] ?? '');
                    $tahun = sanitize_input($_POST['tahun'] ?? '');
                    $isbn = sanitize_input($_POST['isbn'] ?? '');
                    $harga = sanitize_input($_POST['harga'] ?? '');
                    $stok = sanitize_input($_POST['stok'] ?? '');
                    $deskripsi = sanitize_input($_POST['deskripsi'] ?? '');
                    $bahasa = sanitize_input($_POST['bahasa'] ?? '');
                    
                    // Validasi per field
                    
                    // 1. Judul
                    if (empty($judul)) {
                        $errors['judul'] = "Judul wajib diisi";
                    } elseif (strlen($judul) < 3) {
                        $errors['judul'] = "Judul minimal 3 karakter";
                    } elseif (strlen($judul) > 200) {
                        $errors['judul'] = "Judul maksimal 200 karakter";
                    }
                    
                    // 2. Kategori
                    if (empty($kategori)) {
                        $errors['kategori'] = "Kategori wajib dipilih";
                    } else {
                        $valid_kategori = ['Programming', 'Database', 'Web Design', 'Networking'];
                        if (!in_array($kategori, $valid_kategori)) {
                            $errors['kategori'] = "Kategori tidak valid";
                        }
                    }
                    
                    // 3. Pengarang
                    if (empty($pengarang)) {
                        $errors['pengarang'] = "Pengarang wajib diisi";
                    } elseif (strlen($pengarang) < 3) {
                        $errors['pengarang'] = "Nama pengarang minimal 3 karakter";
                    }
                    
                    // 4. Penerbit
                    if (empty($penerbit)) {
                        $errors['penerbit'] = "Penerbit wajib diisi";
                    }
                    
                    // 5. Tahun
                    if (empty($tahun)) {
                        $errors['tahun'] = "Tahun terbit wajib diisi";
                    } elseif (!is_numeric($tahun)) {
                        $errors['tahun'] = "Tahun harus berupa angka";
                    } elseif ($tahun < 1900) {
                        $errors['tahun'] = "Tahun minimal 1900";
                    } elseif ($tahun > date('Y')) {
                        $errors['tahun'] = "Tahun tidak boleh melebihi tahun sekarang";
                    }
                    
                    // 6. ISBN (format: 978-602-1234-56-7)
                    if (!empty($isbn)) {
                        if (!preg_match('/^\d{3}-\d{3}-\d{4}-\d{2}-\d$/', $isbn)) {
                            $errors['isbn'] = "Format ISBN tidak valid (contoh: 978-602-1234-56-7)";
                        }
                    }
                    
                    // 7. Harga
                    if (empty($harga)) {
                        $errors['harga'] = "Harga wajib diisi";
                    } elseif (!is_numeric($harga)) {
                        $errors['harga'] = "Harga harus berupa angka";
                    } elseif ($harga < 10000) {
                        $errors['harga'] = "Harga minimal Rp 10.000";
                    } elseif ($harga > 1000000) {
                        $errors['harga'] = "Harga maksimal Rp 1.000.000";
                    }
                    
                    // 8. Stok
                    if (!isset($_POST['stok']) || $_POST['stok'] === '') {
                        $errors['stok'] = "Stok wajib diisi";
                    } elseif (!is_numeric($stok)) {
                        $errors['stok'] = "Stok harus berupa angka";
                    } elseif ($stok < 0) {
                        $errors['stok'] = "Stok tidak boleh negatif";
                    } elseif ($stok > 1000) {
                        $errors['stok'] = "Stok maksimal 1000";
                    }
                    
                    // 9. Deskripsi
                    if (!empty($deskripsi) && strlen($deskripsi) > 500) {
                        $errors['deskripsi'] = "Deskripsi maksimal 500 karakter";
                    }
                    
                    // 10. Bahasa
                    if (empty($bahasa)) {
                        $errors['bahasa'] = "Bahasa wajib dipilih";
                    }
                    
                    // Jika tidak ada error
                    if (count($errors) == 0) {
                        $success = "Data buku berhasil disimpan!";
                        
                        // Di sini bisa simpan ke database
                        // Untuk saat ini, hanya tampilkan success dan reset form
                        
                        // Reset form
                        $judul = '';
                        $kategori = '';
                        $pengarang = '';
                        $penerbit = '';
                        $tahun = '';
                        $isbn = '';
                        $harga = '';
                        $stok = '';
                        $deskripsi = '';
                        $bahasa = '';
                    }
                }
                ?>
                
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h4 class="mb-0"><i class="bi bi-plus-circle"></i> Form Input Buku (Advanced Validation)</h4>
                    </div>
                    <div class="card-body">
                        <!-- Success Message -->
                        <?php if ($success): ?>
                        <div class="alert alert-success alert-dismissible fade show">
                            <i class="bi bi-check-circle-fill"></i> <strong>Berhasil!</strong> <?php echo $success; ?>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                        <?php endif; ?>
                        
                        <!-- Global Error Summary -->
                        <?php if (count($errors) > 0): ?>
                        <div class="alert alert-danger alert-dismissible fade show">
                            <h6><i class="bi bi-exclamation-triangle-fill"></i> Terdapat <?php echo count($errors); ?> kesalahan:</h6>
                            <ul class="mb-0">
                                <?php foreach ($errors as $field => $error): ?>
                                    <li><strong><?php echo ucfirst($field); ?>:</strong> <?php echo $error; ?></li>
                                <?php endforeach; ?>
                            </ul>
                            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
                        </div>
                        <?php endif; ?>
                        
                        <form method="POST" action="" novalidate>
                            <!-- Judul -->
                            <div class="mb-3">
                                <label for="judul" class="form-label">
                                    Judul Buku <span class="text-danger">*
                                </label>
                                <input type="text" 
                                       class="form-control <?php echo isset($errors['judul']) ? 'is-invalid' : ''; ?>" 
                                       id="judul" 
                                       name="judul" 
                                       value="<?php echo htmlspecialchars($judul); ?>" 
                                       placeholder="Masukkan judul buku">
                                <?php if (isset($errors['judul'])): ?>
                                <div class="invalid-feedback">
                                    <?php echo $errors['judul']; ?>
                                </div>
                                <?php endif; ?>
                                <small class="text-muted">Minimal 3 karakter, maksimal 200 karakter</small>
                            </div>
                            
                            <!-- Kategori & Bahasa -->
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="kategori" class="form-label">
                                        Kategori <span class="text-danger">*</span>
                                    </label>
                                    <select class="form-select <?php echo isset($errors['kategori']) ? 'is-invalid' : ''; ?>" 
                                            id="kategori" 
                                            name="kategori">
                                        <option value="">-- Pilih Kategori --</option>
                                        <option value="Programming" <?php echo ($kategori == 'Programming') ? 'selected' : ''; ?>>Programming</option>
                                        <option value="Database" <?php echo ($kategori == 'Database') ? 'selected' : ''; ?>>Database</option>
                                        <option value="Web Design" <?php echo ($kategori == 'Web Design') ? 'selected' : ''; ?>>Web Design</option>
                                        <option value="Networking" <?php echo ($kategori == 'Networking') ? 'selected' : ''; ?>>Networking</option>
                                    </select>
                                    <?php if (isset($errors['kategori'])): ?>
                                    <div class="invalid-feedback">
                                        <?php echo $errors['kategori']; ?>
                                    </div>
                                    <?php endif; ?>
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="bahasa" class="form-label">
                                        Bahasa <span class="text-danger">*</span>
                                    </label>
                                    <div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input <?php echo isset($errors['bahasa']) ? 'is-invalid' : ''; ?>" 
                                                   type="radio" 
                                                   name="bahasa" 
                                                   id="bahasa_id" 
                                                   value="Indonesia" 
                                                   <?php echo ($bahasa == 'Indonesia') ? 'checked' : ''; ?>>
                                            <label class="form-check-label" for="bahasa_id">Indonesia</label>
                                        </div>
                                        <div class="form-check form-check-inline">
                                            <input class="form-check-input" 
                                                   type="radio" 
                                                   name="bahasa" 
                                                   id="bahasa_en" 
                                                   value="Inggris" 
                                                   <?php echo ($bahasa == 'Inggris') ? 'checked' : ''; ?>>
                                            <label class="form-check-label" for="bahasa_en">Inggris</label>
                                        </div>
                                        <?php if (isset($errors['bahasa'])): ?>
                                        <div class="text-danger small">
                                            <?php echo $errors['bahasa']; ?>
                                        </div>
                                        <?php endif; ?>
                                    </div>
                                </div>
                            </div>
                            
                            <!-- Pengarang & Penerbit -->
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="pengarang" class="form-label">
                                        Pengarang <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" 
                                           class="form-control <?php echo isset($errors['pengarang']) ? 'is-invalid' : ''; ?>" 
                                           id="pengarang" 
                                           name="pengarang" 
                                           value="<?php echo htmlspecialchars($pengarang); ?>" 
                                           placeholder="Nama pengarang">
                                    <?php if (isset($errors['pengarang'])): ?>
                                    <div class="invalid-feedback">
                                        <?php echo $errors['pengarang']; ?>
                                    </div>
                                    <?php endif; ?>
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="penerbit" class="form-label">
                                        Penerbit <span class="text-danger">*</span>
                                    </label>
                                    <input type="text" 
                                           class="form-control <?php echo isset($errors['penerbit']) ? 'is-invalid' : ''; ?>" 
                                           id="penerbit" 
                                           name="penerbit" 
                                           value="<?php echo htmlspecialchars($penerbit); ?>" 
                                           placeholder="Nama penerbit">
                                    <?php if (isset($errors['penerbit'])): ?>
                                    <div class="invalid-feedback">
                                        <?php echo $errors['penerbit']; ?>
                                    </div>
                                    <?php endif; ?>
                                </div>
                            </div>
                            
                            <!-- Tahun & ISBN -->
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="tahun" class="form-label">
                                        Tahun Terbit <span class="text-danger">*</span>
                                    </label>
                                    <input type="number" 
                                           class="form-control <?php echo isset($errors['tahun']) ? 'is-invalid' : ''; ?>" 
                                           id="tahun" 
                                           name="tahun" 
                                           value="<?php echo htmlspecialchars($tahun); ?>" 
                                           min="1900" 
                                           max="<?php echo date('Y'); ?>" 
                                           placeholder="<?php echo date('Y'); ?>">
                                    <?php if (isset($errors['tahun'])): ?>
                                    <div class="invalid-feedback">
                                        <?php echo $errors['tahun']; ?>
                                    </div>
                                    <?php endif; ?>
                                    <small class="text-muted">Tahun 1900 - <?php echo date('Y'); ?></small>
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="isbn" class="form-label">
                                        ISBN <small class="text-muted">(Opsional)</small>
                                    </label>
                                    <input type="text" 
                                           class="form-control <?php echo isset($errors['isbn']) ? 'is-invalid' : ''; ?>" 
                                           id="isbn" 
                                           name="isbn" 
                                           value="<?php echo htmlspecialchars($isbn); ?>" 
                                           placeholder="978-602-1234-56-7">
                                    <?php if (isset($errors['isbn'])): ?>
                                    <div class="invalid-feedback">
                                        <?php echo $errors['isbn']; ?>
                                    </div>
                                    <?php endif; ?>
                                    <small class="text-muted">Format: 978-602-1234-56-7</small>
                                </div>
                            </div>
                            
                            <!-- Harga & Stok -->
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="harga" class="form-label">
                                        Harga (Rp) <span class="text-danger">*</span>
                                    </label>
                                    <input type="number" 
                                           class="form-control <?php echo isset($errors['harga']) ? 'is-invalid' : ''; ?>" 
                                           id="harga" 
                                           name="harga" 
                                           value="<?php echo htmlspecialchars($harga); ?>" 
                                           min="10000" 
                                           max="1000000" 
                                           step="1000" 
                                           placeholder="75000">
                                    <?php if (isset($errors['harga'])): ?>
                                    <div class="invalid-feedback">
                                        <?php echo $errors['harga']; ?>
                                    </div>
                                    <?php endif; ?>
                                    <small class="text-muted">Rp 10.000 - Rp 1.000.000</small>
                                </div>
                                
                                <div class="col-md-6 mb-3">
                                    <label for="stok" class="form-label">
                                        Stok <span class="text-danger">*</span>
                                    </label>
                                    <input type="number" 
                                           class="form-control <?php echo isset($errors['stok']) ? 'is-invalid' : ''; ?>" 
                                           id="stok" 
                                           name="stok" 
                                           value="<?php echo htmlspecialchars($stok); ?>" 
                                           min="0" 
                                           max="1000" 
                                           placeholder="10">
                                    <?php if (isset($errors['stok'])): ?>
                                    <div class="invalid-feedback">
                                        <?php echo $errors['stok']; ?>
                                    </div>
                                    <?php endif; ?>
                                    <small class="text-muted">0 - 1000</small>
                                </div>
                            </div>
                            
                            <!-- Deskripsi -->
                            <div class="mb-3">
                                <label for="deskripsi" class="form-label">
                                    Deskripsi <small class="text-muted">(Opsional)</small>
                                </label>
                                <textarea class="form-control <?php echo isset($errors['deskripsi']) ? 'is-invalid' : ''; ?>" 
                                          id="deskripsi" 
                                          name="deskripsi" 
                                          rows="4" 
                                          placeholder="Deskripsi singkat tentang buku..."><?php echo htmlspecialchars($deskripsi); ?></textarea>
                                <?php if (isset($errors['deskripsi'])): ?>
                                <div class="invalid-feedback">
                                    <?php echo $errors['deskripsi']; ?>
                                </div>
                                <?php endif; ?>
                                <small class="text-muted">
                                    Maksimal 500 karakter 
                                    <span id="char-count">(<?php echo strlen($deskripsi); ?>/500)</span>
                                </small>
                            </div>
                            
                            <hr>
                            
                            <div class="d-grid gap-2">
                                <button type="submit" class="btn btn-primary btn-lg">
                                    <i class="bi bi-save"></i> Simpan Data Buku
                                </button>
                                <button type="reset" class="btn btn-outline-secondary">
                                    <i class="bi bi-x-circle"></i> Reset Form
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    // Character counter untuk deskripsi
    document.getElementById('deskripsi').addEventListener('input', function() {
        var length = this.value.length;
        document.getElementById('char-count').textContent = '(' + length + '/500)';
    });
    </script>
</body>
</html>

Testing:

Akses: http://localhost/perpustakaan/form_buku_advanced.php
Submit tanpa mengisi - lihat error per field dengan styling Bootstrap
Isi dengan data invalid - lihat error message spesifik per field
Isi dengan benar - lihat success message
Perhatikan form keeps value setelah submit error
Coba character counter di deskripsi

5. PRAKTIKUM 4: Mini CRUD dengan Session (Tanpa Database)

Tujuan

Membuat sistem CRUD sederhana menggunakan session untuk menyimpan data (simulasi sebelum belajar database).

Langkah-langkah

a. Buat file crud_buku.php:

<?php
session_start();
 
// Inisialisasi session untuk menyimpan data buku
if (!isset($_SESSION['buku_list'])) {
    $_SESSION['buku_list'] = [
        [
            "id" => 1,
            "kode" => "BK-001",
            "judul" => "Pemrograman PHP untuk Pemula",
            "kategori" => "Programming",
            "pengarang" => "Budi Raharjo",
            "harga" => 75000,
            "stok" => 10
        ],
        [
            "id" => 2,
            "kode" => "BK-002",
            "judul" => "Mastering MySQL Database",
            "kategori" => "Database",
            "pengarang" => "Andi Nugroho",
            "harga" => 95000,
            "stok" => 5
        ]
    ];
    $_SESSION['next_id'] = 3;
}
 
// Variabel
$success = '';
$errors = [];
$mode = 'list'; // list, add, edit
 
// Handle Actions
if (isset($_GET['action'])) {
    $action = $_GET['action'];
    
    // DELETE
    if ($action == 'delete' && isset($_GET['id'])) {
        $id = (int)$_GET['id'];
        foreach ($_SESSION['buku_list'] as $key => $buku) {
            if ($buku['id'] == $id) {
                unset($_SESSION['buku_list'][$key]);
                $_SESSION['buku_list'] = array_values($_SESSION['buku_list']); // Re-index
                $success = "Buku berhasil dihapus!";
                break;
            }
        }
    }
    
    // EDIT MODE
    if ($action == 'edit' && isset($_GET['id'])) {
        $mode = 'edit';
        $edit_id = (int)$_GET['id'];
    }
    
    // ADD MODE
    if ($action == 'add') {
        $mode = 'add';
    }
}
 
// Handle Form Submit (CREATE & UPDATE)
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    // Sanitasi input
    $judul = trim(htmlspecialchars($_POST['judul'] ?? ''));
    $kategori = trim($_POST['kategori'] ?? '');
    $pengarang = trim(htmlspecialchars($_POST['pengarang'] ?? ''));
    $harga = trim($_POST['harga'] ?? '');
    $stok = trim($_POST['stok'] ?? '');
    
    // Validasi
    if (empty($judul)) {
        $errors[] = "Judul wajib diisi";
    }
    if (empty($kategori)) {
        $errors[] = "Kategori wajib dipilih";
    }
    if (empty($pengarang)) {
        $errors[] = "Pengarang wajib diisi";
    }
    if (empty($harga) || !is_numeric($harga) || $harga < 10000) {
        $errors[] = "Harga minimal Rp 10.000";
    }
    if (!isset($_POST['stok']) || !is_numeric($stok) || $stok < 0) {
        $errors[] = "Stok tidak valid";
    }
    
    // Jika valid
    if (count($errors) == 0) {
        if (isset($_POST['id'])) {
            // UPDATE
            $id = (int)$_POST['id'];
            foreach ($_SESSION['buku_list'] as &$buku) {
                if ($buku['id'] == $id) {
                    $buku['judul'] = $judul;
                    $buku['kategori'] = $kategori;
                    $buku['pengarang'] = $pengarang;
                    $buku['harga'] = (int)$harga;
                    $buku['stok'] = (int)$stok;
                    break;
                }
            }
            $success = "Buku berhasil diupdate!";
        } else {
            // CREATE
            $new_buku = [
                "id" => $_SESSION['next_id'],
                "kode" => "BK-" . str_pad($_SESSION['next_id'], 3, "0", STR_PAD_LEFT),
                "judul" => $judul,
                "kategori" => $kategori,
                "pengarang" => $pengarang,
                "harga" => (int)$harga,
                "stok" => (int)$stok
            ];
            $_SESSION['buku_list'][] = $new_buku;
            $_SESSION['next_id']++;
            $success = "Buku berhasil ditambahkan!";
        }
        $mode = 'list';
    } else {
        // Keep mode if error
        $mode = isset($_POST['id']) ? 'edit' : 'add';
    }
}
 
// Get data untuk edit
$edit_data = null;
if ($mode == 'edit' && isset($edit_id)) {
    foreach ($_SESSION['buku_list'] as $buku) {
        if ($buku['id'] == $edit_id) {
            $edit_data = $buku;
            break;
        }
    }
}
?>
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CRUD Buku - Session Storage</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <div class="container-fluid">
            <a class="navbar-brand" href="crud_buku.php">
                <i class="bi bi-book"></i> CRUD Buku Perpustakaan
            </a>
        </div>
    </nav>
    
    <div class="container mt-4">
        <!-- Success Message -->
        <?php if ($success): ?>
        <div class="alert alert-success alert-dismissible fade show">
            <i class="bi bi-check-circle"></i> <?php echo $success; ?>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        <?php endif; ?>
        
        <!-- Error Messages -->
        <?php if (count($errors) > 0): ?>
        <div class="alert alert-danger alert-dismissible fade show">
            <h6><i class="bi bi-exclamation-triangle"></i> Terdapat kesalahan:</h6>
            <ul class="mb-0">
                <?php foreach ($errors as $error): ?>
                    <li><?php echo $error; ?></li>
                <?php endforeach; ?>
            </ul>
            <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        </div>
        <?php endif; ?>
        
        <?php if ($mode == 'list'): ?>
        <!-- LIST MODE -->
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2><i class="bi bi-table"></i> Daftar Buku</h2>
            <a href="?action=add" class="btn btn-primary">
                <i class="bi bi-plus-circle"></i> Tambah Buku
            </a>
        </div>
        
        <div class="card">
            <div class="card-body">
                <?php if (count($_SESSION['buku_list']) > 0): ?>
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead class="table-light">
                            <tr>
                                <th>No</th>
                                <th>Kode</th>
                                <th>Judul</th>
                                <th>Kategori</th>
                                <th>Pengarang</th>
                                <th>Harga</th>
                                <th>Stok</th>
                                <th width="150">Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php 
                            $no = 1;
                            foreach ($_SESSION['buku_list'] as $buku): 
                            ?>
                            <tr>
                                <td><?php echo $no++; ?></td>
                                <td><code><?php echo $buku['kode']; ?></code></td>
                                <td><?php echo $buku['judul']; ?></td>
                                <td><span class="badge bg-primary"><?php echo $buku['kategori']; ?></span></td>
                                <td><?php echo $buku['pengarang']; ?></td>
                                <td>Rp <?php echo number_format($buku['harga'], 0, ',', '.'); ?></td>
                                <td class="text-center"><?php echo $buku['stok']; ?></td>
                                <td>
                                    <a href="?action=edit&id=<?php echo $buku['id']; ?>" 
                                       class="btn btn-sm btn-warning">
                                        <i class="bi bi-pencil"></i> Edit
                                    </a>
                                    <a href="?action=delete&id=<?php echo $buku['id']; ?>" 
                                       class="btn btn-sm btn-danger"
                                       onclick="return confirm('Yakin ingin menghapus?')">
                                        <i class="bi bi-trash"></i> Hapus
                                    </a>
                                </td>
                            </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                </div>
                <?php else: ?>
                <div class="alert alert-info mb-0">
                    <i class="bi bi-info-circle"></i> Belum ada data buku. Silakan tambah buku baru.
                </div>
                <?php endif; ?>
            </div>
        </div>
        
        <?php elseif ($mode == 'add' || $mode == 'edit'): ?>
        <!-- FORM MODE (ADD / EDIT) -->
        <div class="d-flex justify-content-between align-items-center mb-3">
            <h2>
                <i class="bi bi-<?php echo $mode == 'add' ? 'plus-circle' : 'pencil'; ?>"></i> 
                <?php echo $mode == 'add' ? 'Tambah' : 'Edit'; ?> Buku
            </h2>
            <a href="crud_buku.php" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> Kembali
            </a>
        </div>
        
        <div class="card">
            <div class="card-body">
                <form method="POST" action="">
                    <?php if ($mode == 'edit' && $edit_data): ?>
                    <input type="hidden" name="id" value="<?php echo $edit_data['id']; ?>">
                    <?php endif; ?>
                    
                    <div class="mb-3">
                        <label for="judul" class="form-label">Judul Buku <span class="text-danger">*</span></label>
                        <input type="text" 
                               class="form-control" 
                               id="judul" 
                               name="judul" 
                               value="<?php echo $mode == 'edit' && $edit_data ? htmlspecialchars($edit_data['judul']) : ''; ?>" 
                               required>
                    </div>
                    
                    <div class="mb-3">
                        <label for="kategori" class="form-label">Kategori <span class="text-danger">*</span></label>
                        <select class="form-select" id="kategori" name="kategori" required>
                            <option value="">-- Pilih --</option>
                            <?php
                            $kategori_list = ['Programming', 'Database', 'Web Design', 'Networking'];
                            $selected_kategori = $mode == 'edit' && $edit_data ? $edit_data['kategori'] : '';
                            foreach ($kategori_list as $kat):
                            ?>
                            <option value="<?php echo $kat; ?>" <?php echo ($selected_kategori == $kat) ? 'selected' : ''; ?>>
                                <?php echo $kat; ?>
                            </option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                    
                    <div class="mb-3">
                        <label for="pengarang" class="form-label">Pengarang <span class="text-danger">*</span></label>
                        <input type="text" 
                               class="form-control" 
                               id="pengarang" 
                               name="pengarang" 
                               value="<?php echo $mode == 'edit' && $edit_data ? htmlspecialchars($edit_data['pengarang']) : ''; ?>" 
                               required>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6 mb-3">
                            <label for="harga" class="form-label">Harga (Rp) <span class="text-danger">*</span></label>
                            <input type="number" 
                                   class="form-control" 
                                   id="harga" 
                                   name="harga" 
                                   value="<?php echo $mode == 'edit' && $edit_data ? $edit_data['harga'] : ''; ?>" 
                                   min="10000" 
                                   required>
                        </div>
                        
                        <div class="col-md-6 mb-3">
                            <label for="stok" class="form-label">Stok <span class="text-danger">*</span></label>
                            <input type="number" 
                                   class="form-control" 
                                   id="stok" 
                                   name="stok" 
                                   value="<?php echo $mode == 'edit' && $edit_data ? $edit_data['stok'] : ''; ?>" 
                                   min="0" 
                                   required>
                        </div>
                    </div>
                    
                    <div class="d-grid gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-save"></i> <?php echo $mode == 'add' ? 'Simpan' : 'Update'; ?>
                        </button>
                        <a href="crud_buku.php" class="btn btn-secondary">
                            <i class="bi bi-x-circle"></i> Batal
                        </a>
                    </div>
                </form>
            </div>
        </div>
        <?php endif; ?>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Testing:

Akses: http://localhost/perpustakaan/crud_buku.php
READ: Lihat daftar buku yang sudah ada
CREATE: Klik "Tambah Buku", isi form, simpan
UPDATE: Klik "Edit" pada buku, ubah data, update
DELETE: Klik "Hapus" pada buku, konfirmasi
Data tersimpan di session (hilang jika browser ditutup)
Coba validasi - submit dengan data kosong atau invalid

6. PRAKTIKUM 5: Form dengan File Upload Preview

Tujuan

Membuat form dengan preview (tanpa actual upload, hanya demonstrasi konsep).

Langkah-langkah

Buat file form_dengan_preview.php:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Form dengan Preview</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.0/font/bootstrap-icons.css">
</head>
<body>
    <div class="container mt-5">
        <div class="row">
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-primary text-white">
                        <h5 class="mb-0"><i class="bi bi-plus-circle"></i> Form Input Buku</h5>
                    </div>
                    <div class="card-body">
                        <form id="bukuForm">
                            <div class="mb-3">
                                <label for="judul" class="form-label">Judul Buku</label>
                                <input type="text" class="form-control" id="judul" placeholder="Masukkan judul buku">
                            </div>
                            
                            <div class="mb-3">
                                <label for="kategori" class="form-label">Kategori</label>
                                <select class="form-select" id="kategori">
                                    <option value="">-- Pilih --</option>
                                    <option value="Programming">Programming</option>
                                    <option value="Database">Database</option>
                                    <option value="Web Design">Web Design</option>
                                    <option value="Networking">Networking</option>
                                </select>
                            </div>
                            
                            <div class="mb-3">
                                <label for="pengarang" class="form-label">Pengarang</label>
                                <input type="text" class="form-control" id="pengarang" placeholder="Nama pengarang">
                            </div>
                            
                            <div class="mb-3">
                                <label for="penerbit" class="form-label">Penerbit</label>
                                <input type="text" class="form-control" id="penerbit" placeholder="Nama penerbit">
                            </div>
                            
                            <div class="row">
                                <div class="col-md-6 mb-3">
                                    <label for="tahun" class="form-label">Tahun</label>
                                    <input type="number" class="form-control" id="tahun" min="1900" max="<?php echo date('Y'); ?>">
                                </div>
                                <div class="col-md-6 mb-3">
                                    <label for="harga" class="form-label">Harga (Rp)</label>
                                    <input type="number" class="form-control" id="harga" min="10000" step="1000">
                                </div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="stok" class="form-label">Stok</label>
                                <input type="number" class="form-control" id="stok" min="0">
                            </div>
                            
                            <div class="mb-3">
                                <label for="deskripsi" class="form-label">Deskripsi</label>
                                <textarea class="form-control" id="deskripsi" rows="3"></textarea>
                            </div>
                            
                            <button type="button" class="btn btn-primary w-100" onclick="updatePreview()">
                                <i class="bi bi-eye"></i> Update Preview
                            </button>
                        </form>
                    </div>
                </div>
            </div>
            
            <div class="col-md-6">
                <div class="card">
                    <div class="card-header bg-success text-white">
                        <h5 class="mb-0"><i class="bi bi-eye"></i> Preview Data Buku</h5>
                    </div>
                    <div class="card-body">
                        <div id="preview">
                            <div class="alert alert-info">
                                <i class="bi bi-info-circle"></i> Isi form di sebelah kiri dan klik "Update Preview" untuk melihat hasil.
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script>
    function updatePreview() {
        // Ambil nilai dari form
        var judul = document.getElementById('judul').value;
        var kategori = document.getElementById('kategori').value;
        var pengarang = document.getElementById('pengarang').value;
        var penerbit = document.getElementById('penerbit').value;
        var tahun = document.getElementById('tahun').value;
        var harga = document.getElementById('harga').value;
        var stok = document.getElementById('stok').value;
        var deskripsi = document.getElementById('deskripsi').value;
        
        // Format harga
        var hargaFormat = harga ? 'Rp ' + parseInt(harga).toLocaleString('id-ID') : '-';
        
        // Tentukan badge kategori
        var badgeColor = 'secondary';
        if (kategori === 'Programming') badgeColor = 'primary';
        else if (kategori === 'Database') badgeColor = 'success';
        else if (kategori === 'Web Design') badgeColor = 'info';
        else if (kategori === 'Networking') badgeColor = 'warning';
        
        // Buat HTML preview
        var html = '<div class="card">';
        html += '<div class="card-header bg-primary text-white">';
        html += '<h5 class="mb-0">' + (judul || '(Judul Belum Diisi)') + '</h5>';
        html += '</div>';
        html += '<div class="card-body">';
        html += '<table class="table table-borderless">';
        html += '<tr><th width="120">Kategori</th><td>: <span class="badge bg-' + badgeColor + '">' + (kategori || '-') + '</span></td></tr>';
        html += '<tr><th>Pengarang</th><td>: ' + (pengarang || '-') + '</td></tr>';
        html += '<tr><th>Penerbit</th><td>: ' + (penerbit || '-') + '</td></tr>';
        html += '<tr><th>Tahun</th><td>: ' + (tahun || '-') + '</td></tr>';
        html += '<tr><th>Harga</th><td>: ' + hargaFormat + '</td></tr>';
        html += '<tr><th>Stok</th><td>: ' + (stok || '0') + ' buku</td></tr>';
        html += '</table>';
        
        if (deskripsi) {
            html += '<hr>';
            html += '<h6>Deskripsi:</h6>';
            html += '<p>' + deskripsi + '</p>';
        }
        
        html += '</div>';
        html += '</div>';
        
        // Update preview
        document.getElementById('preview').innerHTML = html;
    }
    
    // Auto update preview saat user mengetik (optional)
    document.querySelectorAll('#bukuForm input, #bukuForm select, #bukuForm textarea').forEach(function(element) {
        element.addEventListener('input', updatePreview);
        element.addEventListener('change', updatePreview);
    });
    </script>
</body>
</html>

Testing:

Akses: http://localhost/perpustakaan/form_dengan_preview.php
Isi form di sebelah kiri
Preview otomatis terupdate saat mengetik
Lihat bagaimana data ditampilkan secara real-time
Note: Ini menggunakan JavaScript untuk preview, bukan submit ke server

E. TUGAS

Tugas 1: Form Registrasi Anggota (40%)

Instruksi: Buat file form_anggota.php untuk registrasi anggota perpustakaan dengan validasi lengkap.

Spesifikasi Form:

Field yang harus ada:
- Nama Lengkap (text, required, min 3 karakter)
- Email (email, required, format email valid)
- Telepon (text, required, format: 08xxxxxxxxxx)
- Alamat (textarea, required, min 10 karakter)
- Jenis Kelamin (radio: Laki-laki/Perempuan, required)
- Tanggal Lahir (date, required, umur min 10 tahun)
- Pekerjaan (select: Pelajar/Mahasiswa/Pegawai/Lainnya, required)
Validasi yang harus diimplementasikan:
- Semua field required
- Email harus format valid
- Telepon harus format 08xxxxxxxxxx (10-13 digit)
- Alamat minimal 10 karakter
- Umur minimal 10 tahun (dari tanggal lahir)
Output:
- Jika valid: Tampilkan success message dan data yang diinput dalam card Bootstrap
- Jika error: Tampilkan error message per field dengan Bootstrap invalid-feedback
- Form harus keep value setelah submit

Tugas 2: Sistem Pencarian Buku Lanjutan (60%)

Instruksi: Buat file search_advanced.php yang memiliki fitur pencarian dan filter lengkap.

Spesifikasi:

Form Pencarian dengan:
- Keyword (judul/pengarang) - text input
- Kategori - select dropdown
- Range harga (min & max) - number input
- Tahun terbit - number input
- Status ketersediaan (radio: Semua/Tersedia/Habis)
Data Buku:
- Gunakan array minimal 10 buku
- Include field: kode, judul, kategori, pengarang, penerbit, tahun, harga, stok
Fitur yang harus ada:
- Filter berdasarkan semua kriteria di atas
- Hasil ditampilkan dalam tabel Bootstrap
- Highlight keyword pada hasil (optional bonus)
- Sorting hasil (by judul/harga/tahun) - dropdown
- Pagination sederhana (10 item per page)
- Tampilkan jumlah hasil ditemukan
- URL harus menunjukkan parameter pencarian (GET method)
Validasi:
- Harga min tidak boleh lebih besar dari harga max
- Tahun harus valid (1900 - sekarang)

Template Starter:

<?php
// Data buku (minimal 10)
$buku_list = [
    // TODO: Isi dengan 10+ data buku
];
 
// Ambil parameter GET
$keyword = $_GET['keyword'] ?? '';
$kategori = $_GET['kategori'] ?? '';
$min_harga = $_GET['min_harga'] ?? '';
$max_harga = $_GET['max_harga'] ?? '';
$tahun = $_GET['tahun'] ?? '';
$status = $_GET['status'] ?? 'semua';
$sort = $_GET['sort'] ?? 'judul';
 
// Validasi
$errors = [];
 
if (!empty($min_harga) && !empty($max_harga)) {
    if ($min_harga > $max_harga) {
        $errors[] = "Harga minimum tidak boleh lebih besar dari harga maksimum";
    }
}
 
// TODO: Filter dan sorting
$hasil = [];
 
// TODO: Tampilkan form dan hasil
?>

Bonus (+10%):

Implement highlight keyword pada hasil
Export hasil ke CSV (button download)
Save pencarian ke session (recent searches)

Submission:

Format: Link repository GitHub
Deadline: Pertemuan 6
Upload ke: Ngaji UIN Gusdur (submit link repository GitHub)

F. EVALUASI

1. Kuis Singkat (Dikerjakan di Kelas)

Soal Pilihan Ganda:

Method form yang mengirim data melalui URL adalah:
- A. POST
- B. GET
- C. PUT
- D. DELETE
Superglobal untuk menerima data POST adalah:
- A. $_GET
- B. $_POST
- C. $_REQUEST
- D. $_FORM
Fungsi untuk sanitasi HTML characters:
- A. sanitize()
- B. clean()
- C. htmlspecialchars()
- D. strip_html()
Method yang lebih aman untuk data sensitif:
- A. GET
- B. POST
- C. Sama saja
- D. REQUEST
Untuk cek apakah form di-submit gunakan:
- A. if ($_POST)
- B. if ($_SERVER['REQUEST_METHOD'] == 'POST')
- C. if (isset($_SUBMIT))
- D. if (form_submitted())
Fungsi untuk validasi email:
- A. is_email()
- B. check_email()
- C. filter_var() dengan FILTER_VALIDATE_EMAIL
- D. validate_email()
Cara keep value input setelah submit:
- A. value="<?php echo $var; ?>"
- B. keep="true"
- C. Otomatis ter-keep
- D. Tidak bisa
Bootstrap class untuk invalid feedback:
- A. error-message
- B. invalid-feedback
- C. form-error
- D. validation-error
Untuk cek apakah key ada di $_POST gunakan:
- A. exists($_POST['key'])
- B. isset($_POST['key'])
- C. has($_POST['key'])
- D. check($_POST['key'])
XSS adalah singkatan dari:
- A. XML Site Scripting
- B. Cross-Site Scripting
- C. Cross-Server Scripting
- D. eXternal Site Script

Jawaban dan contoh kode untuk soal essay tersedia di bahan pembelajaran lebih lanjut.

Pertemuan 4: Array & Function Pertemuan 6: Database MySQL