Coldfusion Web Developing
By Derek Mauland
11/16/05
Dr. Syed
COMS 463
Millions of Web sites exist that attract millions of visitors daily. Many Web sites
are being used as electronic replacements for newspapers, magazines, brochures, and
bulletin boards. The Web offers ways to enhance these publications using audio, images,
animation, multimedia, and even virtual reality. Coldfusion can enhance all this with
ease, it can be integrated easily as well as learned quickly.
ColdFusion is the intelligence on a server that makes web applications smarter.
Cold fusion is a application server, scripting language, it can integrate with databases
within the html code and can connection many cutting edge technologies. When
developing web applications coldfusion processes that data and interacts with other
systems. The ColdFusion MX 7 server software is easy and straight-forward to install.
After you have it on your development computer, you can start building your CFM pages
immediately.
Provide by Macromedia
It is much like HTML since both are scripting languages and both use tags to give
directions. HTML directs the browser with display and formatting commands but,
ColdFusion Markup Langauge (CFML) directs the coldfusion application server to
process data, manage user information and connect to other applications.
To make a coldfusion page it just needs to be saved with a .cfm extension for he
coldfusion server to process them. The most conventional way to create page is with
Dreamweaver MX 2004 but, it can simply be done using notepad text editor.
<cffunction name="echo" output="false" returntype="string">
<cfargument name="echoString" required="Yes" type="string">
<cfreturn "echo: #arguments[1]#">
</cffunction>
<cfoutput>
#echo("hello world")#
</cfoutput>
The code above creates a function with a return type of string . Using the CFML tags it
simple calls the function ‘echo’ which passes the string ‘hello world’ to be displace
Copy and paste this into notepad and save it as helloworld.cfm as well as saving it into
IIS root folder. For example, the following code creates three tabs of which each can
contain different coldfusion components:
The first tab contains an example of how date field input can be used with a flash GUI.
The second tab contains an example of how to validate input in a text field. The third tab
shows how easy it is to mask input in a text box.
<cfform format="flash">
<cfformgroup type="TabNavigator">
<cfformgroup type="page" label="Tab 1">
<cfinput type="dateField" name="startDate" label="Start Date:">
<cfinput type="dateField" name="EndDate" label="End Date:">
</cfformgroup>
<cfformgroup type="page" label="Tab 2">
<cfinput type="text"
name="quantity"
validate="integer"
validateAt="onSubmit,onServer"
required="yes"
message="Numeric quantity is required!">
</cfformgroup>
Tab shows how easy it is to mask input in a text field.
<cfformgroup type="page" label="Tab 3">
<cfinput type="text"
name="phone"
maxlength="13"
mask="(999) 999-9999">
</cfformgroup>
</cfformgroup>
</cfform>
In the first line of the code it contains the word ‘flash’ this is the format the page
will be displayed in. Coldfusion makes it easy to create pages with flash even you don’t
have any knowledge of flash.
This is a more complicated example of how to create a dynamic page using flash
page format. The first group of CF tags contains all of the text fields that will take the
users input. The groups of code below is the output of the text typed in. This is
displayed as that user types. It contains text field masking to get standardized input.
<cfform height="680" width="600" format="flash" skin="haloblue" >
<cfformgroup type="panel" label="Business Card Wizard"
style="color:##000000; fontSize:12; text-align: left;">
<cfformgroup type="Horizontal" label="Name">
<cfinput type="Text" name="firstName" width="100" required>
<cfinput type="Text" name="lastName" width="100" required>
</cfformgroup>
<cfinput type="Text" name="Title" label="Title:" width="210" required>
<cfinput type="Text" name="companyname" label="Company Name:"
width="210" value="" required>
<cfinput type="Text" name="Locationname" label="Name of Location:"
width="210" required>
<cfinput type="Text" name="StreetAddress" Label="Street Address:"
width="210" required>
<cfinput type="text" name="StateCityZip" Label="City, State and Zip:"
required>
<cfinput type="text" name="officenumber" label="Office Number:"
validate="noblanks,telephone" required="no"
mask="(999)999-9999">
<cfinput type="text" name="Mobile" label="Mobile:"
validate="telephone" required="No" mask="(999)999-9999">
<cfformgroup type="panel" label="Preview Card"
style="headerColors:##D6EFFE, ##D6EFFE;" >
<cfformgroup type="horizontal" height="65">
<cfformitem type="html" width="200" height="60"
style="color:##006090; fontSize:12; text-align: left;"><img src="cflogo.jpg"
name="FLIR Logo" width="58" height="64" border="0"
align="left"></img></cfformitem>
<cfformitem type="text" name="companyname" style="font-family :
'Arial';
font-size : 16pt;
font-style : bolder;
line-height : 12pt;
font-weight : bold;
font-variant : normal;
text-transform : capitalize;
color : 000000;
text-decoration : none;
text-align : right; border-style: solid;"
bind="{companyname.text}" ></cfformitem>
</cfformgroup>
<cfformgroup type="vertical">
<cfformitem type="text" name="Name" bind="{firstName.text}
{lastName.text}" style=" font-family : 'Arial';
font-size : 18pt;
font-style : bolder;
line-height : 10pt;
font-weight : bold;
font-variant : normal;
color : 000000;
text-decoration : none;
text-align : center;"></cfformitem>
<cfformitem type="text" name="title" bind="{Title.text}" style=" fontfamily : 'Arial';
font-size : 12pt;
font-style : normal;
line-height : 10pt;
font-weight : normal;
font-variant : normal;
text-transform : capitalize;
color : 000000;
text-decoration : none;
text-align : center;"></cfformitem>
</cfformgroup>
<cfformgroup type="horizontal">
<cfformgroup type="vertical" leading="0" style="margin-top: 0;
padding: 0;
border-top-width: 0;
padding-top: 0;
margin-bottom: 0;
border-bottom-width: 0;
padding-bottom: 0;">
<cfformitem type="text" name="locations"
bind="{Locationname.text}" style="indicatorGap:0; font-family : 'Arial';text-align :
left;"></cfformitem><cfformitem type="text" name="locations"
bind="{StreetAddress.text}" style="font-family : 'Arial';"></cfformitem>
<cfformitem type="text" name="zip" bind="{StateCityZip.text}"
style="font-family : 'Arial';"></cfformitem>
<textformat>
</textformat>
</cfformgroup>
<cfformgroup type="vertical">
<cfformitem type="text" name="Office" bind="Office:
{officenumber.text}" style="font-family : 'Arial'; text-align : right;" label="Office:"
></cfformitem>
<cfformitem type="text" name="Mobile" bind="Mobile:
{Mobile.text}" style="font-family : 'Arial';text-align : right;" ></cfformitem>
<cfformitem type="text" name="email" bind="Email:
{firstName.text}.{lastName.text}@mycompany.com" style="font-family : 'Arial';textalign : right;" ></cfformitem>
</cfformgroup>
</cfformgroup>
</cfformgroup>
<cfinput type="Submit" name="submitBtn" value="Submit Order">
</cfformgroup>
</cfform>
Using only two CFML tags, you can grab hundreds or even thousands of rows of
data from the database and display them in your pages. With the new ColdFusion MX 7
features, like enhanced reporting and charting, it has become even easier to quickly create
attractive and informative displays.
Building dynamic pages takes only 4 steps:
1. create a database
2. connect the database to coldfusion MX 7
3. write you coldfusion pages
4. place the files on the server
<cfquery name="artistsQuery" datasource="artist.db">
SELECT ARTISTID, FIRSTNAME, LASTNAME, PHONE
FROM ARTISTS
ORDER BY LASTNAME
</cfquery>
<b>Artists by Last Name</b>
<table cellpadding="5" cellspacing="0" border="1">
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Phone</th>
</tr>
<cfoutput query="artistsQuery">
<tr>
<td>#artistsQuery.lastName#</td>
<td>#artistsQuery.firstName#</td>
<td>#artistsQuery.phone#</td>
</tr>
</cfoutput>
</table>
Coldfusion basically adds more functionality to HTML by adding tags with the
following capabilities:
Read data from, and update data to, databases and tables
Create dynamic data-driven pages,
Perform conditional processing
Populate forms with live data
Process form submissions
 Generate and retrieve email messages
 Interact with local files
 Perform HTTP and FTP operations
 Perform credit-card verification and authorization
 Read and write client-side cookies
This is just a short list. There are many more functions which can be found at in the code
examples provided when you install Coldfusion MX 7.
Developers can build their own database or collaborate with other developers to build
one. ColdFusion can work with a variety of databases from simple file-based programs
like Microsoft Access to enterprise servers like Oracle, Sybase, Microsoft SQL Server,
and many more.
After the database is built, you need to register it with the ColdFusion MX 7
server. In previous versions of ColdFusion, you or the systems administrator had to use
the ColdFusion Administrator for this task. Although this feature still exists, the task is
made even more convenient by quick access in Dreamweaver MX 2004 through the use
of a Dreamweaver extension.
Processing a dynamic ColdFusion page is only slightly more complicated than
processing a static HTML page. When a web browser requests the page, the web server
does not pass the file back to the browser immediately, but rather, waits while the
ColdFusion MX 7 application server processes it ColdFusion processes pages from top
to bottom. It ignores the HTML tags and executes only the CFML tags. For instance,
when the ColdFusion server reaches a cfquery tag, it requests data from the database, and
when it reaches a cfoutput tag, it integrates that data into the page. When the ColdFusion
server is done processing the page, it has also stripped out all the CFML tags, leaving
only HTML behind. The resulting CFM page, with only HTML in it, is passed back to
the user's web browser through the web server for display.
Refered earlier, Coldfusion like HTML development, you can use any text editor
to build CFML pages. Though, Dreamweaver MX 2004 can greatly enhance your pages,
it was upgraded to make it easier to write ColdFusion code quickly and integrate with the
database effortlessly.
When developing your ColdFusion MX 7 applications locally on your
development computer, there is no need to transfer files, so the FTP server software is not
necessary. You will still need FTP client software, however, when you are ready to go
live and move files to the server. There is really not need to
Managing a web server is not something most developers want to learn how to do.
Luckily, ColdFusion MX 7 can be installed with its own standalone web server that is
easy to use and will allow you to skip the step of installing your own web server software
on your development computer.
The last piece of software you need on your development computer is a web
browser. This will allow you to request your ColdFusion pages like your users would and
will also allow you to thoroughly test your application before you move it to the server.
Questions for Coldfusion MX 7
Short Answer
1. What kind of server is Coldfusion ?
2. What does the Coldfusion server process when it is requested?
3. What kind of language is Coldfusion?
4. What does CFML stand for?
5. What text editor is most widely used in programming Coldfusion?
Multiple Choice
1. What tag is used for the format of the page?
a. <Cfform format =”flash”> </cfform>
b. <Cfml format = “flash” > </cfml>
c. <Html format = “cfml” </html>
d. <Asp format = “flash” </asp>
2. What text editor can be used to create coldfusion pages
a. Notepad
b. Dreamweaver
c. Word
d. Any text editor as long as the file extension is .cfm
3. What steps need to be done to create a dynamic page in Coldfusion/
a. Create database, connect DB to coldfusion server, write CFML code, put
files on server
b. Write CFML code, create DB, connect DB to coldfusion server, put files
on server
c. Order of creatation of db and code does not matter
d. Both ‘a’ and ‘b’
4. What is the process that the browser retrieves data?
a. Coldfusion server, database, Coldfusion server, web server, internet
server, client browser
b. Web server, Coldfusion server, database, Web server, client browser
c. Coldfusion server, database, internet server, web server, client browser
d. either ‘a’ or ‘b’
5. What functionality does Coldfusion tags add to HTML
a. Read data from, and update data to, databases and tables
b. Create dynamic data-driven pages,
c. Perform conditional processing
d. Populate forms with live data
e. All of the above
Fill in the blanks
1.<cffunction name="_____" output="false" returntype="string">
<cfargument name="echoString" required="Yes" type="string">
2. <________ "echo: #arguments[1]#">
</cffunction>
<cfoutput>
#echo("hello world")#
</cfoutput>
3. Code for a flash input for date:
<cfform form = “____”
<______ type="_____” name="startDate" label="Start Date:">
</cfform>
4. Cold for text box input
<cfinput type="____" >
.
5. Masking a text box for a phone number type of input
<cfinput type="text"
name="phone"
maxlength="13"
_____="__________">
Answers
6. What kind of server is Coldfusion ? application server
7. What does the Coldfusion server process when it is requested? It process data
from the database, or connects with other server components
8. What kind of language is Coldfusion? scripting
9. What does CFML stand for? ColdFusion Markup Language
10. What text editor is most widely used in programming Coldfusion? Dreamweaver
Multiple Choice
6. What tag is used for the format of the page?
a. <Cfform format =”flash”> </cfform>
b. <Cfml format = “flash” > </cfml>
c. <Html format = “cfml” </html>
d. <Asp format = “flash” </asp>
A
7. What text editor can be used to create coldfusion pages
a. Notepad
b. Dreamweaver
c. Word
d. Any text editor as long as the file extension is .cfm
D
8. What steps need to be done to create a dynamic page in Coldfusion/
a. Create database, connect DB to coldfusion server, write CFML code, put
files on server
b. Write CFML code, create DB, connect DB to coldfusion server, put files
on server
c. Order of creatation of db and code does not matter
d. Both ‘a’ and ‘b’
A
9. What is the process that the browser retrieves data?
a. Coldfusion server, database, Coldfusion server, web server, internet
server, client browser
b. Web server, Coldfusion server, database, Web server, client browser
c. Coldfusion server, database, internet server, web server, client browser
d. either ‘a’ or ‘b’
10. What functionality does Coldfusion tags add to HTML
a. Read data from, and update data to, databases and tables
b. Create dynamic data-driven pages,
c. Perform conditional processing
d. Populate forms with live data
e. All of the above
E
Fill in the blanks
1.<cffunction name="text" output="false" returntype="string">
<cfargument name="echoString" required="Yes" type="string">
2. <cffunction "echo: #arguments[1]#">
</cffunction>
<cfoutput>
#echo("hello world")#
</cfoutput>
3. Code for a flash input for date:
<cfform form = “flash”
<cfinput type="text” name="startDate" label="Start Date:">
</cfform>
4. Cold for text box input
<cfinput type="text" >
.
5. Masking a text box for a phone number type of input
<cfinput type="text"
name="phone"
maxlength="13"
mask="(999)-999-9999">