html form processing n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML Form Processing PowerPoint Presentation
Download Presentation
HTML Form Processing

Loading in 2 Seconds...

play fullscreen
1 / 27

HTML Form Processing - PowerPoint PPT Presentation


  • 109 Views
  • Uploaded on

HTML Form Processing. Learning Web Design – Chapter 9, pp 143-163 Squirrel Book – Chapter 11, pp 251 -266. Web Client-Server Model. http request. Specify the URL of the “file” you want. http response. Send back the “file” to the client. What is in an http request?.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'HTML Form Processing' - ananda


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
html form processing

HTML Form Processing

Learning Web Design – Chapter 9, pp 143-163

Squirrel Book –

Chapter 11, pp 251-266

web client server model
Web Client-Server Model

http request

Specify the URL of the “file” you want.

http response

Send back the “file” to the client.

what is in an http request
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 request1
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=wide
url variables
URL Variables

http://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 variables
can an http request send anything else
Can 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
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 = “myname@place.org”
summary data sent by client
Summary: Data sent by client
  • Message header
    • URL itself
    • URL variables
    • Form variables (method = “get”)
  • Message body
    • Information about the client browser
    • Form variables (method = “post”)
    • Attached files
what does the server apache do with the data
What does the server (Apache) do with the data?

The Server

  • receives an http request
  • parses URL and message body of the http request
  • puts the data into variables (associative arrays) that can be used by any scripting language
global variables created for every http request
Global 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 form
example
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;

?>

5+ 7 = 12

example1
Example

<form action="add.php" method="get">

<input name="xval" /> +

<input name="yval“ />

<input type="submit" value="equals" />

</form>

4

5

<?php

$xValue = $_GET['xval'];

$yValue = $_GET['yval'];

$sum = $xValue + $yValue;

echo $xValue,' + ', $yValue, ' = ', $sum;

?>

4 + 5 = 9

get vs post
Get vs. Post

<form action="add.php" method=“post">

<input name="xval" /> +

<input name="yval“ />

<input type="submit" value="equals" />

</form>

4

5

<?php

$sum = $_POST['xval'] + $_POST['yval']

echo $_POST['xval'],' + ', $_POST['yval'], ' = ', $sum;

?>

4 + 5 = 9

get vs post1
GET vs. POST

GET – First way

POST – 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)

  • 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 characters
details
Details

Client-side: The web browser

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.

  • 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”).
one more look
One more look

<form action="add.php" method=“post">

<input name="xval" /> +

<input name="yval“ />

<input type="submit" value="equals" />

</form>

4

5

<?php

$sum = $_POST['xval'] + $_POST['yval']

echo $_POST['xval'],' + ', $_POST['yval'], ' = ', $sum;

?>

4 + 5 = 9

quirks of web page based interfaces
Quirks 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 interfaces
Mechanics of Web-based Interfaces

User requests a FORM (add.html)

Sends the FORM (add.html)

User fills out the FORM and clicks submit

Time

Send FORM variables and requests action “add.php”

Send FORM variables and requests new action

Server receives the FORM variables

Server executes “add.php”

User fills out the new FORM and clicks submit

Sends back output of “add.php” could be a new FORM

s ynchronous communication
Synchronous 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 asynchronousinteraction.
    • Web client-server interaction is actually synchronous.
    • Note many “experts” mistakenly consider web client-server interaction to be asynchronous. They are wrong!
asynchronous communication
Asynchronous Communication
  • Email is a classic example of asynchronous communication
    • You do NOT have to wait for an email reply to send out other emails.
  • Web client-server analogy
    • You do NOT have to wait for an http response to send out another request, even to the same server
  • When you look at it this way, web client-server interaction seems asynchronous, but it is not.
why it appears asynchronous
Why it appears Asynchronous
  • Consider opening multiple browser windows and connecting to different servers
  • Consider slow servers
  • The response order is NOT always the same as the request order.
  • This appears to be asynchronous communication like email, but….
slide22
But…
  • You can get an email out of the blue.
  • A software application can send a message out of the blue.
  • Surprisingly, a web browser cannot get an http response without first making a request.
  • Pop-ups are actually initiated by spyware or plug-ins that make requests without the user’s explicit action.
http is synchronous
http is Synchronous
  • A server won’t do anything unless the client makes a request.
  • Then, the only thing the server can do is send back exactly one response.
  • Truly asynchronous communication would mean
    • The server could initiate communication when appropriate.
    • A single request from a client could trigger more than one response from the server at any time
confused here is a summary
Confused? Here is a Summary
  • The general communication between web client and web server has an asynchronous feel
    • because clients and servers support multiple simultaneous requests/responses
  • However, http is a synchronous protocol
    • Requests from clients drive all the responses from servers
  • In two weeks, we’ll learn about AJAX, which is a way to support true asynchronous communication between client and server.
still confused
Still Confused?
  • A phone conversation is synchronous
    • You talk, I talk, you talk, I talk.
  • Surfing the web is a synchronous conversation
    • Click a link (request), get a page (response), click a link (request), get a page (response)
  • Web clients and servers support multiple simultaneous conversations.
    • Like having multiple mouths and sets of ears
    • The conversations feel asynchronous because you can switch from one to the other but they are really simultaneous synchronous conversations.
    • Take that! high paid web consultants who say http is asynchronous.
why is this important
Why is this important?
  • Synchronous form interaction is annoying.
    • You have to refresh an entire form just to update one part of it.
    • Then, you end up sending the entire form back again even if only part of it changed.
  • Without using asynchronous frameworks like AJAX, synchronous form interaction is the only way to build web applications.
example2
Example
  • If there is time, we’ll look at a neat example
  • Registration Form