22.8 Tutorial: Displaying Database Information

   

In this tutorial, you'll continue the work you started in the last chapter. The National Exasperater 's online store requires two dynamic pages. The first will display a list of all products available on the site. From that page, visitors can jump to a detailed description of an item for sale by clicking its name . You'll learn how to create both basic and advanced recordsets and take advantage of some of Dreamweaver's built-in application objects.

To get started, download the files and complete the tutorial in Chapter 21. If you haven't yet done this, turn to Section 21.3.1 and follow the instructions for preparing the application server, database, and Dreamweaver for this project.

22.8.1 Creating a Recordset

You'll start by opening an existing page and adding a recordset to it.

  1. Open products.asp in the root folder of the local site you defined in the previous chapter.

    Either choose File Open and navigate to and select products.asp , or double-click the file name in the Site Files panel.

    NOTE

    ASP.NET note You can follow along with this tutorial using the ASP.NET server model. Open the file called products.aspx and follow along. Boxes like this one will appear when the instructions for .NET differ from ASP.

    The basic structure of this page is already complete. It was built using tables, image rollovers, Cascading Style sheets, and the other HTML features you've already learned. There's nothing dynamic about this page yet, so you'll need to create a recordset and insert database information into the page.

  2. Choose Insert Application Objects Recordset.

    You can also click the recordset object on the Application tab of the Insert bar (see Figure 22-1), or click the + button on either the Bindings panel or Server Behaviors panel and select a recordset from the menu that appears. In any case, the Recordset box should now be on the screen. (Make sure you're using the simple modeyou should see a button labeled Advancedas described in Section 22.1.2.)

    NOTE

    ASP.NET note In ASP.NET, a recordset is called a dataset . So choose Insert Application Objects Dataset for this step.

    Next , select the information you want to retrieve.

  3. Type rsProducts into the Name box.

    Since Dreamweaver lets you connect to more than one database, you must now indicate which database connection it should use.

  4. From the Connections pop-up menu, select "connNationalEx."

    This is the name of the connection you created in the last chapter.

    The National Exasperater database contains several tables. At this point, you're interested in the Products table and the Vendors table. For this page, you'll create an index of all products for sale. That information is in the Products table.

  5. From the Tables menu, choose "products." Click Selected.

    You don't need to retrieve all the information from the Products table. Since this dynamic page will present a listing of all of the products, you only need basic information like the name of the product, its price, and its inventory status. More details about each product will appear on a second page, to be created later in this tutorial.

  6. In the Columns list, Ctrl-click ( figs/command.jpg -click) "prodName," "prodPrice," and "prodInventory."

    These are the columns of data you want to get from the database.

    You won't have to filter this recordsetyou can ignore these controls in the dialog boxbut it would be nice if the product names appear in alphabetical order.

  7. From the first Sort pop-up menu, choose "prodName." From the second one, choose Ascending.

    The Ascending option makes certain the records start with products whose names begin with A and end with names that begin with Z.

  8. Click OK to close the Recordset dialog box. In the Bindings panel (Ctrl+F10 or figs/command.jpg -F10), click the + icon next to the Recordset icon.

    The Bindings panel should look like Figure 22-22.

NOTE

ASP.NET note The Bindings panel displays only prodName, prodPrice, and prodInventory. You won't see the last three items shown in Figure 22-22.

Note, too, that you'll have to place certain files on the Web server that Dreamweaver requires to build ASP. NET pages. To do this, choose Site Advanced Deploy Supporting Files. The window that appears asks you to locate the bin directory of your testing server.

The bin directory is a folder for storing executable filesprogram filesthat work with your Web site. In most cases, it's C:\Inetpub\ wwwroot \bin\ (where C: is the name of the hard drive containing the Web site). You have to add these files only once per server (that is, once for your testing server, and once for your final production server).

  1. In the document window, click inside the table cell directly below the one labeled Item for Sale.

    In this cell, you'll add the name of the item for sale.

The Bindings panel provides a list of a page's recordsets and data fields. You can use these fields to add dynamic text to a page.
figs/22_22.jpg
  1. In the Data Bindings panel, click "prodName" and then click Insert.

    You've just added dynamic data to the page. For the moment, it looks like {rs- Products.prodName}.

  2. Repeat steps 9 and 10, this time inserting "prodPrice" and "prodInventory" into the remaining two cells .

    You can also drag an item from the Data Bindings panel onto the page.

    At this point, your page should look like Figure 22-23.

After you add dynamic information to a page, it appears with a blue background. Here, three pieces of dynamic data are added to the page: rsProducts. prodName, for example. To change this background color , choose Edit Preferences. Click the Highlighting category and change the Live Data View colors at the bottom of the window.
figs/22_23.jpg

22.8.2 Formatting Dynamic Information

Once you've added dynamic data to a page, you can format it so it looks like other text on your page. Dreamweaver lets you apply all of the formatting options available to regular text, including Cascading Style Sheets. In addition, Dreamweaver includes some formatting options specific to dynamic information, such as multiple formatting options for dates, currency, and numbers .

You'll start by adding some CSS formatting to the page.

  1. In the document window, click the product name data ({rsProducts.prod- Name}).

    You've just selected the data you want to format.

  2. In the Property inspector, select ProductInfo from the Style menu.

    The text is formatted in bold green.

  3. Repeat steps 1 and 2 for the other two data items, using the ProductInfo style in the Property inspector.

    Dreamweaver also includes special dynamic-text formatting options for dollar amounts, percentages, and more. That comes in handy now:

  4. Click the price data ({rsProducts.prodPrice}) on the Web page.

    Before you proceed, make sure that the Data Bindings panel is open (Ctrl+F10 or figs/command.jpg -F10). Notice that the price is highlighted under the recordset.

  5. In the Data Bindings panel, click the down-pointing arrow in the Format column. In the contextual menu that appears, choose Currency 2 Decimal Places (see Figure 22-24).

Data in a database isn't always stored in a format that's attractive. Monetary values are usually stored as numbers9.9, for example. To get dynamic data into a more understandable format ($9.90), use the formatting options available from the Bindings panel.
figs/22_24.jpg

You've just added a $ sign to the beginning of the price, and ensured that the price will always appear with two decimals, like this: $100.00. You can also pick from a variety of different formats for presenting dates.

Unfortunately, you can't see the effect of this formatting choice; you see only that cryptic {rsProducts.prodPrice} on the page. You'll get to see the actual formatted price in the next section.

NOTE

ASP.NET note: Default is the only choice for currency formatting in ASP.NET.

22.8.3 Live Data View and Creating Repeating Regions

When you add dynamic data to a page, it doesn't look like much. All you see is the recordset and column name between braces ({rsProducts.prodName}, for example). Not only can this interfere with your design, it certainly doesn't give you a clear picture of what your page will look like.

Thank goodness for Dreamweaver's Live Data view.

  1. Click the Live Data View button in the document window's toolbar (see Figure 22-25).

    Dreamweaver connects to the testing server and database to retrieve the data requested by the recordset (this may take a few seconds). For the first time, you get to see the page as it will appear on the Web (Figure 22-25). Notice the price and date formatting; it's just what you specified.

    But there's a problem: Only one item is listed. This page is meant to show listings for all products. You have yet to create a repeating regiona part of the page that repeats for each record in a recordset.

  2. Move your cursor to the left of Alien Abduction T-Shirt until the right-pointing arrow appears, and then click.

    When you click the Live Data View button in the document toolbar, Dreamweaver pulls data from the database and displays it in the document window. In addition, a second toolbar appears that lets you control various Live Data view settings.
    figs/22_25.jpg

    That's how you select the bottom row of the table. (For other methods of selecting a table row, see Section 7.4.2.) Since this row displays the info for a single product, it's a perfect candidate for a repeating region. An additional row will appear in the table for each product.

  3. On the Application tab of the Insert bar, click the Repeated Region button (see Figure 22-1).

    The Repeat Region dialog box (Figure 22-13) appears, so that you can select which recordset to use (if the page has more than one) and how many records to display. In this case, since you have only one recordset, you just have to tell Dreamweaver how many records to show.

  4. In the Records at a Time box, type 9 . Click OK.

    You don't know how many products the National Exasperater offers at any time. If it were a lot, you wouldn't want to show them all on a single pagea thousand listings would make a pretty long Web page. In this case, just list nine records at a time.

    If the database has more than nine products, you need to provide a way for people to see the other items. You'll do that next.

  5. Click the Live Data View button again to turn off Live Data.

    The document window changes back to the original two-row table.

  6. Click below the table that lists the products. Then, in the Application tab of the Insert bar, click the Recordset Paging button and select Recordset Navigation Bar from the menu (see Figure 22-14).

    The Recordset Navigation dialog appears. There's only one thing to do here.

  7. Make sure the Text button is selected; click OK.

    Dreamweaver plops a table onto the page, containing four columns. They contain links that will let visitors navigate the product listings.

    The table will look better if it's aligned to the left side of the page.

  8. In the document window, select the table. From the Align pop-up menu in the Property inspector, choose Default. Set the width of the table to 200 pixels.

    For techniques on selecting a table, see Section 7.4.1. (Tables are left-aligned by default, which is why you chose Default.)

  9. Click directly above the new table Dreamweaver just inserted; click the Recordset Navigation Status button (see Figure 22-1).

    Dreamweaver inserts something that looks like this: Records {rsProducts_first} to {rsProducts_last} of {rsProducts_total} . That's placeholder code for this notation: "Records 1 to 9 of 21."

    Now for a touch of formatting:

  10. Select the paragraph Dreamweaver just inserted. In the Property inspector, select productInfo from the Style Menu.

    You've just formatted the paragraph with the productInfo CSS style. (While you're at it, apply the same style to the four parts of the Recordset Navigation BarFirst, Previous, Next, and Last, if you like.)

  11. Press F12 to preview the page in your Web browser.

    The page opens in a Web browser displaying nine records (see Figure 22-26).

Building dynamic Web pages in Dreamweaver is easy. In just a few short stepsall right, 28 stepsyou can create pages for viewing database records. (You can click the Next link at the bottom of the page to jump to the next set of ads.)
figs/22_26.jpg

22.8.4 Editing a Recordset and Linking to a Detail Page

Now that the main Products listings page is complete, you need to create a link to the name of each product that, when clicked, will open a page with the details for that item.

  1. Open the Server Behaviors panel by pressing Ctrl+F9 ( figs/command.jpg -F9), or clicking the Server Behaviors tab in the Application panel group .

    A list of all the different server behaviors appears; these were added when you created a recordset, put dynamic text on the page, and used Dreamweaver's other dynamic page creation tools. (Server behaviors are discussed in depth in Chapter 24.)

    Instead of adding another server behavior at this point, you can edit one you've already created: the recordset. When you first added this recordset, an important piece of information was left outthe product's ID number. (Actually, it was omitted from the tutorial intentionally, so that you'd now have this engaging educational opportunity to learn how to edit a recordset.)

    Each product has its own ID number, which you'll use to tell the Details page which item to display.

  2. Double-click "Recordset (rsProducts)" in the Server Behaviors panel to open the Recordset dialog box.

NOTE

ASP.NET note Double-click "DataSet (rsProducts)" for this step.

  1. Ctrl-click ( figs/command.jpg -click) "prodID" in the columns list, and then click OK.

    You've just added one additional column (prodID) to the recordset. Now the recordset will not only retrieve the name, price, and posted dates for each product, but also its unique ID number.

  2. In the document window, select the dynamic data containing the product's name: "{rsProducts.prodName}."

    A simple link won't work here. Instead, you need one of Dreamweaver's server behaviors.

  3. From the Application tab of the Insert bar, choose Go To Detail Page (see Figure 22-20).

    The Go To Detail Page dialog box appears. This window lets you create a special link to a dynamic page. Although each item listed on the main products page will link to the same Details page, each link will include additional information letting that page know which product to display.

The Go To Detail Page server behavior makes it easy to create a link that passes URL parameters, Form data, and other necessary information to a detail page. This behavior is discussed in depth in Chapter 24.
figs/22_27.jpg

NOTE

ASP.NET note Unfortunately, Dreamweaver doesn't provide the Go To Detail Page behavior for ASP.NET. Instead, you must follow these steps:

  1. Select "{rsProducts.prodName}" as in step 4.

  2. In the Property inspector, click the Folder (browse for file) icon next to the Link box.

  3. Select the file productDetails.aspx in the site root. Don't close the Select File window yet.

  4. In the Select File window, click the Parameters button at the bottom-right corner. The Parameters window opens.

  5. Type prodID into the Name column.

  6. Click in the Value column to the right and click the lightning bolt icon. The Dynamic Data window opens.

  7. Select "prodID" from the dataset (you may need to click the + button to expand the list of database columns).

  8. Click OK to close the parameters window.

  9. Click OK to close the Select File window.

  10. Breathe a sigh of relief and jump to step 8.

  1. Click the Browse button. Select the file product_details.asp .

    This is the page that will display the detailed records of each product. All of the other settings should already be filled out and should resemble Figure 22-27.

  2. Click OK to close this window.

    And now to make sure everything works:

  3. Press the F12 key to preview the page in your Web browser. Click the Alien Thought-Disrupting Hat link.

    The detail page loads...without any details! You'll get to that step in a moment. In the meantime, look at the URL in the Web browser's Address bar. It should be something like this: http://localhost/nat_ex_asp/product_details.asp?prodID=12 . Notice the ?prodID=12 tagged onto the page product_details.asp . That's the information the details page will need to retrieve the proper product information. In this case, the URL is indicating that the page should retrieve info for an item with the ID number of 12.

  4. Save and close this page.

22.8.5 Building the Detailed Product Page

In this part of the tutorial, you'll build a detail page that will display all the details for a particular product. In addition, you'll create an advanced recordset that combines information from two separate database tables.

  1. Open the file called product_details.asp in the root folder of the site.

    Either choose File Open and navigate to and select product_details.asp , or doubleclick the file name in the Site Files panel.

    NOTE

    ASP.NET note Open the file product_details.aspx .

    Since this page will display the details for an product, it must retrieve data from the database. To set this up, start by creating a recordset.

  2. Choose Insert Application Objects Recordset.

    You can also click the Recordset object on the Application tab of the Insert bar (see Figure 22-1). Or click the + button on either the Bindings panel or Server Behaviors panel, and then select recordset from the pop-up menu. In any case, the Recordset dialog box should now be open.

    NOTE

    ASP.NET note Choose Insert Application Objects DataSet instead.

    The National Exasperater database contains several database tablesone for product information, one for vendor information, one that lists the different product categories, and one that contains user information ( user names and passwords). The detail page incorporates information from the Products table and the Vendors table, so that it can reveal both the description of the product and information about its manufacturer. Because the basic panel of the Recordset dialog box doesn't let you retrieve information from more than a single database table, you must use the advanced setting.

  3. Click the Advanced button on the right side of the window.

    The Advanced Recordset dialog box appears.

    Unfortunately, this isn't one of the areas in which Dreamweaver is particularly user-friendly. It helps to understand SQL (see Section 22.1.6)or you can just take the following steps.

  4. In the Name field, type rsDetails . From the Connection menu, choose "conn- NationalEx."

    In the next few steps, you'll create an SQL query essentially a line of programming code that asks the database for particular information that matches specific criteria. In this case, it's the information for a particular product.

  5. Click the + or flippy triangle next to the word Tables in the Database Items list (at the bottom of the dialog box).

    It expands to reveal the four tables of the database: Category, Products, Users, and Vendors.

  6. Click the + (flippy triangle) to expand the Products table.

    Your job is to select the information from this table that you want to display on the page.

  7. Select "prodID"; click the Select button to the right.

    Notice that Dreamweaver writes SELECT prodID FROM products in the SQL box. This is SQL code for selecting a particular column of data from a table. You can now choose the other pieces of information.

NOTE

ASP.NET note You'll see SELECT products.prodName FROM products in the SQL box.

  1. Repeat step 7 for the following items in the Products table: prodName, prodPrice, prodInventory, prodDesc, imagePath.

    These are all the items you need to retrieve from the Products table. Now you can choose data from the Vendors table.

  2. Click the + (flippy triangle) to expand the Vendors table. Repeat step 7 for the vendorName item in that table.

    The dialog box should now look like Figure 22-28. Congratulations: You've just created a basic SQL query.

    The Advanced option of the Recordset window lets you use a data tree to build an SQL statement. By selecting a column name and clicking either the SELECT, WHERE, or ORDER BY buttons , you can get Dreamweaver to do some of the heavy lifting . Unfortunately, some understanding of SQL is still required to create functioning database queries using these advanced options.
    figs/22_28.jpg

    But there's a problem here: Because of the way this query is structured, it will retrieve all the records for both tables. To remedy the situation, you must do two things: First, combine information from two tables so that you get the vendor information for the corresponding product; and second, retrieve only that information for the particular product specified by the link you created in the last part of this tutorial.

  3. Click inside the SQL box after the word "vendors." Press Enter or Return.

    You'll have to dive into typing out SQL code.

  4. Type WHERE (products.vendorID = vendors.vendorID) .

    This little bit of code is called a WHERE clause , and it helps filter information in a database. In this instance, you've created what's called a join a statement that joins two or more tables together. When you retrieve product information, you also want to retrieve the name of the vendor who manufactures that product. By matching the vendor ID from the Products table to the identical vendor ID in the Vendors table, the database can produce the proper vendor name.

    If your eyes are glazing over, go get a cup of coffee before plunging ahead.

  5. Click the + button to the right of the word Variables.

    You've just created a new SQL variable.

    You're about to expand on the WHERE clause you just wrote. Not only do you need to get the details of a product (plus the vendor's name), you also want to retrieve just a single recordthe particular product whose details the visitor wants to review.

NOTE

ASP.NET note The process for creating a SQL variable is significantly different in ASP.NET. Follow these steps:

  1. Click the + button to the right of the word Parameters to open the Add Parameter window.

  2. Type product in the name field.

  3. From the Type menu, choose Integer.

  4. Click the Build button to open the Build Value window.

  5. Type prodID into the Name field.

  6. From the Source menu, choose "URL parameter."

  7. Type 1 into the Default field; click OK to close the window.

  8. Click OK to close the Add Parameter window.

  9. Go to step 14 below.

  1. For the Name, type product; for Default Value, type 1; and for Runtime Value, type Request.QueryString("prodID") .

    Look back to step 6 in the last part of this tutorial (Section 22.8.5). Remember that the ID number for the product is embedded in the URL. In other words, when someone clicks a link on the main product listings page, the ID number for the product is passed along like this: product_details.asp?prodID=12 .

    In this step, you're retrieving that information from the URLthat's the Request. QueryString("adID") partand storing it in a variable that you'll use in the rest of the SQL query.

  2. Return to the SQL box. At the end of the WHERE clause (after the closing parenthesis), type AND(products.prodID = product) .

    The Recordset window should now look like Figure 22-29.

In the Advanced settings of the Recordset window, you can create more detailed SQL queries that can retrieve and merge information from multiple database tables.
figs/22_29.jpg
  1. Click the Test button.

    A Test SQL Statement window opens, containing a single record. Hallelujah: It includes not only product details but also the vendor's name.

NOTE

ASP.NET note This testing procedure won't work for ASP.NET, but the final page will function correctly in Live Data view or when previewing from the testing server.

  1. Click OK to close the window. Choose File Save to save your changes.

22.8.6 Filling in the Details

Now all you need to do is add the information retrieved in the recordset to the page.

  1. In the document window, click in the empty space directly above the word Price.

    You'll add the name of the "for sale" item here.

  2. Open the Bindings panel.

    Either press Shift+F10 or click the Data Bindings tab in the Application panel group.

  3. In the Data Bindings panel, click the + (flippy triangle) next to the recordset to display all of the columns retrieved in the recordset. Select "prodName," and then click Insert.

    That data appears in the document window. You'll try the drag-and-drop method of inserting dynamic data next.

  4. In the Data Bindings panel, drag "prodPrice" into the document window, just to the right of the text Price:

    At this point, you might want to format the price, as you did in step 5 in Section 22.8.2.

  5. Continue adding content to this page using these same steps.

    Add the description, inventory status, and vendor name in the appropriate places in the document window.

    To finish off this page, add a photo in the area to the left of the product info like this:

  6. Click in the empty table cell that's to the left of the cell with the product information. In the Common tab of the Insert bar, click the Image button or choose Insert Image.

    The Insert Image window appears. You've encountered this dialog box many times before when inserting a graphic (see Chapter 5). However, in this case, you'll retrieve the path to the image from the database.

  7. Select the Data Sources radio button.

    The window should now look like Figure 22-30. A list of all of the different data items from the recordset appears. See the item labeled "imagePath"? The database stores the path to an image for each product in the database. This is the path that the page will use when displaying the graphic.

Paths for links and images needn't be hardwired into a Web page. You can retrieve paths for images and links from a database source. In this case, depending on which product is currently on display, a different product image will appear on the page.
figs/22_30.jpg
  1. Select "imagePath"; click OK.

    A little square icon appears in the document window.

  2. Click the Live document View button. If everything looks good (Figure 22-31), choose File Save.

To see the results of your hard work, open the products.asp page in Dreamweaver and press the F12 key to preview it in a browser. Now click a link to see the details for that product.

NOTE

If your local root folder isn't the same as your testing server, you'll need to move your files from the root folder to the testing server to preview these dynamic pages. See Section 16.2 for more details on transferring files.

You can preview additional records by modifying the URL that appears just below the document toolbar. In the box just to the right of product_ details.asp type: prodID=12. the information for the product with ID number 12 appears. Try other numbers to view other products.
figs/22_31.jpg

22.8.7 Operators Standing By

One final touch would make the products page perfect. Each product sold at the National Exasperater online store belongs to a categoryshirts, videos , books, weird stuff, and so on. Shoppers might find it useful to view a list of just what they're looking forjust the books, for instance.

Since category information is stored in the database, you can use it to create such a feature. In this final part of the tutorial, you'll add a category navigation bar along the left side of the products page, so that when a visitor clicks a category name, a list of the products within that category will appear.

  1. Open the products.asp page.

    This is the page you'll add the category links to. The first step is to add a new recordset that retrieves all of the category names from the database.

NOTE

ASP.NET note The file for you to open is called products.aspx .

  1. Choose Insert Application Objects Recordset.

    You can also click the Recordset object on the Insert bar's Application tab (see Figure 22-1). Or click the + button on either the Bindings panel or Server Behaviors panel, and then select Recordset from the pop-up menu. In either case, the Recordset dialog box opens. (You may need to click the Simple button to switch the Recordset dialog box out of advanced mode.)

NOTE

ASP.NET note Choose Insert Application Objects Dataset or click the Dataset button on the Application tab of the Insert bar.

  1. Type rsCategories into the Name box.

    The National Exasperater database includes a table with the names of each category of product sold. You'll use this table to dynamically generate the list of category names.

  2. From the Connections pop-up menu, select "connNationalEx."

    This is the same connection you've used throughout this tutorial. In this case, you're going to retrieve information from a different table in that database.

  3. Select Category from the Table menu.

    The Category table is very basic: just a name and ID number. The Products table identifies a category by using a Category ID numberthe table's categoryID field. You may wonder why a separate table is even necessary. Why not just store the category name with the product information?

    There are two advantages to this design. First, because the table is just a list of category names, you can easily retrieve an alphabetized list of those names by creating a recordset. That's useful, for example, when you want to add a list of categories to a pageas in these tutorial steps. In addition, the separate category table makes changes to categories easier. If you decide you want to change a namesay "Strange stuff " to "Rare and unique"you need to update it only in one record in the Category table. If "Strange stuff " were stored in the Products table, you would then have to change the name to "Rare and unique" in potentially hundreds of records.

  4. Make sure the All radio button is selected and choose "categoryName" from the Sort box.

    At this point, the dialog box should look like Figure 22-32.

By storing all of the product category names in a single table, you can build a dynamic category navigation bar with the help of a simple recordset.
figs/22_32.jpg
  1. Click OK to apply the recordset to the page.

    Now the page has two recordsetsone to retrieve product info, the other to retrieve the list of categories. You'll add the category name to the page next. The Data Bindings panel should look like Figure 22-33 (if the Bindings panel isn't open, press Ctrl+F10 ( figs/command.jpg -F10).

The Bindings panel displays all recordsets currently applied to a page. To hide the recordset's field names, click the (minus) button to the right of the recordset icon.
figs/22_33.jpg
  1. From the Bindings panel, drag "categoryName" to the empty space just below the word "Categories" in the Document window.

    This adds the dynamic text for the category name to the page. Next, you'll add a repeating region so that all of the category names appear.

  2. Make sure the dynamic text you just added is still selected in the Document window, and on the Application tab of the Insert bar, click the Repeated Region button (see Figure 22-1).

    The Repeat Region dialog box (Figure 22-13) appears, so that you can select which recordset to use. Since there are now two recordsets on this page, you need to pick the appropriate one.

  3. Select rsCategories from the menu. Click the All records radio button, and then click the OK button to create the repeating region.

    If you preview the page at this point, you'll see a list of categories along the left side of the page. To make this list a functional navigation bar, you'll add a Go To Detail Page server behavior.

  4. If the dynamic text you added in step 8 isn't still selected in the document window, click to select it.

    You'll add a link to this text using the Go To Detail Page server behavior.

NOTE

ASP.NET note Unfortunately, Dreamweaver doesn't provide the Go To Detail Page behavior for ASP.NET. Instead, you must follow these steps:

  1. Make sure the dynamic text you added in step 8 is selected.

  2. In the Property inspector, click the folder (browse for file) icon next to the Link box.

  3. Select the file categories.aspx in the site root. Don't close the Select File window yet.

  4. In the Select File window, click the Parameters button at the bottom-right corner. The Parameters window opens.

  5. Type categoryID into the Name column.

  6. Click in the Value column to the right and click the lightning bolt icon. The Dynamic Data window opens.

  7. Select "categoryID" from the dataset (you may need to click the + button to expand the list of database columns).

  8. Click OK to close the parameters window.

  9. Click OK to close the Select File window.

  10. Breathe a sigh of relief and jump to step 15.

  1. From the Application tab of the Insert bar, choose Go To Detail Page (see Figure 22-20).

    The Go To Detail Page dialog box appears. This window lets you create a special link to another dynamic pagein this case a page that will list all of the products in a particular category.

  2. Click the Browse button. Select the file categories.asp , and then select rsCategories from the Recordset menu.

    Dreamweaver fills out all of the other settings (Figure 22-34).

The categories.asp page, linked to in this case, is a dynamic page that's already been created. Essentially it's built just like the products.asp pagethe only difference is that the products recordset has an added filter that only retrieves records that match a particular category ID.
figs/22_34.jpg
  1. Click OK to close this window.

    And now you'll preview to make sure it works.

  2. Press F12. When the page opens, click any of the category names at the left side of the page.

    A new page should open listing all of the products within a particular category as shown in Figure 22-35.

The Go To Detail Page server behavior isn't limited to linking a page that lists just one record. It can provide the information necessary to retrieve any number of database records that meet certain requirementsin this case, all records that match a particular category.
figs/22_35.jpg

Congratulations! You've just built two powerful, complex dynamic Web pages (and probably watched three presidential administrations pass). As you can see, Dreamweaver MX 2004 has an impressive array of tools for building dynamic pages. And even though there were some twists and turns to negotiate, you never once had to resort to the dreaded Code view.



Dreamweaver MX 2004. The Missing Manual
Dreamweaver MX 2004: The Missing Manual
ISBN: 0596006314
EAN: 2147483647
Year: 2003
Pages: 191

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