- 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