Real-Time Domain Availability Checker in PHP (AJAX + WHOIS + DNS)
A modern PHP-based domain search tool with AJAX, DNS checks, and WHOIS fallback. Get instant domain availability results and smart suggestions in a fast, elegant UI.
Web messaging systems are at the heart of most online communication platforms, from social media apps to customer service chats. Building a simple messaging system with PHP is an excellent way for beginners to learn about web development, databases, and how real-time communication can work on the web. In this guide, we will walk through how to create a basic messaging app using PHP, MySQL, and some basic front-end technologies.
What You'll Need:
- PHP: Server-side scripting language for the logic.
- MySQL: A relational database to store messages.
- HTML/CSS: To build and style the front end.
- JavaScript (optional but recommended): For real-time message updating without page refresh.
- A Web Server (like XAMPP or MAMP): To run PHP and MySQL locally.
Step 1: Setting Up the Project
First, let's set up the project folder. Create a new directory for your project and structure it as follows:
/web_messaging_project
/assets
/css
/js
/includes
db.php
header.php
footer.php
/messages
index.php
send_message.php
fetch_messages.php- assets/css: Contains styles for the page.
- assets/js: Holds any JavaScript code, such as for AJAX.
- includes/db.php: Manages the database connection.
- messages/index.php: The main page that will display messages and the input form.
- messages/send_message.php: A script for sending new messages.
- messages/fetch_messages.php: Fetches messages from the database for display.
Step 2: Set Up the MySQL Database
Before we dive into the PHP code, you'll need a MySQL database to store the messages.
- Open your PHPMyAdmin or MySQL command line interface.
- Create a new database for the project:
CREATE DATABASE web_messaging;3. Next, create a messages table to hold the chat data:
USE web_messaging;
CREATE TABLE messages (
id INT AUTO_INCREMENT PRIMARY KEY,
sender VARCHAR(255),
receiver VARCHAR(255),
message TEXT,
timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);Here, we have the following columns:
id: The unique identifier for each message.sender: The person who sent the message.receiver: The recipient of the message.message: The content of the message.timestamp: The time when the message was sent.
Step 3: Database Connection (db.php)
Now let's write the PHP code to connect to the database. Create a file includes/db.php and add the following:
<?php
$host = 'localhost'; // Server address
$dbname = 'web_messaging'; // Database name
$username = 'root'; // Database username
$password = ''; // Database password (for XAMPP, it’s usually empty)
try {
$pdo = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
die("Connection failed: " . $e->getMessage());
}
?>This file will be included wherever we need access to the database in our project.
Step 4: Front-End Form (index.php)
Next, create the messaging interface where users can input their messages. Open the messages/index.php file and add the following HTML:
<?php include('../includes/db.php'); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Messaging</title>
<link rel="stylesheet" href="../assets/css/style.css">
</head>
<body>
<h1>Web Messaging</h1>
<div id="messages">
<!-- Messages will be dynamically loaded here -->
</div>
<form id="messageForm">
<input type="text" id="sender" placeholder="Your Name" required>
<input type="text" id="receiver" placeholder="Recipient's Name" required>
<textarea id="message" placeholder="Type your message here..." required></textarea>
<button type="submit">Send</button>
</form>
<script src="../assets/js/script.js"></script>
</body>
</html>
- The form allows users to input their name (sender), the recipient's name, and the message.
- We'll use JavaScript to handle the sending of the message without refreshing the page.
Step 5: Sending a Message (send_message.php)
Create a PHP file send_message.php to handle the logic when a user submits a message. This will insert the message into the database.
<?php
include('../includes/db.php');
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
$sender = $_POST['sender'];
$receiver = $_POST['receiver'];
$message = $_POST['message'];
$stmt = $pdo->prepare("INSERT INTO messages (sender, receiver, message) VALUES (?, ?, ?)");
$stmt->execute([$sender, $receiver, $message]);
echo "Message sent successfully!";
}
?>Step 6: Fetching Messages (fetch_messages.php)
Create another file fetch_messages.php to display the messages. We'll retrieve all messages from the database and display them in a list.
<?php
include('../includes/db.php');
$query = "SELECT * FROM messages ORDER BY timestamp DESC";
$stmt = $pdo->query($query);
$messages = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($messages as $message) {
echo "<p><strong>{$message['sender']} to {$message['receiver']}</strong>: {$message['message']} <em>({$message['timestamp']})</em></p>";
}
?>
Step 7: Adding JavaScript for Dynamic Functionality (script.js)
To make the messaging experience smoother, we'll use JavaScript to handle form submission without reloading the page. Create a new file assets/js/script.js:
document.getElementById('messageForm').addEventListener('submit', function(event) {
event.preventDefault();
const sender = document.getElementById('sender').value;
const receiver = document.getElementById('receiver').value;
const message = document.getElementById('message').value;
const formData = new FormData();
formData.append('sender', sender);
formData.append('receiver', receiver);
formData.append('message', message);
fetch('send_message.php', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(data => {
document.getElementById('message').value = ''; // Clear the message field
loadMessages(); // Reload the messages
});
});
function loadMessages() {
fetch('fetch_messages.php')
.then(response => response.text())
.then(data => {
document.getElementById('messages').innerHTML = data;
});
}
// Initial load of messages
loadMessages();Step 8: Styling the Interface (style.css)
Finally, you can style your application with CSS. Create a file assets/css/style.css to make the interface more attractive:
body {
font-family: Arial, sans-serif;
margin: 20px;
background-color: #f4f4f4;
}
h1 {
text-align: center;
margin-bottom: 20px;
}
#messages {
margin-bottom: 20px;
}
#messageForm input, #messageForm textarea {
width: 100%;
padding: 10px;
margin: 5px 0;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
cursor: pointer;
}
button:hover {
background-color: #45a049;
}Conclusion
With these steps, you've created a basic web messaging system using PHP, MySQL, and JavaScript. Users can send messages to each other, and the messages are displayed in real-time without refreshing the page. This simple messaging app lays the foundation for building more complex communication systems in the future. You can add more features, such as user authentication, message notifications, and more advanced real-time functionality with technologies like WebSockets.
Happy coding!
