Macromedia Dreamweaver MX 2004 Demystified

Each of the following sections briefly outlines a common type of dynamic page or task and includes an exercise demonstrating the procedure. Before performing any of the exercises, be sure you're set up for online or offline dynamic development. The antiques database used in the exercises is available on the book's website at www.peachpit.com in the chapter_22 folder, in both Microsoft Access and MySQL format. You need to install the database on your server. Depending on your setup, you also might need to create a DSN and configure the ColdFusion MX server. The chapter_22 folder on the book's website contains exercise files for ASP/VBScript, ASP.NET/C#, ColdFusion, PHP, and JSP. Use the appropriate folder for the technology you're employing . Before beginning, you also need to define a Dreamweaver site, with local and testing server information filled in. You also need to define a connection to the antiques database.

Creating a Catalog Page

A catalog page displays multiple records from the database. Usually, it displays multiple records at a time, using recordset paging and navigation indicators to link between displays. Catalog pages make heavy use of dynamic text and images, along with repeating regions .

Exercise 22.1. Creating a Catalog Page for the Antiques Barn Site

In this exercise, you'll build the Antiques Barn catalog page. This page should display all stock items from the antiques database, including each item's name , description, price, and picture. The finished page should look like Figure 22.20.

Create a Recordset

Before you can display information from the database, you must collect it. This is called creating a recordset. It involves determining what information you need and how it should be ordered and querying the database.

1. Open catalog.cfm, catalog.php , or catalog.aspx and examine it. The layout framework is the same as that shown in Figure 22.20, but the central content area is currently empty.

2. Open the Bindings panel (select Window > Bindings, or expand the Application panel group ).

3. Click the + button and choose Recordset (Query) from the menu.

4. In the dialog box that appears, set the following options (see Figure 22.21):

   Figure 22.21. Creating a recordset that collects all stock items from the antiques database.

   • Connection, or Database antiquesConn

   • Table stockitems

   • Columns all

   • Filters none

   • Sort itemname, ascending

5. Click OK to close the dialog box.

The recordset now appears in the Bindings panel, as shown in Figure 22.22. Click the triangle by its name to expand it so that you can see its fields (itemname, description, price, and so on). You now have access to these pieces of information for every record in the stock items table of the antiques database.

Create and Format Dynamic Text

Dynamic text elements in this page are the item's name, description, and price, which appear in the right-side column of the layout.

1. In the Bindings panel, select the itemname field and drag it to the right-side empty cell in the page's layout table.

2. Place the cursor after this item and press Enter to create a new paragraph.

3. From the Bindings panel, drag the description recordset item to the space below the item name.

4. Place the cursor after this item and press Enter to create a new paragraph.

5. From the Bindings panel, drag the price recordset item to the space below the description text.

Now that the text is in place, it appears in Design view as placeholder text. The placeholders can be formatted and treated like any other text.

1. In the document, select the paragraph containing the itemname placeholder.

2. In the Property Inspector, use the Style drop-down menu to apply the itemname style to your paragraph.

3. Repeat this process to add the price style to the price placeholder.

4. Type $ immediately preceding the price placeholder. Figure 22.23 shows what the page should look like at this point.

   Figure 22.23. The Antiques Barn catalog page with dynamic text elements in place and formatted.

Preview the Page

It's time to see what kind of code you've created and how it will behave in the browser.

1. To see your page's code, switch to Code view. Note that server code appears above the opening <html> tag and below the closing </html> tag. This is the code for linking to the connection script (PHP and ASP. NEXT only) and creating the recordset. It also appears within the document, where your dynamic text elements are placed.

   PHP . Any code within the <?php ... ?> tag is PHP script.

   ASP.NET . Any code within the <% ... %> tag is ASP.NET scripting, written in either C# or Visual Basic.

   ColdFusion . Any tag that begins with cf (such as cfoutput ) is a ColdFusion markup tag, which includes scripting information that the server executes.

   When the application server processes this page, it leaves the regular HTML elements alone and processes all script within the specified server tags.

2. In the document toolbar, click the Live Data View button. The formatted text placeholders for the first item in the database (the bookcase ) should appear. Note also how the information at the top of the Document window changes to indicate that you're viewing your Dreamweaver document through the Apache server (see Figure 22.24).

   Figure 22.24. Previewing the catalog page in Live Data view in Dreamweaver.

3. When you're done examining the live preview, turn off Live Preview by clicking the Live Data View button in the toolbar again.

4. Preview in the browser (select File > Preview in Browser). Note that the browser's URL field says something like http://localhost/antiquesbarn/TMP xxxxx .php . This tells you that the page is being served , rather than just viewed through your computer's file system.

5. Still in the browser, view source to see the code for the file (select View > Source or View > Page Source, depending on your browser).

Note that the page is now just plain old HTML. The text placeholders have been replaced by actual text, and the scripting before and after the <html> tags is gone. The web server executes the server-side scripting and creates regular HTML before passing the page to the browser. That's why server-side scripting is not browser-dependent, like JavaScript.

Add a Dynamic Image

The Antiques Barn catalog page also needs to display a picture of each antique in its database. For this, you use a dynamic image:

1. In the catalog page, place the cursor in the table cell where the dynamic image should appear. Choose the Image object from the Insert bar or select Insert > Image.

2. When the Insert Image dialog box opens, click the Data Sources button to choose the image source from the database rather than from an existing file (see Figure 22.25).

   Figure 22.25. Inserting a dynamic image for the Antiques Barn catalog page.

3. When the Data Sources dialog box opens, select imagefile from the list of available recordset items (see Figure 22.25).

4. Click OK to close both dialog boxes.

5. Examine the dynamic image. In Design view, it appears as a special lightning-bolt placeholder. In Code view, it's a standard img tag, but with server-side scripting in the middle. It looks like this in ColdFusion:

   <img src=" <cfoutput>#Recordset1.imagefile#</cfoutput> ">

   and like this in PHP:

   <img src=" <?php echo $row_Recordset1['imagefile']; ?> ">

   In the processed page that the browser sees, the contents of the imagefile database field are substituted for everything within the server tag.

6. Preview in a browser to see the results. The image doesn't display correctly. Why not? While still in the browser, view source code. The code for the image looks like this:

   <img src="bookcase.jpg">

   Using the Dreamweaver Site panel, check the files in your site. The images are in a folder called images . The correct link to this image should reflect this:

   <img src="images/bookcase.jpg">

   You need to edit the img tag in your document to include the correct path .

7. In Dreamweaver, select the dynamic image. In the Property Inspector, place the cursor at the beginning of all the text in the Src field, and type images /. The PHP code for the image should now look like this for ColdFusion:

   <img src="images/ <cfoutput>#Recordset1.imagefile#</cfoutput> ">

   or like this for PHP:

   <img src="images/ <cfoutput>#Recordset1.imagefile#</cfoutput> ">

8. Preview in the browser. You'll see that the image displays properly. View the source code to see why this is so.

Add a Dynamic Alt Label

Finally, the Antiques Barn images should have alt labels to make them accessible. You can do this by using the Tag Inspector to add a dynamic property to the img tag.

1. Select the dynamic image.

2. Open the Tag Inspector panel (select Window > Selection Inspector). Bring the Attributes tab to the front if it's not already in front.

3. In the General category of attributes, find the alt attribute and select it.

4. In the right-side (value) field for the alt attribute, click the lightning-bolt icon. When the dialog box opens, choose itemname as the field you want the alt label to display, as shown in Figure 22.26.

   Figure 22.26. Assigning the item-name database field as the dynamic alt text for an Antiques Barn image.

5. Click OK to close this dialog box.

6. Preview in the browser, and view source code to test your alt label. Using the lightning-bolt icons that occur in the Tag Inspector and Property Inspector, you can substitute database field information for most object attributes.

Add a Repeating Region to Display Multiple Records

So far, your dynamic page displays only the first database record it finds. That's not a very complete catalog! To display multiple records, you need to define the table row containing your dynamic elements as a repeating region.

1. Select the table row containing the dynamic image and text. (The safest way to do this is by clicking inside the row and using the Tag selector to select the tr tag.)

2. In the Application Insert bar, choose the Repeated Region object.

3. In the dialog box that opens, set the following:

   • Recordset Recordset1 (the only option!)

   • Show 5 records at a time

4. Click OK to close the dialog box. In Design view, your repeating region is marked by a labeled box, as shown in Figure 22.27.

   Figure 22.27. A repeating region on the Antiques Barn catalog page.

5. Preview in a browser to test your multiple records. Your page now contains five antiques!

Add a Recordset Navigation Bar

Unless your database is very small, it's not wise to display all records on the same page. That's why the current page displays only five records. Now you'll add a set of Recordset Paging objects.

1. You want to add a special row of the layout table to hold the navigation bar. To do this, select the row after the repeating row, and choose Modify > Table > Add Row.

2. Select all the cells of the new row, and merge them (select Modify > Table > Merge Cells ).

3. Place the insertion point inside the new row.

4. From the Insert bar, choose the Recordset Navigation Bar object. In the dialog box that appears, set the following:

   • Recordset Recordset1

   • Display Text

5. Click OK to close the dialog box. There's your navigation bar! It appears in its own table, nested inside the main table, as shown in Figure 22.28.

   Figure 22.28. Inserting a recordset navigation bar for the Antiques Barn catalog page.

6. Select the navigation bar table, and use the CSS Styles panel to apply the nav style. This formats the text.

7. Set the table's width to 100% so that it stretches to fill the entire width of the layout.

8. Preview in the browser to test your navigation. You can use the links to navigate between pages, each of which contains five records (see Figure 22.29).

   Figure 22.29. The Antiques Barn catalog page with recordset paging in place.

Add a Recordset Navigation Status Indicator

Now that the user can navigate between pages, it would be nice to give him an indication of which records he's looking at (the first five, the last five, and so on). This means adding a Recordset Navigation Status object. You'll add a new row at the beginning of the nested navigation bar table to contain this text:

1. Place the insertion point in the one and only row in the navigation bar table, and choose Modify > Table > Insert Row to add a new top row. (Or choose the Insert Row Above object from the Layout Insert bar.)

2. Select all cells in this row, and choose Modify > Table > Merge Cells.

3. Place the insertion point inside the newly merged cell. In the Insert bar, choose the Recordset Navigation Status object.

4. When the dialog box appears, set it to display RecordSet1. Click OK to close the dialog box.

5. Examine your document. A combination of static and dynamic text has been added, as shown in Figure 22.30. You can format this text, or change any of its static elements, without disturbing its functionality. Change the word Records to Show Items to be more user-friendly.

   Figure 22.30. Inserting a recordset navigation status bar on the Antiques Barn catalog page.

6. Preview in a browser to see your navigation object in action.

   Congratulations! You've created your first display page using Dreamweaver and server-side scripting.

Creating a Search Page

One of the best things about databases is that they're searchable. By adding a search function to your site, you pass that power along to your site visitors . Searches involve two pages: the search form, where the user specifies what search criteria to use, and the results page, which uses dynamic elements to display only data matching the search criteria.

Exercise 22.2. Creating a Search Page for the Antiques Barn Site

In this exercise, you'll add scripting to a search page, learning how to create dynamic form elements along the way and seeing how to search the database and create a results page. If you've never worked with form processing, you'll also get to see how information is passed from one HTML page to another as parameters.

You'll start by developing the search page itself, which collects user input to determine what to search for. Then you'll develop the results page, which uses this input to determine which database records to display.

Set Up a Dynamic List/Menu

The search page for the Antiques Barn lets the user choose a category of antiques to search for. It does this by presenting a form that lists the available categories as a drop-down menu (a <select> form element). Therefore, this page needs to access the database, collect a list of categories from the stockitems table, and display them.

1. Open search.cfm, search.php , or search.aspx from your local site files.

2. To create the recordset, open the Bindings panel, click the + button, and choose Recordset (Query). In the dialog box, set the following (see Figure 22.31):

   Figure 22.31. Creating a recordset for the Antiques Barn search page.

   • Connection/Database antiquesConn

   • Table stockitems

   • Columns selected, category

   • Sort category, ascending

3. Before closing the dialog box, click the Test button to see what kind of data you're collecting. You get a list of categories, but there are multiple instances of each category, because the stockitems table contains multiple items in each category (see Figure 22.32).

   Figure 22.32. Testing the search page recordset.

4. That's not too good! You need to collect only one instance of each category.

   Close the Test window and click the Advanced button in the Recordset (Query) dialog box. In Advanced mode, change the SQL query so that it reads like this (the new code is in bold):

   SELECT DISTINCT category FROM stockitems ORDER BY category ASC

   Click the Test button again. That's more like it! Only one of each category appears.

5. Click OK to close the dialog box. In the Bindings panel, you now see a recordset consisting of one item (category).

6. You need to use this dynamic data to populate the list/menu form element. Select the list in the Document window. In the Property Inspector, note that its name is category . You'll need to remember that for later.

7. With the list/menu still selected, in the Property Inspector click the Dynamic button. This opens a dialog box that lets you display record data in the pop-up list. In the dialog box, click the + button in the Static items area to add one static item. Give it a label of (select one) and no value. In the bottom half of the dialog box, set the following (see Figure 22.33):

   Figure 22.33. Setting the search page's drop-down menu to display dynamic data.

   • Options from Recordset Recordset1

   • Values category

   • Labels category

   • Set select value equal to leave blank

8. Click OK to close the dialog box.

9. Preview in the browser, and try out the pop-up list. It should look like the one shown in Figure 22.34.

   Figure 22.34. The search page's dynamically populated drop-down menu in action.

Call the Results Page

The search page looks great. Now you need to make it functional. Clicking the Submit button in any form calls the page that's indicated in the form's action attribute, sending the form field values as parameters. When you're working with server-side scripting, the form action calls a dynamic page. The server sends the form values to that other page, processes any script in the page, and returns the processed page to the browser.

1. In the search document, select the form element. (Use the Tag selector if necessary.)

2. In the Property Inspector, set the Action to results.cfm, results.php , or results.aspx , depending on your server technology. (Just type in the name. The file doesn't exist yet, so you can't browse to it!)

3. Set the method to GET . (You'll see what this means in a later step.)

4. Save and close the search page.

Create the Results Page

The results page should display database records, so it's essentially the same as the catalog page you created in the previous exercise. The only difference is, the results page doesn't display all the recordsonly those requested by the search page. To create the results page, you'll start from the catalog page to save yourself some work.

1. In the Site panel, select the catalog page. Ctrl-click the file to access the context menu, and choose Edit > Duplicate. Call the duplicated file results.cfm, results.php , or results.aspx , as appropriate.

2. The search engine isn't fully functional yet, but it's time for a quick preview. First, upload both files (the search page and the results page) to the Testing Server.

3. Open the search page and preview it in a browser. Choose a category from the drop-down menu, and click the Search button.

   The results page should appear. (The contents won't reflect your search yet.) Examine the URL and see how the form input has been passed as a URL parameter:

http://localhost/antiquesbarn/results.php?category= clocks&submit=search

This shows how the search works. The parameter category and its value are both passed from the search page to the results page. All that's left is to revise the results page to make use of this parameter. (If you had specified POST as the form's method, the information would be passed invisibly instead of attached to the URL.)

Refine the Results Page

In a search-and-results page set, the results page does all the work, translating the passed parameters or form variables into useful information. You must now change the recordset in results.php so that it collects only records whose category matches the category in the parameters.

1. Open the results page in Dreamweaver.

2. In the Server Behaviors panel, double-click the Recordset1 behavior to open its editing window. (If the window opens in Advanced view, click the Simple button to return to Simple view.)

3. Add the following settings (see Figure 22.35):

   Figure 22.35. The Recordset (Query)/DataSet dialog box, ready to filter the antiques recordset based on a passed form value.

   • Filter by category

   • Operator =

   • Value Choose URL Parameter from the drop-down menu, and type category in the text field next to it. (If you had chosen POST as your search form's method, you would choose Form Variable from this drop-down menu instead of URL Parameter.)

4. Click OK to close the dialog box.

5. Upload the results page, and then open the search page and preview it in the browser. Choose a category, click Search, and see your lovely results! Figure 22.36 shows the search happening.

   Figure 22.36. Searching for an antiques category, and the displayed results.

Creating a Catalog Update Page

Another commonly used task in dynamic sites is allowing users to add information to the database. Every time a user registers as a member, or adds an item to a store's inventory, or even places an order, it involves adding or updating database records.

Exercise 22.3. Creating a Visitor Sign-In Page for the Antiques Barn Site

In this last exercise, you'll create a sign-up page where a user can add his or her name to a mailing list:

1. Open register.cfm, register.php , or register.aspx .

2. Examine the form. It has fields for fname, lname, and email. (These match the names of the fields in the database. It's not required that they do, but as you'll soon see, it makes life much easier.) The Sign Me Up button is actually a submit button (see the Property Inspector). The form element has no action specified.

Create a Recordset of Customers

Even though you won't be displaying any existing customer data on this page, you still need to create a recordset of customers so that you'll have access to this part of the database.

1. In the Bindings panel, click the + button and choose Recordset (Query)/DataSet.

2. In the dialog box that appears, set the following (see Figure 22.37):

   Figure 22.37. Creating a recordset to allow new users to be added to the antiques database.

   • Connection antiquesConn

   • Table customers

   • Columns selected (and select all except ID)

Insert a Record into the Recordset

1. Click OK to close the dialog box.

   When the user clicks the Submit button, you want to add his data to the created recordset and then send the browser to a Thank You page so that the user knows his submission has been accepted. You do this by attaching a server behavior to the Submit button.

2. Click the Submit button.

3. In the Server Behaviors panel, click the + button to show the list of available behaviors, and choose Insert Record. In the dialog box that appears, set the following (see Figure 22.38):

   Figure 22.38. Configuring the Insert Record server behavior for use with the Antiques Barn user sign-up.

   • After Inserting, Go To thankyou.html (you can browse to this file or enter its name manually)

   All form fields should be matched up with the corresponding database fields. Because the form fields are named the same as the database fields, Dreamweaver should already have matched these up.

Test the Registration Process

1. Click OK to close the dialog box.

2. To make sure your registration works, you have to preview it in the browser and then examine the database to see if a new record has been added.

3. Preview in the browser. Fill in the form with any values you choose.

4. Click the Sign Me Up button. You should be directed to the Thank You page.

5. To check the database, leave Dreamweaver and open the antiques database in Access or MySQL. View the users table. Your new user is there! You've just updated the database through your web page.