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