Anatomy of a Basic Web Application

Web Architecture and Information Management [./]
Spring 2011 — INFO 153 (CCN 42509)

Erik Wilde and Dilan Mahendran, UC Berkeley School of Information
2011-02-23

Creative Commons License [http://creativecommons.org/licenses/by/3.0/]

This work is licensed under a CC
Attribution 3.0 Unported License
[http://creativecommons.org/licenses/by/3.0/]

Contents Erik Wilde and Dilan Mahendran: Anatomy of a Basic Web Application

Contents

Erik Wilde and Dilan Mahendran: Anatomy of a Basic Web Application

(2) Abstract

The vast majority of web sites today are no longer static HTML pages but database-driven web applications. Today we'll look at a simple database-driven web application in detail, to see how its various components--HTML forms, application server, and database--work together.



Forms Basics

Outline (Forms Basics)

  1. Forms Basics [10]
  2. Structuring Forms [3]

(4) HTTP Web Services



(5) Forms Mechanics

img/form-mechanics.png

(6) Forms Markup



(7) Forms Elements (User View)


Text:
Password:
Checkbox:
Radio Button:
Text Areas:
Selection:
Multiple Selection:
File Upload:
Hidden:
Submit:


(8) Forms Elements (Source View)

<form action="http://stevex.net/dump.php" method="POST" enctype="multipart/form-data"><table>
	<tr><td>Text:</td><td><input type="text" name="text" value="text input"/></td></tr>
	<tr><td>Password:</td><td><input type="password" name="password" value="hidden text"/></td></tr>
	<tr><td>Checkbox:</td><td><input type="checkbox" name="check" value="1"/> <input type="checkbox" name="check" value="2"/> <input type="checkbox" name="check" value="3"/></td></tr>
	<tr><td>Radio Button:</td><td><input type="radio" name="radio" value="1"/> <input type="radio" name="radio" value="2"/> <input type="radio" name="radio" value="3"/></td></tr>
	<tr><td>Text Areas:</td><td><textarea name="textarea" rows="2" cols="20"/></td></tr>
	<tr><td>Selection:</td><td><select name="select"><option selected="selected">XML</option><option>SGML</option></select></td></tr>
	<tr><td>Multiple Selection:</td><td><select name="mselect" multiple="multiple"><option>242</option><option>290-3</option><option>290-13</option></select>
	<tr><td>File Upload:</td><td><input name="file" type="file"/></td></tr>
	<tr><td valign="top" align="right">Hidden:</td><td><input type="hidden" name="hidden" value="hidden input"/></td></tr>
	<tr><td>Submit:</td><td><input name="submit" type="submit"/></td></tr>
        </table></form>


(9) Date Entry

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>JavaScript Datepicker</title>
  <script type="text/javascript" src="date-picker.js"></script>
  <link rel="stylesheet" type="text/css" href="date-picker.css">
 </head>
 <body>
  <form action="http://stevex.net/dump.php" method="GET">
   <input type="text" name="date">
   <input type="button" value="calendar" onclick="displayDatePicker('date');">
   <input type="submit" value="submit date">
  </form>
 </body>
</html>


(10) Forms and GET



(11) Forms and POST



(12) POST Form Processing



(13) Processing of Form Data

  <p>Query Parameter Test:</p>
  <p>test: <?php echo $_REQUEST["test"]; ?></p>
  <p>name: <?php echo $_REQUEST["name"]; ?></p>
  <p>field: <?php echo $_REQUEST["field"]; ?></p>


Structuring Forms

Outline (Structuring Forms)

  1. Forms Basics [10]
  2. Structuring Forms [3]

(15) Form Usability



(16) Labels

<tr><td>Text:</td><td><input type="text" name="text"/></td></tr>
        <tr><td>Password:</td><td><input type="password" name="password"/></td></tr>
<tr>
        <td><label for="textctrl">Text:</label></td>
        <td><input type="text" name="text" id="textctrl"/></td>
        </tr>
        <tr>
        <td><label for="pwdctrl">Password:</label></td>
        <td><input type="password" name="password" id="pwdctrl"/></td>
        </tr>


(17) Tabbing in Forms



Erik Wilde and Dilan Mahendran: Anatomy of a Basic Web Application

(18) Conclusions



2011-02-23 Web Architecture and Information Management [./]
Spring 2011 — INFO 153 (CCN 42509)