University of Washington, CSE 190M

Lab 4: Forms

Except where otherwise noted, the contents of this document are Copyright 2012 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.

original lab idea and code by Victoria Kirst and Jeff Prouty; revised by Brian Le and Marty Stepp

Valid HTML5 Valid CSS

Basic lab instructions

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:

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.

Exercise , output

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

expected output

Exercise : Displaying Form Data (~15 min)

(See example screenshot on next slide.)

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

Exercise , output

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

expected output

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.

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.

permissions 1 permissions 2

Exercise , output

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

expected output

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.

Exercise , output

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

expected output

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:

Exercise , output

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

expected output

Exercise : (h4x0rz only): Luhn Algorithm

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

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.

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.

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!