Building a Detail Page


The last step in building the master/detail page set is to create the detail page. First, you create a new dynamic page and define a recordset for that page. The detail page recordset usually includes more fields than the master page. Then you add a filter to the recordset so that you can use the URL parameter you added to the master page in the preceding task to find a unique record from the detail page recordset. Finally, you add dynamic text fields from the detail recordset for the fields you want to display on the detail page.

To create a detail page:

1.

Open a new ColdFusion page in Dreamweaver (File > New > Dynamic page > ColdFusion). Save the page as detail_cafe.cfm, or the name that you gave the page when you created the link in Step 3 of the previous task.

2.

In the Application panel group, click the Bindings tab to access the Bindings panel.

3.

Click the plus button, and from the menu choose Recordset (Query) (Figure 10.14).

Figure 10.14. Choose Recordset (Query) from the Bindings panel menu to open the Recordset dialog and create a new recordset.


The Recordset dialog appears (Figure 10.15).

Figure 10.15. Create a recordset for the detail page in the Recordset dialog.


4.

In the Name field, enter a name for the recordset.

Since this recordset is for a detail page using the cafetownsend database, we named our recordset cafeDetail.

5.

From the Data Source drop-down list, select the name for your connection to the sample cafetownsend database. Our connection is named connTownsend.

If you're using ASP or PHP, this field will be called Connection instead of Data Source.

6.

In the User Name and Password fields, enter a user name and password if required by your database administrator. Otherwise, leave these two fields blank.

7.

From the Table drop-down list, choose LOCATIONS.

8.

In the Columns section, choose the Selected radio button, and then select the LOCATION_NAME, CITY, STATE_COUNTRY, TELEPHONE, and FAX fields that appear in the box below the radio button.

You've added these five fields from the LOCATIONS table to your recordset.

9.

Click OK in the Recordset dialog to save the recordset and close the dialog. Save the page.

In the next task, you'll add a filter to the recordset in order to use the URL parameter from the master page to identify a unique record.

To filter the detail page recordset:

1.

Open detail_cafe.cfm or the dynamic page you created in the previous task.

2.

In the Application panel group, click the Bindings tab to access the Bindings panel.

3.

Double-click the cafe recordset to open the Recordset dialog (Figure 10.15).

4.

In the Filter section, choose CODE from the drop-down list (Figure 10.16). Then, from the drop-down list on the right, choose the equals sign (=).

Figure 10.16. In the Filter section, use the URL Parameter from the master page to specify a unique record in the detail page.


You specify which field should be used (CODE) and how the data in the field should be evaluated. In this case, we want the CODE to be equal to a certain value, so we use the equals sign (=). You'll finish creating the filter in the next step.

5.

From the drop-down list in the lower left of the Filter section, choose URL Parameter. In the field to the right enter recordNum.

Now the filter is complete. It specifies that you want to include records where the value for CODE is equal to the value of the URL parameter named recordNum that's included in the link on the master page. Since this is a unique value for each record, there will be only one record in the detail page recordset that's associated with each link that displays on the master page.

The URL parameter now appears on the Bindings panel (Figure 10.17). If you're using ASP or PHP, the URL parameter doesn't appear in the Bindings panel. Instead, in PHP, the URL parameter is listed in the Server Behaviors panel as a Dynamic Attribute. In ASP, the URL parameter is included in the Server Behaviors panel as Go to Detail Page.

Figure 10.17. If you're using ColdFusion, the name of the URL Parameter (recordNum) appears on the Bindings panel.


6.

Click the Test button in the Recordset dialog to preview the recordset data.

Because you're using a URL parameter in the filter, the Please Provide a Test Value dialog appears (Figure 10.18).

Figure 10.18. Enter a value for the recordNum URL Parameter in the Please Provide a Test Value dialog. The value should be the same as the CODE field value for the record you want to include, such as MUC, for the Munich record.


7.

Enter any value from the CODE fieldfor example, MUC, for the Munich airport. Click OK.

The Test SQL Statement window displays the single record that contains this value for CODE, the record for the Franz-Josef-Strauss airport in Munich (Figure 10.19).

Figure 10.19. The Test SQL Statement window displays the recordset data from the single record that has a value of MUC for the CODE field.


8.

Click OK to close the Test SQL Statement window, and then click OK in the Recordset dialog to close it. Save the page.

In the next task, you'll add dynamic text fields to display the data from the recordset on the detail page, and complete the master/detail page set.

To add dynamic text fields to the detail page:

1.

Open detail_cafe.cfm or the dynamic page you created in the previous task.

2.

In the Application panel group, click the Bindings tab to access the Bindings panel.

3.

Click the plus button to the left of Recordset (cafeDetail) to expand the recordset and display the field names (Figure 10.20).

Figure 10.20. A list of the recordset fields displays on the Bindings panel when you expand the recordset.


4.

Select the LOCATION_NAME field, and drag it onto the page in Design view.

A placeholder for dynamic text is added to the page (Figure 10.21). The placeholder format is recordsetName.fieldName.

Figure 10.21. Placeholders for the dynamic text fields show in Design view.


5.

Repeat Step 4 for the rest of the fields in the cafeDetail recordset.

You can display the detail page data in a table, as an HTML list, or as lines of text separated by a br tag. We used lines of text separated by a br tag, and added HTML text in front of the phone and fax placeholders to label the Phone and Fax information on the page (Figure 10.21).

6.

In the Document window, choose Code view, and find the HTML title tags near the top of the page. Select the content between the opening and closing title tags, and then select the LOCATION_NAME field on the Bindings panel. Drag the LOCATION_NAME field to the selected area in the Code view window (between the opening and closing title tags).

The LOCATION_NAME placeholder (Figure 10.22) will dynamically supply the title for the page based on the value of LOCATION_NAME in the detail page record.

Figure 10.22. The LOCATION_NAME placeholder between the title tags dynamically supplies a value for the page title when the detail page is opened.


7.

Save the page.

The master/detail page set is now complete.

8.

Preview the master page (Figure 10.23) in a browser (File > Preview in Browser), and click one of the master page links to select a detail page (Figure 10.24). On the detail page, the URL parameter can be seen in the browser address bar, and the value of LOCATION_NAME displays in the browser title bar.

Figure 10.23. A preview of the master page displays in a browser window (Mozilla Firefox).


Figure 10.24. The detail page for the Frankfurt airport location includes a URL parameter in the browser address bar and the LOCATION_NAME value in the browser title bar.


You can add additional design or formatting to the master and detail pages. We added graphics from the cafe_townsend images folder (Dreamweaver 8 > Tutorial_assets > cafe_townsend > images), as well as text formatting and a background color.




Macromedia Dreamweaver 8 Advanced for Windows and Macintosh. Visual Quickpro Guide
Macromedia Dreamweaver 8 Advanced for Windows and Macintosh: Visual QuickPro Guide
ISBN: 0321384024
EAN: 2147483647
Year: 2004
Pages: 129
Authors: Lucinda Dykes

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net