1. 1 DIG 3134 Lecture 9. Dynamic HTML Controls Michael Moshell University of Central Florida Media Software Design

2. 2 The Objectives: Learn how to create controls based on the contents of a data file Learn how to accept and process commands through that interface.

3. 33333333333333 Our Design Task: Pundex Our goal: build a system that provides an onscreen list of puns. The user selects one (by radio button) and that pun description and corresponding image are shown on the screen. The entire system should be table-driven. That is, everything about the display should come from a set of text files and image files – NOT from any limits built into the software. Kornegay.net Somethingpunny.tumbir.com

4. 444444444444444 Our Design Task: Pundex Here's a file that we want to use for our AutoPun System: pundex.txt KeyphraseDescriptionImage file I blew itflutemistake.txtfluteplayer.jpg Tune a fishtunafish.txttuna.jpg Catastrophecatasstrophy.txtcatastrophe.jpg Etc … The output should include a title, a text and a picture for the selected pun. Fulltimewow.blogspot.com Kornegay.net Studentoftheworld.info Somethingpunny.tumbir.com

5. 555555555555555 Our standard design process Inputs: The pundex file which lists the puns, texts, images. A directory containing text files that explain the puns A directory containing image files to illustrate the puns. A set of radio buttons on Screen 1 to select the pun. Outputs: Screen 1: display list of pun titles, radio buttons, GO button. Screen 2: display the pun, show a CONTINUE button. Functionality: If no input or "CONTINUE", display screen 1. If GO, use the number from radio button to select a pun. State: None. We will reload the pundex from file at every cycle. Fulltimewow.blogspot.com

6. 6666666666666666 Step 1: Build a text-reading function #textloader: function textloader($whatfile) { if (!file_exists($whatfile)) { print "Sorry, can't find $whatfile."; exit; } else { $textarray=file($whatfile); return $textarray; } }# textloader EXAM ALERT: Look up and UNDERSTAND Each of the Green built-in functions

7. 777777777777777777 A more detailed way to read a file #textloader2: function textloader($whatfile) { $thefile = fopen($whatfile, "r"); $i=1; while (!feof($theFile)) { $textarray[$i] = fgets($theFile); $i++; } fclose($theFile); return $textarray;}# textloader } EXAM ALERT: Look up and UNDERSTAND Each of the Green built-in functions

8. 888888888888888888 A more detailed way to read a file #textloader2: function textloader($whatfile) { $thefile = fopen($whatfile, "r"); $i=1; while (!feof($theFile)) { $textarray[$i] = fgets($theFile); $i++; } fclose($theFile); return $textarray;}# textloader } Why am I showing you a complex approach when good old file() is simpler? Because you need to READ code as well as write it.

9. 99999999999999999999 The pundex.txt file: KeyphraseDescriptionImage File I blew itflutemistake.txtfluteplayer.jpg Tune a fishtunafish.txttuna.jpg Catastrophecatasstrophy.txtcatastrophe.jpg Internally, it is actually represented like this ("tab delimited text") Keyphrase\t Description\t Image File I blew it\t flutemistake.txt\t fluteplayer.jpg Tune a fish\t tunafish.txt\t tuna.jpg Catastrophe\t catasstrophy.txt\t catastrophe.jpg \t is the TAB character. It is invisible when printed.

10. 10 Step 2: Build a display function function displayPunTable($pundex) {print " "; $row=0; foreach ($pundex as $punline) {$punitems=explode("\t",$punline); // The items in the puntable are separated by tabs if (!empty($punitems[0])) { if ($row>0) $buttonitem="<input type='radio' name='punselect' value=$row>"; else $buttonitem=' '; print " $buttonitem ". $punitems[0]." "; $row++; } } print " "; } #displayPunTable

11. 11 Step 2: Build a display function function displayPunTable($pundex) {print " "; $row=0; foreach ($pundex as $punline) {$punitems=explode("\t",$punline); // The items in the puntable are separated by tabs if (!empty($punitems[0])) { if ($row>0) $buttonitem="<input type='radio' name='punselect' value=$row>"; else $buttonitem=' '; print " $buttonitem ". $punitems[0]." "; $row++; } } print " "; } #displayPunTable

12. 12 Step 2: Strings and Arrays $punline looks like this: "I blew it\tflutemistake.txt\tfluteplayer.jpg" $punitems=explode("\t",$punline); $punitems looks like this after the 'explode' function does its work: $punitems[0] ="I blew it"; $punitems[1]="flutemistake.txt"; $punitems[2]="fluteplayer.jpg";

13. 13 Step 2: Build a display function function displayPunTable($pundex) {print " "; $row=0; foreach ($pundex as $punline) {$punitems=explode("\t",$punline); // The items in the puntable are separated by tabs if (!empty($punitems[0])) { if ($row>0) $buttonitem="<input type='radio' name='punselect' value=$row>"; else $buttonitem=' '; print " $buttonitem ". $punitems[0]." "; $row++; } } print " "; } #displayPunTable

14. 14 Step 2: Build a display function In the HTML that is generated, if we 'view source' we will see: Keyphrase I blew it Tune a fish Catastrophe The resulting screen looks like this:

15. 15 Get that much working. Then … We now need code to PROCESS these radio buttons. Examine the else if ($act=="GO") case in punshow.php We see another explode, to break up the $Pundex table. But now It's inside a foreach loop. So we now have arrays inside an array! $puninfo[0] = array ('Keyphrase', 'Description', 'Image File'); $puninfo[1]= array ('I blew it', 'flutemistake.txt', 'fluteplayer.jpg'); etc $punselect=$_POST['punselect']; // gets the Radio Button data. $mypun=$puninfo[$punselect]; // so, if $punselect was 1, we have This result: $mypun[0]='I blew it'; $mypun[1]='flutemistake.txt'; $mypun[2]=…

16. 16 And the result is … Examine the code Demonstrate the program Edit the configuration files and run it again.

17. 17 A diagnostic tool: "logprint" $Testnumber=3; // at the top of the program, easy to find and change function logprint($what, $when) { global $Testnumber; if ($Testnumber==$when) print "LP: $what "; } # logprint Then, in the code, if you want to see the value of variables X and Y: logprint("x=$x, y=$y",3); // and the output will be LP: x=3 Then to turn off the test-prints, after the problem is solved: $Testnumber=4;

18. 18 One last trick: "implode" Explode transformed a string into an array (Each cell contained a part of the string, broken at the \t characters) But what does implode do? Just the opposite! Array into string. If $ardata[0]="dog"; and $ardata[1]="cat" and $ardata[2]="snake", $string=implode('K ',$ardata); Then $string="dogKcatKsnake"; The template for the implode function looks like this: string implode([string $glue,] array $pieces) these square brackets mean 'optional parameter'.

19. 19 One last trick: "implode" string implode([string $glue,] array $pieces) these square brackets mean 'optional parameter'. This is unusual because normally optional parameters come LAST not FIRST. So I looked it up. "For historical reasons, implode accepts its arguments in either order." (So it must recognize them by data type, looking for an array and a string.) If there is no string, then no glue character is used. The array's rows are concatenated with no separators.