The page updates to show data extracted from the database.
View your pages
73
Create a record insert form
The next page you’ll create for the Trio website allows customers to add comments to
the database.
Dreamweaver includes several application objects that help you create web application pages
quickly and easily. You’ll use an application object to create the insert page. The Insert Record
application object creates an HTML form, data fields that correspond to fields in the database,
and the necessary server scripts to create a dynamic page.
Add a Record Insertion Form application object
You can use a Record Insertion Form application object to create a form that allows visitors to
enter data into a database. The application object lets you select which fields to include in the
form, label the fields, and select the types of form objects to insert. When a user enters data in the
form fields and clicks the submit button, a new record is inserted in a database. You can also set a
page to open after a record has successfully been submitted so the submitter knows the database
was updated.
1 In the Files panel, locate the file named comments-add and double-click the file to open it.
The document opens in the Document window.
2 Place the insertion point in the document at the end of the text paragraph in the main column,
after the word possible; then press Enter or Return to place the insertion point where the
application object will be inserted.
3 To add a record insertion object to your page, do one of the following:
■
In the Insert bar’s Application category, select Record Insertion Form Wizard from the
Insert Record pop-up menu.
■
Select Insert > Application Objects > Insert Record > Record Insertion Form Wizard.
The Record Insertion Form dialog box appears.
4 In the Data Source (ColdFusion) or Connection pop-up menu, select connTrio.
5 If a user name and password are associated with the data source or connection, enter them. If
you didn’t provide a user name or password when you set up the data source or connection,
leave these boxes blank.
74
Chapter 7: Tutorial: Developing a Web Application
6 In the Table pop-up menu, make sure COMMENTS is selected.
7 Click the Browse button next to the After Inserting, Go To text box or (for ASP.NET) the On
Success, Go To text box.
8 In the dialog box that appears, select the file named comments-view and then click OK to close
the dialog box.
After the visitor enters a comment, they’ll see the page that displays all the comments. In a
larger-scale web application, you might instead show a page that thanks the visitor for
commenting and tells them that you’ll contact them with an answer soon.
9 Complete the rest of the wizard by following the procedure in the next section.
Create the insert form
In the Form Fields section of the Record Insertion Form wizard, you define the form that a visitor
enters data into.
1 In the Record Insertion Form wizard, remove the fields you don’t want included in the form by
doing the following:
■
Select COMMENT_ID and click the Minus (-) button.
■
Select TELEPHONE and click the Minus (-) button.
■
Select SUBMIT_DATE and click the Minus (-) button.
■
Select ANSWERED and click the Minus (-) button.
2 If you are creating a page for ASP.NET, change the alphabetical order of the form fields by
doing the following:
■
In the Column list, select COMMENTS and click the Down arrow button to position
COMMENTS below LAST_NAME.
■
In the Column list, select EMAIL and click the Down arrow button to position EMAIL
below LAST_NAME.
3 In the Form Fields list, select FIRST_NAME to specify how the field will be displayed in
the form.
4 In the Label text box, type First Name to replace the default text.
This is the label that will appear in the HTML form next to the text box.
5 Set the type of form object for the field by doing one of the following:
■
If you are using ASP.NET, in the Display As pop-up menu accept the default value Text
Field, and in the Submit As pop-up menu change the default value from WChar to
VARCHAR.
■
If you are using a server technology other than ASP.NET, in the Display As pop-up menu
accept the default value Text Field, and in the Submit As pop-up menu accept the default
value Text.
6 Leave the Default Value field empty. For some web applications, you would use this field to set
initial text for the field, to let the user know what kind of information to provide. In this case,
the field label “First Name” makes clear that the visitor is supposed to enter their first name.
Create a record insert form
75
The FIRST_NAME entry should look similar to the following example when you are done.
7 Repeat steps 3 through 6 for the LAST_NAME form field, with a label of Last Name,
displaying as a Text Field and submitting as Text.
8 Repeat steps 3 through 6 for the EMAIL form field, with a label of Email, displaying as a Text
Field and submitting as Text.
9 In the Form Fields list, select COMMENTS.
10 In the Label field, enter Comments.
11 Set the type of form object for the Comments form field by doing one of the following:
■
If you are using ASP.NET, in the Display As pop-up menu select Text Area; then in the
Submit As pop-up menu select VARCHAR.
■
If you are using a server technology other than ASP.NET, in the Display As pop-up menu
select Text Area, and in the Submit As pop-up menu accept the default value Text.
The dialog box should look similar to the following example when you are done:
12 Click OK to close the dialog box and create the record insertion form.
76
Chapter 7: Tutorial: Developing a Web Application
The Record Insertion Form application object is inserted in the document.
13 Save your page.
Copy files to the server
Next, you’ll copy the files you’ve updated to your server. After you copy the files, you’ll view the
insert record page, add a comment or question, and submit the data to test the application.
1 In the Files panel, select comments-add and click the blue Put Files arrow icon to upload the
local file to your server.
2 If Dreamweaver asks whether you want to copy dependent files to the server, select Yes.
Note: With some server models, Dreamweaver creates a Connections folder in your local folder.
You must also copy that folder to your remote server for the web application to work. In the Files