Create Group Talk In PHP With MySQL, jQuery And AJAX – Subin – s Blog
Create Group Talk In PHP With MySQL, jQuery And AJAX
Program » SQL » Create Group Talk In PHP With MySQL, jQuery And AJAX
Published January 15, 2014
Updated April 26, 2015
Talking is one of the most implemented feature on websites. Group talk makes users to share their feelings and other news lightly to their friends lightly. AJAX makes this talking more beautiful, elegant, elementary and convenient. Group talks may be vulnerable to SQL injections and XSS attacks. But in this post where we’re going to make a group talk that doesn’t have these vulnerabilities which makes it more awesome. You can see a demo, or you can download the files directly.
Things To Note
Make sure the Time Zone on MySQL server is the same as on PHP server. If the time zone is different, the user’s online presence can’t be understood.
We limit the name of the user to 20 characters, because we don’t want a long name that overflows the “online users” display element. There is no error message displayed when a user submits a name of more than twenty chars. If the user submits the name of twenty chars, the very first twenty chars will only be inserted in to the table. Other chars after twenty chars will be eliminated by MySQL.
If you need Users’ Typing Status display with the talk, see this tutorial after completing this tutorial.
tables.sql
The SQL code that creates the two tables needed for the group talk is contained in the tables.sql file :
When you execute the above SQL code, you will have two tables, one chatters and the other messages. In chatters table, we add the logged in users’ details where as the other one, we will add the messages sent by the users.
config.php
The database configuration is stored in this file. You should switch the credentials according to your database :
The session is began when this file geysers. There is a file named user_online.php included in the file. This file deletes the offline users and updates the time stamp of the presently logged in user. This time stamp determines the online, offline status. I explained more about it in the user_online.php heading in this post.
index.php
The main character of our talk is this file. index.php joins everything together.
When a user is not logged in, this file will flow the login.php file which have the login box and others. If the user is logged in, then it will directly display the chatbox.php which contains the chatbox. Users who are presently online are shown using users.php file.
login.php
The login box and the login authentication, filtering, checking are added in this file. This file is included twice in the index.php file, one for checking and other for displaying login box.
If the user has submitted the login form, then this file will do the following :
- Filter Name (Eliminate HTML entities)
- Check If there is another user with the name
If everything is OK, then the file switches the user value of session to the name submitted. index.php and chatbox.php takes care of the rest.
chatbox.php
This file don’t have that much content. This file contains the log out link, talk messages container and talk form :
The messages are displayed from msgs.php and the form is also displayed.
msgs.php
Displays the messages sent by the other users and himself/herself. A request is made to this file every five seconds to check fresh messages. When the user logs out from another page of the browser window, msgs.php will make the current page reload to make sure everything is alright.
send.php
When the user submits a message, the message is sent to send.php. This file treats the message, filters it and insert into database.
users.php
Presently online users are displayed using this file. This file is also requested in every five seconds by jQuery.
user_online.php
Whenever the config.php file is called, this file is also called. This file loops through the online users on table chatters and check if their time stamp is lesser that twenty five seconds the current time. If it is lesser, then that user is dropped (deleted) from the table. It also updates the time stamp of the presently logged in user if there is one making it unlikely for the other script to delete the current user. It is necessary to have the same time zone on MySQL server and the PHP server. If the presently logged in user is accidentally deleted in case of misunderstanding, the script will automatically add the user to the table chatters. What an significant file !
logout.php
If the user can log in,.there should be a log out option. Here is the file that will demolish the session and redirects to the main page or as you call it “logout” :
Client Side
It’s time to budge to the client side, where we will design our chatbox with CSS and add the jQuery code to make it effortless.
talk.css
The chatbox, online users and other styling is in here :
The elements we added are all packaged in the .talk container, so the talk.css won’t mess up any other styles of your site.
talk.js
The jQuery code is the content of this file. Note that you should add a script[src] that links to the jQuery library source.
I think that’s all the files. I made it to these much files to make the tutorial effortless. Hope you like it. Be open source, share this with your developer friends. I’m sure they would love to see this. If you have any problems / suggestions, please say it out in the comments, I would love to hear it from you and I will reply if there isn’t any stupid school projects.