MS FrontPage —

Creating a Database Interface

FrontPage makes it easy to let your site visitors get their hooks into your data. To get started, just follow these steps:

  1. Launch the Database Interface Wizard.

    Select File » New and, within the New task pane, click "More Web site templates." Since the Database Interface Wizard is a Web site wizard, FrontPage gives you the option of creating a new site or placing the wizard within the site you already have open in FrontPage. One advantage to placing it within the open site is that you'll have access to any database connections you've already created.

    • If you want to create database interface pages within the site you have open in FrontPage, turn on the "Add to current Web site" checkbox.

    • If the interface application will be its own Web site, enter a network location path or Web address in the Location field, under Options. For instance, you may want to create this application in a subsite that you can set permissions on. (Pop back to Planning Your Web Site's Structure to read about subsites.)

    Select the Database Interface Wizard and click OK, or double-click the Database Interface Wizard. The first wizard screen appears.

  2. Select the Web page technology you want to use.

    Under "FrontPage has detected that your page will display best using," choose the ASP or ASP.NET radio button to tell FrontPage what program to use to present the database information. FrontPage pretends to take a guess here, but it actually "detects" nothing. You must select either the ASP or ASP.NET radio button. Make sure the one you choose is available on your Web server. ASP is the more common and readily available of the two, but with this wizard, using ASP.NET offers one advantage: the wizard generates the Database Editor Web page as a single Web page. The ASP method uses frames (Frames) to display record information alongside the table to which it belongs. (At the end of this tutorial, you'll see what the Database Editor page looks like.)

  3. Select the database connection you want to use.

    • Create a new Microsoft Access database within your site. Choose this option if you want FrontPage to create a new database (which you'll design in later wizard screens). As you can tell from the name of this selection, Access is your only choice for database file format.

    • Use an existing database connection. Select this option to use a database connection that you already established within your Web site. After you click this option, select the connection from the drop-down list.

    • Connect to an external database. Select this option if you have a database that you've not yet connected to your FrontPage Web site.

    • Use a sample database. If you're testing out the capabilities of the Database Interface Wizard, you can use the sample Northwind database (Working with Databases) that comes with FrontPage. The program creates the database connection for you.

    Once you've made your selections in this wizard screen, click Next.

    If you opted to let FrontPage create a database for you, you'll be prompted to name it. As always, keep the name short and don't include capital letters, spaces, or special characters. Then click Next. After that, skip ahead to step 4.

    The wizard takes a moment to create the connection and tells you when it's finished. Click Next.

  4. Select a data source.

    Select the table you want to display from the drop-down list. You can leave the "Specify a location for the new files" box as is. FrontPage shows you the file path where it'll place the elements that make up your interface application. The folder automatically matches the table name you choose in the field above. Click Next.

  5. Format data display.

    The next wizard prompts you to create Web page form fields to match up with fields in your database.

    If FrontPage is creating an Access database for you, you'll also be able to add columns and configure their form fields.

    To keep your database working correctly, you'll need to do some tweaking here. For starters, FrontPage sets all fields to appear on a page as text boxes (see Figure 17-1).

    Figure 17-1. FrontPage shows you how it will display your form fields on a Web page. To change column order, select a field, and then click Move Up or Move Down.

    If you're going to have visitors entering records, leaving all fields set to text box will mess up your database. That's because each table in a database has a primary key (in Figure 17-1, it's the ProductID field), which your database program automatically generates to give each record a unique identifier. You don't want visitors entering text in this field, so select the primary key field (FrontPage marks it with an asterisk) and click Modify. In the Column type drop-down list, select Autonumber and click OK. When you return to the form field type list, you'll see that FrontPage changed the Column type to autonumber. This means whenever a visitor enters a new product record, the database automatically assigns an ID number. FrontPage also shows nothing in the form field type list. This means the submission form won't contain a ProductID field at all, so visitors won't even see it. (If you need a refresher on database fundamentals, pop back to Working with Databases.)

    You can modify other form fields here as well. For instance, for some fields, you may not want visitors to type in an entry. Maybe you'd like to offer values in a drop-down list instead. To do so, select the field and click Modify to access form field settings (Figure 17-2). Under "Form field input type," select Drop-Down Box, and then click OK.

    When you design form fields in this wizard screen, your work is only partially done. You can set up some basic parameters here, but you'll need to edit the Web form page manually later. For example, say you want to create a drop-down list for the Title field, limiting selections to Mr, Ms, and Dr. You'd change the field format to drop-down list and, beneath that, specify that you want to provide three options. But so far, you don't have any control over what those options are. Later (after you've completed the Database Interface Wizard), you'll need to manually edit this form field within the submission_form.asp page that FrontPage creates for you. You remember how to edit form fields? Rightclick the field, select Form Field Properties, and modify two fields: the name of each choice and the value that selecting it enters in the database. (Creating a Form Manually has more on how to configure form fields.)

    Figure 17-2. This dialog box lets you configure how each column's form field will display on a Web page. Change the format from Text Box to Drop-Down Box or Option Button by making a selection under "Form field input type." If you select Drop-Down Box or Option Button, you can specify the number of options you'll offer. If you want to force visitors to complete a field, turn on the "Field is required" checkbox.

    Once you've configured all your form fields, click Next.

  6. Select pages that you want FrontPage to create.

    Turn on all three checkboxes and click Next.

  7. Password protect your database editor.

    Chances are you'll want to limit access to these new pages you're creating. Otherwise, anyone would be able to access these pages and edit records in your database. If that's the kind of wild-west environment you truly want, just turn on the "Don't protect my database editor" checkbox.

    If you want to limit access to your database, you can force visitors to enter a user name and password to access the interactive pages FrontPage is about to create.

    User names and passwords are case-sensitive. This means a visitor must match exactly whatever text you enter here (for instance, typing capital letters wherever you did). Also, you can enter only one user name and password for all users.

    FrontPage displays one final dialog box telling you what pages it's about to create and where they'll be located.

  8. Click Finish to generate the data interface pages.

    FrontPage works its magic, creating the pages and components visitors will need to interact with your database. To learn more about what you've created, read on to the next section.

Working with Multiple Tables

The steps you just followed easily create a Web application that lets visitors see and edit database records. But maybe you noticed one big drawback: FrontPage limited you to only one table. Your database probably contains multiple tables that you want to let visitors edit. If that's the case, take the steps described next.

Create a database interface as explained above, selecting your first table name. Then, within the same Web site, create another Database Interface Wizard, with one difference: in step 3, select a different table from the list. When you do so, FrontPage creates a new folder underneath the databasename_interface folder (databasename will be the actual name of your database). FrontPage names the subfolder to match the name of the table you choose. Complete the remaining steps for creating the second interface wizard. Create a new database interface like this for each table you want visitors to be able to edit.

The result will be new subfolders (within the databasename_interface folder) named for each table you chose. The illustration shows you how this looks within your folder list. In it, the sample_interface folder (named after the Sample database) contains two subfolders, Products and Employees, each of which represents a table that has an interface application attached to it.

Once you've created all these interfaces, you'll need to tie the pages together so visitors can navigate to all your new ASP pages. If your interface is its own Web site, open the Index1.htm page and create hyperlinks to all your results_ page.asp pages. If your interface is part of a larger site, create or choose any page you wish to tie it all together with clearly labeled links. You'll find the destination ASP pages within their respective folders in the databasename_interface directory.