Part I: Setting Up a New Web Project

Step 1

To begin a new Web project, start Visual InterDev. Choose New from the File menu. When the New dialog box appears (Figure 7-1), click the Projects tab and choose the Web Project wizard. Specify a location for your project files in the Location text box, give your project the name Catalog, and click OK.

Figure 7-1. The New dialog box.

The Web Project wizard will ask you for the name of the Web server on which the new project will be created. If this text box contains an entry, you can accept it; if the box is empty, type the name of the machine that is running Internet Information Server (or Personal Web Server). (If you don't know the correct name of your Web server, look up the Identification information by using the Network applet in the Control Panel.) Click Next.

The Web Project wizard (Figure 7-2) will contact the selected Web server and present the step 2 dialog box. Choose the option Create A New Web. Make sure the name of the web is Catalog. Check the option to enable full-text searching of the site. Click Finish. The Web Project wizard will create your new web and open the project.

Figure 7-2. The Web Project wizard.

Step 2

When the Web Project wizard creates your project, several elements are provided by default. You can examine these elements by clicking the FileView tab, which lists files named GLOBAL.ASA and SEARCH.HTM and a directory named IMAGES. These filenames might appear gray because they exist on the Web server but not in your working directory. Choose Web Project/Get Working Copy from the Project menu to update your working files.

Double-click GLOBAL.ASA. This is a special file that Visual InterDev uses to track the beginning and end of user sessions. Visual InterDev will use this file later to initialize a data connection.

Step 3

This project utilizes a Microsoft Access database named HOME.MDB to provide the online database of catalog items. In order to access this database, you must establish an ODBC data source on your machine.

Minimize Visual InterDev. You will now be working with the ODBC Data Source Administrator (Figure 7-3) to create your new data source. Open the Control Panel by choosing Settings/Control Panel from the Start menu. Locate the icon labeled ODBC. Double-click this icon to open the ODBC Data Source Administrator.

Figure 7-3. The ODBC Data Source Administrator.

The ODBC Data Source Administrator creates ODBC data sources from existing databases. Data sources that you use with Visual InterDev must be System DSN or File DSN sources. Click the System DSN tab, and then click the Add button.

In the Create New Data Source dialog box, select Microsoft Access Driver and click Finish. The ODBC Data Source Administrator will display the setup dialog box for Access data sources.

In the Data Source Name text box, type HomePage. This is the ODBC alias you will use to access the database. Click the Select button, and locate the file HOME.MDB. This will associate the database with the ODBC alias HomePage. Click OK. The data source is now established, and you can exit the ODBC Data Source Administrator.

Step 4

Maximize Visual InterDev again. Now you will add the data source to your Web project. On the FileView tab, click the project title and choose Add To Project/Data Connection from the Project menu. When the Select Data Source dialog box appears, click the Machine Data Source tab, choose the HomePage data source, and click OK. Visual InterDev will add a new data connection to your Web project based on the HomePage data source. This is the database that you will use to display items for sale on the site.

Note that Visual Interdev has added a new tab to your project window, the Data View tab. Click this tab to view the database structure. The database contains three tables—Categories, Products, and Orders—which store all the data for the online catalog.

Double-click the Categories table. The table, shown in Figure 7-4, consists of three fields: CategoryID, CategoryName, and CategoryDescription. Each category will appear on the home page. If you want to add or remove categories, you can simply change the data by using the Visual InterDev data tools, and all changes will be reflected immediately on the home page. You need not rewrite the Web site.

Figure 7-4. The Categories table.

Double-click the Products table, which stores all the product information for the catalog categories. The Products table, shown in Figure 7-5, contains the following fields: ProductID, CategoryID, ProductName, ProductDescription, ProductPrice, and ProductImage. Any single product is associated with a category through the CategoryID field. You can easily add a new product to the database by entering new information and associating it with an existing CategoryID.

The ProductImage field holds the Uniform Resource Locator (URL) for the image of the product. Normally, an image is downloaded rather than stored in the database directly. The site uses the ProductImage data to dynamically load an <IMG> tag with an image.

Figure 7-5. The Products table.

Double-click the Orders table, which is used to capture order information from customers. (See Figure 7-6.) In this project, you will build an order form that populates the database with a new record for each order. You can then examine the contents to fill orders.

Figure 7-6. The Orders table.