Creating the My Account Page Using ASP

Team-Fly

---

	Macromedia® DreamWeaver® MX Unleashed By Matthew Pizzi, Zak Ruvalcaba
	Table of Contents
	Chapter 29.  Modifying the Database

---

Now that you've added the functionality for your customers to insert their information into the database, you'll want to add more functionality to allow them to modify it. Suppose a customer moved to a new location and you shipped their product to their old address. You can imagine the confusion. Fortunately, Dreamweaver MX provides a behavior in the Update Record server behavior that enables you to develop a page for user administrative purposes.

Using dynamic form objects in conjunction with the Update Record server behavior, users will be able to see the information that resides in the database within editable form objects. After your customers edit the appropriate information, they need only to submit the form to update the information that lies within the database.

Creating the My Account Form

Because all the information will be placed into form objects, the My Account form will be constructed much the same way that the "register.asp" form was. To create the My Account form, follow these steps:

1. Create a new page from the WebStore template by selecting New from the File menu; then select the Advanced tab and select the WebStore template.

2. Change the Header editable region to My Account and replace the Content editable region by inserting a new form.

3. Change the action on the form to "myaccount.asp".

   TIP

   You can view the outline of the form by selecting the View Option button from the toolbar; then select Visual Aids and click Invisible Elements.

4. Copy the entire table from the register.asp page.

5. Paste the table into the form you just created within the My Account page. You will not need to change the names of any form objects.

6. Save the page as "myaccount.asp" and test it in the browser.

Working with Dynamic Form Elements

Now that you have the My Account form created, you will want to make all those form objects dynamic, meaning that when the page is loaded, text from the database automatically appears within them.

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

• Dragging a field from the recordset onto the form object.

• Using the Dynamic Form Elements server behaviors set.

• Select the form object and click the lightning bolt icon within the Properties Inspector to create a binding.

Either one of these three methods will do the job. Dragging an item from the recordset into the form object is probably 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 process outlined next:

1. Insert a new row into your table just below Last Name. Create a new caption for Customer Number and add a new text field named CustomerID. This field will be used later so that Dreamweaver knows which record it has to update. You may also want to add the Disabled attribute to the tag so that users cannot change the value of this number.

2. Next, select Dynamic Text Field from the Dynamic Form Elements server behaviors submenu, as shown in Figure 29.19.

   Figure 29.19. Select Dynamic Text Field from the Dynamic Form Elements submenu.

   

3. The Dynamic Text Field dialog box appears, allowing you to select the form object that you want dynamic. Select "fname" from the list and click the binding icon to set the value as shown in Figure 29.20.

   Figure 29.20. Select the binding icon to set the value of the dynamic form element.

   

4. After the Dynamic Data dialog box appears, you can select the field from the recordset that you want to bind the object to. You have the option to change the data type as well as the capability to modify the code if necessary. Select FirstName, as shown in Figure 29.21. Select OK.

   Figure 29.21. Select the field that you want to bind the object to and click OK.

   

5. The Dynamic Text Field dialog box will now have the value set. Select OK to complete the binding.

6. Figure 29.22 shows the text box with the appropriate field bound to it. Also notice that the properties inspector shows the bind within the Init Val field.

   Figure 29.22. The field should now be bound to the appropriate form object.

   

7. Now that you have your first form object bound, you can create the rest of the form object bindings by using one of the three methods previously described. The only two form objects that you will not be binding are the Credit Card and Expiration Date form objects. Remember, these values are hard-coded in, and unless you want to create a separate table within the database, they will remain the same. When you are finished with the bindings, the result should look similar to Figure 29.23.

   Figure 29.23. Bind all the form objects to complete the My Account page.

   

8. Save your work and run it in the browser. The result should look similar to Figure 29.24. Notice that all the data within the fields are bound according to the data that lies within the database.

   Figure 29.24. All the information within the database will show within the form objects.

   

Updating a User in the Customers Table

Now that you have the form created and all the objects are bound to the appropriate data fields, you are ready to add the functionality that enables users to modify their particular information. Remember the CustomerID text field you added into the form? This number will be used to track which customer is modifying information. If it weren't for this field containing the CustomerID, the Update Record server behavior would not be able to function properly. To add the Update Record functionality, follow the steps outlined next:

1. Select Update Record from the Server Behaviors panel, as shown in Figure 29.25.

   Figure 29.25. Insert the Update Record server behavior.

   

2. The Update Record dialog box enables you to select the connection, the table to update, the recordset to select the records from, the unique key column, and a URL to redirect to after the update takes place. The Update Record dialog box also enables you to match the form objects with the appropriate fields within the database. Remember to select "<ignore>" for the CustomerID. You are bound to receive an error if you try to update this field, as it is an automatically generated number within the database and is the reason you disabled the form object. Figure 29.26 shows the dialog box with all of the necessary modifications.

   Figure 29.26. Complete the modification within the Update Record dialog box.

   

3. Save your work and test it in the browser. Figure 29.27 shows how you can change the original number, which was 5555555555, to 6666666666.

   Figure 29.27. Change any of the form objects' default value.

   

4. Click Submit.

Figure 29.28 shows the result of the change within the database.

Figure 29.28. The PhoneNumber field within the database has been updated.

Modify the Code to Update Users' Information in Two Tables

Like the Insert Record server behavior, the Update Record server behavior supports only single table updates. Of course, like the Insert Record server behavior, the Update Record server behavior's code can be modified to accommodate multiple table updates.

1. Begin the process by removing the attached Update Record server behavior.

2. Switch to code view and scroll to the top of the page. You should see the same code as highlighted in Figure 29.29.

   Figure 29.29. The recordset code can be modified to suit your needs.

   

3. The code that you will be seeing simply creates and opens the recordset object. You can modify this code slightly to accommodate the multiple table update. Add the following code:

    Dim rsMyAccount, objConn, cmdSQL  Set objConn = Server.CreateObject("ADODB.Connection") Set rsMyAccount = Server.CreateObject("ADODB.Recordset") objConn = MM_Webstore_STRING cmdSQL = "SELECT Customers.*, CreditCards.* FROM Customers INNER JOIN CreditCards ON Customers.CustomerID=CreditCards.CustomerID WHERE CustomerID=9;" rsMyAccount.Open cmdSQL, objConn, 3, 3 If (Request.Form("btnSubmit") <> "") Then rsMyAccount("FirstName") = Request.Form("fname") rsMyAccount("LastName") = Request.Form("lname") rsMyAccount("Username") = Request.Form("username") rsMyAccount("Password") = Request.Form("password") rsMyAccount("Email") = Request.Form("email") rsMyAccount("PhoneNumber") = Request.Form("phonenumber") rsMyAccount("BillingAddress") = Request.Form("billingaddress") rsMyAccount("BillingCity") = Request.Form("billingcity") rsMyAccount("BillingState") = Request.Form("billingstate") rsMyAccount("BillingZip") = Request.Form("billingzip") rsMyAccount("ShippingAddress") = Request.Form("shippingaddress") rsMyAccount("ShippingCity") = Request.Form("shippingcity") rsMyAccount("ShippingState") = Request.Form("shippingstate") rsMyAccount("ShippingZip") = Request.Form("shippingzip") rsMyAccount("CreditCardType") = Request.Form("cctype") rsMyAccount("CreditCardExpiration") = Request.Form("ccexpiration") rsMyAccount.Update End If 

4. Save your work and test it in the browser. Add the same information to all the form objects and click Submit. Figure 29.30 shows the changes made to the form objects.

   Figure 29.30. Change the form objects that you want to modify.

   

5. This time, rather than just the customers table receiving the modifications, the creditcards table does as well. Figure 29.31 shows the customers and creditcards tables with the modified data.

   Figure 29.31. Both tables are updated with the appropriate information.

   

If you glance over the code that you customized for the Insert, you can see that the only real differences lie in the removal of the Add New statement, in renaming the recordset, and a filter was added to the SQL statement based on the ID to modify.

---

Team-Fly

Top