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

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

3. © Anselm Spoerri 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. © Anselm Spoerri 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. © Anselm Spoerri Big Picture for Group Project Get & Display Data $query Parameters via URL Thumbnails Embed Media HTML in PHP Browse Page

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

7. © 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";

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

9. © Anselm Spoerri Supply Parameters via URL Use ? after filename extension Example: databaseConnect_individual_gigapan_spoerri.php?id=50databaseConnect_individual_gigapan_spoerri.php?id=50 Provide parameter name = parameter value Example: 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

10. © 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 $_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. © Anselm Spoerri Thumbnail Images Use thumb.php and provide t and w and h parameter Gigapan: t= 1 Photosynth: t= 2 Video: t= 3 w and h specify width and height of thumbnail Remember: you have to escape \ the quotation marks if used inside an echo statement

12. © Anselm Spoerri Embed Media Gigapan: Photosynth: Video: Remember: you have to escape \ the quotation marks if used inside an echo statement

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

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

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

16. © Anselm Spoerri 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 …