PHP/MySQL Web Development Using Dreamweaver

 

In this final exercise we create a page to manage our lunches table. We'll do something simple -- just allowing records to be added, displayed, and deleted.

Exercise 7a

1. Create a new file from the site template. Save it as lunches.php.
2. Make cosmetic changes appropriate for a page managing lunches.
3. Delete the "lorem ipsum" text and in its place insert a form.
4. Inside the form, insert a table with the following properties:
   • Rows: 4
   • Columns: 2
   • Border thickness: 0
   • Cell padding: 4
5. Type the following values into the left column, starting from the top: "name," "description," and "price."
6. To the right of each label, insert a form field -- changing the name of the inserted field to match the label. Make the description field a multi-line text area.
7. On the bottom row, insert a submit button and change the value of the button to "Add."
8. Underneath the form type the text: "Lunches on file."
9. Beneath this, insert a table with the following properties:
   • Rows: 2
   • Columns: 3
   • Border thickness: 1
   • Cell padding: 4
10. In the top row of the table type in "name," "description," and "price."
11. Create a recordset with the following properties:
    • Name: Recordset1
    • Connection: DWphpClass
    • Table: dwphpclass_lunches
    • Columns: all
    • Filter: none
    • Sort: name
12. In the Application window click the Bindings tab. This tool lets you insert recordset fields into your page. If necessary click on the "+" to expand the list. Push the inert button to insert a selected field wherever your insertion point happens to be. Alternately, you can click and drag fields from this list onto your page. Insert the name, description, and price in the bottom row of your table beneath the apprpriate column header.
13. Next we select the entire row of the table where we've put our recordset fields. This is actually a bit tricky to do, but you can master it if you know what to look for. Hover your pointer to the left of {Recordset1.name} right over the table boundary until it turns into a right-arrow and then click. If you have succeeded selecting the entire row, all the cells in that row will be hightlighted.
14. When you've done the above, add a new sever behavior "Repeat Region" and in the dialog box that opens up use Recordset1 and show all records.
15. Now, time to connect up our input form with an appropriate server behavior. Add a "Insert Record" sever behavior with the following properties.
    • Submit values from: form1
    • Connection: DWphpClass
    • Insert table: dwphpclass_lunches
    • Columns: (leave as is)
    • After inserting, go to: #
16. Test your page by previewing in the browser.

Watch "exercise 7a demo" to see your instructor do this. (time 8:33)

Exercise 7b

Now we add the final functionality for this page -- allowing records to be deleted. (We could also add edit capability as well, but we showed you how to do that in the previous section and covering it here again would be redundant.)

1. Scrolling down so that we can see the lower table, insert a new column in the table at the extreme left.
2. In this new column in the bottom row insert a form, and inside of it put a submit button and hidden field.
3. Change the value of the button to "Delete."
4. Change the name of the hidden field to "id" and give it a default value of the Recordset1 field "id" using the dynamic data button (lightning bolt).
5. Add a "Delete Record" server behavior with the following values in the dialog box:
   • First check if variable defined: Form variable id
   • Connection: DWphpClass
   • Table: dwphpclass_lunches
   • Primary key column: id
   • Primary key value: Form variable id
   • After deleting go to: #
6. We're almost finished. One final touch -- it is a good idea when deleting records to ask for confirmation before actually doing the delete. It is simpler to do this in JavaScript on the server side. We begin by selecting the Submit button and switching to split screen mode.
7. In the code window, add the following to the input tag corresponding to the button: onclick="return confirm('Are you sure you want to delete this lunch?');"
8. Save and preview in browser.

Watch "exercise 7b demo" to see your instructor do this. (time 3:36)

Take me to the next section...