Application
This chapter guides you through the ColdFusion development process as you create a ColdFusion application page, save it, and view it in a browser.
Contents
• The Development Process... 10
• Writing Code ... 10
• Saving Application Pages... 11
• Viewing Application Pages ... 11
• Variables... 13
• Adding More Variables to the Application ... 14
The Development Process
Whether you are creating a static HTML page or a ColdFusion application page, you follow the same iterative process:
• Write some code.
• Save the code to a document or page.
• View the page in a browser.
• Modify the page.
• Save the page again.
• View it in a browser.
• and so on...
Writing Code
Although you can code your application pages using NotePad or any HTML editor, this manual will use ColdFusion Studio because it affords many features that make ColdFusion development easier. See Using ColdFusion Studiofor details. If you haven’t already done so, you should install ColdFusion Studio.
From a coding perspective, the major difference between a static HTML page and a ColdFusion application page is that ColdFusion pages contain ColdFusion Markup Language (CFML). CFML is a markup language that's very similar in syntax to HTML so Web developers find it intuitive.
Unlike HTML which defines how things are displayed and formatted on the client, CFML identifies specific operations that are performed by ColdFusion Server.
To create a ColdFusion application page:
1. Open ColdFusion Studio.
2. Select File > New and select the Default Template for your new page. 3. Edit the file so that it appears as below:
<HTML> <HEAD> <TITLE>Call Department</TITLE> </HEAD> <BODY> <STRONG>Call Department</STRONG> <CFSET Department="Sales"> <CFOUTPUT>
I’d like to talk to someone in #Department#. </CFOUTPUT>
</BODY> </HTML>
Chapter 2: Writing Your First ColdFusion Application 11
Saving Application Pages
Instead of saving pages with an HTM or HTML file extension, you save ColdFusion application pages with a CFM or CFML extension. By default, the Web server knows to pass a page that contains a CFM extension to the ColdFusion Server when it is requested by a browser.
Save ColdFusion application pages underneath the Web root or another Web server mapping so that the Web server can publish these pages to the Internet. For example, you might want to create a directory myapps and save your practice pages there.
To save the page:
1. Select File > Save.
2. Save your page as calldept.cfm in myapps under the Web root directory. For example, the directory path on your machine may be:
c:/inetpub/wwwroot/myapps on Windows NT or <mywebserverdocroot>/myapps on UNIX
Viewing Application Pages
You view the application page on the Web server to ensure that the code is working as expected. Presently, your page is very simple. But, as you add more code, you will want to ensure that the page continues to work.
To view the page in a local browser:
1. Open a Web browser on your local machine and enter the following URL: http://127.0.0.1/myapps/calldept.cfm
Where 127.0.0.1 refers to the localhost and is only valid when you are viewing pages locally.
2. Use the Web browser facility that allows you to view a page’s source code to examine the code that the browser uses for rendering.
Compare the code that was returned to the browser with what you originally created. Notice that the ColdFusion comments and CFML tags are processed, but do not appear in the HTML file that’s returned to the browser.
Code Review
The application page that you just created contains both HTML and CFML. You used the CFML tag CFSET to define a variable, Department, and set its value to be "Sales." You then used the CFML tag CFOUTPUT to display text and the value of the variable.
Original ColdFusion page HTML file returned by Web server
<HTML> <HEAD> <TITLE>Call Department</TITLE> </HEAD> <BODY> <STRONG>Call Department</STRONG> <!--- Set all variables ---> <CFSET Department="Sales"> <CFOUTPUT>
I’d like to talk to someone in #Department#. <!--- Display results ---> </CFOUTPUT> </BODY> </HTML> <HTML> <HEAD> <TITLE>Call Department</TITLE> </HEAD> <BODY> <STRONG>Call Department</STRONG>
I’d like to talk to someone in Sales.
</BODY> </HTML>
Code Description
<!--- Set all variables ---> CFML comment, which is not returned in the HTML page.
<CFSET Department="Sales"> Creates a variable named Department and sets the value equal to Sales.
<!--- Display results ---> CFML comment, which is not returned in the HTML page.
<CFOUTPUT>
I’d like to talk to someone in #Department#.
</CFOUTPUT>
Displays whatever appears between the opening and closing CFOUTPUT tags, in this case the text "I’d like to talk to someone in" followed by the value of the variable Department, which is "Sales."
Chapter 2: Writing Your First ColdFusion Application 13
Variables
A Web application page is different from a static Web page because it can publish data dynamically. This involves creating, manipulating, and outputting variables.
A variable stores data that can be used in applications. As with other programming languages, you’ll set variables in ColdFusion to store data that you want to access later. And you’ll reference a range of variables to perform different types of application processing.
There are a variety of variable types that you can create and reference in your ColdFusion applications. Also, ColdFusion variables are typeless, which means that you don’t need to define whether or not the variable value is numeric, text, or time- date. See the CFML Language Reference for a complete list of variable types
The primary differences between variable types are where they exist, how long they exist, and where their values are stored. These considerations are referred to as a variable’s scope.
You will learn more about scope as needed throughout this book.
For example, you would store a user’s preferences in a variable in order to use that data to customize the page that’s returned to the browser.
You don’t use pound signs when you create the variable. However, when you want to display the value that a variable is set to, enclose the variable name in pound signs (#). The following table illustrates the use of pound signs and variable names.
CFML Code Results
<CFSET Department="Sales"> The variable named Department is created and the value is set to Sales.
<CFOUTPUT>
I’d like to talk to someone in Department.
</CFOUTPUT>
ColdFusion doesn’t treat Department as a variable because it isn’t surrounded by pound signs. The HTML page will display: I’d like to talk to someone in Department. <CFOUTPUT>
I’d like to talk to someone in #Department#.
</CFOUTPUT>
ColdFusion replaces the variable Department with its value. The HTML page will display: I’d like to talk to someone in Sales.
Adding More Variables to the Application
Applications can use many different variables. For example, the calldept.cfm application page can set and display values for department, city, and salary.
To modify the application:
1. Return to the file calldept.cfm in ColdFusion Studio, 2. Modify the code so that it appears as follows:
<HTML> <HEAD> <TITLE>Call Department</TITLE> </HEAD> <BODY> <STRONG>Call Department</STRONG> 4 <!--- Set all variables --->
<CFSET Department="Sales"> 4 <CFSET City="Boston"> 4 <CFSET Salary="110000" 4 <!--- Display results --->
<CFOUTPUT>
4 I’d like to talk to someone in #Department# in #city# who earns at least #Salary#.
</CFOUTPUT> </BODY> </HTML> 3. Save the file.
4. View the page in your Web browser by entering the following URL: http://127.0.0.1/myapps/calldept.cfm
Development Considerations
The same development rules that apply for any programming environment apply to ColdFusion. You should also follow the same programming conventions that you would with any other language:
• Comment your code as you go.
HTML comments use this syntax: <!-- html comment --> CFML comments add an extra dash: <!--- cfml comment --->
• File names should be all one word, begin with a letter and can contain only letters, numbers and the underscore.