,

Lab :

Except where otherwise noted, the contents of this document are Copyright © Marty Stepp, Jessica Miller, and Victoria Kirst. All rights reserved. Any redistribution, reproduction, transmission, or storage of part or all of the contents in any form is prohibited without the author's expressed written permission.

thanks to former TAs Victoria Kirst, Jeff Prouty, Morgan Doocy, Brian Le for their work on these labs.

Basic lab instructions

• You may want to bring your textbook to labs to look up syntax and examples.
• Have a question? Ask a TA for help, or look at the book or lecture slides.
• We encourage you to talk to your classmates; it's okay to share code and ideas during lab.
• You are not expected to finish all of the exercises. Just do as much as you can in the allotted time. You don't need to finish the rest after you leave the lab.
• Before you leave, check in with a TA to get credit for your work.

Today's lab exercises

This week, we'll write code to allow a student to submit a credit card number in exchange for a good grade in this class. (Just a joke!)

The HTML page buyagrade.html will have a form that submits to sucker.php. Then sucker.php will output a web page to confirms that the student's money was taken.

Download the HTML file below (right-click, Save Target As...) to get started:

• buyagrade.html

Exercise : Creating a Form (~20 min)

(See example screenshot on next slide.)

Let's create an HTML form that POSTs its submitted data to a PHP program on a server.

• Download buyagrade.html. Upload it to Webster and point your web browser to it on Webster.
• Modify the HTML file by turning part of its contents into an HTML form.
  • Give name attributes to the form controls so they will be sent as query parameters; the names are up to you.
  • Some form controls (such as radio buttons) need value attributes.
  • Fill the Section drop-down list with choices MA through MH.
• Test your form parameters by temporarily setting its action attribute to:
  • http://webster.cs.washington.edu/params.php

Exercise , output

Your page should look like this. You can also try our runnable solution (don't peek at the source!).

Exercise : Displaying Form Data (~15 min)

(See example screenshot on next slide.)

• sucker.php

Now write the PHP page to handle the submitted form data. Start from the skeleton above.

• Tell your buyagrade.html to POST its data to sucker.php.
• Modify sucker.php to display the name, credit card number and type (Visa or MasterCard).
  • For now, the page doesn't need to save this information on the server.
  • Embed variables' values in HTML using PHP expression blocks such as <?= $foo ?>.

Exercise , output

Your page should look like this. You can also try our runnable solution (don't peek at the source!).

Exercise : Save Form Data (~15 min)

(See next two slides for example screenshot and file permission issues.)

Modify your sucker.php page to save the submitted data to a file suckers.txt.

• Use the following format:

  Ryan;MA;1234123412341234;visa
  Kevin W;MF;5963109385987345;mastercard
  Kimberly Todd;MC;7328904328904902;mastercard
  Marty Stepp;MC;4444100020003000;visa
  

• Also change your page's output to show the complete contents of this file to the user.
  • Place the file contents into an HTML <pre> element to preserve whitespace.
• You can read and write files using file_get_contents and file_put_contents.

Exercise , file permissions

If you see an error about "Permission denied", right-click the suckers.txt file in FileZilla and choose File Permissions.... In the box that appears, check the permission boxes for "Write" permission. Do the same for your lab4 folder itself; and also give the lab4 folder the "Execute" permission.

Exercise , output

Your page should look like this. You can also try our runnable solution (don't peek at the source!).

Exercise : Basic Data Validation (~10 min)

(See example screenshot on next slide.)

Update sucker.php to verify that all parameters exist and that the user did not leave any blank.

• You can check whether a particular parameter has been passed using the PHP function isset.
• You can check whether an element of $_GET or $_POST is blank by comparing it to the empty string, "".
  • You can also use the element itself as a Boolean test to see if it is "truthy" or "falsy".
• If the user did not fill in every field correctly, show an error message like on the next slide.
  • Give a "Try again" link that directs back to the initial buyagrade.html page.

Exercise , output

Your error message should look like this. You can also try our runnable solution (don't peek at the source!).

Exercise : Credit Card Check (~10 min)

(See example screenshot on next slide.)

Update your sucker.php file to further check the validity of the credit card number:

• Check to make sure the credit card number is composed of exactly 16 characters.
• Check to make sure that a Visa card number starts with a 4 and a MasterCard number starts with a 5.
• If the credit card doesn't pass the above checks, show an error like on the next slide.

Exercise , output

Your error message should look like this. You can also try our runnable solution (don't peek at the source!).

Exercise : (h4x0rz only): Luhn Algorithm

Update your sucker.php file to check credit card numbers with the classic Luhn checksum algorithm.

• The above Luhn link describes the algorithm and contains a poorly written implementation.
  • Or try to code it yourself. The next slides describe the algorithm's implementation.
• If the credit card doesn't pass the above checks, show the same error as from the previous exercise.

Exercise , algorithm description

from Building Java Programs:

A valid credit card number passes a digit-sum test known as the Luhn checksum algorithm. Luhn's algorithm states that if you sum the digits of the number in a certain way, the total sum must be a multiple of 10 for a valid number. Systems that accept credit cards perform a Luhn test before contacting the credit card company for final verification.

The algorithm for summing the digits is the following: Consider each digit of the credit card to have a zero-based index: the first is at index 0, and the last is at index 15. Start from the rightmost digit (index 15) and process each digit one at a time. For digits at odd-numbered indexes (15, 13, etc.), simply add that digit to the cumulative sum. For digits at even-numbered indexes (14, 12, etc), double the digit's value, then if that doubled value is less than 10, add it to the sum. If the doubled number is 10 or greater, add each of its digits separately into the sum.

• The next slide contains pseudo-code for the algorithm.

Exercise , algorithm pseudocode

from Building Java Programs:

sum = 0.
for (each digit of CC number, starting from the last index):
    if index is odd:
        add digit to sum.
    else:
        double the digit's value.
        if doubled value < 10:
            add doubled value to sum.
        else:
            split doubled value into its two digits.
            add first digit to sum.
            add second digit to sum.

• 4111111111111111 and 4408041254369873 are example numbers that pass the Luhn algorithm.

If you finish them all...

If you finish all the exercises, you can add any other content or code you like to your page.

If the lab is over or almost over, check with a TA and you may be able to be dismissed.

Great work!