Search Engine with alphabetical links, menus and navigation table on result page
By: carlos batista

<!---INDEX.CFM PAGE--->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search Engine</title>

<!---Populate search fields--->
<cfquery name="parkN" datasource="cfdocexamples">
SELECT PARKNAME
FROM APP.PARKS
GROUP BY PARKNAME
ORDER BY PARKNAME ASC
</cfquery>

<cfquery name="parkSTATE" datasource="cfdocexamples">
SELECT STATE
FROM APP.PARKS
GROUP BY STATE
ORDER BY STATE ASC
</cfquery>

<!---I Ussually link to a CSS file (style/global.css)--->
<style type="text/css">
td.dark {
    text-align: left;
    font-weight: bold;
    padding: 2px;
    border: 2px solid #FFFFFF;
    background: gray;
    color: #FFFFFF;
}
a {
    text-decoration: none;
    font-weight: bold;
    color: Blue;
}

a:hover {
    text-decoration: underline;
    color: maroon;
}
</style>


</head>

<body>
<CFform action="parkResult.cfm" method="post" name="form1">

<h3 align="center">
Please Select Park Name AND/OR State</h3>
<hr />

<!---Search form--->
  <table align="center">
    <tr>
      <td class="dark">PARK NAME:</td>
      <td><CFSELECT NAME="parkName" QUERY="parkN" VALUE="parkName" DISPLAY="parkName">
      <option value="" selected="selected"></option>
      </CFSELECT>
      </td>
    </tr>
    <tr>
      <td class="dark">STATE:</td>
      <td><CFSELECT NAME="state" QUERY="parkState" VALUE="state" DISPLAY="state"></CFSELECT></td>
    </tr>
    <tr>
      <td class="dark"><input type="submit" value=" Search Records " /></td>
      <td class="dark"><input type="reset" value=" Clear Form "</td>
    </tr>
  </table>

<!---Link Search--->  
<h3 align="center">
Click on the letter the Park Name starts with</h3>  
<HR>

<DIV ALIGN="CENTER">
<CFLOOP FROM="65" TO="90" INDEX="thisAsc">
<CFOUTPUT>
<A HREF="parkResult.cfm?letter=#Chr(thisAsc)#">#Chr(thisAsc )#</A> I
</CFOUTPUT>
</CFLOOP>
</DIV>
</CFform>
</body>
</html>

<!---PARKRESULT.CFM PAGE--->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<!---I Ussually link to a CSS file (style/global.css)--->
<style type="text/css">
td.dark {
    text-align: left;
    font-weight: bold;
    padding: 2px;
    border: 2px solid #FFFFFF;
    background: gray;
    color: #FFFFFF;
}
a {
    text-decoration: none;
    font-weight: bold;
    color: Blue;
}
a:hover {
    text-decoration: underline;
    color: maroon;
}
</style>
</head>

<!---Force user to provide a search criteria--->
<CFIF isDefined("FORM.parkName") AND FORM.parkName EQ ""
    AND isDefined("FORM.state") AND FORM.state EQ "">
<script>
alert("Your Search criteria is incomplete. \nYou must choose a search option!");
self.location="javascript: window.history.go(-1)";
</script>
<CFABORT>
</CFIF>

<!---Use the same query for all search options--->
<CFQUERY NAME="Parks" datasource="CFDOCEXAMPLES">
SELECT *
FROM APP.PARKS
<CFIF IsDefined("URL.letter")>
WHERE parkName LIKE '#url.letter#%'
</CFIF>

<CFIF IsDefined("URL.parkName")>
WHERE parkName LIKE '#URL.parkName#%'
</CFIF>

<CFIF IsDefined("URL.state")>
WHERE state LIKE '#URL.state#%'
</CFIF>

<CFIF IsDefined("FORM.parkName") OR IsDefined("FORM.state")>
WHERE parkName LIKE '#FORM.parkName#%'
AND state LIKE '#FORM.state#%'
</CFIF>
Order by parkName
</CFQUERY>

<!---No records found messages--->
<CFIF IsDefined("URL.letter") AND Parks.recordcount EQ 0>
<script>
alert("No Parks Found on Record with this search option!");
self.location="javascript: window.history.go(-1)";
</script>
<CFABORT>
</CFIF>

<CFIF NOT IsDefined("URL.letter") AND Parks.recordcount EQ 0>
<script>
alert("No Parks Found on Record with this search option!");
self.location="javascript: window.history.go(-1)";
</script>
<CFABORT>
</CFIF>

<!--- define startrow and maxrows to facilitate 'next N' style browsing --->
<CFPARAM name = "MaxRows" default = "10">
<CFPARAM name = "StartRow" default = "1">

<!---Navigation --->
<CFSET TotalRows = Parks.RecordCount>
<CFSET EndRow = Min(StartRow + MaxRows - 1, TotalRows)>
<CFSET NextRows = #TotalRows# - #EndRow#>
<CFSET PreviousRows = #StartRow# - 1>
<body>

<CFFORM METHOD="POST" NAME="result">

<!---Page Heading--->
<h3>
<CFIF IsDefined("FORM.state") AND FORM.state NEQ ""
OR IsDefined("URL.state")>
<CFOUTPUT QUERY="Parks" MAXROWS="1">Parks of #State#</CFOUTPUT>
<CFELSE>
Parks Information
</CFIF>
</h3>
<hr>

<!---Message about which rows are being displayed--->
<CFOUTPUT>
Displaying <b>#StartRow#</b> to <b>#EndRow#</b>
of <b>#TotalRows#</b> Records
</CFOUTPUT>

<!---Letter search result--->
<CFIF IsDefined("URL.letter") AND Parks.recordcount NEQ 0>

<table BORDER="1">

<tr>
<td class="dark">#</td>
<td CLASS="dark">
Name:</td>
<td CLASS="dark">
City:</td>
<td CLASS="dark">
State:</td>
</tr>
<!---Here is where the cfoutput begins--->
<!---The query name defined above is used--->
<CFOUTPUT query="Parks" StartRow = "#StartRow#" MaxRows="#MaxRows#">
<TR bgcolor="###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#">
<td>#currentRow#</td>   
<td>
#parkName#
</td>
<td>
#City#
</td>
<td>
#State#
</td>
</tr>
</CFOUTPUT>

</table>
<!--- END of Letter search result--->

<!---parkName/State search result--->
<CFELSEIF NOT IsDefined("URL.letter") AND Parks.recordcount NEQ 0>

<table BORDER="1">
<tr>
<td class="dark">#</td>
<td CLASS="dark">
Name:</td>
<td CLASS="dark">
City:</td>
<td CLASS="dark">
State:</td>
</tr>
<!---Here is where the cfoutput begins--->
<!---The query name defined above is used--->
<CFOUTPUT query="Parks" StartRow = "#StartRow#" MaxRows="#MaxRows#">
<TR bgcolor="###iif(currentrow MOD 2,DE('ffffff'),DE('efefef'))#">
<td>#currentRow#</td>   
<td>
#parkName#
</td>
<td>
#City#
</td>
<td>
#State#
</td>
</tr>
</CFOUTPUT>
</table>
</CFIF>

<!--- Navigation Table --->
<table border=1>
<tr>
<!---go to First Row--->
<td>
<CFIF StartRow NEQ 1>
<a href = "parkResult.cfm?startrow=1
<CFIF IsDefined("URL.letter")>
&letter=<CFOUTPUT>#URL.letter#</CFOUTPUT>
</CFIF>

<CFIF IsDefined("FORM.parkName") AND FORM.parkName NEQ "">
&parkName=<CFOUTPUT>#FORM.parkName#</CFOUTPUT>
</CFIF>

<CFIF IsDefined("FORM.state") AND FORM.state NEQ "">
&state=<CFOUTPUT>#FORM.state#</CFOUTPUT>
</CFIF>

<CFIF IsDefined("URL.parkName")>
&parkName=<CFOUTPUT>#URL.parkName#</CFOUTPUT>
</CFIF>

<CFIF IsDefined("URL.state")>
&state=<CFOUTPUT>#URL.state#</CFOUTPUT>
</CFIF>">First Row</a>
</CFIF>
</td>

<!---go to next Rows--->
<td>
<CFIF (StartRow + MaxRows) LTE Parks.RecordCount>
<a href = "parkResult.cfm?startrow=<cfoutput>#StartRow + MaxRows#
<CFIF IsDefined("URL.letter")>
&letter=<CFOUTPUT>#URL.letter#</CFOUTPUT>
</CFIF>

<CFIF IsDefined("FORM.parkName") AND FORM.parkName NEQ "">
&parkName=<CFOUTPUT>#FORM.parkName#</CFOUTPUT>
</CFIF>

<CFIF IsDefined("FORM.state") AND FORM.state NEQ "">
&state=<CFOUTPUT>#FORM.state#</CFOUTPUT>
</CFIF>

<CFIF IsDefined("URL.parkName")>
&parkName=<CFOUTPUT>#URL.parkName#</CFOUTPUT>
</CFIF>

<CFIF IsDefined("URL.state")>
&state=<CFOUTPUT>#URL.state#</CFOUTPUT>
</CFIF>
</cfoutput>">Next <CFOUTPUT>#NextRows#</CFOUTPUT> rows</a>
</CFIF>
</td>

<!---go to Previous 10 Rows--->
<td>
<CFIF StartRow GT Maxrows>
<a href = "parkResult.cfm?startrow=<cfoutput>#StartRow - MaxRows#
<CFIF IsDefined("URL.letter")>
&letter=<CFOUTPUT>#URL.letter#</CFOUTPUT>
</CFIF>

<CFIF IsDefined("FORM.parkName") AND FORM.parkName NEQ "">
&parkName=<CFOUTPUT>#FORM.parkName#</CFOUTPUT>
</CFIF>

<CFIF IsDefined("FORM.state") AND FORM.state NEQ "">
&state=<CFOUTPUT>#FORM.state#</CFOUTPUT>
</CFIF>

<CFIF IsDefined("URL.parkName")>
&parkName=<CFOUTPUT>#URL.parkName#</CFOUTPUT>
</CFIF>

<CFIF IsDefined("URL.state")>
&state=<CFOUTPUT>#URL.state#</CFOUTPUT>
</CFIF>
</cfoutput>">Previous <CFOUTPUT>#PreviousRows#</CFOUTPUT> rows</a>
</CFIF>
</td>

<!---go to Last Row--->
<td>
<CFIF (StartRow + MaxRows) LTE Parks.RecordCount>
<a href = "parkResult.cfm?startrow=<cfoutput>#Parks.RecordCount - 9#
<CFIF IsDefined("URL.letter")>
&letter=<CFOUTPUT>#URL.letter#</CFOUTPUT>
</CFIF>

<CFIF IsDefined("FORM.parkName") AND FORM.parkName NEQ "">
&parkName=<CFOUTPUT>#FORM.parkName#</CFOUTPUT>
</CFIF>

<CFIF IsDefined("FORM.state") AND FORM.state NEQ "">
&state=<CFOUTPUT>#FORM.state#</CFOUTPUT>
</CFIF>

<CFIF IsDefined("URL.parkName")>
&parkName=<CFOUTPUT>#URL.parkName#</CFOUTPUT>
</CFIF>

<CFIF IsDefined("URL.state")>
&state=<CFOUTPUT>#URL.state#</CFOUTPUT>
</CFIF>
</cfoutput>">Last Row</a>
</CFIF>
</td>

<td><a href="index.cfm">Search Form</a></td>
</tr>
</table>

</CFFORM>
</body>
</html>

About This Tutorial
Author: carlos batista
Skill Level: Intermediate 
 
 
 
Platforms Tested: CF8
Total Views: 14,667
Submission Date: September 24, 2009
Last Update Date: September 24, 2009
All Tutorials By This Autor: 3
Discuss This Tutorial
Advertisement

About
Resources
Social
Sponsored By...
Powered By...

© 2002-2012 EasyCFM, LLC. All rights reserved.
You are 1 of 676 active visitors.