PHP/MySQL Web Development Using Dreamweaver

Inserting records

Perhaps the most common web application is a form that inserts a single record into a table when the submit button is pressed. This simple functionality forms the core of many types of systems commonly found at Princeton, e.g., conference registration, paper/proposal submissions, bug/trouble report systems, etc. Dreamweaver makes creating insert forms extremely simple by providing a "wizard" to do most of the dirty work for you.

Exercise 4a

  1. Unless you closed it you should have an open PHP document window called "Untitled-1." If not, create a new one.
  2. If you are in code view or split screen mode, switch to design mode. (In this class we will be spending little if any time looking at the PHP code generated by Dreamweaver.)
  3. From the Insert menu choose "Application Objects," then "Insert Record" and finally "Record Insertion Form Wizard."
  4. A "Record Insertion Form" dialog box opens. Choose the connection "DWphpClass" and table "dwphpclass_users." The fields from this table will automatically appear in the middle section below.
  5. In the box "After inserting go to" type in "thanks.php" (we'll create this file later).
  6. Move down to the form fields section and remove the field "u_id" by clicking on it and then clicking the "-" button. (We don't need to have this value on our form because it is automatically calculated in MySQL when a new record is inserted.)
  7. Click on the last name field and use the down-triangle button to move this field down so that it is between u_mname and u_addr1.
  8. Scroll down the list further and remove the following fields: u_password, u_securityq, u_securitya, u_type, and u_lastmod. (We won't be using the first four fields for this demo and lastmod is a timestamp field that is automatically calculated by MySQL.)
  9. Click the OK button to close the dialog box.
  10. Dreamweaver creates the form for you.

Watch "exercise 4a demo" to see your instructor do the above. (time 2:10)

Exercise 4b

As nice as it is to have Dreamweaver create this form for you, if you want to avoid being featured in the next edition of Web Pages That Suck you've got to make some cosmetic changes before featuring it on your web site.

  1. Let's change the field names as they appear on this form. Use Dreamweaver's Find and Replace dialog box, under the Edit menu, to remove the prefix "U_" from the beginning of each field. After you have done this, edit the field names further to make them more readable, e.g., change "fname" to "first name" etc.
  2. Save your work by choosing "Save As" from the File menu and giving this file the name "insert.php".
  3. Give the page the title "Insert record test" by typing this text into the "Title" box at the top of the window showing your page.
  4. Now, to get rid of the plain vanilla look of our current page, let's apply a template to it. From the "Modify" menu, select "Templates" and then "Apply Template to Page." A dialog box opens allowing you to select the desired template. In our case there is only one choice. Click on "template-1" and click the Select button.
  5. Now we need to tell Dreamweaver where the document body of the old page should go on our new template page. Click "Document body" and then in the "Move content to new region" pull-down menu select "body." Click the OK button to finish.
  6. Save your work by clicking "Save" under the File menu.

Watch "exercise 4b demo" to see your instructor do the above. (time 2:57)

Exercise 4c

Before we test our new page, let's create the "thanks.php" page we will use to thank the user of our form.

  1. Use File/New and on the next dialog box click the "Templates" tab at the top.
  2. In the leftmost column of the next dialog box, click "Site DWphpClass" then click "template-1" in the column to the right.
  3. Click the Create button to create a new file based on this template.
  4. Make appropriate changes to this file to make it an adequate thank you page and save it as "thanks.php."
  5. Upload thanks.php to the web server.

Watch "exercise 4c demo" to see your instructor do the above. (time 2:01)

Exercise 4d

  1. Now we are going to test our data input form. Assuming you still have the file insert.php on your screen, take the following steps to call up the file in a web browser of your choice: File/Preview in Browser/FireFox.
  2. Please enter some test data and press the "Insert record" button. You should see your thank you page.
  3. Let's check to see if our record was really entered by using phpMyAdmin to look. Log in as before and click "dwphpclass_users" to go to that particular table. Then click the Browse tab to view the records in your table.

Watch "exercise 4d demo" to see your instructor do the above. (time 1:31)

Take me to the next section...

Last updated: 02/20/2006 2:53 PM
©2006. The Trustees of Princeton University.