1 / 16

Information Visualization Course

Information Visualization Course. Web Design. Prof. Anselm Spoerri aspoerri@rutgers.edu. Lecture 12 – Overview. Group Project Deliverables Grading Big Picture for Group Project Get & Display Data | $query | Parameters | Thumbnails | Embed | HTML

altessa
Download Presentation

Information Visualization Course

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  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 …

More Related