Information Visualization Course
© Anselm Spoerri

Lecture 12 – Overview
Group Project
‒ Deliverables
‒ Grading
Big Picture for Group Project
– Get & Display Data | $query | Parameters | Thumbnails | Embed | HTML
MySQL & PHP code
Sample files in Sakai > Resources > PHP Files
– Browse View for Gigapan | Photosynth | Video and Thumbnails with Links
– Individual Item based on supplied id for Gigapan | Photosynth | Video
– Dynamic Browse Page based on supplied parameters in URL
– Dynamic Browse Page with Menus
Recap
– Browse Page
– Individual Page
– Troubleshooting
© Anselm Spoerri

Group Project Deliverables
– Home page
– Browse page(s) with filter capabilities
– Individual pages for specific Gigapan, Photosynth or Video item
– Specify primary categories
– Interactive and Clear “you are here” indicator
– You can use CSS or image swap behaviors
– Hierarchical HTML Page Structure and controlled by CSS rules.
– PHP code and MySQL queries need to be created to dynamically generate required web pages using content stored in the whereRU database.
© Anselm Spoerri

Group Project Grading
of Deliverables
– Have the required types of pages been created, are they dynamically generated using PHP code & MySQL queries and does
it all work (hyperlinks, content and images etc).
of Deliverables
– Does the prototype have an attractive look & feel and have the
design principles covered in class been implemented, such as do the pages have a clear visual hierarchy (review lectures slides for more specific information).
© Anselm Spoerri

Big Picture for Group Project
© Anselm Spoerri

Get & Display Data from whereRU database
Assume connected to whereRU database
Specify $db_table appropriate for $query
– 'whereru_all' :need to specify type field and multiple items with same id
– 'whereru_gigapan' | 'whereru_photosynth' | 'whereru_video'
Specify $query
Fetch $result = mysql_query($query);
– How many rows in result table: $rows = mysql_num_rows($result);
Display $result use for loop: for ($j = 0 ; $j < $rows ; ++$j)
– $row = mysql_fetch_row($result); // returns array
– index to use to get specific field  consult whereruTables.doc
© Anselm Spoerri

$query
$query = "SELECT * FROM $db_table";
$query = "SELECT * FROM $db_table WHERE campus='Newark'";
$query = "SELECT * FROM $db_table ORDER BY date_created DESC";
$query = "SELECT * FROM $db_table WHERE campus='Newark' ORDER
BY date_created DESC";
$query = "SELECT * FROM $db_table WHERE type='gigapan'
AND campus='Newark' AND category='Architecture & History'
ORDER BY date_created DESC";
© Anselm Spoerri

$query – containing PHP variables
$query = "SELECT * FROM $db_table WHERE id=$id";
Note: since id field contains number, don’t need to place $id variable in quotes
$query = "SELECT * FROM $db_table WHERE type=
\"
$fromget_type
\"
AND campus= \" $fromget_campus \"
AND category= \" $fromget_category \"
ORDER BY date_created DESC";
Note: since type, campus, category fields contain strings, need to place PHP variables in quotes
© Anselm Spoerri

Supply Parameters via URL
Use
after filename extension
Example: databaseConnect_individual_gigapan_spoerri.php?id=50
Provide parameter name = parameter value
Example: <a href="individualGigapan.php?id=$row[$id]">
Use
to separate multiple parameter name & value pairs
Example: thumb.php?id=$row[$id]&t=1&w=84&h=42
Recap: to supply variables via URL need start with ?
for first variable and use & for subsequent variables
© Anselm Spoerri

Receiving Parameters in PHP browse.php
?
type=gigapan & campus=Newark & category=Athletics databaseConnect_browse_general_spoerri.php?type=gigapan&campus=New%20Brunswick&category=Athletics
Use
which contains parameter name & value pairs
Use extract
function to “unpack” $_GET and assign parameter to variable with prefix so not overwrite existing PHP variables
Example: extract($_GET, EXTR_PREFIX_ALL, 'fromget');
Create PHP variables that contain prefix _ and exact spelling of parameter
Example: $fromget_type
Recap: spelling of parameter name matters!
© Anselm Spoerri

Thumbnail Images
Use thumb.php and provide
and w and h parameter
Gigapan: t= 1
<img src="http://whereru.rutgers.edu/ thumb.php
?id=$row[$id]& t=1
&w=84&h=42" />
Photosynth: t= 2
<img src="http://whereru.rutgers.edu/ thumb.php
?id=$row[$id]& t=2
&w=84&h=42" />
Video: t= 3
<img src="http://whereru.rutgers.edu/ thumb.php
?id=$row[$id]& t=3
&w=84&h=42" />
w and h specify width and height of thumbnail
Remember: you have to escape \ the quotation marks if used inside an echo statement
© Anselm Spoerri

Embed Media
Gigapan:
<object type="application/x-shockwave-flash" style="width:$width"."px; height:$height"."px;" data="$row[$embed]" ><param name="movie" value="$row[$embed]" /></object>
Photosynth:
<iframe src=“$row[$embed]" frameborder="0" width="$width" height="$height" scrolling="no" marginheight="0" marginwidth="0"></iframe>
Video:
<object width="$width" height="$height"><param name="movie" value="$row[$embed]"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="$row[$embed]" type="application/xshockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="$width" height="$height"></embed></object>
Remember: you have to escape \ the quotation marks if used inside an echo statement
© Anselm Spoerri

HTML in PHP
Use echo function to “write” HTML code to page
echo function takes string as input
Remember to escape \ in HTML code that contains strings, such as CSS
Remember to have closing tag
Example: echo(“
<object type=\"application/x-shockwave-flash\" style=\"width:$width"."px; height:$height"."px;\" data=\"$row[$embed]\" >
<param name=\"movie\" value=\"$row[$embed]\" />
</object>
");
© Anselm Spoerri

Recap – Browse Page
Which Sample Page to Consult?
browseMenusLinks_lastname (form with pull downs) databaseConnect_browse_general_lastname
Code Structure used for Thumbnails? if and elseif structure
$t = 0; if ($mediaType == "gigapan") {
$t=1;
} elseif ($mediaType == "photosynth") {
$t=2;
} elseif ($mediaType == "video") {
$t=3; }
Which Page Linked to Thumbnails? Parameters Supplied?
databaseConnect_individual.php?id=$row[$id]&type=$mediaType
© Anselm Spoerri

Recap – Individual Page
Which Sample Page to Consult?
databaseConnect_individual_gigapan_lastname
Uses $db_table = 'whereru_gigapan';
 use 'whereru_all' if you want general individual page
 need to specify type field
Embed Code for Photosynth / Video? databaseConnect_table_photosynth_lastname databaseConnect_table_video_lastnane
Code Inspiration for Assigning Parameters to PHP variables?
browseMenusLinks_lastname databaseConnect_browse_general_lastname
Code Structure to use for Different Emded Code? if and elseif structure
© Anselm Spoerri

Recap – Troubleshooting
of file name, variables …
Closing Quotes and Brackets  vertical quotes in PHP
Uploaded into correct folder  project folder in team folder
of file name, variables …
© Anselm Spoerri