Posted inDatabase PHP

Project PHP MySQL CRUD Aplikasi Buku Tamu

No Comments
Project PHP MySQL CRUD Aplikasi Buku Tamu

Project PHP MySQL CRUD: Aplikasi Buku Tamu Sederhana (Lengkap dengan Source Code!)

Membuat aplikasi buku tamu dengan PHP dan MySQL adalah proyek sempurna untuk mempelajari operasi CRUD (Create, Read, Update, Delete). Aplikasi ini memungkinkan pengunjung website untuk meninggalkan pesan, sementara admin dapat mengelola data tersebut.

Dalam panduan ini, kita akan membangun Aplikasi Buku Tamu dengan fitur:
✅ Tambah Pesan (Create)
✅ Lihat Daftar Pesan (Read)
✅ Edit Pesan (Update)
✅ Hapus Pesan (Delete)
✅ Antarmuka Responsif dengan Bootstrap

Mari kita mulai langkah demi langkah!

1. Persiapan Proyek

Struktur File

Buat folder proyek dengan struktur berikut:

/guestbook  
│── index.php         (Halaman utama buku tamu)  
│── admin.php         (Panel admin untuk mengelola pesan)  
│── config.php        (Koneksi database)  
│── database.sql      (Skema database MySQL)  
└── assets/  
    ├── css/style.css (Styling tambahan)  
    └── js/script.js  (JavaScript untuk validasi)

Tools yang Dibutuhkan

  • XAMPP / Laragon (untuk server lokal)
  • Text Editor (VS Code, Sublime Text, dll.)
  • Browser (Chrome, Firefox)

2. Membuat Database MySQL

Jalankan phpMyAdmin, buat database baru dengan nama guestbook_db, lalu import skema berikut:

sql
CREATE TABLE messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    email VARCHAR(100) NOT NULL,
    message TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

3. Membuat Koneksi Database (config.php)

php
<?php
$host = "localhost";
$user = "root";
$password = "";
$database = "guestbook_db";

$conn = mysqli_connect($host, $user, $password, $database);

if (!$conn) {
    die("Koneksi gagal: " . mysqli_connect_error());
}
?>

4. Membuat Halaman Utama Buku Tamu (index.php)

php
<?php
require_once 'config.php';

if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $name = $_POST['name'];
    $email = $_POST['email'];
    $message = $_POST['message'];
    
    $sql = "INSERT INTO messages (name, email, message) VALUES ('$name', '$email', '$message')";
    mysqli_query($conn, $sql);
    
    header("Location: index.php");
    exit();
}

$messages = [];
$query = "SELECT * FROM messages ORDER BY created_at DESC";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_assoc($result)) {
    $messages[] = $row;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Buku Tamu</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-4">Buku Tamu</h1>
        
        <!-- Form Tambah Pesan -->
        <div class="card shadow mb-4">
            <div class="card-body">
                <form method="POST">
                    <div class="mb-3">
                        <label class="form-label">Nama</label>
                        <input type="text" class="form-control" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Email</label>
                        <input type="email" class="form-control" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label class="form-label">Pesan</label>
                        <textarea class="form-control" name="message" rows="3" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Kirim Pesan</button>
                </form>
            </div>
        </div>
        
        <!-- Daftar Pesan -->
        <div class="card shadow">
            <div class="card-body">
                <h3 class="mb-4">Daftar Pesan</h3>
                <?php if (empty($messages)): ?>
                    <p class="text-muted">Belum ada pesan.</p>
                <?php else: ?>
                    <div class="list-group">
                        <?php foreach ($messages as $msg): ?>
                            <div class="list-group-item mb-2">
                                <h5><?= htmlspecialchars($msg['name']) ?></h5>
                                <small class="text-muted"><?= $msg['email'] ?> | <?= $msg['created_at'] ?></small>
                                <p class="mt-2"><?= nl2br(htmlspecialchars($msg['message'])) ?></p>
                            </div>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    </div>

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

5. Membuat Halaman Admin (admin.php)

php
<?php
require_once 'config.php';

// Hapus pesan
if (isset($_GET['delete'])) {
    $id = $_GET['delete'];
    $sql = "DELETE FROM messages WHERE id = $id";
    mysqli_query($conn, $sql);
    header("Location: admin.php");
    exit();
}

// Ambil semua pesan
$messages = [];
$query = "SELECT * FROM messages ORDER BY created_at DESC";
$result = mysqli_query($conn, $query);
while ($row = mysqli_fetch_assoc($result)) {
    $messages[] = $row;
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Admin - Buku Tamu</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container mt-5">
        <h1 class="text-center mb-4">Panel Admin</h1>
        <a href="index.php" class="btn btn-secondary mb-3">Kembali ke Buku Tamu</a>
        
        <div class="card shadow">
            <div class="card-body">
                <h3 class="mb-4">Kelola Pesan</h3>
                <?php if (empty($messages)): ?>
                    <p class="text-muted">Belum ada pesan.</p>
                <?php else: ?>
                    <table class="table table-striped">
                        <thead>
                            <tr>
                                <th>Nama</th>
                                <th>Email</th>
                                <th>Pesan</th>
                                <th>Tanggal</th>
                                <th>Aksi</th>
                            </tr>
                        </thead>
                        <tbody>
                            <?php foreach ($messages as $msg): ?>
                                <tr>
                                    <td><?= htmlspecialchars($msg['name']) ?></td>
                                    <td><?= $msg['email'] ?></td>
                                    <td><?= substr(htmlspecialchars($msg['message']), 0, 50) ?>...</td>
                                    <td><?= $msg['created_at'] ?></td>
                                    <td>
                                        <a href="?delete=<?= $msg['id'] ?>" class="btn btn-danger btn-sm" onclick="return confirm('Hapus pesan ini?')">Hapus</a>
                                    </td>
                                </tr>
                            <?php endforeach; ?>
                        </tbody>
                    </table>
                <?php endif; ?>
            </div>
        </div>
    </div>

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

6. Menjalankan Aplikasi

  1. Simpan semua file di folder htdocs (XAMPP) atau www (Laragon).
  2. Buka http://localhost/guestbook untuk melihat buku tamu.
  3. Buka http://localhost/guestbook/admin.php untuk mengelola pesan.

7. Pengembangan Lebih Lanjut

  • Login Admin dengan sistem autentikasi.
  • Paginasi jika pesan terlalu banyak.
  • Validasi Form lebih ketat.
  • Pencarian & Filter Pesan.

Kesimpulan

Kita telah berhasil membuat Aplikasi Buku Tamu dengan PHP & MySQL yang mencakup operasi CRUD. Proyek ini cocok untuk pemula yang ingin belajar:
✅ Koneksi Database
✅ Form Handling
✅ Operasi Dasar Database (CRUD)

Coba kembangkan lagi dengan fitur tambahan! 🚀

Comments

No comments yet. Why don’t you start the discussion?

Leave a Reply

Your email address will not be published. Required fields are marked *