Information Visualization Course
Web Design
Prof. Anselm Spoerri
aspoerri@rutgers.edu
© Anselm Spoerri
Lecture 11 – Overview
Forms in HTML
MySQL & PHP code
Sample files have been uploaded to Sakai > Resources > PHP Files
– Browse View
– Gigapan
(practiced in Short Assignment 2)
| Photosynth | Video
– Attach Hyperlink to Thumbnail to Link to Individual Item page
– Individual Item based on supplied id
– Gigapan | Photosynth | Video
– Dynamic Browse Page based on supplied parameters in URL
– SQL Query to support Browse page
– How to Extract Parameters in URL
– Dynamic Browse Page with Menus
– Menus for specifying Query Parameters
© Anselm Spoerri
HTML Forms
HTML Forms
‒ Solicit feedback or information from visitors
‒ Collection of data entry fields, labels, buttons
‒ Processing script on server (PHP)
‒ Never assume anything about data
© Anselm Spoerri
HTML Form – Form Tag
1. <form> form elements </form>
2. Inside <form> tag
– method attribute specifies
way in which data is to be sent
– method="get" (limited data amount)
method="post"
– action attribute specifies
URL to which user data is to be sent
<form method="get" action="formdata.php">
3. label and form element
<form method="post" action="mailto:youremailaddress">
<label>First Name: </label>
<input type="text" name="firstname" />
</form>
© Anselm Spoerri
HTML Form – Form Elements and Organization
Form Elements
Text Field
<input type="text" name="firstname" />
Text Area
<textarea rows="10" cols="30" name="texta">text</textarea>
Password
<input type="password" name= "password" />
Radio Button
Checkbox
Menu
<input type="radio" name= "y_n" value="yes" />Yes<br />
<input type="checkbox" name="vehicle" value="Bike" />
<select name="cars"><option value="kia">Kia</option></select>
Submit Button
Reset Button
<input type="submit" value="Submit" />
<input type=“reset" value="Submit" />
name needed to reference input element
Organize Form Elements
<fieldset id="idname"><legend align=“left”>Legend
Text</legend>Form Elements</fieldset>
© Anselm Spoerri
Form Example
http://whereru.rutgers.edu/iti320su13/PHPfiles/lec11/browseMenusLinks_spoerri.php
$actionString = "browseMenusLinks_spoerri.php"
<form method="get" action="$actionString">
<label>
// this.form.submit is used that the page gets updated when the form is changed
Campus
<select name="campus" size="1" onchange="this.form.submit()">
<option value="all">All</option>
<option value="1">New Brunswick</option>
<option value="2">Newark</option>
<option value="3">Camden</option>
</select>
</label>
</form>
© Anselm Spoerri
SQL Query to support Browse page
Want to be able to search by Type, Campus, Category
How?
Database Table:
$db_table = 'whereru_all';
// description in Sakai Resources
Select
$query = "SELECT * FROM $db_table
WHERE type='gigapan'
AND campus='Newark'
AND category='Architecture
& History'
ORDER BY date_created DESC
";
© Anselm Spoerri
Dynamic Browse Page
browse.php?type=gigapan&campus=Newark&category=Athletics
databaseConnect_browse_general_spoerri.php?type=gigapan&campus=New%20Brunswick&category=Athletics
extract($_GET, EXTR_PREFIX_ALL, 'fromget');
if (!$fromget_type) { $fromget_type = 'gigapan'; }
if (!$fromget_campus) { $fromget_campus = 'New Brunswick'; }
if (!$fromget_category) { $fromget_category = 'Architecture & History'; }
if (!$fromget_page) { $fromget_page = 1; }
SQL Query:
$query = "SELECT * FROM $db_table
WHERE type=\"$fromget_type\" AND campus=\"$fromget_campus\"
AND category=\"$fromget_category\"
ORDER BY date_created DESC";
© Anselm Spoerri
Dynamic Browse Page with Menus
http://whereru.rutgers.edu/iti320su13/PHPfiles/lec11/browseMenusLinks_spoerri.php
$actionString = "browseMenusLinks_spoerri.php";
// "browseMenusLinks_lastname.php";
extract($_GET, EXTR_PREFIX_ALL, 'fromget');
Use sanitizeString function to sanitize form data
Convert $fromget_campus numerical code into campus name
Specify WHERE string component of $query using IF statements
Form element with action
echo("<form method=\"get\" action=$actionString>");
Read Comments in code
© Anselm Spoerri