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.

- Tutorial written by Scrowler

Pages (3): [1] 2 3 Next>

Automatic Translations: