Web development tutorial

Tutorial created by Ray Borduin, WebAssist

1 ratings | Sign in to rate this tutorial | View comments

Print tutorial
Share this tutorial

Sometimes you just have to show off what you have. Most often, for us computer folks, all we really have is database tables filled with raw data. Fortunately though, Data Bridge makes it easy to flaunt that data to the world with the beauty known as Repeating Tables.

In this tutorial, we're going cover the basic process of applying Repeating Tables to a page, so we can let everyone see just how great our data is.

We will be using the WebAssist classic Blue Sky Music database for this tutorial, but if you happen to have existing databases ready for use, feel free to plug in your database information in the place of the Blue Sky Music information.

next section

What you need to start:

A dynamic site set up within Dreamweaver
A blank database
Dreamweaver CS3 or later
Data Bridge installed and activated in Dreamweaver
The Blue Sky Music database files, which can be downloaded here

next section

Configure the Database

For those of you that don't have immediate access to a database filled with data, we're going to use the Blue Sky Music database. This will give us tables filled with data that can easily be used for Repeating Tables.

Download the Blue Sky Music zip file.
Extract the files to an easily accessable directory.
Open your MySQL database manager.
If your manager has an Import feature, use that with the blue_sky_music.sql file and skip to the last step. Otherwise, continue with the following steps.
Open the blue_sky_music.sql file.
Copy the contents of the file.
In your blank database, run the Blue Sky Music SQL query.
Create a Connection in your Dreamweaver site to the newly populated database. For this tutorial, we'll name it 'blue_sky'.

next section

Create a Recordset

Now that we have the database, we're going to need a page with a recordset on it to pull the data from the database to display. For this example we're using the items demo data that's populated with several albums and their details.

Create a new PHP page in Dreamweaver called itemlist.php
In the menu bar, click Window > Bindings.
In the Bindings Window, click the Add Binding ( ) button.
Select Recordset (Query).
Make sure the Recordset dialog is set to Advanced mode by clicking the 'Advanced...' button.
Enter 'rsItems' as the name of the Recordset.
Make sure the correct connection (e.g. blue_sky) is selected.
This will populate the Database items box with everything in your database.
Expand the Tables list.
Select 'items' from the expanded tables.
Click the SELECT button.
This will add the following SQL query to the SQL box, which pulls all available items from the item list in the database:
```
SELECT *
FROM items
```
Click the OK button to add the Recordset to your page.
Save your page.

Now we're pulling all the data from the items table in the database.

next section

Add some style to the page

We need to add some basic styles to the page to help you see how Repeating Tables is working once we have it up and running. These will add different background colors to the even and odd rows once the data is being displayed.

Add a style to the page. You can enter it manually by pasting the following code into the <head> section of your site's source:
```
<style type="text/css">
</style>
```
Now that we have the style, add a class selector for the class even within the style tags.
This will make all rows on the page with the class even have a background color of #cccccc
```
.even {
background-color: #cccccc;
}
```
Now we're going to do the same thing, but with a class selector for the class odd.
Again, this is to give all rows on the page with the odd class a background of #999999
```
.odd {
background-color: #999999;
}
```
Save the page

Now we can tell which rows are which.

next section

Apply Repeating Tables

Now that you have the records your Repeating Tables business is going to be pulling its information from, and the styles to make your page beautiful, you're going to need to actually apply the Repeating Tables Server Behavior to your page.

Click WebAssist > Database > Repeating Table.
Make sure your recordset is selected in the Recordset drop down.
Set the Rows drop down to 'All records'.
This will display as many rows as needed to show all of your data.
Set the Columns to 5.
This will display 5 columns worth of data before dropping down to the next row
Select the 'even' style from the Even row style drop down.
Select the 'odd style' from the Odd row style drop down.
Click the 'None' option under the Header.
Click OK.
Save your page.

You can now see the Repeated Table added to the page with the text "Your Repeated Content". It only looks like one table cell, but it will be repeated for each element in the database.

next section

Add content to be repeated

Our last step is to add the content we want shown to the repeated table cell in the form of a recordset binding.

Select the text [Your Repeated Content]
In the Bindings Panel, expand the recordset we created earlier
Click on the ItemName binding
Drag the binding over the selected [Your Repeated Content] text
This will replace the selected text with the binding
Save your page

Voil?! You've now created a table that repeats as many cell as needed to display all the entries in your recordset binding. You should preview the page and make sure everything worked, then bask in your own glory. You've earned it.

What to do next...

I've been watching you, and I see that you're getting pretty darn good at this web development stuff. You should sharpen your skills even more. Maybe add additional styling to the displayed rows, or add a nice header to your table. The sky is the limit now that you know Repeating Tables! ... Well, the sky being anything related to Repeating Tables, but you catch my drift.

Reviews and comments

Comments will be sent to the author of this tutorial and may not be answered immediately. For general help from WebAssist, please visit technical support.

Sign in to add comments

1 ratings | Sign in to rate this tutorial