- 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.
- 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.
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.
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.
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 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)
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
- How to Configure Socket.IO with Demo-Chat App in Node.js ?
- How to group header content of a table using HTML5 ?
- How to create a group of related options in a drop-down list using HTML ?
- How to group footer content in form of table using HTML ?
- How to group the body content in a table using HTML5 ?
- HTML | Navigator onLine Property
- How to Set Online SQL Server for Node.js ?
- Why Laravel Aimeos Is a Good Choice for Building an Online Store ?
- Design first Application using Express
- Create a GeeksforGeeks Wrapper Application using Electron
- How to add Google map and Marker to your Application using AngularJS ?
- Profile Application using Python Flask and MySQL
- How to define a container for an external (non-HTML) application using HTML5?
- Deployment of Angular Application using Github Pages
- ReactJS | Transition Group
- HTML | DOM console.group() Method
- List group in bootstrap with examples
- How to add active class on click event in custom list group in Bootstrap 4 ?
- Bootstrap 5 | Button group
- How to group data with Angular filter ?
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to firstname.lastname@example.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.