jQuery MessageBoard

Lets use jQuery and AJAX in combination with a database to update and retrieve information without refreshing the page. Here we will combine it all: XHTML, CSS, PHP, jQuery, AJAX, and MySQL for a fully functioning web application. Lets set up the back end first. We will need a database to hold our messages. To set one up, go to MAMP and click on Open Start Page. When the start page opens, click on the PHPmyAdmin tab. If you are on XAMPP instead, click the admin button next to mysql on the control button to get to the same place.

Once you are in PHPmyAdmin, create a new database called messageboard.

Then make a table called messages with 3 fields. for the three fields we just need to create fields for the person's name, the message and a datetime field.

Next, put the mboardSTART folder in your htdocs directory and open the messageboard.php file in Dreamweaver. Currently the file contains just an HTML form. Nothing special. We will first build it just using PHP and MySQL to make sure the back end works, then we will build the front end with jQuery and AJAX technologies.

The first thing we are going to put in this file is the connection script to connect to the database. This is the simplest connection script we can have with PHP. We are not even bothering with any error checking. Go to the code pieces.txt file and copy this chunk of code and put it at the top of the html page on line one (above the tag).

The second piece of code goes at the bottom of the page, after all the HTML. This closes the connection to the database.

This function, written as it is, is rather dangerous, since there is no checking to see if the data entered is malicious at all. Essentially, you check to see if the send button on the form has been pressed. If it has, you take the data that came in the name and message fields and put them into local variables, then you create a query string that will add that data to the next record in the database, then you execute the query with the mysql_query function. Next we need a function that will output the messages that have been entered to the screen. Next, paste in the third piece of code, which is the form processor. It goes at the top of the page, directly after the first piece of code we put in. Probably on line 10.

Get the next piece of code and put it after the form processor function on the page. This function starts with a query that requests all the messages from the database, ordering them by datetime, descending, which will put the newest messages on top. Then we loop through the results, printing out a div tag, a p tag then the name of the person, then the message, then the closing p tag and the closing div tag. After that, we run the process_form() function and close the open php tag.

Put the fifth code piece, which is just one line under the form in the HTML. The get_messages() function must go where we want the messages to actually appear on the page. Under the form seems like a good spot. Ok, lets give this thing a whirl!

Ok, if you don't have any typos, it should be functional. Its not pretty, but you should be able to type into the name field and into the textarea and then submit the content to the database.

If you go back to phpMyAdmin and look at your database you should see records there. You can delete records from here if you want. You will notice that it is possible to add blank records by just clicking the submit button on our form. This is very bad, but we will actually control this with jQuery in a few minutes. Note this is not a full CRUD application, as we can not UPDATE or DELETE. Update would be weird on a message board, but you might think about ways of clearing out old messages.

Next we will create the front end. To do this we will add a bunch of files to our folder. First, duplicate the messageboard.php file twice and name the two copies display.php and process.php. We are going to split out the functions for displaying the records from creating the records. Also we will make use of the other files, including our jQuery.js file, the styles.css file, the script.js file for our own scripts and the index.html file.

On the process.php page, rip out everything except the connection to the database, the process_form() function and the close connection function. If you get confused, I have included the entire script on the code pieces page.

on the display.php page, rip out everything except the connection script, the get_message() function and the close connection script. Again, this is probably not the best coding practice, but we just want to do the minimum to get it to work right now. If you get confused, I included this entire script on the code pieces page.

The HTML file is essentially done. We don't have to do anything to it. I am just going to go through it here to explain everything on the page (which is not much). We have our links to the jQuery library and our own script file. Plus the link to our style sheet page.

The body of my page contains a div called container, a form for entering the posts, and an empty div called messages which will actually contain our messages. Notice the form has no action or method properties set. This is important as that will be handled by jQuery.

The form only has two fields, but there are some important things to note here. We are using labels, and I have one with a class of error, which will be used if someone tries to submit the form with no data at all. Notice my submit button has an ID too.

I set up some very basic styles on the styles.css page. You can add a lot to this later.

Now to make the magic happen. We will start with our document.ready function. Then we hide our error messages, so that when the page loads, we do not see them. Then we will add a click handler to our sent button. This is where we use the id we created for that button. When it is clicked, this anonymous function will run.

When we click the send button, we will first make sure all the error class labels are hiding again, incase any got turned on. Then we put the contents of the name field into a variable called name. Then we check to see if name is empty. If it is, we show the error label and stick the cursor back in that field. The return false is important because that is what will keep users from going on without filling out the field.

We do the same thing for the textarea field for the message. Be sure not to miss anything here if you copy and paste.

The next section, which is still in the click handler for the button, is where the magic happens. First, we create a dataString out of the contents of the two fields, then we use the $.ajax() function to send that data to the form. We want to send it by POST to the process.php file. The next line just clears out the message box so you could type something else in there if you want. Return false is important here because that is what will keep the form from actually trying to send using conventional methods.

At the end of the page, after the document.ready function, I create a new function called loadMessages() which will use the same trick we used before to load the display.php page into the messages div on the index.html page. The last thing I need is a way to trigger this function to happen. To do this, at the top of the script, at the beginning of the document.ready function, I add the setInterval() function which will make the loadMessages() function run every ten seconds.

Here is the whole script. Give her a whirl and see how it goes. If you typed everything correctly it should work. Congratulations on building a web app in a day. Now you can think of ways of improving it and building it out to a better user experience. There are tons of things that could be done.