Online Group Chat application Using PHP

PHP Web Development Front End Technology

A web-based tool called an online group chat application enables users to text, phone, or video chat with one another in real-time. Many people are using these programs because they are simple and convenient. A popular server-side programming language, PHP, can create web-based applications like group chat programs. PHP offers comprehensive functionality for managing user input, communicating with databases, and integrating web-based services.

Creating an online group chat application using PHP can be a terrific project idea for ambitious web developers or companies wishing to provide an online communication platform for their staff or clients. Various capabilities, including group chats, private messaging, file sharing, and others, can be included in the application's design. Setting up a server, creating the user interface, writing the PHP code, adding security features, testing, and deploying are just a few of the tasks involved in creating such an application. Developers can use these procedures to produce a dependable and secure online group chat program that satisfies user requirements.

Steps to Make a Group Chat Application

Step 1: Install a Server

Installing a server is the first step in setting up a PHP-based online group chat application. For testing reasons, users can host their applications on a cloud server like Amazon Web Services, DigitalOcean, or a local server like XAMPP or WAMP. The server needs to be set up to run PHP and have a database like MySQL installed.

Step 2: Create a Database

The next step is to create a database after configuring the server. User data, chat messages, and other pertinent information will be kept in the database. The database and its tables can be created using a program like phpMyAdmin. User data, such as username, email address, password, and other pertinent information, should be stored in the database.

Step 3: Create the User Interface

An essential component of any application, including online group chat, is the user interface. Users should be able to navigate the program thanks to an intuitive and user-friendly user interface. A login/register page, the chat room page, and other associated pages should all be included in the user interface.

Step 4: Write the PHP Code

Following the creation of the user interface, PHP code must be written. The PHP code should handle user registration, login/logout, and chat messages. The code should also run server-side user input validation to save and retrieve user data and chat messages. The PHP code should be modular and well-organized to guarantee simple maintenance and scalability.

Step 5: Implement Security

The online group chat application is not an exception; security is a crucial component of any web-based program. To prevent unauthorized access to the application, the PHP code should include security features like password hashing, CSRF protection, and user authentication. The application should also use SSL encryption to communicate safely between the server and the client.

Step 6: Testing

After the program has been created, it is crucial to test it to ensure everything functions as it should correctly. User registration, login/logout, chat messaging, and other associated functions are all tested during this process. Testing should be done in a staging environment that closely resembles the production environment to ensure the application functions flawlessly when deployed to production.

STEP 7: Deployment

The last stage is to make the program accessible to users by placing it in a production environment. A dependable, secure, and scalable server should be used to launch the application. Regular monitoring is also necessary to ensure it operates at peak efficiency and to spot and address any emerging problems. The application has to receive regular upgrades to stay current with emerging technology and security.

Building Online Group Chat Application

We will start building our online chat application by following the above steps. We are not focusing here on the security and the deployment part for simplicity of the code and demo purposes.

Step 1. We will use xampp and MySQL with PHP’s pdo. Make sure you already installed XAMPP and MySQL in your system. We have also added bootstrap CDN links in our user interface for better visualization.

Step 2. The next step is to create the database. You can manually navigate to the phpMyAdmin panel and build your database and tables or write a script to make your database and table automatically. This is the following script you need to run to create the database and tables −

CREATE DATABASE onlinechatapp DEFAULT CHARACTER SET utf8;

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

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

The database name we used is ‘onlinechatapp’, and we set credentials as ‘admin’ and passwords as ‘admin’ for the database. The table we created is named ‘message’, which has an ‘id’ field which is an auto-incremented and primary key, a ‘content’ field, which stores the content of the message, and finally ‘, user_id’ to identify the user.

Step 3. After the database is completed and before doing the actual user interface, we need to create a connection between the database and the user interface. We created a file named ‘pdo.php’, which holds the connection, and we include this file or connection in every page we will build for the user interface.

pdo.php: The connection file

<?php
$pdo = new PDO('mysql:host=localhost;port=3306;dbname=onlinechatapp', 'admin', 'admin');
// See the "errors" folder for details...
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

Step 4. After the database is completed and before doing the actual user interface, we need to create a connection between the database and the user interface. We created a file named ‘pdo.php’, which holds the connection, and we include this file or connection in every page we will build for the user interface.

login.php: Setting up the user id file

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

   // If user submit the user id
   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" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
   </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 class="" action="login.php" method="POST">
                  <h3>Enter your User Id:</h3>
                  <input type="text" name="user_id" class="form-control">
                  <button type="submit" class="btn btn-light form-control mt-2">Submit</button>
               </form>
            </div>
         </div>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
   </body>
</html>

We created the 'index.php' file to set up the actual application. Here we first check whether the current user has a user ID. We redirect them to the 'login.php' page if they don't have the user ID. Then we retrieve all the messages and show them accordingly. If the current user sends the news, we offer them as the green color; if it is for another user, it is shown as light pitch color. Also, after submitting the form, we insert a new message in the database table.

index.php: The online chat app file

<?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" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
   </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><?=$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"><?=$row['user_id']?>:</b>  
                     <div><?=$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" >
            </div>
            <div class="col-3 col-md-2">
               <button type="submit" class="btn btn-light form-control">Send</button>
            </div>
         </form>
      </div>
      <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
   </body>
</html>

For styling the components, we use a stylesheet and Bootstrap. Our stylesheet is named ‘styles.css’.

styles.css: The stylesheet file

.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: 3px 10px;
   border: 1px solid gray;
   border-radius: 5px;
   text-align: left;
   max-width: 70%;
}

.message-header {
   font-size: small;
   text-align: left;
}

.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;
}

.max-height-90 {
   max-height: 90vh;
   display: flex;
}

.d-flex {
   display: flex;
   flex-direction: column;
   align-content: center;
   justify-content: center;
}

So, this is how we developed the online group chat application. Below are the outputs of the application shown in the use condition.