Year: 1999

Categories
JavaScript

Implement a DHTML Mouseover effect with DOM

Originally published in WebBuilder magazine. Found courtesy Wayback Machine.

The DOM, or Document Object Model, is a specification recommended by the World Wide Web Consortium (W3C) primarily to help eliminate cross-browser dynamic HTML differences. It is implemented with Microsoft’s Internet Explorer (IE) 5.x, and will be implemented with Netscape’s Navigator 5.x when it is released. You probably haven’t seen that many demonstrations of the DOM and its impact on DHTML implementations, and the ones you have seen probably have been fairly complicated. At times you might even think it would be less complicated and would require a lot less code to implement the DHTML using the technologies supported in the 4.x browsers and just deal with the cross-browser problems.

However, you will find that in the long run, the DOM, in addition to XML (Extensible Markup Language), HTML 4.0, and CSS (Cascading Style Sheets), will simplify your development efforts once you have grown accustomed to the technology. In fact, using the DOM can actually make your coding a whole lot easier and cut down on the number of lines of code you need, depending on what you hope to accomplish.

This article will show you how to create a text-based menu mouseover effect, complete with menu tips that will work with IE 5.x and with the August, 1999 M9 build of Gecko available at Mozilla.org (as tested in a Windows environment). Before learning how to use the DOM specification to create a mouseover effect, you might find it useful to get a little history on mouseovers as they are implemented without using the DOM. This next section will highlight why the DOM is an improvement over the existing implementations of DHTML.

Pre-DOM Mouseover Effects
One of the first implementations of “dynamic” HTML occurred when Netscape exposed images for access from an images array from the HTML document object, and then allowed you to modify the source of the image through the src attribute. For instance, this line of code uses JavaScript to replace the existing source of a displayed image with a new image source:


document.images[0].src = "somenew.gif";

A popular use of this dynamic HTML technique was to implement the mouseover effect. The mouseover effect gives a visual cue to the user that the mouse’s cursor is over a certain element in a Web page. The cue remains visible until the cursor moves away from the element. The mouseover effect has long been considered one of the classic implementations of dynamic Web page effects.

Most commonly, you use mouseover effects to highlight menu items. A problem with using the image changing approach for this purpose is that you have to use graphics for the menu, adding to the overall page download times, and the effect won’t work with anything but images. If you wanted to provide a help message for the menu item, you would need to include this message as a part of the image or use some other technique such as Java applets.

These limitations were resolved when CSS positioning and styles, and exposure of the browser document object model, were released under the term of “Dynamic HTML” (DHTML) in Microsoft’s Internet Explorer 4.x and Netscape Navigator 4.x. With the introduction of DHTML, changing the image source wasn’t the only approach you could take to generate a mouseover effect. You could use dynamic positioning, including hiding and showing elements to display the associated menu item text.

This example shows a menu item with a hidden menu text tip. By capturing the onMouseOver and onMouseOut event handlers, you change the style of the menu text to show the tip when the mouse is over the menu item; otherwise you return the text to its original appearance to hide the tip:


<DIV id="one" style="width: 150; z-index: 1" 
   onmouseover="this.style.color='red';onetext.style.visibility='inherit'"
   onmouseout="this.style.color='black';onetext.style.visibility='hidden'">
Menu Item One
</DIV>
<DIV id="onetext" style="visibility: hidden; margin: 20px">
This is the associated text for Menu Item One
</DIV>

However, this approach did not work as intended because the implementation of DHTML included with the 4.x browsers only supported element hiding when the element was positioned. Also, the style setting would not work with Navigator 4.x. Navigator 4.x does not allow you to modify the script of an element’s CSS1 style setting after the element has been rendered (displayed) to the page.

To get around the cross-browser limitations and differences, you could create two different absolutely positioned versions of the elements, and hide one of them. The hidden element would then have the “highlighted” CSS style setting and would be shown when the mouse was over the element and hidden otherwise:


<DIV id="one1" style="z-index: 1"
   onmouseover="switch_on('one')">
Menu Item One
</DIV>
<DIV id="one2" style="color: red;
   font-weight: 700; z-index: 2; visibility:hidden"
   onmouseover="switch_off('one')">
Menu Item One <br>
This is the associated help text to display with menu item one
</DIV>

This approach again worked with IE, but not with Navigator, because Navigator and IE supported different event models and event handlers. To make sure event handling worked with both browsers, and to be consistent, you would use a link to surround the menu item and the mouse events would be captured in the link:


<a href="" onclick="return false" onmouseover="switch_on('one')">

With this workaround, the mouse events are being captured correctly, but there’s still one more problem remaining, which I call the “phantom mouseover effect.” Normally, a user moves the mouse cursor over an element, triggering the process to hide the regular menu item and show the highlighted version. When the user moves the mouse cursor away, the effect is reversed. However, if the person moves the mouse too quickly, the original element gets both the mouseover and mouseout events before the highlighted menu item is even shown. When this happens, the highlighted element stays visible even when the mouse is moved out of the area because it didn’t receive the mouseout event, leaving what is virtually a phantom effect. The user must move the mouse’s cursor over the item again, more slowly, to trigger the regular menu item to appear.

To avoid this phantom effect, you can employ another technique that uses a third, invisible element. In this case, you use a small transparent GIF image and size it to fit over the menu item. The invisible element traps both the mouseover and mouseout events, and invokes the functions to hide the regular and highlighted menu items accordingly. Here is an example of this type of mouseover handling that works with Navigator 4.x and up and IE 4.x and up. First, you create the menu item, its highlighting, and the event capturing blocks:


<!-- menu item one -->
<DIV id="one" style="left: 140; top: 140; z-index: 2">
<a href="" onclick="return false" 
   onmouseover="switch_on('one')"
   onmouseout="switch_off('one')"><img src="blank.gif" 
width=150 height=30 border=0></a>
</DIV>

<DIV id="oneb" style="left: 150; top: 150;
   z-index: 1">
Menu Item One
</DIV>

<DIV id="onec" style="left: 150; top: 150; 
   z-index: 1; visibility:hidden"
   class="highlight">
Menu Item One -
This is the associated help text to display with menu item one
</DIV>

Next, you create the script that processes the menu highlighting:


// set items visibility using 
// specific browser technology
function SetObjVisibility (obj, visi) {
   if (navigator.appName == "Microsoft Internet Explorer")
        document.all(obj).style.visibility=visi;
   else
        document.layers[obj].visibility=visi;
}

// switch highlighting on
function switch_on(theitem) {
   SetObjVisibility(theitem+"b", "hidden");
   SetObjVisibility(theitem+"c","inherit");
}

// switch highlighting off
function switch_off(theitem) {
   SetObjVisibility(theitem+"c", "hidden");
   SetObjVisibility(theitem+"b","inherit");
}

To overcome cross-browser document object model differences, you use an eval function to evaluate and invoke the visibility setting for the element being hidden or displayed. This page will work with Navigator 4.x and up and IE 4.x and up. However, the workarounds to the cross-browser problems make the code much larger and more complex than you’d want for such a simple effect. Instead, you should consider using the DOM to create a simple mouseover menu effect.

Enter the DOM
DOM Level 1 is the most recent recommended specification for DOM from the W3C. The DOM supports a browser-neutral specification that, when implemented within a browser, lets you dynamically access the elements within the Web page, using an approach that will work consistently across browsers and across platforms.

Without getting into too much detail on the DOM, the specification groups the elements of a Web page into a hierarchy, and you can obtain a reference to an element by first accessing its parent and then accessing the element from the parent’s element list. For instance, an HTML table would contain rows, the rows would contain cells, and the cells would contain the data that is displayed. To access a specific cell’s data, you would first need to access the table, then the row containing the cell, the cell, and then access the cell’s contents.

Another key aspect to the DOM is that instead of defining every single HTML element within the specification, it defines a fairly generic set of elements and then defines how to work with the elements directly, and as they relate to each other. Additionally, the W3C has provided an ECMAScript binding for the core elements of the DOM, and the HTML-specific API based on the DOM.

The example in this article uses the HTML version of the document object, or HTMLDocument. This version provides a method, “getElementById”, which allows you to access an element within the document by its “ID” attribute. Additionally, Navigator 5.x and IE 5.x both support HTML 4.0 and CSS2 (for the most part), which means both support the onmouseover and onmouseout event handlers within tags such as DIV tags. Also, both browsers expose the style object so you can dynamically modify the CSS style attribute of an element. Here, you define the two menu items and their associated menu tips:


<!-- menu item one -->
<DIV id="one" style="height: 30; width: 140"
   onmouseover="on('one')" onmouseout="off('one')">
Menu Item One
</DIV>

<DIV id="onetext" 
   style="display:none; width: 140; margin: 10px; 
   font-size: 10pt; background-color: white; color: red">
This is the text associated with the first menu item
</DIV>

<!-- menu item two -->

<DIV id="two" id="two" style="height: 30; width: 140"
   onmouseover="on('two')" onmouseout="off('two')">
Menu Item Two
</DIV>
<DIV id="twotext"
   style="display:none; width: 140; margin: 10px; 
   font-size: 10pt; background-color: white; color: red">
This is the text associated with the second menu item
</DIV>

Because you define the menu items as DIV blocks that are not absolutely positioned within the Web page, they will appear in the upper left corner of the document. Also, notice that the menu tips aren’t hidden with the visibility property; you remove them out of the context of the document with the display CSS attribute set to “none”.

Next, you create the script that processes the menu highlighting. This script does a couple of things. First, it uses the type attribute for the SCRIPT element to define the language used for the script block.


<SCRIPT type="text/JavaScript">

Then the script creates functions to highlight the menu item (“on”) and turn off highlighting (“off”). The functions themselves access the menu item and tip by using the DOM method getElementById. This method returns a reference to the element you want to modify:


// get specific div item, identified by node index
var itm = document.getElementById(val);
var txt = document.getElementById(val+"text");

The functions turn the display for the menu tip on or off, depending on whether the mouse is over the menu or has moved away from the menu item. Because you use display instead of visible, the other elements of the page are moved to accommodate the newly displayed item. Visible hides an element but leaves the “box” that the element occupies within the document flow; display set to “none” removes the element completely from the page flow:


// turn on menu tip display
txt.style.display="block";

…

// turn off menu tip display
txt.style.display="none"

In addition to altering the display of the menu tip, you can also change the CSS style on the menu item. For example, you can increase the font weight and modify the font and background color of the element. Notice that no cross-browser code is present in this example. With the 5.x releases of Navigator (as demonstrated in the M9 release of Gecko that you can obtain at Mozilla.org) and IE, both browsers now support exposing CSS attributes through the style object and dynamically modifying these attributes:


// set style properties
itm.style.backgroundColor="green";
itm.style.color="yellow"
itm.style.fontWeight = 700;

By using the DOM (and browsers that support HTML 4.0 and CSS), you can halve the amount of code required to create the mouseover effect, as you can see from the complete example.

Categories
Technology

Creating a Shopping Cart ASP Component

Originally published in ASP Today, October 20, 1999

As soon as HTML forms were added to the HTML specification, and CGI use extended to server-side applications, folks immediately thought of using the Web for online stores – the concept of the shopping cart was born. If you’ve ever done any online shopping, you’ve used a shopping cart.

A shopping cart is basically a small application that maintains a list of the Web shopper’s selections in such a way that they can be viewed and modified at any time. By itself, the cart is a fairly simple application, but folks end up rolling an inventory control system, an order processing system, a customer service system and the overall Web site maintenance into one application with the misnomer “shopping cart”. What should be a small, compact system sprawls into something large and difficult to manage.

The way a cart keeps tracks of items and persists the list of those items, tends to differ from implementation to implementation: they might be tracked for a single session, or persist from session to session. The cart itself can be created on a specific computer or be accessible from many computers. Although a shopping cart application can interface with other applications, like an order system, an inventory system, or general Web maintenance, it does not implement this functionality itself:

This article will look at the creation of a simple ASP-based shopping cart application that uses a Visual Basic shopping cart component – all of which can be found in the download at the end of the article, with a text file telling you what you’ll need and how to use it.

Shopping Cart Implementation Requirements

First and foremost, a shopping cart has to persist from Web page to Web page, so some sort of technique needs to be used to associate an identifier with a shopping cart and then persist that identifier between Web pages. The items contained in the cart do not need to be accessible from all pages, but the cart identifier does. Because of this essential functionality, shopping carts are usually dependent on Web client Cookies to maintain the link between the cart and the shopper.

There are other techniques that can be used to persist information about the cart between pages. Some developers use hidden form fields (containing the shopping cart identifier or possibly a string of the cart’s items), or add shopping cart information to the end of the URL of the new page that is being accessed. Both of these techniques make the cart information available in the new page. To use these techniques in an ASP shopping cart, you could get the hidden form fields from the Forms collection of the Request built-in ASP object; or the appended URL information from the QueryString collection that is, again, part of the Request object.

If a store chooses to support a shopping cart for a session only (carrying information from the user’s initial store access until they log out, close their browser or disconnect from the Internet), then either hidden form fields or query string method will work fine. However, if cart needs to persist beyond the session, then Cookies are the way forward. Using Cookies, the Web developer can persist the shopping cart for the session or for a specified period of time.

Using Cookies alone, the shopping cart and its contents are maintained solely on the client, so the cart’s contents can be accessed quickly. There is, unfortunately, a major limitation with this approach – Cookies can only hold so many items, usually not many more than 50 – 75. Should the cart need to hold more than this, then Cookie technology on it’s own simply isn’t a viable approach, because the Cookie string can get too large. Even a couple of items can create a large Cookie string.

There is another problem with Cookie technology: the cart can’t follow the shopper. So if a shopper starts a cart on their laptop then they have to keep it there: they can’t access the same cart from their desktop computer at home, or a computer at work, because Cookies don’t travel. The shopper could export the cookies to all of their computers if the browser they’re using supports this technology, but most folks don’t consider exporting cookies and many aren’t even aware of this capability.

The solution, then is to bring the shopping cart to the computer and have it create whatever Cookies it needs to be supported in the new environment.

The Ideal Shopping Cart

The ideal Shopping cart that we could implement using ASP and Visual Basic, for the purposes of this article, will allow:

  • An item to be added to a shopping cart at the touch of a button
  • Shopping cart items to persist for more than one shopping session
  • Some indication that there are items in the shopping cart to be displayed, at least on the site’s home page
  • The Web shopper to view the shopping cart contents at any time, and the contents to be displayed whenever an object is added to the cart
  • The store to provide a means to modify the shopping cart items: to remove an item / all items
  • A running total to be maintained each time the shopping cart contents are reviewed
  • The shopping cart to follow the client
  • Support for an indefinite number of items

In order to create the shopping cart, we must first create the cart database support and the cart Visual Basic component project.

Setting up the Cart’s Environment

Instead of implementing all the aspects of the shopping cart within ASP script, we’ll implement the business logic within a Visual Basic component, use stored procedures for database access, and integrate the shopping cart into the ASP infrastructure within the script. Using this separation of functionality will isolate the data access and database structures from the business logic, and isolate the business logic from the implementation environment.

The tables to support the shopping cart are simplified to include only that information necessary to implement the cart: CART , CARTITEM , CUSTOMER , and CUSTOMERCART , and WIDGET . The WIDGET table represents the product table for this example. The table CARTITEM is dependent on both CART and WIDGET , and the CUSTOMERCART is dependent on both CUSTOMER and CART , so foreign key relationships exist between these tables.

The SQL to create the tables within a SQL Server 7.0 database, and the associated indexes and foreign keys are included with the download example code attached to this article.

In addition to the tables, several stored procedures are used to manage data access. Each of these procedures will be described as they are accessed by specific business routines in the sections ahead; but before we can add the methods to implement the business logic, we’ll need to create the Visual Basic project.

Creating the Cart Project

The shopping cart component is created as a new, ActiveX DLL Visual Basic project named, appropriately enough, shopcart . References to the Microsoft ActiveX Data Objects (ADO 2.1 for this example) Library and the Microsoft Transaction Server (MTS) Type Library are added to the project. We’re adding in support for MTS so the component will be able to access the ObjectControl interface, and we’re adding in support for ObjectControl in order to enable just-in-time activation for the shopping cart component.

Some basic component functionality is added, including the use of Option Explicit at the top of the class file, and the ObjectControl implementation. The only functionality added to the ObjectControl methods (Activate, Deactivate, CanBePooled) at this time is to define a member that holds the Database connection string.

Option Explicit

' The connection string is available to all shopping cart methods
Private m_connString As String

'Implementation of ObjectControl interface
Implements ObjectControl

' ObjectControl Methods
Private Sub ObjectControl_Activate()
    m_connString = "driver=
{SQLServer};server=FLAME;database=writing;uid=sa;pwd="

End Sub

Private Function ObjectControl_CanBePooled() As Boolean
    ObjectControl_CanBePooled = False
End Function

Private Sub ObjectControl_Deactivate()
 ' no activity
End Sub

Because there is a lot to get through in this article, I’m not going to go into the ObjectControls method (these areas will be covered in another article, coming soon – Ed ). The next thing to add is the functionality specific to our implementation of the shopping cart, starting with the methods to create the shopping cart and to add an item to the cart.

Adding Methods to Create a Cart and Add Items

The first requirement of the shopping cart is that users can add items to it, and implicitly, the ability to create a cart itself. We’ll implement both of these requirements as methods.

A cart can be created either when a shopper first accesses a site, or when the shopper makes an initial move to adding an item to the cart. The cart I’m going to build here will take the second approach, will only be created if none already exists, and will be created through a method called in the page that displays the shopping cart contents.

You can add a new cart through a stored procedure called SP_NEWCART , which adds a new record to the CART table, and returns a unique cart identifier:

CREATE PROCEDURE [SP_NEWCART] 
AS
BEGIN
insert into cart (date_created)
values (getdate())
select max(cart_id) from cart
END

To access this stored procedure, a function named createCart , having no parameters and returning a LONG value, is added to the cart component. The returned value is the new shopping cart identifier returned from SP_NEWCART .

Within createCart , new Command and Recordset objects are created and a connection string is added to the ActiveConnection property of the Command object. In addition, the Command CommandType is set to adCmdStoredProc and the stored procedure name is assigned to the Command object’s CommandText property.

' createCart
' Generate shopping cart ID
' create cart without customer association
'
Function createCart() As Long

  Dim comm As New Command
  Dim rs As New Recordset

  ' open connection, attach to Command object
  comm.ActiveConnection = m_connString
  
  ' set Command object properties
  comm.CommandText = "SP_NEWCART"
  comm.CommandType = adCmdStoredProc
 
  ' execute command and get output value (cartid)
  Set rs = comm.Execute
  
  ' get cartid
  rs.MoveFirst
  createCart = rs(0)

  rs.Close

End Function

When the Command object is executed, a record is returned and assigned to the Recordset object. Only one value is returned with the record, the cart identifier, which is then assigned to the function name and returned to ASP application.

To integrate this new component method and associated functionality into the ASP shopping cart application as a whole, the Cookies collection of the ASP built-in Request object is accessed, and the contents examined for an already identified cart. If one is found then it is used as the cart identifier for displaying cart contents. Otherwise, an instance of the shopping cart component is created and the createCart function is called. The newly returned cart identifier is then assigned to the Cookies collection of the Response built-in ASP object, and the cart identifier is created as a client-side cookie. Doing this persists the cart identifier between pages of the shopping cart application, and even beyond the current shopping session. In the example, the Cookie persists until the date set in the Expires property of the Cookie, which is December 31, 2001 in our code.

cartid = cart.createCart()
Response.Cookies("cartid") = cartid
Response.Cookies("cartid").Expires = "December 31, 2001"

We’ve implemented the functionality to add a new cart, but of course it isn’t very useful unless we can add items to it:

First, a stored procedure is created, SP_ADDITEM , to handle the addition of a new cart item. Within this procedure, a check is made of the table CARTITEM to see if a record already exists for the specific cart and product item. If found, the quantity passed to the stored procedure is added to the quantity for the cart item. If a record is not found, a new entry to CARTITEM is made for the specific cart and product.

CREATE PROCEDURE [SP_ADDITEM]
(@cartid int, @itemid int, @qty int)
 AS
BEGIN
IF (select count(*) from cartitem where cart_id=@cartid and 
      widget_id = @itemid) > 0 
   update cartitem
     set quantity = quantity + @qty where 
      cart_id = @cartid and widget_id = @itemid
ELSE
    insert into cartitem values (@cartid, @itemid, @qty, getdate())
END

The stored procedure SP_ADDITEM is called from within a new method, addItem , and added to the shopping cart component. In this method, the ADO Connection object is used both to connect to the database and invoke the stored procedure.

' addItem
' Adds item to shopping cart
' If more than one item, update quantity in SP
'
Sub addItem(ByVal lCartID As Long, ByVal lItemID As Long)

  Dim conn As New Connection
  
  ' connect to database
  conn.ConnectionString = m_connString
  conn.Open
 
  ' build command string
  Dim strComm As String
  strComm = "SP_ADDITEM " & CStr(lCartID) & "," & CStr(lItemID) & ",1"
                
  ' execute command
  conn.Execute strComm

  conn.Close

End Sub

The cart identifier discussed earlier and the product identifier are passed as parameters to addItem . We already have the cart identifier, and so the product identifier is passed to the shopping cart page from a form on a product page. The value is accessed from the Form collection of the built-in ASP Request object.

Dim itemid
itemid = Request.Form("itemid")

If itemid <> "" Then 
   cart.addItem cartid, itemid
End If

So, at this point we’ve created a cart and added an item to it. The next logical step to take in developing the shopping cart component and application is to provide a technique for displaying the cart contents:

Displaying the Cart Contents

The shopping cart display is the most visual aspect of a shopping cart application, and it is also one of the easiest to implement. Basically, the shopping cart items are accessed and displayed, as rows, usually within an HTML table.

A new stored procedure is created, SP_GETITEMS , which gets information from the CARTITEM and the WIDGET tables. The items that the cart contains are located in CARTITEM , but the information about the item, such as product name, price, and quantity per unit are found inWIDGET , hence the join between both tables. Additionally, a total price is calculated from the quantity of items ordered and the price per item, and this total is added as a “column” to the record being returned.

CREATE PROCEDURE [SP_GETITEMS]
(@cartid int) AS
select widget.widget_id, 
          short_name, 
          qty_unit,
          price,
          quantity,
          price * quantity total
    from cartitem,widget where cart_id = @cartid and 
    widget.widget_id = cartitem.widget_id

A new function is created, getItems , which calls SP_GETITEMS and returns the resulting recordset as a disconnected recordset . By returning the entire recordset to the ASP page, we can use built-in Recordset functionality to access and display the returned records and the individual fields. By using a disconnected recordset, the database connection is released before the recordset is returned to the ASP page, and valuable database resources aren’t being tied up unnecessarily.

' getItems
' return list of items, short decriptions, quantity
' as disconnected recordset
'
Function getItems(ByVal lCartID As Long) As ADODB.Recordset

  Dim conn As New Connection
  Dim rs As New Recordset
  conn.ConnectionString = m_connString

  ' connect to database
  conn.Open
  Set rs.ActiveConnection = conn
  
  ' set and open recordset
  rs.CursorLocation = adUseClient
  rs.Source = "SP_GETITEMS " & CStr(lCartID)
  rs.Open

  ' disconnect recordset
  Set rs.ActiveConnection = Nothing
  conn.Close

  Set getItems = rs.Clone

  rs.Close
End Function

An HTML table is created within the body of the ASP shopping cart page, and table headers are used to provide column labels for the individual recordset fields. Because the shopping cart can be updated — new quantities can be added for an item or an item can be removed – the HTML table displaying the cart items is contained within an HTML form, so the changes can be submitted back to the shopping cart application.

Following the HTML table and form definitions, ASP script is used to access the recordset with the cart items and output the recordset rows as table rows (records) and cells (columns).

Dim total
Do While rs.EOF = False
     total = total + rs(5)
     Response.Write("<TR>")
     Response.Write("<TD align='middle'><input type='hidden' name='itemid' value='" & rs(0) & "' size=10>")
     Response.Write("<strong>" & rs(0) & "</strong></TD>")
     Response.Write("<TD align='left'><strong>" & rs(1) & "</strong></TD>")
     Response.Write("<TD align='middle'><strong>" & rs(2) & "</strong></TD>")
     Response.Write("<TD align='right'><strong>" & FormatNumber(rs(3),2) & "</strong></TD>")
     Response.Write("<TD bgcolor='white' align='middle'><input type='text' name='quantity' value='" & rs(4) & "' size=10></TD>")
     Response.Write("<TD align='right' ><strong>" & FormatNumber(rs(5),2) & "</strong></TD>")
     Response.Write("</TR>")
     rs.MoveNext
Loop  
Response.Write("<TR><TD align=right colspan=6><strong>Cart Subtotal is: $" & FormatNumber(total,2) & "</strong></td></tr>")

Notice in the ASP script that a hidden form field holds the product item identifier for each row, and another form input element holds the quantity of items added to the cart for the item. The hidden field is used to tie a product identifier to quantity, and the quantity field is a text input element, giving the Web shopper to ability to modify the quantity of a specific item in the cart.

Following the ASP script, traditional HTML is again used to provide handling of form submission, including options to submit the shopping cart to the order processing system, return to the main store page, continue shopping, and to update the shopping cart to process a quantity change. Updating quantities is discussed in the next section.

Updating Shopping Cart Contents

Imagine for a moment going into a grocery store and adding several items to your shopping cart. Now imagine not being able to remove an item from the cart once the item is placed there, or being unable to change the quantity of a specific item in the cart. If you couldn’t modify the cart contents at a “real” store you probably wouldn’t return to the store and the same applies to the shopping cart implemented at a virtual store. Shopping carts must provide the capability for Web shoppers to modify their cart contents after the contents have been added.

Modifying cart items includes being able to change the quantity of an item in the cart and to remove an item from the cart altogether — two different functions that really only requires one stored procedure, SP_UPDATEQTY . The quantity being passed is checked within the stored procedure : if the value is zero (0), the cart item is deleted from CARTITEM ; otherwise the value is updated. In addition, the stored procedure checks to see if a row exists for the cart and item in CARTITEM . If it does, the value is updated; otherwise the stored procedure SP_ADDITEM is called to create a new cart item with the new quantity. Another approach to removing the item could be to add a button to delete the item from the cart. This could set the quantity to zero, or even call submit the cart for update immediately – either approach works.

CREATE PROCEDURE [SP_UPDATEQTY]
(@cartid int, @itemid int, @qty int)
 AS
BEGIN
   IF @qty = 0
      delete from cartitem where cart_id = @cartid and widget_id = @itemid
   ELSE IF (select count(*) from cartitem where cart_id = @cartid and 
         widget_id = @itemid) > 0
      update cartitem
      set quantity =  @qty where 
          cart_id = @cartid and widget_id = @itemid
  ELSE
      exec sp_additem @cartid, @itemid, @qty
END

The SP_UPDATEQTY stored procedure is called from a new method added to shopping cart component and called updateItemQty . This method has three parameters, the cart identifier, the product identifier and the quantity. It checks to make sure the quantity isn’t negative, and then builds a call to SP_UPDATEQTY .

' updateItemQty
' Update quantity of item
' return new count of items
'
Sub updateItemQty(ByVal lCartID As Long, _
                        ByVal lItemID As Long, _
                        ByVal lQuantity As Long)
                        
  Dim conn As New Connection
  
  ' quantity cannot be less than zero
  If lQuantity < 0 Then
      Err.Raise 5 ' invalid argument error
  End If
       
  ' connect to database
  conn.ConnectionString = m_connString
  conn.Open
 
  ' build command string
  Dim strComm As String
  strComm = "SP_UPDATEQTY " & CStr(lCartID) & "," & CStr(lItemID) & _
                "," & CStr(lQuantity)
                
  ' execute command
  conn.Execute strComm
  conn.Close

End Sub

The updates to the quantities occur in the same shopping cart display page that receives new product items, so way of determining whether an item is being added or the quantity is being updated needs to be added in. For our example, a hidden field is added to the update quantity form on the shopping cart display page, and to the product form on the product display page. The hidden field has a name of startpos , and the value attached to this field determines what action is taken when the shopping cart page is accessed. If a value of update is accessed, then an update is to be made.

<input type="hidden" name="startpos" value="update">

If a value of additem is found, then the add item functionality is used.

<input type="hidden" name="startpos" value="additem">

With the addition of the new hidden fields, and the update quantity component method, the ASP script in the shopping cart page is amended to allow for adding new items and updated quantities.

Dim action
 action = Request.Form("startpos")
 If action = "additem" Then
    Dim itemid
    itemid = Request.Form("itemid")

    If itemid <> "" Then 
      cart.addItem cartid, itemid
    End If

  ElseIf action = "update" Then
    For i = 1 to Request.Form("quantity").Count
       cart.updateItemQty cartid, Request.Form("itemid")(i), _
				 Request.Form("quantity")(i)
    Next
  End If

We now need to add the functionality that associates the cart with a specific customer, so that the customer can access this cart from any computer, and that empties the cart if the customer decides not to place an order. These are detailed next.

Associating Cart to Customer and Emptying Cart

At this time we have all the functionality necessary to create a cart, add items to the cart, persist the cart beyond a specific session and update the cart contents. However, to make the cart callable, which means a client can access it from any computer, we need to associate the cart to a customer.

A new stored procedure, named SP_CUSTOMERCART is created, which simply updates the cart’s customer identifier field with a specific customer identifier. How the customer identifier is accessed and the login procedure for the customer is outside the scope of the shopping cart application.

CREATE PROCEDURE [SP_CUSTOMERCART]
(@cartid int, @custid int)
 AS
BEGIN
  update cart set customer_id = @custid where 
  cart_id = @cartid
END

The stored procedure is accessed from a new shopping cart component method, addCartToCust, which does a couple of tasks. First, the method checks to see if the customer already has a cart and if so, the contents of the new cart are transferred to the older cart and the new cart is destroyed; otherwise the customer is assigned to the new cart.

' addCartToCust
' associate customer to cart
'  -- shipping cost and tax comes from customer state
'     these values cannot be calculated without customer
'
Function addCartToCust(ByVal lCartID As Long, ByVal lCustomerID As Long) As Long

  Dim lcart As Long
  
  ' check for existing customer cart
  ' if found, merge contents
  lcart = getCartID(lCustomerID)
  
  If lcart > 0 Then   ' existing customer cart found
     Dim rs As New Recordset
     Set rs = getItems(lcart)
     Dim i As Integer
     
     ' transfer new quantities to existing cart items
     For i = 1 To rs.RecordCount
        updateItemQty lcart, rs(0), rs(4)
     Next i
     
     ' destroy 'new' cart, use existing
     If lcart <> lCartID Then
        clearCart (lCartID)
     End If
  ElseIf lcart = 0 Then   ' no existing cart
    lcart = lCartID
    ' connect to data store
    Dim conn As New Connection
    conn.ConnectionString = m_connString
    conn.Open
    
    ' build command string and execute command
    Dim strCmd As String
    strCmd = "SP_CUSTOMERCART " & CStr(lCartID) & "," & CStr(lCustomerID)
    conn.Execute strCmd
    conn.Close
  End If
  
  ' return cart id
  addCartToCust = lcart

End Function

The addCartToCust method itself calls other component methods. The updateItemQty, discussed earlier, is used to transfer the contents of the new cart to the existing cart. In addition, a couple of new methods are created and used: one, getCartID, is used to return a cart identifier given a customer identifier; the other, clearCart, will remove the cart and its contents.

The getCartID uses a stored procedure called SP_GETCARTID to get any cart identifier for a given customer.

CREATE PROCEDURE [SP_GETCARTID]
(@customerid int)
 AS
BEGIN
select cart_id from cart where customer_id = @customerid
END

The method is fairly simple, basically little more than a call to the stored procedure, and validation checks to make sure a value of zero(0) is returned if no cart identifier is found.

'
' getCustomerID
' get customer id given cart id
'
Function getCustomerID(ByVal lCartID As Long) As Long

  Dim conn As New Connection
  Dim rs As New Recordset
  conn.ConnectionString = m_connString

  ' connect to database
  conn.Open
  Set rs.ActiveConnection = conn
  
  ' set and open recordset
  rs.CursorLocation = adUseClient
  rs.Source = "SP_GETCUSTOMERID " & CStr(lCartID)
  rs.Open
  
  ' get cartid
  If rs.RecordCount > 0 Then
    rs.MoveFirst
    If IsNull(rs(0)) Then
       getCustomerID = 0
    Else
       getCustomerID = rs(0)
    End If
  Else
    getCustomerID = 0
  End If
  
  rs.Close
  conn.Close

End Function

The clearCart method calls a stored procedure called SP_CLEARCART that deletes the cart items associated with a cart first, and then deletes the cart.

CREATE PROCEDURE [SP_CLEARCART] 
(@cartid int)
AS
BEGIN
   delete from cartitem where cart_id = @cartid
   delete from cart where cart_id = @cartid

END

The clearCart method itself is literally nothing more than a ASP component wrapper for the stored procedure call.

' clearCart
' Clears cart, removes all items
' disassociates customer from cart
'
Sub clearCart(ByVal lCartID As Long)

  Dim conn As New Connection
  
  ' connect to database
  conn.ConnectionString = m_connString
  conn.Open
  
  ' call stored procedure
  conn.Execute ("SP_CLEARCART " & CStr(lCartID))
  conn.Close

End Sub

Now, the ASP script to add a customer to a cart can be run when the person first logs into the store, or when an order is made – this is up to the individual Web store developer. In the example we’re working with, the cart is added to the customer the first time an item is added to the cart. The script itself is fairly simple.

' create the component instance
Dim cart
Set cart = Server.CreateObject("shopcart.cart1")

Dim cartid
cartid = Request.Cookies("cartid")
If cartid = "" Then
    cartid 0
End If

Dim customerid
customerid = Request.Cookies("customerid")
Dim action

If customerid <> "" Then
	cartid = cart.getCartID(customerID)
End If

action = Request.Form("startpos")
If cartid = 0 AND action <> "" Then
    cartid = cart.createCart()
    Response.Cookies("cartid") = cartid
    Response.Cookies("cartid").Expires = "December 31, 2001"

    If customerid <> "" Then
	cart.addCartToCust cartid, customerid
    End If
End If

In the code, the “action” variable is accessed from the Form collection. If an empty string is returned then we know that the shopping cart is not being called as a result of a quantity update, nor is it being called as a result of adding a new item. The shopping cart page is being called purely to display the cart, as a request from the Web shopper.

At this time, we have a shopping cart component, stored procedures, and supporting ASP pages to create a cart, add items to the cart, modify items in the cart, associate the cart with a customer, and destroy the cart. Are we finished? Not quite yet, we have one more requirement left to implement: we need to show how many items a person has in a cart from the store’s home page.

Displaying Summary Information about the Cart

Displaying information about a cart on the home page of a store is relatively simple. A stored procedure is created to return summary information about the cart such as the quantity of items ordered and the total cost (without shipping and tax). This stored procedure is named SP_GETITEMTOTALS .

CREATE PROCEDURE [SP_GETITEMTOTALS]
(@cartid int)
 AS
BEGIN
   select sum(quantity) items, sum(price * quantity) total from 
   cartitem, widget where 
   cart_id = @cartid and 
   widget.widget_id = cartitem.widget_id
END

This stored procedure is then called from within a method, getItemTotals that has a cart identifier as a parameter and returns a disconnected recordset containing the cart information to the ASP page.

'
' getItemTotals
' Returns count of items currently in basket
'
Function getItemTotals(ByVal lCartID As Long) As ADODB.Recordset

  Dim conn As New Connection
  Dim rs As New Recordset
  
  ' connect to database
  conn.ConnectionString = m_connString
  
  conn.Open
  Set rs.ActiveConnection = conn
  
  ' set and open recordset
  rs.CursorLocation = adUseClient
  rs.Source = "SP_GETITEMTOTALS " & CStr(lCartID)
  rs.Open

  ' disconnect recordset
  Set rs.ActiveConnection = Nothing
  conn.Close

  Set getItemTotals = rs.Clone
  
  rs.Close
End Function

In the ASP page, the disconnected recordset is then used to access the number of items in the cart and the total, which are then displayed to the page.

Dim cart
Set cart = Server.CreateObject("shopcart.cart1")

Dim cartid
cartid = Request.Cookies("cartid")
Dim customerid
customerid = Request.Cookies("customerid")
Dim rs

If customerid <> "" Then   
  Dim firstname
  Dim lastname
  Set rs = cart.getCustomer(customerid)
  If rs.RecordCount > 0 Then
    Response.Write ("Hello " & rs(0) & " " & rs(1))
    Response.Write(" - If this isn't you, please <a href='getnewcust.asp'>Login to your account</a>")
    cartid = cart.getCartID(customerID)
    If cartid = 0 Then
   	cartid = ""
    End If 
   End If
ElseIf cartid = "" AND customerid = "" Then 
  Response.Write("<a href='getcust.htm'>Login to your Account to retrieve an existing cart</a>")
End If

If cartid = "" Then
  	Response.Write("<br>Currently, your shopping cart is empty")
Else
    Set rs = cart.getItemTotals(cartid)
    If rs.RecordCount > 0 Then
       rs.MoveFirst
       Response.Write("<br>Currently you have <strong>" & rs(0) & "</strong> items in your cart ")
       Response.Write("for a total of <strong>$" & FormatNumber(rs(1),2) & "</strong> dollars.")
    End If
 End If

If the cart Cookie is empty (no cart is set on the host computer), a message to this effect is shown in the page; otherwise the summary of the cart contents is printed out. In addition, the name of the person who owns the current cart is displayed, and the Web shopper is given the option of logging into the system.

Information about the customer is returned with a new stored procedure, SP_GETCUSTOMER . The login portion of this shopping cart application is included – as an extra bit of bonus code! – with the sample code attached to this article.

In Summary

Web stores can be complicated applications, but the best approach to create a Web store is to break the store’s functionality into individual pieces, or applications, and implement each of these in turn.

A key aspect to the implementation strategy of the shopping cart is that it’s business logic should be kept as separate as possible from implementation and database details. Implementation details, such as ASP specific functionality, are handled within the ASP scripts, and data access is processed within stored procedures. With this approach, changes to either the implementation or the data schema impact little if at all on the shopping cart component itself.

This article took a look at one specific application of an online store, the shopping cart, and demonstrated how a cart can be implemented without a lot of complicated code using an ASP component written in Visual Basic, some ASP pages, and stored procedures. The sample code for download contains all of the code discussed in the article as well as other functionality to handle pulling the entire application together.

Categories
Just Shelley

Every Person’s Math

Ask folks what class they feared the most in high school and college, and I bet you’ll find that “math”, generally, or “calculus”, specifically, is the answer you’ll get more often than any other. Yet math is really nothing more than a) the ability to apply specific equations and get consistent results, and then b) to apply those results to better understand the world around us. So, I think its time to take a look through the Internet and see what we can learn…about math.

Basic Math: If a train left New York and another left Boston…

Most of us know basic math. It’s the math we use when we shop: we pick up half a dozen eggs, we buy 4 steaks, we supply cash for totals and get change back. Its also the math we use at home: we measure out 1 cup of flour, we shape dough into a circle to make a pie, we time how long the pie has baked, and we cut a board in such a way that it fits into a slot on the floor. How about at work, do we use this math at work? You bet: we ask for two packets of sugar for our coffee, the delivery person drops off a gross of pens, we send mail using two day express delivery and know that the mail will be delivered in two days or less.

Basic math is that math that surrounds us and that we use in our everyday world. It is the math that allows us to time events by understanding units of measurement about time, such as hours, minutes, and seconds. It is the same math that then gives us the tools to measure these units and express this measurement as a factor of time elapsed: he ran the marathon in 6 hours, 23 minutes, 3 seconds.

Additionally, basic math is that math we use when quantifying objects, such as 2 apples, 3 people, 4 cats. It is also the math we use with currency and with temperature — though units of measurement can differ here — and with our payroll stubs and income tax.

Basic math consists of addition and subtraction, multiplication, and division, and we can’t forget the most infamous of them all: fractions. It is arithmetic.

Basic math is the math we learn first, and the one that requires us to learn the most and take the largest leap of faith. After all, in algebra we may understand that 2x – y = 3 is a solvable equation, but it is really based on our belief that the number “2” does represent two objects; that two numbers can be multiplied and the result will always be the same; that you can add two numbers and consistently get a third; and that you can then subtract one of the original numbers from the new total, and derive the other original number. 

3 + 4 = 7

what will you get if you take 4 away from 7?

Look at that! Your first number quiz.

 

So, did you get the correct answer? If you’re not sure, you might want to ask Dr. Math to help you find the answer . How about a different way of learning math? You might want to check out The Clock (Modular) Arithmetic Page for a little learning about math, in the round. Want to have a little fun with math? Then check out the Math Forum Elementary Problem of the week — see if you can keep up with the kids.

Of course, once we learned basic math, it was time to get into other types of math such as algebra, covered next.

Algebra and the ultimate question: Why?

So what is algebra and why do we need to learn it? Well, something like arithmetic is good when dealing with math of known quantities and objects such as adding two apples together, or measuring a cup of flour. But what if you need to solve an equation involving the addition of 2 quantities of an object, and you only have one of the quantities and the result?

Remember our little math game in the last section:

3 + 4 = 7

what will you get if you take 4 away from 7?

 

Well, let’s rephrase this question and formalize it into an equation. Instead of saying “if you take 4 away from 7”, say “if you take a number away from 7 you’ll get 4”, and rephrase it again to say “if you add a number to x, you’ll get 7”. Drawing this as an equation, you get:

x + 4 = 7

Algebra is involved with solving the equation for the unknown variable, in this case, x, using a set of rules and procedures to accomplish the task.

For our equation, we first need to isolate the variable, or the unknown value. We can do this by using basic math to eliminate the known value from both sides of the equation:

x + 4 - 4 = 7 - 4

x = 3

Isolating the unknown is the same as solving for the unknown.

See, you just did algebra! That wasn’t so bad, was it?

To summarize, algebra is the ability to solve equations containing one or more unknown variables. The solution is found by applying known procedures such as isolating the unknown variable and combining like terms. Algebra then uses these same rules for more complex equations such as finding ratios, multiplying fractions, graphing results on a coordinate plane, and exponents. Before you click away again, let’s look at each of these and see that there is nothing scary or weird with any of them.

First if all, you use ratios anytime you figure out your odds of winning the lottery (1 in a kagillion), or you read about something such as the “ratio” of women to men of those responding to a survey, for instance, the ratio was 3:5, or 3 women out of 5 respondents were women. If we look at this as an equation, we would have:

x + 3 = 5

x + 3 - 3 = 5 - 3

x = 2

there are 2 men for every 5 respondents

How about graphing? Well, I used to love to graph. I loved the graph sheets, I loved getting my ruler and my pencil and drawing out a nice clean line. Didn’t have a clue why I was doing it, but it sure was fun.

You know graphing: on a number line graph all numbers less than 8. You end up with:

Now, what is there about this that isn’t fun?

Of course, once we mastered graphing on a linear line, the next step is to try graphing within a coordinate system. This is a graph where the X values are plotted along a horizontal line and the Y values are plotted along a vertical line. The Y-axis intersects the X-axis at the point where X is zero, and the X-axis intersects the Y-axis at Y’s 0 point. Then, individual points on the graph are plotted at the point where the X value and Y values intersect. So, if you have an X value of 3 and a Y value of 3, your point will exist in the upper right of the system. If you have many points, such as those drawn for an equation and using different values of X or Y in the equation, you can connect the points and you actually have a line. From this you can determine not only what values are from an equation for given values of X or Y, you can determine what all values of X or Y will be. Why? It’s in the graph!

So, we know that basic arithmetic isn’t scary, and algebra can be fun, are you ready to try something a little stronger? Say, Geometry?

If you want to know about algebra, have I got some sites for you. First up is Math for Morons Like Us. Don’t let the name chase you away, this really is an impressive site providing an overview of pre-algebra, algebra, geometry, and calculus. Math for Morons was created for the ThinkQuest program. ThinkQuest is a competition held every year where students or adults who are teachers or studying to be teachers can create Web sites, all based on knowledge and education. There some pretty impressive Web sites from this project. For instance, another Web Site is Volcanoes Online, created by students from all over the World.

Now, doesn’t all this sound like fun? Well, to make it even more fun, James Brennan from Boise State University has created an interactive Java applet called the Graph Applet. Try it out.

Geometry

Well, you’re probably pretty comfortable with addition and subtraction and even equations, about now. Time to up the ante and take a look at geometry.

First of all, to ease your anxiety, and to keep you from clicking out of the page, geometry is not only fun, it is really based on the same mathematical foundation you worked with in the basic math and algebra sections. Now, those sections weren’t so bad, and this one doesn’t need to be either.

So, what is geometry? Well, it has to do with shapes. All kinds of shapes, from lines to circles to triangles to spheres to what have you. Geometry gives you the tools to do such things as find the volume of a sphere or to find the circumference of a circle.

You don’t think you need this kind of stuff? Well, sure you do.

For instance my husband and I walk around a water reservoir behind our place that has a diameter of about .4 miles. We were curious about the actual distance we traveled so we dusted off our geometry and found the formula for finding a circumference of a circle given the circle’s radius:

   C = 2(PI)r

Well, a diameter of a circle is twice the size of the radius, so the radius of the lake would be .2 miles. Plugging this in for r, and remembering that the value of PI is 3.14159 — five decimal places is more than enough, we ain’t building a rocket here – we would have:

  C = 2(PI)r
  C = 2(PI).2
  
  C = 2 x 3.14159 x .2
  C = 1.25663

Hey, 1.25 miles! A nice little jaunt.

Geometry is very big in the computer animation business. Did you like A Bug’s Life or Antz? Well, geometry is a basic tool used in creating these types of animations. Geometry also forms the basis for work accomplished with VRML — Virtual Reality Modeling Language.

If you like Geometry, then you might want to look more closely at trigonometry, covered next.

Where to begin when it comes to learning about Geometry. You can go back to Math for Morons Like Us, which has excellent coverage of Geometry in addition to Algebra. You can also go to the Geometry Home Page, which has some very nice tutorials. There’s also the Geometry Center, with documents, multimedia, and software about geometry. This site led me to another site, called Science U, which has its own Geometry Center. Science U has several interactive demos and games, related to geometry and astronomy. Site also has an online store with some unusual items for sale. There aren’t many places where you can create your own fractal design and then have it made into a T-shirt.

Wait, there’s even more sites. I mentioned the use of geometry with computer animation and VRML. Only fair to mention some sites for these topics. First of all, the grandmother of VRML sites is The VRML Repository. Two other essential links are VRML Consortium, and The VRML Specification. And you can’t mention VRML without reference to the SGI VRML page.

For computer animation, try out The Shape Modeling and Computer Graphics page, from the University of Aizu in Japan. Webreference, a favorite of mine, has a nice site called the 3D Animation Workshop. And the king of computer animation is, of course, Pixar.

Oh, and don’t forget the Antz and A Bug’s Life official Web pages.

Trigonometry

Okay, you had some fun looking at all the pretty computer generated animations and graphics. Let’s get back to the real reason you’re here: to learn more about math. Right?

First, trigonometry — or “trig” as it is affectionately known — is based on angles. It is this, which distinguishes trig from the rest of geometry.

Why learn more about trig? Well, if you are interested in astronomy, you should be aware that it is trig, and the trigonometric tables, that provided the basis for early star charting. Engineering is dependent on trigonometry. When you see surveyors along the road at construction sites, what do you think they are using to plan the work? Why, trigonometry, of course.

Consider a building. Can you measure how tall it is? You could climb to the top of the building and drop a line of rope down from the roof until it touches the ground and then you could measure the rope. However, this doesn’t sound like a very efficient method, and what if you are trying to measure a mountain peek, or a balloon in the air?

A better approach would be to use our friend, the right triangle, and the trigonometric functions.

First, a right triangle is one which has one 90o angle. The angle opposite the right triangle, along the horizontal axis is written as q, and is called theta. The side of the triangle opposite and adjacent to q are known as, respectively, the opposite and adjacent sides. The side opposite the right angle is known as the hypotenuse, as shown in the figure below.

The trigonometric functions, based on the graphic, are:

  • sin q = opposite / hypotenuse
  • cos q = adjacent / hypotenuse
  • tan q = opposite / adjacent
  • csc q = hypotenuse / opposite
  • sec q = hypotenuse / adjacent
  • cot q = adjacent / opposite

Now, considering the right angle and the trigonometric functions, how can we measure that building? Well, you start with a protractor, a small plastic semi-circular or circular disk that allows you to measure angles. You walk 100 feet from the building and then measure the angle from yourself to the top of the building using the protractor. Let’s say this angle is 60o.

At this time you have some known values. You know that q is 60o, and you know that the adjacent side is 100 feet. Now, to get the value for the opposite side, we’ll use the trigonometric formula to compute the tan or tangent of the angle: 

tan q = opposite / adjacent

tan 60o = opposite / 100 feet

tan 60o = 1.73

1.73 * 100 feet = opposite / 100 feet * 100 feet

opposite = 173 feet (approximately)

There you go, you found the height of the building all by yourself, with a cheap plastic tool and no long rope. Pretty darn good — and all thanks to trig.

Well, now that you have found that trig is fun, time for pulling in the big guns. Time for calculus.

I just can’t believe how many Web sites there are on math, including trig. First of all, check out the Free-ed Net, specifically the section on Trigonometry. Free-ed Net is a very hot Web site focusing on free educational resources on the Net, and in the Trig section, they list some nice trig resources. First of all is S.O.S. Mathematics, which provides an overview of Trig, and provides a table of trigonometric identities. Then there is the Math Abundance Trigonometry Introduction, which is very extensive. Very.

Sorry, I’m back. I was sidetracked by Net-Ed’s Astronomy section. Where was I? Oh, yes, trig resources. A great trig resource page is at Study Web’s Math page. I can guarantee that if you go through all the resources they list, you will be a math wiz. Angles, are your friends.

Do you want to order a protractor of your very own? Then check out k-12source.com which has most school supplies for sale. Check out the engineering and drafting supplies.

Oh, and if you want to know how to measure the height of a rocket, check out the University of Nebraska page on measuring a rocket’s height, from the N.E.R.D.S (Nebraska Educators Really Doing Science) project.

Bring on the tanks: Calculus

Well, you’ve made it this far so you deserve a real treat: Calculus!

What is calculus about? Well, first of all it takes what you know with the other math types, and goes a bit farther, or nearer as the case may be. The Excite online encyclopedia, InfoPlease has the following definition for calculus:

"branch of mathematics that studies continuously changing quantities. 
The calculus is characterized by the use of infinite processes, involving passage 
to a limit the notion of tending toward, or approaching, an ultimate value. 
The English physicist Isaac Newton and the German mathematician G. W. Leibniz, 
working independently, developed the calculus during the 17th cent. The calculus 
and its basic tools of differentiation and integration serve as the foundation 
for the larger branch of mathematics known as analysis. The methods of calculus 
are essential to modern physics and to most other branches of modern science and
 engineering."

Calculus isn’t just one subject, it’s many. There is differential calculus, integral calculus, there is statistics, and probability, and so on. However, it is also about the world around us. It is not an exercise in seeing how many equations one can stuff into a sophmore’s brain before it explodes.

For instance, could you see needing to know the volume of a sphere? Sure you could. How does one measure the volume of a sphere?

Well, going with empirical method, you could fill the sphere with water and measure how many cups of water fit into the sphere. But, this technique is kind of wet, possibly messy, perhaps not very scientific, or even accurate. Wouldn’t you really rather use a formula?

Borrowing from integral calculus, the formula for calculating the volume of a sphere is:

V = 4(PI)r3/3

So, given the sphere’s radius, you can now find its volume. You can find its surface, too, with the following formula:

S = 4(PI)r2

I won’t lie to you and say that all calculus is this easy. I still think parts of calculus are a joke perpetuated by math majors on the rest of us (“let’s string them along…see when they break”), but calculus can be met face to face at the least, and even mastered (gasp) at the most.

Now, I think that’s enough for me to say on calculus. I’ve forgotten way too much on this subject and if I say anthing more, I’ll embarrass myself. Time to follow this article’s links … and learn a little math.

Well, I have to go back to Math for Morons like us for their coverage of pre-calc and calculus. Boy, I wish they would change the name. But they aren’t alone with the names, as another good site on Calculus is Help with Calculus for Idiots (like me).

The best reference page with listings on calculus is StudyWeb’s Calculus page. Another great resource on Calculus is Calculus Net.

An example of calculus applied to mechanics is nicely illustrated at Calculus and its Applications to Mechanics. A fun site is a page full of Calculus Java applets where you can change values and observe results for calculus equations.

You can calculate the volume of most shapes with the ABE Volume Calculator page. You can find the calculations used at Calculations for Volume.

Flame on.

Categories
People Places

Climbing Mt. Everest

I decided to spend some time looking at the history of climbing Mt. Everest because of a note I found at the PBS Nova Web site. It seems that a new expedition is heading to Mt. Everest, but the goal of this expedition is rather different than others.

You see, we know that Sir Thomas Hillary was the first man to reach the top of Mt. Everest in 1953…or was he. There is conjecture that he might not have been first, that early Mt. Everest pioneers George Mallory and Andrew Irvine may have been first. However, as these two climbers failed to return, all that we know of the success or failure of their bid to reach the summit is as clouded as the summit was that day when they were last seen.

However, there is a chance, a small chance, that the knowledge of Mallory’s and Irvine’s quest did not die with them. Mallory carried a camera with him, a camera that has never been found.

Just think of it! What if someone could find this camera and could develop the film, even after all these years, and the film shows that instead of a person reaching Mt. Everest in 1953, another person reached the summit almost thirty years earlier, in 1924. What an incredible discovery. Regardless of the success of this quest, it is a fitting tribute to these earlier climbers who gave their lives for their own quest: to attempt to find the truth.

You can read more about the Mallory and Irvine research expedition at The MoutainZone’s Mallory & Irvine Research Expedition page. The expedition left in March, and daily updates are posted to this site from the expedition members Dave Hahn and Eric Simonson.

Nova is also following this expedition with their own Web site titled Lost on Everest. Nova’s coverage begins April 27th, and also includes an awesome 360 degree image of what the view is like from the summit. If you don’t go for any other reason, you have to go to the site for this. It will take your breath away.

Accuracy is the key

At the same time that the expedition to find the camera of George Mallory is underway, which occurs on the North face of Mt. Everest by the way, another expedition is also on a quest, though a completely different one. This quest is the Everest Millennium Expedition and the purpose of it is to measure Mt. Everest.

At this time, the most accurate assessment we have of the height of Mt. Everest is 29,028 feet, or about five miles up. The Millennium Expedition plans on using the latest technology, the Global Positioning System (GPS), to get the most accurate measurement of all.

Follow along with the expedition from the MountainZone’s Everest South Side Expedition Web site. This also includes frequent updates with expedition members, as well as photos and other multimedia.

The GPS equipment is being run for Brad Washburn, former Director of the Boston Museum of Science, and well known mountain photographer. The Museum of Science has a an excellent exhibit of Everest photos and memorobilia, as well as a scale model of Everest.

National Geographic is also covering this expedition, and you can view their site on it at Everest: Measure of a Mountain. Do watch the opening intro, it is worth it.

How’s the Weather up there?

Two expeditions seeking knowledge, are joined by a third expedition trying to answer the age old question: How’s the Weather up there? The Weather Channel follows two MIT graduate students, Matthew Lau and Chris Metcalfe as they join veteral researcher David Mencin to study weather on Mt. Everest, as well as place advanced telemetry at the peak for research.

The hope is that advances in the technology used for these instruments will allow them to function for a full year, being an invaluable resource for learning about the weather patterns at the world’s highest peak, but also providing information for climbers in hopes of having safer expeditions.

This expedition is covered at the Weather Channel’s Everest Web page. You can learn more about GPS at The NAVSTAR GPS homepage, or the University NAVSTAR Consortium.

 

Summary

The power of the Web is that folks like me, who will never climb something like Everest, can experience the next best thing by hearing from those who do and seeing the images they send back. My appreciation to them for giving me a glimpse of their quests.

Categories
Technology

Shopping Carts

Recently, someone, I’ll call him Joe, sent me an email and asked a question about maintaining shopping cart items using client-side cookies.

A shopping cart is basically a program that maintains a list of items that a person has ordered, a list that can be viewed and reviewed and usually modified.

Joe had run into a problem in that browsers limit both the size and quantity of cookies that can be set from a Web application, and this limited the number of items that could be added to his company’s online store’s shopping carts. He asked whether there was a client-side Javascript technique he could use that would update a file on the server instead of on the client so that customers could add an unlimited number of items to their carts.

Instead of trying to maintain the company’s shopping cart using cookies, I recommended that Joe check out his Web server’s capabilities, and see what type of server-side scripting and applications his server supported. Then he could use this technology to maintain the shopping cart items. I also recommended that he limit the use of the client-side cookie to setting some form of session ID so that the connection between the cart items and the shopper was maintained.

Shopping Cart Technology

Joe’s email did get me to thinking about how online stores use different techniques to maintain their shopping carts.

For instance, all of the stores I shop at, except one, use some form of a client-side cookie, but each store uses these cookies differently. Additionally, the stores use server-side techniques to support online shopping, though this support can differ considerably between the stores.

Client-side cookies were originally defined by Netscape for use in Navigator, though most browsers support cookies. Cookies are small bits of information stored at the client that can be maintained for the length of a session, a day, a week, or even longer.

The use of client-side cookies is rigidly constrained in order to prevent security violations. You can turn off cookies with your browser, but be aware that cookies do not violate the security of your machine and without the use of cookies your online shopping will be severely curtailed.

This YASD article does a little technology snooping of four online shopping sites and snoops out how each site uses a combination of server-side and client-side processing to maintain its carts.

Covered in this article are the shopping cart techniques used at the following online stores:

  • Amazon.com
  • Beyond.com
  • Catalogcity.com
  • Reel.com

Shop Til You Drop

To understand shopping cart maintenance, its important to understand customer shopping habits. We’ll start this article by looking at some online shopping habits.

First, online shopping has grown enormously in the last few years. Once folks found out that it was safer to send your credit card number over the Net at a secure site then to give it over a wireless phone, much of the hesitation about online shopping vanished.

What are the types of things that people buy online? Books, CDs, and Videos are popular, but so are kitchen utensils, computer hardware and software, photography equipment and film, food gifts, bathroom towels, and even irons.

People shop online because of necessity, convenience, and cost. We purchase books, CDs, and videos online because the online stores have a much larger selection than any local store could possibly have. We know that when we are looking for a book, even an out of print book, we will most likely be able to get the book from one of the online bookstores such as Amazon.

Some businesses we shop at, such as Dell, have no physical store location. This type of business provides service for their customers through mail or phone order, only. Many of us prefer to use online shopping for these types of stores rather than having to call someone up and go through a long list of items or manually fill out an order form, all the while hoping we put down the right item number. It is a whole lot simpler to look at an item and click on an image that says something like “Add to Shopping Cart”. An added benefit to online shopping is that we can review my order before it is sent, and can get a hard copy printout of the order for our records.

Normally, most of us only shop for a few items at a time, but the number of items can become large, especially with online grocery stores — a rising phenomena. However, it isn’t unusual for us to add some items to our shopping cart one day, a couple of more items another day, and so on, until we’re ready to actually place the order. At times we may even forget we have items in a shopping cart, until we add another item to the cart and the previous items show up.

We also change our mind at times, and may need to remove items from the shopping cart, or change the quantity of an item ordered. It’s also handy to have a running total for the order so we can make at least an attempt to stay within our budgets. If the shipping charges are also shown, that’s an added bonus.

Many of us may have more than one computer and may start a shopping session with a laptop and finish it at a desktop computer, though as you will see later in this article, this sometimes isn’t that easy. In addition, the use of both Netscape Navigator and Microsoft’s Internet Explorer on the same machine isn’t all that unusual for heavy Net users, and we may start a shopping cart with one browser and add to the cart from another browser.

Pulling requirements from these patterns of use, we come up with the following:

  • An item can be added to a shopping cart with the touch of a button
  • Shopping cart items need to persist for more than one shopping session
  • Some indication that there are items in the shopping cart should show, at least on the home page for the site
  • The store needs to provide a means to modify the shopping cart items, or to remove an item or all items
  • A running total needs to be maintained each time the shopping cart contents are reviewed
  • Showing standard shipping charges and other costs when the shopping cart is reviewed is an added bonus
  • The shopping cart needs to follow the client
  • Stores need to provide the ability to review an order before placed
  • Stores also need to provide the ability print out the contents of the shopping cart
  • Shopping carts should support an indefinite number of items, or the number of items should be limited by company policy, not Web technology limitations.

A pretty good list of requirements. Now, how do each of the stores measure up?

To determine when cookies are used at each of the sites evaluated, I set my browsers to prompt me when the online store wants to set a cookie. Using this approach I can see what kind of cookies the store uses, and get an idea of the cookie purpose.

Amazon.com

Probably the undisputed king of online bookstores is Amazon.com. This company began as a pure Net-based business, and has shown the world that online commerce not only works, it works very well, thank you.

Amazon has one of the better store interfaces, and some of the best account and order maintenance setups, but does it meet all of our shopping cart requirements? Let’s check it out.

First, all items that Amazon sells can be added to the existing shopping cart with the touch of a button, even items that are on order but not yet in stock. In addition, the shopping cart contents will persist even if you leave the site and return at a later time. In fact, Amazon tells you that the item will remain in the shopping cart for 90 days, if I read this correctly, a feature I found to be very nice.

Bonus technique: Let people know how long the shopping cart items will remain in the cart. The only surprise to pull on a customer is to let them know an item is on sale, or that they are the millionth customer and have won something. Anything else will lose you business.

Amazon also provides a feature to save the item for purchasing at a later time. This removes the item from the cart, but still keeps the item on a list for later purchase.

The shopping cart can be reviewed at any time, and there is an icon on every page that allows you easy access the shopping cart. You can also modify the cart contents by changing the quantity of an item you’re ordering, or removing an item altogether.

Amazon makes use of standard HTML technology, so the shopping cart review page should print out fairly well. Unfortunately, the shopping cart does not display shipping charges and does not display a running total for the items. However, Amazon does show a total, including shipping, that you can review before you place the order. This page can also be printed out.

So far so good. Amazon has met most of our requirements, but the real test of Amazon’s supremacy in shopping cart technology is whether the cart can follow the customer. Unfortunately, the company does not support this capability.

When you access Amazon from a browser at a specific machine for the first time, Amazon sets an ID that is used to track your shopping cart items. Access Amazon from the same browser and the same machine, and you will get the same shopping cart items. However, if you access Amazon from another machine or even another browser, you will not get access to these shopping cart items.

Is it important to maintain shopping cart persistence from browser to browser, machine to machine? You bet it is.

I, as with other folks involved with Web development and authoring, use both Navigator and IE. In addition, there are some sites geared more towards one of these browsers, so most folks who spend a lot of time on the Net have both browsers.

There are times when I am sure I have placed an item in the shopping cart, only to find out I did, but using a different browser or from a different machine. This happens more often than I would like, and is an annoyance every time.

Now the online stores have to ask themselves the question: Are people like myself part of a customer base they want to attract? Think of this: Who is more likely to be purchasing items online than folks who spend a large amount of their time, online. And who is likely to use more than one machine and more than one browser? Folks who spend a lot of time, online.

To summarize, Amazon uses client-side cookies to establish a persistent ID between the customer and the shopping cart. The company also uses this ID to establish a connection from the customer to the customer’s account information. The shopping cart items, however, are maintained on the server, persist for 90 days, and there is no limit to the number of items that can be ordered at Amazon, at least as far as I could see. Where Amazon does not meet the requirements is by not providing a running total on the shopping cart review page, and by not providing a shopping cart that moves with the customer.

Based on the requirements met by Amazon, I give them a score of 8 our of 10, for their support of shopping cart techniques.

Beyond.com

Beyond.com sells computer software and hardware and is a Net-only based company.

Beyond.com maintains a client ID in client-side cookies, which is used to track shopping cart contents for the session, only. Beyond.com does not persist the shopping cart contents outside of a specific browser session. Once you close the browser, the current shopping cart contents are gone.

In addition, it does look as if Beyond.com maintains the shopping cart totally within one client-side cookie, tagged with the name “shopcart”.

By maintaining the shopping cart on the client, Beyond.com has chosen one of the simplest approaches to maintain a shopping cart, and simple can be good. There is little or no burden on the server other than accessing the original item that is added to the cart. There is also less maintenance to this type of system, primarily because the Web developers and administrators do not have to worry about issues of storage of information on the server, or cleaning up shopping carts that become orphaned somehow. Additionally, Beyond.com is taking advantage of a client-side storage technique that is safe and simple to use.

However, there is a limitation with this approach in that the cookie is limited to a size of 4 kilobytes. It may seem that 4K is more than large enough to support a cart, but when you store information for each item such as cart item number, name of product, version, price, store identification number, quantity and price, you can reach an upper limit more quickly then you would think. Additionally, a limit is a limit, and you have to ask yourself if you really want to limit how many items a person can add to their shopping cart.

Most online stores could probably get away with shopping carts that have number of items limitations. After all, it might be a bit unusual to purchase 40 or 50 items from a software company at any one time.

If a store’s customers tend to purchase only a few items at a time, then it might not be cost effective to provide shopping cart technology that provides for virtually unlimited items.

Beyond.com also provides a quick look at the shopping basket from every page of the site. This quick view provides the first few letters of the cart item, the quantity ordered, and a running total for the cart. As much as I appreciate having this information, I found that I would have preferred having just the quantity of items in the shopping cart and the running total: listing all of the items actually became a distraction when I had more than a few.

Beyond.com uses standard HTML and the shopping cart page did print out using the browser’s print capability. In addition, you can review the order, including the shipping charges, before the order is fully placed.

To summarize, I liked Beyond.com’s support for shopping cart status display on the other Web pages. I also liked Beyond.com’s running total. The biggest negative to Beyond.com’s shopping cart was the lack of persistence outside of the browser session. I may not order more than 5 or 10 items at a time, but it isn’t unusual for me to add a couple of items at one time, close down the browser and return at a later time to add more items and finalize the order. In addition, it isn’t impossible for people to accidentally close down their browsers, which means they lose all of the items from their cart and have to start over. Based on the lack of persistence, I would have to give Beyond.com a 6 in shopping cart technology.

Catalogcity.com

CatalogCity is an interesting online business that presents the contents of catalogs from several mail order firms, allowing you to shop for everything from a new jacket to kitchen knives. Once you have placed your order for all of the items you’re interested in, CatalogCity then submits the orders for the individual items to the specific catalog company.

Of all the online shops I have seen, CatalogCity is one of the most clever. It provides both goods and a service, but without the hassle of maintaining inventories and supporting warehouses. I am sure that CatalogCity charges a fee to use their services to the catalog companies listed, but it is most likely more profitable for these companies not to hassle with online ecommerce issues. Even for those companies that have their own site and that use CatalogCity, they will get access to people who are looking to shop, but don’t necessarily know the catalog company’s name or Web site URL.

I do like to see effective and innovative uses of Web commerce. If I have a problem with the site, it is that not all of the catalog companies support online shopping in the catalog through CatalogCity. You can review the catalog and use the phone number provided to place your order. However, it’s just not the same as one button shopping.

CatalogCity uses cookies to set a customer id the first time you access their site. However, after that, all information about the shopping cart is stored on the server. There is no indication in the pages that you have shopping cart items, but you can access the shopping cart from a well placed icon on each site page.

The shopping cart page lists all of the items, provides the ability to change or remove an item, and provides a running total — sans shipping charges. It also provides a hypertext link from the item to the page where the item was originally listed, so you can review the item before making a final purchase.

The technology that CatalogCity uses for their shopping cart is fairly standard, so the cart page should print out easily. In addition, the company does provide the customer the ability to review the order, including shipping charges, before the order is placed.

The CatalogCity shopping cart is the most persistent of all of the shopping carts that I have seen. First, if you access the site but don’t set up an account, the cart will persist from browser session to browser session, but only with the same browser and machine. However, if you create an account with CatalogCity and sign in each time you access the site, the shopping cart will follow you from one browser to another, and from one machine to another. In fact, of all the sites I reviewed for this article, CatalogCity is the only one that provided this functionality.

To summarize the CatalogCity shopping cart technology, the company has provided the best support for shopping cart persistence of all the sites visited. In addition, the company also provides easy access to the cart, and provides a running total on the shopping cart page. CatalogCity also provides you with a change to review and modify your order as well as review the shipping charges before the order is placed. About the only non-positive aspect I found with this site’s shopping cart technology is that the site does not provide information that the shopping cart has items on the first page. If CatalogCity had provided this, I would have given the site a score of 10, but I’ll have to give it a score of 9.

Reel.com

Reel.com is an online video store that sells new, and used, VHS and DVD videos. It has an excellent selection of movies and a nicely organized site.

Reel.com uses cookies to set a user id when you first access the site. When you access a specific item, the site uses ASP pages and ASP (Microsoft’s server-side technology) sets a cookie with a session id when the first ASP page is accessed. After that, no other cookies are set. All shopping cart items are maintained on the server.

ASP or Active Server Pages, was the technology that seemed to be most used at the different online stores. ASP technology originated with the release of Microsoft’s Internet Information Server (IIS), but has since been ported to other Web servers and even to Unix from a company called ChiliSoft.

ASP provides for both server-side scripting as well as server-side programming with ASP components. In addition, ASP provides full support for data access through Microsoft’s Active Data Object technology.

One cookie that is set with ASP is the Session ID. When you access a site for the first time during a browser session, Microsoft tries to set a Session ID, to maintain a connection between your browser and the Web server. Without this, it is very difficult to maintain information about the session, such as shopping cart contents, from Web page to Web page.

Reel.com does not provide a running total for the purchases on the shopping cart page, and does not provide a visual indicator that items are in the shopping cart from any of the pages, except the shopping cart page. The company does provide easy text-based access to the shopping cart from each page and does allow you to change the quantity of an item ordered, as well as remove an item from the cart.

Reel.com provides shipping and full order information for the customer to review and modify before the order is placed, and the order page, as well as the shopping cart, can be printed out.

Reel.com does not provide persistence beyond the session. Once you close the browser, the shopping cart is gone.

To summarize, Reel.com did not score very high by meeting many of the requirements for a shopping cart. It didn’t provide a visual cue about shopping cart contents, at least on the first page of the site, nor did it provide a running total on the shopping cart page. The biggest negative, though, was that the site did not maintain the shopping cart persistently outside of the browser session. Reel.com did provide the ability to review and modify the order before the order was placed, but based on the requirements met, I would have to give Reel.com only a 4 for shopping cart technology.

Summary

Four different online store sites, each using different techniques to support the site’s shopping cart.

All of the sites used cookies to establish a connection between the browser session and the shopping cart. In addition, each site provided shopping cart pages that could be printed out, and provided the ability for the customer to review and modify, or cancel, the order before it was placed.

The highest scorer in my evaluation is CatalogCity, primarily because of their support for persistence across different browsers and machines. This was followed by Amazon, which provided for browser and machine specific persistence.

Both Reel.com and Beyond.com dropped drastically in points because of their lack of shopping cart persistence, in any form. However, Beyond.com did provide feedback as to shopping cart contents, something that CatalogCity and Amazon did not. Beyond.com may want to consider dropping their line item display of the shopping cart as this can be distracting. They were also the only online store maintaining their shopping cart in client-side cookies. While this approach has an advantage of being the quickest technique to displaying the shopping cart contents when the customer wants to review the shopping cart, and is the simplest technique to use, I still don’t see this approach as the way to go for online shopping.

If we could take CatalogCity’s persistence and add to it a running total with estimated shipping charges, and provided feedback on the cart contents in at least the home page of the site, we would have, in my opinion, the perfect shopping cart.

The next article in the Technology Snoop series will be on order processing and order status maintenance. In this you’ll see that Amazon shines. You’ll also read about how not to win customers and to lose the ones you have when I add some new online stores to the review.