Creating the New User Registration Page Using ASP, ColdFusion, or PHP
Like most web applications, a traditional web store requires a page that allows visitors to register as new users and, ultimately based on certain permissions, to navigate the site, view items, and purchase items from the site based on those permissions or credentials. Our Dorknozzle employee store will function similarly.NOTEMost Intranet-based web applications won't allow employees within the organization to register as new users. For the most part, employees within an organization are automatically added by an administrator when the employee comes to work on the first day. To demonstrate adding, modifying, and deleting data however, we'll assume that our Dorknozzle application requires users to register before they can use the employee store web application.A quick overview of the Dorknozzle database reveals that, in order to create a new employee, you need to collect three major pieces of information. Initially we need to collect all the employee's personal information and store that in the Employees table. Second, we'd probably want to collect credit card information and store that 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, a value must be entered for the DepartmentID field in the Employees table if we are to maintain referential integrity. Realistically, we don't want an employee to assign themselves a department. For this reason, we'll simply assign the new user a default DepartmentID of 2 that represents Administration. Later, we'll allow the administrator to go in (by way of an admin page) and assign a department for a specific user.NOTEBecause of limitations on the length of this chapter, we won't demonstrate adding data to both the Employees and CreditCards tables. We'll keep it as simple as possible and demonstrate inserting data into only the Employees table. With the knowledge you learn in this chapter, adding the functionality to add data to the CreditCards table will be a snap.Before we begin constructing the new user registration web page, let's review the structure of the tables with which we'll interact in this chapter. Recall that the tables that make up employees' information are the Employees, 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:
Field Name | Date Type | Key |
---|---|---|
EmployeeID | AutoNumber | PK |
DepartmentID | Number | FK |
Name | Text | N/A |
Username | Text | N/A |
Password(Pass in Access) | Text | N/A |
Text | N/A | |
Phone | Text | N/A |
Headshot | Text | N/A |
BillingShippingAddress | Text | N/A |
BillingShippingCity | Text | N/A |
BillingShippingState | Text | N/A |
BillingShippingZip | Text | N/A |
Field Name | Date Type | Key |
---|---|---|
CreditCardID | AutoNumber | PK |
EmployeeID | Number | FK |
Type | Text | N/A |
Number | Text | N/A |
Expiration | Date/Time | N/A |
Field Name | Date Type | Key |
---|---|---|
DepartmentID | AutoNumber | PK |
Department | Text | N/A |
Creating the New User Registration Form
Most applications, if not all, simulate the fields within a database wit218 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. From the File menu, select New, navigate to the Templates tab, and select the template named Template from the site you're working with. | |||||||||||||||||||||||||||||||||||||||
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 26.1.Figure 26.1. Add all appropriate content to the new table.[View full size image] | |||||||||||||||||||||||||||||||||||||||
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.
Figure 26.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 Properties 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 26.3.
Figure 26.3. The New User Registration page allows the employee to register for the Dorknozzle employee store.
[View full size image]
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 that represents 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 connDorknozzle option from the Connection menu. |
4. | Choose the Employees option from the Table menu. The completely formatted Recordset dialog should resemble Figure 26.4.Figure 26.4. Format the Recordset dialog box accordingly. |
5. | Click OK. The Bindings panel now shows the fields contained in the recordset, also shown in Figure 26.5.Figure 26.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. But before you begin, you'll want to add functionality that guarantees the data going into the database is valid. Because the database tables explicitly define data types for each field, you'll want to make sure that the 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 is sent 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 on the page and select the Validate Form behavior from the Behaviors panel. |
2. | The Validate Form dialog appears. Choose E-mail Address for the E-mail field and choose Required for all the other fields. The result is shown in Figure 26.6.Figure 26.6. Select the appropriate options from the Validate Form dialog. |
3. | Click OK. |
Save your work and test the results in the browser by pressing F12. Typing incorrect data (specifically in the Email text box) or forgetting to type data in all the fields results in an error message similar to the one shown in Figure 26.7.
Figure 26.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 now build the functionality for adding the data to the Employees table. To facilitate this process, Dreamweaver provides an Insert Record server behavior that allows for quick and intuitive insertions into the database table of your choice. 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 Behaviors panel. The Insert Record dialog appears. | ||||||||||||||||||||||||||||||||||||||||||||||||||
2. | Select connDorknozzle from the Connection menu.NOTEDepending on the server model you decide to use, the Insert Record dialog looks slightly different. Don't worry about the differences because all the functionality is equally represented across server models. It's merely the ordering of the features that's different. | ||||||||||||||||||||||||||||||||||||||||||||||||||
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 a redirection 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 in the database. In most cases, Dreamweaver figures out the match between the text field name on the form and the database table's field name. If some do not match however, the value <Ignore> appears. If this is the case, simply select the appropriate match from the column drop-down list. Refer to the following chart for a reference on which form elements correspond to which field values.
Save your work and test the result in the browser by pressing F12. Enter values into the text fields and click Submit. If everything functions smoothly, the page refreshes itself. Remember that the refreshing 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 and look in the Employees table. A new user should be created similar to Figure 26.9. Figure 26.9. The values from the form should go directly into the Employees table.[View full size image] Creating the Redirection PageThe final step we'll want to perform before we can call the New User Registration page complete is to add the functionality that will redirect the user to a thank-you page of some sort after they've registered. You can create this functionality by following these steps:
That's it! This time, after a new user completes registration on the site, they are redirected to this page. |