All Tutorials

Your One-Stop Destination for Learning and Growth

Creating a Shoutbox with PHP, MySQL, and jQuery: A Step-by-Step Tutorial

In this tutorial, we will create a simple shoutbox using PHP, MySQL, and jQuery. This shoutbox will allow users to submit messages that will be displayed in real time for all visitors to see. Let's get started!

Prerequisites

Before we begin, make sure you have the following tools installed:

  1. A text editor or IDE of your choice (e.g., Sublime Text, Atom, Visual Studio Code)
  2. A web server with PHP and MySQL support (e.g., Apache + XAMPP, MAMP, or WAMP)
  3. Basic understanding of HTML, CSS, JavaScript, PHP, and MySQL

Setting Up the Database

First, let's create a new database for our shoutbox. In your favorite MySQL client (or using phpMyAdmin), run the following SQL script:

CREATE TABLE `shoutbox` (
  `id` int NOT NULL AUTO_INCREMENT PRIMARY Key,
  `message` text NOT NULL,
  `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
  `ip_address` varchar(15) NOT NULL,
  UNIQUE KEY `id` (`id`)
);

Creating the Shoutbox HTML and CSS

Create a new file called index.html and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Shoutbox</title>
  <style>
    /* Add your custom CSS here */
  </style>
  <!-- Include the jQuery library -->
  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <!-- Include your custom JavaScript file -->
  <script src="shoutbox.js"></script>
</head>
<body>
  <div id="shoutbox">
    <form id="message-form">
      <input type="text" id="message" placeholder="Type a message...">
      <button type="submit">Send</button>
    </form>
    <ul id="messages"></ul>
  </div>
</body>
</html>

Creating the Shoutbox PHP and MySQL Backend

Create a new file called shoutbox.php and add the following code:

<?php
$servername = "localhost";
$username = "your_mysql_username";
$password = "your_mysql_password";
$dbname = "your_database_name";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);

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

$message = $_POST['message'];
$ip_address = $_SERVER["REMOTE_ADDR"];

$sql = "INSERT INTO shoutbox (message, ip_address) VALUES ('$message', '$ip_address')";

if ($conn->query($sql) === TRUE) {
    echo "New message added successfully!";
} else {
    echo "Error: " . $sql . "<br>" . $conn->error;
}

// Close connection
$conn->close();
?>

Creating the Shoutbox JavaScript

Create a new file called shoutbox.js and add the following code:

$(document).ready(function() {
  $('#message-form').submit(function(e) {
    e.preventDefault(); // Prevent form from submitting normally

    const message = $('#message').val();

    $.ajax({
      url: 'shoutbox.php',
      method: 'POST',
      data: { message },
      success: function() {
        $('#message').val(''); // Clear the input field
        loadMessages();
      },
      error: function(jqXHR, textStatus, errorThrown) {
        console.error(textStatus, errorThrown);
      }
    });
  });

  function loadMessages() {
    $.getJSON('shoutbox.php', data => {
      $('#messages').empty();

      data.forEach(messageData => {
        const li = $('<li></li>').text(messageData.message + ' (' + messageData.timestamp + ')');
        $('#messages').append(li);
      });
    });
  }

  loadMessages(); // Load initial messages
});

Running the Shoutbox

Save all your files and open index.html in your web browser. You should now have a functional shoutbox that allows users to submit messages, which will be displayed in real time for all visitors to see.

That's it! We hope you enjoyed this tutorial on creating a simple shoutbox using PHP, MySQL, and jQuery. If you have any questions or comments, please leave them below. Happy coding!

Published August, 2017