End User Recipe: Editing the User Profile

When the user selects Update Profile from the login confirmation page, the application we are about to build is displayed. On this page are all the fields previously seen in the Add User file. The Dreamweaver server behavior Update Record is used here, and we'll also implement a Cancel button to allow the user to back out of the update operation gracefully.

Step 1: Implement Page Design

Let's begin by building the basic page.

1. Open a new dynamic page, either constructing one by hand or deriving one from a template.

   In the UserLogin folder, locate the folder for your server model and open the edit_profile page found there.

2. Add a table to the content region of your page to contain the interface elements for the application.

   From the Snippets panel, drag the Recipes > UserLogin > Wireframes > Edit Profile - Wireframe snippet into the Content editable region.

3. Within the table, insert the form and any necessary form elements for the application. You'll need five text fields one for each of the fields (First Name, Last Name, User Name, Password and Email Address) as well as two buttons, one for submitting the update and another for canceling the action.

   Place your cursor in the row below the words EDIT PROFILE in the second cell and insert the Recipes > UserLogin > Forms > Edit Profile - Form snippet [r1-14].

   
   

   Figure r1-14.

   

   
   

4. ColdFusion and PHP Users: These server models require a unique record ID for the Update Record server behavior to work properly. In these situations, a hidden form field is used to convey the needed data.

   ColdFusion and PHP developers should drag a Hidden Form Field from the Forms category of the Insert bar and name it UserID.

Step 2: Add Database Components

To build the recordset for this page, we will again filter the Users table on the session variable previously created, UserID.

1. From the Server Behaviors panel, choose Add (+) and select Recordset (Query).

2. In the simple view of the Recordset panel, give the recordset a meaningful name.

   Enter Users in the Recordset field.

3. Choose the connection for your data source.

   Select Recipes from the Connection list.

4. Choose the desired table.

   Select Users from the Table list.

5. Keep the Columns option set to All.

6. In the Filter area of the Recordset dialog, set the four Filter list elements like this:

   

   Again, this filter limits the recordset to a single record that of the one currently logged in.

7. Leave the Sort option set to None.

8. Click OK to confirm your choices and close the dialog.

9. Save the page when you're done.

Step 3: Data Binding Process

With our recordset defined, we're ready to bind the data from the recordset to the individual form elements on the page. Each of the text fields is bound to a separate data column.

Note

PHP and ColdFusion users will also need to populate the Hidden Form field with the session variable.

1. In the Bindings panel, expand the recordset entry so that all data columns display.

2. Drag each of the following data columns over the corresponding text field:

   • Drag column UserFirstName to field FirstName.

   • Drag column UserLastName to field LastName.

   • Drag column UserName to field UserName.

   • Drag column Password to field Password.

   • Drag column UserEmail to field Email Address.

3. Leave the default formatting for all dynamic text fields.

When you're done, all the elements in the form should display a dynamic entry [r1-15].

Figure r1-15.

This next step is for ColdFusion and PHP users only: Both server models require that a unique ID be used in conjunction with the Update Record server behavior. For this page, this value is contained in the session variable, UserID. We'll make it available to the server behavior by embedding the session variable in the hidden form element.

1. Select the desired form element.

   Choose the UserID hidden form element.

2. Bind the session variable to the element.

   Choose the lightning bolt symbol next to the Value field in the Property inspector to open the Dynamic Data dialog.

   In the Dynamic Data dialog, expand the Session Variable node and choose UserID.

   Click OK to close the dialog.

3. Save your page.

Step 4: Update User Profile

The essential task of this page modifying an existing record in a data source is handled by a Dreamweaver server behavior, Update Record. After the record has been modified, the confirmation page is reloaded.

After the server behavior is applied, make sure the <form> tag is selected and take a look at the Property inspector. Notice that the action is set to server-side code: <%=MM_editAction%> for ASP, <cfoutput>#CurrentPage#</cfoutput> for ColdFusion, and <?php echo $editFormAction; ?> for PHP. You'll see the same generic code variable in all of Dreamweaver's server behaviors that modify a data source: Add Record, Update Record, and Delete Record.

For ASP

1. From the Server Behaviors panel, chose Add (+) and select Update Record to display the dialog.

2. Select the connection to the data source.

   Choose Recipes from the Connection list.

3. Choose the table containing the user data.

   From the Table To Update list, select Users.

4. Select the recordset from which to get data source fields.

   Set the Select Record From field to Users.

5. Set the primary key for the recordset.

   From the Unique Key Column list, choose UserID and make sure that the Numeric option is checked.

6. Enter the page you want the users to see after successfully registering.

   In the After Inserting, Go To field, select the Browse button and locate the protected_page file for your server model.

7. Choose the form on the page from which the values are to be taken.

   Set the Get Values From field to EditProfile.

8. For the form elements shown in the list, set each one to its equivalent in the data source. All form elements should be submitted as text:

   Set form element FirstName to field UserFirstName as Text.

   Set form element Lastname to field UserLastName as Text.

   Set form element UserName to field UserName as Text.

   Set form element Password to field UserPassword as Text.

   Set form element EmailAddress to field UserEmail as Text.

9. When you're done, click OK to close the dialog and insert the behavior.

10. Save your page.

For ColdFusion and PHP

1. From the Server Behaviors panel, choose Add (+) and select Update Record.

2. In the Update Record dialog, choose the current form.

   Select Users from the Submit Values From list.

3. Select your data source from the list.

   Choose Recipes from the Data Source list.

4. Enter your username and password, if needed.

5. Select the table in the data source to insert into from the list.

   Choose Users from the Insert Into Table list.

6. Set the data source fields to their corresponding form elements.

   As the Primary Key, UserID selects the record using FORM.UserID as a Numeric (Integer in PHP) type.

   Make sure UserAccess does not get a value.

   Set UserFirstName to get its value from the FORM.FirstName form element as Text.

   Set UserLastName to get its value from the FORM.Lastname form element as Text.

   Set UserName to get its value from the FORM.UserName form element as Text.

   Set UserPassword to get its value from the FORM.Password form element as Text.

   Set UserEmail to get its value from the FORM.EmailAddress form element as Text.

   Make sure UserRegDate does not get a value.

7. In the After Inserting, Go To field, enter the path to the file you want displayed after the record is updated.

   In the After Inserting, Go To field, select the protectedpage file for your server model.

8. Check your entries to verify that they are correct; if so, click OK.

9. Save your page.

Step 5: Cancel the Update

Here's a user-friendly addition that takes little effort to implement: a Cancel button. How do you cancel a server-side action that hasn't taken place yet? In this case, a little bit of JavaScript does the trick.

1. Select the Cancel form button.

2. From the Behaviors panel, select Add (+) and choose Call JavaScript.

3. In the Call JavaScript dialog, enter the following code:

   history.back();

4. When you're done, click OK to close the dialog.

5. Save the page.

Although it's true that users could just as well click the Back button on their browsers, it's also true that you want to make user experience as clear as possible.