PHP Tutorial 3 - Google Sites

PHP Tutorial 3 Web Pages that Manipulate Database Records

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 parts I and II of the PHP Tutorial. If not, start with phpTutorial1.pdf, follow the instructions for preparing the application server, database, and Dreamweaver for this project. Then turn to phpTutorial2.pdf and build the product catalog pages.

Adding an Insert Product Page Start by opening a page that’s already been created. 1.

Open the file named add_product.php 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 example—to 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.

Copyright 2005, Sawyer McFarland Media, Inc. This material is supplied to readers of Dreamweaver 8: The Missing Manual as a helpful supplement to that book. If you don’t own the book, what are you doing reading this? Please go out and by the book: it’s a good book, explains a lot more than this tutorial, and you’ll feel better about yourself knowing you did the right thing. Thanks.

2.

Choose Insert→Application Objects→Recordset. Or use any of the methods described on page 706 of the printed book to add a new recordset; for example, clicking the + button in either the Bindings or Server Behaviors panels and choosing Recordset (Query). The Recordset window opens. Make sure that the simple recordset options show up (see Figure PHP Tutorial 3-1). Next, you’ll define the properties of this recordset.

3.

Type rsVendors in the Name box. 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 page 706.

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 PHP Tutorial 3-1.

Figure PHP Tutorial 3-1. 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.) 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 2-6: 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 page 763 of the book). The Record Insertion Form window opens (Figure PHP Tutorial 3-2). Next, you’ll tell Dreamweaver which database to connect to and which table will receive data from the form.

9.

From the Connection menu, choose “connNationalEx.” From the “Insert into table” menu, choose “products.”

Copyright 2005, Sawyer McFarland Media, Inc. This material is supplied to readers of Dreamweaver 8: The Missing Manual as a helpful supplement to that book. If you don’t own the book, what are you doing reading this? Please go out and by the book: it’s a good book, explains a lot more than this tutorial, and you’ll feel better about yourself knowing you did the right thing. Thanks.

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 index.php. in the site’s root folder. 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 (-) 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 ID—the 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.

Figure PHP Tutorial 3-2. 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. 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 on the Web page. (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 element—like a check box or menu—Dreamweaver 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.

Copyright 2005, Sawyer McFarland Media, Inc. This material is supplied to readers of Dreamweaver 8: The Missing Manual as a helpful supplement to that book. If you don’t own the book, what are you doing reading this? Please go out and by the book: it’s a good book, explains a lot more than this tutorial, and you’ll feel better about yourself knowing you did the right thing. Thanks.

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 PHP Tutorial 3-3). 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.

Figure PHP Tutorial 3-3. 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 PHP Tutorial 3-3. 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, like this: 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.

Copyright 2005, Sawyer McFarland Media, Inc. This material is supplied to readers of Dreamweaver 8: The Missing Manual as a helpful supplement to that book. If you don’t own the book, what are you doing reading this? Please go out and by the book: it’s a good book, explains a lot more than this tutorial, and you’ll feel better about yourself knowing you did the right thing. Thanks.

Figure PHP Tutorial 3-4. Dreamweaver can create dynamic menus—pull-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 tutorial— rsVendors. 22. From the “Get labels from” menu, choose “vendorName.” Then, from the “Get values from” menu, choose “vendorID.” The labels—the text that appears in the menu—will 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 20-23; 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 created—one 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 PHP Tutorial 3-2. 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. Copyright 2005, Sawyer McFarland Media, Inc. This material is supplied to readers of Dreamweaver 8: The Missing Manual as a helpful supplement to that book. If you don’t own the book, what are you doing reading this? Please go out and by the book: it’s a good book, explains a lot more than this tutorial, and you’ll feel better about yourself knowing you did the right thing. Thanks.

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 tag (the one farthest to the right in the tag selector). For other table selection techniques, see page 248 in the book.

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 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 user 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.

Select “prodName” from the listing in the “Named fields” box. 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 PHP Tutorial 3-5.

Copyright 2005, Sawyer McFarland Media, Inc. This material is supplied to readers of Dreamweaver 8: The Missing Manual as a helpful supplement to that book. If you don’t own the book, what are you doing reading this? Please go out and by the book: it’s a good book, explains a lot more than this tutorial, and you’ll feel better about yourself knowing you did the right thing. Thanks.

Figure PHP Tutorial 3-5. 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 PHP Tutorial 3-6.

Figure PHP Tutorial 3-6. 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 signup information, collect order and payment details, or just create an online guest book. 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. Copyright 2005, Sawyer McFarland Media, Inc. This material is supplied to readers of Dreamweaver 8: The Missing Manual as a helpful supplement to that book. If you don’t own the book, what are you doing reading this? Please go out and by the book: it’s a good book, explains a lot more than this tutorial, and you’ll feel better about yourself knowing you did the right thing. Thanks.

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 was 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. 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 will add a link to the product details page you built in the last chapter. 1.

Open the file named product_details.php 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.php page, which displays a listing of all products in the database. By clicking the name of a product on that page, the product_details.php page retrieves and displays information on a single ad. Now you need to create a link on this page that, when clicked, takes a visitor to an update page for the particular ad.

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.

3.

Navigate to and select the file in the admin folder called update_product.php, 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 data—the 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 + (arrow on Mac) 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.php?prodID=

8.

Choose File→Save. That was a fair amount of work, and you haven’t even started building the update page yet.

Copyright 2005, Sawyer McFarland Media, Inc. This material is supplied to readers of Dreamweaver 8: The Missing Manual as a helpful supplement to that book. If you don’t own the book, what are you doing reading this? Please go out and by the book: it’s a good book, explains a lot more than this tutorial, and you’ll feel better about yourself knowing you did the right thing. Thanks.

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 tutorial, you’ll learn how to hide this link from unauthorized eyes. 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.php in the admin folder.

2.

Add a recordset, using any of the methods described earlier. For example, choose Insert→Application Objects→Recordset. The Recordset window opens. Make sure the simple options are displayed, as shown in Figure PHP Tutorial 3-7.

3.

Type rsProduct in the Name field, 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 record—the 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 PHP Tutorial 3-7. In essence, it instructs the recordset to retrieve only the record whose prodID matches the number passed in the URL parameter prodID.

Figure PHP Tutorial 3-7. When you filter on a table’s primary key (prodID, in this case) using the = operator, the recordset never retrieves more than one record. 5.

Click OK to close the window and add the recordset to the page. Next, you’ll create two more recordsets—a 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 2-7 from the “Adding an Insert Product Page” part of this tutorial to create new rsVendors and rsCategories recordsets. (You can also copy those recordsets from the insert product page as described on page 721 of the printed book.) The hard part’s behind you. You can now use Dreamweaver’s Update Record Form tool to finish the page.

Copyright 2005, Sawyer McFarland Media, Inc. This material is supplied to readers of Dreamweaver 8: The Missing Manual as a helpful supplement to that book. If you don’t own the book, what are you doing reading this? Please go out and by the book: it’s a good book, explains a lot more than this tutorial, and you’ll feel better about yourself knowing you did the right thing. Thanks.

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 PHP Tutorial 3-8). Next, you’ll specify the recordset and fields the form should update.

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.php. 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.

Figure PHP Tutorial 3-8. 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 page 771). 10. In the “Form fields” list, select “prodID”; click the Remove (-) 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. Copyright 2005, Sawyer McFarland Media, Inc. This material is supplied to readers of Dreamweaver 8: The Missing Manual as a helpful supplement to that book. If you don’t own the book, what are you doing reading this? Please go out and by the book: it’s a good book, explains a lot more than this tutorial, and you’ll feel better about yourself knowing you did the right thing. Thanks.

You need to give Dreamweaver a bit of information about the radio buttons you wish to add to the page, so: 14. Click the Radio Group Properties button. The Radio Group Properties window appears (Figure PHP Tutorial 3-3). 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 PHP Tutorial 3-3, 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, like this: 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 PHP Tutorial 3-4). 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 PHP Tutorial 3-4). 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 PHP Tutorial 3-8. 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 1-10 from the “Finishing the Insert Form” part of this tutorial above. Doing so properly formats the form and adds the necessary form validation behavior. Your finished page should resemble Figure PHP Tutorial 3-9. Copyright 2005, Sawyer McFarland Media, Inc. This material is supplied to readers of Dreamweaver 8: The Missing Manual as a helpful supplement to that book. If you don’t own the book, what are you doing reading this? Please go out and by the book: it’s a good book, explains a lot more than this tutorial, and you’ll feel better about yourself knowing you did the right thing. Thanks.

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 index.php page in the site’s root folder. 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 PHP Tutorial 3-9. When you’re working in Design view, Dreamweaver highlights dynamic areas of the page—like this update form—in light blue. In Live Data View (see page 734), 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.

Creating and Linking to the Delete Page Obviously, if a vendor stops manufacturing a product, or the staff at the National Exasperator decide to discontinue an item, they need a way to remove a product listing from the database.

Copyright 2005, Sawyer McFarland Media, Inc. This material is supplied to readers of Dreamweaver 8: The Missing Manual as a helpful supplement to that book. If you don’t own the book, what are you doing reading this? Please go out and by the book: it’s a good book, explains a lot more than this tutorial, and you’ll feel better about yourself knowing you did the right thing. Thanks.

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.php. 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 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.php in the admin folder, but don’t close the window yet. You need to add on the information that will let the update form know which product it should update.

4.

Follow steps 4-7 in the “Linking to the Update Page” part of this tutorial (above.) 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 (Control-click) 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.

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.php. 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 (arrow button on a Mac) 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.

Copyright 2005, Sawyer McFarland Media, Inc. This material is supplied to readers of Dreamweaver 8: The Missing Manual as a helpful supplement to that book. If you don’t own the book, what are you doing reading this? Please go out and by the book: it’s a good book, explains a lot more than this tutorial, and you’ll feel better about yourself knowing you did the right thing. Thanks.

5.

Click in the empty space just below the name of the product. Choose Insert→ Form→Form. A red, dotted line—the boundaries of the form—appears on the page. Now you need to add a Delete button to the form.

6.

Choose Insert→Form→Button. (If the “Input Tag Accessibility Atttributes” 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. You’ll also need to set the action property as well to indicate where the form information is sent, when the delete button is pushed.

7.

Make sure the form is still selected and type delete_product.php in the Action field in the property inspector. Yes, this is the same page you’re working on! When a visitor clicks the Delete button, the form is submitted back to the page, the record is deleted and the visitor is forwarded onto another page. Why? This provides a kind of “are you sure you want to delete this product” safeguard. When a visitor clicks the “Delete this product” link on the Product Details page, it would be dangerous to just immediately remove the product from the database—it’s very easy to click a link by accident. So instead, the administrators at the National Exasperator online store get a brief moment to think before they annihilate the doomed product from the database. For this to work, you’ll also need to pass on the product ID when the form is submitted—this will let the Delete Record server behavior know which product to exterminate. A hidden form field (see page 378) provide an easy tool to accomplish this task.

8.

Click to the right of the Delete button and choose Insert→Form→Hidden Field. Dreamweaver adds a hidden form field to the page. You need to set it’s name and value in the Property Inspector.

9.

Make sure the Hidden Field is still selected (if you can’t see it, turn to the Note on page 379) and type prodID in the name field of the Property Inspector. Next, you’ll set the value of the hidden field to the product’s ID number. This is a dynamic value—that is, it depends on which product you’ll be deleting—that you can capture from the recordset you added above.

10. On the Property Inspector, click the lightning bolt icon to the right of the Value field. 11. The Dynamic Data window opens. 12. Select prodID from the list that appears under Recordset (rsDetails), and click OK to close the window. The property inspector should look like Figure PHP Tutorial 3-10. Now you’ll add the Delete Record server behavior which provides the programming magic that will relegate the product information to oblivion.

Figure PHP Tutorial 3-10. Hidden fields are a great way to pass information between dynamic pages without making them visible to your site’s visitors. 13. Open the Server Behaviors Panel (Window→Server Behaviors). Click the + button and select Delete Record. The Delete Record window appears (see Figure PHP Tutorial 3-11). 14. From the “First check if variable is defined” menu select Form Variable and type prodID in the text box directly to the right. Copyright 2005, Sawyer McFarland Media, Inc. This material is supplied to readers of Dreamweaver 8: The Missing Manual as a helpful supplement to that book. If you don’t own the book, what are you doing reading this? Please go out and by the book: it’s a good book, explains a lot more than this tutorial, and you’ll feel better about yourself knowing you did the right thing. Thanks.

This instructs the server behavior when to delete the record. This server behavior is very flexible, so you can use it to delete a record when the page loads, when a particular cookie is set, or one of several different options (see page 785 for more details.) As mentioned above, at step 7, you don’t want to just delete a record whenever someone visits this page—to be cautious, the record should only be removed when someone clicks the form’s Delete button which submits the form to this page, and provides the records ID number within hidden form field named prodID. 15. From the Connection pop-up menu, choose connNationalEx. Now tell Dreamweaver which table the record belongs to. 16. From the “Delete from table” menu, choose “products.” This menu indicates the table containing the record that is to be deleted. You next have to specify the primary key (see page 697) of the record to be deleted. 17. Select “prodID” from the “Unique Key Column” menu and make sure the Numeric box is checked. Next you need to identify where the ID number of the doomed record is coming from—in this case that numbered is stored in the hidden form field name prodID. 18. Choose Form Variable from the “Primary key value” menu and type prodID in the box immediately to the right. The Delete Record window should now look like Figure PHP Tutorial 3-11. To finish filling out this window, you’ll just tell Dreamweaver which page should appear after someone deletes the record.

Figure PHP Tutorial 3-11. 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 record—and a form with a Delete button. 19. Click the Browse for File button in the Property inspector. Navigate to and select the file index.php in the site’s root folder. After the record is deleted, the store administrator will simply be taken back to the complete list of products. Alternatively, you could also create a “Product Deleted Successfully” page that confirms the deletion. 20. Click OK. Dreamweaver adds the Delete Record server behavior to the page. You’ve done it! Now you need to test it out. 21. Save and close this page. Open the products.php 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. 22. Click the name of any product in the list. Copyright 2005, Sawyer McFarland Media, Inc. This material is supplied to readers of Dreamweaver 8: The Missing Manual as a helpful supplement to that book. If you don’t own the book, what are you doing reading this? Please go out and by the book: it’s a good book, explains a lot more than this tutorial, and you’ll feel better about yourself knowing you did the right thing. Thanks.

A details page for that product appears. 23. Click the Delete This Product link near the bottom. The Delete Product page appears (see Figure PHP Tutorial 3-12). Notice that both the product name and a Delete button appear.

Figure PHP Tutorial 3-12. 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. 24. 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 from an e-commerce Web site. So in the next tutorial, you’ll learn how to keep prying eyes and mischievous fingers away from your coveted Insert, Update, and Delete pages.

Copyright 2005, Sawyer McFarland Media, Inc. This material is supplied to readers of Dreamweaver 8: The Missing Manual as a helpful supplement to that book. If you don’t own the book, what are you doing reading this? Please go out and by the book: it’s a good book, explains a lot more than this tutorial, and you’ll feel better about yourself knowing you did the right thing. Thanks.