Adding navigation buttons to browse the database

The drill-down search function developed in Lesson 5: Creating a Trip Detail Page is very useful when the user knows some search criteria to enter. Flipping back and forth between the results page and the detail page to navigate through a record set can be tedious. Moreover, on occasion the trip coordinator might want to browse the Trips database just to check for anomalies or to become familiar with its contents. In these cases, the trip coordinator does not know the criteria to search for in advance.

The following figure shows the navigation buttons. The label below each button does not appear in the application; it describes which row to display relative to the currently displayed row.


This image shows a picture of the Trip Detail page navigation buttons.

To add navigation buttons to the Trip Detail page:

  1. Open the tripdetail.cfm file in the my_app directory.
  2. Insert the following code between the </table> and </cfoutput> tags:
    <form action="navigationaction.cfm" method="post">
    	<input type="hidden" name="RecordID" value="#tripID#">
    	<!--- graphical navigation buttons --->
    	<input type="image" name="btnFirst" src="images/first.gif">
    	<input type="image" name="btnPrev" src="images/prev.gif">
    	<input type="image" name="btnNext" src="images/next.gif">
    	<input type="image" name="btnLast" src="images/last.gif">
    </form>
    

    Note: The current trip record ID (tripID) is in a hidden field in the form code. This field provides the action page with current record ID that it must have in order to build the query to access the appropriate record in the Trips database table.

  3. Save the file.

To test the updated application:

  1. View the updated tripdetail.cfm page in a browser.

    The Trip Search Results page appears:


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

  2. Test the buttons by clicking any navigation button.

    An error occurs because the navigation action page (navigationaction.cfm) does not exist. The navigation action page processes the navigation button requests. You will build the navigation action page in Lesson 7: Validating Data to Enforce Business Rules.

Reviewing the code

The following table describes the navigation code for the Trip Detail page:

Code

Explanation

<form action="navigationaction.cfm" method="post">

Form tag that identifies the navigationaction.cfm file to handle record navigation.

<INPUT type="hidden" name="RecordID" value="#tripID#">

Hidden RecordID field with the value of the current tripID.

<input type="image" name="btnFirst" src="images/first.gif">
<input type="image" name="btnPrev" src="images/prev.gif">
<input type="image" name="btnNext" src="images/next.gif">
<input type="image" name="btnLast" src="images/last.gif">

Navigation buttons that are image type HTML input tags.