ColdFusion 9 Developer Tutorial: Create robust professional web applications with ColdFusion

We are going to add the following two lines above <!-- HTML Comment -->:

<!--- Processing --->
<!--- Content --->
<!-- HTML Comment -->

You will notice the two new lines have three dashes instead of two. This is because they are ColdFusion comments.

If you go back to your browser and refresh the page, you will find something interesting when you view its source. The new comment lines you added do not show on the page source since they are server-side ColdFusion comments. Remember to save the file before checking for results.

Next we need to create our first variables in ColdFusion. Add a line between the processing and content comments and create the following two variables inside <cfset> tags. These variables are just containers to store content for later use. Currently, we will be using them as text containers or what you will come to know as "string variables".

<!--- Processing --->
<cfset myQuestion = "">
<cfset myAnswer = "">

<!--- Content --->

Cut the actual question out of the bottom content section and paste it into the quotes of the string variable, myQuestion. Now, cut out the answer text in the content section and paste it inside the quotes of the string variable, myAnswer. (Don't forget, you can look at the previous code example if you have questions.)

Now, we need to put the content, which we have moved to variables, back in the page. ColdFusion was the first to standardize server-side code tags. These look very much like HTML tags, but they add power and simplicity. What we need to do is wrap our entire content section with <cfoutput>. Add <cfoutput> open tag right after the <--- Content ---> comment tag and then put </cfoutput> close tag as the new last line of the code page.

We have to place the variables in the content section of the code with some special ColdFusion output markers. ColdFusion uses the pound symbols on both sides of the dynamic content for markers. So put #myQuestion# where you cut out the content for the myQuestion variable.

Also, place #myAnswer# where you cut out the content you pasted into the myAnswer variable. Save the file and run the page! (Check the sample code in the following section to make sure you typed things in correctly. Then refresh the page again.)

ColdFusion is very powerful and allows outputting the results of functions as well as variables. If you want you can replace the time with the function in the following code at the end of the ColdFusion code sample and you can refresh the page over and over and see that the time is being dynamically generated on the server:

<!--- Example: 1_2.cfm --->
<!--- Proccessing --->
<cfset myQuestion = "What is a variable?">
<cfset myAnswer = "Variables are named storage containers inside programming languages. Just think of variables as any type of named container holding any type of stored content. You simply name the container and store the content. Later you retrieve the content by using the same name.">

<!--- Content --->
<cfoutput>
  <div>
    <h3>Question: #myQuestion#</h3>
    <p>
      <strong>Answer:</strong>
    </p>
    <p>
      #myAnswer#
    </p>
    <p>
      #timeFormat(now())#
    </p>
  </div>
</cfoutput>

The now() function in ColdFusion returns the current date or time and the timeFormat() function converts the output to display text showing the time of its contents. Notice that when we update the screen, the time will be the current time on each refresh:

Congratulations! You have just created your first dynamic web page. If you are new to this technology, then work through the examples and complete the entire chapter. Then take a break. If you feel the need, come back after going through some chapters and repeat the exercises. You will be surprised by what you have learned.

We will be covering two number classes in this lesson. First we will take a look at integers. These are numbers with no decimal value. ColdFusion supports integers between -2,147,483,648 and 2,147,483,647. It will work with numbers outside this range, but the precision will not be exact.

In the first example, we will modify the code we have been using to keep one of the string variables and add a numeric variable called myAge. The following two examples of code run identical to each other. It is fine to code via tag or scripted code:

<!--- Processing --->
<cfset myQuestion = "This is my question.">
<cfset myAge = 27>

<!--- Content --->

<!--- Content --->
<cfoutput>
  myQuestion is (#myQuestion#)<br />
  myAge is (#myAge#)<br />
</cfoutput>

<!--- Processing --->
<cfscript>
  myQuestion = "This is my question.";.";
  myAge = 27;
</cfscript>

<!--- Content --->
<cfoutput>
  myQuestion is (#myQuestion#)<br />
  myAge is (#myAge#)<br />
</cfoutput>

You will notice that strings are declared with quotation marks. These can be single or double quotation marks. Numbers do not use quotation marks. This would be the same in an expression, which is what you see in the preceding examples, as in a variable declaration. Expressions are what we call code when we combine strings, do math, or Boolean comparisons. Here we will look at our first expression example by changing both the string and the numeric variables in our code. ColdFusion 8 added the += operator to the platform. This is a widely used notation to say, add the right-hand value to the original value. (It also added &= for strings.) Run the following example:

<!--- Example: 1_3.cfm --->
<!--- Processing --->
<cfscript>
  myQuestion = "This is my question.";
  myAge = 27;

  myQuestion = myQuestion & " Is this a string?";
  myAge += 1;
</cfscript>

<!--- Content --->
<cfoutput>
  myQuestion is (#myQuestion#)<br />
  myAge is (#myAge#)<br />
</cfoutput>

The following screenshot shows the result after the previous code is run:

Now, we will look at decimal-based numbers. We will modify the code just a bit more to show more of the things you can do with numbers and remove the string functions for the time:

<!--- Example: 1_4.cfm --->
<!--- Processing --->
<cfscript>
  myAge = 27;

  halfAge = myAge/2;
</cfscript>

<!--- Content --->
<cfoutput>
  myAge is (#myAge#)<br />
  halfAge is (#halfAge#)<br />
  halfAge rounded is (#round(halfAge)#)<br />
  4.2 rounded is (#round(4.2)#)<br />
  4.2 ceiling is (#ceiling(4.2)#)<br />
</cfoutput>

Here we see variables and functions both being inserted into the HTML rendered by the browser:

We have looked at creating a variable by using the value of another variable and changing the values of variables. You will find everything from modulo functions to geometry functions standard for mathematic calculations. You will also find a rich number of string functions that can help you process your pages.

What additional types of things can you do with strings? Let's take a look at a piece of code that will help answer that question:

<!--- Example: 1_5.cfm --->
<!--- Processing --->
<cfscript>
  myQuestion = "This is my question.";

  myQuestion = myQuestion & " Is THIS a string?";
  location = find("this",myQuestion);
</cfscript>

<!--- Content --->
<cfoutput>
  myQuestion is (#myQuestion#)<br />
  Location of "this" is (#location#) characters from the start of the string.<br />
</cfoutput>

Here we see results that let us know our search was not successful:

You might be curious as to why the find function returned zero rather than the actual position. If you look, you will notice that we changed the word this to all capitalized letters. Computers see capitalized letters differently than lowercase letters, so THIS provided an excellent way to make a point on strings being case-sensitive. Let's see how we can find it either way with a built-in ColdFusion function:

<!--- Example: 1_6.cfm --->
<!--- Processing --->
<cfscript>
  myQuestion = "This is my question.";

  myQuestion = myQuestion & " Is THIS a string?";
  location = findNoCase("this",myQuestion);
  location2 = findNoCase("this",myQuestion,location+1);
</cfscript>

<!--- Content --->
<cfoutput>
  myQuestion is (#myQuestion#)<br />
  Location of "this" is (#location#) characters from the start of the string.<br />
  The second "this" is located at position (#location2#).<br />
</cfoutput>

In the following screenshot, we can see that the search function was a success and realize the importance of being case-sensitive aware in text searching:

We did a couple of things here. First, we made our string search case-insensitive. Then, we added a second search to see if there were any more occurrences of the searched for item in the string variable. We added +1 to the location to make sure we skipped that location in our search. It still returns the location based on the start of the string no matter how deep we start in our search. Here is the structure of the function so you can understand how function documentation works when you look things up:

FindNoCase(substring, string, [start])

The arguments of the functions are required unless they are wrapped in [ ]. This function searches for a substring inside of the string optionally starting at start number of characters deep into the string.

The error message looks like the following:

Many times, you will get detailed information when there is an error. The message clearly states that the name variable is not defined in the URL scope. Not only did it tell us what the error is, but if we scroll down we can see that the page also shows us the line of code where the error occurred.

Don't count on this happening all the time. Learning to use try-catch will help narrow down some of these issues. When the page error does not make sense, this may be the best way to figure it out. Look at the next version of code and you will see how try-catch can be used on the page to manage and help fix these errors. It is broadly considered good practice to catch and handle possible issues like this. If an issue occurs, try-catch is the way ColdFusion allows handling many predictable and some less predictable issues.

<!--- Example: 1_11.cfm --->
<!--- Processing --->
<!--- Content --->
<cftry>

  <cfoutput>
    My name is #url.name#.<br />
  </cfoutput>

  <cfcatch>
    <cfdump var="#cfcatch#">
  </cfcatch>
</cftry>

The following screenshot shows us the power of try-catch in code development:

Here, the information is presented differently, but it gives the developer more detail. The exception is placed on the page using <cfdump>. More often than not, you will find that this is the more useful approach to debugging. You can also e-mail the contents of the catch structure to an administrator. You may also note that the StackTrace and objectType structure elements are collapsed. You toggle elements in CFDump by clicking on the element text. This will hide all the nested information until you desire to see it again.

You might wonder why we have included exception/error handing with CFDump. It is because the results of a catch are stored in a variable called cfcatch that contains a pretty nice structure collection. Inside the structure, you will find a nested structure called TagContext. Let us modify our code in such a way that one subset of the structure is dumped to the screen. Change the cfdump as shown in your code:

    <cfdump var="#cfcatch.TagContext#">

The structure allows us to drill down to just the pieces of information we are interested in without pulling the rest of the details along! We see that this information is stored in an array. We haven't covered arrays yet, but you could drill down all the way to the page where the problem occurred. We will learn how arrays work in ColdFusion later in this chapter. But now let's change the line of code one more time and give it a try:

<cfdump var="#cfcatch.TagContext[1].template#">

This is just for illustration, and not how we suggest you practice website development. The following screenshot will show you that we were able to narrow down the results for a more targeted piece of the information when desired:

You will notice something has changed. Where did the fancy wrapper for our CFDump go? It is gone because we are now outputting a simple variable. If there is no structure or complex variable, then we get just the simple variable where the CFDump is located on the page. Because the code error occurred at the end of the line, in this case it will start right from there and this explains why it is on the same line as the web page content in the browser.