1 / 19

DIG 3134 Lecture 9. Dynamic HTML Controls Michael Moshell University of Central Florida

Media Software Design. DIG 3134 Lecture 9. Dynamic HTML Controls Michael Moshell University of Central Florida. 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. Our Design Task: Pundex.

derron
Download Presentation

DIG 3134 Lecture 9. Dynamic HTML Controls Michael Moshell University of Central Florida

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  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. Our Design Task: Pundex Kornegay.net 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. Somethingpunny.tumbir.com 3 3 3 3 3 3 3 3 3 3 3 3 3

  4. Our Design Task: Pundex Fulltimewow.blogspot.com Here's a file that we want to use for our AutoPun System: pundex.txt Keyphrase Description Image file I blew it flutemistake.txt fluteplayer.jpg Tune a fish tunafish.txt tuna.jpg Catastrophe catasstrophy.txt catastrophe.jpg Etc … The output should include a title, a text and a picture for the selected pun. Kornegay.net Studentoftheworld.info Somethingpunny.tumbir.com 4 4 4 4 4 4 4 4 4 4 4 4 4 4

  5. Our standard design process Fulltimewow.blogspot.com • 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. 5 5 5 5 5 5 5 5 5 5 5 5 5 5

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

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

  8. A more detailed way to read a file 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. #textloader2: function textloader($whatfile) { $thefile = fopen($whatfile, "r"); $i=1; while (!feof($theFile)) { $textarray[$i] = fgets($theFile); $i++; } fclose($theFile); return $textarray; }# textloader } 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8 8

  9. The pundex.txt file: Keyphrase Description Image File I blew it flutemistake.txt fluteplayer.jpg Tune a fish tunafish.txt tuna.jpg Catastrophe catasstrophy.txt catastrophe.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. 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9 9

  10. Step 2: Build a display function function displayPunTable($pundex) { print "<table border=1>"; $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 "<tr><td>$buttonitem</td><td>". $punitems[0]."</td></tr>"; $row++; } } print "</tr></table>"; } #displayPunTable 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10 10

  11. Step 2: Build a display function function displayPunTable($pundex) { print "<table border=1>"; $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 "<tr><td>$buttonitem</td><td>". $punitems[0]."</td></tr>"; $row++; } } print "</tr></table>"; } #displayPunTable 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11 11

  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"; 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12 12

  13. Step 2: Build a display function function displayPunTable($pundex) { print "<table border=1>"; $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 "<tr><td>$buttonitem</td><td>". $punitems[0]."</td></tr>"; $row++; } } print "</tr></table>"; } #displayPunTable 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13 13

  14. Step 2: Build a display function In the HTML that is generated, if we 'view source' we will see: <tr><td></td><td>Keyphrase </td></tr> <tr><td><input type='radio' name='punselect' value=1></td><td>I blew it </td></tr> <tr><td><input type='radio' name='punselect' value=2></td><td>Tune a fish</td></tr> <tr><td><input type='radio' name='punselect' value=3></td><td>Catastrophe</td></tr> The resulting screen looks like this: 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14 14

  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]=… 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15 15

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

  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 <br />"; } # 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; 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17 17

  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'. 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18 18

  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. 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19 19

More Related