Information Visualization Course

1. Information Visualization Course Web Design Prof. Anselm Spoerri aspoerri@rutgers.edu

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

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

4. Group Project Grading • Technical Quality 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). • Design Quality 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).

5. Big Picture for Group Project • Get & Display Data • $query • Parameters via URL • Thumbnails • Embed Media • HTML in PHP • Browse Page

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

7. $query • $query = "SELECT * FROM $db_table"; • $query = "SELECT * FROM $db_table WHEREcampus='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 WHEREtype='gigapan' • AND campus='Newark' AND category='Architecture & History' • ORDER BY date_created DESC";

8. $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

9. Supply Parameters via URL • Use ? after filename extensionExample: databaseConnect_individual_gigapan_spoerri.php?id=50 • Provide parameter name = parameter valueExample: <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 variableand use & for subsequent variables

10. 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 $_GET 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!

11. Thumbnail Images • Use thumb.php and provide t 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

12. 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/x-shockwave-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

13. 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>");

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

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

16. Recap – Troubleshooting • Check Easy Things First Spelling of file name, variables … Is variable defined? = versus == ; Closing Quotes and Brackets  vertical quotes in PHP Uploaded into correct folder project folder in team folder Spelling of file name, variables …