DEV Community

Cover image for PHP crash course: Simple Guestbook
MD ARIFUL HAQUE
MD ARIFUL HAQUE

Posted on • Edited on

5 1

PHP crash course: Simple Guestbook

Here's a detailed guide to creating a guestbook application where visitors can leave messages. The implementation will use PHP, AJAX, CSS, and MySQL.

Database Schema

Create a MySQL database and a table for the guestbook messages:

CREATE DATABASE guestbook_db;

USE guestbook_db;

CREATE TABLE messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(100) NOT NULL,
    message TEXT NOT NULL,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);
Enter fullscreen mode Exit fullscreen mode

Project Structure

guestbook-app/
├── config.php
├── db.php
├── index.html
├── submit.php
├── fetch.php
├── style.css
├── guestbook.sql
└── js/
    └── main.js
Enter fullscreen mode Exit fullscreen mode

Configure the Database Connection:

  • Open the config.php file and update the database credentials.

     <?php
     // config.php
     $servername = "localhost";
     $username = "yourusername";
     $password = "yourpassword";
     $dbname = "guestbook_db";
    

Configuration File: db.php

<?php
include 'config.php';
// Database configuration
$dsn = 'mysql:host='.$host.';dbname='.$dbname;
$options = [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION,
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC,
];

try {
    $pdo = new PDO($dsn, $username, $password, $options);
} catch (PDOException $e) {
    die('Database connection failed: ' . $e->getMessage());
}
?>
Enter fullscreen mode Exit fullscreen mode

Main Page: index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Guestbook</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="js/main.js" defer></script>
</head>
<body>
    <div class="guestbook-container">
        <h1>Guestbook</h1>
        <form id="guestbook-form">
            <input type="text" id="name" name="name" placeholder="Your Name" required>
            <textarea id="message" name="message" placeholder="Your Message" required></textarea>
            <button type="submit">Submit</button>
        </form>
        <div id="messages-container"></div>
    </div>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

AJAX Script: js/main.js

document.addEventListener('DOMContentLoaded', () => {
    const form = document.getElementById('guestbook-form');
    const messagesContainer = document.getElementById('messages-container');

    form.addEventListener('submit', async (e) => {
        e.preventDefault();
        const formData = new FormData(form);

        try {
            const response = await fetch('submit.php', {
                method: 'POST',
                body: formData,
            });
            const result = await response.json();
            if (result.success) {
                form.reset();
                fetchMessages();
            } else {
                alert(result.error);
            }
        } catch (error) {
            console.error('Error:', error);
        }
    });

    async function fetchMessages() {
        try {
            const response = await fetch('fetch.php');
            const messages = await response.json();
            messagesContainer.innerHTML = messages.map(msg => `
                <div class="message">
                    <h3>${msg.name}</h3>
                    <p>${msg.message}</p>
                    <small>${msg.created_at}</small>
                </div>
            `).join('');
        } catch (error) {
            console.error('Error:', error);
        }
    }

    fetchMessages();
});
Enter fullscreen mode Exit fullscreen mode

Submit Message: submit.php

<?php
require 'db.php';

if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    $name = $_POST['name'];
    $message = $_POST['message'];

    if (!empty($name) && !empty($message)) {
        try {
            $stmt = $pdo->prepare('INSERT INTO messages (name, message) VALUES (:name, :message)');
            $stmt->execute(['name' => $name, 'message' => $message]);
            echo json_encode(['success' => true]);
        } catch (PDOException $e) {
            echo json_encode(['success' => false, 'error' => $e->getMessage()]);
        }
    } else {
        echo json_encode(['success' => false, 'error' => 'All fields are required.']);
    }
}
?>
Enter fullscreen mode Exit fullscreen mode

Fetch Messages: fetch.php

<?php
require 'db.php';

try {
    $stmt = $pdo->query('SELECT name, message, created_at FROM messages ORDER BY created_at DESC');
    $messages = $stmt->fetchAll();
    echo json_encode($messages);
} catch (PDOException $e) {
    echo json_encode([]);
}
?>
Enter fullscreen mode Exit fullscreen mode

CSS Styles: css/style.css

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
}

.guestbook-container {
    max-width: 600px;
    margin: auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

h1 {
    text-align: center;
    color: #333;
}

form {
    display: flex;
    flex-direction: column;
}

form input,
form textarea {
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

form button {
    padding: 10px;
    border: none;
    background: #28a745;
    color: white;
    border-radius: 5px;
    cursor: pointer;
}

form button:hover {
    background: #218838;
}

#messages-container {
    margin-top: 20px;
}

.message {
    background: #f9f9f9;
    padding: 10px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.message h3 {
    margin: 0;
    color: #333;
}

.message p {
    margin: 5px 0 10px;
    color: #666;
}

.message small {
    color: #aaa;
}
Enter fullscreen mode Exit fullscreen mode

Explanation

  1. Configuration (config.php): This file contains the database connection setup using PDO. It includes error handling for a failed connection.
  2. Main Page (index.php): The HTML structure of the guestbook, including a form for submitting messages and a container to display messages.
  3. AJAX Script (js/main.js): Handles form submission using AJAX to send data to the server without reloading the page. It also fetches and displays messages dynamically.
  4. Submit Message (submit.php): Processes the form submission, inserts the message into the database, and returns a JSON response indicating success or failure.
  5. Fetch Messages (fetch.php): Retrieves messages from the database and returns them as a JSON array.
  6. CSS (css/style.css): Styles the guestbook application for a clean and user-friendly interface.

This solution ensures that the guestbook application is functional, user-friendly, and adheres to modern web development practices using PHP, AJAX, CSS, and MySQL.

Connecting Links

If you found this series helpful, please consider giving the repository a star on GitHub or sharing the post on your favorite social networks 😍. Your support would mean a lot to me!

If you want more helpful content like this, feel free to follow me:

Source Code

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more

Top comments (0)

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay