Since I am doing this locally on my machine For this to work you will need to have the software below installed. Also if you want to apply this to your live web site, your hosting company need to run PHP MYSQL

1. WAMP5 : http://www.wampserver.com/en/index.php

2. EMS SQL Manager for MySQL (WAMP5 comes with a sql manager, you can use it, or which ever one you are familiar with. 

Download and install both software, if you installed wamp5, by default it would create a folder located in C:\wamp\www\, create two more folders inside the www\ directory called localroot and the other webroot.

Part2: Creating the database and tables.

 Below is the table that I created, The database name that I used was shopsite_db but you can use what ever you want. Run the script below to recreate the table.

CREATE TABLE `table1` (
`tb_id` int(11) NOT NULL auto_increment,
`tb_items` varchar(255) default NULL,
`tb_desc` varchar(255) default NULL,
`tb_img` varchar(255) default NULL,
`tb_cat` varchar(255) default NULL,
PRIMARY KEY (`tb_id`)
) ENGINE=MyISAM AUTO_INCREMENT=13 DEFAULT CHARSET=latin1

fill in the information shown below. This is what will be displayed when your users click on a specific link. Your image directory may be different. The important part is the tb_cat, this is how we will be filtering the pages to display its items.  The image I took from Drjays.com.

Click here to download the images.

This is how your table should look, with the data entered. The image location will be different depending on where you place the images.

Well we are finished with the database part.

Part3: Setting up Dreamweaver and creating the form.
Start up Dreamweaver and click New Site Manage Sites..

and click New Site. Click on the Advanced Tab and you will see the window below. Click on Local Info and fill in the information shown.

Local Info

Remote Info

Testing Server

When you are finished click ok, Done

Part4: Connecting to the database.
Click File New... and click on Dynamic Page PHP and click Create.

Click on the Shown in the databases tab and click on MySQL Connection.

With that the window below will come up. Fill in the information shown below.

This information has to match up with what you created using EMS or phpMyAdmin

Next click on Select, select the shopsite_db database and click ok twice. Shopsite_db is the database that i create yours might be different.

Part5: Creating the pages.
Create a new php page, hit Ctrl+S and save your site as index.php. Create the three text shown below.

Jackets | Shirts | Pants 

Press Ctrl+N to create a new php pages, save this page as jacket. On your Jacket page create the table shown below.

Table Code: if you are have a hard time creating it.

<table width="413" border="0" align="center" cellpadding="3" cellspacing="3">
<tr>
<th width="122" bgcolor="#97C0FF" scope="col"><span class="style1">Image</span></th>
<th width="83" bgcolor="#97C0FF" scope="col"><span class="style1">Items</span></th>
<th width="178" bgcolor="#97C0FF" scope="col"><span class="style1">Description</span></th>
</tr>
<tr>
<th bgcolor="#EEEEEE" scope="col">&nbsp;</th>
<th bgcolor="#EEEEEE" scope="col">&nbsp;</th>
<th bgcolor="#EEEEEE" scope="col">&nbsp;</th>
</tr>
</table>

Click on Windows   Bindings as shown below.

Click on Bindings and create a new Recordset by clicking on the . Create the Recordset according to the image.

Click ok.

Click on the (+) next Recordset, you will see the fields shown below.

Click inside the rectangle to the left and we will add an image. To add an image click on image icon and click on Data Source. Select tb_img

Click ok.

Now just drag the names over to the table from the recordset. At this point your table should look similar to what i have below.

Click on your table to select it.

Click on Server Behaviors

Click on the  , select Repeat Region, here is where you can set the number of items to display on your page. I chose all records since I only have 4 items in each category.

Go back to your index.php page, with the Jackets, Shirts, Pants  text. Select Jackets by double clicking on it. In the Properties window next to the link bar you will see a folder clikc on it.

In the window that came up select the Jackets.php page you will also see the option below

select Parameters, and type in id for the name and Jacket for the value as shown below.

Save your page and view it.

For the different options, like the Shirts and Pants. All you have to do is create the corresponding page a Shirts, Pants php page and repeat Part5: Creating the pages. Instead of Jacket  as the value change this to  Pants for the pants page and Shirt for its page.

Finished:
Well that is it, hope it came out to what you expected. If you have any question or comment about this tutorial, feel free to post a message on the forum.

This Tutorial was Created By Mark
© 2007 pixeldigest.com. All Rights Reserved.

CSS mouse over Table

In this tutorial I will teach you how to create a CSS mouse over Table effect to change the background color of a table using Dreamweaver.
... Read more