 |
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.
// calling session_start() the function which starts our
authentication session
session_start();
// connecting to mysql server
$l = mysql_connect ( "localhost" , "user" , "pass" ) or die("Error
connecting:<BR><BR>".mysql_error());
mysql_select_db( "user" ) or die("Error getting db:<BR><BR>".mysql_error());
|
This is the main building block of both scripts. It
starts all session registering or management with session_start(), and then
selects and connects to
our database. You should, of course, edit the mySQL connectivity lines to reflect your
own mySQL
settings.
function getShouts()
{
echo '<div align="center">
<table width="150" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
';
$query = mysql_query("SELECT * FROM shouts ORDER BY id DESC LIMIT
10") or die(mysql_error());
while ($row = mysql_fetch_array($query) )
{
$name = stripslashes($row['Name']);
$contact = stripslashes($row['Contact']);
$shout = stripslashes($row['Shout']);
if(empty($contact))
{
echo '<p><span class="author">'.$name.'</span> - <span
class="shout">'.$shout.'</span></p>';
} else {
echo '<p><span class="author"><a href="'.$contact.'"
target="_blank">'.$name.'</a></span> - <span
class="shout">'.$shout.'</span></p>';
} // if empty contact
} // while row mysqlfetcharray query
echo '<br><br>';
echo '
</td>
</tr>
<tr>
<td height="10"> </td>
<form name="shout" method="post" action="shout.php">
<div align="center">
<input name="name" type="text" id="name" value="Name" size="25"
maxlength="10"><br>
<input name="contact" type="text" id="contact" value="http://"
size="25"><br>
<input name="message" type="text" id="message" value="Message"
size="25"><br>
<input name="shout" type="submit" id="shout" value="Shout!">
</div>
</form>
</td>
</tr>
</table>
</div>
';
} // function getshouts
|
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
|
|
TUTORIALS SUBMENU ---->
