Figure 1: Master Detail Page Set Dialog Box
Putting together a simple database search is a piece of cake using built-in Dreamweaver tools -- no coding required. We'll show a simple Master/Detail Page Set behavior and how to add a simple search form to it. This tutorial will work with any Dreamweaver server model. Part 2 will focus on PHP and show a more advanced search.
The Master/Detail Page Set is a data object in Dreamweaver CS3 or an application object in previous versions of Dreamweaver. The behaviors are identical...only the names have changed. The Master Detail Page Set object can be found on the Insert bar or the Insert menu. When I build pages like this, I like to work in reverse -- build the functionality for displaying the data records first, and then add the search functionality after everything is working properly. This gives me the benefit of having my design and functionality working before adding the search functionality.
Create a page called results.cfm (or results.php, results.asp, for whatever server model you are using). You will need a recordset on the page before you use it, however. We'll use the Northwind database, which is a common database used in many demonstrations -- it comes free with Access and MS SQL Server. I translated it for MySQL and it can be downloaded from my site.
I'll assume you know how to create a database connection. Create a new recordset using the Simple recordset dialog box. Usually I do not use this version of the recordset dialog, but for a page such as this it works out perfectly. It will also allow us to add the search later. Open the recordset dialog and choose the connection for Northwind and the Products table. Choose all the fields. Don't check the "All" radio button -- instead manually select all of the fields. For performance reasons, it is a very bad practice to use "SELECT *" in a query. When manually choosing all fields, the performance will not be affected, but another reason to manually select the fields is that it's easier to look at the code in the page and know what is going on if the field names are specified. We won't choose a filter at this point. Test the recordset and click OK.
Next, open the Master Detail Page Set data object from the Insert bar or Insert menu.
Figure 1: Master Detail Page Set Dialog Box
For the master page, choose the fields ProductID, ProductName, UnitPrice, and UnitsInStock. Choose the ProductID field for both "Link To Detail From" and "Pass Unique Key". Finally, type in the name of a details page. This page will be automatically created by the behavior, so name it detail.cfm (or detail.php, detail.asp).
When you test the master page you should see 10 records:
Figure 2: Master page
Clicking the linked ProductID number will take you to the details page.
Now, we'll create a form on a blank page, save it as a snippet, and then insert it on the master page to make it a search page. By turning the form into a snippet, we can then easily insert search boxes on other pages in the web site and the search form action will point to our master page.
We'll start by creating the form on a blank page. Open a blank page in design view. Click the Layout tab of the Insert bar. Click the Insert DIV icon. Insert a div tag with an ID of "searchform". The text "Content for id "searchform" Goes Here" should be highlighted -- delete the text and leave the cursor where it is.
Click the Forms tab on the Insert bar. Click the Form icon to insert the form, then without moving the cursor in design view, click the Text Field icon. This will bring up the following dialog box:
Figure 3: Inserting a text field
Set the ID and Label of the field to "Search". Wrap the field with the label tag, and choose to insert the label before the form item and click OK.
Next, click the Button icon on the Insert bar to insert the submit button. For the submit button, use an ID of Submit, but no label tag. Click OK.
Finally, switch to code view and set the form method to "get" and the action to "results.cfm" (or your own results page).
This gives you a complete form that can be used on any page. The form should be inside the searchform div.
The search form will be useful in the site, so we'll turn it into a snippet. In Code View, select the entire <div> tag with the search form inside it. Right-click and select "Make New Snippet":
Figure 4: Creating a new snippet
For Snippet type, choose Insert Block with a preview type of Design. The snippet will now be handy to use on any page in the site that needs the search form.
To testthe snippet, open the results.cfm master page and position the cursor at the top of the page. Press the enter key to create a space for the form and then click Insert Search Form snippet from the Snippets panel. This should insert a search form at the top of the master page.
Now, all that is left is to filter the recordset on the master page. Double-click the recordset in the Bindings panel to bring up the Simple dialog box again. Choose to filter the recordset by a URL variable named "Search" where the ProductName field "contains" the URL variable. This will filter the master page by your search form using a LIKE in the SQL query, allowing partial, or "fuzzy" matches with the data. A search query of "Anton" will return "Chef Anton's Cajun Seasoning" as well as "Chef Anton's Gumbo Mix".
The search form can be on any page. As long as the action points to the results page, you will have a search results page that works from any page in the web site.
Figure 5: Searching the results page
You'll also want the search term to remain in the text box. This is a little tricky, but can also be done with DW tools. Go to the bindings panel and click the plus sign (+). Add a new URL variable named "Search". Now, drag/drop this onto the search field on the page. This will display the current URL variable in the box.
Finally, we'll add two more Dreamweaver server behaviors to the page to finalize the search/results functionality. If a user searches for something that does not exist in the data, we don't want to simply display a blank table -- the current situation. Instead, we want a message to appear that the search was not successful. This will require two steps -- hide the table if no results are found, and show a message if no results are found. There are two behaviors for this under "Show Region" -- "Show If Recordset Is Not Empty" and "Show If Recordset Is Empty". The first is easy -- select the entire table on the page and apply the "Show If Recordset Is Not Empty", choosing the current recordset.
The next part is slightly trickier -- you have to add some text to the page design, somewhere under the table, that will display only when no search results are found. First, position your cursor on the page below the table. Hit the Enter/Return key to give you a new paragraph, then type "No results found". Select the <p> tag in the tag selector and then apply the server behavior "Show If Recordset Empty" to the tag. Now, when you search for something that doesn't exist, the page will show the message, but the message will be hidden when there is a search result.
Creating a search form with a results/details (or master/details) page set can be a simple thing using Dreamweaver's built-in tools. Part 2 of this series will show a more advanced search for PHP using a little hand-coding. ColdFusion and ASP will follow.