Exercise 3: Linking the Trip Search Results page with the Trip Detail page

In this exercise, you will modify the Trip Search Results page to let the user view the details of any trip. To do this, you will convert each trip name entry in the results page to a link, which will display the trip’s detailed information in the detail page.

Use the following steps to link the Trip Search Results page (tripsearchresult.cfm) to the Trip Detail page (tripdetail.cfm).

To create links between the Trip Search Results page and the Trip Detail page:

  1. Open the tripsearchresult.cfm file from the my_app directory.
  2. Replace #tripName# in the cfoutput block with the following code:
    <a href="tripdetail.cfm?ID=#URLEncodedFormat(tripID)#">#tripName# </a>
    

    Note: The URLEncodedFormat is a ColdFusion function that returns a URL-encoded string. Spaces are replaced with %20, and nonalphanumeric characters with equivalent hexadecimal escape sequences. The function lets you pass arbitrary strings within a URL, because ColdFusion automatically decodes URL parameters that are passed to the page.

  3. Save the file.

To test the revised page:

  1. View the tripsearchform.cfm page from the my_app directory in your browser.
  2. In the Trip Location drop-down list, select Begins With, and enter the value C.
  3. Click Search.

    The Trip Search Results page displays a hyperlink for each trip name, as the following figure shows:


    This image shows a picture of the Trip Search Results page.

  4. To view the Trip Detail page for a trip, click the trip name.

You might notice that the dates and prices in both the Trip Detail and Trip Search Results pages are unformatted. You will improve the appearance of the application in Exercise 4: Enhancing the look of the Trip Search Results and Trip Detail pages.