Makeover Exercise

Team-Fly

---

	ColdFusion® MX: From Static to Dynamic in 10 Steps By Barry Moore
	Table of Contents
	Step 5.  Using Forms with ColdFusion MX

---

Beelze-Bubba does not have a lot of products at the moment, but the company is growing quickly. In this exercise, we are going to create a small search form to go on the Products page so that users can search for products by entering keywords.

1. Open Products.cfm from your NewSite\Products folder. Add the following code just below the banner image in the main body text cell.

    <!--- add a search form to search by keywords --->  <P >        <FORM ACTION="SearchResults.cfm" METHOD="post">          Product Search:          <INPUT TYPE="text" NAME="Keyword">          <INPUT TYPE="submit" VALUE="Search"><BR>        </FORM>  </P>

2. Save Products.cfm.

3. Open ProductList.cfm from your NewSite\Products folder. Use File, Save As to save this file into your NewSite\Products folder as SearchResults.cfm.

4. Find the query at the top of the page and change it to the following:

    <!--- query the database based on category        keyword passed from form   --->  <CFQUERY NAME="qProducts" DATASOURCE="BBdata">        SELECT  ProductNo, Name, Description, Category,                Price, ImageFile, OnSpecial, SpecialPrice        FROM    Products        WHERE   Name        LIKE '%#Trim(FORM.Keyword)#%'        OR      Description LIKE '%#Trim(FORM.Keyword)#%'  </CFQUERY>

   NOTE

   For a review of the functionality of the % symbol, see the sidebar "Dealing with Wildcards" in Step 3.

   This will instruct ColdFusion to execute a query and look for the keyword from the form in either the product name or the product description.

5. Find the following code at the beginning of the main body text cell:

    <CFOUTPUT>#URL.Category#</CFOUTPUT><BR>

   Replace this code with the following line:

    <CFOUTPUT>Search Results - #qProducts.RecordCount# </CFOUTPUT><BR>

   This will show users how many matches were found for their keyword.

6. Save your files.

7. Browse to the Products page in your browser, enter peppers in the search box (as shown in Figure 5.19), and click the Search button.

   Figure 5.19. Using the search form.

   

   View the search results on the Search Results page. You should see results similar to the ones in Figure 5.20.

   Figure 5.20. Product Search results

   

---

Team-Fly

Top