Adobe Dreamweaver CS3 Unleashed- P25 potx

Field Name Date Type Key Number Text N/A Expiration Date/Time N/A And finally, the Departments table, which represents a specific department in which employees can work, resembles the following: Field Name Date Type Key DepartmentID AutoNumber PK Department Text N/A 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. Number Text N/A Expiration Date/Time N/A And finally, the Departments table, which represents a specific department in which employees can work, resembles the following: Field Name Date Type Key DepartmentID AutoNumber PK Department Text N/A 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. Field Name Form Object Name DepartmentID Hidden Field departmentid Name Text Field name Username Text Field username Password Text Field password Email Text Field email Phone Text Field phonenumber Headshot Location Text Field headshotloc BillingShippingAddress Text Field billshipaddress Field Name Form Object Name BillingShippingCity Text Field billshipcity BillingShippingState Text Field billshipstate BillingShippingZip Text Field billshipzip Submit Button Submit The 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. [View full size image] BillingShippingCity Text Field billshipcity BillingShippingState Text Field billshipstate BillingShippingZip Text Field billshipzip Submit Button Submit The 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. [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 connVectaCorp option from the Connection menu. 4. Choose the Employees option from the Table menu. The completely formatted Recordset dialog should resemble 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 Figure 25.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. But before you begin, you'll want to add functionality that guarantees that 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. Select each of the fields within the Fields list and click the Required check box. Additionally, select the email field from the Field list and choose the Email Address option button. 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 message similar 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 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 connVectaCorp from the Connection menu. Note Depending 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, 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. Form Element Column Submit As departmentid DepartmentID Numeric name Name Text username Username Text password Password (Pass in Access) Text email Email Text phonenumber Phone Text headshotloc Headshot 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 is highlighted 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 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 has been created. Note One of the most common problems I have found when working in Dreamweaver is that of inserting records 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 to the 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 add the functionality that will redirect users to a thank-you page of some sort after they've registered. You can create this functionality by following these steps: 1. While still in the New User Registration page, double-click the Insert Record server behavior. The Insert Record 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 referenced from 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 VectaCorpPHP depending on the model you're using in this chapter), choose the template titled template, and click Create. 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. [...]... that content constantly 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 downloading the files from www.dreamweaverunleashed.com You'll want to save the files for Chapter 25 (not the folder) in the C:\Inetpub\wwwroot\VectaCorp... been created Note One of the most common problems I have found when working in Dreamweaver is that of inserting records 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... Employees Table Now that you can verify that the data being sent to the database is in fact legitimate, you can 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... 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 appears If this is the case, select the appropriate... the C:\Inetpub\wwwroot\VectaCorp directory, where represents the server technology (ASP, ASPX, CFM, PHP) you plan to use Make sure that your site is also properly defined within Dreamweaver, including the appropriate server-side technology you plan to use in the Testing Server category Building the Web Store New User Registration Page Using ASP, ColdFusion, or PHP Like most web... 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 to the 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 add the functionality... allow them to modify the information they provided Suppose that an employee moved to a new 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 to develop a page for user administrative purposes such as these Using dynamic form objects in conjunction with the . 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 downloading the files from www.dreamweaverunleashed.com 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. A new user has been created. Note One of the most common problems I have found when working in Dreamweaver is that of inserting records into the database. Generally this problem is isolated to