Home

The Menu Bar

Page 6 of 22 - Chapter 14

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.

<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.php";
   }
   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.

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.

Some Standard Include Files

(1) (2) (3) (4) (5) (6) (7) (8) (9) (10) (11) (12) (13) (14) (15) (16) (17) (18) (19) (20) (21) (22)

Sponsors

Home