| It is time to put some of the things we learned in this step to use and take the first steps toward turning our static web site into a dynamic web application. In this exercise, we will do the following: Reorganize the site to facilitate easier maintenance and to allow for projected growth Use <CFINCLUDE> to ease administration and reuse code Use the Now() and DateFormat() functions Document and comment your code
To start, we are going to reorganize the directory structure of our site. This will ease our administration burden and allow for planned future growth. In addition, we will need this structure later as we apply additional ColdFusion techniques in upcoming steps. During these exercises, we will be using a cascading style sheet called bbstyle.css to provide uniform formatting throughout our site. We will apply most of these styles using the HTML CLASS attribute. At the moment, all the HTML pages of our site are in the root directory. The first thing we are going to do is organize our site into a relatively flat directory structure, with a directory for each major section of the site as well as for any shared components, such as included pages. This will help organize our site, allow for growth, and pay dividends later when we learn about security and ColdFusion Application framework. You can download a copy of the web site files from this book's accompanying web site at www.LearnColdFusionMX.com. -
If you unzipped the exercise files by following the instructions in the appendix, you will have ended up with an empty folder called NewSite in the wwwroot folder of your web server. We will use this NewSite folder to build our makeover web site. Create a directory structure under the NewSite folder like the one shown in Figure 1.17 Figure 1.17. NewSite structure.  -
Copy the following files from the old web site into the directories indicated in Table 1.2. Replace all the .htm file extensions with .cfm. Table 1.2. Directory and File Structure| Directory | Files |
|---|
| _includes | Empty | | about | About.htm | | contact | Contact.htm | | feedback | FeedbackForm.htm | | images | logo.gif, feedback.gif, email.gif, spacer.gif | | news | News.htm | | products | Products.htm, Chillies.htm, Clothing.htm, Sauces.htm, Specials.htm | | styles | bbstyle.css |
-
Create three include files: one for the header information, one for the navigation menu that appears at the left, and one for the text-based navigation information that appears as a footer at the bottom of each page. -
Open the About.htm page in your editor and find the HTML comments <!-- start header table --> and <!--end header table -->. -
Use the Edit, Cut command to cut the code from between the two HTML comments. Open a second blank document and paste the code into it. -
Remove any HTML structure tags, such as <HTML> and <BODY> tags. Change the HTML comment tags into CFML comments. -
Now add CFML file information comments to the top of the file. -
Let's also add the current date to the header by changing the second cell in the second row to read as follows (notice the addition of the CLASS attribute to the <TD> tag): <TD VALIGN="top" BGCOLOR="#FF6600" ALIGN="right" > <CFOUTPUT>#DateFormat(Now(),"MMMM DD,YYYY")# </CFOUTPUT> </TD> -
Because we have changed our directory structure, we need to modify a few things. We must change the path information to the FeedbackForm link to read "../feedback/FeedbackForm.cfm". In addition, we need to change the path information in the SRC attribute of the <IMG> tags for the three images. We also need to add ../ to the beginning of all the path information. For example, src="/books/4/16/1/html/2/../images/logo.gif". -
You should be left with code similar to that shown in Listing 1.4. Listing 1.4 Header.cfm [View full width] <!--- File: Header.cfm Description: Header table for all files Author: Created: ---> <!--- start header table ---> <TABLE WIDTH="735" BORDER="0" CELLPADDING="0" CELLSPACING="0" ALIGN="center"> <TR BGCOLOR="#CC0000"> <TD WIDTH="559" HEIGHT="79" VALIGN="middle" BGCOLOR="#FFFFFF"> <IMG src="/books/4/16/1/html/2/../images/logo.gif" WIDTH="250" HEIGHT="75" 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/../images/email.gif" WIDTH="150" HEIGHT="27" BORDER="0" ALT="send us  some email"> </A> <A HREF="../feedback/FeedbackForm.cfm"> <IMG src="/books/4/16/1/html/2/../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="16" VALIGN="top" BGCOLOR="#FF6600"> </TD> <TD VALIGN="top" BGCOLOR="#FF6600" ALIGN="right" > <CFOUTPUT>#DateFormat(Now(),"MMMM DD,YYYY")# </CFOUTPUT> </TD> </TR> <TR BGCOLOR="#333333"> <TD HEIGHT="16" VALIGN="top" BGCOLOR="#FFFFFF"> </TD> <TD VALIGN="top" BGCOLOR="#FFFFFF"> </TD> </TR> </TABLE> <!--- end header table ---> -
Save this file into the _includes directory as Header.cfm. -
Return to your About.htm document. Just below the opening <BODY> tag, add the code to include the header. <!--- include header table ---> <CFINCLUDE TEMPLATE="../_includes/Header.cfm"> -
Add CFML file information comments to the top of the document. -
Because we have changed the directory structure of our site, we also need to change the path information for the style sheet link. <link rel="stylesheet" href="../styles/bbstyle.css" type="text/css"> -
Save the file as About.cfm. -
Now we will do something similar with the text-based navigation footer and left-side main navigation. Open the About.cfm file in your editor and find the HTML for the text-based navigation footer. <!-- text nav bar --> <P ALIGN="center"> <A HREF="Index.htm">Home</A> | <A HREF="News.htm">News</a> | <A HREF="Products.htm">Products</A> | About Us | <A HREF="Contact.htm">Contact Us</A> </P> -
Create a new blank document and cut and paste this information from your About.cfm file. -
Remove HTML structure tags and add CFML file information comments. Change the HREF attributes to reflect the new directory structure and .cfm extensions. Also add a link to the About.cfm file as illustrated in Listing 1.5. Listing 1.5 Footer.cfm <!--- File: Footer.cfm Description: Text-based secondary navigation menu Author: Barry Moore Created: 28-Jan-2002 ---> <!-- text nav bar --> <P ALIGN="center"> <A HREF="../Index.cfm">Home</A>| <A HREF="../news/News.cfm">News</A>| <A HREF="../products/Products.cfm">Products</A>| <A HREF="../about/About.cfm">About Us </A>| <A HREF="../contact/Contact.cfm">Contact Us</A> </P> -
Save this file into the _includes directory as Footer.cfm. -
Return to your About.cfm file and add the following code: <!--- include text-based nav bar ---> <CFINCLUDE TEMPLATE="../_includes/Footer.cfm"> -
One more to go. Find the code in your About.cfm file for the left-side main navigation links. <P> <A HREF="index.htm" >Home</A> </P> <P> <A HREF="news.htm" >News</A> </P> <P> <A HREF="products.htm" >Products</A><BR> <BR> <A HREF="chillies.htm" >Chillies</A><BR> <A HREF="sauces.htm" >Sauces</A><BR> <A HREF="clothing.htm" >Clothing</A><BR> <A HREF="gifts.htm" >Gifts</A><BR> </P> <P> <A HREF="about.htm" >About Us</A> </P> <P> <A HREF="contact.htm" >Contact Us</A> </P> -
Create a new blank document and cut and paste this information from your About.cfm file. -
Remove HTML structure tags and add CFML file information comments. Change the HREF attributes to reflect the new directory structure and .cfm extensions, as illustrated in Listing 1.6. Listing 1.6 LeftNav.cfm <!--- File: LeftNav.cfm Description: Left side main navigation menu Author: Created: ---> <!--- navigation menu ---> <P> </P> <P> <A HREF="../Index.cfm" >Home</A> </P> <P> <A HREF="../news/News.cfm" >News</A> </P> <P> <A HREF="../products/Products.cfm" >Products</A><BR> <BR> <A HREF="../products/Chillies.cfm" >Chillies</A><BR> <A HREF="../products/Sauces.cfm" >Sauces</A><BR> <A HREF="../products/Clothing.cfm" >Clothing</A><BR> <A HREF="../products/Gifts.cfm" >Gifts</A><BR> </P> <P> <A HREF="../about/About.cfm" >About Us</A> </P> <P> <A HREF="../contact/Contact.cfm" >Contact Us</A> </P> -
Return to your About.cfm file and add the following code in place of the previous navigation menu: <!--- include text-based nav bar ---> <CFINCLUDE TEMPLATE="../_includes/LeftNav.cfm "> -
Save the About.cfm file. -
The resulting About.cfm file should look similar to the code in Listing 1.7. Listing 1.7 About.cfm [View full width] <!--- File: About.cfm Description: Contains information about the company Author: Created: ---> <HTML> <HEAD> <TITLE> About Beelze-Bubba Chilli Co. </TITLE> <!-- Link to stylesheet --> <LINK REL="stylesheet" HREF="../styles/bbstyle.css" TYPE="text/css"> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LEFTMARGIN="2" TOPMARGIN="2" MARGINWIDTH="2" MARGINHEIGHT="2"> <!--- include header table ---> <CFINCLUDE TEMPLATE="../_includes/Header.cfm"> <!-- start main body table --> <TABLE WIDTH="735" BORDER="0" CELLPADDING="0" CELLSPACING="0" ALIGN="center"> <TR> <!-- navigation column --> <TD WIDTH="200" HEIGHT="438" VALIGN="top" BGCOLOR="#CC0000"> <!--- include main nav menu ---> <CFINCLUDE TEMPLATE="../_includes/LeftNav.cfm"> </TD> <!-- spacer column --> <TD WIDTH="10"> </TD> <!--- main body column ---> <TD WIDTH="365" VALIGN="top" BGCOLOR="#FFFFFF"> <P>About Beelze-Bubba<BR></P> <P>Main page text here .</P> <P> </P> <!--- include text-based nav bar ---> <CFINCLUDE TEMPLATE="../_includes/Footer.cfm"> </TD> <!-- spacer column --> <TD WIDTH="10" VALIGN="top"> </TD> <!-- right hand column --> <TD WIDTH="168" VALIGN="top"> This is the side bar column content </TD> </TR> </TABLE> </BODY> </HTML> -
Now go through the remaining HTML pages, removing the unnecessary code and replacing it with <CFINCLUDE> statements as we've done with About.cfm. Don't forget to save the files with a .cfm extension after the changes have been made. -
Save all the files into the CFMX10Steps\NewSite folder. Create a virtual mapping to the Newsite folder with your web server. For information on creating a virtual mapping to the NewSite directory please see the Appendix. -
You might find that the images and links to our home page, Index.cfm, do not work properly. This is because the relative paths in our included files work fine for files in our new directory structure, but they might not work for our Index.cfm file, which is in the root directory. Do not worry about this now. We will take care of this problem in the next step, "Using Variables." For now, just sit back and marvel at your handy work. -
After you have made the changes to all files and have saved them with a .cfm extension, you can delete the original HTM files.
If you want to compare code, all the finished files can be found in the CFMX10Steps directory. For more information on downloading and installing the book's supporting files please see the Appendix. |
