Your First ColdFusion Application
By Shannon Eric Peevey, UNT Central Web Support
Shannon will be teaching two Short Courses on ColdFusion this semester. Check the Short Course schedule for dates, times, and locations. -- Ed.
Last month, I outlined the procedure that you follow to get started with Macromedia ColdFusion on the University of North Texas campus. We discussed the way to get a Website setup on our ColdFusion server, and how to access that site to add content.This month, I am going to continue our series with the article, "Your First ColdFusion Application."
If you have contacted me, and/or have your site up and are ready to add content to it, you are ready to start the creation of your first ColdFusion application. The first thing that you need to know, is that you don't need any special tools to create ColdFusion applications. You can write raw HTML, use an HTML editor, etc, and then just manually add the CFML tags later. The other option that is available to you, is buying the Macromedia ColdFusion Studio, which is recommended by Macromedia, (of course...) and which costs $495. This tool is a very nice environment to work in when doing heavy ColdFusion coding, but from a budgetary standpoint, your department must decide between the cost, and the extent of time spent coding ColdFusion. (I think that the Studio is a nice HTML editor, and I use the Studio for all of my coding, but I don't know if it is the right choice for everybody. I have found that you should not open WebPages that have been created in another HTML editor, such as FrontPage, in the design view of ColdFusion Studio, because it changes the HTML and costs you a lot of clean-up time fixing it. If you do need to make changes to the format of the page, make the changes manually in the edit screen, but beware!!! Keep a back-up available just in case!)
The second thing you must know, is that it is easy to code in ColdFusion! I know many people on campus that started at the same place that you are, and can now create amazing pages.(Check out http://web2.unt.edu/calendar!) What I mean is, do not be afraid to jump in and try it for yourself.The initial fear of jumping into a new tool is normal, but unfounded. That's why I am here.:-) With one simple example, you will see how easy it is to code in ColdFusion, and how easy it is to send, and remember, information from one page to another. Are you ready?!
In The Beginning...
First, we need a simple page that contains a couple of forms to input data into.
<HTML><HEAD><TITLE>Welcome to the Test</TITLE></HEAD><BODY><P><FONT SIZE=4 STYLE="font-size: 16pt"><B>Welcome to the ColdFusion Test Application:</B></FONT></P><FORM><P><FONT SIZE=3><B> Please enter your name here:<INPUT TYPE=TEXT NAME="name" SIZE=25></B></FONT></P><P><FONT SIZE=3><B> Please enter your telephone here:<INPUT TYPE=TEXT NAME="phone" SIZE=25></B></FONT></P><DIV ALIGN=LEFT><P><FONT SIZE=3><B> <INPUT TYPE=BUTTON NAME="submit"</DIV></FORM></BODY></HTML>
Save this page as a .cfm file, so that the web server will recognize that the information contained in this page is to be interpreted by the ColdFusion server. You can name it anything you would like, but for this example, we will name it "test.cfm". This is a simple web page that will ask the user to enter their name and telephone number.
To show you how this plain, "boring" HTML page can be transformed into a dynamic page, we will only need to add a little information to our <FORM> tag. We will need to add the attribute METHOD, and set it to "post". This tells the server to send the information contained by the form in the body of the submission, as opposed to sending the information in the URL, as GET would. When you are finish this, you may be asking yourself, "where does the information from this page go?" You know where you want it to go to, but how do you get the server to do that for you...? To solve this problem, we must add the ACTION attribute to the FORM. The ACTION attribute, tells the server where to send the "posted" data, therefore, we must decide on the location of the file which will receive and interpret the data. In ColdFusion, you will enter the name of the target file for this form. In this case, it will be "test2.cfm". (Notice the .cfm extension again.) Therefore, the <FORM> tag will be changed from:
<FORM ACTION="test2.cfm" METHOD="post">
And that completes the first step in creating our application.
Now, we need to write our second page, test2.cfm, and must discuss the syntax of the ColdFusion "language", or scripting tags. These tags, are the language that causes the ColdFusion server to take certain actions. They are very simple, and often mimic the English names for actions that we would like to accomplish with the ColdFusion tag that we are using. For example, <CFINSERT> is the ColdFusion tag that "inserts" data from a web form into a database. <CFUPDATE> "updates" the information in a database, and <CFOUTPUT> "outputs" the data from a source to the screen. You will notice that the tags look like HTML tags, and are actually used in the same way as you would use HTML. You drop them directly into your HTML code, and when the page is called by a browser, the ColdFusion server interprets them and returns the necessary information to the screen. (This use of HTML-type tags is one of the reasons that many people find CFML, or ColdFusion Markup Language, to be a very simple way to create dynamic WebPages.)
The process of creating the test2.cfm is only slightly more difficult than the creation of the test.cfm file. You will first need to create a new .cfm file named test2.cfm. (As with the first file, it can be named anything that you want, but be aware that you need to set the ACTION attribute on test.cfm to point to the name of the new file that we are going to create.) After you have created the file, you will need to add the HTML tags as follows:
<HTML><HEAD><TITLE>This page interprets the data from test.cfm</TITLE></HEAD><BODY></BODY></HTML>
Because this is an example, you can see that I am only including the most necessary tags to create a working web page. If you sent the results of test.cfm to test2.cfm with the page in this state, you would see nothing but a blank page on the screen, but if you add CFML tags, your web page will become a dynamic page. This being the case, we will now add CFML tags in between the BODY tags. The tags that we will be using are <CFOUTPUT> tags, which allow you to pull information from the posted document, test.cfm, and output the data to the screen. Remember, we will need to open and close these tags just as you would in HTML. After opening and closing the <CFOUTPUT> tags, we will add the variables for our output values, which will be the word Form, followed by a period, and then the name of the form element from test.cfm. These words are then surrounded with pound signs, #. (In this example, you will see that they are #Form.name# and #Form.phone# Also, be sure to include the # signs. The ColdFusion server recognizes the variables by the # signs that bracket the variable name and will not work if not included. ) When finished, your document will look like this:
<HTML><HEAD><TITLE>This page interprets the data from test.cfm</TITLE></HEAD><BODY><CFOUTPUT><H2>#Form.name#</H2><H2>#Form.phone#</H2></CFOUTPUT></BODY></HTML>
Upload these files to your web site on Web2.unt.edu, and test them in your browser. You should see something like this http://web2.unt.edu/speeves/test.cfm.
That is all there is to it! As you can see, it is very simple to do amazing things with ColdFusion. Some of the pages that we have at UNT, are based around this simple retrieve and output data, and you will find that your sites will be much more powerful because of the fact that you are able to remember information from one page to the next. Although... The ability to retrieve and store data is an even greater tool for us to interface with the general public from our sites. That is why we are going to explore the ability of ColdFusion to interface with databases.That is where the meat of ColdFusion coding is!
Until next month!! :-)