Section 22.5. Tutorial: Inserting and Updating Data


22.5. Tutorial: Inserting and Updating Data

In this tutorial, you'll continue working on the National Exasperator's online store. You'll work on two administrative pages that allow employees of the National Exasperator to add new products to the database, and to edit products already in the database.

This tutorial assumes you've already completed the tutorials for Chapters 20 and 21. If not, turn to Section 20.2.1, follow the instructions for preparing the application server, database, and Dreamweaver for this project. Then turn to Section 21.8 and build the product catalog pages.

22.5.1. Adding an Insert Product Page

Start by opening a page that's already been created:

  1. Open the file named add_product.asp in the admin folder of the local site you defined in Chapter 20 .

    Pages for adding and editing the online store's products shouldn't be accessible to the public; you wouldn't want just anyone adding products"The Electric Whoopee Cushion, by Mr. Hacker," for exampleto the store. Accordingly, these pages are kept in a folder reserved for administrators of the Web site. (In the next chapter, you'll learn how to password-protect these pages.)

    One piece of information required for each new product is an ID number for the vendor who manufactures the product. The database for these products actually contains several tables: Products, Vendors, and Category. Information about each vendor ( name and contact info ) is in the Vendors table, while information on each product (price, description, and so on) is in the Products table. A third table contains a list of product categories, which you used in the last tutorial to create the category navigation bar.

    To keep the Vendors and Products tables connected, so that you know which vendor manufactures which product, the Products table includes a field containing the vendor's ID number. Whenever you add an item to the Products table, then, you also need to insert the vendor's ID number.

    To make the process of selecting a vendor easier, you should add a pop-up menu that lists all of the vendors in the database. To make this kind of dynamic menu, start by creating a recordset.

  2. Choose Insert Application Objects Recordset .

    Or use any of the methods described on Section 21.1.2 to add a new recordset; for example, clicking the + button in either the Bindings or Server Behaviors panel and choosing Recordset (Query). The Recordset window opens. Make sure that the simple recordset options show up (see Figure 22-15). Next, you'll define the properties of this recordset.

    Figure 22-15. When creating this recordset, make sure you're using the window's Simple options. If you see a button labeled Advanced, you're in the right place. (If that button's missing, click the Simple button to access the basic recordset options.)
  3. In the Name box, type rsVendors . Select connNationalEx from the Connection menu. Select "vendors" from the Table menu .

    These three steps set up the name, database, and table required for the recordset. For a recap of creating recordsets, turn to Section 21.1.2.

  4. Click the Selected radio button; select vendorID and vendorName from the Columns list .

    You can do this by holding down the Ctrl (Option) key while clicking the name of each column. Finally, pick an order for sorting the list of vendors.

  5. Choose vendorName from the Sort menu. Make sure Ascending is selected in the Order menu .

    The Recordset window should now look like Figure 22-15.

  6. Click OK to close the window and insert the recordset in the page .

    Since the database also contains a list of product categories, next you'll create a dynamic menu for them as well.

  7. Add another recordset to the page by following steps 26: name the recordset rsCategories , select the "category" table, choose the All columns radio button, and sort by CategoryName .

    You've just added a second recordset to this page. Now you're ready to add a form for inserting a new record.

  8. Click in the area directly below the headline "Add a Product." Choose Insert Application Objects Insert Record Record Insertion Form Wizard .

    (Other methods of inserting this wizard are discussed on Section 22.1.1). The Record Insertion Form window opens (Figure 22-16). Next, you'll tell Dreamweaver which database to connect to and which table will receive data from the form.

    Figure 22-16. While you can manually create a form and program it to insert a new record in a database, Dreamweaver's Record Insertion Form wizard makes the task a snap to complete.
  9. From the Connection menu, choose "connNationalEx." From the "Insert into table" menu, choose "products ."

    You can insert data into only one table at a time. In this case, you've selected the Products table because it holds all of the information for each item at the store. After information is added to the database, the visitor will be redirected to another page. You'll set this up next.

  10. Click the Browse button. Select the file products.asp .

    After adding a new product to the database, your staff will be taken to the Products page (the one you created in the previous chapter). Since the newly added product is part of the database, browsing the products catalog will reveal the newly added item.

  11. In the "Form fields" list, select "prodID." Click the Remove (minus sign []) button to remove this field .

    In some cases, the database itself fills in certain fields. For instance, every product in the database has its own unique IDthe table's primary key, which is generated by the database. When a new record is added, the database creates a new, unique number and stores it in the prodID column. Since you don't want anyone entering the wrong information here, you should remove it from the form Dreamweaver is about to create.

  12. Select the prodName column. Change the label in the Label field to Product Name :.

    The label you type here doesn't affect your database in any way. It's just the text that visitors will see next to the form field. (You'll do the same thing with each field, to make the labels reader-friendly.)

    You don't need to change any of the other options such as "Display As" or "Submit As." You'll often change the "Display As" option, which changes what type of form elementlike a checkbox or menuDreamweaver will display (you'll see this in step 14). However, you'll probably never change the "Submit As" option, which determines how Dreamweaver submits the data to the database. Dreamweaver figures this out correctly based on the design of your database.

  13. Select the prodPrice column and change the label in the Label field to Price :.

    The next field, ProdDesc contains a product description, so it might contain a fair amount of text. The one-line Text Field form element, then, is just too small. You'll change that to the more spacious Text Area next.

  14. Select the prodDesc column and change the label to Description :. From the Display As menu, choose Text Area .

    The database also tracks a product's inventory status: whether the product is in the warehouse or on back order with the manufacturer. You could let a store administrator type in the correct status, but that would take time, and, besides, he might make a mistake. (It wouldn't do for shoppers to see that the "Big Foot T-Shirt" is on "Gack Order.") So you'll simplify the process by adding radio buttons .

  15. Select the prodInventory column and change the label to Inventory Status :. From the Display As menu, choose Radio Group, and click the Radio Group Properties button .

    The Radio Group Properties window appears (Figure 22-17). Here you're going to add the radio buttons you want to appear on the form. Remember, the value of each button must match the data stored in the database (see Section 22.3.2).

    Figure 22-17. Use the Radio Group Properties window to add radio buttons to a form. Radio buttons make data entry faster and less error-prone .
  16. In the Label field, replace "button1" with In Stock . Type In Stock in the Value field as well .

    The label is what appears on the page, while the value is the information that gets stored in the database. You need to add one more button.

  17. Click the + button to add another radio button; repeat step 16 but type Back Order for the label and value of the second button .

    The window should look like Figure 22-17. You're almost done with the form.

  18. Click OK to close the Radio Group Properties window .

    Again, in an effort to speed up data entry and make sure the form is filled out correctly, the next two fields will be pull-down menus . First, you'll create a dynamic menu to display the list of vendors, as follows .

  19. Select the vendorID column, and then change its label to Vendor :.

    This column only stores a number; the vendor's name and contact information is stored in a different table. To make entering this information easier, you'll make a dynamic menu that lists all of the vendors' names . When somebody chooses a name from the menu, the appropriate vendorID number will be submitted to the database.

  20. From the Display As menu, choose Menu. Then click the Menu Properties button .

    The Menu Properties window opens (see Figure 22-18). Use this window to build the menu.

    Figure 22-18. Dreamweaver can create dynamic menuspull-down menus (also known as pop-up menus) that get their labels and values from a database.
  21. Click the "From database" radio button. Make sure "rsVendors" is selected in the Recordset menu .

    You're telling Dreamweaver that the items to be listed in the menu are actually coming from a database query. In fact, they come from the recordset you created at the beginning of this tutorialrsVendors.

  22. From the "Get labels from" menu, choose "vendorName." Then, from the "Get values from" menu, choose "vendorID ."

    The labelsthe text that appears in the menuwill be the names of each vendor. The value that's submitted with the form, meanwhile, will be the vendor's ID number.

    You can skip the "Select value equal to" field. It's useful if you want a particular value to be preselected when the form loads, which is usually the case when you're updating a record in the database, since you need to display the current database information in order to update it.

  23. Click OK to close the window .

    The product category is another instance where a pull-down menu makes sense. You'll follow the same procedure to add a pop-up menu listing the names of all the categories available at the store.

  24. Select the categoryID column, and then change its label to Category :.

    The next few steps should feel familiar.

  25. Repeat steps 2023; use the "rsCategories" recordset, retrieve the label from the "categoryName" field, and set the value to "categoryID ."

    For the final field, you'll change the label and manually enter a default value.

  26. Select the imagePath column, and change its label to Image Path :.

    Because not every product has an image, you'll change the default value to point to a graphic that's already been createdone used to indicate that no graphic is available.

  27. In the "Default value" box, type images/no_picture.gif .

    At this point, the Record Insertion Form window should resemble Figure 22-16.

  28. Click OK again to insert the form .

    Dreamweaver adds a table, a form, and all of the programming code necessary to add a new product to the database.

  29. Choose File Save .

    You're nearly finished. All that's left is to finish up the design and take it for a test drive.

22.5.2. Finishing the Insert Form

To make your form ready for primetime, you'll spruce up its appearance and prevent users from submitting bad data:

  1. Select the table containing the form fields .

    The fastest method is to click anywhere inside the table and then, in the tag selector, click the <table> tag (the one farthest to the right in the tag selector). For other table-selection techniques, see Section 7.5.

  2. In the Property inspector, from the Align pop-up menu, choose Default .

    The Default option aligns the table to the left without adding bandwidth-hogging HTML code.

    It would be nice if the text looked more like the rest of the site, too; in the next step, you'll update the style of the text.

  3. In the Property inspector, from the Class menu, choose productInfo .

    The text inside the table should now be formatted to better match the site's style.

    Next, add form validation so that users can't submit the wrong kind of information.

  4. Select the form by clicking the <form> tag in the tag selector .

    You can also click the red, dashed line to select the form.

  5. Open the Behaviors panel by choosing Window Behaviors .

    Shift+F4 does the same thing.

  6. Click the + button and select Validate Form .

    The Validate Form window appears. In this case, you want to make sure that when this form is submitted, both a product name and a price have been entered. It wouldn't make sense to have a product without a name or price. In addition, you need to make sure that the person types a number (not alphabetic text) into the price field. Since the database expects a number for the price, you'll receive a nasty error if anything but a number is submitted.

  7. From the listing in the "Named fields" box, select "prodName ."

    This is the field used for collecting the name of the item for sale. There should be something in this box when the form is submitted.

  8. Turn on the Required box .

    Notice that (R) appears next to the "prodName" item. It tells you that a value is required for this field. Set up the price field next.

  9. In the "Named fields" box, select the text "prodPrice" item. Turn on the Required box and the Number radio button .

    The window should now look like Figure 22-19.

    Figure 22-19. The Validate Form behavior is a simple way to ensure your Web forms don't generate any errors when you're attempting to insert data into a database.
  10. Click OK to close the window and apply the behavior. Choose File Save; press F12 (Option-F12) to preview the page in your Web browser .

    The finished page should resemble Figure 22-20.

  11. Type information into each of the fields and click the "Insert record" button .

    If you filled out all of the fields correctly, you should see the product page you built in the last chapter. Click the category name of the new product you just added, or navigate through the product pages until you find the newly added item. Try filling out the form, except for the name and price, to see how the Validate Form behavior prevents you from submitting the form.

There are many ways to enhance this page. For example, there's currently no way to add a vendor to the database. When you add a product to the database using the form you just created, you're stuck selecting one of the names listed in the pop-up menu. To make this application more useful, you could add a button or link to the right of the Vendor menu, call the link Add New Vendor, and link it to another insert record page that would include form fields for inserting a new record into the Vendors table. With the steps you've learned in this tutorial, you could even make that form return you to the Add Product page after you've added the vendor to the database.

Figure 22-20. No database-driven site would be complete without a way to add new records to the database. Use forms like this one to collect newsletter sign-up information, collect order and payment details, or just create an online guest book.

22.5.3. Building a Page for Editing Database Records

If employees at the National Exasperator type the wrong information for a particular product and have no way to correct it, they could be in a lot of trouble. After all, they'd be losing money hand over fist if the site were selling those $15.00 Loch Ness Monster keychains for only $1.50. That said, here's how to add an update-record page to the site.

22.5.3.1. Linking to the update page

An update page is very much like an insert-record page; the only difference is that the form is already filled out with information about a particular record. The first step is to tell the update page which product it's supposed to update. To do so, you must add a link to the product-details page you built in the last chapter.

  1. Open the file named product_details.asp in the root folder of the local site .

    This page lists details for a particular product. As you may recall from last chapter, this page is itself accessed from the products.asp page, which displays a listing of all products in the database. By clicking the name of a product on that page, the product_details.asp page retrieves and displays information on just that product.

    Now you need to create a link on this page that, when clicked, takes a visitor to an update page for the particular product.

  2. Click in the empty space under the table with the product information and type Edit This Information . Select the text you just typed and click the Browse For File button (the little folder icon) next to the Link field in the Property inspector .

    The standard Open File dialog box appears. (The Go To Detail Page, described on Section 21.7, is another way to create this link.)

  3. Navigate to and select the file in the admin folder called update_product.asp , but don't close the window yet .

    You need to add some additional information, which identifies the product that needs updating, to the end of the URL.

  4. Click the Parameters button to open the Parameters window. Click in the name column and type prodID .

    The Parameters button lets you add a URL parameter to the end of a link, allowing you to pass information on to another page. In this case, you're passing on a dynamic piece of datathe product ID number for the item currently displayed on the Product Details page.

  5. Press Tab twice to hop to the Value column. Click the dynamic data button (the lightning bolt) .

    The Dynamic Data window opens. Here you can select data that you've already added to the Bindings panel, such as columns from a recordset.

  6. From the rsDetails recordset, select the item "prodID" and then click OK .

    (You may need to click the + button to the left of the word Recordset to see this option.) The link is nearly complete.

  7. Click OK to close the Parameters window. Click OK once again to close the Select File window and apply the link .

    When you're all done, the link box in the Property inspector should look like this:

     admin/update_product.asp?prodID=<%=(rsDetails.Fields.Item("prodID").Value)%> 

  8. Choose File Save .

    That was a lot of work, and you haven't started building the update page yet.


Note: You probably wouldn't want a link like this to appear for the average visitor to your site. After all, customers shouldn't be changing information on the products you sell. In the next chapter on Section 23.4.3, you'll learn how to hide this link from unauthorized eyes.
22.5.3.2. Creating the update page

Now that the initial legwork is out of the way, you're ready to build the actual Record Update Form. To start, you'll add a filtered recordset to retrieve information for the product to be updated:

  1. Open the file update_product.asp in the admin folder .

  2. Add a recordset, using any of the methods described on Section 21.1.2. For example, choose Insert Application Objects Recordset .

    The Recordset window opens. Make sure the simple options are displayed, as shown in Figure 22-21.

    Figure 22-21. When you filter on a table's primary key (prodID, in this case) using the = operator, the recordset never retrieves more than one record.
  3. In the Name field, type rsProduct ; choose "connNationalEx" from the Connection menu, and select "products" from the Tables menu. Leave the All button selected .

    Next, add a filter to the recordset. This will ensure that the recordset retrieves only a single recordthe product you wish to update.

  4. From the Filter menu, select prodID. From the Comparison menu, select =. From the Source menu, choose URL Parameter. Finally, in the last field in the Filter area of the window, type prodID .

    The Recordset window should now look like Figure 22-21. In essence, it instructs the recordset to retrieve only the record whose prodID matches the number passed in the URL parameter prodID.

  5. Click OK to close the window and add the recordset to the page .

    Next, you'll create two more recordsetsa listing all of the vendors and a listing of product categories. You'll use them to create dynamic menus, just as you did on the insert form.

  6. Follow steps 27 from the "Adding an Insert Product Page" part of this tutorial (see Section 22.5) to create new rsVendors and rsCategories recordsets .

    (You can also copy those recordsets from the insert-product page as described on Section 21.1.7). The hard part's behind you. You can now use Dreamweaver's Update Record Form tool to finish the page.

  7. Click in the empty area directly below the "Update Product Information" headline. Choose Insert Application Objects Update Record Record Update Form Wizard .

    The Record Update Form window opens (see Figure 22-22). Next, you'll specify the recordset and fields the form should update.

    Figure 22-22. Dreamweaver's Record Update Form makes very quick work of creating pages to update records in a database. But for it to work properly, you must make sure that the recordset selected in the "Select record from" menu was the first recordset added to the page (see Section 22.2.1).
  8. From the Connection menu, select connNationalEx. Make these selections for the next three menus: "products" in the "Table to update" menu, rsProduct in the "Select record from" menu, and prodID in the "Unique key column ."

    Next, you need to specify which page will appear after someone updates the record. Since the update page lets you edit a single product, it makes sense that after submitting any changes, you should see the newly updated information on that product's detail page.

  9. Click the Browse button. In the Select File window, navigate to and select the file product_details.asp . Click OK to choose the file .

    Now you must specify which fields will appear in the form. You also need to change which type of form element they should use, and edit their labels. This process is very similar to the Insert Record form; it's summarized in the following steps.

  10. In the "Form fields" list, select "prodID"; click the Remove (minus sign []) button to remove this field from the list .

    Since prodID is a primary key generated by the database, no one should be allowed to change it.

    Next, you'll change the text label that will appear next to a couple of the fields.

  11. Select the "prodName" form field and change its label to Product Name :. Select the "prodPrice" form field and change its label to Price :.

    Next, you'll provide some more room for lengthy descriptions of each product.

  12. Select the "prodDesc" column. Change the label to Description :, and from the Display As menu, choose Text Area .

    As with the insert product page, inventory status information is better displayed with a simple pair of radio buttons. You'll add those now.

  13. Select the prodInventory column. Change the label to Inventory Status :, and from the Display As menu, choose Radio Group .

    You now need to give Dreamweaver a bit of information about the radio buttons you wish to add to the page.

  14. Click the Radio Group Properties button .

    The Radio Group Properties window appears (Figure 22-17). You need to add the radio buttons you want to appear on the form. The value of each button must match the data stored in the database.

  15. In the Label field, replace button1 with In Stock . Type In Stock into the Value field, too .

    The label will appear on the page, while the value will be stored in the database. You need to add one more button.

  16. Click the + button to add another radio button; repeat step 15, but type Back Order for the label and value of the second button .

    The window should look like Figure 22-17, except that the "Select value equal to" box will be filled with the programming code necessary to select the correct button. After all, since this is an update form, one of the buttons should already be selected when the page loads.

  17. Click OK to close the Radio Group Properties window .

    Again, in an effort to speed up data entry and make sure the form is filled out correctly, the next two fields will be pull-down menus. First, you'll create a dynamic menu to display the list of vendors.

  18. Select the vendorID column, and then change the label to Vendor :. From the Display As menu, choose Menu; click the Menu Properties button .

    The Menu Properties window opens (see Figure 22-18).

  19. Click the "From database" radio button, make sure "rsVendors" is selected in the Recordset menu, and then choose "vendorName" from the "Get labels from" menu. Now, from the "Get values from" menu, choose "vendorID ."

    Leave the "Select value equal to" field as is. Dreamweaver automatically selects the appropriate choice, based on which vendor manufactures the product.

  20. Click OK to close the Menu Properties window .

    You need to repeat the process for the product categories menu.

  21. Select the categoryID column, and then change the label to Category :. From the Display As menu, choose Menu; click the Menu Properties button .

    The Menu Properties window opens (see Figure 22-18).

  22. Click the "From database" radio button, make sure "rsCategories" is selected in the Recordset menu, and then choose "categoryName" from the "Get labels from" menu. Now, from the "Get values from" menu, choose "categoryID." Click OK to close the Menu Properties window .

    As with the previous menu, Dreamweaver automatically added the correct code to make sure the category for the product being edited is correctly selected when this update page loads.

  23. Select the imagePath form field and change its label to Image Path :.

    At this point, the Record Update Form window should look like Figure 22-22.

  24. Click OK to close the Record Update Form window .

    Dreamweaver inserts a table, form, form fields, and programming code to the update page. All that's left are some final cosmetic touches.

  25. Repeat steps 110 from the "Finishing the Insert Form" part of this tutorial (Section 22.5.2) .

    Doing so properly formats the form and adds the necessary form validation behavior. Your finished page should resemble Figure 22-23.

  26. Save this page and close it .

    To get a feel for what you've done, it's time to test your application.

  27. Open the products.asp page. Press F12 (Option-F12) to preview it in a browser .

    The page lists the products in the database. Take a close look at one product in particular.

  28. Click the name of any product in the list .

    A details page for that product appears.

  29. Click the Edit This Information link near the bottom .

    The Update Product page appears, with the form already completed.

  30. Change some of the information on the form and then click the "Update record" button .

    Voil  ! You're taken back to the details page for this product listing, which proudly displays the freshly edited content.

Figure 22-23. When you're working in Design view, Dreamweaver highlights dynamic areas of the pagelike this update formin light blue. In Live Data view (see Section 21.5), the same areas change to yellow. If you'd like to hide this coloring, open the Preferences window (Edit Preferences [Dreamweaver Preferences]), select the Highlighting category, and turn off the two Live Data checkboxes.

22.5.4. Creating and Linking to the Delete Page

Obviously, if a vendor stops manufacturing a product, or the staff at the National Exasperator decides to discontinue an item, they need a way to remove a product listing from the database.

22.5.4.1. Adding a link on the details page

To begin, you must provide a link to delete the product. A good place for this would be on the details page of each product. Since you've already added an Edit This Information link to this page, you must now add a Delete This Product link:

  1. Open the file product_details.asp .

    Add a link that leads to a delete page.

  2. Near the bottom of the page, click to the right of the text you added earlier: Edit This Information. Press the Space bar, followed by the character and another space; type Delete This Product .

    Now you'll link this phrase to the delete page.


    Note: It's easy to accidentally click into the "Edit This Information" link. Doing so will make any text you type a part of that link. If this happens, just delete the new text you typed, click the <a> in the tag selector at the bottom of the document window, and then press the right arrow key. This moves the insertion point to the right of the link.
  3. Select the text "Delete This Product" and click the Browse for File button in the Property inspector (the little folder icon). Navigate to and select the file delete_ product.asp in the admin folder, but don't close the window yet .

    You need to add the information that will let the delete-page form know which product it should delete. (ASP pages can also use the Go To Detail Page server behavior to accomplish the same thing; see Section 21.7.)

  4. Follow steps 47 in the "Linking to the update page" part of this tutorial (Section 22.5.3) .

    Doing so creates a link that not only goes to the delete page, but also passes along the ID number of the product to be deleted.

    There's one final step for this page: copying a recordset to use on the delete page.

  5. Open the Bindings panel. Select "Recordset (rsDetail)," right-click (Controlclick) it, and choose Copy from the shortcut menu .

    You've just copied the recordset information so you can use it on another page. (You can also copy a recordset from the Server Behaviors panel in this way.)

  6. Save and close this page .

22.5.4.2. Creating the delete page

You've just created a link to the delete page; now you need to make the delete page do its stuff:

  1. Open the file delete_product.asp .

    This is where you'll paste the recordset that you copied a moment ago.

  2. Make sure the Bindings panel is open. Right-click (Control-click) in the empty area of the panel; from the shortcut menu, choose Paste .

    Dreamweaver pastes all the programming code to create a recordset from the Details page. This is a fast way to reuse a recordset.

  3. In the Bindings panel, expand the recordset listing by clicking the small + button to the left of the recordset .

    Don't click the large + button, which lets you add additional recordsets. You just want to see an expanded listing of recordset columns so you can add some dynamic data to the page.

  4. Drag the prodName column from the Bindings panel and drop it onto the document window, just to the right of the text "Product to Delete."

    This inserts dynamic data into the page. When this page appears in a Web browser, the name of a product will appear in bold type.

  5. Click in the empty space just below the name of the product. Choose Insert Form Form .

    A red, dotted linethe boundaries of the formappears on the page. Now you need to add a Delete button to the form.

  6. Choose Insert Form Button. (If the "Input Tag Accessibility Attributes window appears, click Cancel to close it). In the Property inspector, change the value to Delete .

    This button, when clicked, removes one product from the database.


    Note: If you have the form accessibility settings turned on (see Section 10.3), then you'll see the Input Tag Accessibility Attributes window. Click Cancel to close this window.
  7. Open the Server Behaviors panel (Window Server Behaviors). Click the + button and select Delete Record .

    The Delete Record window appears (see Figure 22-24).

    Figure 22-24. The Delete Record behavior adds all the necessary programming code to remove a record from the database. All that's needed to make it work is a recordset that retrieves a single recordand a form with a Delete button.
  8. From the Connection pop-up menu, choose connNationalEx .

    Now tell Dreamweaver which table the record belongs to.

  9. From the "Delete from table" menu, choose "products ."

    This menu indicates the table containing the record that is to be deleted. The next box, the "Select record from" box will already be filled out with the name of the recordset you added in step 2. This recordset retrieves only a single record: the record that is to be deleted from the "products" table.

    You next have to specify the primary key (see Section 20.3.2) of the record to be deleted.

  10. Select "prodID" from the "Unique Key Column" menu and make sure the Numeric box is checked .

    The Delete Record window should now look like Figure 22-24. To finish filling out this window, you'll just tell Dreamweaver which page should appear after someone deletes the record.

  11. Click the Browse for File button in the Property inspector. Navigate to and select the file products.asp .

  12. Click OK .

    Dreamweaver adds the Delete Record server behavior to the page. You've done it! Now you need to test it out.

  13. Save and close this page. Open the products.asp page. Press the F12 key (Option-F12) to preview it in a browser .

    The page lists the products in the database. Take a closer look now at a specific item.

  14. Click the name of any product in the list .

    A details page for that product appears.

  15. Click the Delete This Product link near the bottom .

    The Delete Product page appears (see Figure 22-25). Notice that both the product name and a Delete button appear.

    Figure 22-25. When the page is first accessed (from a link on a product details page), it displays the confirmation shown here. But when the Delete button is clicked, the page is reloaded and a Delete command is sent to the database.
  16. Click the Delete button to remove the item .

    Don't worry, you can always insert more products later!

    In any case, you'll note that that the product is no longer listed in the Product listings.

Of course, in the real world, you wouldn't want just anybody deleting, adding, or editing products on an e-commerce Web site. So in the next chapter, you'll learn how to keep prying eyes and mischievous fingers away from your coveted insert, update, and delete pages.



Dreamweaver 8[c] The Missing Manual
Dreamweaver 8[c] The Missing Manual
ISBN: 596100566
EAN: N/A
Year: 2006
Pages: 233

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net