Northwind Traders Direct Sample Application
This content is no longer actively maintained. It is provided as is, for anyone who may still be using these technologies, with no warranties or claims of accuracy with regard to the most recent product version or service release.
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)
Download 5298.exe.
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.
Further Reading
Many of the techniques used in Northwind Traders Direct are discussed in the article "Programming Data Access Pages." Information about using FrontPage with data access pages is in the white paper "Deploying Data Access Pages on the Internet," discussed in the previous section.