Membuat Script Chat Sederhana Menggunakan PHP dan JQuery

Berikut adalah contoh skrip sederhana untuk aplikasi obrolan menggunakan PHP dan jQuery. Aplikasi ini memungkinkan pengguna mengirim pesan yang disimpan di database dan ditampilkan secara dinamis.
🔧 1. Struktur Database
Buat database dengan tabel bernama chat_messages:

CREATE DATABASE simple_chat;
USE simple_chat;
CREATE TABLE chat_messages (
    id INT AUTO_INCREMENT PRIMARY KEY,
    user VARCHAR(50) NOT NULL,
    message TEXT NOT NULL,
    timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

📁 2. Struktur Folder Project

chat/
├── index.php
├── insert.php
├── fetch.php
└── style.css

🖥️ 3. File: index.php

<!DOCTYPE html>
<html>
<head>
    <title>Simple Chat</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script>
        // Auto-refresh chat tiap 2 detik
        setInterval(() => {
            fetch('fetch.php')
                .then(res => res.text())
                .then(data => {
                    document.getElementById('chat-box').innerHTML = data;
                });
        }, 2000);
    </script>
</head>
<body>
    <div class="chat-container">
        <h2>Simple Chat App</h2>
        <div id="chat-box" class="chat-box"></div>

        <form action="insert.php" method="post">
            <input type="text" name="username" placeholder="Nama Anda" required>
            <input type="text" name="message" placeholder="Tulis pesan..." required>
            <button type="submit">Kirim</button>
        </form>
    </div>
</body>
</html>

📂 4. File: insert.php

<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "chat_app";

$conn = new mysqli($host, $user, $pass, $db);

if ($conn->connect_error) die("Koneksi gagal: " . $conn->connect_error);

$username = $_POST['username'];
$message = $_POST['message'];

$sql = "INSERT INTO messages (username, message) VALUES (?, ?)";
$stmt = $conn->prepare($sql);
$stmt->bind_param("ss", $username, $message);
$stmt->execute();

$stmt->close();
$conn->close();

header("Location: index.php");
?>

📂 5. File: fetch.php

<?php
$host = "localhost";
$user = "root";
$pass = "";
$db = "chat_app";

$conn = new mysqli($host, $user, $pass, $db);

if ($conn->connect_error) die("Koneksi gagal: " . $conn->connect_error);

$sql = "SELECT * FROM messages ORDER BY created_at DESC LIMIT 20";
$result = $conn->query($sql);

$chat = "";
while ($row = $result->fetch_assoc()) {
    $time = date("H:i", strtotime($row['created_at']));
    $chat .= "<p><strong>{$row['username']}:</strong> {$row['message']} <span class='time'>[$time]</span></p>";
}

echo $chat;

$conn->close();
?>

🎨 6. File: style.css

body {
    font-family: Arial;
    background: #f4f4f4;
    display: flex;
    justify-content: center;
    padding-top: 50px;
}

.chat-container {
    width: 400px;
    background: white;
    padding: 20px;
    box-shadow: 0 0 5px #aaa;
    border-radius: 10px;
}

.chat-box {
    height: 300px;
    overflow-y: scroll;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 15px;
    background: #f9f9f9;
}

form input[type=text] {
    padding: 8px;
    margin-right: 5px;
    width: calc(50% - 10px);
}

form button {
    padding: 8px 15px;
}

.time {
    font-size: 0.8em;
    color: gray;
}

✅ Cara Menggunakan
Import tabel SQL di MySQL.
Ubah konfigurasi database (host/user/pass) di file PHP jika perlu.
Akses index.php di browser.

📌 Tips Pengembangan Lanjutan
Tambahkan identifikasi user dengan session/login.
Gunakan WebSocket (misal dengan Ratchet) untuk real-time chat.
Tambahkan emoji dan notifikasi suara.
Buat penghapusan pesan atau fitur reply.

Baca Juga