This tutorial will show you how to create a shoutbox for your website using Dreamweaver CS3 and the Adobe Dreamweaver Developer Toolbox. Before we start this tutorial, I will assume that you know how to setup a XAMPP server and that you also know how to define a website using Dreamweaver. If you don't, then I suggest you have a look at the links below.

• Setting up A Complete WAMP Server
• How to define a site in Dreamweaver

To complete this tutorial, you will need to have Dreamweaver CS3 installed as well as the Adobe Dreamweaver Developer Toolbox extension installed as well.

Download appliction files: shoutbox.zip

A shoutbox is generally a good way for visitor of your site to leave a comment or a quick message and can be a good way for site visitor's to interact with each other. So without further ado, let's start by setting up the databae.

The database I will be using for this tutorial consists of one table and is as follows:

• id_sb - message id
• ip_sb - visitor's ip address
• name_sb - visitor's name
• url_sb - visitor's web address
• message_sb - message submitted by visitor
• date_sb - date message was submitted

CREATE TABLE `shoutbox` (

`id_sb` INT NOT NULL AUTO_INCREMENT ,
`ip_sb` TEXT NOT NULL ,
`name_sb` TEXT NOT NULL ,
`url_sb` TEXT NOT NULL ,
`message_sb` TEXT NOT NULL ,
`date_sb` DATETIME NOT NULL ,
PRIMARY KEY ( `id_sb` )

) TYPE = MYISAM

You can find the scripts needed to create an identical table structure inside the downloaded shoutbox.zip package, in the \db\ folder, as a .sql. Open the database that you connect to from Dreamweaver and create the shoutbox table using the above script. If you prefer, you can create a new database, but that will then require you to define a new site and create a new connection.

Once you have defined your site and created your database connection, we can now begin with creating the pages needed for the shoutbox application. Open up the file called shoutbox.php.

First we will create a recordset to display all the messages, name and links we have received.

• From the Server Behaviours panel, click on (+) and select Recordset.
• Enter the recordset's name as rsShout
• Select your connection
• Select the shoutbox table
• Sort the information by the date starting from the most recent.
• Click on OK to close the window and create the recordset.

On the Bindings panel, expand the rsShouts recordset, and drag name_sb and message_sb onto the open shoutbox.php page. Set the layout to look like something below:

Now highlight that paragraph and apply a repeat region and set it to display all records.

Now we need to create the form that will allow us to enter our messages. From the Develop Toolbox menu bar, select Insert Record From Wizard. Once the dialog box pops up, select your connection and the database table. The primary key will be automatically selected. Set the page to redirect to shoutbox.php.

Click on the Next button to continue to the next step. Here we need to configure our form fields. Set ip_sb and date_sb_sb to be displayed as Text. We need to have name_sb, url_sb as Text Fields. Set message_sb to be displayed as a Text Area. Set the default value for ip_sb as {SERVER.REMOTE_ADDR} and the default value for date_sb as {NOW_DT}.

Click on Next to continue to the next step. Here you can have a choice as to whether to enforce validation. If you do decide to enforce validation, make sure the name, url and message are required before proceeding. When validating urls, make sure you set the Validation format drop down menu to URL. Once done, click on Finish to close the dialog box and create the form.

To finish off the basic application, click on {rsShouts.name_sb} field on the page. Set the link to

In order to prevent messages from filling up the entire screen, I enclosed the repeat region in a DIV and set the style as follows:

border: 1px solid #000;
width: 300px;
height: 200px;
overflow-y:scroll;
padding: 5px;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;

Finally, Press F12 on your keyboard to preview your page and test it. Now that we have a working application.

The next part for this tutorial which I should be writing soon will show use how to use Adobe Spry to submit the form and prevent any unecessary page refreshing.