The homepage is the first page displayed in the main frame when the user browses to the web site.
The Homepage displays the site name and lists the music categories available for browsing using CategoryList.inc we created above.
<!--#include file="ServerSideGlobalDef.inc"--> <HTML> <HEAD></HEAD> <BODY> <BASEFONT SIZE=3 COLOR=#004080 FACE="Comic Sans MS,MS Sans Serif,Arial"> <H1 ALIGN="CENTER"> <FONT COLOR=#004080 FACE="Comic Sans MS">MusicMadOnline.com</FONT> </H1> <H3 ALIGN="CENTER"> <FONT COLOR=#004080 FACE="Comic Sans MS"> Prices so low we must be insane!!! </FONT> </H3> <DIV align="center"> <FONT FACE="Comic Sans MS" color="#FF8040"> Browse our categories below for great bargins, <BR> all available to purchase online with our secure online ordering system. </FONT> <P> <!--#include file="CategoryList.inc"--> </P> </DIV> </BODY> </HTML>
Save the file as Home.asp
The Menu Bar
The menu bar will contain three links, a link to the home page, a link to the
shopping basket and a link to the checkout. Also in the menu bar is a form with
an HTML select tag with a list of categories and a button which when clicked
will navigate the user to the category selected in the select tag.
First we add our server-side global include file. Next we add the client-side
scripting for the Checkout link. Script has been used here rather than an <A>
tag with an href property because we need to check a few things before deciding
where to navigate to. If cookies are disabled then we need to inform the user
that they won't be able to proceed and cancel the event by returning false.
If the basket is empty then there is no point going to the checkout so we navigate
to a page informing them their basket is empty. If cookies are enabled and the
basket contains goods then we navigate to the checkout.
<!--#include file="ServerSideGlobalDef.inc"-->
<HTML>
<HEAD>
<SCRIPT language='javascript'>
function linkCheckout_onClick()
{
if (parent.cookiesEnabled == false)
{
// cookies disabled - so checkout will not function
// inform user then cancel event
alert("You require cookies to be enabled to order online");
return false;
}
else if (parent.getCookie("Basket") == "")
{
// Empty basket - go to empty basket page
parent.fraMain.location.href = "emptybasket.asp";
}
else
{
// something in basket to buy - so go to checkout
parent.fraMain.location.href = "Checkout_frame.htm";
}
return true;
}
The next event we will code is that for the view basket link. The same principles apply for this link as the checkout.
function linkViewBasket_onClick()
{
if (parent.cookiesEnabled == false)
{
// cookies disabled - so basket will not function
// inform user then cancel event
alert("You require cookies to be enabled to order online");
return false;
}
else if (parent.getCookie("Basket") == "")
{
// Empty basket - go to empty basket page
parent.fraMain.location.href = "emptybasket.asp";
}
else
{
// basket has contents - display basket page in main frame
parent.fraMain.location.href = "viewbasket.asp"
}
return true;
}
Finally we add the event handler for the go button which when clicked navigates the main window to view goods in the category selected in the select control.
function cmdGoBrowse_onclick()
{
var sURL = document.frmMenu.cboBrowse.options _
[document.frmMenu.cboBrowse.selectedIndex].VALUE;
parent.fraMain.location.href = sURL;
}
</SCRIPT>
Now we need to add the links we have just coded for. They are contained within a table for formatting, this way we can space them evenly and horizontally across the frame.
</HEAD>
<BODY BACKGROUND="musicbk2.jpg">
<BASE TARGET="fraMain">
<TABLE>
<TR ALIGN="CENTER">
<TD VALIGN="TOP" WIDTH="150">
<A HREF="home.asp">
<STRONG>
<FONT FACE="comic sans ms" COLOR=#FF8040>Home</FONT>
</STRONG>
</A>
</TD>
<TD VALIGN="TOP" WIDTH="150">
<A HREF="#" TARGET="_self" NAME="linkViewBasket"
onClick="return linkViewBasket_onClick();">
<STRONG>
<FONT FACE="comic sans ms" COLOR=#FF8040>
Shopping Basket
</FONT>
</STRONG>
</A>
</TD>
<TD VALIGN="TOP" WIDTH="150">
<A HREF="#" TARGET="_self" NAME="linkCheckout"
onClick="return linkCheckout_onClick()">
<STRONG>
<FONT FACE="comic sans ms" COLOR=#FF8040>Checkout</FONT>
</STRONG>
</A>
</TD>
Our next task is to create the form containing the drop down
select box which contains a list of music categories the user can browse and
a button which when clicked navigates the main frame to view the available items
in the selected category.
The option tags for the select control need to be created dynamically on the
fly using ASP to create the HTML based on data pulled from the Category table.
We use the same stored procedure we used for the CategoryList.inc include file.
In fact the code is very similar to that in CategoryList.inc except here we are
creating option tags rather than table cell tags. The value for the option tags
is the URL for the browse.asp page with the CatId and Description added to the
end (which is then retrieved by ASP script in browse.asp).
<TD VALIGN="top" WIDTH="200">
<FORM METHOD=POST NAME="frmMenu">
<%
var loRS;
loRS = Server.CreateObject("ADODB.Recordset");
loRS.Open("Exec ListCategories", sdbConnString);
%>
<STRONG>
<FONT FACE="comic sans ms" COLOR=#FF8040>Browse</FONT>
</STRONG>
<SELECT NAME="cboBrowse" SIZE="1" onChange="cmdGoBrowse_onclick()">
<%
while (!(loRS.Eof))
{
%>
<OPTION VALUE="Browse.asp?CatId=<%=loRS("CatId")%>& _
Description=<%=escape(loRS("Description"))%>& _
StartItemId=-1">
<%=loRS("Description")%>
</OPTION>
<%
loRS.MoveNext();
}
loRS = null;
%>
</SELECT>
<INPUT TYPE="Button" NAME="cmdGoBrowse" _
onClick="cmdGoBrowse_onclick()" VALUE="Go">
</FORM>
Finally we finish off the page by adding the close tags for the table and the page itself.
</TD> </TR> </TABLE> </BODY> </HTML>
Save the page as top_menu.asp.
Comments