Northwind Traders Direct Sample Application

Roy Leban, Access Program Management
Microsoft Corporation

Applies to: Microsoft Access 2000, Microsoft FrontPage 2000

January 1999

Summary: Northwind Traders Direct is a simple e-commerce application that uses data access pages, frames, and cookies. It was created by using Microsoft® FrontPage® 2000 and Microsoft Access 2000. (7 printed pages)

Click to view or copy the sample Web site discussed in this article.

Introduction

Northwind Traders Direct is based upon the Northwind Traders sample database that ships with Microsoft Access 2000. You can use the ideas and code in Northwind Traders Direct to implement your own dynamic intranet or Internet Web site.

Northwind Traders Direct is set up to operate as either an intranet site (from a shared location) or as an Internet site (from a server running Microsoft Internet Information Server [IIS]). To start using Northwind Traders Direct, simply copy it to any location and make sure you have a copy of Northwind.mdb in the standard location on your machine:

C:\Program Files\Microsoft Office\Office\Samples\Northwind.mdb

Then, open Default.htm in Microsoft Internet Explorer to enter the site and explore it as you would any other Web site.

The Structure of Northwind Traders Direct

Northwind Traders Direct consists of the following Web pages:

Web Page	Description
Browse.htm	Shows the categories of products available. Clicking any category navigates to Listing.htm.
Checkout.htm	Shopping cart checkout page. Shows products ordered, total price and allows the user to specify their Customer ID in order to complete the purchase.
Confirm.htm	Confirms the user information and allows them to complete the purchase or continue shopping. When the user confirms the purchase, an Order record is created by the data access page and one or more Order Details records is created by using Data Access Objects (DAO) code.
Default.htm	Frameset for Web site. Displays Nav.htm on the left and initially displays Welcome.htm on the right.
Info.htm	Informational page for the Web site.
Listing.htm	Shows a list of products in a given category. Clicking any product navigates to ProductInfo.htm.
Nav.htm	Navigation frame page. Contains standard navigation buttons, a quick search option, plus the scripts to support navigation with server filters.
NewCustomer.htm	Allows new customers to enter their customer information and get added as Northwind customers.
ProductInfo.htm	Shows information for a single product (linked from Listing.htm).
RecipeInfo.htm	Shows information for a single product (shown in an IFrame in Recipes.htm).
Recipes.htm	Shows the recipe of the week. Clicking on a recipe item shows that item in an IFrame below the recipe.
Search.htm	A search page allowing more powerful searching than that provided by the navigation frame's quick search.
SearchInfo.htm	Shows information for a single product (linked from SearchResults.htm).
SearchResults.htm	Shows all products matching a search. Clicking on any product shows that item in SearchInfo.htm.
Thanks.htm	Thank you page that appears after the user confirms a purchase.
Welcome.htm	Home page for Web site.

The Web pages include a number of shared features. For example, every time a product is shown, a shopping cart icon accompanies it. Clicking the icon allows a user to add the product to his or her shopping cart or change the quantity ordered.

Common Scripts

In addition to the Microsoft Visual Basic® Scripting Edition (VBScript) procedures on each page, there are two files containing common procedures that are used throughout the Web site. Many of the scripts on the HTML pages consist of simple calls to the shared procedures. The procedures themselves contain some explanatory comments. A summary is below.

Navigation.vb

Navigation.vb is included by Nav.htm and referenced from Shared.vb and other procedures. It includes the following:

Procedure	Description
SaveValueForPage GetSavedValue ClearValueForPage	Provide persistent variables across Web pages through an array persisted in Nav.htm.
SaveFilterForPage NavFrameWithServerFilter NavCurrentServerFilter	Use the persistent variable procedures to provide easy navigation to a new page with a server filter in effect. These procedures are used in conjunction with the AutoSetServerFilter procedure in Shared.vb.
GetCookie SetCookie DeleteCookie	Some general-purpose cookie procedures, slightly modified from copies on the microsoft.com Web site.
SetCookieValue DeleteCookieValue	General-purpose cookie procedures with a simpler calling sequence (creates nonexpiring cookies for current domain).
AppendCookieSubValue NumCookieSubValues GetCookieSubValue	Procedures that allow for more than one value to be stored in a single cookie. Used by the shopping cart procedures to store the entire cart in one cookie.
AddToCookieValue	Cookie value math procedure. Used by the shopping cart procedures to maintain the total order value.
CartChanged CartChangedTimeout	Execute a specified command after the shopping cart changes. The command is executed on a timeout so that it isn't executed multiple times when a number of shopping cart changes are made in a row. This is used to call the AdjustCartCount procedure in Nav.htm to adjust the displayed number of items in the shopping cart.
AddProductToShoppingCart NumProductsInShoppingCart ClearShoppingCart RemoveFromShoppingCart QuantityInShoppingCart TotalOfShoppingCart	Shopping cart procedures. These are somewhat general-purpose and don't know the connection between database values and the shopping cart values.
FilterForShoppingCart	Returns a filter string that matches just the products in the shopping cart. This is used by Checkout.htm to display the products.

Shared.vb

Shared.vb is included by every HTML file. It includes the following:

Procedure	Description
MakeFieldLookLikeLink	Makes the contents of a field look like a link, by setting the color, underlining it and setting the cursor to have a browser hand within it. This procedure is used in conjunction with an onclick event handler that calls the appropriate navigation procedure, either: NavWithServerFilterFromNumericField or NavWithServerFilterFromTextField
NavToPage NavWithServerFilter NavWithServerFilterFromNumericField NavWithServerFilterFromTextField	Wrappers for the server filter page navigation procedures in Navigation.vb. These procedures know about the structure of the data access pages.
HideNavControlIfNotNeeded	Used to hide the Record Navigation control if it's not needed because all of the records are shown at all times.
RecordsAreShown	Returns True if one or more records are shown.
ShowMessageIfNoRecords	Sets a message to be visible if no records are shown.
CreateInsetFrame ResetInsetFrame	Support for IFrames created at run time. Used by Recipes.htm.
AddProductToCart RemoveProductFromCart ClearCart NumProductsInCart GetNthProductFromCart QuantityInCart	Shopping cart procedures that know about the structure of the data access pages and the product information in Northwind.
AutoSetServerFilter	This is used in conjunction with the server filter page navigation procedures in Navigation.vb to set the ServerFilter property for the page to the value set prior to navigation.
ObjectExists	Returns true if an object of a given name exists in the current document. Useful for testing if the Microsoft Office Data Source control (MSODSC) object exists.
AutoConnectToDatabase	Sets the UseRemoteProvider property on the MSODSC to switch to three-tier data access if the page is a data access page being accessed with the HTTP protocol.

In addition to the provided procedures, Shared.vb calls AutoConnectToDatabase and AutoSetServerFilter directly. These procedures are called inline, at page load time. Since Shared.vb is included at the bottom of the HTML files, this means that these functions will execute after all controls on the page (including the Data Source ActiveX® control) have been created, but before they have been initialized. In the case of the Data Source control, this means that all of the properties have been set, but the connection to the database has not been established and data binding has not been done.

Special-Purpose Scripts

Most of the scripts in the HTML pages are fairly self-explanatory. A few items are worth calling out:

Checkout.htm uses script to display a special message for an empty shopping cart.
Checkout.htm uses script to extract and display the quantity of each item in the shopping cart.
Checkout.htm uses ActiveX Data Objects (ADO) code to verify that the entered Customer ID value is valid.
NewCustomer.htm uses ADO code to verify that the entered Customer ID value is not already in use.
Confirm.htm uses ADO code to extract the customer information and Checkout.htm and to write out the Order Details records after the Order record has been saved.
ProductInfo.htm, RecipeInfo.htm and SearchInfo.htm use the values of the hidden fields Discontinued, UnitsInStock, and UnitsOnOrder to display a single product status message.
Nav.htm and Search.htm create server filters on the fly to match user-entered search criteria. See also the code in the FilterForShoppingCart procedure in Navigation.vb.
Nav.htm provides the AdjustCartCount procedure, which updates the shopping cart status message that appears at the bottom of the navigation frame.
Nav.htm checks for a pre-existing shopping cart when it is loaded; if there is one, Nav.htm asks the user whether to keep the cart.
Several places, for example the quick search form in Nav.htm, use the onkeydown event to detect when the ENTER key is pressed to perform the form action. Because the form processing needs to be done on the client, this checking is done to prevent the form from being submitted to the server (the default action when the ENTER key is pressed).

Deploying Northwind Traders Direct on a Web Server

To put data access pages on the Internet, you need to use something called three-tier data access. Complete instructions for setting up three-tier data access are in the article "Deploying Data Access Pages on the Internet." Northwind Traders Direct contains some VBScript code to make this process easier. When each data access page is loaded, Northwind Traders Direct checks to see if the page is being accessed from a Web server (that is, the protocol is HTTP). If it is, Northwind Traders Direct turns on the UseRemoteProvider property in the Data Source control, which activates three-tier data access. The script code for this is in the AutoConnectToDatabase procedure in Shared.vb.