Creating a web talk with PHP and MySQL

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

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

• A Client-Side HTML Document that sends the Talk 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 commence by creating our Front End.

The User Interface

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

Most Talk Apps consist of a basic form with an output field to demonstrate 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 entire html now looks like this:

Of course, our talk doesn’t look like a talk 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 talk doesn’t truly do anything right now, so let’s look into that. Very first up we’ll setup jQuery’s ready() and store the significant elements into variables:

So here is what we want to do: Whenever the "Send" Button is pressed, we want our script to send the talk input to the server. Also we need an interval that regulary checks for fresh talk messags 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 arm geysers 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 very first. We supply the login-data from a file called _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 gigantic strings into our db.

Make sure to use mysqli\_escape\_string and htmlentities to escape the user input! Otherwise, your talk 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 showcase an error when it doesn’t work, and to display 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 plain: one column for the time, text and name each plus an id column which increases by itself everytime something gets written, while being our index. The easiest way to achieve this is to inject the following MySQL code in the SQL tab of your PhpMyAdmin:

Now our talk is able to store the input the user comes in on our talk site, but we don’t see it on the talk HTMl site. Time to switch this!

Reading the Database

the fact that PHP only gets executed when the user request the page makes us incapable to simply include the data of the database into our talk site. A way to work around this is having a separate file like "read.php" where we will do this. Later we will stream 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 entire timestamp.

Conclusion

Done! Now our talk will update itself every two hundred fifty milliseconds. Your talk should be working now.

If you have questions regarding this project send me an email, or view the live demo or download the source

Creating a web talk with PHP and MySQL, F-Rilling

Creating a web talk with PHP and MySQL

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

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

• A Client-Side HTML Document that sends the Talk 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 begin by creating our Front End.

The User Interface

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

Most Talk Apps consist of a basic form with an output field to display 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 entire html now looks like this:

Of course, our talk doesn’t look like a talk 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 talk doesn’t truly do anything right now, so let’s look into that. Very first up we’ll setup jQuery’s ready() and store the significant elements into variables:

So here is what we want to do: Whenever the "Send" Button is pressed, we want our script to send the talk input to the server. Also we need an interval that regulary checks for fresh talk messags 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 mitt fountains 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 very first. We supply the login-data from a file called _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 fat strings into our db.

Make sure to use mysqli\_escape\_string and htmlentities to escape the user input! Otherwise, your talk 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 demonstrate an error when it doesn’t work, and to showcase 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 plain: one column for the time, text and name each plus an id column which increases by itself everytime something gets written, while being our index. The easiest way to achieve this is to come in the following MySQL code in the SQL tab of your PhpMyAdmin:

Now our talk is able to store the input the user comes in on our talk site, but we don’t see it on the talk HTMl site. Time to switch this!

Reading the Database

the fact that PHP only gets executed when the user request the page makes us incapable to simply include the data of the database into our talk site. A way to work around this is having a separate file like "read.php" where we will do this. Later we will flow 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 entire timestamp.

Conclusion

Done! Now our talk will update itself every two hundred fifty milliseconds. Your talk should be working now.

If you have questions regarding this project send me an email, or view the live demo or download the source

Related video: