The Largest Repository of ColdFusion Knowledge in The World for More Than 12 Years

ColdFusion on Ulitzer

Subscribe to ColdFusion on Ulitzer: eMailAlertsEmail Alerts newslettersWeekly Newsletters
Get ColdFusion on Ulitzer: homepageHomepage mobileMobile rssRSS facebookFacebook twitterTwitter linkedinLinkedIn


CFDJ Authors: AppDynamics Blog, Michael Kopp, Tad Anderson, Bob Gourley, Jayaram Krishnaswamy

Related Topics: ColdFusion on Ulitzer

CFDJ: Article

Coldfusion Basics

Coldfusion Basics

This article has been adapted from the second part of Chapter 11 of ColdFusion 4 Web Application Construction Kit by Ben Forta. Published by permission of Macmillan Publishers Ltd. and the author. Part 1 appeared in the February issue of ColdFusion Developer's Journal. Adaptations of Chapters 12 and 13 will appear in forthcoming issues. The book can be purchased through Amazon.com or by clicking on www.forta.com/books.

Displaying Results in Tables
Most Web browsers support tables. The HTML <TABLE> tag enables you to display data in a two-dimensional grid. Tables are very useful for presenting lists in a clean columnar display.

As HTML tables are used so often to display query results in data-driven pages, and the <TABLE> syntax can be a little confusing at times, the makers of ColdFusion created a ColdFusion tag called <CFTABLE>. The <CFTABLE> tag is designed to conceal the details involved in creating HTML tables. All you have to do is tell ColdFusion what data to put in each column; ColdFusion generates the <TABLE> markup code for you.

The <CFTABLE> tag has another important advantage. It allows you to create tables that can be viewed by all browsers, even those that do not support HTML tables. To do this, ColdFusion renders the output in a nonproportional font and pads fields with spaces so that they line up in columns. While the resulting table might not look as good as a true HTML table, it is functional and is supported by all browsers. (Note: While <CFTABLE> can simplify the process of creating dynamic data-driven HTML tables, it does so at a price. <CFTABLE> does not provide much control over table formatting. For more detailed table layout, you need to create the HTML table manually using <CFOUTPUT> and <TABLE>.)

Creating Non-HTML Tables with CFTABLE
For an example of where <CFTABLE> can be used, look at the browser output shown in Figure 9. [Ed. Note: Figures 1-11 and Listings 1-10 can be found in Part 1 (CFDJ, Vol. 2, issue 2).] Notice how the phone extension is right next to the name, and in a different location on the screen, depending on how long the employee's name is. If the employees were listed in a table, the data could be presented in a cleaner and more organized fashion.

Listing 11 is based on Listing 4, but instead of using an unordered list and presenting each employee as a list item, the list is displayed in a table.

You use the tag <CFTABLE QUERY="Employees" COLHEADERS> to create the table. The <CFTABLE> tag is a special type of <CFOUTPUT>, and therefore requires that you specify a QUERY attribute, just like the one you'd provide to <CFOUTPUT>. <CFTABLE> is only used to display query results, and the QUERY attribute specifies which result set to process.

The COLHEADERS attribute is used to instruct ColdFusion to create optional column headers for each column in the table.

ColdFusion needs to know what columns you want to include in your table. Each column is specified using the <CFCOL> tag. You specify two columns here, one for the employee name and one for the phone extension.

The code for the phone extension column is <CFCOL HEADER="Extension" TEXT="Ext. #PhoneExtension#">. The HEADER attribute specifies the text to use in the column header. This column has a header with the text Extension in it. The TEXT attribute is required; every <CFCOL> tag must have one. It tells ColdFusion what you want to display in this column. The TEXT attribute here contains the expression "Ext. #PhoneExtension#". As ColdFusion processes each row, it replaces the #PhoneExtension# field with the value of the retrieved PhoneExtension column.

The employee name column may look more complicated, but it really isn't at all. This is the source for the column:

<CFCOL HEADER="Employee" TEXT="<A
HREF=""empdtl1.cfm?EmployeeID=
#EmployeeID#"">
[ic:ccc]#LastName#, #FirstName#</A>">.

Again, you first specify the text for the optional header in the HEADER attribute. The TEXT attribute contains the text to display, and because the name has to be a hyperlink, you must also specify the A HREF link tag.

In fact, the contents of the TEXT attribute are almost the same as the hyperlink tag used in Listing 7, with one notable exception. You'll notice that the link tag has double quotation marks around the URL, instead of the usual single set. You need the double quotation marks to tell ColdFusion to treat this as a quote, and not as the end of the TEXT attribute. If you had entered a single quotation mark, ColdFusion would have thought that the TEXT attribute ended right after the HREF=. Because it would not know what to do with the text after the quotation mark, ColdFusion would have reported a syntax error.

Now that you understand the code listing, run the template by typing http://yourserver.com/a2z/11/employ4.cfm.

As you can see in Figure 12, the employee names and phone extensions are now displayed in clearly labeled columns.

How is this table created without using the HTML <TABLE> tag? Look at the source code generated by ColdFusion to find out.

Select the View Source option in your browser. (In Netscape, select Page Source from the View menu; in Microsoft Internet Explorer, select Source from the View menu.)

As you can see in Figure 13, ColdFusion used the HTML <PRE> tag, which displays text exactly as it appears in the source code. Web browsers usually ignore whitespace characters such as spaces and line feeds. The <PRE> tag instructs the browser to maintain all spacing and line feeds, allowing ColdFusion to lay out the data exactly as it wants the browser to display it.

Creating HTML Tables with CFTABLE
Tables created with the HTML <TABLE> tag, of course, look much better, so ColdFusion also supports HTML tables. As you can see in Listing 12, to create HTML tables all you need to do is specify the HTMLTABLE attribute in the <CFTABLE> tag.

Figure 14 shows the same employee list screen rendered in an HTML table. Note that standard fonts are used when displaying data in an HTML table; the fixed font used when the <PRE> tag is specified is not used. Therefore, it is safe to use any other HTML formatting options in the CFCOL TEXT attribute if required. Therefore, if you wanted the name in bold, for example, you could have specified this:

TEXT="<A HREF=""empdtl1.cfm?EmployeeID=#EmployeeID#"">
[ic:ccc]<B>#LastName#, #FirstName#</B></A>"

ColdFusion would still have been able to display the table correctly. The <B> and </B> tags are HTML tags, not CFML tags; therefore, ColdFusion passes them through to the Web server to be sent to your Web browser.

To create this table, ColdFusion generated HTML table code. This source code, as displayed by the browser's view source function, is shown in Figure 15.


Creating HTML Tables Manually
As good as the ColdFusion <CFTABLE> tag is, it is very limited. HTML tables support many advanced features, including table headers, cells that span multiple rows or columns, borders and border colors, background colors and images, and more. If you really want to control how your tables are displayed, you must resort to creating your tables manually.

Listing 13 demonstrates how to manually create a bordered table for our employee list, and Figure 16 shows what the output looks like.


Look at the code in Listing 13. First we created the table with the <TABLE> tag and specified an optional border. HTML tables can have borders of varying thicknesses, and the BORDER attribute specifies the border to use; then we created a table title and placed it in a header cell (specified with the <TH> tag) that spans two columns. Next comes <CFOUTOUT>. A new table row is created as each query row is output. This is why there is a complete table row (<TR>) and cells (<TD>) within the <CFOUTPUT> code block.

Finally, you close the table with </TABLE>.

As you can see, manually creating tables requires a little more effort and a better understanding of HTML tables, but the rewards are well worth it. (Note: HTML tables are a very useful way to format data, but there is a cost associated with using tables. In order for a browser to correctly display a table, it cannot display any part of that table until it has received the entire table from the Web server. This is because any row, even one near the end of the table, could affect the width of columns and how the table will be formatted. Therefore, if you display data in a table, the user will see no data at all until all the data is present. If you were to use another type of display, a list for example, the data would be displayed as it was received. The reality of it is that the page will likely take as long to fully load with or without tables. The downside of using tables is that it takes longer for any data to appear. This does not apply to tables created without the <TABLE> tag.)

Grouping Query Results
Before a new level of complexity is introduced, review how ColdFusion processes queries.

In ColdFusion data queries are created using the <CFQUERY> tag. <CFQUERY> performs a SQL operation and retrieves results if there are any. Results are stored temporarily by ColdFusion and remain around only for the duration of the processing of the template that contained the query.

The <CFOUTPUT> tag is used to output query results. <CFOUTPUT> takes a query name as an attribute and then loops through all the rows that were retrieved by the query. The code block between the <CFOUTPUT> and the </CFOUTPUT> is repeated once for every row retrieved.

All the examples created until now displayed results in a single list or a single table.

What would you do if you wanted to process the results in subsets? For example, suppose you wanted to list the employees by department. You could change the SQL statement in the <CFQUERY> to set the sort order to be department, and then perhaps by name within each department.

This would retrieve the data in the correct order, but how would you display it? If you used <CFOUTPUT> as we have until now, every row created by the <CFOUTPUT> block would have to be the same. If one had a department name, all would have to, because every row that is processed is processed with the same block of code.

How would you create the output shown in Figure 17?

The solution is to group the data results. Grouping allows you to have more than one <CFOUTPUT> loop. To understand how grouping works, look at the template in Listing 14.

The first change you made was adding the DepartmentID column to our SQL SELECT statement, and modifying the sort sequence with ORDER BY DepartmentID, LastName, FirstName. To group results by a column, that column must be the first in the sort sequence. Because we want to sort by DepartmentID, that column is now the first in the ORDER BY list.

The big change, however, is the <CFOUTPUT> block. There are now two of them, one nested inside the other. The outer <CFOUTPUT> tag has a new attribute: GROUP="DepartmentID". Don't panic - this is explained right now.

A <CFOUTPUT> tag creates a loop that executes once for each row retrieved by a query. When you add the GROUP attribute, you instruct ColdFusion to execute the <CFOUPUT> block only when the group value (the field specified in the GROUP attribute) changes.

If you had seven employees all with the same DepartmentID, the GROUP <CFOUTPUT> block would be executed just once. In our list we have 12 employees who work in 2 departments. The outer <CFOUPUT> block only gets executed twice, once for each department. The first row processed has a DepartmentID of 1, so the <CFOUTPUT> block is executed. The next six rows processed also have a DepartmentID of 1, and so the <CFOUTPUT> block is not executed for them. The eighth row has a different DepartmentID, the value is 2, and so the <CFOUTPUT> block is executed. The next two rows also have a DepartmentID of 2, so no <CFOUTPUT> block is executed for them.

That's just the outer <CFOUTPUT> block. The inner block gets executed for every row, just like the <CFOUTPUT> blocks used earlier.

Now look at the output code in Listing 14. The outer <CFOUTPUT> creates a header for each new group and then starts a new unordered list. The inner <CFOUTPUT> populates that list until the group is completed; then the outer <CFOUTPUT> terminates the list and the process loops to the next DepartmentID.

The results are shown in Figure 17. (Note: There is no limit to the number of groupings you can create; you may nest as many CFOUTOUT tags as you need. The only restrictions are in using groups. First, every group must be part of the sort sequence used to retrieve the data. Second, the order that the columns appear in the ORDER BY clause must match the order of the groupings.)

Now you can see why the column you want to group on must be the first in the ORDER BY list. For grouping to work, all rows with the same value in the grouping column must be processed as a group. If the group is broken up, as could happen if you did not sort by the grouping column, ColdFusion would execute the outer block at the wrong times, and the resulting groups would be fragmented.Specifying Field Types
You have now used two different types of fields: CGI variables and URL parameters. ColdFusion supports several field types, as shown in Table 1, as well as fields that are database table columns retrieved with a <CFQUERY>.

In Parts 1 and 2 of this article you use two of these field types and <CFQUERY> results. If you read the entire book on which these articles are based you'll be using them all regularly.

Sooner or later you are going to run into a name collision. For example, you'll have a form field with the same name as a table column, or a variable with the same name as a URL parameter. How does ColdFusion know which one to use when this happens?

ColdFusion doesn't know, but it can make a best guess by using a known order of precedence; either that or you can specify it. You specify this by qualifying the field name with the field type.

Listing 15 is the same template you created in Listing 13 with one difference. The references to field Name are fully qualified as URL.name. This way, even if you had any other field called Name, ColdFusion would still know which field you were referring to.

Use your browser to view this template. The resulting display should be exactly the same as the one shown in Figure 3.

More Stories By Ben Forta

Ben Forta is Adobe's Senior Technical Evangelist. In that capacity he spends a considerable amount of time talking and writing about Adobe products (with an emphasis on ColdFusion and Flex), and providing feedback to help shape the future direction of the products. By the way, if you are not yet a ColdFusion user, you should be. It is an incredible product, and is truly deserving of all the praise it has been receiving. In a prior life he was a ColdFusion customer (he wrote one of the first large high visibility web sites using the product) and was so impressed he ended up working for the company that created it (Allaire). Ben is also the author of books on ColdFusion, SQL, Windows 2000, JSP, WAP, Regular Expressions, and more. Before joining Adobe (well, Allaire actually, and then Macromedia and Allaire merged, and then Adobe bought Macromedia) he helped found a company called Car.com which provides automotive services (buy a car, sell a car, etc) over the Web. Car.com (including Stoneage) is one of the largest automotive web sites out there, was written entirely in ColdFusion, and is now owned by Auto-By-Tel.

Comments (0)

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.