ColdFusion MX: From Static to Dynamic in 10 Steps

By Barry Moore

During this portion of our web site makeover, we will do the following:

• Use CGI variables to ensure that all the path information for our included files is always correct, no matter where in our directory structure the included page ends up.

• Prepare for future exercises by adding URL variables to our product categories.

First we will fix some of the file path problems that we might have encountered with our included files. When you use a <CFINCLUDE> to include code in a page (as we did in Step 1), you will remember that it is essentially the same as copying the code into the calling template. This might cause problems if the templates are in different directories and you are using relative paths for image and file links. However, if you use absolute paths, you have to change that information every time you move your code from a development or testing server to a production server.

In the previous step, we setup a directory structure called NewSite to hold our makeover web site. You should have a virtual mapping to the directory set up. For information on setting up virtual mappings see the Appendix, "System Setup".

In the first part of this exercise, we will add CGI variables to the path information in our three included files: Header.cfm, Footer.cfm, and LeftNav.cfm. By adding these CGI variables, we will create "automatic" absolute path information that will work with whatever server the files are stored on. Follow these steps to get this accomplished:

1. Open Header.cfm in your editor.

2. Change the path information for the image tag for our logo to read as follows:

   <IMG src="/books/4/16/1/html/2/http://CGI.Server_Name#/NewSite/Images/logo.gif" WIDTH="250" HEIGHT="75" VSPACE="2">

   When ColdFusion processes the template, it will use the values for the server name for the web server on which the files are currently stored.

3. Repeat the procedure for the other two graphics.

4. In the Header.cfm file, you will find a link to the FeedbackForm.cfm file. Add similar code to this link:

   <A HREF="http://CGI.Server_Name#/NewSite/Feedback/FeedbackForm.cfm">

5. Put <CFOUTPUT> </CFOUTPUT> tags around the entire table.

6. If you were to try to use the template now, it would produce an error. Because we have surrounded the table with <CFOUTPUT> tags, ColdFusion will become confused by the # symbols in the hexadecimal color values. You must escape the # symbol by putting an additional # symbol in front of it. For more information, see the Note on escaping pound signs in Step 1.

7. You should end up with code very similar to that displayed in Listing 2.4.

   Listing 2.4 Header.cfm

   [View full width]

   <!--- File: Header.cfm Description: File header table for all files Author: Created: ---> <!--- start header table ---> <!--- add CGI Variables to make sure the path info is correct no mater where the template is used as a CFINCLUDE. Don't forget to 'escape' the # symbols in the Hex color codes that appear between CFOUTPUT tags---> <CFOUTPUT> <TABLE WIDTH="735" BORDER="0" CELLPADDING="0" CELLSPACING="0" ALIGN="center"> <!--- escape the # symbol in the color codes ---> <TR BGCOLOR="##CC0000"> <TD WIDTH="559" HEIGHT="79" VALIGN="middle" BGCOLOR="##FFFFFF"> <IMG src="/books/4/16/1/html/2/http://CGI.Server_Name#/Images/logo.gif" WIDTH="266" HEIGHT="100" VSPACE="2"> </TD> <TD VALIGN="bottom" WIDTH="202" ALIGN="right" BGCOLOR="##FFFFFF"> <A HREF="mailto:info@beelzebubba.com"> <IMG src="/books/4/16/1/html/2/http://CGI.Server_Name#/NewSite/Images/email.gif" WIDTH="150"HEIGHT="27" BORDER="0" ALT="send us some email"></A> <!--- don't forget to add path info to the HREF attribute of the link to the form ---> <A HREF="http://CGI.Server_Name#/NewSite/Feedback/FeedbackForm.cfm"> <IMG src="/books/4/16/1/html/2/http://CGI.Server_Name#/NewSite/Images/feedback.gif" WIDTH="150" HEIGHT="24" VSPACE="3" BORDER="0" ALT="please let us know what you think"></A> </TD> </TR> <TR BGCOLOR="##333333"> <TD HEIGHT="8" VALIGN="top" BGCOLOR="##FF6600" background="http://CGI.Server_Name#/ NewSite/images/bar.gif"> &nbsp; </TD> <TD VALIGN="top" BGCOLOR="##FF6600" ALIGN="right" background="http:// #CGI.Server_Name#/NewSite/images/bar.gif" height="8"> #DateFormat(Now(),"MMMM DD, YYYY")# &nbsp; </TD> </TR> <TR BGCOLOR="##333333"> <TD HEIGHT="16" VALIGN="top" BGCOLOR="##FFFFFF"> &nbsp; </TD> <TD VALIGN="top" BGCOLOR="##FFFFFF"> &nbsp; </TD> </TR> </TABLE> </CFOUTPUT> <!--- end header table --->

8. Save your changes.

9. Open Footer.cfm in your editor. Use CGI variables to add path information to the links for the navigation bar. Your code should look similar to Listing 2.5.

   Listing 2.5 Footer.cfm

   <!--- File: Footer.cfm Description: Text-based secondary navigation menu Author: Created: ---> <!-- text nav bar --> <CFOUTPUT> <P align="center"> <A href="http://CGI.Server_Name#/NewSite/Index.cfm"> Home </A>| <A href="http://CGI.Server_Name#/NewSite/News/News.cfm"> News </A>| <A href="http://CGI.Server_Name#/NewSite/Products/Products.cfm"> Products </A>| <A href="http://CGI.Server_Name#/NewSite/About/About.cfm"> About Us </A>| <A href="http://CGI.Server_Name#/NewSite/Contact/Contact.cfm"> Contact Us </A> </P> </CFOUTPUT>

10. Save your changes.

11. Open LeftNav.cfm in your editor. Using CGI variables, add path information to

    the links for the navigation menu. Your code should look similar to Listing 2.6.

    Listing 2.6 LeftNav.cfm

    <!--- File: LeftNav.cfm Description: Left side main navigation menu Author: Created: ---> <!--- navigation menu ---> <CFOUTPUT> <!--- add CGI Variables to make sure the path info is correct no mater where the template is used as a CFINCLUDE ---> <BR> <P> <A HREF="http://CGI.Server_Name#/NewSite/Index.cfm" >Home</A> </P> <P> <A HREF="http://CGI.Server_Name#/NewSite/News/News.cfm" >News</A> </P> <P> <A HREF="http://CGI.Server_Name#/NewSite/Products/Products.cfm" >Products</A><BR> <A HREF="http://CGI.Server_Name#/NewSite/Products/Chillies.cfm" >Chillies</A><BR> <A HREF="http://CGI.Server_Name#/NewSite/Products/Sauces.cfm" >Sauces</A><BR> <A HREF="http://CGI.Server_Name#/NewSite/Products/Clothing.cfm" >Clothing</A><BR> <A HREF="http://CGI.Server_Name#/NewSite/Products/Gifts.cfm" >Gifts</A><BR> </P> <P> <A HREF="http://CGI.Server_Name#/NewSite/About/About.cfm" >About Us</A> </P> <P> <A HREF="http://CGI.Server_Name#/NewSite/Contact/Contact.cfm" >Contact Us</A> </P> </CFOUTPUT>

12. Save your changes.

13. Browse to the home page. Check that the links all work correctly and that the images appear correctly on each page.

    In the next part of the exercise, we are going to prepare some of our links for upcoming exercises. In a future exercise, we are going to create one ProductCategory.cfm page to display products from a chosen category. To do this, we will have to pass a category variable to that page via the URL.

14. Open LeftNav.cfm in your editor.

15. Find the link for the Chillies product category and add a URL variable to specify the product category. Your link should look something like this:

    <A HREF="http://CGI.Server_Name#/NewSite/Products/Chillies.cfm?Category=Chillies" >Chillies</A>

16. Follow the same procedure for the rest of the product categories. Your code should end up looking similar to Listing 2.7.

    Listing 2.7 LeftNav.cfm with Category Variables

    [View full width]

    <!--- File: LeftNav.cfm Description: Left side main navigation menu Author: Created: ---> <!--- navigation menu ---> <CFOUTPUT> <!--- add CGI Variables to make sure the path info is correct no mater where the template is used as a CFINCLUDE ---> <BR> <P> <A HREF="http://CGI.Server_Name#/NewSite/Index.cfm" >Home</A> </P> <P> <A HREF="http://CGI.Server_Name#/NewSite/News/News.cfm" >News</A> </P> <P> <A HREF="http://CGI.Server_Name#/NewSite/Products/Products.cfm" >Products</A><BR> <A HREF="http://CGI.Server_Name#/NewSite/Products/Chillies.cfm?Category=Chillies" >Chillies</A><BR> <A HREF="http://CGI.Server_Name#/NewSite/Products/Sauces.cfm?Category=Sauces" >Sauces</A><BR> <A HREF="http://CGI.Server_Name#/NewSite/Products/Clothing.cfm?Category=Clothing" >Clothing</A><BR> <A HREF="http://CGI.Server_Name#/NewSite/Products/Gifts.cfm?Category=Gifts" >Gifts</A><BR> </P> <P> <A HREF="http://CGI.Server_Name#/NewSite/About/About.cfm" >About Us</A> </P> <P> <A HREF="http://CGI.Server_Name#/NewSite/Contact/Contact.cfm" >Contact Us</A> </P> </CFOUTPUT>

17. Save your file.

18. Browse to the home page and hover your mouse pointer over the category links. Check the URL information displayed in the browser's status bar to confirm that the links are correct. Do not try to follow these links at the moment because they point to a page that does not currently exist; we will create the new page in a future exercise.