14. Building Dynamic Pages with Data

Dreamweaver has built-in features that help you build rich, dynamic, data-driven webpages using simple point-and-click tools.

Building pages with PHP

In Lesson 13, “Working with Online Data,” you learned how to select a server model, set up a testing server, and connect to an online database. Dreamweaver makes it easy to access this data to create dynamic content.

Creating a recordset

The following exercises assume you have already completed Lesson 13 successfully and have established a live connection to your database. The next step in the process of generating dynamic content is to create a recordset. A recordset is an array of information pulled from one or more tables in your database in response to a question posed by code in the webpage. The code that asks the question is written in Structured Query Language (SQL).

The question, or query, can be as simple as “Show me all the events in the Events table” or as complex as “Show me the events in the table that occur after May 1st and cost less than $10 in descending alphabetical order by name.” This query can be hardwired into the page so it always shows the same results. Frequently, the query itself is also dynamic—created by the user by clicking checkboxes or radio buttons, choosing from menus, or typing into a text field (as you do on Google and Yahoo).

Like ASP, ColdFusion, and PHP, SQL is a robust language with its own terms, structure, and syntax. Dreamweaver can help you write most of the statements you’ll ever need, but to perform complex data routines you may need to hire a professional consultant or learn some SQL yourself. Adobe provides a good SQL primer at tinyurl.com/sql-primer, or you can check out tinyurl.com/sql-tutorial for the SQL tutorial offered by W3Schools.

In this exercise, you’ll re-create the 2012 events calendar dynamically by using a table from your current database connection.

1. Open events.html from the site root folder.

The file contains two tables of two rows each, complete with Spry data sets and placeholders. Instead of starting from scratch, you can use most of the existing components for the PHP-based workflow.

2. Examine the Databases panel. If necessary, select Window > Databases to open the panel.

The Local_PHP database connection you created in Lesson 13 is not visible. If you open the Connection menu in the Bindings panel, you will see only a Spry Data Set option. At the moment, you couldn’t create a database connection even if you wanted to. That’s because the Events page uses the extension .html, which is compatible only with the dynamic server model Ajax (Spry). To get the page ready to support the desired database connection, you have to choose the proper document type.

3. Click the link that appears in Databases panel item #2: “Choose a document type.”

The Choose Document Type dialog box appears.

4. Select PHP from the pull-down menu and click OK.

Dreamweaver changes the extension of the file to .php. The database connection Local_PHP, which was defined in Lesson 13, should now appear in the panel. It should appear automatically whenever you are working with a PHP-based page.

5. Save the file as events.php.

Each server model may use one or more specific extensions. For example, ASP uses the extensions .asp and .aspx. ColdFusion uses the extensions .cfm, .cfml, and .cfc. Always use the extension appropriate for your server model and application.

6. Display the Bindings panel. Click the plus () icon at the top of the Bindings panel. Choose Recordset (Query) from the pop-up menu.

The Recordset dialog box appears. The current database connection should appear in the Connection menu, by default. If you have more than one database connection, you will have to select the desired database from this menu first.

7. Select the Local_PHP connection from the Connection menu and click the Simple button, if necessary.

By selecting options within this dialog box, Dreamweaver enables you to write basic SQL statements without having to know a single line of the SQL language. The Advanced version of the Recordset dialog box permits you to create more-complex SQL statements.

8. In the Name field, enter rs_events.

This field creates the name of the recordset that will be referenced in the query.

9. From the Table menu, choose events.

This selection identifies the table from which the data will be retrieved.

10. If necessary, click the All option in the Columns section.

This option indicates that you want to retrieve data from all columns, or fields, in the table. By default, the query will return all events from the data table.

11. Click the Test button.

If everything works properly, the Test SQL Statement dialog box will appear displaying the results from the query you just constructed. If you don’t see any data or if an error message appears, it could mean that the table has no records that meet your search criteria or that you have to troubleshoot your database, database connection, or testing server configuration.

In this case, the test window is showing all records in the Events table, even events that may have passed already. But who wants to see events that have already passed? No problem; one of the advantages of using a database and a dynamic PHP workflow is that you can filter out data that isn’t relevant to the user or query. For example, let’s set up the recordset to show only dates in the future.

12. Click OK to close the Test SQL Statement dialog box and return to the Recordset dialog box.

13. In the Filter section, in the left column choose event_date.

Choose >= in the right column.

Choose Entered Value in the next row.

Then, enter the current date in the format ‘yyyy-m-d’ in the open field. Be sure to add single quotes around the date.

The Filter section refines the search by targeting specific data and excluding others. The options you entered are requesting a list of events from the table that take place today or in the future. Events scheduled prior to today’s date will be ignored and should not appear in the results.

14. In the Sort section, choose event_date and Ascending from the appropriate menus.

The Sort section allows you to display data in ascending or descending alphanumeric order.

15. Click the Test button.

The Test SQL Statement dialog box appears again. Depending on what date you entered in the filter, some events may not appear in the displayed recordset.

16. Click OK to close the Test SQL Statement dialog box and return to the Recordset dialog box. Click the Advanced button.

The Recordset dialog box provides advanced options for creating an SQL statement. You should notice that the SQL statement you created is displayed in the SQL field of the dialog box. If you already know how to write SQL statements, you can enter them directly into this field. Note the sections in the dialog box that are devoted to variables and database items. These built-in point-and-click productivity enhancements help to speed up the process of writing statements by hand by giving you quick access to your data resources and specific SQL commands.

Note the date text displayed in the SQL window. This is the date you entered in step 13. Entering a date in this fashion is fine if the date doesn’t change. The problem here is that you want the table to show only current and future events. By tomorrow, the filter you created will be invalid. Instead, you need to enter a special SQL function that will always remain valid.

17. Select and delete the date and the quotes around it.

18. Type now() in the SQL window to replace the deleted text.

The now() function obtains the current time and date from the server to use for the data filter. The manually entered date is no longer needed.

19. Click the Test button.

The Test SQL Statement dialog box appears displaying the query result. It should look identical to the test you performed in step 15.

20. Click OK to complete the recordset.

Recordset (rs_events) appears in the Bindings panel.

21. Expand Recordset (rs_events) and examine the items displayed.

The recordset contains items for all five data columns in the Events table.

22. Save all files.

You are now ready to create a dynamic webpage. In the next exercise, you will learn how to display data generated by a recordset.

Displaying data from a database

Now that you have all the cogs installed, the only thing left to do is put the machinery into action. As with most of the other steps, displaying data in Dreamweaver is a simple point-and-click process.

1. If necessary, open events.php.

The file’s extension should be compatible with your server model now, and it should feature the database connection and recordset you created previously. But the page also displays two Spry-based recordsets. You’re not going to use the Spry data but that doesn’t mean you have to start completely from scratch. To preclude any conflicts let’s reuse the table element itself, but discard the Spry data sets and support code.

2. Insert the cursor in the Events table placeholder. Select the tag selector for the <table> placeholder. Press Ctrl-X/Cmd-X to cut the table.

The Spry table was contained in a <div> element that contains a reference to the Spry data set and is no longer needed. If you haven’t moved your cursor, the <div> element is still displayed in the tag selector. Spry elements exhibit an orange tinge in the tag selector display.

3. Select the <div> tag selector. Press Delete.

Before we re-insert the table, let’s remove the Spry data sets too.

4. In the Bindings panel, select the ds_events data set. Click the minus () icon at the top of the panel to remove the data set. Dismiss any dialog boxes that may appear when deleting the data set.

5. Remove the ds_classes data set. Dismiss any dialog boxes that may appear when deleting the data set.

Insert the cursor in the first Return to Top link. Click the <p> tag selector, and press the Left Arrow key once to move the cursor to the correct position for the Events table.

6. Press Ctrl-V/Cmd-V to paste the Events table placeholder.

The table placeholder appears below the heading. However, it still contains Spry code residue that should also be deleted.

7. Insert the cursor in the table header row. Switch to Code view and examine the header row elements.

Each of the <th> elements contains a spry:sort="..." attribute.

8. Delete the spry:sort="..." attributes from each of the <th> elements, as well as other Spry attributes elsewhere in the table, such as spry:repeat, spry:odd, spry:even, and so on. But be careful not to delete any class="..." attributes.

All Spry references in the Events table are gone.

9. Switch to Design view and save all files.

Converting the Spry data placeholders to PHP placeholders for the current workflow is a simple process.

10. In the table, select the {Date} placeholder.

11. Open the Bindings panel, if necessary. Expand the rs_events recordset.

12. In the Bindings panel, select the event_date field. Click the Insert button at the bottom of the Bindings panel.

A new {rs_events.event_date} placeholder appears in the table cell, replacing the Spry placeholder.

13. Replace {Event} with event_name.

14. Replace {Location} with event_location.

15. Replace {Cost} with event_cost.

Be sure not to delete the dollar sign before the placeholder.

16. Save all files.

When working on dynamic pages, it’s essential to test the functionality frequently. But unlike the Spry data structure using PHP, certain files must be uploaded to the testing server before you can preview the current dynamic layout.

Staging files on the testing server

You won’t be able to test this file in Live view or in a browser until you upload the page as well as other specific files that connect the page to the database to the local testing server. So which files need to be uploaded? Luckily, Dreamweaver will handle the logistics for you.

1. Select Live view.

Dreamweaver prompts you to update the file on the testing server.

2. Click Yes to update the file on the testing server.

Dreamweaver should prompt you to upload dependent files. If this is the first time you have tested this file, click Yes. This will upload whatever files are needed to display this page properly. Once the dependent files are uploaded, there’s probably no need to upload the dependent files again unless you make changes to this page or the dependent files.

3. Click Yes to upload dependent files.

The table displays one row of data. To display more data, you have to add a repeat region behavior.

Adding a repeat region

Data placeholders can display only one record at a time. To see more than one record, you have to wrap the placeholders in a server behavior called a repeat region.

1. Switch to Design view. Position the cursor at the beginning of the data row of the table, and select the entire row. Select the <tr> tag selector.

The entire row is selected.

2. Select Window > Server Behaviors. In the Server Behaviors panel, click the plus () icon, and choose Repeat Region from the pop-up menu.

The Repeat Region dialog box appears. The Recordset menu displays rs_events as the current recordset. By default, the behavior will display ten records at a time. You can specify a different number or display all the records at once.

When you choose to display fewer than all the records you will also have to create a record paging behavior to permit the user to view the remaining data. For this table, let’s keep things simple and display all the records at once.

3. Select the All Records option. Click OK.

A gray tab displaying the word Repeat appears above the data row of the table.

4. Save all files. Preview the page in Live view.

The table displays all the upcoming events from today’s date into the future. But better yet, as each day passes, events will be removed from the display automatically because their date no longer meets the requirements of the query filter.

Creating a dynamic table for classes and seminars

Before you move on to the next exercise, use the skills and understanding you have learned so far to rebuild the Spry table for the classes and seminars. The steps to re-create this table are simple and straightforward.

1. Create a recordset that returns data from all fields of the Class table in the database. Unlike the events recordset, there’s no need to filter or sort the class data by date. You can sort by class_name if you would like the events to be listed in alphabetical order.

2. Select the Spry table and press Ctrl-X/Cmd-X. Delete the Spry <div> element and paste the table back into the layout at the same position.

3. Clean up any residual Spry code left in the table.

4. Insert data placeholders from the new recordset into the appropriate data row cells.

5. Apply a repeat region server behavior on the data row for rs_classes.

6. Test the results in Live view.

7. Save all files.

Displaying data dynamically is a huge improvement over static lists and tables. Allowing users to interact with data engages them in the process in a way that can’t be done otherwise. These exercises have given you only a small glimpse of what you can achieve with dynamic webpages. In the next exercise, you will build one of the most common dynamic applications: a master/detail page set.

It’s a scenario common to many websites: A page displays a master list of several products or events; you click the one that interests you most; then the website loads a new page with specific details about the selected item. But what you didn’t see, or notice, is how the master page passed your request to the detail page.

Creating a master/detail page set

The master/detail page set is one of the most frequently used applications on data-driven websites. By adding a hyperlink to the displayed data, you allow visitors to navigate to a new page that will display information specific to the selected item. Master/detail page sets can be created in any server environment, including ASP, ColdFusion, PHP, and Spry. The steps and procedures are similar for each server model, but some are easier to implement than others.

Creating the master page

In this exercise, you will create a master/detail page set using your existing database connection.

1. Launch Dreamweaver, if necessary, and open products.php.

You’ll use this page as the master.

2. Select the text Add main heading here. Type Green Products to replace the text.

3. Select the text Add subheading here. Type GreenStart offers only the best in green products to replace the text.

4. Select the text Add content here. Type Click on any product link you wish to learn more about.

Let’s create a <div> element to hold the product information.

5. Click the <p> tag selector. Press the Right Arrow key to move the cursor outside the <p> element.

6. Select Insert > Layout Objects > Div Tag.

The Insert Div Tag dialog box appears.

7. In the Class field, enter productmaster and click OK to create the element.

The <div> element appears with sample placeholder text. Next you should create a recordset to display all the product data.

8. Open the Databases panel and ensure that the Local_PHP connection is still available.

9. Open the Bindings panel. Click the plus () icon and choose Recordset (Query).

10. Enter the following specifications for the new recordset:

Name: rs_products

Connection: Local_PHP

Table: products

Filter: None

Sort: product_category and Ascending

11. Click Test to see if your query produces a valid data set.

The Test SQL Statement dialog box displays product data from the greendata database.

12. Click OK in all dialog boxes to create the recordset and return to the document window.

The rs_products recordset appears in the Bindings panel.

There’s no restriction on how you use the data fields in the recordset. You can insert them once, multiple times, or not at all. They can also be displayed in any order on the page.

13. Select the placeholder text in the <div> element you created in step 7.

14. In the Bindings panel, select the product_name field. Click Insert.

The text {rs_products:product_name} replaces the placeholder text in <div.productmaster>.

15. Format {rs_products:product_name} as a Heading 3. Insert a new paragraph after the placeholder.

16. In the next line, insert the product_desc_short field.

17. Save all files. Preview the page in Live view. If prompted to Put Dependent Files, choose Yes.

If your testing server is properly configured, Dreamweaver will display the selected two fields of the first record of the database in the document window. But dynamic content isn’t limited to text; you can display images dynamically too.

Displaying images dynamically

What would a product page be without pictures of the products? Adding images to the product description is no more difficult than inserting text. In this exercise, you’ll learn how to insert dynamic images into your layout.

1. If necessary, open products.php. Select Design view.

2. Insert the cursor at the beginning of the placeholder {rs_products:product_ name} in <div.productmaster>. Press Enter/Return to insert a new paragraph before the placeholder.

The empty paragraph is formatted as an <h3> element.

3. Insert the cursor in the new paragraph. In the HTML mode of the Property inspector, select Paragraph from the Format menu.

4. Select Insert > Image.

The Select Image Source dialog box appears. Normally, you would select the desired image and simply click OK. But to insert a dynamic image, there are a few extra steps involved.

5. Click the Data Sources option in the dialog box.

The dialog box changes from a file browser to a display of the data fields from the rs_products recordset.

6. Select the product_pix_sm field.

The URL field in the dialog box displays a complex piece of code that will insert a picture based on the filename stored in the database field—in this case, product_pix_sm. But the field contains only the filename of the picture, not the path.

Since folder names and file locations can change over time, it doesn’t make sense to insert path information into a database field. Instead, you can simply build the image path statement in the dynamic code at the time you need it. That way, if you move pictures from one folder to another on the site, you only have to make one small edit in the code to adapt to the change.

If you look at the Files panel, you will find that the images named in the database are located in the products folder.

7. Insert the cursor at the beginning of the URL field. In the field, type products/ and click OK.

By inserting the folder name into the URL field, Dreamweaver will append the text products/ to the image name to pull the desired image from that subfolder of your site, like this: products/1-lrg.jpg.

8. In the Image Tag Accessibility Attributes dialog box, select <empty> from the Alternate Text field menu. Click OK.

9. Save all files and preview the page in Live view.

The small image of the sample product appears on the screen along with the text. Now that you have one product displayed successfully, it’s a simple matter to show multiple data items, as you did with the Events and Class tables earlier.

Displaying multiple items

To display more than one record, you need to add a repeat region as you did before. Although there’s no table row (as there is in the previous example), you can assign the behavior to the <div.productmaster> element instead.

1. Switch back to Design view and select the <div.productmaster> tag selector.

2. Open the Server Behaviors panel.

3. Click the plus () icon and choose Repeat Region.

4. In the Repeat Region dialog box, enter the following specifications:

Recordset: rs_products

Show: 6 Records at a Time

Click OK.

A gray tab displaying the word Repeat appears above <div.productmaster>.

5. Save all files. Preview the page in Live view. Click Yes to update the page on the testing server. Click Yes to upload dependent files.

Dreamweaver now displays six records from the Products table. <div.productmaster> defaults to 100 percent of the width of the main content area, so the records stack one atop the other. Later you’ll style <div.productmaster> to use the screen more effectively, but for the moment, we’ll make sure the visitors will be able to view all the products in the database. The first six records display by default; to display the next set of six records, you have to add a paging behavior.

Creating a record paging behavior

Paging controls are usually inserted outside the repeat region so that they appear only once per page. In this exercise, you will create a record paging behavior for the rs_products recordset.

1. Click the Repeat tab to select the repeat region. Press the Right Arrow key to move the cursor after the code for the <div> element and the repeat region.

The paging controls can be inserted as text or as graphical elements on the page. Frequently, tables are used to control their presentation.

2. Insert a table with the following specifications:

Rows: 2

Columns: 4

Width: 600 pixels

Border thickness: 0

Cell padding: 0

Cell spacing: 0

The width is set at 600 pixels, but the table will automatically conform to dimensions set by existing CSS rules created in Lesson 7. You will override these styles later in this lesson. To enable this level of precision control, you’ll have to apply a unique ID to this table.

3. In the Table ID field, enter master_paging.

4. Select all the cells in the first row. In the W field of the Property inspector, enter 25%.

5. Enter the following text in the first row of the table:

Cell 1: << First

Cell 2: < Previous

Cell 3: Next >

Cell 4: Last >>

The angle brackets provide a visual cue to the user for the results of the paging behavior.

6. Select the text << First. Select Insert > Data Objects > Recordset Paging > Move To First Page.

The Move To First Page dialog box appears. The Link field displays Selection: “<< First”, and the Recordset field menu displays rs_products.

7. Click OK.

A dynamic hyperlink behavior is applied to the text that will load the first six records of the Products table.

8. Apply the following paging behaviors to the other text:

< Previous: Move To Previous Page

Next >: Move To Next Page

Last >>: Move To Last Page

9. Save all files. Preview the page in Live view.

The first six records appear. If you click the paging controls, nothing happens. To invoke the paging controls, you have to use a modifier key.

10. Hold down the Ctrl/Cmd key and click the Next paging link.

Live view loads the next six records.

11. Hold down the Ctrl/Cmd key and click the Last paging link.

Live view loads the last set of records.

12. Test the Previous and First paging links.

You have created a set of record paging links that allow visitors to display recordsets in batches designated by the repeat behavior. But there’s a small problem. When the page is displaying the first set of records, there are no “previous” records. Likewise, when the last set of records is displayed, there are no “next” records. Leaving these links on the page would be confusing for the visitor. As you have probably already guessed, Dreamweaver provides a tailor-made behavior for such situations.

Hiding unneeded paging controls

Visibility is a common property that can be controlled by HTML and CSS. It’s relatively easy to set an element’s visibility and then invoke a behavior or scripted action to change it for a specific purpose. In this exercise, you will apply a dynamic server behavior that will modify the paging link’s visibility based on the results of the recordset. In effect, it will hide the controls when their role is invalid.

1. Return to Design view. Insert the cursor in the << First link and select the <a> tag selector.

To hide all traces of the link, you have to select all the markup for the record paging element. The Show behavior can be accessed from the Insert menu or from the Server Behaviors panel.

2. In the Server Behaviors panel, click the plus () icon and select Show Region > Show If Not First Page.

The Show If Not First Page dialog box appears displaying rs_products in the Recordset menu.

3. Click OK.

A gray tab displaying the words Show If appears above the First link.

4. Select the < Previous link, as in step 1. Apply the Show If Not First Page server behavior.

5. Select the Next > link and then the Last >> link, and apply to each the Show If Not Last Page server behavior.

6. Save all files and preview the page in Live view.

The first six records are displayed. Examine the paging links. The Previous and First links don’t appear.

7. Hold down the Ctrl/Cmd key and click the Last link.

The last set of records is displayed. Note that the Next and Last links are no longer displayed. The Show Region behaviors will automatically hide and display the paging links based on whether the page shows the first or last set of records, or somewhere in between. Dreamweaver offers over two dozen pre-built server behaviors that allow you to customize all aspects of the records display.

Displaying the record count

When you have lots of records to view, it’s easy to lose track of what record you’re looking at, so it’s a good idea to give the user a status report. In this exercise, you’ll insert a behavior that will display the total number of records and pages in the set.

1. Switch to Design view. Select all four cells in the second row of <table#master_paging>. Right-click the selection and choose Table > Merge Cells from the context menu.

2. Click in the merged cell. Select Insert > Data Objects > Display Record Count > Recordset Navigation Status.

The Recordset Navigation Status dialog box appears.

3. If necessary, select the rs_products recordset. Click OK.

A complete block of code and placeholder text is inserted into the second row.

4. Save all files and preview the page in Live view.

The status report displays the text Records 1 to 6 of 28.

5. Hold down the Ctrl/Cmd key and click the Next link. Examine the status report.

The status report displays the text Records 7 to 12 of 28.

6. Switch back to Design view.

The page is nearly complete, but before you create the detail page and the behaviors that are needed to connect the two pages, let’s add a bit of style to the product display.

Styling dynamic data

Adding style and flair to dynamic data is no different than styling static pages. In this exercise, you will create CSS rules to format the text and structure of your dynamic data. Let’s start by changing the way the products are arranged on the page. The following styling will allow the products to be arranged side by side in neat rows.

1. Open products.php and switch to Design view, if necessary.

2. Open the CSS Styles panel. Select the last rule in the mygreen_styles.css style sheet.

3. Create a CSS rule named .content section .productmaster and apply the following styling:

4. Create a rule named .content section .productmaster h3 and apply the following styling:

5. Create a rule named .content section .productmaster h3 a, .content section .productmaster h3 a:visited and apply the following styling:

6. Create a rule named .content section .productmaster h3 a:hover and apply the following styling:

7. Create a rule named .content section .productmaster p and apply the following styling:

8. Create a rule named .content section #master_paging and apply the following styling:

9. Create a rule named .content section #master_paging td and apply the following styling:

10. Create a rule named .content section #master_paging a, .content section #master_paging a:visited and apply the following styling:

11. Create a rule named .content section #master_paging a:hover and apply the following styling:

12. Save all files. Preview the page in Live view.

The new styling displays the products side by side in two convenient rows—taking up less space and permitting the user to see more products without scrolling. The paging controls enable the user to flip through the whole catalog simply by clicking. In the next exercise, you will learn how to add a special hyperlink to the master elements that will load a detailed view of a specific product.

Inserting a go-to-detail-page behavior

By keeping the product picture and descriptions small on the master page, you allow the customer to browse quickly through your entire catalog. The more products you can show comfortably in one place, the more likely it is that the customer will find something that interests them. Then, usually they want to learn more about one product. That’s where the detail page comes in. In this exercise, you’ll insert a special behavior in the dynamic placeholders that will load a detail page for any item clicked on the master page.

1. Open products.php and switch to Design view, if necessary.

A dynamic link can be added to text or pictures to take the user to a detail page. Although ASP provides a custom behavior for this purpose, you have to create this link yourself in ColdFusion and PHP.

2. Select the image placeholder in <div.productmaster>.

A dynamic link is added using the Link dialog box.

3. Click the Browse icon next to the Link field in the Property inspector.

4. When the Select File dialog box opens, click the Data Sources button.

5. Select the product_ID field.

When you select product_ID, the following code is inserted in the URL field:

<?php echo $row_rs_products['product_ID']; ?>

6. Insert the cursor at the beginning of the text in the URL field.

7. Type product_detail.php?product_ID= and click OK.

The code you entered will pass the product_ID of the selected element to the detail page, where it should then be displayed.

8. Save all files.

Before you can test the functionality, you first need to create the detail page.

Creating a detail page

The detail page is almost identical to the master page in construction. Both create a recordset and display placeholders for specific fields. The major difference lies in that the master page can display all the records, while the detail page will show only one. In this exercise, you will create a detail page so that it will show information about only the product selected by the user.

1. Create a new page based on the site template. Save it as product_detail.php.

2. If the Databases panel doesn’t display your current data connection, click the document type link and choose PHP or the appropriate server model for your workflow.

3. In the Bindings panel, create a new recordset named rs_product_detail.

The Recordset dialog box appears. The previous recordsets you have created have shown all the records in a table. For a detail page you have to create a filter to show only the record selected by the user on the master page.

4. Enter the following specifications in the Recordset dialog box:

5. Click Test.

A dialog box appears requesting a test value. You have to enter a value that would be pertinent to the specific field, such as the SKU or ISBN number of the product. In this case, the values in the current Products table are simple digits from 1 to 28.

6. Enter 1 in the field and click OK.

The Test SQL Statement dialog box appears displaying one record.

7. Click OK in all dialog boxes to return to Design view.

Now you’re ready to build the detail page data display.

8. Select the text Add main heading here. Type Green Product Detail to replace the placeholder text.

9. Select the text Add subheading here. In the Bindings panel, select the product_name field. Click the Insert button.

10. Select the text Add content here. Insert the product_desc_long field.

11. Create a new paragraph. Type Dimensions: in the new paragraph. Press the spacebar and insert the product_size field.

12. Create a new paragraph. Type Quantity: in the new paragraph.

Press the spacebar and insert the product_quantity field.

Press Ctrl-Shift-spacebar/Cmd-Shift-spacebar to insert a non-breaking space. Insert the product_unit field.

13. Create a new paragraph. Type Cost: $ in the new paragraph.

Press the spacebar and insert the product_cost field.

14. Insert the cursor at the beginning of the placeholder {rs_product_detail. product_name}. Select Insert > Image.

15. Click the Data Sources button. Select the product_pix_lrg field.

Insert the cursor at the beginning of the Code field, then type products/ and click OK.

16. In the Image Tag Accessibility Attributes dialog box, select <empty> from the Alternate Text field menu. Click OK.

17. Select the new image placeholder. From the Class menu, choose flt_rgt. In the Width and Height fields, enter 300.

18. Save all files.

Before you upload the pages to the remote site, you should test the go-to-detail-page behavior locally.

19. Open the Products page. Preview the page in Live view. Hold down Ctrl/Cmd and click one of the product names or pictures.

Live view loads the selected product data into product_detail.php.

You have completed the rudimentary steps for building a full-fledged online store. The design and construction of an online store, shopping cart, and payment gateway is complex and well beyond the scope of this book.

Prebuilt shopping cart and store solutions are available for all server models supported by Dreamweaver. They vary in cost and complexity to suit any need and budget. Some of the most economical solutions are offered by Google, Yahoo, and PayPal, among others, and they even simplify the method of receiving electronic payments by credit card and bank transfer.

In this lesson, you have created dynamic pages using live data. You’ve generated page content from an online database and built a complete master/detail page set. But after all that, you’ve barely looked under the hood of what Dreamweaver can do with dynamic data.

Review questions

1. What is a recordset?

2. Why would you need to use a repeat region?

3. What is a master/detail page set?

4. For what purpose would you use record paging behavior?

5. How can you hide paging controls when there are no more records to display?

Review answers

1. A recordset is an array of information pulled from one or more tables in a database by a query created in Dreamweaver.

2. A repeat region allows the data application to display more than one record at a time.

3. The master/detail page set is a common feature of data-driven websites. The master page displays multiple records and provides dynamic links within each record, which allows you to load specific information about the selected item on the detail page.

4. A record paging behavior is used to load the results of a recordset when only a limited number of records are displayed at one time.

5. Select the paging control link and apply a “Show” behavior pertinent to the recordset.