Login | Register   
LinkedIn
Google+
Twitter
RSS Feed
Download our iPhone app
TODAY'S HEADLINES  |   ARTICLE ARCHIVE  |   FORUMS  |   TIP BANK
Browse DevX
Sign up for e-mail newsletters from DevX


advertisement
 

Warm Up to ColdFusion : Page 3

Macromedia's ColdFusion technology isn't new, but since the release of the MX version, there's been a new surge of interest. This is a great time to learn the basics of the CF environment. This simple guide will get you started with CFML, form-building, databases, and a sample application you can build in no time flat.


advertisement
ColdFusion and Forms
When creating a Web application, you often need information from the users who visit your site. Maybe you need their contact information to sign them up for a newsletter or to deliver products. Maybe you need them to provide feedback about the site itself.

Here's a real-life, practical example that asks people to select their favorite color then displays their name in that color so they can print it out to use as a reference on a later date (in case of amnesia or stroke).

First you need to make a page called fav_color_form.cfm. The page will contain a form that collects the user's name and favorite color using a text input field and a dropdown list.



<HTML> <BODY> <TABLE cellpadding="10"> <TR> <TD> <FORM Action="color_display.cfm" method="post"> <P>Name:<br> <INPUT type="text" name="name"></P> <P>Favorite Color:<br> <SELECT name="color" size="5"> <OPTION value=select selected>Select</option> <OPTION value="red">Red</option> <OPTION value="green">Green</option> <OPTION value="blue">Blue</option> <OPTION value="none">None of the above</option> </SELECT></P> <INPUT type="submit" value="Submit"> </FORM> </TD> </TR> </TABLE> </BODY> </HTML>

In a browser, the preceding code appears something look like Figure 1.

 
Figure 1: This sample form collects the user's name and favorite color using a text input field and a dropdown list.

Note that the text field is named "name" and the select list is named "color." When the user submits the form, ColdFusion has access to the variables "name" and "color," which will contain the values selected by the user.

Now, you need to create the file that will process the data sent by the form and output the user's name in their favorite color. In the FORM tag above, the action attribute value controls where the form submits the data; the sample form will submit its data to the file color_display.cfm, shown below:

<HTML> <BODY> <CFIF color EQ "select"> You need to go back and select a color. </CFIF> <CFIF color EQ "none"> You must be a bad person and we don't want to deal with your kind. </CFIF> <CFIF color EQ "red"> <CFOUTPUT> <FONT color="red">Your name is #name#</FONT> </CFOUTPUT> </CFIF> <CFIF color EQ "green"> <CFOUTPUT> <FONT color="green">Your name is #name#</FONT> </CFOUTPUT> </CFIF> <CFIF color EQ "blue"> <CFOUTPUT> <FONT color="blue">Your name is #name#</FONT> </CFOUTPUT> </CFIF> </BODY> </HTML>

The first CFIF tag checks to see if the color value is unspecified. It checks to see if the variable "color" is equal to "select," the default value. If so, the page returns the message "You need to go back and select a color." The subsequent CFIF tags deal with each possible color value.

Writing a CFIF for every possible entry of "color" gets the job done, but there's a better way. Rather than checking for every color, you can just return text rendered in the color sent by the form, using the user-selected color as the value of the color attribute of the FONT tag. You just need to ensure that the value of the color variable "color" is a color, not none and not the default value, select.

Here's the modified code:

<HTML> <BODY> <CFIF color EQ "select"> You need to go back and select a color. <CFELSEIF color EQ "none"> You must be a bad person and we don't want to deal with your kind. <CFELSE> <CFOUTPUT> <P><FONT color="#color#">Your name is #name#</FONT></P> </CFOUTPUT> </CFIF> <P>You can print this page to use as a reference in case of amnesia or stroke.</P> </BODY> </HTML>

There's a new tag in the preceding code—CFELSEIF. It's useful in this example because the code needs to test whether the color variable is equal to "select" and "none." If both those tests fail, ColdFusion displays the code after the CFELSE tag. CFELSEIF is a continuation of the CFIF tag and does not have to be closed.

You can display the values of variables using CFML anywhere on the page, including inside HTML tags. For example, you can insert the color the user selects in the form directly into the <FONT> tag as the "color" attributes value. This shortcut streamlines the code, which is good because the server does not have to process as many lines nor do you have to type them. If you fill out the form and enter "joe" in the name field and select blue as your favorite color, the server returns the following HTML to your browser:

<P><FONT color="blue">Your name is joe</FONT></P> <P>You can print this page to use as a reference in case of amnesia or stroke.</P>

You can test the Favorite Color Recovery System here.



Comment and Contribute

 

 

 

 

 


(Maximum characters: 1200). You have 1200 characters left.

 

 

Sitemap
Thanks for your registration, follow us on our social networks to keep up-to-date