Macromedia Dreamweaver MX 2004 Demystified

Building a set of master-detail pages is a fairly common dynamic task. Think of a catalog page on which all products are listed and each product entry contains a link to a page of detailed information about that product. Dreamweaver gives you two ways to build master-detail sets: manual and automatic. The manual method isn't all that manual (it doesn't involve any hand-coding ), and it gives you greater control over your layout and setup. But the automatic method is (as its name suggests!) much quicker. We'll look at both methods here.

Master-Detail Sets the Manual Way

In the manual method of building master-detail pages, you create the master and detail page, create recordsets, and link the two pages using dynamic hyperlinks . The details of this procedure are described next .

Creating the Master Page

Create a page to be your main display page. As you should with any dynamic page, plan what information you want to display and how it should be laid out ahead of time. Also consider what you want the link to the detail set to look like. Do you want visitors to click an item's name, its picture, or some other generic link that says something like Click here for more ...? Whether it's a dynamic element or not, the link must be inside the repeating region so that it appears once for every record that gets displayed.

When you've got a plan, build the design framework for the page.

Collect a recordset of information to display, as you normally would for a catalog page, with one extra consideration: Be sure to include the column that functions as the primary key or unique identifier for each item. You'll need it to tell the detail page exactly which record to display. You don't need to display the identifier field anywhere , but it must be collected.

Creating the Detail Page

Repeat the same procedure for the detail page. Start by planning what needs to be displayed and how, and build your design framework. Don't forget to include a link back to the master page. Remember, this page will display only one record at a time, so there's no need for repeating regions or recordset paging controls.

Create a recordset of information to display, again being sure to include the unique identifier or primary key. It's what will connect the two pages.

Linking the Master Page to the Detail Page

Back in the master page, select the item(s) you want to link to the detail page. You need this item to link to the detail page but with a URL parameter that specifies the record to display. Because the parameter will be different for every record, it must be dynamically determined. Create the link this way:

1. In the Property Inspector, click the Browse button next to the Link field. When the Select File dialog box opens, browse to the detail page, but don't close the dialog box yet!

2. In the dialog box, click the Parameters button. When the Parameters dialog box opens, enter the name of the unique identifier field as the parameter name.

3. The parameter value must be dynamically assigned. Click inside the value area of the dialog box and, when the lightning-bolt icon appears, click it. When the Data Source window opens, choose the unique identifier field from the recordset. Click OK as many times as you need to to close all the dialog boxes.

If you examine the Link field at this point, you'll see that dynamic code is tucked in there. If you check out your link in Code view, it will look something like this:

PHP:

<a href="closeup.php?id=<?php echo $row_Recordset1['id']; ?>"> click for close-up</a>

ColdFusion:

<a href="closeup.cfm?id=<cfoutput>#Recordset1.id#</cfoutput>"> click for close-up</a>

ASP.NET:

<a href="closeup.aspx?id=<%# DataSet1.FieldValue("id", Container) %>">click for close up</a>

This is the standard code for a link with a URL parameter:

<a href="closeup.php?id=3">

But server-side code has been inserted in place of the parameter value.

Filtering the Detail Page Recordset Based on the URL Parameter

Now that the master page is passing a parameter, the detail page needs to make use of it. In the detail page, open the recordset for editing (find it in the Server Behaviors panel's list of behaviors, and double-click it). In the Recordset dialog box, set the Filter options to filter the unique identifier field based on the URL parameter (see Figure 23.6). Because you're filtering based on a unique identifier, this recordset will collect only one record.

That's it! One page passes a parameter, the other receives it, and the parameter is dynamically generated.

Exercise 23.2. Building a Master-Detail Page Set

In this exercise, you'll work with an alternative version of the Antiques Barn catalog page, which is template-based and that uses master and detail pages. Before doing this exercise, you should have completed Exercise 23.1, which defines a template for the Antiques Barn site and creates the catalog page.

1. In the chapter_23 folder, open the catalog page ( catalog.cfm and so on). It displays a list of antiques with small pictures of each.

   This is your master page. The design framework is in place, and the recordset has been created. All it needs is a link to the detail page, which you'll set up later.

2. Now for the detail page. Open catalogdetail.php , and apply the main template. That's the framework for the detail page, without dynamic elements.

3. Create a recordset for the document, collecting the basename and id from the stockitems table. These are the only records you need for this page.

4. Delete the bookcase image and insert a dynamic image, using the same basename technique you used in Exercise 23.1 to construct the following file path from dynamic information:

   images/bookcase.jpg

   You need to insert a dynamic image, starting with the basename field as its value and adding images / to the front of the dynamic URL and .jpg to the end.

5. Your detail page is now ready for action.

6. Link the two pages. Open the catalog page, and select the dynamic image placeholder. This is what will link to the detail page.

7. In the Property Inspector, click the Link field's Browse button. When the dialog box opens, browse to the detail page. Then click the Parameters button. When the parameters dialog box opens, enter id as the parameter name. For the value, click in the value field, click the lightning bolt, and choose id from the Data Source dialog box (see Figure 23.7). When you're done, click OK as many times as you need to to close all the dialog boxes.

   Figure 23.7. Assigning a dynamic URL parameter for the Antiques Barn master catalog page.

   The master page now passes a record ID to the detail page. The final step is to alter the detail page recordset so that it uses that record.

8. Open the catalogdetail page. In the Server Behaviors panel, double-click its recordset to open it for editing. Set the Filter options to filter by the ID passed in the URL parameter, as shown in Figure 23.8.

   Figure 23.8. Filtering the recordset for the Antiques Barn detail catalog page.

   To make sure you're collecting only one record at a time, click the Test button in the Recordset dialog box. Dreamweaver asks for a value to use as a default URL parameter. Enter 3, which is the ID of the chandelier. You should see a recordset consisting of only that one record, as shown in Figure 23.9.

   Figure 23.9. Testing the filtered recordset from within the Recordset dialog box.

9. That's it! Save both pages, and upload them to the testing server. Then preview the set.

Working with the Master-Detail Page Set Object (ColdFusion and PHP)

The advantage of manually building master-detail page sets is that you can determine your layout options ahead of time and then fill in the dynamic blanks. The Master-Detail Page Set object, on the other hand, builds the layout for youalthough you can change that layout after the fact. But all the dynamic linking and even recordset paging are built for you with a few mouse clicks, so it's a very quick way to work.

To use the Master-Detail object, do this:

1. Create a blank detail page and then close it.

2. Create a blank master page. You don't need any page content in place.

3. With the master page open, create a recordset that includes all the fields you want to display in both the master and detail pages. Be sure to include the unique identifier field for each record.

4. From the Application Insert bar, choose the Master-Detail Page Set object (or choose Insert > Application Objects > Master-Detail Page Set). The dialog box shown in Figure 23.10 opens. Its options are as follows :

   Figure 23.10. The Master-Detail page Set dialog box.

   • Master page fields The top portion of the dialog box determines what will be displayed in the master page. The master page will be built with a dynamic table displaying all fields listed here, in the order they're listed. Generally, you won't want to display all information in the master page. Remove from the top list any fields you don't want to display there. Also rearrange the list to suit your display needs.

   • Link to detail from You can also determine which item in the master page should function as a link to the detail page. Do you want the user to click the item's name to access the detail page? If so, choose that field from the Link to detail from menu.

   • Pass unique key You need to specify which field is the unique identifier key that will be passed from master to detail to determine what is displayed in that page. Choose the unique identifier field from the Pass unique key menu.

     Also choose how many records at a time to display on the master page. Dreamweaver will insert recordset paging controls as needed.

   • Detail page name and fields In the bottom portion of the dialog box, you set the detail page options. Browse to select the blank detail page you created earlier. Adjust the list of fields to include only those that the detail page should show, in the order you want them shown. The detail page, like the master page, will be built with a dynamic table.

5. When you're done, click OK to create the page set. Dreamweaver puts dynamic tables in both pages, adds recordset paging where needed, and assigns dynamic URL parameters to link between the two pages, as shown in Figure 23.11. Of course, the result isn't formatted very prettily, but you can dress it up and rearrange it all you like at this point.

   Figure 23.11. Master and detail pages as built by the Master-Detail Page Set object.