Creating a web chat with PHP and MySQL

In this Tutorial, I’ll show you how you can write your very own web-based Chat App using HTML, CSS, JavaScript/jQuery, PHP and MySQL.

«

Prev

1

/

1

Next

»

Creating a Chatout Box Part 1

Creating a Chatout Box Part 2

Creating a Chatout Box Part 3

Creating a Chatout Box Part 4

Creating a Chatout Box Part 5

Creating a Chatout Box Part 6

«

Prev

1

/

1

Next

»

For a full functioning Web-Chat we’ll need three basic components:

• A Client-Side HTML Document that sends the Chat Text and receives Data from the database
• A PHP file which writes user input into the database
• A database (we’ll use MySQL in this Example) to save and manage the messages

So let’s start by creating our Front End.

The User Interface

Let’s start by creating a basic HTML template with jquery and some pretty standard code:

Most Chat Apps consist of a basic form with an output field to show the messages, an input field for our user to write into, optionally an input field for the username and last but not least a button to send the message.

So our whole html now looks like this:

Of course, our chat doesn’t look like a chat at the moment, but hey, that’s what CSS is for right? so let’s style it a bit:

Now that looks better. Feel free to style it even more.

Scripts

Our chat doesn’t really do anything right now, so let’s look into that. First up we’ll setup jQuery’s ready() and store the important elements into variables:

So here is what we want to do: Whenever the “Send” Button is pressed, we want our script to send the chat input to the server. Also we need an interval that regularly checks for new chat messages from the server to display.

Now we need to define what sendMessage() and retrieveMessages() will do:

Now we send the content of both the username and the chat-input to the write.php via GET. retrieveMessages on the other hand loads the content of read.php into the chat-output.

Writing into the Database

In our “write.php” we’ll want to to our database, to which we must connect first. We supply the login-data from a file called _connect.php.

write.php:

_connect.php:

We receive the user input from the URL so we can access them with “$_GET[”]”. Limiting the maximal length of the input makes sure users dont paste huge strings into our db.

Make sure to use mysqli\_escape\_string and htmlentities to escape the user input! Otherwise, your chat is vulnerable to SQL-Injections!

Now we are ready to write the user input into the Database. This can be done by sending a MySQL query to the database containing our data. We want the server to show an error when it doesn’t work, and to show the a success message if it succeeds.

The Database

As we haven’t created our table already we will now do this. Our table is pretty simple: one column for the time, text and name each plus an id column which increases by itself every time something gets written, while being our index. The easiest way to achieve this is to enter the following MySQL code in the SQL tab of your PhpMyAdmin:

Now our chat is able to store the input the user enters on our chat site, but we don’t see it on the chat HTMl site. Time to change this!

Reading the Database

the fact that PHP only gets executed when the user request the page makes us unable to simply include the data of the database into our chat site. A way to work around this is having a separate file like “read.php” where we will do this. Later we will load the contents of this site dynamically trough jQuery.

Our “read.php” looks something like this:

What we do here is similar to write.php, however in this case we want to read from the database, so we use SELECT in our query. We then loop over every entry and echo a p html tag with its contents. Also we need to format the date, we dont need the whole timestamp.

Done! Now our chat will update itself every 250 milliseconds.