Creating the Initial Frameset
The site consists of two basic frames. The top frame contains a menu bar with links for browsing the site and remains in view at all times. The bottom frame is where the action is at and will be used for displaying all the other pages on the site.
There are two client-side JavaScript functions inside the page. The first returns the value of the cookie whose name is passed as the function's parameter. As discussed in further detail in Chapter 18, document.cookie returns all the cookies for that web site but does not provide a way of retrieving just one particular cookie. The string returned by document.cookie takes the format cookiename=cookievalue; cookiename=cookievalue; and so on...
The second function handles the frasetMain_onload() event. As the web site relies heavily on cookies, particularly for the shopping basket we need to check the user has cookie's enabled. Though this site is designed only for cookie supporting browsers, they can be disabled under a browser's security options. We need to check for this and if the user accesses a part of the site which requires cookies then we will inform them they need to be enabled to use the web site.
Methods for checking if cookies are enabled vary from browser to browser, but I have used one which works for version 3 browsers and above. We set a global variable in the window_onload event of the top frame that we can access later from child windows.
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
var cookiesEnabled = false;
// Retrieves particular cookie
function getCookie(cookieName)
{
var cookieFoundAt;
var cookieValue;
// find start position in cookie string
cookieFoundAt = document.cookie.indexOf(cookieName + "=");
if (cookieFoundAt < 0)
{
cookieValue = "";
}
else
{
// move to actual start of cookie's data
cookieFoundAt = document.cookie.indexOf("=",cookieFoundAt);
cookieFoundAt++;
// find end position of cookie's data
cookieEnd = document.cookie.indexOf(";", cookieFoundAt);
if (cookieEnd == -1)
{
cookieEnd = document.cookie.length - 1;
}
cookieValue =document.cookie.substring(cookieFoundAt,cookieEnd);
}
return cookieValue;
}
// Check whether cookies enabled
function frasetMain_onload()
{
document.cookie = "Enabled=true";
var cookieValid = document.cookie;
// if retrieving the VALUE we just set actually works
// then we know cookies enabled
if (cookieValid.indexOf("Enabled=true") != -1)
{
cookiesEnabled = true;
}
else
{
cookiesEnabled = false;
alert("You need to enable cookies on your browser to take
advantage of our online ordering");
}
}
</SCRIPT>
<TITLE>Welcome to MusicMadness.Com</TITLE>
</HEAD>
<FRAMESET BORDER=5 ROWS="62,*" NAME="frasetMain"
onLoad="frasetMain_onload()">
<!-- MenuBar Top Frame -->
<FRAME SCROLLING="NO" SRC="top_menu.asp" NAME="fraTop" NORESIZE>
<!-- Main area - where most of the displaying
of information occurs -->
<FRAME SCROLLING="AUTO" SRC="home.asp" NAME="fraMain" NORESIZE>
</FRAMESET>
</HTML>
With this page completed you need to save it as MusicMad.htm. To make life easy for yourself create a new directory called MusicMad and put it in there. This is where we will put all the files for this project. You may also wish to make this a virtual directory on your development machine and share it as MusicMad for easy access during development and testing. Note that all of these files are available as part of the source code download for this book from http://www.wrox.com and that the entire of this will be running as a demo from http://rapid.wrox.com/books/270x.
Displaying A List Of Categories
To allow the user to browse the available music categories we need to dynamically produce a list of categories contained in the database table Category.
To retrieve the data from the database we must create a new stored procedure and name it ListCategories:
- In Enterprise Manager under the MusicMad database root, right click Stored Procedures and select New Stored Procedure.
- Add the following SQL and then click OK to return to the main view:
CREATE PROCEDURE [ListCategories] AS
SELECT CatId, Description FROM Category
ORDER BY Description
You'll need to give MMCustomer execute permissions for the stored procedure.
Right-click the newly created stored procedure and select Manage Permissions from under the All Tasks menu. Tick the EXEC check box for MMCustomer as shown below and then click OK to close the dialog box.
The stored procedure is now complete and you need to return to your HTML editor to create the page that uses it.
Some Standard Include Files
Web page and scripting creation do not easily lend themselves to code reuse. However, one way of accomplishing code reuse is server-side include files whereby a file is included within a page by use of the <!--#include file=""--> directive available with NT Server via ASP.
The next piece of scripting we will write is an include file to create a dynamic list of music categories available for browsing. Taking the information from the Category table in the database, this include file creates a table of links which when clicked takes the user to a list of goods available within that category.
Using the server-side include directive we will incorporate this file in a number of pages in the web site demonstrating code reuse.
Continued...
