| The first step in creating search and results pages is to choose the database to search. You don't need to use a database connection or a recordset to create the search page, but you do need to choose a database before deciding what search parameter(s) to include in the search page. The tasks in this chapter that involve using a single search parameter require using the cafetownsend database. The tasks that involve using multiple search parameters require using the CompassTravel database. We've used both of these databases in previous chapters. If you have not yet connected to these databases, see the sidebar "Using the Macromedia Sample Databases" You'll need a database connection when you create results pages later in the chapter. In the first exercise in this section, you'll create a search page that includes an HTML form with a menu that allows users to select one search parameter from the menu. We'll use ASP, but the process is the same for PHP or ColdFusion. In the second exercise, you'll create a search page that includes an HTML form with a menu and a text box that allows users to select one search parameter from the menu and enter an additional search parameter in the text box. We'll use ColdFusion, but the process is the same for ASP or PHP. Using the Macromedia Sample Databases The cafetownsend database is included with Dreamweaver 8 and comes in two forms: an Access database (tutorial.mdb) that you can use with ASP or ColdFusion, and a SQL file (insert.sql) that you can use to create a MySQL database to use with PHP. To find the sample database file in Windows, from the Start menu choose My Computer > Local Disk (C) > Program Files > Macromedia > Dreamweaver 8 > Tutorial_assets > cafe_townsend > data > tutorial.mdb. You can use this database with ASP or ColdFusion. If you use PHP with Windows or if you're using PHP with Mac OS X, you can use the MySQL database that you must create from the SQL file (insert.sql) included with Dreamweaver 8. For more information, see "Creating the MySQL Database," in Dreamweaver Help (F1). In addition, Chapter 5 includes details on creating a MySQL database. The CompassTravel database is included with ColdFusion MX 7. For more information on creating a connection to the CompassTravel database, see the section "To connect to a data source using ColdFusion," in Chapter 4. |
To create a search page that uses one search parameter: 1. | Open a new ASP page in Dreamweaver by choosing File > New > Dynamic page > ASP JavaScript. Save the page as search_simple.asp.
| 2. | From the Insert menu, select Form > Form to add a form to your page (Figure 11.1).
Figure 11.1. From the Insert menu, choose Form and then select Form from the submenu. 
If you're working in Code view, the Tag Editor dialog appears when you insert forms and form objects (Figure 11.2). You can set properties for forms and form objects here or in the Property inspector. You can also set them by entering the property values directly in the Code view window.
Figure 11.2. If you're working in Code view, the Tag Editor dialog appears when you insert the form. 
If you also want to specify accessibility properties in the Tag Editor dialog, make sure Accessibility Attributes for Form Objects is selected in Dreamweaver preferences (Edit > Preferences > Accessibility).
| 3. | From the Insert menu, select Form > List/Menu to add a menu to your page.
Now we'll set the properties for the menu we just added.
| 4. | In the Design View window, select the new menu.
| 5. | In the Property inspector, select the Menu radio button.
If the Property inspector isn't already open, from the main menu, choose Window > Properties.
| 6. | In the List/Menu field, type a name for the menu (Figure 11.3). Dreamweaver assigns the name select by default. In our case, since we're basing this menu on the ID field of the REGION table in the cafetownsend database, we're using the name ID.
Figure 11.3. In the Property inspector, select the Menu radio button to set the properties for your menu, and then type a name for the menu in the List/Menu field. 
Next we'll add items to the menu. Each menu item has a name and value based on the data in the REGION table. You can view the table in Microsoft Access (Figure 11.4) or you can view it in Dreamweaver. For more information, see "Viewing a Database," in Chapter 7.
Figure 11.4. You can view the REGION table of the tutorial.mdb database in Microsoft Access. 
| 7. | Click the List Values button in the Property inspector. The List Values dialog appears.
| 8. | Click the plus (+) button to add a menu item (Figure 11.5). Enter a label and a value for the first item. Use the first value from the NAME field in the REGION table for the label, and the corresponding value from the ID field in the same table for the value.
Figure 11.5. You add labels and values for menu list items in the List Values dialog. 
The label will display in the menu on the search page. The value will be sent to the results page when the user clicks the Submit button.
 Tip
Instead of manually entering the menu items, you can use a dynamic menu to automatically insert the menu items from the database table fields. You must first create a recordset that includes the NAME and ID fields from the REGION table. Then, in the Property inspector, click the Dynamic button instead of the List Values button (Step 7 of the preceding task) and complete the Dynamic List/Menu dialog. For more information on using a dynamic menu, see "To create a dynamic menu," in Chapter 8.
| 9. | Repeat Step 8 to add each item from the REGION table to the menu. You should have a total of six items in the menu. After you add the last menu item, click the OK button to save the menu items and close the dialog.
When the user selects a menu item from this menu, it will be used as the search parameter.
| 10. | From the Insert menu, select Form > Button to add a Submit button to the page.
The value of the menu item selected by the user will be submitted to the results page when the user clicks the Submit button.
| 11. | In Design view, select the form.
Dreamweaver automatically enters the name form1 in the Form field. We'll use this name for the form.
| 12. | In the Property inspector, enter the name of the results page, results_simple.asp, in the Action field (Figure 11.6). From the Method drop-down list, select GET to submit the form results using the HTTP GET method.
Figure 11.6. In the Property inspector, enter the name of the results page and choose a method for submitting the form data. 
| 13. | Save the page.
|
You've created a search page that uses one search parameter (region). In the "Creating a Results Page Recordset" section, later in this chapter, you'll create the results page to go with it. The next task involves creating another search pagethis time using two search parameters. To create a search page that uses multiple search parameters: 1. | Open a new ColdFusion page in Dreamweaver by choosing File > New > Dynamic page > ColdFusion. Save the page as search_advanced.cfm.
| 2. | Follow Steps 2 through 6 of the preceding task to add a form and a menu to the page.
| 3. | In the Property inspector, in the List/Menu field, type a name for the menu. In our case, because we're basing this menu on the eventtypes table in the Compass-Travel database, we're using the name event (Figure 11.7).
Figure 11.7. In the Property inspector, type event in the List/Menu field. 
Next we'll add items to the menu. Each menu item has a name and value based on the data in the eventtypes table (Figure 11.8).
Figure 11.8. The eventtypes table includes eventTypeID and eventType fields. 
| 4. | Click the List Values button in the Property inspector. The List Values dialog appears (Figure 11.9).
Figure 11.9. You add menu-list items in the List Values dialog. 
| 5. | Click the plus button to add a menu item. Enter a label and a value for the first item. Use the first value from the eventType field in the eventtypes table for the label, and the corresponding value from the eventTypeID field in the same table for the value.
The label will display in the menu on the search page. The value will be sent to the results page when the user clicks the Submit button.
| 6. | Repeat Step 5 to add each item from the eventtypes table to the menu. You should have a total of seven items in the menu. After you add the last menu item, click OK to save the menu items and close the dialog.
When the user selects a menu item to choose an event type from this menu, it's used as the first search parameter.
| 7. | From the Insert menu, select Form > Text Field to insert a text field on the page.
Next, in addition to selecting a certain type of trip (event type) from the menu, the user will be able create an advanced search by entering a maximum price for the selected event type using the text field. This will be our second search parameter.
| 8. | In Design view, select the text field.
| 9. | In the Property inspector, set the properties for the text field (Figure 11.10). In the Text Field text box, type a name for the text field. Since this field is used to enter a maximum price for a trip, we used the name Price. In the Char Width field and in the Max Chars field, type 4 to limit the text field to four characters. In the Type section, select the Single Line radio button.
Figure 11.10. Set the properties for the text field, including name, width, maximum number of characters, and type, in the Property inspector. 
Because the trips range from $1000 to $6000, the width of the text field and the maximum number of characters in the field are four characters. Because we've added a dollar sign ($) to the label for the Price text field, we won't need to count the dollar sign as one of the characters (Figure 11.11).
Figure 11.11. If you include a dollar sign ($) in the label for the Price text field, the user only needs to enter a four-digit value for maximum price. 
| 10. | From the Insert menu, select Form > Button to add a Submit button to the page.
The values of the two search parameters will be submitted to the results page when the user clicks the Submit button.
| 11. | In Design view, select the form. In the Property inspector, type form2 in the Form Name text field to name the form (Figure 11.12). In the Action field, type the name of the results page, results_advanced.cfm. In the Method field, select GET from the drop-down list to submit the form results using the HTTP GET method.
Figure 11.12. Enter a name for the form, the name of the results page, and a method to submit the form data in the Property inspector. 
| 12. | Save the page.
|
You've created a search page that uses two search parameters (event type and maximum price). In the following section, you'll create the results page to go with this search page. |
