Building the Trip Detail page

To build the Trip Detail page, you do the following:

To build the CFC query:

  1. Create a blank ColdFusion page.
  2. Save the file as tripdetail.cfm in the my_app directory.
  3. Perform the following steps, or do the steps in the Let Dreamweaver do it section.
    1. Enter the following code:
      <cfinvoke
        component="cfdocs.getting_started.my_app.components.displaytripdetail"
        method="getTripDetails"
        returnvariable="tripDetails">
      </cfinvoke>
      
    2. Save the file.
    3. Create a file named displaytripdetail.cfc in the my_app/components directory.
    4. Enter the following code:
      <cfcomponent>
        <cffunction name="getTripDetails" access="public" returntype="query">
          <cfset var tripDetails = "" >
          <cfquery name="tripDetails" datasource="CompassTravel" maxrows=1>
          	SELECT * FROM trips
      			<cfif IsDefined("URL.ID")>
      			WHERE tripID = #URL.ID#
      			</cfif>
          </cfquery>
          <cfreturn tripDetails>
        </cffunction>
      </cfcomponent>
      
    5. Save the file.

Let Dreamweaver do it

You can use the Dreamweaver Extensions to build the CFC query.

To create the CFC query in Dreamweaver:

  1. Open a new file in the my_app directory in Dreamweaver.
  2. Save the file as tripdetail.cfm.
  3. Click the Bindings tab.
  4. Click the + button.
  5. Select Recordset (Query).
  6. In the Name text box, enter tripDetails.
  7. In the Data sources list, select CompassTravel.
  8. Click the CFC Query button.
  9. In the Name text box, enter tripDetails.
  10. Click the Create New Component button.
  11. In the Name text box, enter displaytripdetail.
  12. In the Component Location text box, enter /components/.
  13. In the Recordset name text box, enter tripDetails.
  14. In the Function text box, enter getTripDetails.
  15. In the Data source list, select CompassTravel.
  16. In the Table list, select trips.
  17. Click OK.
  18. When asked whether to include dependent files, click Yes.
  19. Click OK.
  20. In the displaytripdetail.cfc file, modify the cfquery code block by adding the highlighted text:
    <cfquery name="tripDetails" datasource="CompassTravel" maxrows=1>
        	SELECT * FROM trips
    			<cfif IsDefined("URL.ID")>
    			WHERE tripID = #URL.ID#
    			</cfif>
        </cfquery>
    
  21. Save the file.

To display the results of the query on the Trip Detail page:

  1. Open the tripdetail.cfm file.
  2. Enter or copy and paste the following cfoutput code after the cfinvoke code block:
    <cfoutput query="TripDetails">
    	<img src="images/tripmaintenance.gif">
    <table>
    	<tr>
    		<td valign="top">	Trip Name:
    		</td>
    		<td>	#tripName#
    		</td>
    	</tr>
    	<tr>
    		<td valign="top">	Description:
    		</td>
    		<td>	#tripDescription#
    		</td>
    	</tr>
    	<tr>
    		<td valign="top">	Location:
    		</td>
    		<td>	#tripLocation#
    		</td>
    	</tr>
    	<tr>
    		<td valign="top">	Departure Date:
    		</td>
    		<td>	#departureDate#
    		</td>
    	</tr>
    	<tr>
    		<td valign="top">	Return Date:
    		</td>
    		<td>	#returnDate#
    		</td>
    	</tr>
    	<tr>
    		<td valign="top">	Price:
    		</td>
    		<td>	#price#
    		</td>
    		</tr>
    	<tr>
    		<td valign="top">	Base Cost:
    		</td>
    		<td>	#baseCost#
    		</td>
    	</tr>
    	<tr>
    		<td valign="top">	Trip Leader:
    		</td>
    		<td>	#tripLeader#
    		</td>
    	</tr>
    	<tr>
    		<td valign="top">	Number People:
    		</td>
    		<td>	#numberPeople#
    		</td>
    	</tr>
    	<tr>
    		<td valign="top">	Deposit Required:
    		</td>
    		<td>	#depositRequired#
    		</td>
    	</tr>
    	<tr>
    		<td valign="top">	Photo File:
    		</td>
    		<td>	#photo#
    		</td>
    	</tr>
    </table>
    </cfoutput>
    
  3. To provide a title that appears in the browser window, insert the following HTML code before the <cfoutput query = "TripQuery"> line:
    <html><head>
    	<title> Trip Maintenance - View Record </title>
    </head>
    <body>
    
  4. Add the following code at the end of the file:
    </body>
    </html>
    
  5. Save the file.

To view the Trip Detail page:

  1. Open a browser.
  2. Enter one of the following URLs, which use the tripID of 24, which specifies the Rio Cahabon Rafting trip:
    http://localhost/cfdocs/getting_started/my_app/tripdetail.cfm?ID=24
    

    Note: If you are using the built-in ColdFusion server, enter localhost:8500 instead of localhost.

    The following figure shows the expected result:


    This image shows a picture of Trip Maintenance page.

Reviewing the code

The following table describes the ColdFusion code that you use to build the Trip Detail page:

Code

Explanation

<cfcomponent>
  <cffunction name="getTripDetails" access="public" returntype="query">
...
<cfreturn tripDetails>
  </cffunction>
</cfcomponent>

The cfcomponent tag creates a CFC. The cffunction tag creates a method named getTripDetails in the CFC; the method returns the results of the query to the calling page.

<cfquery name="TripQuery"
dataSource="CompassTravel" maxRows=1>

The cfquery tag includes a maxRows attribute. This attribute limits the number of result rows brought back from the database. In the Trip Detail page, you want to show only a single row at a time; therefore, the maxRows attribute is set to 1.

<cfif IsDefined("URL.ID")>
	WHERE tripID = #URL.ID#
</cfif>

The URL.ID specifies a parameter that you can include in the URL that requests this page. If the ID parameter is passed within the URL, it is used in the SQL query to identify the tripID to SELECT. You can use the CFML IsDefined function to determine if a parameter is passed within the URL. You can also use IsDefined to determine if the user has entered data in form fields prior to the form post action.

As you did in this exercise, you can build comprehensive database query applications using CFML and dynamic SQL. To further test the new Trip Detail page that you created, you will link it to the search facility that you built in Lesson 4: Building Dynamic Queries. However, before you link that search facility, you must understand a potential security risk using dynamic SQL. The following exercise describes this risk and how to avoid it.