• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Makeover Exercise

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.

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 CLASS="header"> 
      <FORM ACTION="SearchResults.cfm" METHOD="post"> 
        Product Search: 
        <INPUT TYPE="text" NAME="Keyword"> 
        <INPUT TYPE="submit" VALUE="Search"><BR> 

Save Products.cfm.

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

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 
      SELECT  ProductNo, Name, Description, Category, 
              Price, ImageFile, OnSpecial, SpecialPrice 
      FROM    Products 
      WHERE   Name        LIKE '%#Trim(FORM.Keyword)#%' 
      OR      Description LIKE '%#Trim(FORM.Keyword)#%' 


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.

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


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.

Save your files.

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



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint