Day 8

Designing the Shopping Cart Application

by Paul Mahar


CONTENTS

Today is the only day this week where you won't be immersed in JavaScript. This is the day to prepare the groundwork for an Internet shopping cart application. Today's tasks include the following:

IntraBuilder's Web applications can run within the corporate firewall as intranet systems or on public Web sites as Internet applications. Most of the prebuilt solutions that come with IntraBuilder are geared toward intranets. This chapter covers the design of a public Internet shopping cart application and preparing the tables that go with it. Although the IntraBuilder Server does not distinguish between intranet applications and Internet applications, there are a few things to keep in mind when designing an application for public use.

Shopping cart sites are one of the most common Web applications you'll run into while surfing the Net. You can use them to search for and purchase books, compact discs, software, and thousands of other items. A typical shopping cart application lets you search for items in a vendor's catalog, select items for purchase, review your order, and supply billing information. If you haven't purchased something on the Web lately, you might want to warm up your browser and cruise through a few Web stores. Visiting some Web stores helps you see what is expected of a merchant that sets up shop on the information superhighway.

TIP
If you want as many people to use your site as possible, you need to take a least common denominator approach when developing your site. This is critically important if you want to support low bandwidth connections. As you work through the shopping cart application, keep the following guidelines in mind:
  • Avoid a heavy reliance on images.
  • Do not require frames, Java, ActiveX controls, or client-side JavaScript.

On Being a Virtual Mall Rat

In the physical world, a mall rat is a teenager whose primary after-school activity consists of hanging out at the local mall. Mall rats don't go to the mall to buy anything, but rather to socialize and check out cool stuff. As commerce moves from the physical to the virtual realm, the original mall rat heads for extension. The new breed is the virtual mall rat who hangs out in chat rooms and checks out cool Web sites, including those with shopping cart applications. Like the old style mall rat, the new virtual mall rat does little in the way of actual purchasing. To get a good sense of how to build a shopping cart application, one must become a virtual mall rat.

If you haven't already, hide your credit card, start up your browser, and head out to the shops. This list provides some sites to visit.

NOTE
The books referenced throughout the building of this application are available through Macmillan's bookstore. This is also the place to download all the source code, images, and tables used in the shopping cart application. If you haven't downloaded the tables already, click the Software Library link.

Although each of the shopping cart applications uses different images and styles to embellish its site, the underlying functionality is almost identical. Now that you've seen how the pros do it, it's your turn, and you have less than seven days to get your site up and running. Don't worry; all will go smoothly after you get a solid understanding of what the application entails.

Dissecting a Shopping Cart Site

Let's look at the individual components that make up a shopping cart application. The easiest components to identify are different pages you see while perusing a store. Other portions of the application are hidden from the end user. Here are the components you can see through a browser:

Most of these components are dynamic Web pages that you can create as JavaScript forms. Other components include the static store front, the common links that appear on various forms, and the receipt. The receipt is dynamic in its data but does not offer any interactive features. You can create a receipt using a JavaScript Report. Table 8.1 lists the JavaScript forms required for the shopping cart application.

Table 8.1. JavaScript forms for the shopping cart application.

FilenameDescription
cart.jfmShows the contents of the shopping cart.
checkout.jfmLets shoppers purchase items in their cart.
detail.jfmShows a detailed description of an item.
help.jfmHelp for other forms.
keyword.jfmEnables shoppers to perform complex searches.
message.jfmDisplays status information to the shopper.
quick.jfmProvides a fast and simple search.
results.jfmLists all items found in a search.

What you can't see through the browser are table structures, administrative tools, and what happens after you get your receipt. Before you start developing any JavaScript forms, you need to create and populate the tables. After you have tables, you can design a storefront and the help page. The rest of this chapter takes you through these tasks. Today you will go over the structure of each table used in the shopping cart application.

Stores have to sell something, and it is also really helpful if they have a name. For this exercise we'll be selling books. Why books? They are easy to sell on the Web, and Sams has a lot of book type data and owns the rights to images that are going to prove useful for this application. Not only that, but because you've got one in your hands right now, you're already familiar with the merchandise. The name, "Boingo's Books," seems pretty catchy and makes for an easy to create double-B logo. (Well, that, and I was trying to think of the book store name while listening to an Oingo Boingo song.)

Setting Up the Tables

The easiest way to set up an application in IntraBuilder is to place all related files in a single folder under the IntraBuilder folder. Follow these steps to create a new Store folder and select it as the active IntraBuilder folder:

  1. Create a new Store folder using the Windows Explorer. If you installed IntraBuilder in the default location, the complete path for the new folder will be
    C:\Program Files\Borland\IntraBuilder\Store
  2. Open the IntraBuilder Explorer and use the folder button to select the new folder as the Look In box.

The application requires six tables: Cart, Customer, Invoice, Lineitem, Product, and Title. The table structures are simple, and you can create them using any of the supported IntraBuilder table types. If you are using the standard version of IntraBuilder, your choices are limited to dBASE, Paradox, and Access table formats.

TIP
Although this section walks you through the table design and population process, you should still consider downloading fully populated tables from the Macmillan Web site.

IntraBuilder uses native BDE calls to work with dBASE and Paradox tables and external ODBC drivers to connect to Access tables. To get the most functionality and performance, we'll skip the Access format and get our choices down to dBASE and Paradox. Paradox has a lot more field types, including the ever handy auto-increment type. However, I'm a diehard performance enthusiast, and the Borland Database Engine works a little faster with the simpler dBASE table type. Now that we have a table type selected, let's look at how to create the tables and their structure in detail.

The Cart Table

The Cart table is the basis for what will appear on the shopping cart page. It contains one row for each book a user selects for purchase. The Cart table contains four fields: CARTUSER, CARTDATE, ISBN, and QTY. Listing 8.1 shows the structure for the Cart table.


Listing 8.1. The structure for table CART.DBF.

Table type: Visual dBASE

------------------------------------------------------------------

Field  Field Name                 Type          Length  Dec  Index

    1  CARTUSER                   CHARACTER         20           Y

    2  CARTDATE                   DATE               8           Y

    3  ISBN                       CHARACTER         15           Y

    4  QTY                        NUMERIC            5           N

------------------------------------------------------------------

** Total **                                         49


A row is a unique set of fields within a table or view. For most queries, each row corresponds to a single physical record in a table. Rows are distinct from records when they contain calculated values or values from more than one table.

Although you could also name the first two fields USER and DATE, you should avoid doing so. USER and DATE are SQL reserved words that can cause unexpected errors when using table utilities such as the Calculate Aggregates dialog. Figure 8.2 shows the database engine error that occurs when attempting to calculate the minimum of a field named DATE.

Figure 8.2 : Error caused by using SQL reserved words as field names.


TIP
The IntraBuilder help file contains a complete list of SQL reserved words for dBASE and Paradox tables. You can locate the list by looking up Reserved words in the help index. Consult your server documentation for field naming conventions when working with tables through ODBC or SQL-Links.

The first field, CARTUSER, contains a randomly generated number that identifies a shopper during a single session. Each time a shopper jumps to the help form from outside the application, the form generates a new user number. The application maintains the user number until the shopper jumps to a Web page outside the shopping cart application. When a shopper adds a book to the cart, the user number is used to identify the books of any single shopper. Although the data stored in the field is all numeric, the field is a character type. The database engines floating point system loses precision after 16 digits. Character expressions do not have any such limits.

The CARTDATE field contains the date that a row is added to the table. None of the JavaScript forms that a shopper sees will use this field. Database administrators can use the CARTDATE field to purge old rows from the Cart table. The dBASE date type internally stores four digits for the year, two for the month, and two for the day. Within a JavaScript event, date values appear as JavaScript date objects.

The ISBN and QTY fields display when a shopper views the shopping cart page. The ISBN number relates to an identically named field in the Title table. The QTY field lets shoppers order more than one of each book title. If a shopper tries to set the QTY field to zero, the record is deleted.

Indexes help the database engine speed up queries against the table. This table indexes all fields that the application uses to locate and filter rows.

The Customer Table

The Customer table contains customer, shipping, and billing information. The customer number is generated when a shopper commits an order through the Checkout page. The shopper enters information for the rest of the fields when checking out. The Customer table has a one-to-many relation with the Invoice table. Listing 8.2 shows the structure for the Customer table. The CARDDATE field is of type character to accommodate entry of expiration dates that do not include the day of the month.


Listing 8.2. The structure for table CUSTOMER.DBF.

Table type: Visual dBASE

------------------------------------------------------------------

Field  Field Name                 Type          Length  Dec  Index

    1  CUSTOMER                   NUMERIC           10           Y

    2  NAME                       CHARACTER         40           N

    3  PHONE                      CHARACTER         20           N

    4  STREET                     CHARACTER         40           N

    5  CITY                       CHARACTER         30           N

    6  STATE                      CHARACTER          2           N

    7  POSTALCODE                 CHARACTER         10           N

    8  COUNTRY                    CHARACTER         30           N

    9  CARD                       CHARACTER         10           N

   10  CARDNUMBER                 CHARACTER         20           N

   11  CARDDATE                   CHARACTER          8           N

   12  CARDNAME                   CHARACTER         40           N

------------------------------------------------------------------

** Total **                                        261


The Invoice Table

The Checkout form adds a row to the Invoice table when a shopper commits an order. The Receipt page contains the invoice number, customer number, and order date.

A "real-world" Invoice table would likely include other fields, such as date filled. Although the Invoice table is one of the final destinations of the shopping cart applications, it is the beginning of the order processing system. An application written with C++ Builder or Visual dBASE could use BDE to work with the same tables and fulfill customer orders. The Invoice table has a one-to-many relation to the Lineitem table. Listing 8.3 shows the structure for the Invoice table.


Listing 8.3. The structure for table INVOICE.DBF.

Table type: Visual dBASE

------------------------------------------------------------------

Field  Field Name                 Type          Length  Dec  Index

    1  INVOICE                    NUMERIC           10           Y

    2  CUSTOMER                   NUMERIC           10           Y

    3  ORDERDATE                  DATE               8           Y

------------------------------------------------------------------

** Total **                                         29


The Lineitem Table

Like the Invoice table, the Lineitem table is an end result of the shopping cart application. When a shopper commits an order, the Checkout form moves records from the Cart table to the Lineitem table. The Invoice field relates to a matching Invoice key in the Invoice table. Listing 8.4 shows the structure for the Lineitem table.


Listing 8.4. The structure for table LINEITEM.DBF.

Table type: Visual dBASE

------------------------------------------------------------------

Field  Field Name                 Type          Length  Dec  Index

    1  INVOICE                    NUMERIC           10           Y

    2  ISBN                       CHARACTER         15           Y

    3  QTY                        NUMERIC           10           N

------------------------------------------------------------------

** Total **                                         36


The Product Table

The Product table is a look-up table for a quick search. Boingo's Books only carries books on Borland products. The Product table is a list of Borland's current software catalog. The shopping cart application can use the Product table to create a quick search. Shoppers can use a product quick search to locate all books related to a single product. The Notes field is a memo field that Boingo personnel can use to keep notes about a given product. Although the IntraBuilder table designer reports a width of 10 for a dBASE memo field, this is only the length of the pointer to the actual data. The memo data is stored in a separate file with a .DBT extension. Memo fields are variable-length text fields that provide an efficient method of storing unstructured text such as comments. Listing 8.5 shows the structure for the Product table.


Listing 8.5. The structure for table PRODUCT.DBF.

Table type: Visual dBASE

------------------------------------------------------------------

Field  Field Name                 Type          Length  Dec  Index

    1  PRODUCT                    CHARACTER         20           Y

    2  NOTES                      MEMO              10           N

------------------------------------------------------------------

** Total **                                         31


The Title Table

The Title table lists all the book titles in the Boingo's book inventory. The shopping cart application never writes to the Title table. You need to ensure valid data exists in the Product and Title tables before you begin to create the application.

Shoppers can locate books by looking for values in any of the first four fields: Title, Author, ISBN, and Product. Each of the search fields has an index allowing for the ordering of results. The Title, Author, and ISBN field searches are complex keyword look-ups in which the index does not benefit the look-up. The Product field is a quick search that will run faster with an index. The Product field also relates to the Product field in the Product table. Listing 8.6 shows the structure for the Title table.


Listing 8.6. The structure for table TITLE.DBF.

Table type: Visual dBASE

------------------------------------------------------------------

Field  Field Name                 Type          Length  Dec  Index

    1  TITLE                      CHARACTER         60           Y

    2  AUTHOR                     CHARACTER         40           Y

    3  ISBN                       CHARACTER         15           Y

    4  PRODUCT                    CHARACTER         20           Y

    5  PUBLISHER                  CHARACTER         20           N

    6  PUBDATE                    DATE               8           N

    7  PRICE                      NUMERIC            6    2      N

    8  NOTES                      MEMO              10           N

    9  COVER                      BINARY            10           N

------------------------------------------------------------------

** Total **                                        192


The Price field has a width of six, which includes a fixed decimal place. This means books can have prices up to $999.99. Fortunately for the buying public, most books require a Price field with a width of only five.

If you attempt to store a number too large to fit into a field, IntraBuilder will fill the field with asterisks. IntraBuilder does not throw any errors for this situation, nor does it when you attempt to use the value from an asterisk-filled numeric field in a calculation. Such calculations will result in unpredictable values.

The Title table's Notes field has the same format as the Product table's Notes field. The text from the Notes field contains a description of the book. The text should not contain any formatting such as hard carriage returns. When the memo appears in a JavaScript form, the browser will control the word wrap.

The Cover field contains GIF images of the book covers. You can import a wide variety of image types into a field when viewing a table in the IntraBuilder Designer. The dBASE DBF structure uses a ten-digit pointer to a variable length binary image in a DBT file. DBT files contain all dBASE variable-length types including memo, binary, and OLE fields. Follow these steps to create the Title table from the Script Pad and import a GIF file into a new row:

  1. From the menu, choose View|Script Pad.
  2. Enter the following JavaScript statement to open the table designer and name the new table TITLE.DBF. Remember that JavaScript is case sensitive.
    _sys.tables.design("TITLE.DBF")
  3. For the first field, enter TITLE, leave the type as CHARACTER, change the width to 60, and select Ascend for the Ascending index.
  4. After completing the first field, tab down to a new row and continue entering the structure as shown in Listing 8.6. Where the listing shows an index, select Ascend; otherwise, leave the Index column at None.
  5. After the structure looks the same as in Figure 8.3, choose File|Close and save your changes.
    Figure 8.3 : Designing the Title table.

  6. To add a new row, run the table from the Script Pad. Enter the following JavaScript statement:
    _sys.tables.run("TITLE.DBF")
  7. From the menu, choose Table|Add Row and enter information in each field. When you first open an empty table, the row pointer is at endOfSet and you cannot save any changes. Selecting Add Row opens a row buffer but does not actually add a row.

Whenever a row is not available for the current query or table, the object is at endOfSet. An endOfSet condition can occur when you try to move before the first row or past the last row of a table. An empty table or view is always at endOfSet.

  1. When you get to the Cover field, right-click the field to open a shortcut menu, and select Import Image, as shown in Figure 8.4.
    Figure 8.4 : Importing an image into the Cover field.

  2. Select an image and save the new row. From the Choose Image dialog, you can select any image and navigate to other folders. To commit the new data, choose Table|Save Row. If you do not explicitly save the row, all the data in the new row will be lost.

Changing folders from the Choose Image dialog or any other IntraBuilder dialog changes the default folder for all IntraBuilder dialogs.

The IntraBuilder Table Run window contains several basic table utilities in addition to data entry and navigation options. The Table Run window provides options to query, sort, and perform simple calculations. These tools can help you with many data administration tasks.

When you open a table, IntraBuilder creates and opens a temporary form using the same columnar layout that you can get from the Form Expert. This temporary form includes all fields and enables you to perform row operations through the IntraBuilder toolbar and menu. IntraBuilder deletes the temporary form when you close the window.

TIP
You can use the Visual Query Builder's result window to view more than one row at a time. When you have a query defined, click the Query Builder's run button to open a result window. This window is read only.

Although IntraBuilder has some convenient database administration features, you should consider using another product such as a desktop database to assist you in routine table management. If you're using Access tables, you probably already have the best tool for managing Access tables, MS-Access. If you are creating new dBASE or Paradox tables, you can use any other BDE-based product to assist you.

Taking Advantage of Other BDE-Based Products

The Borland Database Engine (BDE) is a shared technology that provides native dBASE and Paradox support for IntraBuilder, Visual dBASE, Delphi, Borland C++, and Paradox. The same query engine retrieves SQL results, regardless of which BDE front-end product you're using. Microsoft uses a similar architecture to share the Access Jet engine with MS-Access and Visual Basic. If you are using dBASE or Paradox tables with IntraBuilder, you can enhance your data management functionality with other BDE products. Developers will find Visual dBASE and Delphi to be the most complimentary products to use with IntraBuilder.

Set the BDE LOCALSHARE system setting to TRUE if you are sharing tables between 16-bit and 32-bit versions of BDE products. LOCALSHARE enables record locking between the two platforms.

Visual dBASE

Anyone who has learned his or her way around the IntraBuilder development environment will experience a sense of dŽj‡ vœ when first exploring Visual dBASE. In place of the IntraBuilder Explorer, Navigator provides the same function. There is even a Command window that works like the Script Pad. The Two-Way Tools also function in a similar manner. Of particular interest to the IntraBuilder developer is the Table Records window and the dBASE soft delete system.

The Table Records Window

When you open a table in Visual dBASE, it comes up in a window similar to the IntraBuilder Table Run window. Both windows have a single, records-columnar view. The dBASE window contains two additional views: a Form view and a Browse view. The Form view is similar to a Form Layout generated by IntraBuilder Form Expert. The Form view displays a single record with fields going both across and down. The Browse view is a grid with full update functionality. You can add, edit, and delete records within the grid.

The Table menu in the dBASE Table Records window has several options that either are not surfaced in the IntraBuilder development environment or are not otherwise available in the IntraBuilder Table Run window. Figure 8.5 shows some of the additional table utilities that you can use in dBASE. These include managing indexes, generating test data, and working with deleted records.

Figure 8.5 : Using the Visual dBASE Table Records window.

In dBASE you can create, modify, and set indexes while viewing the grid. IntraBuilder has a similar index manager in the table designer. To set the row order in IntraBuilder, you must first create a query file or set the indexName property of a rowset object.

A rowset is comprised of all the rows of a query. The rowset object is a property of a query. All table navigation and searching is done through the rowset object.

Finding Those Long Lost Deletions

The dBASE table soft deletion system is unlike the more common and irreversible deletes used with Paradox, Access, and SQL tables. The first byte in each row of a dBASE table contains an asterisk or a null value. This byte is the deletion byte and the default value is null. If the deletion byte contains an asterisk, the database engine hides the row from the application. This occurs in Visual dBASE by default and in IntraBuilder always. In Visual dBASE, you also have the option of viewing and recalling deleted rows. Recalling a row sets the deletion byte back to a null value.

IntraBuilder treats all table types the same. There is no way to undelete a row from other table types because most automatically reuse the spaces occupied by deleted rows when inserting new rows. This means you cannot recall a deleted row from a dBASE table with IntraBuilder. However, if you have a copy of Visual dBASE handy, you can still get your data back by following these steps.

  1. Open Visual dBASE and turn off the option to hide deleted rows. You can do this by unchecking the Deleted option on the Table tab of the Desktop Properties dialog.
  2. Open your table and locate the deleted row.
  3. From the menu, choose Table|Recall Current Record.

Optimizing dBASE Tables

You can pack a dBASE table to reclaim the space occupied by deleted rows. From within IntraBuilder, you can use a method of the database class called packTable(). You can use the following line to call the method through the default database object.


_sys.databases[0].packTable("table.dbf") ;

If you have a copy of Visual dBASE, you can open the table and choose Table|Table Utilities|Pack Table to accomplish the same thing.

The Database Desktop

The Database Desktop is an abbreviated version of Paradox that was first developed as an add-in to Quattro Pro. Today, a 32-bit version is bundled with C++ Builder and Delphi. The Database Desktop has the following features:

When you first open a table in the Database Desktop, it is read only. Press f9 to place the table into an edit mode. Figure 8.6 shows the Title table as it appears in the Database Desktop.

Figure 8.6 : Using the Database Desktop.

Building a Storefront

The last step for the day is preparing an HTML index page. This will be the default Web page for the bookstore. For this task, you will not be using IntraBuilder because it does not contain a static HTML page designer. Instead, you'll use Netscape's Navigator Gold, which is bundled with all versions of IntraBuilder. This section also describes how to set up custom mappings for the Borland Web Server, WebSite, and FastTrack.

NOTE
At this point, you should have all six tables and couple images in the store folder. The images are available with the source code and are logo.gif and vcr.gif.

The HTML index page for the storefront is very simple. It needs to contain only a single link to call the IntraBuilder Agent with a JavaScript form. To make the storefront a little nicer, it includes an image link in addition to a text link. To make bookstore hopping easy, you can add an extra link to the Macmillan Web site.

NOTE
If you're a Microsoft Internet Explorer user and don't want to try out Navigator Gold, you can use Microsoft's FrontPage to create this simple form.

Designing the Storefront with Navigator Gold

Navigator Gold's HTML editor works like a word processor. You can enhance text using a toolbar to adjust font size, bold, and italics. The editor's toolbar also contains HTML-specific tool buttons for creating links and publishing pages directly to remote Web sites. If you have Navigator Gold, follow these steps to create Boingo's index page:

  1. Start Netscape and select File|New Document|Blank.
  2. To make a heading, enter Welcome to Boingo's Books. Select the text and pick Heading1 from the style drop-down list that appears on the bottom toolbar. This applies HTML codes to give the text a larger font. With the text still selected, click the centering toolbar button.
  3. From the menu, select Insert|Image. This prompts you to save the file. Save it as index.htm in the store folder (by default C:\Program Files\Borland\IntraBuilder\Store).

TIP
Navigator Gold recognizes only GIF and JPEG files as valid images, whereas most Windows tools work with BMP files. You can use IntraBuilder to solve this dilemma by translating images between these types. As an example, I created a logo as a BMP using the Windows 95 Paint accessory, opened the logo in IntraBuilder, and exported it to GIF. This allows the logo to work with Navigator Gold.

  1. With the file saved, enter LOGO.gif as the Image filename for the store logo and click the Link tab. Enter the following link and close the Properties dialog box:
    http://localhost/svr/intrasrv.isv?store/help.jfm
  2. Let's take a closer look at this URL:
  3. To make the image blend with the form, set the background color to white. From the menu, select Properties|Document. Select the Appearance tab and click the Background button. This lets you pick a color. Select a white background. While you're in the Document Properties dialog, give your form a title. Click the General tab and enter a title of Boingo's Books - The Store Front.
  4. Click the left-align button and enter the company slogan, "The best Web source for books on Borland database and development tools."
  5. On the next line, insert a text link to the same JavaScript form that opens for the logo. From the menu, select Insert|Link. Enter the same link information and some descriptive text as shown in Figure 8.7.
    Figure 8.7 : Creating a text link in Navigator Gold.

  6. Click the View in Browser button to run your HTML form. This is similar to switching from design to run mode in the IntraBuilder Form Designer.

That's all you need for your index form. If you are having fun with Netscape Gold, go ahead and add some more descriptive text and some more links. You might also want to emphasize text links by making the font larger. Listing 8.7 shows the complete HTML source for an index page as generated by Netscape Gold.


Listing 8.7. HTML source for index.htm.

 1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2//EN">

 2: <HTML>

 3: <HEAD>

 4:    <TITLE>Boingo's Books - Store Front</TITLE>

 5:    <META NAME="Author" CONTENT="">

 6:    <META NAME="GENERATOR" CONTENT="Mozilla/3.0Gold (Win95; I) [Netscape]">

 7: </HEAD>

 8: <BODY TEXT="#000000" BGCOLOR="#FFFFFF">

 9:

10: <H1 ALIGN=CENTER>Welcome To Boingo's Books</H1>

11:

12: <CENTER><P><A HREF="http://localhost/svr/intrasrv.isv?store/help.jfm">

13: <IMG SRC="logo.gif" HEIGHT=100 WIDTH=126></A></P></CENTER>

14:

15: <P><FONT SIZE=+1>The best web source for books on Borland database and

16: development tools.</FONT></P>

17:

18: <P><FONT SIZE=+2><A HREF="http://localhost/svr/intrasrv.isv?store/help.jfm">

19: Start Shopping at Boingo's Books</A> </FONT></P>

20:

21: <P><FONT SIZE=+1>Boingo's Books contains more than a dozen books about

22: Borland software. OK that is not really that many books, but descriptions

23: of all books are included, many include a book cover image.</FONT></P>

24:

25: <P><FONT SIZE=+1>There are many different ways to search for titles, so

26: the book you're looking for is never more than a few mouse clicks away.

27: </FONT></P>

28:

29: <P><FONT SIZE=+2><A HREF="http://www.mcp.com/bookstore">

30: Go to a real bookstore</A></FONT></P>

31:

32: </BODY>

33: </HTML>.


You can view the HTML source by selecting View|Source Document from within Navigator. The important lines in index.htm are lines 12 and 18. The URL in each line uses localhost to look for a Web server running on the same machine that is running the browser.

NOTE
Netscape Navigator Gold contains an interactive JavaScript prompt that enables you to test JavaScript expressions. The JavaScript prompt is similar to the IntraBuilder Script Pad. To open the prompt, enter JAVASCRIPT: as a location. When the prompt is active, the Navigator window splits into upper and lower panes. The lower pane contains the prompt. If you enter an expression such as navigator.appVersion, the value appears in the top pane. Microsoft Internet Explorer does not contain a similar feature.

Mapping Out the Storefront

The index page doesn't do much good if your Web server doesn't have a mapping to it. Web server mappings make it easy to locate groups of documents. This section covers how to create mappings for WebSite, the Borland Web Server, and FastTrack. If you are running Microsoft Internet Information Server, NT Workstation Peer Server, or another server, the general rules will still apply, although the specific implementations vary.

Mapping in a Web server is similar to mapping a Netware server drive to a local drive. A map provides a logical shortcut name for a physical location. For a Netware drive you might map \\NWSERVER\PUBLIC as F:. There are two main differences between Web server mappings and Netware mappings. Mappings for Web servers are defined on the server, and they map to logical names rather than drive letters.

WebSite is a great server to use with IntraBuilder during the development cycle. It is compact and contains a wealth of easy-to-set options. The Borland Web Server also is compact and well suited for single system development. The Borland Web Server lacks some of the configuration options that are available with WebSite. Both servers are also dependable for small intranet applications.

The Borland Web Server contains an API that is a reduced set of the Netscape Server API. This API makes the Borland Web Server faster than WebSite, which relies on Windows CGI. The Windows CGI protocol uses files to communicate between Web servers and applications such as IntraBuilder. The Web server API systems that come with Netscape FastTrack, Microsoft Internet Information Server, and the Borland Web Server handle all communication through in-memory function calls.

Windows CGI does not support the IntraBuilder Server Timeout registry setting. When using the Windows CGI, all forms that are not explicitly released are left in memory until the MaxSessions threshold is reached. For this reason, you should not use the Windows CGI interface for anything other than development.

When you deploy an application, consider scaling up to a more robust server such as Netscape FastTrack for NT. For secure transactions, you can use Netscape Enterprise Server or Microsoft Internet Information Server. Place the Web server on Windows NT 4.0 if you have a process that can tie up a single agent for several minutes. Windows 95 and NT 3.51 are not as adept at multitasking the agents. During development, keep your Web server simple and avoid the overhead associated with these higher end servers.

For the shopping cart application, create a mapping called store that points to C:\Program Files\Borland\IntraBuilder\Store. This lets you quickly open the storefront by entering http://localhost/store.

Making a Map for WebSite

Here is a step-by-step guide to creating the store mapping for WebSite version 1.1. If you have a newer version, the procedure might be slightly different.

  1. Open WebSite and choose Properties|Control to open the WebSite property sheet.
  2. Open the Mappings tab and select the Documents radio button.
  3. Enter /store/ for the Document URL Path.
  4. Enter C:\Program Files\Borland\IntraBuilder\Store for the full directory path (see Figure 8.8).
    Figure 8.8 : Creating a document mapping in WebSite.

  5. Click Add and Apply to save and activate the new mapping.
  6. Close the WebSite property sheet.

You can now try out the new mapping inside your browser. With WebSite running on the same machine, enter http://localhost/store into a browser. You should see the index page that you recently created with Netscape Gold. If it comes up okay, save it to your bookmark or favorites list.

Rigging the Registry for the Borland Web Server

If you are running the Borland Web Server, things are not quite as simple as they are with WebSite. To create a mapping for the Borland Web Server, you need to edit the Windows registry directly. The following steps show how it works:

  1. If it is running, shut down the Borland Web Server. The registry settings are read only once during startup.
  2. Open the Windows Registry Editor. Run REGEDIT.EXE (REGEDT32.EXE for Windows NT 3.51).
  3. Locate and open the following key:
    HKEY_LOCAL_MACHINE\SOFTWARE\Borland\Web Server\1.0\Alias Manager\Map
  4. With the Map branch selected, choose Edit|New|String Value.
  5. Enter STORE as the branch value. After creating the name, choose Edit|Modify to enter the directory path. The path you enter in the registry must end with \ to work correctly. Enter the following path:
    C:\Program Files\Borland\IntraBuilder\Store\
  6. When you have the registry set up as shown in Figure 8.9, close the Registry Editor and restart the Borland Web Server.
    Figure 8.9 : Editing the registry for the Borland Web Server.

You can now try opening the index.htm with your browser. Enter http://localhost/store/index.htm. The Borland Web Server will substitute the full path to the index file in place of store.

NOTE
Unlike most Web servers, the Borland Web Server does not use index.htm as a default document name. When creating links or bookmarks, you must include the index.htm with the server name. If you do not specify the document name, the Borland Web Server returns an error.

If all was successful, your browser displays the Store Front page for Boingo's Books as shown in Figure 8.10. If you get an error, try restarting your computer to clear out the Borland Web Server buffer.

Figure 8.10 : Viewing the Store Front through Navigator.

Creating a Document Directory for FastTrack

If you have IntraBuilder Professional or IntraBuilder Client/Server, you also have Netscape FastTrack for Windows NT. You can download FastTrack for Windows 95 from Netscape. FastTrack is a robust server that you can also use during development and deployment. All Netscape servers use the same Netscape Server Administrator for customizing server configurations. The Administrator is built with JavaScript and runs from within Netscape Navigator. The following are the steps for using the Netscape Server Administrator to create a mapping to the Store folder:

  1. Open the Netscape Server Administrator.
  2. Select the FastTrack server you want to use with IntraBuilder.
  3. Load the configuration file as needed. This is required after installing IntraBuilder.
  4. From the Content Management page, select Additional Document Directories.
  5. Under Add Document Directories, enter a prefix and map as shown. Do not end the directory mapping with a slash.
    URL prefix: /store
    Map to directory: C:/Program Files/Borland/IntraBuilder/STORE
    You can use either a forward slash or a backslash to separate folder names. However you enter them, FastTrack will save the mapping as shown in Figure 8.11.
    Figure 8.11 : Creating a mapping for FastTrack.

  6. After entering the new document directory, click OK and then Save and Apply to begin using the new mapping.

You can also create mappings for FastTrack through the obj.conf file. This text file works like a Windows INI file for Netscape Servers. When you use the Netscape Server Administrator, you are actually editing the obj.conf file.

Summary

You have done just about everything you can do to create an IntraBuilder-driven application without really using IntraBuilder. The chapter started with an overview of shopping cart applications. All the major components of the Boingo's Books Web store have been identified. All the tables are in place and a storefront is up and running.

Tomorrow's chapter builds up the store with a JavaScript form. At the end of Day 9, shoppers can go through the storefront and launch a JavaScript form with a toolbar and help. On Day 9, you will create a custom form class containing the toolbar, which serves as a set of common links for all the other pages. The help page will explain what the common links do and show how many items are in the shopping cart.

Q&A

Q:I noticed that most of the online shopping cart applications use images that look like buttons. Why don't they just use buttons?
A:HTML does not provide many of the button formatting features that Windows users have grown accustomed to seeing. For example, HTML buttons cannot be disabled, and they cannot contain bitmaps. If you use images, you can create what looks like a disabled button.
Q:If I'm expecting a lot of usage, is it better to keep my data in a server such as SQL Server or a native BDE format such as dBASE tables?
A:It depends on what your application does. SQL Server and InterBase will outperform BDE in complex queries; however, the simpler tables are faster for low volume transactions. This speed is not so much from the database engine but from a more direct path between the data and the application.
Q:I have an old copy of dBASE for DOS. Can I use it to work with dBASE tables created in IntraBuilder?
A:IntraBuilder creates level 5 tables with support for field types such as binary and OLE. These field types are not supported by dBASE for DOS.
Q:I tried to find a trial copy of WebSite at http://www.website.com/, but all I found was an advertising agency. Where can I get a trial copy of WebSite?
A:You can find complete information about WebSite, including trial versions, at the O'Reilly & Associates site, http://website.ora.com/. The site at www.website.com is not affiliated with O'Reilly or the WebSite product line.

Workshop

The Workshop section provides questions and exercises to help you get a better feel for the material you learned today. Try to answer the questions and at least think about the exercises before moving on to tomorrow's lesson. You'll find the answers to the questions in Appendix A, "Answers to Quiz Questions."

Quiz

  1. How can you identify whether a page you are working with has a secured server?
  2. What do the m and the p stand for in the mcp part of http://www.mcp.com?
  3. For what types of searches do indexes help performance?
  4. What sets the Gold version of Navigator apart from its non-Gold sibling?
  5. What types of images does the Navigator Gold editor support?
  6. How can you open a Script Pad in Navigator?

Exercises

  1. Try using Navigator Gold as a Two-Way Tool. Edit the index.htm file and add another image or some text. After making changes by hand, open the HTML document in the Netscape editor and resave it. View the source and see how it alters the code you handwrote.
  2. The setup program for IntraBuilder creates an IBAPPS mapping for the prebuilt solutions applications. It does not create one for the Sample files. Create your own mapping to the Samples folder and use it to run the Biolife JavaScript sample form through a browser.