HTML Form ProcessingWeb Client-Server ModelWhat is in an http request?Slide 4URL VariablesCan an http request send anything else?HTML FormsSummary: Data sent by clientWhat does the server do with the data?Variables provided by the server.ExampleSlide 12Get vs. PostGET vs. POSTDetailsOne more lookQuirks of Web-page Based InterfacesMechanics of Web-based InterfacesSynchronous CommunicationAsynchronous CommunicationWhy it appears AsynchronousBut…http is SynchronousConfused? Here is a SummaryStill Confused?Why is this important?Slide 27HTML Form ProcessingWeasel pp 247-270 (reference)Kookaburra pp 199-222 (read)Web Client-Server Modelhttp responsehttp requestSpecify the URL of the “file” you want.Specify the URL of the “file” you want.Send back the “file” to the client.Send back the “file” to the client.What is in an http request?•Obviously, the URL of the “file” you want.•Anything else?•Note: A URL not only helps you find the server, but it also tells the server what file you want.What is in an http request?•Information about the client browser–Firefox, IE, Safari, etc.–Browser Version–Platform (Windows, Unix, MacOS, etc.)•Also the URL itself can include variables–http://www.site.com/makepage.php?pageid=48&display=wideURL Variableshttp://www.site.com/makepage.php?pageid=48&display=wide•? Defines the URLs query string•pageid and display are query variables•& is a delimiter, i.e., put between query variablesCan an http request send anything else?Yes,•It can send form variables to the server.•HTML includes elements for creating forms–Text boxes <input type=“text” />–Buttons <input type=“submit” />–Check boxes–Etc.•The data entered into these form elements can be sent to the server using an http request.HTML Forms•Consider the following HTML code<form action=“script.php”> Enter Email: <input type=“text” name=“email”/> <br /><input type=“submit” /></form>•When you click the submit button, the browser–requests the file “script.php”–and sends the server the data that user entersemail = “[email protected]”Summary: Data sent by client1. URL itself2. URL variables 3. Information about the client browser4. Any form dataWhat does the server do with the data?The Server 1. receives an http request2. parses URL and message body of the http request3. puts the data into variables (associative arrays) that can be used by any scripting languageVariables provided by the server.•$_GET – stores all the URL variables•$_POST – stores all the Form variables•$_SERVER – stores server information including info about the client browsers that just made the request.Example•http://www.site.com/add.php?xval=5&yval=7•add.php<?php$xValue = $_GET['xval'];$yValue = $_GET['yval'];$sum = $xValue + $yValue;echo $xValue,' + ', $yValue, ' = ', $sum;?><?php$xValue = $_GET['xval'];$yValue = $_GET['yval'];$sum = $xValue + $yValue;echo $xValue,' + ', $yValue, ' = ', $sum;?>5+ 7 = 12Example<?php$xValue = $_GET['xval'];$yValue = $_GET['yval'];$sum = $xValue + $yValue;echo $xValue,' + ', $yValue, ' = ', $sum;?><?php$xValue = $_GET['xval'];$yValue = $_GET['yval'];$sum = $xValue + $yValue;echo $xValue,' + ', $yValue, ' = ', $sum;?><form action="add.php" method="get"><input name="xval" /> +<input name="yval“ /><input type="submit" value="equals" /></form><form action="add.php" method="get"><input name="xval" /> +<input name="yval“ /><input type="submit" value="equals" /></form>4 54 + 5 = 9Get vs. Post<?php$sum = $_POST['xval'] + $_POST['yval']echo $_POST['xval'],' + ', $_POST['yval'], ' = ', $sum;?><?php$sum = $_POST['xval'] + $_POST['yval']echo $_POST['xval'],' + ', $_POST['yval'], ' = ', $sum;?><form action="add.php" method=“post"><input name="xval" /> +<input name="yval“ /><input type="submit" value="equals" /></form><form action="add.php" method=“post"><input name="xval" /> +<input name="yval“ /><input type="submit" value="equals" /></form>4 54 + 5 = 9GET vs. POSTGET – First way•Browser adds the form variables to the URL•Then sends the http request•Form variables are visible in the URL•Browsers limit the length a URL•Limit for IE is 2,048 charactersPOST – Improved way•Browser adds the form variables to the message body of the http request•Then sends the http request•Must be used when sending non-text data, binary files, images, etc.•Must be used when sending long data (> 2KB)DetailsClient-side: The web browser •extracts the form data, i.e., the values the user types, and the variables, i.e., the names of the form elements.•places variables and values in either –the URL (if method=“get”) or –the body of the http request (if method=“post”).Server-side: The web server•receives the http request.•Parses the header of the http request which indicates if there are form variables.•extracts the variables•places them in a data structure, and•passes the structure to the requested script.One more look<?php$sum = $_POST['xval'] + $_POST['yval']echo $_POST['xval'],' + ', $_POST['yval'], ' = ', $sum;?><?php$sum = $_POST['xval'] + $_POST['yval']echo $_POST['xval'],' + ', $_POST['yval'], ' = ', $sum;?><form action="add.php" method=“post"><input name="xval" /> +<input name="yval“ /><input type="submit" value="equals" /></form><form action="add.php" method=“post"><input name="xval" /> +<input name="yval“ /><input type="submit" value="equals" /></form>4 54 + 5 = 9Quirks of Web-page Based Interfaces•Ever notice the delay in submitting a form?•Ever notice that forms tend to always send back a confirmation message, even when you don’t need one?•Ever notice the page entirely refreshes whenever a button is clicked?Mechanics of Web-based InterfacesUser requests a FORM (add.html)Sends the FORM (add.html)User fills out the FORM and clicks submitSend FORM variables and requests action “add.php”TimeTimeSends back output of “add.php” could be a new FORMServer receives the FORM variablesServer executes “add.php”User fills out the new FORM and clicks submitSend FORM variables and requests new actionSynchronous Communication•A Phone conversation is synchronous–Generally, people wait for an answer before asking the next question–You talk, I talk, you talk, I talk, …•Web analogy–When submitting a form, you have to wait for a response before you can move to the next action.•This is why web-interfaces are sometimes quirky: –We are used to