Come with me to build a web live chat app with PHP, JavaScript, HTML and CSS. There are couple steps you need to follow in order to achieve the goal of having a working live chat app.
- Start with building the structure with HTML and creating the form
- Design the structure with CSS
- Start creating the logic for the message to be stored in a database
Starting with HTML is going to be easy and is going to look pretty bad, but not for long.
We just need some text that will show your name, a button that will let you exit the chat and an input box that will be part of a form where you will be able to type a message. The code for the image above:
For more information about HTML forms you can visit the W3Schools website. They have a lot of great content (https://www.w3schools.com/html/html_forms.asp). Presenting our chat is not looking too great so let’s style it and make it look nice!
There it is! Much better! Well this was just the beginning of our app. We have the structure done and the only thing left is to come up with the logic for the message to be live.
Let’s start with PHP, Hypertext Preprocessor (or simply PHP) is a server-side scripting language designed for web development. The PHP code is being executed on the server and then it sends the HTML to the client. Here is a simple example from the PHP Manual.
As you can see, the PHP code is enclosed in special start and end processing instructions. The web knows that the code between <?php and ?> is PHP code and it will be processed on the server and the client will only see the result of that script. In the example above we see “echo “Hi, I’m a PHP script;” “. The result of this script will be “Hi, I’m a PHP script!”. For more information about PHP make sure to visit their official website (http://php.net/). Of course, this is just something simple, PHP can create a lot of great things and I will show you how it can be used on our live chat app. Alright, so before we can access the live chat, we will need to submit a name, so the person we talk with knows who is messaging. For this we need another input box where we can type our name.
There you go! After that we need to store the name submitted and display it next to “Welcome”. For example, “Welcome, Your Name”, the code is very simple, the name submitted will be stored in a variable and then displayed next to “Welcome”.
The name is stored in the variable $_SESSION[‘name’] and we can now use it anywhere we want on the page. For example, we can now tell who joined the chat and who left the chat by using this variable.
We now have to store the messages that are going to be sent. PHP being a server side language, we can use a database to store each message. For this app we are going to store HTML code in a database and then display it in the chat. For this we will need to use SQL, SQL stands for Structured Query Language. SQL is used to communicate with a database.
Look for a variable called $content; this variable will store the user’s message and it will be added in the $sql query (formula). The $sql is taking the name of that user and whatever the message is ($content). When the user clicks on “Send” this query will be executed and it will store the name, the message and the time when it was sent, in the database.
Now that we have all the information in the database, we need to display it in the chat. The way we do that is by using another SQL query.
This query will select all the information from the content column in the “tblnotes” table. As you can see in the second image above, there are three columns, notesId, content and User_ID.
For the final step, we have to figure out a way to make the chat update. For this we will use the function ajax() that is found in the jQuery library, jQuery is a JavaScript library. With ajax you can:
- Read data from a web server – after a web page has loaded
- Update a web page without reloading the page
- Send data to a web server – in the background
For more information about ajax, you can check the jquery documentation for ajax (http://api.jquery.com/jquery.ajax/). Next, we need a separate file where we will have the SQL query to get the content from the database, and that file will be called with the ajax() function.
The url in the $.ajax is what is going to call for the file that contains the SQL query, this is going to make the page not refresh and it will show the messages nicely. You can see in the image above that $.ajax is part of function ajaxCall. This function is going to be called in the setInterval() function that is part of JavaScript. The setInterval() function is giving you the ability to call another function after a period of time. In our case, we will call the ajaxCall() function every 1 millisecond.
That’s all!! I hope you enjoyed this project and I hope I see you around! Thanks for taking the time to check this cool project!
Code Daily 