Ever wanted to have a shoutbox on the side of your site? Or maybe a chat room? Great! In this tutorial I'm going to show you how to do just that. At the end, you'll have a front end which will have a form to add a message, and a window to show the latest entry's.
You'll also have an admin area to remove bad posts, however this will be covered in part two, which will be added soon!
Ok, so our first step. Create a folder to do this project in, you'll need access to a web server with PHP and MySQL. If you dont have one, you can download free ready-to-go servers for your own computer. Google the term WAMP (Windows users), LAMP (Linux users) or MAMP (Mac OS X users). Once you've got your server, and your folders created your ready to go.
Create a new file in the folder. Ours is called simply 'index.php'. Open it up with your favorite code editor (I.E Notepad, Dreamweaver, etc) and place a basic HTML layout in it like this:
This will form the page for our script, you can of course edit this and add extra content and styles, however for this tutorial, we're keeping it simple ;)
Next, we need to setup our database connection. However first, we need a database so open PHPMyAdmin and make a new database....call it what you like, ours was called 'shoutbox_tutorial'.
Once its created, we need a table thats going to store all those posts in the shoutbox. We're calling this simply 'shoutbox' and it will have 5 fields. These are:
id
username
comment
dateline
ipaddr
I think its pretty self explanatory what each of the fields are. Heres how our structure looks:
CREATE TABLE `shoutbox` (
`id` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 50 ) NOT NULL ,
`comment` TEXT NOT NULL ,
`dateline` TIMESTAMP NOT NULL ,
`ipaddr` VARCHAR( 15 ) NOT NULL
) ENGINE = MYISAM ;
Ok, now onto the connection. The script uses a standard PHP function to connect to our database, this allows the data to be sent/received via forms and such in the script.
The above shows how your connection should look, the 'mysql_connect' function has three options. The first is the host (which is usually 'localhost' unless you use a provider that uses separate sql servers), the second is the username and the third, the password.
The mysql_select_db line contains the database name. You need to make sure your user has the appropriate permissions on the database you are connecting to, otherwise you'll have problems!
Next, we're going to create an if statement, this will contain the list of posts, which will be refreshed ever 6 seconds to get the latest data from the database.
It will basically connect, check for new posts, and output them. To prevent there being too many overheads, I've limited the query to allow only the last 25 posts to show. I would advise no more than this, as thats 25 queries, every 6 seconds from each user!
Heres how ours looks at this point with the if statement and the query:
$sql=mysql_query("SELECT * FROM shoutbox ORDER BY id DESC LIMIT 25");
}else {
// We've not done this bit yet!
}
?>
Ok, that query's not doing much at the moment. We're now going to fetch the details from each post using a "while" statement. This is a loop that will pick up all 25 of the latest posts and dump them to the screen.
<?php
while($r=mysql_fetch_array($sql)) {
}
?>
Inside the above code, we'll use the "$r" variable to gain the information from the database, format it, and then show it!
I decided to format it like so:
[01st Jan 13:00] Username:
The comment goes here
Quite simple, and easy to read :)
This is how our loop now looks:
<?php
while($r=mysql_fetch_array($sql)) {
// Lets fetch the details from the database shall we!
$username = stripslashes($r['username']);
$dateline = stripslashes(date("jS M G:i", $r['dateline']));
$comment = stripslashes(strip_tags($r['comment']));
// We dont need the IP or ID for this part, so lets not bother fetching useless information.
Now, we want this age to refresh every 6 seconds, so it gets the latest shouts/posts. To do this we use a META refresh tag. As long as its 'echoed' and is within the if statement, it will work...just don't put it within the while statement.
For this tutorial, I put it just before the closing tags of the if statement, right before the "}else {". Heres the code:
Great! We're done with the fetching part. Now we need to do the 'else' statement, which will contain the form to add a comment, as well as a frame to show the latest shouts.
We're going to start off by creating another if statement that will process the form:
Now our form is done, and working, we're going to add the iframe to the page, this shows all the results, and is reloaded every 6 seconds. I wanted it above the form so I placed the code just before the form's if statement. I also used a table to enclose all the content.
And we're done! Well, the front-end at least. I've placed a copy of the entire code on the next page, just in case you missed anything! I'll be posting part two at a later date, which will show you how to create an admin area to manage your shoutbox or chatroom!
