Transcript Presentation

Improved Message Board
There are two main things to fix on the Ajax Message Board:
1. I want to load only the new messages, rather than all the messages
every time.
2. I want to delete old messages out of my database, so it does not get
filled with junk.
My approach to tackling the first issue has two parts. My display.php page
currently displays all the records from the database. I really only want it to
display one record, specifically the next record to display after the one I got
last.
Then I need to figure out how I can get that one record and append it to my
index page at the top of other messages that have come in. I know that
jQuery has an append() method that I can use, so I figure that should be
easier to solve. So lets fix that up first.
To experiment with this, we will go back to the dice game.
For the sake of the experiment, I am going to simplify the PHP in the dice
game here. Before we had two sets of rolls, one for house and one for player.
Now I just want one set printed in a div.
The script for our dice game changes to this. The key here is we are no longer
using the load() method. Instead we are using the $.ajax() function.
The important thing here is that we set the URL to our dicegame.php and we set
async to false and we grab the actual text of the page with .responseText. This text
will get assigned to a variable which we can then prepend a the front of the #game
div.
We can even make our dice appear with a fade animation. We hide the first
div in the #game div and then fade it in over two seconds.
That is it. Half of our first problem solved. Now on to make the display page
show only the message you need.
It's really easy to make our loadMessages() function look like the one from
the dice game. I change the URL to the display.php and the name of the
div to the #messages div.
The only other difference is that if there is no new messages in the last two
seconds, our display.php page will be completely empty. There is no
reason to try to display that, so I put a conditional that checks to see if
there is anything there to display.
Ok, for the database, this is what we want: When you first come to the
page, get the last comment entered into the database and display it. We
can do this by making an auto increment field and write a sql statement
that goes to the database, gets the records, sorts them by ID then limits
the results to one record. That will get us the record with the highest ID
number, or the most recent record.
Then each time the page is called (which happens automatically behind
the scenes every two seconds), we need to see if there is a new record
with an ID number one increment higher than the last time we checked.
If there is, load it.
In PHP we can use $_SESSION variables to remember stuff from one
load to the next. So we will make use of that to remember the last record
we got.
When there is an new record, we increment the $_SESSION variable so
that next time we know to look for another new record.
The first thing to do is to is add an id field to the database and make it auto
increment.
To do this, go back to phpMyAdmin and click your database on the left,
then the messages table. Then add 1 field at the BEGINNING of the
table.
Click Go.
Set the field to a type of int and auto increment.
While we are here, lets delete out all the old messages. To do that click Browse,
select all the messages and delete them.
Next, to get this working, as before, I will just work with the backend on a page called
messageboard.php, which has both the submit form and the display of messages on
it. We will not use this page in the final application, but it is useful to be sure the
database is doing exactly what we want.
On messageboard.php we will need to use
sessions, so we put the session_start() at the
top of the page.
I am also going to have some code so that I
can kill sessions and start new ones.
Further down on the page I add a couple of
links. One to kill the session, the other to just
load the page without the get variable set.
I put these just above the input form. I also
throw on there something that allows me to
see the ID number of the last record.
Just below the database connection part of the page, I added
some code to check to see if it is a new session. If it is, we set a
session variable to the value of the ID number of the last record
entered into the database.
Our get_messages
function changes so that
we are only getting one
message. The message
that matches our lastID
session variable.
If we get a hit, we display
it and increment the
session variable.
This is the part that is
really clever, because
whoever is accessing the
database, at whatever
point gets each message
from the time they first
loaded the board.
When I load the page, I get my links and message number 58. If I enter in a new
message. I will get that one because when I got this message the counter got
incremented.
Here is the next message.
If I click the fresh page load link, I get
no message. Seems weird, but this is
actually the behavior we want.
Ultimately our display page will get hit
every two seconds by every visitor. But
we only want to show a message if
there is a new one.
If I enter another message, you will notice
the counter has not incremented. We are
still waiting for message number 60 and
now it is here.
If I kill the session we are back to the
beginning, just getting the latest message
from the database.
Now that we have it working, we just need to
move the right parts to our display.php page.
We need the session start bit.
We need the bit where we set the session variable.
and we need our new version of the get_messages function
We have solved the first part of our problem. The second part was to delete
old records from our database. That is easy and we can do that by making a
little modification to our process.php page.
This modification of the process_form() function will get the last ID of the last
record entered, subtract 20 from it, then delete everything from the database
with an ID of less than that number. That leaves us with 20 records in our
database. This happens every time a new record is added.
For safety, we are going to use this function to cleanse data before
putting it into the database.
That means we need to update our processing function just a little more,
to run the raw data from the form through mysql_prep() and then reassign it back to the same variables.
The very last thing I added to my script.js page was a little
bit of code towards the top of my document ready function
that makes it possible to register a press of the enter or
return key on the keyboard as clicking the send message
button. This seems to work well across browsers.
That's it. We are done! Enjoy!