Date post: | 13-Dec-2015 |
Category: |
Documents |
Upload: | primrose-henry |
View: | 215 times |
Download: | 1 times |
1
DIG 3134
Lecture 9. Dynamic HTML Controls
Michael MoshellUniversity of Central Florida
Media Software Design
2
The Objectives:• Learn how to create controls based
on the contents of a data file
• Learn how to accept and processcommands through that
interface.
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
444444444444444
Our Design Task: Pundex
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.jpgTune a fish tunafish.txt tuna.jpgCatastrophe catasstrophy.txt catastrophe.jpgEtc …
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
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
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 andUNDERSTANDEach of theGreen built-infunctions
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 andUNDERSTANDEach of theGreen built-infunctions
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 Ishowing youa complex approach whengood old file()is simpler?
Because youneed to READcode as wellas write it.
99999999999999999999
The pundex.txt file:
Keyphrase Description Image FileI blew it flutemistake.txt fluteplayer.jpgTune a fish tunafish.txt tuna.jpgCatastrophe catasstrophy.txt catastrophe.jpg
Internally, it is actually represented like this ("tab delimited text")
Keyphrase\t Description\t Image FileI blew it\t flutemistake.txt\t fluteplayer.jpgTune a fish\t tunafish.txt\t tuna.jpgCatastrophe\t catasstrophy.txt\t catastrophe.jpg
\t is the TAB character. It is invisible when printed.
1010101010101010101010101010101010
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 tabsif (!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
111111111111111111111111111111111111
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 tabsif (!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
1212121212121212121212121212121212121212
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";
13131313131313131313131313131313131313
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 tabsif (!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
14141414141414141414141414141414141414
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:
1515151515151515151515151515151515151515
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 nowIt'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 haveThis result:$mypun[0]='I blew it'; $mypun[1]='flutemistake.txt'; $mypun[2]=…
16161616161616161616161616161616161616161616
And the result is …
Examine the code
Demonstrate the program
Edit the configuration files and run it again.
171717171717171717171717171717171717171717
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;
181818181818181818181818181818181818181818
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'.
191919191919191919191919191919191919191919
One last trick: "implode"
string implode([string $glue,] array $pieces)
these square brackets mean 'optional parameter'.
This is unusual because normally optional parameters come LASTnot FIRST. So I looked it up.
"For historical reasons, implode accepts its arguments in eitherorder." (So it must recognize them by data type, looking for an arrayand a string.)
If there is no string, then no glue character is used. The array'srows are concatenated with no separators.