Creating a Data Entry HTML Page

See Also

Visual Basic lets you easily create an HTML page that you can use to enter records in an SQL Server database. You can use the DHTML Page designer to create the HTML page and a data environment Command object to establish a connection to the database. You can write code that uses ActiveX Data Objects (ADO) to handle data processing.

This topic shows how to create an HTML page to enter data in the Customers table you created in the "Adding a Table to an SQL Server Database" topic. It shows how to use the data environment and ADO code to pass data from the HTML page to the table.

To create a data entry HTML page

1. Add labels and TextField elements to an HTML page.
   
   
2. Create a data environment Command object.
   
   
3. Add a Button element to the page to append records to a table.
   
   
4. Load the HTML page.

Note   This topic is part of a series that walks you through creating a simple database application that interacts with data in an SQL Server database. It begins with the topic Creating a DHTML Application that Interacts with SQL Server Data.

Add Labels and TextField Elements to an HTML Page

You can use the DHTML Page designer to design your HTML page. Double-click the DHTML Page designer icon in the Project Explorer to bring up the designer. To add a label to a page, simply click in the right pane of the designer window and type the label text. To add a TextField element to the page, select the element from the toolbox and drag it to the right pane of the designer window.

For example, you can create a data entry HTML page that lets you enter address information in the new Customers table in the Pubs sample database. First, type "Customer ID:" in the right pane of the designer window to serve as a label for a Customer ID TextField element, then drag a TextField element next to the label, set its Name and ID properties to CustomerID, and clear its Value property. Repeat the same process for CompanyName, Address, City, Region, PostalCode, and Country elements.

For More Information   For more information on using the DHTML Page designer, see Designing Pages for DHTML Applications in Chapter 2, "Developing DHTML Applications" of Building Internet Applications in the Component Tools Guide.

Create a Data Environment Command Object

As you saw in the "Interact with Data in a Microsoft Jet/Microsoft Access Database" scenario, a data environment Command object can give you access to a table's data. In a DHTML application, a data environment Command object can serve as a logical "middle tier," linking a data source with data displayed on an HTML page.

Create the Command object by clicking the Add Command button on the Data Environment toolbar, or by right-clicking the connection in the Data Environment designer and selecting Add Command from the shortcut menu. You can then specify the Command object's name, the connection it uses, and the source of its data in the Command Properties dialog box. To display this dialog box, right-click the Command object in your data environment and then choose Properties from the menu..

For example, you can create a data environment Command object that provides access to the new Customers table in the Pubs sample database. Set the following properties, using the connection to the Pubs sample database that you created in the "Adding a Table to an SQL Server Database" topic:

To enable updating of records in the Customers table, change the default lock type used by the command. Click the Advanced tab in the Command Properties dialog box and set the Lock Type property to Optimistic.

For More Information   For more information on creating a data environment Command object, see Command Objects in "About the Data Environment Designer."

Add a Button Element to the Page to Append Records to a Table

To provide a way to append the data entered on the HTML page to a table, you can add a Button element to the HTML page by dragging a Button element to the right pane of the DHTML Page designer. For example, you can add a Button element that appends address information to the Customers table. First, drag a Button element to the right pane of the designer window, and then set its name and id properties to AddCustomer.

Using the data environment and ADO, you can easily append records to a table in an SQL database. Refer to the data entered in an HTML page's TextField elements using the element's Value property, then use ADO code to append the data to the corresponding field in the table. The recordset underlying a data environment Command object can provide the "middle tier" between the table and the HTML page.

For example, to enable the data entry HTML page for the new Customers table in the Pubs sample database, add the following code to the onclick event procedure for the DHTML Page object's AddCustomer Button element:

Private Function AddCustomer_onclick() As Boolean

   ' Run the Customers Command object.
   MyDataEnvironment.Customers

   ' Append values from the DHTML Page object's elements
   ' to the command's underlying recordset.
   With MyDataEnvironment.rsCustomers
      .AddNew
      !CustomerID = CustomerID.Value
      !CompanyName = CompanyName.Value
      !Address = Address.Value
      !City = City.Value
      !Region = Region.Value
      !PostalCode = PostalCode.Value
      !Country = Country.Value
      .Update
      .Close
   End With

   ' Clear the elements.
   CustomerID.Value = ""
   CompanyName.Value = ""
   Address.Value = ""
   City.Value = ""
   Region.Value = ""
   PostalCode.Value = ""
   Country.Value = ""

End Function

For More Information   For more information on using ADO, see ADO, DAO and RDO in Visual Basic.

Load the HTML Page

To view the finished page in Internet Explorer, press F5 or click the Start button on the toolbar. You can also explicitly make a dynamic-link library and HTML page for the project by setting properties on the Make tab of the Project Properties dialog box, then selecting Make .dll from the File menu.

For More Information   For more information on testing your DHTML applications, see Testing Your DHTML Application in Chapter 2, "Developing DHTML Applications" in Building Internet Applications in the Component Tools Guide.

Step by Step

This topic is part of a series that walks you through creating a simple DHTML application that interacts with data in an SQL Server database.