Slide 1Web Client-Server ModelWhat is in an http request?What is in an http request?URL VariablesCan an http request send anything else?HTML FormsSummary: Data sent by clientWhat does the server (Apache) do with the data?Global Variables (created for every http request)ExampleExampleGet 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?ExampleHTML Form ProcessingLearning Web Design – Chapter 9, pp 143-163Squirrel Book –Chapter 11, pp 251-266Web 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 client•Message header1. URL itself2. URL variables3. Form variables (method = “get”)•Message body1. Information about the client browser2. Form variables (method = “post”)3. Attached filesWhat does the server (Apache) 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 languageGlobal Variables (created for every http request)•$_GET – stores all the URL variables and form variables via method=“get”•$_POST – stores all the Form variables via method =“post”•$_SERVER – stores server information including info about the client browsers that just made the request.•$_FILES – uploaded files sent via multi-part formExample•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 global associative arrays visible 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