Adobe Dreamweaver CS3 Unleashed- P25 potx

Field Name Date Type KeyAnd finally, the Departments table, which represents a specific department in which employees can work,resembles the following: Now that you've reviewed the struc

Field Name Date Type Key

And finally, the Departments table, which represents a specific department in which employees can work,resembles the following:

Now that you've reviewed the structure of the tables we'll cover in this chapter, let's begin creating the NewUser Registration form to accommodate the data collection

Note

Remember, most of the steps we'll perform in the next few sections can be performed using anyserver model When nuances appear across technologies, I will point them out The only servermodel that warrants its own section is ASP.NET Starting midway through this chapter, I'll useASP.NET to work through the same examples presented in the first half of the chapter using otherserver models

Creating the New User Registration Form

Most applications, if not all, simulate the fields within a database with HTML form objects Because formobjects allow the user to interact with the web application, they are the perfect channel for collectinginformation and subsequently inserting that information into the database Before you can begin creatingthe New User Registration form, however, you must first create a table to serve as the primary means forstructuring the form objects in a cohesive and usable fashion Begin creating the table by following thesesteps:

1. Begin creating the New User Registration form by creating a new page from a template Choose File,New When the New Document dialog appears, choose the Page from Template category, selectVectaCorpASP (or VectaCorpCFM and VectaCorpPHP depending on the model you're using in thischapter), choose the template titled template, and then click Create

2. Place your cursor in the editable region titled Content, remove the text that exists in the region, and

insert a new form by selecting Insert, Form, Form

3. Let's add our table First, decide how many rows your table will contain A quick count of all thenecessary fields in the Employees table reveals that you need about 10 rows However, you may want

to include a few more to account for a header, a spacer, and a button element A safer number would

be 14 Knowing that, select Insert, Table The Insert Table dialog appears In the dialog, create a tablethat has 14 rows, 2 columns, a width of 450 pixels, and 0 border, cell padding, and cell spacing Click

OK to insert the new table within the form on the page

4. Add all appropriate content for personal information including billing/shipping information and so on tothe table You can merge cells along the way to create the header The result is shown in Figure 25.1

And finally, the Departments table, which represents a specific department in which employees can work,

resembles the following:

Now that you've reviewed the structure of the tables we'll cover in this chapter, let's begin creating the New

User Registration form to accommodate the data collection

Note

Remember, most of the steps we'll perform in the next few sections can be performed using any

server model When nuances appear across technologies, I will point them out The only server

model that warrants its own section is ASP.NET Starting midway through this chapter, I'll use

ASP.NET to work through the same examples presented in the first half of the chapter using other

server models

Creating the New User Registration Form

Most applications, if not all, simulate the fields within a database with HTML form objects Because form

objects allow the user to interact with the web application, they are the perfect channel for collecting

information and subsequently inserting that information into the database Before you can begin creating

the New User Registration form, however, you must first create a table to serve as the primary means for

structuring the form objects in a cohesive and usable fashion Begin creating the table by following these

steps:

1. Begin creating the New User Registration form by creating a new page from a template Choose File,

New When the New Document dialog appears, choose the Page from Template category, select

VectaCorpASP (or VectaCorpCFM and VectaCorpPHP depending on the model you're using in this

chapter), choose the template titled template, and then click Create

2. Place your cursor in the editable region titled Content, remove the text that exists in the region, and

insert a new form by selecting Insert, Form, Form

3. Let's add our table First, decide how many rows your table will contain A quick count of all the

necessary fields in the Employees table reveals that you need about 10 rows However, you may want

to include a few more to account for a header, a spacer, and a button element A safer number would

be 14 Knowing that, select Insert, Table The Insert Table dialog appears In the dialog, create a table

that has 14 rows, 2 columns, a width of 450 pixels, and 0 border, cell padding, and cell spacing Click

OK to insert the new table within the form on the page

4. Add all appropriate content for personal information including billing/shipping information and so on to

the table You can merge cells along the way to create the header The result is shown in Figure 25.1

Figure 25.1 Add all appropriate content to the new table.

[View full size image]

Tip

You can format the table and content in the table as you see fit Feel free to create

styles so that your table and the content within it becomes more attractive

5. You are now ready to begin adding all the form objects for the New User Registration form The

following matrix shows the fields, the appropriate form objects to be inserted, and the unique names to

be given to each of the form objects

DepartmentID Hidden Field departmentid

Headshot Location Text Field headshotloc

BillingShippingAddress Text Field billshipaddress

Field Name Form Object Name

BillingShippingCity Text Field billshipcityBillingShippingState Text Field billshipstateBillingShippingZip Text Field billshipzip

Submit Button SubmitThe result of inserting all these form objects is shown in Figure 25.2

Figure 25.2 Insert all the form objects for the New User Registration page.

[View full size image]

6. Select the hidden field and assign it a default value of 2 in the Property inspector Remember that we'llassume that all users inserted into the Employees table will belong to the Administration departmentwhen they're first created It will be the administrator's responsibility to go back in and change theemployee's corresponding department later

Save the page as register.asp, register.cfm, or register.php (depending on the server model you'reusing) and run it within the browser (We'll cover the ASP.NET version of this page later in the chapter.) Theresult will look similar to Figure 25.3

Figure 25.3 The New User Registration page allows the employee to register for the Vecta Corp

employee store.

BillingShippingCity Text Field billshipcity

BillingShippingState Text Field billshipstate

BillingShippingZip Text Field billshipzip

Submit Button SubmitThe result of inserting all these form objects is shown in Figure 25.2

Figure 25.2 Insert all the form objects for the New User Registration page.

[View full size image]

6. Select the hidden field and assign it a default value of 2 in the Property inspector Remember that we'll

assume that all users inserted into the Employees table will belong to the Administration department

when they're first created It will be the administrator's responsibility to go back in and change the

employee's corresponding department later

Save the page as register.asp, register.cfm, or register.php (depending on the server model you're

using) and run it within the browser (We'll cover the ASP.NET version of this page later in the chapter.) The

result will look similar to Figure 25.3

Figure 25.3 The New User Registration page allows the employee to register for the Vecta Corp

employee store.

Creating the Recordset

Now that you have the New User Registration form created, you are ready to add the insert functionality.Before you can begin adding any server behaviors, however, you'll need to create a new recordset thatrepresents the Employees table To create the recordset, follow these steps:

1. Select the Recordset option from the Bindings panel's Add (+) menu The Recordset dialog appears

2 Give the new recordset the name rsNewEmployee.

3. Choose the connVectaCorp option from the Connection menu

4. Choose the Employees option from the Table menu The completely formatted Recordset dialog shouldresemble Figure 25.4

Figure 25.4 Format the Recordset dialog box accordingly.

5. Click OK The Bindings panel now shows the fields contained in the recordset, also shown in Figure25.5.

Figure 25.5 The Bindings panel lists the fields in the recordset.

Validating the Form

Now that you have the recordset created, you are ready to begin inserting the data into the database Butbefore you begin, you'll want to add functionality that guarantees that the data going into the database isvalid Because the database tables explicitly define data types for each field, you'll want to make sure thatthe data the user enters is the same as what is going to be accepted by the database table; otherwise,errors will occur The Validate Form behavior can be used to trap any errors on the client before a request issent to the server-side application To insert the behavior, follow these steps:

1. Open the Behaviors panel by choosing Window, Behaviors Choose the Submit button form object onthe page and select the Validate Form behavior from the Behaviors panel

2. The Validate Form dialog appears Select each of the fields within the Fields list and click the Requiredcheck box Additionally, select the email field from the Field list and choose the Email Address optionbutton The result is shown in Figure 25.6

Figure 25.6 Select the appropriate options from the Validate Form dialog.

[View full size image]

3. Click OK.

Save your work and test the results in the browser by pressing F12 (Option+F12) Typing incorrect data(specifically in the Email text box) or forgetting to type data in all the fields results in an error messagesimilar to the one shown in Figure 25.7

Figure 25.7 An error message is displayed if data is missing or is inconsistent.

Inserting a New User into the Employees Table

Now that you can verify that the data being sent to the database is in fact legitimate, you can build thefunctionality for adding the data to the Employees table To facilitate this process, Dreamweaver provides anInsert Record server behavior that allows for quick and intuitive insertions into the database table of yourchoice To insert a new employee into the Employees table, follow these steps:

1. Place your cursor in the form and select Insert Record from the Add (+) menu of the Server Behaviorspanel The Insert Record dialog appears.

2. Select connVectaCorp from the Connection menu

3. Choose the Employees table from the Insert Into Table menu

4. Leave the After Inserting, Go To text box blank for now The value you enter here will be used as aredirection page after the new user has successfully registered We'll define this in the next section

5. Make sure that the form1 option is selected from the Get Values From menu

6. The form elements selection box enables you to match up a form object with the corresponding field inthe database In most cases, Dreamweaver figures out the match between the text field name on theform and the database table's field name If some do not match, however, the value <Ignore>

appears If this is the case, select the appropriate match from the column drop-down list Refer to thefollowing chart for a reference on which form elements correspond to which field values

As

departmentid DepartmentID Numeric

password Password (Pass in

Access)

Text

billshipaddress BillingShippingAddress Text

billshipcity BillingShippingCity Text

billshipstate BillingShippingState Text

billshipzip BillingShippingZip Text

The completely formatted Insert Record dialog should resemble Figure 25.8

Figure 25.8 Format the appropriate values in the Insert Record dialog.

[View full size image]

7. Click OK The Insert Record server behavior appears in the Server Behaviors panel, and your form ishighlighted in blue (because the insert record functionality is technically considered an invisible

element)

Save your work and test the result in the browser by pressing F12 (Option+F12) Enter values into the textfields and click Submit If everything functions smoothly, the page refreshes itself Remember that therefreshing of the page happens because we didn't identify a page to redirect to after the data from the form

is inserted into the database We'll do that in the next section

To verify that the data was in fact inserted into the Employees table, open your respective database andlook in the Employees table A new user has been created

Note

One of the most common problems I have found when working in Dreamweaver is that of insertingrecords into the database Generally this problem is isolated to the ASP server model using Access.This is one of the areas where errors in the browser occur quite often In most cases, this issue isn't

a problem with Dreamweaver, but rather, it has more to do with the fact that write permissions have

to be enabled for the database If you receive HTTP 500 errors, connection errors, and so on, refer tothe companion website at www.dreamweaverunleashed.com for troubleshooting tips

Creating the Redirection Page

The final step we'll want to perform before we can call the New User Registration page complete is to addthe functionality that will redirect users to a thank-you page of some sort after they've registered You cancreate this functionality by following these steps:

1. While still in the New User Registration page, double-click the Insert Record server behavior The InsertRecord dialog reappears.

2 Enter the value x_newusercreated.asp in the After Inserting, Go To text box If you're working with ColdFusion, enter x_newusercreated.cfm, and if you're working with PHP, enter

x_newusercreated.php The Insert Record dialog should resemble Figure 25.9

Figure 25.9 Add the redirection page as a value in the After Inserting, Go To text

box.

[View full size image]

3. Click OK Save your work

4. Now we'll need to create a new page that represents that redirection page that you just referencedfrom the Insert Record dialog To do this, choose File, New When the New Document dialog appears,choose the Page from Template category, select VectaCorpASP (or VectaCorpCFM and VectaCorpPHPdepending on the model you're using in this chapter), choose the template titled template, and clickCreate

5. In the new page, replace the text Content Goes Here in the Content editable region with the text

Thank you for registering as a new user.

6 Save your page as x_newusercreated.asp, x_newusercreated.cfm, or x_newusercreated.php,

depending on the server model you're working with

That's it! This time, after new users complete registration on the site, they are redirected to this page

Chapter 25 Adding and Modifying Data

IN THIS CHAPTER

Building the Web Store New User Registration Page Using ASP, ColdFusion, or PHP

Creating the My Account Page Using ASP, ColdFusion, or PHP

Building the Web Store New User Registration Page Using ASP.NET

Creating the My Account Page Using ASP.NET

Using Data Objects to Create an Admin Page

One of the primary purposes for developing a dynamic web application is not only to be able to view livedata from your database, but also to modify, add, or delete the data within it The last chapter exposed you

to a key component of web application development: dynamic data Unfortunately, that knowledge can takeyou only as far as being able to physically modify the database when changes need to be made To trulyappreciate the power behind a fully dynamic application you need to develop that application so that contentconstantly changes based on user or administrator input This chapter focuses on creating forms in

Dreamweaver that modify, add, or delete items in the database

Like the rest of the chapters in this book, you can work with the examples in this chapter by downloadingthe files from www.dreamweaverunleashed.com You'll want to save the files for Chapter 25 (not the folder)

in the C:\Inetpub\wwwroot\VectaCorp<technology> directory, where <technology> represents the servertechnology (ASP, ASPX, CFM, PHP) you plan to use Make sure that your site is also properly defined withinDreamweaver, including the appropriate server-side technology you plan to use in the Testing Server

similarly

Note

Most intranet-based web applications won't allow employees within the organization to register asnew users For the most part, employees within an organization are automatically added by an

administrator when the employee comes to work on his or her first day To demonstrate adding,

modifying, and deleting data, however, we'll assume that our Vecta Corp application requires users

to register before they can use the employee store web application

A quick overview of the Vecta Corp database reveals that, to create a new employee, you need to collect

three major pieces of information Initially you need to collect all the employee's personal information andstore that in the Employees table Second, you'd probably want to collect credit card information and storethat in the CreditCards table Finally, you must assign the new employee a department to work in.

Remember that the Departments table is directly related to the Employees table Because this is the case, avalue must be entered for the DepartmentID field in the Employees table if we are to maintain referentialintegrity Realistically, we don't want an employee to assign themselves a department For this reason, we'llassign the new user a default DepartmentID of 2 that represents Administration Later, we'll allow theadministrator to go in (by way of an admin page) and assign a department for a specific user

Note

In this chapter, we'll demonstrate adding data to only the Employees table We'll keep it as simple aspossible With the knowledge you gain in this chapter, adding the functionality to add data to the

CreditCards table on your own will be a snap

Before we begin constructing the new user registration web page, let's review the structure of the tableswith which we'll interact in this chapter Recall that the tables that make up employees' information are theEmployees, CreditCards, and Departments tables

On further inspection of those tables, you'll notice that the following fields are necessary for new employees

to be created in the Employees table:

The following information (which we won't get into in this chapter) must be collected to associate a creditcard with a particular employee:

Field Name Date Type Key

And finally, the Departments table, which represents a specific department in which employees can work,resembles the following:

Now that you've reviewed the structure of the tables we'll cover in this chapter, let's begin creating the NewUser Registration form to accommodate the data collection

Note

Remember, most of the steps we'll perform in the next few sections can be performed using anyserver model When nuances appear across technologies, I will point them out The only servermodel that warrants its own section is ASP.NET Starting midway through this chapter, I'll useASP.NET to work through the same examples presented in the first half of the chapter using otherserver models

Creating the New User Registration Form

Most applications, if not all, simulate the fields within a database with HTML form objects Because formobjects allow the user to interact with the web application, they are the perfect channel for collectinginformation and subsequently inserting that information into the database Before you can begin creatingthe New User Registration form, however, you must first create a table to serve as the primary means forstructuring the form objects in a cohesive and usable fashion Begin creating the table by following thesesteps:

1. Begin creating the New User Registration form by creating a new page from a template Choose File,New When the New Document dialog appears, choose the Page from Template category, selectVectaCorpASP (or VectaCorpCFM and VectaCorpPHP depending on the model you're using in thischapter), choose the template titled template, and then click Create

2. Place your cursor in the editable region titled Content, remove the text that exists in the region, and

insert a new form by selecting Insert, Form, Form

3. Let's add our table First, decide how many rows your table will contain A quick count of all thenecessary fields in the Employees table reveals that you need about 10 rows However, you may want

to include a few more to account for a header, a spacer, and a button element A safer number would

be 14 Knowing that, select Insert, Table The Insert Table dialog appears In the dialog, create a tablethat has 14 rows, 2 columns, a width of 450 pixels, and 0 border, cell padding, and cell spacing Click

OK to insert the new table within the form on the page

4. Add all appropriate content for personal information including billing/shipping information and so on tothe table You can merge cells along the way to create the header The result is shown in Figure 25.1

And finally, the Departments table, which represents a specific department in which employees can work,

resembles the following:

Now that you've reviewed the structure of the tables we'll cover in this chapter, let's begin creating the New

User Registration form to accommodate the data collection

Note

Remember, most of the steps we'll perform in the next few sections can be performed using any

server model When nuances appear across technologies, I will point them out The only server

model that warrants its own section is ASP.NET Starting midway through this chapter, I'll use

ASP.NET to work through the same examples presented in the first half of the chapter using other

server models

Creating the New User Registration Form

Most applications, if not all, simulate the fields within a database with HTML form objects Because form

objects allow the user to interact with the web application, they are the perfect channel for collecting

information and subsequently inserting that information into the database Before you can begin creating

the New User Registration form, however, you must first create a table to serve as the primary means for

structuring the form objects in a cohesive and usable fashion Begin creating the table by following these

steps:

1. Begin creating the New User Registration form by creating a new page from a template Choose File,

New When the New Document dialog appears, choose the Page from Template category, select

VectaCorpASP (or VectaCorpCFM and VectaCorpPHP depending on the model you're using in this

chapter), choose the template titled template, and then click Create

2. Place your cursor in the editable region titled Content, remove the text that exists in the region, and

insert a new form by selecting Insert, Form, Form

3. Let's add our table First, decide how many rows your table will contain A quick count of all the

necessary fields in the Employees table reveals that you need about 10 rows However, you may want

to include a few more to account for a header, a spacer, and a button element A safer number would

be 14 Knowing that, select Insert, Table The Insert Table dialog appears In the dialog, create a table

that has 14 rows, 2 columns, a width of 450 pixels, and 0 border, cell padding, and cell spacing Click

OK to insert the new table within the form on the page

4. Add all appropriate content for personal information including billing/shipping information and so on to

the table You can merge cells along the way to create the header The result is shown in Figure 25.1

Figure 25.1 Add all appropriate content to the new table.

[View full size image]

Tip

You can format the table and content in the table as you see fit Feel free to create

styles so that your table and the content within it becomes more attractive

5. You are now ready to begin adding all the form objects for the New User Registration form The

following matrix shows the fields, the appropriate form objects to be inserted, and the unique names to

be given to each of the form objects

DepartmentID Hidden Field departmentid

Headshot Location Text Field headshotloc

BillingShippingAddress Text Field billshipaddress

Field Name Form Object Name

BillingShippingCity Text Field billshipcityBillingShippingState Text Field billshipstateBillingShippingZip Text Field billshipzip

Submit Button SubmitThe result of inserting all these form objects is shown in Figure 25.2

Figure 25.2 Insert all the form objects for the New User Registration page.

[View full size image]

6. Select the hidden field and assign it a default value of 2 in the Property inspector Remember that we'llassume that all users inserted into the Employees table will belong to the Administration departmentwhen they're first created It will be the administrator's responsibility to go back in and change theemployee's corresponding department later

Save the page as register.asp, register.cfm, or register.php (depending on the server model you'reusing) and run it within the browser (We'll cover the ASP.NET version of this page later in the chapter.) Theresult will look similar to Figure 25.3

Figure 25.3 The New User Registration page allows the employee to register for the Vecta Corp

employee store.

BillingShippingCity Text Field billshipcity

BillingShippingState Text Field billshipstate

BillingShippingZip Text Field billshipzip

Submit Button SubmitThe result of inserting all these form objects is shown in Figure 25.2

Figure 25.2 Insert all the form objects for the New User Registration page.

[View full size image]

6. Select the hidden field and assign it a default value of 2 in the Property inspector Remember that we'll

assume that all users inserted into the Employees table will belong to the Administration department

when they're first created It will be the administrator's responsibility to go back in and change the

employee's corresponding department later

Save the page as register.asp, register.cfm, or register.php (depending on the server model you're

using) and run it within the browser (We'll cover the ASP.NET version of this page later in the chapter.) The

result will look similar to Figure 25.3

Figure 25.3 The New User Registration page allows the employee to register for the Vecta Corp

employee store.

Creating the Recordset

Now that you have the New User Registration form created, you are ready to add the insert functionality.Before you can begin adding any server behaviors, however, you'll need to create a new recordset thatrepresents the Employees table To create the recordset, follow these steps:

1. Select the Recordset option from the Bindings panel's Add (+) menu The Recordset dialog appears

2 Give the new recordset the name rsNewEmployee.

3. Choose the connVectaCorp option from the Connection menu

4. Choose the Employees option from the Table menu The completely formatted Recordset dialog shouldresemble Figure 25.4

Figure 25.4 Format the Recordset dialog box accordingly.

5. Click OK The Bindings panel now shows the fields contained in the recordset, also shown in Figure25.5.

Figure 25.5 The Bindings panel lists the fields in the recordset.

Validating the Form

Now that you have the recordset created, you are ready to begin inserting the data into the database Butbefore you begin, you'll want to add functionality that guarantees that the data going into the database isvalid Because the database tables explicitly define data types for each field, you'll want to make sure thatthe data the user enters is the same as what is going to be accepted by the database table; otherwise,errors will occur The Validate Form behavior can be used to trap any errors on the client before a request issent to the server-side application To insert the behavior, follow these steps:

1. Open the Behaviors panel by choosing Window, Behaviors Choose the Submit button form object onthe page and select the Validate Form behavior from the Behaviors panel

2. The Validate Form dialog appears Select each of the fields within the Fields list and click the Requiredcheck box Additionally, select the email field from the Field list and choose the Email Address optionbutton The result is shown in Figure 25.6

Figure 25.6 Select the appropriate options from the Validate Form dialog.

[View full size image]

3. Click OK.

Save your work and test the results in the browser by pressing F12 (Option+F12) Typing incorrect data(specifically in the Email text box) or forgetting to type data in all the fields results in an error messagesimilar to the one shown in Figure 25.7

Figure 25.7 An error message is displayed if data is missing or is inconsistent.

Inserting a New User into the Employees Table

Now that you can verify that the data being sent to the database is in fact legitimate, you can build thefunctionality for adding the data to the Employees table To facilitate this process, Dreamweaver provides anInsert Record server behavior that allows for quick and intuitive insertions into the database table of yourchoice To insert a new employee into the Employees table, follow these steps:

1. Place your cursor in the form and select Insert Record from the Add (+) menu of the Server Behaviorspanel The Insert Record dialog appears.

2. Select connVectaCorp from the Connection menu

3. Choose the Employees table from the Insert Into Table menu

4. Leave the After Inserting, Go To text box blank for now The value you enter here will be used as aredirection page after the new user has successfully registered We'll define this in the next section

5. Make sure that the form1 option is selected from the Get Values From menu

6. The form elements selection box enables you to match up a form object with the corresponding field inthe database In most cases, Dreamweaver figures out the match between the text field name on theform and the database table's field name If some do not match, however, the value <Ignore>

appears If this is the case, select the appropriate match from the column drop-down list Refer to thefollowing chart for a reference on which form elements correspond to which field values

As

departmentid DepartmentID Numeric

password Password (Pass in

Access)

Text

billshipaddress BillingShippingAddress Text

billshipcity BillingShippingCity Text

billshipstate BillingShippingState Text

billshipzip BillingShippingZip Text

The completely formatted Insert Record dialog should resemble Figure 25.8

Figure 25.8 Format the appropriate values in the Insert Record dialog.

[View full size image]

7. Click OK The Insert Record server behavior appears in the Server Behaviors panel, and your form ishighlighted in blue (because the insert record functionality is technically considered an invisible

element)

Save your work and test the result in the browser by pressing F12 (Option+F12) Enter values into the textfields and click Submit If everything functions smoothly, the page refreshes itself Remember that therefreshing of the page happens because we didn't identify a page to redirect to after the data from the form

is inserted into the database We'll do that in the next section

To verify that the data was in fact inserted into the Employees table, open your respective database andlook in the Employees table A new user has been created

Note

One of the most common problems I have found when working in Dreamweaver is that of insertingrecords into the database Generally this problem is isolated to the ASP server model using Access.This is one of the areas where errors in the browser occur quite often In most cases, this issue isn't

a problem with Dreamweaver, but rather, it has more to do with the fact that write permissions have

to be enabled for the database If you receive HTTP 500 errors, connection errors, and so on, refer tothe companion website at www.dreamweaverunleashed.com for troubleshooting tips

Creating the Redirection Page

The final step we'll want to perform before we can call the New User Registration page complete is to addthe functionality that will redirect users to a thank-you page of some sort after they've registered You cancreate this functionality by following these steps:

1. While still in the New User Registration page, double-click the Insert Record server behavior The InsertRecord dialog reappears.

2 Enter the value x_newusercreated.asp in the After Inserting, Go To text box If you're working with ColdFusion, enter x_newusercreated.cfm, and if you're working with PHP, enter

x_newusercreated.php The Insert Record dialog should resemble Figure 25.9

Figure 25.9 Add the redirection page as a value in the After Inserting, Go To text

box.

[View full size image]

3. Click OK Save your work

4. Now we'll need to create a new page that represents that redirection page that you just referencedfrom the Insert Record dialog To do this, choose File, New When the New Document dialog appears,choose the Page from Template category, select VectaCorpASP (or VectaCorpCFM and VectaCorpPHPdepending on the model you're using in this chapter), choose the template titled template, and clickCreate

5. In the new page, replace the text Content Goes Here in the Content editable region with the text

Thank you for registering as a new user.

6 Save your page as x_newusercreated.asp, x_newusercreated.cfm, or x_newusercreated.php,

depending on the server model you're working with

That's it! This time, after new users complete registration on the site, they are redirected to this page

Creating the My Account Page Using ASP, ColdFusion, or PHP

Now that you've added the functionality for employees to register on the site, you'll want to add morefunctionality to allow them to modify the information they provided Suppose that an employee moved to anew location and you shipped a product to the employee's old address You could imagine the confusion.Fortunately, Dreamweaver provides a behavior in the Update Record server behavior that enables you todevelop a page for user administrative purposes such as these

Using dynamic form objects in conjunction with the Update Record server behavior, employees can see theinformation that resides in the database in editable form objects After employees edit the appropriateinformation, they need only submit the form to update the information in the database

Creating the My Account Form

Because all the information is placed into form objects, the My Account form will be constructed much thesame way that the New User Registration form was To create the My Account form, follow these steps:

1. Begin creating the My Account form by creating a new page from a template To do this, choose File,New When the New Document dialog appears, choose the Page from Template category, select

VectaCorpASP (or VectaCorpCFM or VectaCorpPHP, depending on the model you're using in this

chapter), choose the template titled template and click Create

2. Remove the Content Goes Here text from the editable region With your cursor still in the region, insert

a new form by selecting Insert, Form, Form

3. Let's add a table similar to the one we created in the New User Registration form Choose Insert,Table; the Insert Table dialog appears In the dialog, create a table that has 14 rows, 2 columns, awidth of 450 pixels, and 0 border, cell padding, and cell spacing Click OK to create the table

4. Add all the appropriate content for personal information including billing/shipping information, and so

on within the table You can merge cells along the way to create the header The result will closelyresemble Figure 25.10

Figure 25.10 Insert all the form objects for the My Account page.

[View full size image]

5. You are now ready to begin adding all the form objects for the My Account form The following matrixshows the fields, the appropriate form objects to be inserted, and the unique names to be given toeach of the form objects.

Headshot Text Field headshotloc

BillingShippingAddress Text Field billshipaddress

BillingShippingCity Text Field billshipcity

BillingShippingState Text Field billshipstate

BillingShippingZip Text Field billshipzip

SubmitButton

SubmitThe result of inserting all the form objects is shown in Figure 25.10

Recall that when we created the New User Registration page, we had a Hidden Field for DepartmentID.Because users won't be able to modify the department they belong to, we won't make that value available inthis form (The administrator is responsible for changing this value.) We have, however, replaced the

DepartmentID Hidden Field with an EmployeeID Hidden Field When updates are made to a database, you

as the developer must specify which field will be updated In Chapter 23, "A SQL Primer," we discussed theWHERE clause The value, typically a numeric primary key, is appended to the WHERE clause so that

application logic knows exactly which record in the database table to update This numeric key is the

EmployeeID

Save the page as myaccount.asp, myaccount.cfm, or myaccount.php (depending on the server model

you're using)

Working with Dynamic Form Elements

Now that you have the My Account form created, you'll want to make all those form objects dynamic,meaning that when the page is loaded, corresponding fields from the Employees table automatically appear

in the form objects

In the previous chapter, you learned how to create dynamic text by dragging an item from the recordsetonto the page Dynamic form objects are constructed much the same way in that you can drag an item fromthe recordset (in the Bindings panel) directly onto the form object to which you want to bind that field.Dynamic form objects can be created using one of three methods:

Dragging a field from the recordset (within the Bindings panel) onto the form object

Using the Dynamic Form Elements server behaviors set

Selecting the form object and clicking the lightning bolt icon in the Property inspector to create abinding

Any one of these three methods will do the job Dragging an item from the recordset into the form object isprobably the easiest and quickest way to accomplish the task, but for the sake of learning all the methods,try binding at least a few of the form objects using the following process:

1. Before you can bind text to a form object, you'll have to create a new recordset To do that, select theRecordset option from the Bindings panel's Add (+) menu The Recordset dialog appears

2 Enter the name rsUpdateEmployee, select the connVectaCorp option from the Connection menu,

choose the Employees option from the Table menu, and click OK The new recordset is created

3. Select the Dynamic Text Field option from the Dynamic Form Elements submenu by clicking the Add(+) button from the Server Behaviors panel

4. The Dynamic Text Field dialog appears similar to Figure 25.11, allowing you to select the form objectyou want to make dynamic Select the "name" in form "form1" option from the Text Field menu

Figure 25.11 The Dynamic Text Field dialog allows you to create a binding from the

recordset to the form object.