|[ LiB ]|
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.
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 .
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.
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.
Connection, or Database antiquesConn
Sort itemname, ascending
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.
Dynamic text elements in this page are the item's name, description, and price, which appear in the right-side column of the layout.
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.
In the document, select the paragraph containing the itemname placeholder.
In the Property Inspector, use the Style drop-down menu to apply the itemname style to your paragraph.
Repeat this process to add the price style to the price placeholder.
Type $ immediately preceding the price placeholder. Figure 22.23 shows what the page should look like at this point.
It's time to see what kind of code you've created and how it will behave in the browser.
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.
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).
When you're done examining the live preview, turn off Live Preview by clicking the Live Data View button in the toolbar again.
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.
Still in the browser, view source to see the code for the file (select View > Source or View > Page Source, depending on your browser).
The Antiques Barn catalog page also needs to display a picture of each antique in its database. For this, you use a dynamic image:
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.
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).
When the Data Sources dialog box opens, select imagefile from the list of available recordset items (see Figure 22.25).
Click OK to close both dialog boxes.
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.
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:
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:
You need to edit the img tag in your document to include the correct path .
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> ">
Preview in the browser. You'll see that the image displays properly. View the source code to see why this is so.
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.
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.
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.)
In the Application Insert bar, choose the Repeated Region object.
In the dialog box that opens, set the following:
Recordset Recordset1 (the only option!)
Show 5 records at a time
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.
Preview in a browser to test your multiple records. Your page now contains five antiques!
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.
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.
Select all the cells of the new row, and merge them (select Modify > Table > Merge Cells ).
Place the insertion point inside the new row.
From the Insert bar, choose the Recordset Navigation Bar object. In the dialog box that appears, set the following:
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.
Select the navigation bar table, and use the CSS Styles panel to apply the nav style. This formats the text.
Set the table's width to 100% so that it stretches to fill the entire width of the layout.
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).
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:
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.)
Select all cells in this row, and choose Modify > Table > Merge Cells.
Place the insertion point inside the newly merged cell. In the Insert bar, choose the Recordset Navigation Status object.
When the dialog box appears, set it to display RecordSet1. Click OK to close the dialog box.
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.
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.
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.
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.
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.
Columns selected, category
Sort category, ascending
SELECT DISTINCT category FROM stockitems ORDER BY category ASC
Options from Recordset Recordset1
Set select value equal to leave blank
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.
In the search document, select the form element. (Use the Tag selector if necessary.)
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!)
Set the method to GET . (You'll see what this means in a later step.)
Save and close the search 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.
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.
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.
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:
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.)
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.
Filter by category
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.)
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.
In this last exercise, you'll create a sign-up page where a user can add his or her name to a mailing list:
Open register.cfm, register.php , or register.aspx .
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.
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.
In the Bindings panel, click the + button and choose Recordset (Query)/DataSet.
In the dialog box that appears, set the following (see Figure 22.37):
Columns selected (and select all except ID)
After Inserting, Go To thankyou.html (you can browse to this file or enter its name manually)
|[ LiB ]|