Shoutbox

If you don't know what a ShoutBox is, you can check one out at Deskmod. They're a neat way to let the visitor interact with your website without the hassle of a guestbook. Making your own shoutbox at first might seem hard, but its simple and easy to make. You can see my code that I worked on and made sure worked by right clicking and saving shoutbox.txt. In fact, the one for this tutorial is only 35 lines total. Make a new file and save it as shoutbox.php and put all of the code on this tutorial in the body. Making a shoutbox can all be done with one file, specifically three steps, and you have to work backwards to have it function. First, you must make the submit action, which uploads the name and comments to the mySQL database. Secondly, you must have the display action which displays the comments. Finally, you need the form where the people can add the comments.

Before anything else though, you must make the mySQL database. I decided to add 4 fields to the database: id, name, message, and time. I called the table 'shoutbox' and the database 'news'. You can copy paste this code inside your mySQL database using a program such as PHPMyAdmin, or (type it in by hand if you feel so :) Here is the mySQL code I used:

CREATE TABLE `shoutbox` (
`id` int(11) NOT NULL auto_increment,
`name` text NOT NULL,
`message` longtext NOT NULL,
`time` text NOT NULL,
PRIMARY KEY  (`id`)
) TYPE=MyISAM;

The rest of the code from now down can all be placed on one single page. Here's what we need to do for the first step, for the submit action.

1. First off, connect to the database.
2. If submit is hit, then get the day and time to be stored on the database. You can check out the date function to gain insight on what all we're saving in there.
3. Insert the values of the id, name, comments, and time to the database.

Here it is in PHP:

<?
//the host, name, and password for your mysql
mysql_connect("localhost","username","password");

//select the database
mysql_select_db("news");

if($submit)
{
   //use the PHP date function for the time
   $time=date("h:ia d/j/y");
   
   // inserting it into the shoutbox table which we made in the mysql statements before
   $result=MYSQL_QUERY("INSERT INTO shoutbox (id,name,message,time)".
      "VALUES ('NULL','$name', '$message','$time')");
}
?>

The second part of the Shoutbox is to display all the comments which other people have written. We can use a simple while loop to get all the rows from the mySQL Database:

1. Select the last five messages posted from the shourbox table.
2. Run the while loop while it keeps getting an row.
3. Define each variable from the database and echo it out.

Here it is in PHP:

<?
//returning the last 5 messages
$result = mysql_query("select * from shoutbox order by id desc limit 5");

//the while loop
while($r=mysql_fetch_array($result))
{		
   //getting each variable from the table
   $time=$r["time"]; 
   $id=$r["id"];
   $message=$r["message"];
   $name=$r["name"];
?>
   <? echo $time ?><br>
   <? echo $name ?><br>
   <? echo $message ?><br>
<? } ?>

Finally, you have to write the form action for the shoutbox to load for folks to post. Its not too hard, and sort of self explanatory:

<form action="<? echo $php_self ?>" method="post">
<INPUT TYPE='TEXT' value='name' NAME='name' SIZE=30 maxlength='100'><br>
<INPUT TYPE='TEXT' value='message' NAME='message' SIZE=30 maxlength='100'>
<input type="submit" name="submit" value="submit">
</form>

Alright thats about it. You can see my code that I worked on and made sure worked by right clicking and saving shoutbox.txt. I hope this helps and if you have any questions or comments, feel free to e-mail and we'll help you out :)