The ability to generate and display query data is one of the most important and flexible features of ColdFusion. Some of these tools are effective for presenting any data, not just query results.
Using HTML tables to display query results
You can use HTML tables to specify how the results of a query appear on a page. To do so, you place the cfoutput tag inside the table tags. You can also use the HTML th tag to place column labels in a header row. To create a row in the table for each row in the query results, place the tr block inside the cfoutput tag.
In addition, you can use CFML functions to format individual pieces of data, such as dates and numeric values.
Place the query results in a table
- Open the ColdFusion actionpage.cfm page in your editor.
Modify the page so that it appears as follows:
<html>
<head>
<title>Retrieving Employee Data Based on Criteria from Form</title>
</head>
<body>
<cfquery name="GetEmployees" datasource="cfdocexamples">
SELECT FirstName, LastName, Salary
FROM Employee
WHERE LastName=<cfqueryparam value="#Form.LastName#"
CFSQLType="CF_SQL_VARCHAR">
</cfquery>
<h4>Employee Data Based on Criteria from Form</h4>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Salary</th>
</tr>
<cfoutput query="GetEmployees">
<tr>
<td>#FirstName#</td>
<td>#LastName#</td>
<td>#Salary#</td>
</tr>
</cfoutput>
</table>
<br>
<cfif IsDefined("Form.Contractor")>
<cfoutput>Contractor: #Form.Contractor#</cfoutput>
</cfif>
</body>
</html>- Save the page as actionpage.cfm in the myapps directory.
- View the formpage.cfm page in your browser.
- Enter Smith in the Last Name text box and submit the form.The records that match the criteria specified in the form appear in a table.
Reviewing the code
The following table describes the highlighted code and its function:
Code |
Description |
|
|---|---|---|
|
Places data into a table. |
|
|
In the first row of the table, includes three columns, with the headings: First Name, Last Name, and Salary. |
|
|
Tells ColdFusion to display the results of the GetEmployees query. |
|
|
For each record in the query, creates a row in the table, with three columns that display the values of the FirstName, LastName, and Salary fields of the record. |
|
|
Ends the output region. |
|
|
Ends the table. |
Formatting individual data items
You can format individual data items. For example, you can format the salary data as monetary values. To format the salary data using the dollar format, you use the CFML function DollarFormat.
Change the format of the Salary
- Open the file actionpage.cfm in your editor.
Change the following line:
<td>#Salary#</td>
to
<td>#DollarFormat(Salary)#</td>
- Save the page.
Building flexible search interfaces
One option with forms is to build a search based on the form data. For example, you could use form data as part of the WHERE clause to construct a database query.
To give users the option to enter multiple search criteria in a form, you can wrap conditional logic around a SQL AND clause as part of the WHERE clause. The following action page allows users to search for employees by department, last name, or both.
Build a more flexible search interface
- Open the ColdFusion actionpage.cfm page in your editor.
Modify the page so that it appears as follows:
<html>
<head>
<title>Retrieving Employee Data Based on Criteria from Form</title>
</head>
<body>
<cfquery name="GetEmployees" datasource="cfdocexamples">
SELECT Departmt.Dept_Name,
Employee.FirstName,
Employee.LastName,
Employee.StartDate,
Employee.Salary
FROM Departmt, Employee
WHERE Departmt.Dept_ID = Employee.Dept_ID
<cfif IsDefined("Form.Department")>
AND Departmt.Dept_Name=<cfqueryparam value="#Form.Department#"
CFSQLType="CF_SQL_VARCHAR">
</cfif>
<cfif Form.LastName IS NOT "">
AND Employee.LastName=<cfqueryparam value="#Form.LastName#"
CFSQLType="CF_SQL_VARCHAR">
</cfif>
</cfquery>
<h4>Employee Data Based on Criteria from Form</h4>
<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Salary</th>
</tr>
<cfoutput query="GetEmployees">
<tr>
<td>#FirstName#</td>
<td>#LastName#</td>
<td>#Salary#</td>
</tr>
</cfoutput>
</table>
</body>
</html>- Save the file.
- View the formpage.cfm page in your browser.
- Select a department, optionally enter a last name, and submit the form.
Reviewing the code
The following table describes the highlighted code and its function:
Code |
Description |
|
|---|---|---|
|
Retrieves the fields listed from the Departmt and Employee tables, joining the tables based on the Dept_ID field in each table. |
|
|
If the user specified a department on the form, only retrieves records where the department name is the same as the one that the user specified. Use number signs (#) in the SQL AND statement to identify Form.Department as a ColdFusion variable, but not in the IsDefined function. |
|
|
If the user specified a last name in the form, only retrieves the records in which the last name is the same as the one that the user entered in the form. |
