The Complete Shoutbox Tutorial Tutorial Author - Scrowler (http://forums.biorust.com/member.php?userid=66)

Now that you know the basics of PHP and MySQL connectivity, its time to add a little interaction with this cool little applet that allows your users to leave short messages - a system commonly referred to as a shoutbox.  In this tutorial I will detail everything you need to know about making your very own shoutbox, right down from the HTML form, to the smilie emoticon configuration and anti-spam measures.

You will need the following to be able to complete this tutorial:

• A PHP enabled webserver.
• A mySQL database.
• An hour of free time.
• Sessions enabled.
• File uploads enabled.

Getting Started
As a first step we should think about the layout and size of our shoutbox - 150px wide and 500px high is just about right.  I'll refrain from using an iframe in my example because I really don't like them.   We'll also give the shoutbox a 10 entry display limit (i.e. the latest 10 entries will display - the rest will be hidden).   With these considerations aside, we can start by setting up two mySQL tables in our database: shouts and smilies.

shouts has 4 fields:
- id, int(11), auto_increment, PRIMARY
- Name, TEXT
- Shout, TEXT

- Contact, TEXT

smilies has 4 fields:
- id, int(11, auto_increment, PRIMARY
- Symbol, VARCHAR(4)
- URL, TEXT
- Alt, TEXT

If you don't know what this formatting means, int is the type of field, the number in brackets is the size, auto_increment is a feature, and PRIMARY is a type, defining it as unique. Text is a field type, as is VARCHAR, and the number in brackets again is the field length.

With these tables in place you should create your shoutbox directory, and then a subdirectory off it called smilies. CHMOD it to 777 (i.e. all permissions). If you don't know what this means or can't manage it, contact me using the information at the end of this tutorial.

Breakdown of shout.php
There are two pages in our script, shout.php and admin.php - both of which are downloadable here. You can, of course, just grab the scripts and get the shoutbox working without reading the rest of this tutorial, but that would be no fun at all.   For all those people actually interested in learning the workings of this script, though, I'll first break down shout.php and I’ll explain how it works.

This is probably the most important function for the whole script, as it processes and displays the shouts. First of all, this function selects the newest 10 shouts by ordering them by id in descending order. It then cycles through and displays the records. The author and message tags have SPAN classes around them, but I haven’t defined the applicable CSS tags. If you wish to define them, go to line 87 of shout.php where it says /* STARTING THE MAIN SCRIPT NOW */, and add the following code below it:

echo ‘<link href="yourfile.css" rel="stylesheet" type="text/css">’;

In yourfile.css add two classes: author and shout, which are self explanatory as to where they will appear. This will be very useful when you want to format your shouts cohesively.

Now, back to our function. In addition to what I said earlier, it removes the slashes from our database results (because we added some when we posted them), and it checks to see whether or not the contact variable was empty when the user posted. If the user did not specify any contact information, a plain name is displayed without a hyperlink.  If the opposite happens, their name is enclosed within a nice big hyperlink instead.

This is a rather large function, but there's no need to panic as its pretty simple in operation, and shows off a couple of anti-spam functions too. As you can probably guess, this function processes the shout submissions and puts them into the database, after replacing smilie symbols with user-defined and uploaded images (see admin.php). Before it does this, though, it checks that the user actually came from the form, which is a useful anti-spam feature and stops some degree of remote hijacking. After this, it checks that all the data fields have been filled in properly on the form and displays a nice big error message if the user doesn't fill out their name or a shout. With all of the checking out of the way, our function then gets all the smilies out of the database, replaces the applicable ones in the shout message, and finally adds slashes before passing it on to be processed.  The shout is then processed and added to the database.

As a final anti-spam measure, the script sets a session to indicate that the user has already posted a message. To post a second message the user would have then to restart their browser.

That’s the shout.php file out of the way! Now we can move onto the admin.php file that allows us to add/delete the shouts, add new smilies, etc.

Breakdown of admin.php
We can skip the “building block” because it’s the same as the one at the start of shout.php. The first block of code in our admin.php file defines the login credentials, i.e. the username and password. Pretty simple really: