Beginner's Guide Series - Basic ColdFusion, part 1
We now make it to the pièce-de-resistance. The next 2 or 3 posts should go over the basics of ColdFusion.
What is ColdFusion?
ColdFusion is a server-side scripting language that was first released in July 1995. It's most distinguishing feature is it's tag-based syntax which looks a lot like HTML (you can easily distinguish them, however, since ColdFusion tags all start with cf). The advantage this has for us is that's it's relatively easy to learn. We already know about tags and attributes, thanks to the previous posts. ColdFusion is basically more of the same, with a slight twist.
How is a ColdFusion page processed?
To better understand the role of a ColdFusion template (that's what a ColdFusion file is called), it's important to know how it gets processed. ColdFusion templates have the .cfm extension. When the client points his browser to a page with a .cfm extension, the server knows that it must first parse this file before sending it back. This is where ColdFusion comes in.
ColdFusion looks at the file and determines what it needs to change. What it would need to do can vary:
- Display a part of the document if a certain condition is fulfilled;
- Query a database and output the recordset;
- Include repeated sections on multiple pages (think page headers, footers).
Once ColdFusion is done processing the template, it then sends the finished page back to the server who passes it on to the browser as a plain HTML document. The browser has no notion of ColdFusion or of the processing that had to take place. All it receives is the finished product. It is therefore impossible, with ColdFusion, to change something once the page has been processed. To change something in the resultant page (hide/show a section when a button is clicked, display a pop-up, etc.), you'd need to use a client-side scripting language like JavaScript. We'll talk more about that subject in future posts.
"Hello world!", ColdFusion style
Once again, the "Hello world!" example will allow us to demonstrate the basic principles behind a programming language. To achieve this, we'll first see how we can declare and set a variable. We'll then output it's value back to the result page.
This post assumes that you have a ColdFusion environment available that will process your .cfm templates. If this isn't the case, you first need to download and install ColdFusion. Luckily, there is a nice, free developer edition available on the Adobe site.
Start by creating a new ColdFusion template in your webroot. Let's call it helloWorld.cfm. In this file, we're going to start by placing a new HTML page.
<head>
<title>Hello world!, ColdFusion style</title>
</head>
<body>
</body>
</html>
There's nothing really special about it yet. If you can point your browser to the page all you'll see is a blank page with the provided title. Now, to set a variable in ColdFusion we need to use the <cfset> tag. This tag accepts only one attribute, which is the name of the variable we want to declare. The attribute's value will become the new variables value.
Once the variable is set, we can come back as often as we want to change it's value with additional <cfset> tags. Place the new <cfset> tag inside the body of our template:
<head>
<title>Hello world!, ColdFusion style</title>
</head>
<body>
<cfset outputString = "Hello world!" />
</body>
</html>
If you point your browser to the page once again you'll still see a blank page. That's because all we've done is set the variable. We still need to output it. The way to identify that we're referencing a variable, when we're amongst other text, is to surround it with hash (#) signs:
<head>
<title>Hello world!, ColdFusion style</title>
</head>
<body>
<cfset outputString = "Hello world!" />
Say hello: #outputString#
</body>
</html>
Here's how that looks in the browser:
Say hello: #outputString#
The reason the variable wasn't replaced by it's value is because, generally speaking, ColdFusion doesn't bother parsing text that isn't part of a ColdFusion tag. However, there's a very easy way to force ColdFusion to look at our text: the <cfoutput> tag.
<head>
<title>Hello world!, ColdFusion style</title>
</head>
<body>
<cfoutput>
<cfset outputString = "Hello world!" />
Say hello: #outputString#
</cfoutput>
</body>
</html>
And we finally get our expected result:
Say hello: Hello world!
Things to watch out for
In it's simplest form, the <cfoutput> tag looks for hash signs within it's content, and replaces variables by their value. What happens, however, when you actually want to write out a hash sign to the browser (say, for a telephone number)? If ColdFusion sees a lonely hash sign it'll throw an error. Luckily, escaping in ColdFusion is super-easy (escaping is the process of removing the special nature of a character): you double it. You need to output a hash sign? Put two of them together!
Becomes:
Enter your telephone #
The process is the same for pretty much all the other special characters in ColdFusion.
This post took a little longer than intended. Hopefully I haven't crammed too much into it. There's more to cover, but that'll be for another day.
The train keeps-a rolling.
I would like to know if we have to write the tags in a specific order. Do I have to set first, then output, or as in your example, output and after set the variables I need, nested in the cfoutput... Or does it matter at all? Could I just put cfoutput, say, at the top of my template, knowing that somewhere along the way I will need it ? Or do I need to cfoutput every time I'm using a variable?
I'm really new at this and I'm trying to understand the structure. And by the way, thank you very much for these helpfull posts!
The cfoutput tag can be placed pretty much anywhere you want, all it has to do is wrap what needs to be parsed. Some people will place a cfoutput tag at the beginning of the template, and only close it at the end. Some other people will only wrap sections where there are actually variables to be parsed.
The important thing is that the variable is set (with cfset) before it is placed in the document between hash signs (#). The cfset itself doesn't need to be within the cfoutput tag, but there is no particular impact if it is.
Hope this helps!