ITEC325 array practice

TASK: write a function which takes in a bunch of URLs, and returns an html-ordered-list of those as clickable links.

Using arrays and nested loops, to create html radio-buttons

Design exercise: We want to set up a web-form, where people enter information about ~~Pokemon~~Okaymon.

For the monster's element (~~fire, grass, water~~candle, clover, puddle), what input-type should we use?

Solution: A drop-down is a natural fit.

The list of elements might change over time (adding new elements). Should the drop-down be hand-coded?

Solution: Of course not! We'll have an array of strings, and then have a function which takes in that array, and returns a (big long) string of html for the drop-down. That way we can have unit tests, re-usability, etc..

Each monster has some elements that they are weak to. How should we collect that?

Solution: A bunch of check-boxes seems reasonable.

And each monster also has some elements they are resistant to. So that'd be another bank of checkboxes. But wait: you can't be both resistant and weak to the same element. So what should the form do, as we mark various weaknesses/resistances?

Solution: Hmm, I guess we could have javascript which, when the "clover-resistant" checkbox is checked, goes and disables the "weak to clover" checkbox. Or should it be the other way — checking the second clover checkbox causes the first check to disapper? That might be a bit subtle to notice, for the user.

Is there a better way?

Solution: Yeah — within a single element, we should have radio buttons for resistant or weak-to. … I guess that means we also need a third radio-button for "neutral", since we might want to un-do one of the radio-button choices.
So we'll have a table — a row for each elements, and a columns for the different radio-buttons weak/neutral/strong. (In that order, presumably, to match our left-to-right standard progression.)

Will this scheme generalize to other purposes?

Solution: I can imagine a quiz, where each row is a question, and there are columns ranging from 1=disagree strongly, 3=neutral, 5=agree strongly (a “Likert scale”).

So we'll make this a php function, which takes in information and produces a (big long) string of html, for this 'radio-table'. A table-layout seems reasonable. What should the signature be?

Solution: We need to know what each column should be labeled, and also what each row should be labeled. So the function should take in two arrays of strings, and return a string:

            ; radioTable : array-of-string, array-of-string → string
            function radioTable( $rowNames, $colNames ) {
              return "stub";
              }

(We sketch out what we want the table to look like.)

Solution:

Implementation detail: this particular code happens to put the row-names on the right. If you want to make your radio tables have their row-names on the left, it's easy enough to change.

We can make a unit-test:

Solution:

test( radioTable( "fruitses", array("apple","banana","cantaloupe"), array("yucky","yummy") ),
<<<END_O_MY_EXPECTED_RESULT
<table id='fruitses'>
  <thead>
    <tr>
      <th>yucky</th>
      <th>yummy</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type='radio' name='???' value='???'/></td>
      <td><input type='radio' name='???' value='???'/></td>
      <td>apple</td>
    </tr>
    <tr>
      <td><input type='radio' name='???' value='???'/></td>
      <td><input type='radio' name='???' value='???'/></td>
      <td>banana</td>
    </tr>
    <tr>
      <td><input type='radio' name='???' value='???'/></td>
      <td><input type='radio' name='???' value='???'/></td>
      <td>cantaloupe</td>
    </tr>
  </tbody>
</table>
END_O_MY_EXPECTED_RESULT
);

It is left as an exercise to the reader: what should the name attribute be (so that each row has the same name, but each column a different name).

hint: Recall how arrays work with input-names: If one input's name-attribute is of the form … name='blah[goob]' value='peanut', and another input's name is of the form … name='blah[bark]' value='woof', then $_POST['blah'] will return array('goob'=>'peanut', 'bark'=>'woof'). This is neat, since if the table-rows are all related, then we can have the entire table's input-fields collected into a single array. I suggest doing this; it reasonably requires adding a third argument to radioTable, so that you can distinguish multiple radio-tables used within a single form.
(You might even make it an optional argument, and have radioTableRow create names-not-in-an-array when that argument isn't included! …Making a test-case for this idea can clarify what you might do.)

As well as some more trivial test cases:

test( radioTable( "tablish", array("rowwy"), array("colummy") ),
<<<EOT
<table id='tablish'>
  <thead>
    <tr>
      <th>colummy</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type='radio' name='???' value='???'/></td>
      <td>rowwy</td>
    </tr>
  </tbody>
</table>
EOT
);

test( radioTable( 'tablish', array(), array("colummy") ),
<<<EOT
<table id='tablish'>
  <thead>
    <tr>
      <th>colummy</th>
      <th></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
EOT
);

test( radioTable( 'tablish', array("rowwy"), array() ),
<<<EOT
<table id='tablish'>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>rowwy</th>
    </tr>
  </tbody>
</table>
EOT
);


test( radioTable( 'tablish', array(), array() ),
<<<EOT
<table id='tablish'>
  <thead>
    <tr>
      <th></th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>
EOT
);

We'll put these more trivial test-cases in order of smallest to biggest, since if they don't pass, they're easier to think through and fix.

We'll need this radiotable for the homework. Can we write a bunch of the code right now?

Solution: Sure! It'll be a main function which loops over the rows, and for each individual row it calls a helper to loop over each column. Which should we do together in class? [Class voted for the top-level function:]

; radioTable : string, string[], string[] → string
; Return a table of radio-buttons: 
; each row is a bank-of-radio-buttons for the corresponding element of $rowNames,
; and its `name` attribute is $id[$rowName].
; The allowed values are $colNames.
;
;
function radioTable( $id, $rowNames, $colNames ) {
    $headerRow = radioTableHeader( $colNames );
    $rowsSoFar = "";
    foreach ($rowNames as $rowName) {
        $rowsSoFar .= radioTableRow( $id, $rowName, $colNames ) . "\n";
        }
    return 
<<<EOT
<table id='$id'>
  <thead>
    $headerRow
  </thead>
  <tbody>
    $rowsSoFar
  </tbody>
</table>
EOT;            
    }

Writing each of radioTableHeader and radioTableRow are each similarly a straightforward loop. The only difficult part is figuring out what the name/value attributes will be, and that thinking was already accomplished above when you completed the test cases above!

Note that you should have test-cases for radioTableHeader and radioTableRow. But again, those will be easy since they've already been provided above (up to the name/value attributes). And since you need to have a firm grasp of what html you need before you start writing the function, so making the test cases is not actually any extra work.