Building a Simple Comment System with PHP and MySQL

Step 1: Preparing the Database

First, create the database and table that will store the users' comment data. Here is an example SQL query to create the database and table:

CREATE DATABASE tutorial_komentar;
USE tutorial_komentar;

CREATE TABLE komentar (
    id INT AUTO_INCREMENT PRIMARY KEY,
    nama_pengguna VARCHAR(100) NOT NULL,
    isi_komentar TEXT NOT NULL,
    tanggal TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

In the komentar table, we have the columns:

• id as an auto-incrementing primary key,
• nama_pengguna to store the name of the user who wrote the comment,
• isi_komentar to store the comment text,
• tanggal to record the time the comment was added.

Step 2: Creating the Comment Form View in HTML

Next, we create a simple view with HTML for entering and displaying comments.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Comment System</title>
    <style>
        /* Simple styling for the comment display */
        .komentar-box { 
            border: 1px solid #ddd; 
            padding: 10px; 
            margin-bottom: 15px; 
            background-color: #f9f9f9; 
        }
        .komentar-box h4 { 
            margin: 0; 
            color: #333; 
        }
        .komentar-box p { 
            margin: 5px 0; 
            color: #555; 
        }
    </style>
</head>
<body>

<h2>Leave Your Comment</h2>
<form method="POST" action="komentar.php">
    <input type="text" name="nama_pengguna" placeholder="Your name" required><br>
    <textarea name="isi_komentar" placeholder="Write a comment..." required></textarea><br>
    <button type="submit">Submit Comment</button>
</form>

<h2>Comments</h2>
<div id="daftarKomentar">
    <!-- Comments will be displayed here -->
</div>

</body>
</html>

Here, we have a form element with a name input and a text area for the comment. This form will send data to the komentar.php file.

Step 3: Creating the PHP File to Process and Display Comments

Now, we create the komentar.php file, which will save comments to the database and display the list of existing comments.

<?php
// Connect to the database
$conn = new mysqli("localhost", "root", "", "tutorial_komentar");

if ($conn->connect_error) {
    die("Connection failed: " . $conn->connect_error);
}

// Save the comment to the database if the form is submitted
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
    $nama_pengguna = $_POST['nama_pengguna'];
    $isi_komentar = $_POST['isi_komentar'];

    $query = "INSERT INTO komentar (nama_pengguna, isi_komentar) VALUES ('$nama_pengguna', '$isi_komentar')";
    $conn->query($query);
}

// Fetch the list of comments from the database
$result = $conn->query("SELECT * FROM komentar ORDER BY tanggal DESC");

// Display the comments
while ($row = $result->fetch_assoc()) {
    echo "<div class='komentar-box'>";
    echo "<h4>" . htmlspecialchars($row['nama_pengguna']) . "</h4>";
    echo "<p>" . htmlspecialchars($row['isi_komentar']) . "</p>";
    echo "<small>" . $row['tanggal'] . "</small>";
    echo "</div>";
}

$conn->close();
?>

In this file:

• We start by creating a connection to the database.
• If data is submitted via the POST method, we save that data into the komentar table.
• We then fetch all comments from the database and display them.

Step 4: Displaying the Comment List on the HTML Page

Change the main HTML file to use the komentar.php file as part of the page so comments are always displayed when the page loads.

<div id="daftarKomentar">
    <?php include 'komentar.php'; ?>
</div>

Step 5: Running and Testing the Application

Open this HTML page in a browser, enter a name and a comment, then click "Submit Comment." The comment will be saved in the database and displayed on the page right away.

Conclusion

With PHP and MySQL, we can build an effective simple comment system. This feature can be developed further by adding extra validation or using JavaScript to make comments instant without reloading the page.