Article Categories

Selected Reading

Online Group Chat application Using PHP

PHP Web Development Front End Technology

A web-based online group chat application enables users to communicate in real-time through text messaging. This tutorial demonstrates how to build a complete group chat application using PHP, MySQL, and Bootstrap for a modern interface.

Prerequisites

Installation Requirements:

XAMPP or WAMP server with PHP support

MySQL database

Web browser for testing

Step 1: Database Setup

First, create the database and table structure for storing chat messages

CREATE DATABASE onlinechatapp DEFAULT CHARACTER SET utf8;

GRANT ALL ON onlinechatapp.* TO 'admin'@'localhost' IDENTIFIED BY 'admin';

USE onlinechatapp;

CREATE TABLE message (
   id INTEGER NOT NULL AUTO_INCREMENT,
   content VARCHAR(1000),
   user_id VARCHAR(10),
   PRIMARY KEY(id)
) ENGINE=InnoDB CHARACTER SET=utf8;

Step 2: Database Connection

Create a PDO connection file to handle database interactions

pdo.php

<?php
$pdo = new PDO('mysql:host=localhost;port=3306;dbname=onlinechatapp', 'admin', 'admin');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
?>

Step 3: User Login Interface

Create a simple login form for users to enter their user ID

login.php

<?php 
include 'pdo.php';
session_start();

if(isset($_POST['user_id'])){
   $_SESSION['user_id'] = $_POST['user_id'];
   header('location: index.php');
   return;
}
?>
<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Login</title>
      <link rel="stylesheet" href="/styles.css">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
      <div class="container-fluid">
         <div class="row p-2 bg-color-green">
            <h2 class="col-12">Online Chat App</h2>
         </div>
         <div class="row p-2 bg-color-gray max-height-90">
            <div class="col-12 d-flex">
               <form action="login.php" method="POST">
                  <h3>Enter your User ID:</h3>
                  <input type="text" name="user_id" class="form-control" required>
                  <button type="submit" class="btn btn-light form-control mt-2">Submit</button>
               </form>
            </div>
         </div>
      </div>
   </body>
</html>

Step 4: Main Chat Application

Create the main chat interface that displays messages and handles new message submissions

index.php

<?php 
include 'pdo.php';
session_start();

if (!isset($_SESSION['user_id'])) {
   header('location: login.php');
   return;
}

if (isset($_POST['message'])) {
   $sql = "INSERT INTO message (content, user_id) VALUES (:content, :user_id)";
   $stmt = $pdo->prepare($sql);
   $stmt->execute(array(
      ':content' => $_POST['message'],
      ':user_id' => $_SESSION['user_id']
   ));
   header('location: index.php');
   return;
}

$sql = "SELECT * FROM message ORDER BY id";
$stmt = $pdo->query($sql);
?>
<!doctype html>
<html lang="en">
   <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <title>Online Chat App</title>
      <link rel="stylesheet" href="/styles.css">
      <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet">
   </head>
   <body>
      <div class="container-fluid">
         <div class="row p-2 bg-color-green">
            <h2 class="col-12">Online Chat App</h2>
         </div>
         <div class="row p-2 bg-color-gray">
            <?php
            while ($row = $stmt->fetch(PDO::FETCH_ASSOC)) {
               if($row['user_id'] == $_SESSION['user_id']){
            ?>
            <div class="col-12">
               <div class="d-flex">
                  <div class="message my-message">
                     <b class="message-header">Me:</b>  
                     <div><?= htmlspecialchars($row['content']) ?></div>
                  </div>
               </div>
            </div>
            <?php
               } else {
            ?>
            <div class="col-12">
               <div class="d-flex">
                  <div class="message others-message">
                     <b class="message-header"><?= htmlspecialchars($row['user_id']) ?>:</b>  
                     <div><?= htmlspecialchars($row['content']) ?></div>
                  </div>
               </div>
            </div>
            <?php
               }
            }
            ?>
         </div>
         <form class="row p-2 bg-color-green send-message" action="index.php" method="POST">
            <div class="col-9 col-md-10">
               <input type="text" name="message" class="form-control" placeholder="Write your message" required>
            </div>
            <div class="col-3 col-md-2">
               <button type="submit" class="btn btn-light form-control">Send</button>
            </div>
         </form>
      </div>
   </body>
</html>

Step 5: Styling

Create a CSS file for styling the chat interface

styles.css

.container-fluid {
   min-height: 90vh;
   max-height: 100vh;
}

.bg-color-green {
   background-color: rgb(76 175 80);
   color: rgb(255 255 255);
   text-align: center;
}

.bg-color-gray {
   background-color: rgb(231, 231, 231);
   min-height: 84vh;
   overflow-y: scroll;
}

.message {
   padding: 8px 12px;
   border: 1px solid gray;
   border-radius: 8px;
   margin: 5px 0;
   max-width: 70%;
}

.message-header {
   font-size: small;
   color: #666;
}

.my-message {
   margin-left: auto;
   background-color: rgb(175 255 176);
}

.others-message {
   background-color: rgb(250 235 215);
   margin-right: auto;
}

.send-message {
   min-height: 5vh;
}

Key Features

Feature	Description
User Sessions	PHP sessions track logged-in users
Real-time Chat	Messages refresh on page reload
Message Styling	Different colors for own vs others' messages
Responsive Design	Bootstrap ensures mobile compatibility

Testing the Application

To test the chat application

Start your XAMPP server
Create the database using the provided SQL
Place all files in your htdocs folder
Open multiple browser tabs to simulate different users
Login with different user IDs and test messaging

Conclusion

This PHP group chat application demonstrates core web development concepts including session management, database interactions, and responsive design. While basic, it provides a solid foundation for building more advanced real-time chat applications with features like WebSockets, user authentication, and file sharing.

Rushi Javiya

Updated on: 2026-03-15T10:21:59+05:30

6K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next