FrontPage Tips by Ward Cameron Enterprises
Take Your Web Site to New Levels

Creating  a Progressive Search Page for Your Database Driven Site

This tutorial is part of a larger discussion on creating interactive search pages with Microsoft FrontPage 2002. Click here to read the entire tutorial

The process involves several steps

1. Searching begins with website design

2. Create a Progressive Search Form

3. Add an All Values option to your Search Form

4. Using Drop-down Menus with Multiple Select

5. Add a Text Search Field Using the DRW

6. Search Multiple Fields in the Same Table

7. Search Multiple Fields or Tables in the Same Database

Step 2 - Creating a Progressive Search Form

This tutorial will teach you how to create a simple step-by-step search form using a drop-down list. Let's begin by creating a simple form designed to help a visitor find a product or supplier from the Northwind database. Later, we'll add ways to customize the form so that they will be able to search for products that are in stock, within a certain price range and perhaps even available in specific colour patterns.

In this first step, you will use the Northwind database to help your site visitors view a list of products available from certain suppliers. To do this, you'll need to create a form with a single drop-down box that lists suppliers. Once your visitor selects a supplier, they will be taken to a second page that lists the products available from that supplier.

If you have not done the  Passing Parameters tutorial, then stop now and complete that tutorial before proceeding. You will need to know how to create drop-down lists and pass their parameter to the results page prior to completing this lesson.

This simple search form allows users to view a list of suppliers, then find the products that each supplier produces, and finally learn details about the individual product. This represents a search form at its simplest. It is possible that many of your search needs, as is the case on MountainNature.com, can be served well with such simple tools - no muss, no fuss, no clutter.

To create the form, begin with a form with a single drop-down list. This will show a list of product suppliers. Selecting one of the suppliers will reveal a second drop-down with a list of products supplied by that company. Selecting a product will take you to a final page with details about the product such as a description.

You can take this progressive approach as far as is necessary. If you need five steps, then the process is the same. With each step, pass the parameters to the next step, and so on, and so on.

Check it out here

Here is how we created it:

1. Create a blank page and add a blank form. Using the Database Results Wizard, add a single drop-down list that shows the supplier. Have it display the supplier but submit the SupplierID. In Step 3 of the Database Results Wizard, select More Options and then Criteria. Select Add and from the drop down select SupplierID=SupplierID. See this description for more details on setting the parameters. In the form properties, select send to other and send the form to step2.asp. Save the form as step1.asp
2. Now, using the Save As command, save the page as step2.asp. On the same form, add another Database Results Wizard below the first. This time, have it show products. Have it display the product name but submit the ProductID. In Step 3 of the Database Results Wizard, add the Criteria SupplierID=SupplierID and ProductID=ProductID. It should look exactly like the first form with the addition of a second drop-down list that shows a list of products. In the form properties, select sent to other and send the form to step3.asp. In step
3. On step2.asp, set the parameter for CompanyName to receive the Company Name parmeter from step1.asp.
4. Back on step1.asp, set the form properties to send to step2.asp and to send the CompanyName parameter.
5. Create a new page and save it as Step3.asp. Using the Database Results Wizard, you'll add an area to show the details of the product that was selected during this process. Under Record Source, select Products and have it display all the fields. In Step 3, select More Options, and Critiera. Select Add and enter the criteria ProductID=ProductID. In Step 4, select List - One Field per Item. This will create a details page that will show the details on the Product selected in the progressive search form.

The end result of this process is to create a progressive series of pages that appear to simply add an additional search term with each step. It is simple AND effective. Your visitors will love you for the clean look. If you create a number of progressive search forms designed to accommodate all of the various ways your visitors will want to search, you will be rewarded with high traffic and equally high repeat visitation.

Setting the Parameters

In step 3 of the Database Results Wizard, select More Options, then Criteria and Add. Make sure that you set SupplierID=SupplierID and ProductID=ProductID. Your Criteria screen should look like the following:

In our next tutorial, we'll show you how to add an All Values Option to your search form. Click here to read it now