CFM Tutorial     

Cold Fusion ch5- Basics

6.1 Using Templates

All Cold Fusion interaction is via templates rather than HTML files. Templates can contain HTML, Cold Fusion tags and functions, or both.

Cold Fusion templates are plain-text files, just like HTML files. But, unlike HTML files which are sent to the user's browser, templates are first processed by Cold Fusion. This way, you can embed instructions to Cold Fusion within your templates. If, for example, you want to process user-supplied parameters, retrieve data from a database, or conditionally display certain informatin, you can instruct Cold Fusion to do so.

6.2 Understanding Cold Fusion Templates

<html>
<head>
<title>Hello!</title>
</head>
<body>
<cfoutput>
Hello, <br>
Your IP address is <b>#REMOTE_ADDR#</b><Br/>
Your browser is: <B>#HTTP_USER_AGENT#</B><P>
</cfoutput>
</body>
</hthml>
Most of the code in the above example should be familiar to you as standard HTML. What is not standard HTML is <CFOUTPUT> tag and fields surrounded by pound signs (the # character).

All Cold Fusion-specific tags begin with CF; CFOUTPUT, therefore, is a Cold Fusion-specific tag. CFOUTPUT is used to mark a block of code that Cold Fusion should process prior to submitting it to the web server for sending to a browser. When the Cold Fusion encounters a <CFOUTPUT> tag, it scans all the text until the next </CFOUTPUT> for Cold Fusion functions or fields delimited by pound signs.

In the above example, you use two fields, #REMOTE_ADDR# and #HTTP_USER_AGENT. They are CGI variables that the HTTP server makes available to applications such as Cold Fusion. #REMOTE_ADDR# contains the IP address of your browser, and #HTTP_USER_AGENT# contains the string with which your browser identifies itself. When Cold Fusion encounters the text #REMOTE_ADDR# in the CFOUTPUT block, it replaces the text with the value in the REMOTE_ADDR CGI variable. And when the Cold Fusion encounters #HTTP_USER_AGENT# on the next line, it replaces that text with the appropriate CGI variable, too. Instead of sending the text you entered back to your browser, Cold Fusion replaces the file names with field values and sends those values back to you instead.

6.3 Passing Parameters to Templates

In the example in section 6.2, you used Cold Fusion to display dynamic data by specifying the field names for two CGI variables. You also can use Cold Fusion to display and process parameters passed to an URL in exactly the same way.

To pass a parameter to a template, you could specify the parameter name and value within the URL. You must separate multiple URL parameters with an ampersand character (the & character). 

<html>
<head>
<title>Hello!</title>
</head>
<body>
Hello, <br>
<CFIF #ParameterExists(name)# IS "yest";>
<CFOUTPUT>
  The hame you entered is <b>#name#</b>
</CFOUTPUT>
<CFELSE>
You did not pass a parameter called NAME
</CFIF>
</body>
</hthml>
The above example contains a template that displays the value of a parameter called NAME, if it exists. To display the value, you use the <CFIF> tag to create a condition and a Cold Fusion function classed ParameterExists. If the parameter NAME exists, its value is displayed; otherwise, you are notified that the parameter is not passed.

6.4 Creating Data-Driven Templates

6.4.1 Creating Static Web Pages

Before you create a Cold Fusion template for your database, take a look at how to not create this page. The listing bellow contains the HTML code for the employee list web page. The HTML code is relatively simple; It contains header information and then a list of employees in an HTML unordered list. 
<html>
<head>
<title>Employee List</title>
</head>
<body>
<h1>Employees</h1>
<ul>
	<li>Black, Kim - Ext. 4565</li>
	<li>Gold, Marcy - Ext. 4912</li>
	<li>Green, Adrienne - Ext. 1546</li>
	<li>Johnson, Dan - Ext. 4312</li>
	<li>Smith, Jack - Ext. 1522</li>
</ul>
</body>
</hthml>

6.4.2 Understanding Dynamic Web Pages

Why, then, is a static HTML file not the way to create the web page? Well, what would you do when a new employee is hired or when an employee leaves the company? What would you do if phone extensions change?

You could directly modify the HTMl code to reflect these changes, but you already have all this information in a database. Why would you want to have enter it all again? You would run into the risk of making mistakes, misspelling names, getting entries out of order, and possibly even losing name altogether. As the number of names in the list grows, so will the potential for errors occurring. Plus, during the period between updating the table and uploading the web page, employees will be looking at inaccurate information.

A easier and more reliable solution would be to have the web page display the contents of your Employees table. This way, any table changes are immediately available to all employees. You can build the web page dynamically based on the contents of the Employees table. 

<CFQUERY 
	DATASOURCE="a2Z"
	NAME="employees"
>
SELECT FirstName, LastName, PhoneExtension
FROM Employees
ORDER BY LastName, FirstName
</CFQUERY>
<html>
<head>
<title>Employee List</title>
</head>
<body>
<h1>Employees</h1>
<ul>
	<CFOUTPUT Query="employees">
	<li>#LastName#, #FirstName# - #PhoneExtension#</li>
	</CFOUTPUT>
</ul>
</body>
</hthml>

6.5 Understanding Data-Driven Templates

6.5.1 Using the CFQUERY Tag

CFQUERY (or Cold Fusion Query) is the tag you use to submit any SQL statement to an ODBC data source. The SQL statement is usually an SQL SELECT statement, but also can be INSERT, UPDATE, DELETE, or any other SQL statement.

When Cold Fusion processes the template, the first item it finds is the Cold Fusion tag CFQUERY. Cold Fusion knows which tags it itself must process and which it must pass to the server directly. CFQUERY is a Cold Fusion tag and, therefore, must be processed by Cold Fusion.

When Cold Fusion encounters a CFQUERY tag, it creates an ODBC request and submits it to the specified data source. The results, if any, are stored in a temporary buffer and are identified by by the name specified in the NAME attribute. This process happens before Cold Fusion processes the next line in the template.

All Cold Fusion code never gets sent on to the server for transmission to the browser. Unlike HTML tags that are browser instructions, CFML tags are instructions to Cold Fusion.

6.5.1 Displaying Query Results with CFOUTPUT tag

In the previous example, you create an HTML unordered list using the <UL> tag. The list is terminated a few lines later with a </UL> tag.

CFOUTPUT is the same Cold Fusion output tag, but in this case it is used to create a code block that outputs the result of QUERY attribute. The name you provide is the sname name assigned to the NAME attribute of the CFQUERY tag. In this case, the NAME is Employees.

The code between the <CFOUTPUT QUERY="employees"> and </CFOUTPUT> is the output code block. Cold Fusion uses this code once for every row that is retrieved. As 10 rows currently appear in the Employee table, the CFOUTPUT code is looped through 10 times. And any HTML or CFML tags within that block are repeated as well, once for each row.

6.5.2 Using Database Table Columns

Cold Fusion uses # to delimit fields. In addition to CGI variables and URL parameters that you used at the beginning of this chapter, Cold Fusion fields can also be columns retrieved by a CFQUERY.Whatever field you use, Cold Fusion replaces the field name with the actual value. So when Cold Fusion processes the output block, it replaces #LastName# with the content of the LastName column retrieved in the Employee query. Each time the output code block is used, that row's LastName value is inserted into the HTML code.

Cold Fusion fields can be treated as any other text in the HTML document. You can apply any of the HTML formatting tags to them. In the example in previous section, the query results need to be displayed in an unordered list. Each employee's name and phone extension is a list item and, therefore, is preceded by the <LI> tag. As the <LI> tag is included within the CFOUTPUT block, Cold Fusion outputs it along with every row.

So, for employee Kim Black at extension 4565, the line 

<LI> #LastName#, #FirstName#, - Ext. #PhoneExtension#</LI>
becomes 
<LI>Black, Kim - Ext. 4565</LI>

    References

    (1) the Cold Fusion Web Application Construction Kit, Second Edition.
KHMERCyber.com ©2008