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.
Comments