IT350: Web & Internet Programming

Lab 7: CGI with PHP

Introduction

This week will be an introduction to CGI programming. To do this, you will go back to the HTML form you created for your website back in Lab 02/03/05, and finally put some computation behind it to really keep track of signups, orders, etc.

You originally created your form in Lab02, though you should copy your work from Lab03 (or Lab05) instead, in order to benefit from your later CSS additions.

Requirements

Directory:You must create a folder on you Web drive called "Lab07" (without the quotes) and store your work in that directory. To run a script called yourfile.php stored in your Lab07 directory on the Web drive, type http://mope.academy.usna.edu/~mXXXXXX/Lab07/yourfile.php in the address bar of your browser (replace XXXXXX with your alpha). You should COPY your files from lab03 (or Lab05) into this directory and make changes to it here! See the figure at the end of this lab regarding where files should be. Make sure you do not modify the files in previous labs folders. Make sure files in previous labs folders are not open in your editor!

IMPORTANT: To allow the webserver to later create files when running a PHP script, the webserver user needs to have extra permissions on your Lab07 directory. To enable this, ssh into mich316csdYYu.academy.usna.edu. (you can use 01 to 20 for YY) You can use putty or some other tool. Use your normal USNA credentials. Type the following (replace XXXXXX with your alpha) in the window that appears:

cd public_html
setfacl -Rm u:www-data:rwx Lab07
setfacl -Rdm u:www-data:rwx Lab07
setfacl -Rm u:mXXXXXX:rwx Lab07
setfacl -Rdm u:mXXXXXX:rwx Lab07

You will have to repeat this step every time you create a new directory where you want to allow the webserver to create files!

Read the entire lab so you see the requirements and know what is coming.

  1. Page class: We discussed in class about using a Page class for all pages that you create for your website, and I have provided on the website the source of the Page that I used (see the first PHP lecture links).
    • Download and modify the page.inc.php from the website to create your own version of the Page class – the styles, header and footer (if exists) information should approximately match your existing unit website.
    • To test your Page, copy-paste the following code in a new CGI file submit.php. Make sure the quotes are copied correctly - delete them and re-type if they look weird. Run your script by typing https://mope.academy.usna.edu/~mXXXXXX/Lab07/submit.php , where XXXXXX is your alpha, in the address bar of the browser.
      <?php
      require_once('page.inc.php');
      
      $page = new Page("test PHP");
      
      $page->content = "<h1> This is hello world, PHP style! My Page works</h1>";
      
      $page->display();
      ?>
      
  2. Form:You should have a file that contains a form from Lab03 (or later), copied into Lab07. If that file is not called form.html, rename it form.html. Your form should contain one (or more!) instance of the following input types: text, password, checkbox, radio buttons, submit. Your form will likely contain more than just these. Make sure all your input fields whose values should be sent to the server (e.g. input, select, textarea) have a name. See Hint#1 about checkboxes. Modify the form in your Lab07 directory so that when you click the submit button, it invokes your new CGI program submit.php. For testing, modify your CGI program so that it reads in at least one value from your form and displays the value in its resultant HTML output.
  3. Validity check: Modify submit.php to validate some of the input that your form provides to your CGI program.  If an error is detected, your program should state explicitly what the error was, and tell the user to hit the back button and try again (see extra credit for a better approach). You may find it useful to go back to the form in Lab03 (using the appropriate URL in the browser), fill in some values, and click submit to see how your data is received by the CGI program we gave you earlier. You may also find it useful to create a new class, for example "registration", or "signup", or whatever is meaningful for your form, and have a method in that class that does validation. This would be similar with the "Person" class we used during lecture. For the validation you should at a minimum check the following (you can of course do more if you like):
    • For your first (or only) text field, ensure it is filled out (not empty)
    • For your first (or only) set of checkboxes, ensure at least one checkbox is selected. See the "Hints" section for a discussion about checkboxes.
    • For your first (or only) set of radio buttons, ensure at least one radio button is selected.
    • At least one of your checks must involve a pattern match using regular expressions, e.g. to verify a phone number, SSN, etc. is valid. See tutorialspoint PHP regular expressions. You can modify your form if you wish (to create a parameter that is more amenable to validating with a pattern match).
  4. Confirmation: Modify your PHP code (submit.php and/or the class you created for registration/signup) so that, if the variables pass all the validation tests above, the program prints out a user friendly confirmation. This confirmation should display the value of all the variables that were provided in a user-friendly manner.
    A page with a raw list of variables and their values is not so friendly -- you should at least have a reasonable title, some welcome text, then a reasonable confirmation of their values. Imagine this was on your website and you wanted to present a reasonable appearance to someone that just submitted your form.  Example: 'Your reservation for 4 people has been confirmed. The details for this reservation are as follows''
  5. Logging: Modify your code (submit.php and/or the class you created for registration/signup) so that it records all of the form fields in a file called LOG.txt. You will want to append to this file (so it contains a history of everything that has happened). If and only if the values pass your 'Validity' test, then write all the form's parameters provided by the user to LOG.txt. The values provided by a single user should all be on a single line. Use a tab ('\t') as a separator.

    Here's an example of how a simple Log file might look after 3 users submitted forms that passed the Validity test:

  6. Documentation: ensure you have appropriate comments in your PHP scripts.
  7. Important final step: create two links in your top-level default.html page under the heading 'Lab07'
    1. Under the name 'Form', make a link to your Lab07 form page (Lab07/form.html or Lab07/form.php)
    2. Under the name 'LOG.txt' make a link to your log file

Your HTML web page must be constructed using Notepad++ or a similar text-only editor. The use of programs such as Microsoft Word, Microsoft Frontpage, DreamWeaver, ColdFusion, Mozilla Composer, etc. will be considered an honor offense.

Extra Credit

For a nominal amount of extra credit do some/all of the following:
(NOTE: saving a backup copy of your working lab is recommended before starting on this)

  1. If your program finds a validation problem with an input (such as a missing value or a number that is too big), a much better way to handle this is to have your CGI program regenerate the form with all of the values provided by the user filled in, and values that had a problem highlighted.  Of course there should be a submit button so the user can modify the values and resubmit back to the CGI program.
  2. Write a new CGI program (in PHP) that reads your LOG file and generates a summary report of the submissions.  Be sure that your LOG.txt has enough data in it to make this report at least a little interesting.

Deliverables

  1. The file displaying the form for this lab should be called "form.html" or "form.php" (without the quotes).
  2. Your main PHP file should be called 'submit.php'
  3. You should have all the pieces working described in 'Requirements' above.
  4. You should have the two links in default.html that are described above.
  5. All of your files should be in a folder called "Lab07" (without the quotes) on the W drive. Your instructor will assume that your web pages are viewable at http://mope.academy.usna.edu/~mXXXXXX/Lab07/form.html or http://mope.academy.usna.edu/~mXXXXXX/Lab07/form.php where XXXXXX is your alpha number. You may want to check that this URL is viewable and that everything works correctly from a computer where somebody else is logged in. If you've goofed and linked to a file on your X drive, this will help you catch it!
  6. Turn in the following hardcopy at the beginning of class on the due date, stapled together in the following order (coversheet on top):
    1. A completed assignment coversheet. Your comments will help us improve the course.
    2. A printout of the source of ALL your PHP files. This should be printed from the editor, as the browser:view-source does not show the PHP code
    3. A screen-shot of your browser window showing the confirmation message you displayed after a user submitted a form that passed the validity checks.

Additional Hints/Clarifications

  1. Checkboxes are interesting because more than one can be checked. If you give the same name (in HTML) to all your checkboxes and the name ends in "[]", for example 'mychecks[]', and if you write something like this in PHP:
    $checks = $_POST["mychecks"];
    $checks will contain an array with the values of all of the 'mychecks' checkboxes that were checked.
  2. If your code is not working, read the error messages displayed in your browser. Then, add extra echo commands to see what parts of the program are executing and what the values being used are. Here is a list of PHP errors and the likely solutions: PHP errors explained