Pengantar
Buku tamu (guest book) merupakan fitur sederhana yang memungkinkan pengunjung meninggalkan komentar, nama, atau pesan. Pada tutorial ini, kita akan membangun sebuah buku tamu berbasis web menggunakan PHP untuk logika server dan CSS untuk tampilan yang bersih serta responsif.
Fitur utama yang akan dibahas:
- Membuat database MySQL sederhana.
- Membuat form input dengan validasi dasar.
- Menampilkan data tamu dalam tabel.
- Menambahkan style CSS agar halaman tidak murahan.
Persiapan Lingkungan
Pastikan Anda memiliki:
- Web server dengan PHP (XAMPP, WAMP, atau LAMP).
- MySQL atau MariaDB.
- Editor teks (VS Code, Sublime, atau Notepad++).
Setelah menginstal paket di atas, jalankan Apache dan MySQL, kemudian buka http://localhost di browser.
Struktur Folder
Buat folder baru, misalnya guestbook, dan atur struktur sebagai berikut:
guestbook/ index.php save.php config.php style.css README.md
File config.php berisi konfigurasi database, index.php menampilkan form dan data, save.php memproses input, dan style.css menyimpan kode CSS.
Membuat Koneksi Database
Buat database bernama guestbook_db dan tabel guests dengan perintah berikut:
CREATE DATABASE guestbook_db;USE guestbook_db;CREATE TABLE guests ( id INT AUTO_INCREMENT PRIMARY KEY, nama VARCHAR(100) NOT NULL, email VARCHAR(150) NOT NULL, komentar TEXT NOT NULL, tanggal TIMESTAMP DEFAULT CURRENT_TIMESTAMP);
Selanjutnya, isi config.php dengan kode koneksi:
<?php$host = 'localhost';$db = 'guestbook_db';$user = 'root';$pass = '';$dsn = "mysql:host=$host;dbname=$db;charset=utf8mb4";try { $pdo = new PDO($dsn, $user, $pass); // Atur mode error PDO ke Exception $pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);} catch (PDOException $e) { die('Koneksi gagal: ' . $e->getMessage());}?>Membuat Form Input
Berikut contoh kode index.php yang menampilkan form dan data tamu.
<?phprequire 'config.php';// Ambil data tamu$stmt = $pdo->query('SELECT * FROM guests ORDER BY tanggal DESC');$guests = $stmt->fetchAll(PDO::FETCH_ASSOC);?><!DOCTYPE html><html lang="id"><head> <meta charset="UTF-8"> <title>Buku Tamu</title> <link rel="stylesheet" href="style.css"></head><body><h2>Tulis Pesan Anda</h2><form action="save.php" method="POST"> <label for="nama">Nama:</label> <input type="text" name="nama" id="nama" required> <label for="email">Email:</label> <input type="email" name="email" id="email" required> <label for="komentar">Komentar:</label> <textarea name="komentar" id="komentar" rows="4" required></textarea> <button type="submit" class="btn">Kirim</button></form><h2>Daftar Tamu</h2><table border="1" cellpadding="8" cellspacing="0"> <tr> <th>Nama</th> <th>Email</th> <th>Komentar</th> <th>Tanggal</th> </tr> <?php foreach ($guests as $guest): ?> <tr> <td><?= htmlspecialchars($guest['nama']); ?></td> <td><?= htmlspecialchars($guest['email']); ?></td> <td><?= nl2br(htmlspecialchars($guest['komentar'])); ?></td> <td><?= $guest['tanggal']; ?></td> </tr> <?php endforeach; ?></table></body></html>Perhatikan penggunaan htmlspecialchars untuk mencegah XSS dan nl2br agar baris baru di komentar tetap terlihat.
CSS untuk Tampilan Bersih
Letakkan kode berikut di style.css:
body{ font-family: 'Segoe UI', Tahoma, sans-serif; background:#f9f9f9; margin:0; padding:20px;}h2{ color:#2c3e50;}form{ background:#fff; padding:20px; border:1px solid #ddd; margin-bottom:30px;}label{ display:block; margin-top:10px; font-weight:bold;}input[type="text"],input[type="email"],textarea{ width:100%; padding:8px; margin-top:5px; border:1px solid #ccc; border-radius:4px; box-sizing:border-box;}button.btn{ background:#3498db; color:#fff; border:none; padding:10px 15px; margin-top:15px; cursor:pointer; border-radius:4px;}button.btn:hover{ background:#2980b9;}table{ width:100%; border-collapse:collapse; background:#fff;}th{ background:#ecf0f1; text-align:left;}td, th{ padding:10px;}tr:nth-child(even){ background:#f2f2f2;}Kesimpulan
Dengan langkahlangkah di atas, Anda sudah memiliki buku tamu sederhana yang dapat:
- Menyimpan data tamu ke database.
- Menampilkan seluruh entri dalam tabel yang rapi.
- Memiliki tampilan bersih berkat CSS.
- Memiliki keamanan dasar melalui sanitasi input.
Anda dapat mengembangkan lebih lanjut, misalnya menambah pagination, mengirim email notifikasi, atau menambahkan captcha untuk mencegah spam.
Selamat mencoba!
