Makeover Exercise In this step's makeover exercise, we are going to use our newfound knowledge of IF statements to clean up some of the rough edges of our project work to date. We will use IF statements to modify our text-based navigation menu. In addition, we will create a product details page to display more information about Beelze-Bubba's products. We also need to clean up the catalog display of our products to include the proper specials information. Text-Based Navigation in Footer.cfm Currently, our text-based navigation menu in our Footer.cfm file displays a link to all major pages in our site, even if we are currently on a particular page. For example, if a user is viewing the About.cfm page he still has a live link to that page in the navigation bar. There is nothing particularly wrong with this, but it is a bit lazy for world-class developers like us. We are going to use <CFIF> statements to check what page we are on and disable the link to the current page. To do this, we are going to use one of the CGI scope variables mentioned in Step 2, "Using Variables." The variable we are going to use is CGI.SCRIPT_NAME. This variable isolates everything in the URL after the domain name. For example, if a user makes a request for http://www.beelze-bubba.com/About.cfm, the value of #CGI.SCRIPT_NAME# would be About.cfm. NOTE For a complete list of available CGI scope variables, see the "Reference" section of the www.LearnColdFusionMX.com web site. -
Open the file Footer.cfm from your _includes directory in your NewSite folder. Place a <CFIF> statement around each link to see if the value of CGI.SCRIPT_NAME contains the filename for that link. The code should look similar to the following: <!--- check if we are on the home page ---> <CFIF CGI.SCRIPT_NAME CONTAINS "Index.cfm"> Home <CFELSE> <A href="http://CGI.Server_Name#/NewSite/Index.cfm">Home</A> </CFIF> The code checks to see if the script portion of the URL requested contains the string Index.cfm. If it does (we must be on the home page), we just output a plain text "Home." If it does not (we must be on some other page), we output a hyperlinked "Home." -
Repeat this procedure for each link. When you are finished, your code should look similar to the following: <!--- File: Footer.cfm Description: Text-based secondary navigation menu Author: Created: ---> <!-- text nav bar --> <CFOUTPUT> <P align="center"> <!--- check if we are on the home page ---> <CFIF CGI.SCRIPT_NAME CONTAINS "Index.cfm"> Home <CFELSE> <A href="http://CGI.Server_Name#/NewSite/Index.cfm">Home</A> </CFIF> <!--- check if we are on the News page ---> <CFIF CGI.SCRIPT_NAME CONTAINS "News.cfm"> | News <CFELSE> | <A href="http://CGI.Server_Name#/NewSite/News/News.cfm">News</A> </CFIF> <!--- check if we are on the Products page ---> <CFIF CGI.SCRIPT_NAME CONTAINS "Products.cfm"> | Products <CFELSE> | <A href="http://CGI.Server_Name#/NewSite/Products/Products.cfm">Products</A> </CFIF> <!--- check if we are on the About Us page ---> <CFIF CGI.SCRIPT_NAME CONTAINS "About.cfm"> | About Us <CFELSE> | <A href="http://CGI.Server_Name#/NewSite/About/About.cfm">About Us</A> </CFIF> <!--- check if we are on the Contact Us page ---> <CFIF CGI.SCRIPT_NAME CONTAINS "Contact.cfm"> | Contact Us <CFELSE> | <A href="http://CGI.Server_Name#/NewSite/Contact/Contact.cfm">Contact Us</A> </CFIF> </P> <P> </P> </CFOUTPUT> -
Save the file and browse to the page to check the links.
Create a Product Details Page Next we are going to create a product detail page for users who want to view expanded detail about a particular product. -
Navigate to your Examples\Step04 folder and open the file ProductDetail.htm. This file queries the database for product details based on a URL scope variable call pid (product ID). By configuring the file this way, we can use this one page to display information about any product. -
Save this file as ProductDetail.cfm in your NewSite\Products folder. -
Next let's create a link from the ProductList.cfm file we created in Step 3, "Databases and SQL," to our new ProductDetail.cfm template. While we are at it, let's throw in a groovy JavaScript to pop the page up in its own window. -
Open ProductList.cfm from the NewSite\Products directory. Find the code for the Details button image. Surround the <IMG> tag with a hyperlink to pass the URL of the ProductDetail.cfm template via a JavaScript onClick event. Additionally, pass the ProductNo field as a URL variable called pid. Your code should look similar to the code below. For more information on this JavaScript, see the sidebar "Somebody Open A Window." [View full width] <A HREF="##" onClick="window.open('ProductDetail.cfm?pid=#ProductNo#','window', config='height=400,width=480,toolbar=no,location=no,resizable=1,scrollbars=yes')"> <IMG src="/books/4/16/1/html/2/../images/details.gif" ALT="more product detail" WIDTH="75" HEIGHT="25" BORDER="0" VSPACE="10"> </A> NOTE Make sure that the code for the opening <A> tag remains all on one line in your text editor. If you do not, it might cause errors in some browsers. -
Save your ProductList.cfm file. Browse to the Products page and follow a link to one of the product categories. Click the Details button image to test your ProductDetail.cfm page.
Somebody Open A Window Let's take a closer look at the JavaScript we used in this section. JavaScripts are quite frequently tied to events. In this case, the event we are talking about is the onClick event for a particular link (meaning that when somebody clicks on that link, we want the JavaScript to run). The JavaScript we are going to run is a function called window.open(). You don't get any extra credit points for guessing that this function opens a new browser window. The window.open() function takes three arguments: the URL we want to open, the name we want to give the new window, and a list of configuration options for this new window. The configuration options determine what features and toolbars the new window will have. No or 0 means you do not want the item displayed; 1 means you do want the item displayed. Common configuration items are as follows: toolbar The toolbar at the top of the browser that includes the Back button. menubar The menu bar at the top of the browser that includes menus like File, Edit, View, and so on. scrollbars The horizontal and vertical scrollbars. resizable Is the window resizable by the user? location The location bar; this is where you would normally type the URL. status The status bar at the bottom of the browser window. height The height of the new window. width The width of the new window.
For more on JavaScript, try the New Riders book JavaScript Design (December 2001, ISBN: 0735711674) by Bill Sanders. |
Specials Information We have a bit of a problem at the moment. If you follow the links to the Sauces product category page, you will see that our specials box has Big Burn Sauce on sale for $7.50; however, the main body of the page advertises the sauce at its regular price (see Figure 4.7). To remedy this situation, we need to use CFIF statements in our ProductList.cfm template to check whether a product is on special before listing it. If it is, we will display the sale price along with a special image. Figure 4.7. A price discrepancy for a product on special. -
Open ProductList.cfm in your editor. To check whether the product is on special and to display the special price, we must pull that information from the database. Amend the query at the top of the page to select two more fields, the OnSpecial and SpecialPrice fields. The query should look similar to the following: <CFQUERY NAME="qProducts" DATASOURCE="BBdata"> SELECT ProductNo, Name, Description, Category, Price, ImageFile, OnSpecial, SpecialPrice FROM Products WHERE Category = '#URL.Category#' </CFQUERY> -
As the <CFOUTPUT> block loops through the query results, use a <CFIF> statement to check whether the product is on special and, if it is, to display the special price and graphic. The code for the table cell that displays the product information should look similar to the following: [View full width] <TD WIDTH="150" VALIGN="top"> <FONT COLOR="##990033"> <B>#Name#</B></FONT><BR> #Left(Description, 60)#...<BR> <!--- check to see if the product is on special ---> <CFIF OnSpecial IS NOT 0> <FONT FACE="Verdana, sans-serif"> <B>#DollarFormat(SpecialPrice)#</B> </FONT><BR> <IMG src="/books/4/16/1/html/2/../images/special.gif" ALT="on special" WIDTH="70" HEIGHT="30" BORDER="0"> <CFELSE> <FONT FACE="Verdana, sans-serif" > <B>#DollarFormat(Price)#</B> </FONT> </CFIF> </TD> -
Save ProductList.cfm. Browse to the Products page and follow the link to the Sauces category to view the changes (see Figure 4.8). Figure 4.8. The special price with a graphic.
Modify ProductDetail.cfm We are almost there, but there is still one problem. Even though the Big Burn Sauce description now displays the correct special price, if you click the Details button, the price listed here is still $11. Let's use the same type of <CFIF> statement to correct this problem. -
Open ProductDetail.cfm. Create a <CFIF> statement around the table row with the price information to check whether the product is on special and to use the appropriate pricing information. Your code should look similar to the following: <!--- add CFIF statement and graphic here to display special prices if this product is on special ---> <CFIF OnSpecial IS NOT 0> <TR> <TD WIDTH="80" VALIGN="top"> Price<BR> <IMG src="/books/4/16/1/html/2/../images/special.gif" ALT="on special" WIDTH="70" HEIGHT="30" BORDER="0"> </TD> <TD WIDTH="150" VALIGN="top" ALIGN="right"> #DollarFormat(SpecialPrice)# </TD> </TR> <CFELSE> <TR> <TD WIDTH="80" VALIGN="top"> Price </TD> <TD WIDTH="150" VALIGN="top" ALIGN="right"> #DollarFormat(Price)# </TD> </TR> </CFIF> -
Save your changes to ProductDetail.cfm. Browse to the Sauces product section. Test your work by clicking on the Details button image for the Big Burn Sauce. The ProductDetail.cfm page should now show the special price and graphic (see Figure 4.9). Figure 4.9. The amended product detail display. -
Finally, because our ProductDetail.cfm page now works for products on special, let's link the information in our On Special box to the detail page. -
Open OnSpecial.cfm from the _includes folder. Add a similar JavaScript-driven <A> tag around the text at the bottom that says "more>>". When creating the link this time, make sure you use an absolute reference to the Details page because the On Special box might be placed in several locations throughout the site structure. The link should look similar to the following code: [View full width] <!--- create a link to the ProductDetail.cfm page ---> <TD ALIGN="right"> <CFOUTPUT QUERY="OnSpecial"> <A HREF="##" onClick="window.open('http://CGI.Server_Name#/NewSite/Products/ ProductDetail.cfm?pid=#ProductNo#','window',config='height=400,width=480,toolbar=no, location=no,resizable=1,scrollbars=yes')">more>> </A> </CFOUTPUT> </TD> NOTE Again, make sure that the code for the opening <A> tag remains all on one line in your text editor. If you don't, it might cause errors in some browsers. -
Save your changes to OnSpecial.cfm. Browse to any page displaying the On Special box and test the link.
That's it for this makeover exercise. Sit back and admire your work. In the Step 5, "Using Forms with ColdFusion MX," we will look at processing Beelze-Bubba form information. |