© Anselm Spoerri

Web Design

Information Visualization Course

Prof. Anselm Spoerriaspoerri@rutgers.edu

© 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

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.

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

© Anselm Spoerri

Big Picture for Group Project

Get & Display Data

$query

Parameters via URL

Thumbnails

Embed Media

HTML in PHP

Browse Page

© 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 $_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!

© Anselm Spoerri

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

© 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/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

© 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

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 …