| In this portion of our makeover, we are going to start the creation of an administration section of the web site. We are going to provide Beelze-Bubba staff members with a secure, browser-based, administration console where they will be able to perform maintenance on their own web site and database. In this step's makeover exercise, we are going to do the following: In later steps, we will add additional functionality and security to the administration section. -
In your NewSite directory, create a subdirectory called Admin. -
In your CompletedFiles\Examples\Step06\Admin folder, you will find four files: AdminHome.cfm, ProductList.cfm, inc_Banner.cfm, and inc_Navigation.cfm. Copy these files into your new NewSite\Admin folder. -
These files make up the basic structure for the Beelze-Bubba administration panel. Browse to http://localhost/NewSite/Admin/AdminHome.cfm. You should see a page similar to the one in Figure 6.7. Figure 6.7. The Beelze-Bubba administration panel.  -
Notice that the administration panel displays the product currently marked as on special with a link to edit that product's database entry. In addition, choosing one of the category links to the left will result in a display of all the products within that category with links to edit their respective database entries (see Figure 6.8). Figure 6.8. The display of a product listing.  -
Our next step is to create the ProductEdit.cfm file, which will display a form that has been prepopulated with the current information for the product selected. This form will enable us to edit the information for that product and send the new details to an action page that will update the database. -
Open your text editor and type the code in Listing 6.6 or open the completed ProductEdit.cfm file from the CompletedFiles\MakeoverExercises\Step06 folder. Listing 6.6 ProductEdit.cfm [View full width] <!--- File: ProductList.cfm Description: Homepage for site administration Author: Created: ---> <!--- get product information ---> <CFQUERY NAME="qProductDetails" DATASOURCE="BBdata"> SELECT * FROM Products WHERE ProductNo = '#URL.pid#' </CFQUERY> <HTML> <HEAD> <TITLE>Edit Product Description</TITLE> <LINK REL="stylesheet" HREF="../styles/bbstyle.css" TYPE="text/css"> </HEAD> <BODY> <!--- include banner ---> <CFINCLUDE TEMPLATE="inc_Banner.cfm"> <!--- table for main content ---> <TABLE CELLSPACING="2" CELLPADDING="2" BORDER="0"> <TR> <!--- cell with navigation menu ---> <TD VALIGN="top" WIDTH="175"> <CFINCLUDE TEMPLATE="inc_Navigation.cfm"> </TD> <!--- main content cell ---> <TD VALIGN="top"> <B>Edit Product Description</B> <!--- begin nested table with form ---> <TABLE BGCOLOR="#FFFFCC" BORDERCOLOR="#000000" BORDER="1" CELLPADDING="4"  CELLSPACING="0" > <CFFORM ACTION="ProductUpdate.cfm" METHOD="POST"> <TR> <TD>Product Number</TD> <TD> <CFOUTPUT> #UCase(qProductDetails.ProductNo)# <INPUT TYPE="hidden" NAME="ProductNo" VALUE="#qProductDetails. ProductNo#"> </CFOUTPUT> </TD> </TR> <TR> <TD>Product Name</TD> <TD><CFINPUT TYPE="Text" NAME="Name" VALUE="#qProductDetails.Name#" MESSAGE="Please enter a named" REQUIRED="Yes" SIZE="30" MAXLENGTH="100"></TD> </TR> <TR> <TD>Description</TD> <TD><TEXTAREA COLS="40" ROWS="6" NAME="Description" WRAP="Virtual"><CFOUTPUT>#qProductDetails. Description#</CFOUTPUT></TEXTAREA></TD> </TR> <TR> <TD>Category</TD> <TD> <CFSELECT NAME="Category"> <!--- use a list loop to loop through category names ---> <CFLOOP INDEX="i" LIST="Chillies,Clothing,Gifts,Sauces"> <CFIF i IS qProductDetails.Category> <!--- if the current list value is the same as the product category, the option is selected ---> <CFOUTPUT><OPTION VALUE="#i#" SELECTED>#i#</OPTION></ CFOUTPUT> <CFELSE> <!--- just list the option ---> <CFOUTPUT><OPTION VALUE="#i#">#i#</OPTION></CFOUTPUT> </CFIF> </CFLOOP> </CFSELECT> </TD> </TR> <TR> <TD>Price</TD> <TD><CFINPUT TYPE="Text" NAME="Price" VALUE="#NumberFormat( qProductDetails.Price,"999.99")#" MESSAGE="Enter a price" REQUIRED="Yes" SIZE="10"> </TD> </TR> <TR> <TD>Image File Name</TD> <TD><CFINPUT TYPE="Text" NAME="ImageFile" VALUE="#qProductDetails. ImageFile#" MESSAGE="Enter image file name" REQUIRED="Yes" SIZE="10"></TD> </TR> <TR> <TD>On Special</TD> <TD> <CFIF qProductDetails.OnSpecial IS 0> <CFINPUT TYPE="Checkbox" NAME="OnSpecial"> <CFELSE> <CFINPUT TYPE="Checkbox" NAME="OnSpecial" CHECKED="Yes"> </CFIF> </TD> </TR> <TR> <TD>Special Price</TD> <TD><CFINPUT TYPE="Text" NAME="SpecialPrice" VALUE="#NumberFormat(qProductDetails.SpecialPrice, "999.99")#" REQUIRED="No" SIZE="10"></ TD> </TR> <TR> <TD>Notes</TD> <TD><TEXTAREA COLS="40" ROWS="6" NAME="Notes" WRAP="Virtual"><CFOUTPUT>#qProductDetails.Notes# </CFOUTPUT></TEXTAREA></TD> </TR> <TR> <TD> </TD> <TD><INPUT TYPE="submit" NAME="Submit" VALUE="Update Details"></ TD> </TR> </CFFORM> </TABLE> </TD> </TR> </TABLE> </BODY> </HTML> -
Save the file as ProductEdit.cfm in your NewSite\Admin folder. If you follow the Edit link from the ProductList.cfm file, you should see a form similar to the one in Figure 6.9. Figure 6.9. The ProductEdit.cfm form display.  This form begins by running a query (called qProductDetails) based on the product number (the primary key field) passed via a URL scope variable called pid. There are a couple of included pages for the banner across the top as well as the navigation down the left side. There is also a table for the page layout. In the main content cell of the table, we begin a CFFORM with form controls representing all the fields in the Products table of the BBdata.mdb database. We then populate the form controls with information from the database record for the particular product that has been selected. When the form is submitted, it will post all the information to an action page called ProductUpdate.cfm. There are some items of note in the form. First, we are using a hidden form field to pass the product number to the action page. It is a hidden field because we do not want to give users the capability to change this value, but it must be passed to the action page for the database update to work. The UCase() function just above the hidden field forces the value of the ProductNo field to be displayed in uppercase. We use an HTML <TEXTAREA> tag to display the contents of the Description and Notes fields. This is because those fields contain too much information to display practically in a <CFINPUT> field, and there is no ColdFusion equivalent to the <TEXTAREA> tag. Another item of note is the use of a <CFLOOP> (a List loop) to build the category options for our <CFSELECT>. The loop starts by looping through a list of category values specified in the opening <CFLOOP> tag and assigning each value to a variable called i. Each time through the loop, the value of i is compared to the category value for the product selected, and if they match, we add the SELECTED attribute to that OPTION tag. If the values don't match, we just output a normal OPTION tag without the SELECTED attribute. We also use a new function called NumberFormat() to make sure price values are displayed with two decimal points. For more information on the NumberFormat() function, see the Reference section of the www.LearnColdFusionMX.com web site. The last item of interest on the form is the <CFIF> statement, which determines whether the OnSpecial value is 0. If the value is 0, we output an empty check box; if it is not, we output a filled check box. Remember that check boxes and radio buttons will pass a value only if they are filled in. NOTE If a user enters a block of text in either the Description field or the Notes field that is longer than one paragraph, it will be entered into the database with the appropriate carriage returns. However, when this multiparagraph block is pulled from the database and included in a web page, the carriage returns will be ignored (because they are not based on HTML tags). To preserve paragraph formatting, you must either enter the appropriate <P> tags into the text block when entering text or use the ParagraphFormat() function when outputting the fields on a web page. The ParagraphFormat() function converts embedded double carriage returns into HTML <P> tags to maintain proper paragraph formatting. The proper syntax for the ParagraphFormat() function is as follows: #ParagraphFormat(Variable)# Upon completion of this exercise, open the ProductDetail.cfm file from your NewSite\Products folder and add the ParagraphFormat() function to the output of the Description and Notes fields so that they appear as follows: #ParagraphFormat(Description)# #ParagraphFormat(Notes)# In addition, you will have to add the ParagraphFormat() function to the output of the NewsBody field on the News.cfm template in your NewSite\News folder. -
Now that we have the update form sorted out, let's create the action page. Open your text editor and enter the code in Listing 6.7 or open the completed ProductUpdate.cfm file CompletedFiles\MakeoverExercises\Step06 folder. Listing 6.7 ProductUpdate.cfm <!--- File: ProductUpdate.cfm Description: Action page for ProductEdit.cfm Author: Created: ---> <!--- if the checkbox on the form was not checked its value will not be passed so check to see if it exists, if not give it the value of 0 ---> <CFPARAM NAME="FORM.OnSpecial" DEFAULT="0"> <!--- update product information ---> <CFQUERY DATASOURCE="BBdata"> UPDATE Products SET Name = '#Trim(FORM.Name)#', Description = '#Trim(FORM.Description)#', Category = '#Trim(FORM.Category)#', Price = #Val(FORM.Price)#, ImageFile = '#Trim(FORM.ImageFile)#', OnSpecial = #(FORM.OnSpecial)#, SpecialPrice = #Val(FORM.SpecialPrice)#, Notes = '#Trim(FORM.Notes)#' WHERE ProductNo = '#FORM.ProductNo#' </CFQUERY> <HTML> <HEAD> <TITLE>Successful Product Update</TITLE> <LINK REL="stylesheet" HREF="../styles/bbstyle.css" TYPE="text/css"> </HEAD> <BODY> <!--- include panel ---> <CFINCLUDE TEMPLATE="inc_Banner.cfm"> <!--- table for main content ---> <TABLE CELLSPACING="2" CELLPADDING="2" BORDER="0"> <TR> <!--- cell with navigation menu ---> <TD VALIGN="top" WIDTH="175"> <CFINCLUDE TEMPLATE="inc_Navigation.cfm"> </TD> <!--- main content cell ---> <TD VALIGN="top"> <B>The details for '<CFOUTPUT>#FORM.Name#</CFOUTPUT>' have been successfully updated.</B> </TD> </TR> </TABLE> </BODY> </HTML> -
Save this file as ProductUpdate.cfm in your NewSite\Admin folder.
This template is quite a bit simpler than the form page. Because check boxes only pass a value if they have been filled in (not if they are blank), we begin with a <CFPARAM> tag to check whether the OnSpecial variable has been passed by the form. If it has not, we assign it a value of 0. Next we use the <CFQUERY> tag and some UPDATE SQL to update the product information in the database with the newly edited information from the form. We also use the Trim() and Val() functions to make sure the data passed by the form is in a format the database will accept. Finally, we display a confirmation message to the user in the main content cell of the table. Try using the form to change product information such as price. Also try using the form to change the product displayed in the On Special box throughout the web site. This can be accomplished by clearing the On Special check box for the existing special product and submitting the form. Next, choose a new product and check the On Special check box for that product in the ProductEdit.cfm form and submit the form. By using a simple form and some UPDATE SQL, we have given Beelze-Bubba staff members the capability to update their products database live online and instantly change the information displayed on the public portion of the web site. Try using your newfound skills to build an interface for Beelze-Bubba staff members so that they can insert new News items and edit existing ones. First, you will have to create a blank form for them to enter News item information. Second, create an action page, using either SQL or <CFINSERT>, to add that information to the NewsItems table of the BBdata database. Here's a hint for you: The primary key value for the News table (NewsItemID) is a Microsoft Access autonumber field, and values for this field will be automatically assigned (by the database) when inserting new information. To edit existing News items, you will have to create a News item listing from which to select the News item you want to update. Then you will have to create a form similar to the one we created for our Product information. You will also have to create an action page for this form that uses either SQL or <CFUPDATE> to update information in the NewsItems table of our BBdata database. If you get stuck, you can look at the files in your CompletedFiles\MakeoverExercises\Step06 folder. |
