This feature in the DreamWeaver dynamic application tools is probably the most impressive. It is also a multi-stage process.

The master-detail page can be set up to show items in a catalog (entered into your database) as multiple items on one page. Each item contains a small amount of information about the item, person or a show, etc. The item can then be linked to a detail page that showcases more extensive information about the item.

The beauty of this application is that only 2 pages are created. Since PHP is dynamic, the information about a selected item appears on the same page "detail.php" over and over again by way of a unique ID that is passed from the master.php page to the detail.php page. The Master-Detail wizard contains multiple attributes that designate which information is to be shown on the detail page and from what part of the table.

The Master-Detail application utilizes the same method of data entry as the "Record Insertion" used for entering usernames, passwords and emails, except that this application will allow for more fields in the database table.

Considerations:

• You must be familiar with the "Record Insertion" tutorial from the DreamWeaver tutorials section of this site.
• You will need to create a table in your database that is called items - sql file is included in the files portion of this tutorial.
• You'll need images of the items that will be displayed on your master page which will be linked to your detail page.

What you'll be creating:

• A record insertion page called "additems.php" - similar to the login and password record insertion but with more fields.
• A master page called "master.php" that displays specific brief data about the items in your "catalog."
• A detail page called "detail.php" which displays only one item with expanded information.

Files for this tutorial: Download (zipfile)

This download contains an images directory with a few items from a toy store. It also contains an excel spreadsheet with information about the products; you will copy and paste the cooresponding Excel cells and pasting them into the proper fields in your file called "additems.php." It also contains a file called items.sql which is the structure of your "items" table in your database.

Create Database Table "items"

Once you have unzipped the master_detail.zip folder, you'll find an sql text file called "items.sql."
Log into your hosting control panel (CPanel) and locate the link to PHPMyAdmin - It's usually on the last portion of the MySQL administration link in CPanel. Click PHPMyAdmin.

At this point you want to navigate to the top right side of the PHPMyAdmin interface and locate the "Import" Tab link.

Depending on your version of PHPMyAdmin it may be a hiding on some of the other pages. Try clicking on the Database Name in the left frame of the browser.

CLICK IMPORT

CLICK GO

The result will produce SQL code which builds the table "items" in your database.

Some configurations of PHPMyAdmin will give you an error on this result page. Reload your browser and then click Structure to see if the table "items" exists with the fields as detailed in items.sql.

Here is what your table is capable of:

You have an id number that is automatically generated in ascending increments for each item you enter into the page additems.php which you'll create next.

That id is also the Primary Key of the table

You have a model number that is capable of having 10 places for alphanumerical digits.

There is a name which can be 30 Characters long

The Price of your item with 6 Characters places

A "mini description" of your item that will display on the "master.php" page you'll be creating

A long description for the "detail.php" page

And there is an Image name/location field - Please remember to place the images you download from the zip file into your images directory on your site. When you start to insert records into your additems.php page, you should be typing in images/imagename.extension (images/carseat.jpg)

On To Creating "additems.php"

This is the same process that we used in the "Record Insertion" tutorial, except that there will be more Rows in your HTML table for inserting item data from the Excel spreadsheet into your newly created "items" table in your database.

Open DreamWeaver, create a new PHP page and save it as "additems.php.

Open the databases panel make sure that "inserting" is still in the panel. Click it and then click the tables icon to expand and show your tables. "items" should be right there next to "members."

If you do not have the connection "inserting" shown in your Database panel, refer back to
"Setting up DreamWeaver with MySQL "

The image to the right reflects the attributes needed to be set to create the new record insertion table on the page you'll be saving as "additems.php"

Connection: inserting - same connection

Table: items - same connection different table!

After inserting: inventory.php - this will be just like whoswho.php from the Dynamic Table tutorial. Refer back to that tutorial to create the inventory.php page. Same process, different table.

Highlite the id column from the fields and click the minus sign- we don't need to set item id's, MySQL does that with auto-increment.

CLICK OK

Result:

Create inventory.php just like whoswho.php but with all of the item fields to be displayed in the "Dynamic Tables" application from the "items" table.

Upload "additems.php" , "inventory.php" and the folder "Connections" to your server.

Point your browser to www.yourdomain.com/additems.php

Open up items.xls in Excel and copy and paste the item information for the toys in each of the fields in "additems.php"

Everytime you add an additional item, the inventory page will display the contents of your table called "items."

On To Creating The Master-Detail Pages

Creating the Master-Detail Pages

Now that you have entered in the information about your toys from the Excel spreadsheet into the additems.php page, it's time to upload the 3 images from the Zip file.

Upload the images to your "images" directory. Hopefully, you don't have any files named shrek or globe or they could get overwritten.

Eventhough you created an inventory page that shows the products and field data from your table "items", there is yet a better way to display items from the items table in your database and make the listings "interactive."

Required:

• You will create a new PHP page and save it as "master.php"
• The master.php page must contain a recordset. This is the same process as explained on the DreamWeaver Dynamic Tables tutorial. The main difference is that you will select data from the table "items" and not "members". You may name the recordset "stuff" if you like.

Create new page and save it as "master.php"

Insert A Recordset

The parameters to be set for the Recordset on the master.php:

CLICK OK

The Bindings Panel will activate and show the Recordset "Stuff"

Click the Icon for Master-Detail Pages

THIS IS THE DEFAULT CONDITION OF THE MASTER-DETAIL PAGE SET APPLET

Change some of the parameters:

Master page fields: Remove some of the attributes and leave "name, price, mini_desc and image_loc". When the master catalog page is displayed in the browser, a repeating table will display limited amounts of information about each item.

Link to detail from: When the master page displays all of the items, you have the option of making one of the fields clickable that will go to the detail of that item. In this case, we are making the image a hyperlink to detail.php.

Pass unique key: This is the key that identifies the record to display on the detail.php page. It is passed in the URL so that when the detail.php shows up in the browser, the appropriate item will be displayed.

Show: If you have a multitude of items, you can alter the master page to display as many or as little items as you like. If you have more than 10 items in your database table, DreamWeaver will insert page navigation on the master.php page.

Detail page name: Type in detail.php here. DreamWeaver will automatically create this page when you click ok.

Detail page fields: Just as the master page will show some information from the database table "items" the detail.php page can show more expanded information. This is why you have a mini description that will display on the master.php page.

CLICK OK

DreamWeaver has now created a "detail.php" page (you could have called it anything.php too) as well as inserted repeating dynamic tables in the "master.php" file and a single table with recordset bindings in "detail.php."

Save both of these files and upload them as well as the "Connections" folder to the root directory of your site.

Point your browser to www.mydomain.com/master.php and view your items. Click on the Image hyperlink and you'll be taken to the detail.php page and see only the information about the item you selected from the master page. Go back, click a different item and the same page will show up with different information.

What about the image links?

At this point your database has image locations (URL) of where the images for your "Catalog" exist. In order to show the images instead of the image URL's, you will have to alter the Hyperlink in the master.php code:

<a href="detail.php?recordID=<?php echo $row_stuff['id']; ?>"><?php echo $row_stuff['image_loc']; ?> </a>

Simply highlite the "stuff.img_loc" blue link in your design view and it will reveal itself in the "code view"

In order to show the image you will have to enter some HTML and PHP code.

Here is the breakdown:

1. <a href="detail.php?recordID=<?php echo $row_stuff['id']; ?>"> :: This is the first part of the hyperlink that tells the link where to go which is detail.php. There are other parameters that tell what ID number has been selected and which row from the table "items" to send to detail.php.
2. <?php echo $row_stuff['image_loc']; ?> </a> :: This is the second portion that is telling what information to display from the database table field "image_loc". Since it's just a word, it will display the VARCHAR you entered into the database table.

What you need to type:

Since there is no "img src="" tag, which would display and image, you need to enter the following in front of <?php echo $row_stuff['image_loc']; ?> </a>

Which looks like this: <img src="<?php echo $row_stuff['image_loc']; ?>" /></a>

The complete line should be:

<a href="detail.php?recordID=<?php echo $row_stuff['id']; ?>"><img src="<?php echo $row_stuff['image_loc']; ?>" /></a>

The "wrapping" of this HTML tag around the PHP code signifying where the image exists will convert the text in the database table and treat it as an actual text link. Try it out!

You can alter the img tag to have no border, and you can change the size of the img Height and Width to show a smaller version of the image in the master.php display.

Add this code to the detail.php image location recordset as well so that you see one image for both pages. You can even add an additional field in your database that is called "thumb_image" and upload smaller versions of the images supplied in the ZIP file from this tutorial.