49
Table of Contents General Topics Overview...................................2 Create a Database with an HTML Form.......................3 Create Your Form....................................3 Create the Database Using the HTML Form.............6 Setting Up Your Database Connection Using ODBC............9 Retrieve Information from a Database with a Form.........16 Setting Up Your Database Connection Using ADO............20 Use a Form to Post Information to a Database.............23 Retrieve Information Using a Hyperlink with Parameters. . .28 Other Advanced Database Examples.........................37 Update a Record....................................37 Add New Record.....................................38 Delete a Record....................................39 Create an Active Hyperlink Using a Database Field........41 Display an Image Using Data from a Database..............42

ASP Web Wizzard

Embed Size (px)

Citation preview

Page 1: ASP Web Wizzard

Table of Contents

General Topics Overview......................................................................................2Create a Database with an HTML Form................................................................3

Create Your Form...................................................................................3Create the Database Using the HTML Form...........................................6

Setting Up Your Database Connection Using ODBC............................................9Retrieve Information from a Database with a Form.............................................16Setting Up Your Database Connection Using ADO.............................................20Use a Form to Post Information to a Database...................................................23Retrieve Information Using a Hyperlink with Parameters....................................28Other Advanced Database Examples.................................................................37

Update a Record...................................................................................37Add New Record...................................................................................38Delete a Record....................................................................................39

Create an Active Hyperlink Using a Database Field............................................41Display an Image Using Data from a Database..................................................42

Page 2: ASP Web Wizzard

General Topics OverviewASP Web Wizard 2000 Overview

FrontPage 2000 offers a robust set of database management tools for you to use in your FrontPage Web. The ASP Web Wizard 2000 is information provided to you by the Microsoft Technical Support team to help you use the database features in FrontPage 2000.

Active Server Pages (ASP) Overview

Active Server Pages (ASP) are used to create dynamic, interactive content for Web sites. In the past, scripts written in popular scripting languages, such as the Visual Basic® Scripting Edition (VBScript), JavaScript™ or Microsoft® JScript™, were processed by the browser. With Active Server Pages, your Web server processes the scripting language commands. So, any browser, regardless of its support for VBScript, JScript, or JavaScript, can utilize ASP and the dynamic output.

ASP Basics

An Active Server Page (ASP) is a text file that has an ".asp" extension. It may contain any combination of the following:

Text HTML tags A scripting language, such as VBScript, JScript, or JavaScript

Publishing a Web site that uses Active Server Pages requires an ASP-compatible Web server, such as Microsoft Internet Information Server (IIS) for Windows NT Server, Microsoft Peer Web Services for Windows NT Workstation, or Microsoft Personal Web Server for Windows 95/98or Windows NT Workstation.

2

Page 3: ASP Web Wizzard

Create a Database with an HTML FormIn FrontPage 2000, you can automatically create an Access database in your FrontPage web using the fields of your HTML form.

Create Your Form

To create your form, follow these steps:

1. On the File menu, point to New, and click Web.

2. In the New dialog box, click to select Empty Web. Type the HTTP location of your new web in the "Specify location of the new web" box. Click OK.

Important! Make sure this is an HTTP location. Disk-based webs will not work with ASP.

3

Page 4: ASP Web Wizzard

Another instance of FrontPage starts with this new web.3. On the File menu, point to New, and click Page. Click to select Normal Page,

and click OK.4. On the Insert menu, point to Form, and click Form.

4

Page 5: ASP Web Wizzard

This will add Submit and Reset buttons surrounded by the form, represented by a dashed-line bounding box.

5. With the insertion point in front of the Submit button, type "First Name: " (without the quotation marks). On the Insert  menu, point to Form, and click One-Line Text Box.

Right-click the text box, and click Form Field Properties. In the Name box, type "FirstName" (without the quotation marks), and click OK. Select the text and the text box.

On the Insert menu, point to Form, and click Label

Press Enter to move the insertion point down two lines.6. Repeat steps 4 and 5 until your form looks similar to the following:

First Name:

Last Name:

City:

State:

5

Page 6: ASP Web Wizzard

Use the following names for the form fields:

LastName, City, State

Create the Database Using the HTML Form

To create the Access database with your HTML form, follow these steps:

1. Right-click anywhere in the form, and click Form Properties.

2. In the Form Properties dialog box, click to select the Send To Database option, and click Options.

3. In the Options for Saving Results to Database dialog box, click Create Database.

6

Page 7: ASP Web Wizzard

You will receive the following message:

Click OK. Click OK until you return to the form.

Save your page as "form.asp" (without the quotation marks) to your FrontPage web.

7

Page 8: ASP Web Wizzard

Setting Up Your Database Connection Using ODBCIn order for FrontPage to function properly with the records in your database, you must firstestablish a connection. There are two ways in which this connection can be established:

A System Data Source Name (DSN) using the ODBC drivers of the Windows operating system.A System DSN must be created using the control panel on the computer running Windows NT Server. This option may not be suitable for all scenarios. However, if you have direct control over the server (you are an Administrator), this may be an appropriate option.

An ActiveX Database Object (ADO) using Visual Basic Scripting Edition (VBScript).The ADO connection does not rely on the ODBC properties to connect to the database. Therefore, this option is more portable. This option is ideal for users who do not have control over the Windows NT Server; for example, if your web site resides on a Web Presence Provider (WPP) or Internet Service Provider (ISP) server.

(NOTE: The employee table in the sample database is centered on a fictitious company named "Volcano Coffee Company".) 

To add the database connection with the ODBC control panel, please see the next section.:

1. Click the Start menu, point to Settings, and click Control Panel.

2. In the Control Panel window, double-click the 32-Bit ODBC icon.

The screen shot below was taken from Windows NT Server 4.0 with Internet Explorer 4.0 and Shell Integration. Your  Control Panel may appear differently.

8

Page 9: ASP Web Wizzard

3. Click the System DSN tab.

9

Page 10: ASP Web Wizzard

4. Click Add.

5. Select the Microsoft Access Driver, and click Finish.

10

Page 11: ASP Web Wizzard

6. In the ODBC Microsoft Access Setup dialog box, click Select.

7. Locate the volcano2000.mdb file provided by the ASP Web Wizard 2000 on your hard disk, select it, and then click OK.

11

Page 12: ASP Web Wizzard

NOTE: This location differs among Web servers. The following is a list of the locations for the volcano2000.mdb:

Microsoft Internet Information Server for Windows NT Server:

C:\InetPub\wwwroot\<name of web>\_private\volcano2000.mdb

Microsoft Peer Web Services for Windows NT Workstation:

C:\InetPub\wwwroot\<name of web>\_private\volcano2000.mdb

Microsoft Personal Web Server for Windows 95:

C:\WebShare\wwwroot\<name of web>\_private\volcano2000.mdb

2. In the ODBC Microsoft Access Setup dialog box, type Volcano for the Data Source Name, and then click OK.

12

Page 13: ASP Web Wizzard

3. In ODBC Data Source Administrator, click OK.

4. With the web open in FrontPage 2000, on the Tools menu, click Web Settings, and click the Database tab.

5. Click Add.

13

Page 14: ASP Web Wizzard

6. In the New Database Connection dialog box, type "Volcano" (without the quotation marks) in the Name box. Click to select the System data source on web server option.

|Click Browse. In the System Data Source On Web Server dialog box, click to select Volcano in the Name column, and click OK. 

Click to select the connection, and click Verify.

After the question mark changes to a check mark, click OK.

14

Page 15: ASP Web Wizzard

Retrieve Information from a Database with a FormIn Microsoft FrontPage 2000, you can use the Database Results Wizard to create pages that let visitors display specific information from your database. To display specific information froma database using criteria based on a form, follow these steps:

1. On the File menu, point to New, and click Page.

2. On the Insert menu, point to Database, and click Results

3. In Step 1 of the Database Results Wizard, click to select the Use an existing database connection button. Click to select Volcano2 from the list.

15

Page 16: ASP Web Wizzard

Click Next.4. In Step 2 of the Database Results Wizard, make sure the Record source option

is selected and Employees  is selected from the list. Click Next.

5. In Step 3 of the Database Results Wizard, click More Options.

16

Page 17: ASP Web Wizzard

6. In the More Options dialog box, click Criteria.

7. In the Criteria dialog box, click Add.

8. In the Add Criteria dialog box, click to select LastName in the Field Name list, and click to select  Equals in the Comparison list.

17

Page 18: ASP Web Wizzard

Click OK.9. In the Criteria dialog box, click OK.

In the More Options dialog box, click OK.

In Step 3 of the Database Results Wizard, click Next.10. Click Next in Step 4 of the Database Results Wizard, and click Finish in Step 5

of the Database Results Wizard.11. On the File menu, click Save As. Save the page as "criteria.asp" (without the

quotation marks).

18

Page 19: ASP Web Wizzard

Setting Up Your Database Connection Using ADOFrontPage 2000 includes a new interface to configure your database - a new database option in the Web Settings dialog box that allows you to set up a wide variety of data sources instantly.

ADO and FrontPage 2000

FrontPage 2000 now manages database connections through ADO (Microsoft® ActiveX® Data Objects). There is no need to manage connections through the ODBC control panel, it is all done through FrontPage 2000. The implementation of a Global.asa file allows access to the database by setting up the server object and accessing the data source all with in the web, using ASP. FrontPage 2000 is not reliant on system DSNs.

ADO is designed as an easy-to-use application level interface to Microsoft's newest and most powerful data access paradigm, OLE DB. OLE DB provides high-performance access to any data source, including relational and non-relational databases, e-mail and file systems, text and graphics, custom business objects, and more. ADO is implemented with a small footprint, minimal network traffic in key Internet scenarios, and a minimal number of layers between the front-end and data source-all to provide a lightweight, high-performance interface. ADO is easy to use because it is called using a familiar metaphor-the OLE Automation interface, available from just about any tool and language on the market today. And since ADO was designed to combine the best features of and eventually replace RDO and DAO, it uses similar conventions with simplified semantics to make it easy to learn for today's developers.

What are the ActiveX Data Objects (ADO)?

ActiveX Data Objects are a language-neutral object model, that exposes data raised by an underlying OLE DB provider. The most commonly used OLE DB provider is the OLE DB provider for ODBC drivers, which exposes ODBC data sources to ADO. FrontPage 2000 uses these data objects to access local and remote data sources.

The ADO objects provide you with the fastest, easiest, and most productive means for accessing all kinds of data sources. The ADO model strives to expose everything that the underlying data provider can do, while still adding value by giving you shortcuts for common operations.

Set Up Your Data Connection

NOTE: This sample web contains the sample database "volcano2000.mdb" in the _private folder.

To set up your database connection using ADO, follow these steps:

19

Page 20: ASP Web Wizzard

1. On the Tools menu, click Web Settings, and then click the Database tab.

2. Click Add.3. In the New Database Connection dialog box, type "Volcano2" (without the

quotation marks) in the Name box. Click to select the File or folder in current Web option.

NOTE: You can use the Network connection to database server option to connect to anSQL server.

4. Click Browse.5. In the Database Files In Current Web dialog box, navigate to the files folder of

your web. Click to select volcano2000.mdb, and click OK.

20

Page 21: ASP Web Wizzard

6. In the New Database Connection dialog box, click OK.7. In the Web Settings dialog box, click Verify.

After the question mark changes to a check mark, click OK.8. In the Web Settings dialog box, click OK.

21

Page 22: ASP Web Wizzard

Use a Form to Post Information to a DatabasePrevious versions of FrontPage required custom ASP script to post information to a database. FrontPage 2000 has expanded its support for database management. To post information to a database using an HTML form, follow these steps:

1. On the File menu, point to New, and click Page.

2. On the Insert menu, point to Form, and click Form.

This will add Submit and Reset buttons surrounded by the form, represented by a dashed-line bounding box.

3. With the insertion point in front of the Submit button, type "First Name: " (without the quotation marks). On the Insert menu, point to Form, and click One-Line Text Box.

22

Page 23: ASP Web Wizzard

Right-click the text box, and click Form Field Properties. In the Name box, type "FirstName" (without the quotation marks), and click OK. Select the text and the text box.

On the Insert menu, point to Form, and click Label

Press ENTER to move the insertion point down two lines.4. Repeat step 3 until your form looks similar to the following:

First Name:     Email Address:

Last Name:     Phone Number:

Title:

City: State:  

Use the following names for the form fields:

LastName, City, State, Email, Phone, Title, City, State

5. Right-click anywhere within the form, and click Form Properties.

23

Page 24: ASP Web Wizzard

6. In the Form Properties dialog box, click the Send to database button, and click Options.

7. In the Options for Saving Results to Database dialog box, click to select Volcano2 in the Database Connection to Use list, and then click the Saved Fields tab.

24

Page 25: ASP Web Wizzard

8. Click to select City in the Form Field column, and click Modify.

9. In the Modify Field dialog box, click OK.10. Repeat steps 8 and 9 for each item in the Form Field column until your Saved

Fields tab looks similar to the following:

25

Page 26: ASP Web Wizzard

11. Click OK.12. On the File menu, click Save As. Save the page as "post.asp" (without the

quotation marks).

26

Page 27: ASP Web Wizzard

Retrieve Information Using a Hyperlink with ParametersIn FrontPage 2000, you can pass information from one page to another as a hyperlink withparameters. You can use this technique to pass information to a page that containsa Database Results Wizard and display specific records from a database.

Create the Hyperlink Page

With the following example, you will create a page that displays the ID number, first name, andlast name of each employee in the database. Using a hyperlink with the ID number, you willpass the ID number as a parameter to another page to display the full record of the individualemployee. To do this, follow these steps:

1. In Folders view, create two new pages. Name these pages "employees.asp" (without the quotation marks) and "record.asp" (without the quotation marks).

2. Open employees.asp in page view.3. On the Insert menu, point to Database, and click Results.

4. In Step 1 of the Database Results Wizard, click to select the Use an existing database connection button. Click to select Volcano2 from the list.

27

Page 28: ASP Web Wizzard

Click Next.5. In Step 2 of the Database Results Wizard, make sure the Record source option

is selected and Employees is selected from the list. Click Next.

28

Page 29: ASP Web Wizzard

6. In Step 3 of the Database Results Wizard, click Edit List.

7. In the Displayed Fields dialog box, click to select all of the items in the Displayed fields list except ID, FirstName, and LastName. Click Remove.

Click OK.8. In Step 4 of the Database Results Wizard, click Next.9. In Step 5 of the Database Results Wizard, click the Display all records together

button, and click Finish.

29

Page 30: ASP Web Wizzard

10. Right-click <<ID>> in the ID column of the results table, and click Hyperlink.11. In the Create Hyperlink dialog box, click to select record.asp, and click

Parameters.12. In the Hyperlink Parameters dialog box, click Add.

13. In the Add Parameter dialog box, click to select ID in the Name list, and click OK.

30

Page 31: ASP Web Wizzard

Click OK until you return to your page.14. Save and close employees.asp.

The <<ID>> will now be a hyperlink. When you view the page in a Web browser, the list of ID numbers will be hyperlinks. When you click an ID number, the ID will be passed to the next page. The next page will display all of the information for this ID number.

Create the Page to Display the Full RecordTo create the page that will display the entire record, follow these steps:

1. Open record.asp.

2. On the Insert menu, point to Database, and click Results.

3. In Step 1 of the Database Results Wizard, click to select the Use an Existing Database Connection option. Click to select Volcano2 from the list.

31

Page 32: ASP Web Wizzard

Click Next.4. In Step 2 of the Database Results Wizard, click Record Source..

Click Next.5. In Step 3 of the Database Results Wizard, click More Options.

32

Page 33: ASP Web Wizzard

In the More Options dialog box, click Criteria.

In the Criteria dialog box, click Add.

33

Page 34: ASP Web Wizzard

In the Add Criteria dialog box, click to select ID in the Field Name list, and click to select Equals in the Comparison list.

Click OK. 6. In Step 4 of the Database Results Wizard, click Next.7. In Step 5 of the Database Results Wizard, click to clear the Add Search Form

check box, and click Finish.

34

Page 35: ASP Web Wizzard

8. Save the page.

35

Page 36: ASP Web Wizzard

Other Advanced Database ExamplesYou can perform some advanced queries with the Database Results Wizard andsome custom query using SQL (Structured Query Language). The following are examples to illustrate what you can do with Active Server Pages.

Update a Record

In this example, you need to create the OldName and NewName fields. The query that is used will change the last name of an employee based on these two fields.

Create Your Form

1. Create a new page, and name it "adv_forms1.htm" (without the quotation marks).

2. Create a form similar to the following. (Or you can copy and paste this form into your new page. If you do this, make sure you paste the dashed box surrounding the form fields.)

Old Name:     

New Name:     

Create the Page to Update a Record

In this example you will use SQL to update the last name of an employee. To do this, follow these steps:

1. Right-click your form, and click Form Properties.

2. Click to select the Send to Other option, and click Options.3. In the Action box, type "updaterecord.asp" (without the quotation marks). You

will create this page in the next few steps.4. Save the page with the form.5. Create a new page, and name it updaterecord.asp.6. On the Insert menu, point to Database, and click Results.7. In Step 1 of the Database Results Wizard, click to select the Use an existing

database connection, and click to select Volcano2 from the list. Click Next.

36

Page 37: ASP Web Wizzard

8. Click to select the Custom Query option, and click Edit.9. In the SQL Statement box, type the following SQL statement:

UPDATE DISTINCTROW Employees SET LastName='::NewName::'WHERE LastName='::OldName::' 

10. Click OK. Click Next until you can click Finish, then click Finish.

Add New Record

Create Your Form

1. Create a new page, and name it "adv_forms2.htm" (without the quotation marks).

2. Create a form similar to the following (or you can copy and paste this form into your new page, if you do this, make sure you paste the dashed box surrounding the form fields):

First Name:     Email Address:

Last Name:     Phone Number:

Title:

City: State:

Create the Page to Add New Record

To make this form add a new record to your database, follow these steps:

1. Right-click your form, and click Form Properties.

2. Click to select the Send to Other option, and click Options.3. In the Action box, type "addrecord.asp" (without the quotation marks). You will

create this page in the next few steps.4. Save the page with the form.5. Create a new page, and name it addrecord.asp.6. On the Insert menu, point to Database, and click Results.7. In Step 1 of the Database Results Wizard, click to select the Use an Existing

Database Connection, and click to select Volcano2 from the list. Click Next.

37

Page 38: ASP Web Wizzard

8. Click to select the Custom Query option, and click Edit.9. In the SQL Statement box, type the following SQL:

        INSERT INTO Employees (LastName, FirstName, Email, Phone, Title, City, State)             VALUES ('::LastName::', '::FirstName::', '::Email::', '::Phone::', '::Title::', '::City::', '::State::')

10. Click OK. Click Next until you can click Finish, then click Finish.

Delete a Record

In this example, you need only to create the FirstName and LastName fields. The SQL statement that is used will delete a record based on these two fields.

Create Your Form

1. Create a new page, and name it "adv_forms3.htm" (without the quotation marks).

2. Create a form similar to the following.

First Name:     

Last Name:     

Modify Form to Delete a Record

To make this form delete a specific record, follow these steps:

1. Right-click your form, and click Form Properties.

2. Click to select the Send to Other option, and click Options.3. In the Action box, type "deleterecord.asp" (without the quotation marks). You

will create this page in the next few steps.4. Save the page with the form.5. Create a new page, and name it deleterecord.asp.6. On the Insert menu, point to Database, and click Results.7. In Step 1 of the Database Results Wizard, click to select the Use an existing

database connection, and click to select Volcano2 from the list. Click Next.8. Click to select the Custom Query option, and click Edit.9. In the SQL Statement box, type the following SQL statement:

       DELETE DISTINCTROW FirstName        FROM Employees

38

Page 39: ASP Web Wizzard

        WHERE (FirstName='::FirstName::')        AND (LastName='::LastName::')

10. Click OK. Click Next until you can click Finish, then click Finish.

39

Page 40: ASP Web Wizzard

Create an Active Hyperlink Using a Database FieldIn FrontPage 2000, you can create a hyperlink based on database field data. The sampledatabase volcano2000 has a field called URL. You can use this to create a table of hyperlinks.

To do this, follow these steps:

1. Create a new page, and name it "emp_links.asp" (without the quotation marks).

2. On the Insert menu, point to Database, and click Results.3. In Step 1 of the Database Results Wizard, click the Use an existing database

connection button, and click to select Volcano2 from the list. Click Next.4. In Step 2 of the Database Results Wizard, make sure the Record source option

is selected and Employees is selected from the list. Click Next.5. In Step 3 of the Database Results Wizard, click Edit List.6. In the Displayed Fields dialog box, click to select all of the items in the

Displayed Fields list except for First Name, LastName, and URL, and click Remove.

7. In Step 4 of the Database Results Wizard, click Next.8. In Step 5 of the Database Results Wizard, click to select the Display all records

together option, and click Finish.9. Right-click <<URL>> in the URL column of the results table, and click

Hyperlink.10. In the Create Hyperlink dialog box, click Parameters.11. In the Hyperlink Parameters dialog box, clear the Path box.12. Click Insert Field Value, and click to select URL.13. To return to your Web page, click OK twice. View your page in your Web

browser.

40

Page 41: ASP Web Wizzard

Display an Image Using Data from a Database With FrontPage 2000, you can use information from a field in a database to display images on your Web page. 

The sample database contains a column called Image. This field contains a file name for an image. You can use this information to display this image.

NOTE: Three images that you can use for this example are located in the Images folder. They are animal1.gif, animal2.gif, and animal3.gif.

To display an image using data from a database, follow these steps:

1. Create a new page, and name it "displayimages.asp" (without the quotation marks).

2. On the Insert menu, point to Database, and click Results.3. In Step 1 of the Database Results Wizard, click the Use an existing database

connection button, and click to select Volcano2 from the list. Click Next.4. In Step 2 of the Database Results Wizard, make sure the Record Source option

is selected and Employees is selected from the list. Click Next.5. In Step 3 of the Database Results Wizard, click Edit List.6. In the Displayed Fields dialog box, click to select all of the items in the

Displayed Fields list except for First Name, LastName, and Image, and click Remove.

7. In Step 4 of the Database Results Wizard, click Next.8. In Step 5 of the Database Results Wizard, click to select the Display all records

together option, and click Finish.9. Locate the database column value that reads "<<Image>>" and delete it.10. In the table cell that you just removed the column value from, insert the

animal1.gif picture from the images folder by using the Picture command on the Insert menu. This places the lion image in the table.

11. Right-click the image you just inserted, and click Picture Properties. 12. Under Picture Source, click Browse, and then click Parameters.13. In the path field, remove the current path and then click Insert Field Parameter

and select Image.14. Click OK three times. You see a small broken image icon in the column under

PicName.15. Save the page as show.asp on the File menu.

41

Page 42: ASP Web Wizzard

© 1999 Microsoft and/or its suppliers. All rights reserved. Terms of Use.

42