Online Group Chat application using PHP - GeeksforGeeks

07 Aug, 2021
Prerequisites: Technical knowledge:
HTML
CSS
Javascript (basics)
PHP (Database connectivity)
SQL queries
Softwares to be installed:
XAMPP server: This is a free software which contains web server Apache, Database management system for MySQL (or MariaDB). It can be downloaded for free from the official site.
phpmyadmin: It is a free and open source software for administering MySQL and MariaDB. You can download it from the official site. The zip file downloaded must be pasted in the following location. 
C:\xampp\htdocs</strong  
Unzipping the file anywhere else won’t work well. Just unzip the contents there is enough.
Text editor: Any text editor like Notepad++ or ordinary Notepad is enough to implement this.
Browser: Any JavaScript enabled will be enough to run the code.
The Group Chat application: This is a simple group chat application to demonstrate the idea of the one you see in WhatsApp messenger with the localhost server. Multiple users can come and share their views here. The MySQL database stores the chats and retrieves it effectively. To implement this application successfully, we have to build the CSS and JavaScript for styling the UI, HTML part to render it, PHP code for storing and retrieving from the database. This application will contain two fields namely the username and the text message. The messages of the user who texts first will be aligned to the right side of the chatroom and messages of the others at the left side. Let us look at the implementation.
CSS: Place this under the style tag or in an external stylesheet file and link it. This CSS file comprises the styles for the chatroom, the text messages and the chat bubbles.
HTML
<style>*{    box-sizing:border-box;}body{    background-color:#abd9e9;    font-family:Arial;}#container{    width:500px;    height:700px;    background:white;    margin:0 auto;    font-size:0;    border-radius:5px;    overflow:hidden;}main{    width:500px;    height:700px;    display:inline-block;    font-size:15px;    vertical-align:top;}main header{    height:100px;    padding:30px 20px 30px 40px;    background-color:#622569;  }main header > *{    display:inline-block;    vertical-align:top;}main header img:first-child{    width:24px;    margin-top:8px;}  main header img:last-child{    width:24px;    margin-top:8px;}main header div{    margin-left:90px;    margin-right:90px;}main header h2{    font-size:25px;    margin-top:5px;    text-align:center;    color:#FFFFFF;  }main .inner_div{    padding-left:0;    margin:0;    list-style-type:none;    position:relative;    overflow:auto;    height:500px;    background-image:url(https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200911064223/bg.jpg);    background-position:center;    background-repeat:no-repeat;    background-size:cover;    position: relative;    border-top:2px solid #fff;    border-bottom:2px solid #fff;     }main .triangle{    width: 0;    height: 0;    border-style: solid;    border-width: 0 8px 8px 8px;    border-color: transparent    transparent #58b666 transparent;    margin-left:20px;    clear:both;}main .message{    padding:10px;    color:#000;    margin-left:15px;    background-color:#58b666;    line-height:20px;    max-width:90%;    display:inline-block;    text-align:left;    border-radius:5px;    clear:both;}main .triangle1{    width: 0;    height: 0;    border-style: solid;    border-width: 0 8px 8px 8px;    border-color: transparent   transparent #6fbced transparent;    margin-right:20px;    float:right;    clear:both;}main .message1{    padding:10px;    color:#000;    margin-right:15px;    background-color:#6fbced;    line-height:20px;    max-width:90%;    display:inline-block;    text-align:left;    border-radius:5px;    float:right;    clear:both;}main .triangle2{    width: 0;    height: 0;    border-style: solid;    border-width: 0 8px 8px 8px;    border-color: transparent    transparent #58b666 transparent;    margin-left:20px;    clear:both}main .message2{    padding:10px;    color:#000;    margin-left:15px;    background-color:#58b666;    line-height:20px;    max-width:90%;    display:inline-block;    text-align:left;    border-radius:5px;    clear:both}main footer{    height:150px;    padding:20px 30px 10px 20px;    background-color:#622569;}main footer .input1{    resize:none;    border:100%;    display:block;    width:120%;    height:55px;    border-radius:3px;    padding:20px;    font-size:13px;    margin-bottom:13px;}main footer textarea{    resize:none;    border:100%;    display:block;    width:140%;    height:55px;    border-radius:3px;    padding:20px;    font-size:13px;    margin-bottom:13px;    margin-left:20px;}main footer .input2{    resize:none;    border:100%;    display:block;    width:40%;    height:55px;    border-radius:3px;    padding:20px;    font-size:13px;    margin-bottom:13px;    margin-left:100px;    color:white;    text-align:center;    background-color:black;    border: 2px solid white; }}main footer textarea::placeholder{    color:#ddd;}</style>
Database Creation: Open the XAMPP control panel in your PC, Click start button for both Apache and MySQL. This step is very important to create a database and for running the application also. Open the browser (mostly Internet Explorer). On the search bar, type the line given below.
localhost/phpmyadmin  
It will open up a tab where you can create a database. For this application, a database named chat_app is created. A table named chats with the fields “uname”, “msg”, “dt” is created. Here “uname” is of varchar type and denotes the user name, the “msg” is also of varchar type and denotes the message sent and the “dt” denotes datetime (set to varchar type for formatting purpose), object for storing the time at which the message was sent.
PHP code for storing in the MySQL database: To insert the chats every time a user presses the “send” button, write this code before the initial HTML tag. Attempt MySQL server connection. Assuming you are running MySQL server with default setting (user ‘root’ with no password).
PHP
<?php    if (isset($_POST['submit'])){          $link = mysqli_connect("localhost",                "root", "", "chat_app");           // Check connection    if($link === false){        die("ERROR: Could not connect. "                . mysqli_connect_error());    }           // Escape user inputs for security    $un= mysqli_real_escape_string(            $link, $_REQUEST['uname']);    $m = mysqli_real_escape_string(            $link, $_REQUEST['msg']);                 date_default_timezone_set('Asia/Kolkata');    $ts=date('y-m-d h:ia');           // Attempt insert query execution    $sql = "INSERT INTO chats (uname, msg, dt)                VALUES ('$un', '$m', '$ts')";    if(mysqli_query($link, $sql)){        ;    } else{        echo "ERROR: Message not sent!!!";    }          // Close connection    mysqli_close($link);}?>
PHP and HTML code for fetching and aligning messages in the chatroom: In this chat application, the very first user’s chat is aligned to the right side. If the next message is also from the same user, it is also aligned to the right side of the chat room. If the message is from any other user, then that message will be aligned to the left side. The PHP function to achieve this is given below. Since the action to be carried out using PHP function is written on the same file, in the <form> tag, the action is set to the name of the same file. (Group_chat.php)
PHP
<body onload="show_func()"><div id="container">    <main>        <header>            <img src="https://s3-us-west-2.amazonaws.com/             s.cdpn.io/1940306/ico_star.png" alt="">            <div>                <h2>GROUP CHAT</h2>            </div>            <img src="https://s3-us-west-2.amazonaws.com/            s.cdpn.io/1940306/ico_star.png" alt="">        </header> <script>function show_func(){  var element = document.getElementById("chathist");    element.scrollTop = element.scrollHeight;   } </script>  <form id="myform" action="Group_chat.php" method="POST" ><div class="inner_div" id="chathist"><?php$host = "localhost";$user = "root";$pass = "";$db_name = "chat_app";$con = new mysqli($host, $user, $pass, $db_name); $query = "SELECT * FROM chats"; $run = $con->query($query); $i=0;   while($row = $run->fetch_array()) : if($i==0){ $i=5; $first=$row; ?> <div id="triangle1" class="triangle1"></div> <div id="message1" class="message1"> <span style="color:white;float:right;">  <?php echo $row['msg']; ?> </span> <br/> <div>  <span style="color:black;float:left;   font-size:10px;clear:both;">   <?php echo $row['uname']; ?>, <?php echo $row['dt']; ?> </span> </div></div><br/><br/> <?php }else{if($row['uname']!=$first['uname']){?> <div id="triangle" class="triangle"></div> <div id="message" class="message"> <span style="color:white;float:left;"> <?php echo $row['msg']; ?></span> <br/> <div>  <span style="color:black;float:right;          font-size:10px;clear:both;">   <?php echo $row['uname']; ?>,        <?php echo $row['dt']; ?> </span></div></div><br/><br/><?php}else{?> <div id="triangle1" class="triangle1"></div> <div id="message1" class="message1"> <span style="color:white;float:right;"> <?php echo $row['msg']; ?></span> <br/> <div>  <span style="color:black;float:left;          font-size:10px;clear:both;">    <?php echo $row['uname']; ?>,        <?php echo $row['dt']; ?>  </span></div></div><br/><br/><?php}}endwhile; ?></div>    <footer>        <table>         <tr>             <th>              <input  class="input1" type="text" id="uname"               name="uname" placeholder="From"></input>              </th>              <th>              <textarea id="msg" name="msg" rows='3'               cols='50' placeholder="Type your message">             </textarea>              </th>              <th>              <input class="input2" type="submit" id="submit"              name="submit" value="send"></input>              </th>                       </tr>        </table>                   </footer></form></main>   </div> </body>
Now the CSS, JavaScript, PHP and HTML part is put together and the whole code is given below. It is saved as Group_chat.php
PHP
<?phpif (isset($_POST['submit'])){/* Attempt MySQL server connection. Assumingyou are running MySQL server with defaultsetting (user 'root' with no password) */$link = mysqli_connect("localhost",            "root", "", "chat_app");  // Check connectionif($link === false){    die("ERROR: Could not connect. "          . mysqli_connect_error());}  // Escape user inputs for security$un= mysqli_real_escape_string(      $link, $_REQUEST['uname']);$m = mysqli_real_escape_string(      $link, $_REQUEST['msg']);date_default_timezone_set('Asia/Kolkata');$ts=date('y-m-d h:ia');  // Attempt insert query execution$sql = "INSERT INTO chats (uname, msg, dt)        VALUES ('$un', '$m', '$ts')";if(mysqli_query($link, $sql)){    ;} else{    echo "ERROR: Message not sent!!!";} // Close connectionmysqli_close($link);}?><html><head><style>*{    box-sizing:border-box;}body{    background-color:#abd9e9;    font-family:Arial;}#container{    width:500px;    height:700px;    background:white;    margin:0 auto;    font-size:0;    border-radius:5px;    overflow:hidden;}main{    width:500px;    height:700px;    display:inline-block;    font-size:15px;    vertical-align:top;}main header{    height:100px;    padding:30px 20px 30px 40px;    background-color:#622569;  }main header > *{    display:inline-block;    vertical-align:top;}main header img:first-child{    width:24px;    margin-top:8px;}  main header img:last-child{    width:24px;    margin-top:8px;}main header div{    margin-left:90px;    margin-right:90px;}main header h2{    font-size:25px;    margin-top:5px;    text-align:center;    color:#FFFFFF;  }main .inner_div{    padding-left:0;    margin:0;    list-style-type:none;    position:relative;    overflow:auto;    height:500px;    background-image:url(https://media.geeksforgeeks.org/wp-content/cdn-uploads/20200911064223/bg.jpg);    background-position:center;    background-repeat:no-repeat;    background-size:cover;    position: relative;    border-top:2px solid #fff;    border-bottom:2px solid #fff;     }main .triangle{    width: 0;    height: 0;    border-style: solid;    border-width: 0 8px 8px 8px;    border-color: transparent transparent      #58b666 transparent;    margin-left:20px;    clear:both;}main .message{    padding:10px;    color:#000;    margin-left:15px;    background-color:#58b666;    line-height:20px;    max-width:90%;    display:inline-block;    text-align:left;    border-radius:5px;    clear:both;}main .triangle1{    width: 0;    height: 0;    border-style: solid;    border-width: 0 8px 8px 8px;    border-color: transparent      transparent #6fbced transparent;    margin-right:20px;    float:right;    clear:both;}main .message1{    padding:10px;    color:#000;    margin-right:15px;    background-color:#6fbced;    line-height:20px;    max-width:90%;    display:inline-block;    text-align:left;    border-radius:5px;    float:right;    clear:both;} main footer{    height:150px;    padding:20px 30px 10px 20px;    background-color:#622569;}main footer .input1{    resize:none;    border:100%;    display:block;    width:120%;    height:55px;    border-radius:3px;    padding:20px;    font-size:13px;    margin-bottom:13px;}main footer textarea{    resize:none;    border:100%;    display:block;    width:140%;    height:55px;    border-radius:3px;    padding:20px;    font-size:13px;    margin-bottom:13px;    margin-left:20px;}main footer .input2{    resize:none;    border:100%;    display:block;    width:40%;    height:55px;    border-radius:3px;    padding:20px;    font-size:13px;    margin-bottom:13px;    margin-left:100px;    color:white;    text-align:center;    background-color:black;    border: 2px solid white; }}main footer textarea::placeholder{    color:#ddd;} </style><body onload="show_func()"><div id="container">    <main>        <header>            <img src="https://s3-us-west-2.amazonaws.com/             s.cdpn.io/1940306/ico_star.png" alt="">            <div>                <h2>GROUP CHAT</h2>            </div>            <img src="https://s3-us-west-2.amazonaws.com/            s.cdpn.io/1940306/ico_star.png" alt="">        </header> <script>function show_func(){  var element = document.getElementById("chathist");    element.scrollTop = element.scrollHeight;   } </script>  <form id="myform" action="Group_chat.php" method="POST" ><div class="inner_div" id="chathist"><?php$host = "localhost";$user = "root";$pass = "";$db_name = "chat_app";$con = new mysqli($host, $user, $pass, $db_name); $query = "SELECT * FROM chats"; $run = $con->query($query); $i=0;   while($row = $run->fetch_array()) : if($i==0){ $i=5; $first=$row; ?> <div id="triangle1" class="triangle1"></div> <div id="message1" class="message1"> <span style="color:white;float:right;"> <?php echo $row['msg']; ?></span> <br/> <div>   <span style="color:black;float:left;   font-size:10px;clear:both;">    <?php echo $row['uname']; ?>,        <?php echo $row['dt']; ?>   </span></div></div><br/><br/> <?php }else{if($row['uname']!=$first['uname']){?> <div id="triangle" class="triangle"></div> <div id="message" class="message"> <span style="color:white;float:left;">   <?php echo $row['msg']; ?> </span> <br/> <div>  <span style="color:black;float:right;          font-size:10px;clear:both;">  <?php echo $row['uname']; ?>,        <?php echo $row['dt']; ?> </span></div></div><br/><br/><?php}else{?> <div id="triangle1" class="triangle1"></div> <div id="message1" class="message1"> <span style="color:white;float:right;">  <?php echo $row['msg']; ?> </span> <br/> <div> <span style="color:black;float:left;         font-size:10px;clear:both;"> <?php echo $row['uname']; ?>,      <?php echo $row['dt']; ?> </span></div></div><br/><br/><?php}}endwhile;?></div>    <footer>        <table>        <tr>           <th>            <input  class="input1" type="text"                    id="uname" name="uname"                    placeholder="From">           </th>           <th>            <textarea id="msg" name="msg"                rows='3' cols='50'                placeholder="Type your message">            </textarea></th>           <th>            <input class="input2" type="submit"            id="submit" name="submit" value="send">           </th>                       </tr>        </table>                   </footer></form></main>   </div> </body></html>
Steps to run the code:
Save the file above as Group_chat.php inside a new folder in C:\xampp\htdocs. For example, I have placed the file inside the folder named “myfiles” inside the htdocs folder.
Before running the application create a database by following the steps given above. Name the database as chat_app. Name the table as chats.
Check the XAMPP control panel to ensure whether the Apache and MySQL are in running state.
Open the browser and type localhost/myfiles. The index of that directory will open. Click on the Group_chat.php.
Start sending messages and see the result
Output: 
Empty chatroom
 
user-1: steve types the message and clicks send
Message added to chat room
 
another message from steve
 
Ria types her second message
 
message added to chatroom
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
abhishek0719kadiyan
CSS-Misc
HTML-Misc
PHP-Misc
CSS
HTML
PHP
PHP Programs
Web Technologies
HTML
PHP
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
Types of CSS (Cascading Style Sheet)
How to position a div at the bottom of its container using CSS?
Design a web page using HTML and CSS
How to set space between the flexbox ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
REST API (Introduction)
How to Insert Form Data into Database using PHP ?
Types of CSS (Cascading Style Sheet)