• Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint

Makeover Exercise

In this exercise, we are going to start creating the application framework for our Beelze-Bubba site. We will start by creating a root-level Application.cfm file and adding some global variables to the file. Because we will eventually be securing our Admin directory (it’s the next step as a matter of fact), we are going to include an Application.cfm file in this directory as well.

Open your text editor and type the code in Listing 8.3.
Listing 8.3. Application.cfm

File:             Application.cfm 
Description:      Beelze-Bubba application settings 

<!--- Use the cfapplication tag to create an application 
        and enable session management ---> 


<!--- settings to make our application more portable ---> 

<!--- set the name of our database DSN ---> 

<!--- create a variable that maps to our images ---> 
<CFSET AppImagePath="http://#CGI.Server_Name#/NewSite/Images"> 

<!--- set webmaster email ---> 
<CFSET WebmasterEmail="info@beelze-bubba.com">

Save this file in the NewSite (root) folder.

This file uses the <CFAPPLICATION> tag to create the application, give it a name, enable session variables, and give them a timeout of 20 minutes. The file also sets the value of some global variables. Using these values in our code will make the application more portable.

For example, do you remember from Step 2 all the fuss we had to go through to make sure the image paths we used in our includes would work correctly? Well, if we set one variable in our Application.cfm file that maps out the path to our Images directory, we can then use that variable whenever we need to add an image. In addition, if we ever move the application or change the name or path of the Images directory, we can update all our image paths by changing this one line of code.

We also create a variable to represent our DATASOURCE name and webmaster’s email address.

Let’s retrofit our web site to use these variables. Open the Header.cfm file from the NewSite\_includes folder. Change the SRC attribute of all the <IMG> tags to use the AppImagePath variable we created in our Application.cfm file. Also change the mailto: link to use the new WebmasterEmail variable. The changes are highlighted in bold in Listing 8.4.
Listing 8.4. Changes to Header.cfm

File:             Header.cfm 
Description:      File header table for all files 

<!--- start header table ---> 

<!---       add variable set in the Application.cfm template 
            Don't forget to 'escape' the # symbols in the Hex color Codes that appear between CFOUTPUT tags---> <CFOUTPUT> 
        <TR BGCOLOR="##CC0000"> 
            <TD WIDTH="559" HEIGHT="79" VALIGN="middle" BGCOLOR="##FFFFFF"> 
              <IMG SRC="#AppImagePath#/logo.gif" WIDTH="266" HEIGHT="100" VSPACE="2"> 
            <TD VALIGN="bottom" WIDTH="202" ALIGN="right" BGCOLOR="##FFFFFF"> 
              <A HREF="mailto:#WebmasterEmail#"> 
                          <IMG SRC="#AppImagePath#/email.gif" WIDTH="150" 
HEIGHT="27" BORDER="0" ALT="send us some email"></A> 

                         <IMG SRC="#AppImagePath#/feedback.gif" WIDTH="150" 
HEIGHT="24" VSPACE="3" BORDER="0" ALT="please let us know what you think"></A> 

        <TR BGCOLOR="##333333"> 
            <TD HEIGHT="8" VALIGN="top" BGCOLOR="##FF6600" 
background="#AppImagePath#/bar.gif">      &nbsp; 
            <TD VALIGN="top" BGCOLOR="##FF6600" ALIGN="right" CLASS="date" 
background="#AppImagePath#/bar.gif" height="8">#DateFormat(Now(),"MMMM DD, YYYY")# &nbsp; 
        <TR BGCOLOR="##333333"> 
          <TD HEIGHT="16" VALIGN="top" BGCOLOR="##FFFFFF"> &nbsp; 
          <TD VALIGN="top" BGCOLOR="##FFFFFF">  &nbsp; 
<!--- end header table --->


Save the file and browse to the home page to make sure all your image links work correctly. Click the Email Us link to make sure the email link functions properly.

Let’s quickly update one of our queries with the BBWebAppDSN variable. Open the ProductList.cfm template from the NewSite\Products folder. Find the query at the top of the page and update the DATASOURCE attribute to use the BBWebAppDSN variable, as follows:

      SELECT  ProductNo, Name, Description, Category, Price, 
              ImageFile,  OnSpecial, SpecialPrice 
      FROM    Products 
      WHERE   Category = '#URL.Category#' 

Save the file. Browse to one of the product category listings to make sure the query still works.

Continue to retrofit all queries and images to use the Application.cfm variables.

In the next step, we are going to learn how to secure the Admin directory so that only authorized users can access the administration functionality. To do this, the Admin directory is going to need some additional application settings that the rest of the site does not need, so we are going to create a second Application.cfm file in that directory.

Open your text editor and type the code in Listing 8.5.
Listing 8.5. Admin Application.cfm

File:            Application.cfm 
Description:     Application settings for the Admin subdirectory 

<!--- include all setting from the root level Application.cfm file ---> 
<CFINCLUDE TEMPLATE="../Application.cfm"> 

<!--- additional security code will go here --->

Save this file as Application.cfm in NewSite\Admin.



Not a subscriber?

Start A Free Trial

  • Creative Edge
  • Create BookmarkCreate Bookmark
  • Create Note or TagCreate Note or Tag
  • PrintPrint