ITEC 325 2015spring ibarland

home—lects—hws
D2L—breeze (snow day)

hw03
sanitized html
and automated source-listings

Scenario

You are working for TriviaQwack, makers of a popular mobile game. They don't come up with their own trivia questions; instead they have users submit trivia questions (or “TQ”s as they say in the biz). You have been hired to create a web-page for letting people enter new questions. When they submit their form, they will see a response page summarizing the information they entered.

An example of filling out the form	The result of the processing the form

Your Task

For this homework: Make a web-form at https://php.radford.edu/~yourUserName/itec325/hw03/tq-edit-form.php (and keep all hw03 files together in this hw03/ folder) which submits to tq-edit-handle.php.

1. Your form need not look exactly like the example, but it does need to collect the same information. Likewise for the result of handling the form.

2. When printing values taken from the form, sanitize the HTML (that is, convert raw-text into equivalent html-text). A user should be able to enter (say) a description which includes characters like < and ' and newlines, and the resulting summary should show the same string as whas was entered, up to whitespace. (However, do show linebreaks, in the question and the answer.)

   You don't need to validate the form-data, though: you can assume the weight is a number in the indicated range, that at least one checkbox is checked, etc.

   Note that the checkboxes for the category should all have the same name attribute (and it should end in “[]”), so that you can retrieve it as an array in your form.

3. Make three files tq-edit-handle-demo{0,1,2}.php which each initialize an array that happens to be named $_POST, and then require tq-edit-handle.php.

   The three files should initialize it to: (0) an empty array; (1) an array with the “routine” values all shown in the example; and (2) an array where every field includes a value that an attacker might use. Your resulting page doesn't have to identify these problems, but it should not cause any errors or allow any html-injection. In particular, if an input field contains (say) an ampersand, then the resulting page should display the ampersand as typed.

4. Required functions, kept in utils.php with tests in utils-test.php.

   1. A function test which automates our previous test cases: it takes in an actual and expected value, and prints a loud error message if they're not equal; if they are equal, it simply prints “.”.

      We will see in class this week, how to use preg_replace to replace every \s+ (1-or-more-whitespaces) with a single space-character. Your tests are free to do this, so that your expected-strings-of-html aren't so sensitive to spaces.

      You are free to refine this function. For example, You may optionally define a constant¹ (say) “QUIET_ON_SUCCESS” which controls whether a successful test prints nothing (as opposed to “.”). Or, you might have a global counter which keeps track of how many tests have failed/passed. If you include a feature that you later find particularly helpful in developing/testing your own code, be sure to let me know!

      This function only prints (doesn't return anything); no tests are needed for it.

   2. Write a function checkbox which takes in an array of strings (checkbox-descriptions) (and, a group-name), and returns a string that happens to be valid html for a series of checkboxes. The string should include newlines, and (if you want) each line might start with (say) 6 spaces, to serve as indentation.

      For example, calling checkboxes( 'family', array('Brother', 'Sister', 'Pet') ) would return html which renders as something like:
      Brother
      Sister
      Pet
      
      You'll probably want to write a sample series of checkboxes by hand, to serve as your test cases' expected-output. Use label tags to group each checkbox with its adjacent text.

   3. A function radioSet which takes in an array of strings (and any other necessary arguments), and returns a string of HTML for a bank of related radio buttons. Use the array-value for what is displayed as a button's label, and the array-key for that button's value.

      Hint: make a test case or two, first! This gets you thinking about what desired html you want to create, as well as what other arguments might be needed.

      It's fine to have the buttons arranged differently than the screenshot (in particular: they can be in a long line/list).

   4. A function show_file_info, which takes in an a filename, start-time, and end-time, and it prints (not returns):

      • A horizontal-rule (“hr” tag).
      • the filename, centered and rather prominent; it should also be link to the file itself (call your function hyperlink). Somehwere, include an id attribute which happens to also be the file's name, so that you can later call toc on all the filenames.
      • the last-modified date (see filemtime),
      • and the result of calling highlight_file_between (see below) appropriately: from the final-deadline (2015-Feb-20 11:00), until a few weeks after semester ends (2015-Jun-01).
      You may include further information or HTML formatting/styling, as you like, to make the output render more effectively.

      No test cases required — this function prints, and does not return anything.

   5. The function highlight_file_between, which takes in a filename and two dates, and either returns the result of highlight_file, or a message about availability dates. See the repeated code in hw02-soln!

      No test cases required. You may have this function print, or (if you prefer) return a string.

   You of course are welcome to have further utility/helper functions as you like.
5. Your file index.php should include:
   • your name and the class;
   • a link to your form;
   • a link to the homework assignment;
   • a table-of-contents of all your files,
   • followed by the results of show_file_info on each file.

   Use scandir('.') to get the filenames, but don't process the files "." or ".." (and ideally they shouldn't be in the table-of-contents, either).

   Hint:Some if-else statements are acceptable, but if you want to show off your skillz, try array-diff

   I will visit the URL https://php.radford.edu/~yourUserName/itec325/hw03/index.php to grade your work. If that URL is not accessible, you will get a 0 for that portion of the grading!

Other requirements

• Each file start should start with with a PHP or HTML comment with your name, class, etc. (after a doctype declaration and perhaps <html>).
• Use meaningful variable names, function names, and good comments as needed.
• Write functions (both php and javascript) as appropriate, to avoid repeated work.
  I recommend writing functions that return strings rather than print (as convenient²), and including one or two test-cases as examples. Writing the test-case first often clarifies exactly what your code needs to return.
• Use standard XHTML tags and make sure any javascript does not use browser-specific constructs.
• All code/html should be well formatted with appropriate white space and indentation so it is easy to read.
• Strive to minimize lines that wrap.
• If you have any questions, use the discussion board.
• Do not modify your final submission after the due-date; if you want to make changes, copy all your files to a new directory and work on those. (Linux: use cp -pr to preserve timestamps and copy directories recursively.)

• Please run/check your program/html incrementally — don't write huge amounts of the assignment w/o even running it.

home—lects—hws
D2L—breeze (snow day)

©2014, Ian Barland, Radford University Last modified 2015.Feb.18 (Wed)

Please mail any suggestions (incl. typos, broken links) to ibarlandradford.edu