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.