HTML forms, HTTP, & REST

HTML Forms

• A composition of controls that include buttons, checkboxes, text input, etc. that are used to capture user input.

• Rely on an action attribute to specify where to send the form data.

• Rely on a method attribute to specify how to process the form data.

HTML Form action attribute• Specifies a form processing agent

• Usually an HTTP URI

• Could launch an email client. Useful for debugging

<form name="myWebForm" action="mailto:youremail@email.com" method="post">

<input type="checkbox" /> Checkbox 1<br /> <input type="text" /> Text Field 1<br /> <input type="submit" value="SUBMIT" />

</form>

HTML Form method attribute

• Specify the HTTP method to submit the form

• Two possible values:– get– post

Form Controls

• Types of controls:– Button– Checkbox– Radio button– Hidden Control– File Select– Text input– Menus– Others

Addition Info

• Controls have initial values which can be specified using the value attribute.

• When a form is reset using a reset input control, all inputs values will be restored to their initial value.

Adding Structure to forms

• Some form controls automatically have labels associated with them (button)

• Other form controls do not have labels (textfields, checkboxes, radio buttons, menus).

• Use the <label> element to specify labels for controls that do not have implicit labels.

Labels

• Each label element is associated with exactly one control

• Use the for attribute to explicitly associate a label with a control

• The for attribute value must match the id attribute of the associated control

Label example<label for=“fname”>First Name:</label><input type=“text” id=“fname” name=“fname”/>

or

<label for=“fname”>First Name: <input type=“text” id=“fname” name=“fname”/></label>

Benefits of using a <label>

• When a user clicks the text inside the <label>, the associated control is automatically focused.

Adding structure to forms

• The <fieldset> element allows developers to group related controls and labels.

• The <legend> element allows developers to assign a caption to a fieldset.

Complete Form Example<form action="showResponse.php?foo=bar" method="post"> <label for="userName">Username:</label> <input type="textarea" name="userName" id="userName"/> Gender: <label for="male">Male</label><input type="radio" id="male" name="sex" value="male"/> <label for="female">Female</label><input type="radio" id="female" name="sex" value="female"/> <label for="bi">Both</label><input type="radio" id="bi" name="sex" value="bi"> <fieldset> <legend>Cookies you like</legend> <label for="sugar">Sugar</label><input type="checkbox" id="sugar" name="cookiePref[]" value="sugar"/> <label for="oatmeal">Oatmeal</label><input type="checkbox" id="oatmeal" name="cookiePref[]" value="oatmeal"/> <label for="chocChip">Chocolate Chip</label><input type="checkbox" id="chocChip" name="cookiePref[]" value="chocChip"/> <label for="snicker">Snickerdoodle</label><input type="checkbox" id="snicker" name="cookiePref[]" value="snicker"/> </fieldset> <select name="car"> <option value="Ford">Ford</option> <option value="Chevy">Chevy</option> <option value="Hummer">Hummer</option> </select> <!-- Use this to specify POST, PUT, or DELETE HTTP Methods This requires the server look for this param being passed in --> <input type="hidden" name="putOrDelete" value="PUT"/> <label for="passwd">Password</label><input type="password" id="passwd" name="passwd"/> <input type="submit" value="Submit"/> </form>

Successful Controls

• A successful control is “valid” for submission.

• These controls have their name paired with their current value and are submitted for processing.

• Any disabled control can not be successful

Successful Controls

• All “on” checkboxes may be successful

• Only one “on” radio box with the same name attribute can be successful.

• Only selected values in a menu can be successful.

Let’s give it a try!

http://lyle.smu.edu/~craley/3345/http/form.html

HTTP

HTTP Outline

• HTTP Communications Protocol• HTTP Request Methods• HTTP Messages– Request Messages– Using telnet, curl, and hurl– Response Messages• Response Status Codes

HTTP Quick facts

• HTTP – Hyper Text Transform Protocol

• Invented by Tim Berners-Lee and his team

• Is an applications-level protocol on top of TCP/IP

HTTP Communication

• HTTP is a protocol where clients and servers communicate with messages.

• An HTTP client (browsers) sends message requests to servers on Port 80.

• HTTP Servers wait for client HTTP requests and respond with response messages.

HTTP Communication

• The point of HTTP Communication is to access a particular resource and perform a particular action on it.

• To GET the contents of the SMU webpage, you visit www.smu.edu.

• People POST data to www.amazon.com and create an order when they want to buy an item.

HTTP Communication

• The internet’s sole purpose is to get, edit, create, and delete resources (and maybe waste a lot of your time).

HTTP Outline

• HTTP Communications Protocol• HTTP Request Methods• HTTP Messages– Request Messages– Using curl– Response Messages• Response Status Codes

HTTP Request Methods

• HTTP1.1 defines 9 methods that indicate a desired action to be performed on a resource.

Methods HEAD PUT OPTIONSGET DELETE CONNECTPOST TRACE PATCH

HTTP Request Methods

• We will only focus on 4

Methods HEAD PUT OPTIONSGET DELETE CONNECTPOST TRACE PATCH

HTTP GET

• Requests a specified resource

• Should only be used to retrieve data and have no other side effect

HTTP POST

• Submits data to be processed to the identified resource

• Used to create data

• Used to edit data

HTTP PUT

• Uploads a representation of the specified resource

• Updates or edits a resource

• Must update the entire resource. Not just parts of it.

HTTP DELETE

• Deletes a specified resource

HTTP Safe Methods

• Safe methods are intended for information retrieval only and do not change the state of a server.

Safe MethodsHEAD OPTIONSGET TRACE

HTTP Idempotent Methods

• Idempotent – multiple identical requests should have the same effect on the server as a single request.

• Idempotent doesn’t mean the response won’t be different.

• Idempotent means the server state will be the same every time for multiple requests.

HTTP Idempotent Methods

Idempotent MethodsGET OPTIONSPUT HEADDELETE TRACE

Not Safe or Idempotent

• POST is not a safe or idempotent method!

HTTP Police

• There are no HTTP Police to enforce whether a method is Safe or Idempotent.

• The HTTP protocol nor the web server enforce this for you.

• It is up to YOU the back-end developer!

HTTP Police

• ONLY YOU can prevent GET methods from triggering server state changes!

HTTP Outline

• HTTP Communications Protocol• HTTP Request Methods• HTTP Messages– Request Messages– Using telnet, curl, and hurl– Response Messages• Response Status Codes

HTTP Messages

• Contain the URI aka resource, the request method (GET), and additional info.

HTTP Message Format

• An initial line

• Zero or more header lines

• Message body

HTTP Request Message Example

GET http://www.google.com/ HTTP/1.1

User-Agent: FiddlerHost: www.google.com

Initial line

Headers line

body

Initial Line: Request Message

• Consists of 3 parts separated by spaces:1. HTTP Method name (GET,POST, etc.)2. Local path of requested resource3. Version of HTTP being used

GET /path/to/file/index.html HTTP/1.1

1 2 3

Header Lines: Request Message• Header fields define additional information about the HTTP

message.

• Several possible request message headers, see wiki.

Notable Request HeadersHostContent-typeContent-lengthDateUser-Agent

Header Lines: Request Message

• In HTTP 1.1, a client must specify a Host header.

• For POST requests that include a body, a client must also specify Content-type and Content-Length

Message body: Request Message

• Used to store data for POST, PUT, and DELETE methods.

HTTP Request Message Example

POST http://www.google.com/ HTTP/1.1

User-Agent: FiddlerHost: www.google.comContent-type: application/x-www-form-urlencodedContent-Length: 8

name=ted

Initial line

Headers line

body

HTTP Outline

• HTTP Communications Protocol• HTTP Request Methods• HTTP Messages– Request Messages– Using telnet, curl, and hurl– Response Messages• Response Status Codes

Sending a GET request with a browser

• Open your favorite browser

• Paste your GET request string in the URL bar and submit it

http://lyle.smu.edu/~craley/3345/http/showResponse.php?parm1=taco&parm2=beef

How to send a GET request with Parameters

• GET requests can append a query string to the end of the requested URI

URI: www.example.comURI and Query Separator: ?Query String Parameters:

1. Key: n1, Value: bob2. Key: n2, Value: sally

GET REQUEST = (URI + Separator + Query String)

GET Request: URI and Separator

• Concatenate the URI and Separator together

URI: www.example.comURI and Query Separator: ?

www.example.com?

GET Request: Query StringQuery String parameters:

1. Key: n1, Value: bob2. Key: n2, Value: sally

• Create a key-value pair by concatenating the key with the value separated by an “=“ character.– n1=bob– n2=sally

• Create the query string by concatenating all key-value pairs together separated by a “&” character.– n1=bob&n2=sally

GET Request: URI + Separator + Query String

• Concatenate them all together

URI: www.example.comURI and Query Separator: ?Query String Parameters:

1. n1 = bob2. n2 = sally

www.example.com?n1=bob&n2=sally

Using telnet: GET

• $ telnet www.google.com 801. GET / HTTP/1.12. Host: www.google.com3. <enter>

Using telnet: POST

• $ telnet www.google.com 801. POST / HTTP/1.12. Host: www.google.com3. Content-type: application/x-www-form-urlencoded4. Content-length: 85. <enter>6. name=ted

Using curl command

• curl – used to transfer data to/from servers• Useful for fetching a webpage

$ curl “www.google.com”

Using curl command: -i

• Use –i option to print HTTP header information for a fetched webpage

$ curl –i “www.google.com”

Using curl command: Send GET request

• GET data immediately follows the request URI and begins with a “?”

curl “www.example.com?n1=bob&n2=sally”

POST Requests

• POST requests use the same query string as a GET request

• However for POST requests, the query string is not included in the URL but in the client request body

Send a POST request with the browser

• Use a HTML form with the action set to post.

Using curl command: Send POST request

• POST query string is sent with the –d parameter.

• You don’t need the “?” for POST requests.

curl –d “n1=bob&n2=sally” “www.example.com”

Using curl command: -X

• Use –X option to specify a custom HTTP request method (GET, PUT, DELETE, POST).

$ curl –X GET “www.google.com”$ curl –X PUT “www.google.com”$ curl –X DELETE “www.google.com”$ curl –X POST “www.google.com”

Using curl command: Send PUT request

• PUT query string is sent with the –d parameter.

• You don’t need the “?” for PUT requests.

curl –d –X PUT “n1=bob&n2=sally” “www.example.com”

Using curl command: Send DELETE request

• DELETE query string is sent with the –d parameter.

• You don’t need the “?” for DELETE requests.

curl –d –X DELETE “n1=bob&n2=sally” “www.example.com”

Hurl

• Online utility for making CURL requests

• http://www.hurl.it/

HTTP Outline

• HTTP Communications Protocol• HTTP Request Methods• HTTP Messages– Request Messages– Using telnet, curl, and hurl– Response Messages• Response Status Codes

HTTP Response Message

• The message sent from the server to the client after the server receives a request message.

HTTP Response Message Format

• An initial line

• Zero or more header lines

• Message body

HTTP Response Message Example

HTTP/1.1 200 OK

Date: Sat, 15 Sep 2012 04:45:14 GMTExpires: -1Cache-Control: private, max-age=0Content-Type: text/html; charset=ISO-8859-1Set-Cookie: PREF=ID=eff3eeca6edc9216:FF=0:TM=1347684314:LM=1347684314:S=rYavmahIW-zC321Y; expires=Mon, 15-Sep-2014 04:45:14 GMT; path=/; domain=.google.comSet-Cookie: NID=63=rRYwex2AO2q9Z2y6lde7aRvbY6rCNEPy4nzW47g0MeAfofvScqQZt-3Zc4jz097J31Xs9HxE46ZtaB6l6803pj9KYexa5Zs0QyzXJ1KxjexFtFGa7XQayzd7SoiqH0R4; expires=Sun, 17-Mar-2013 04:45:14 GMT; path=/; domain=.google.com; HttpOnlyP3P: CP="This is not a P3P policy! See http://www.google.com/support/accounts/bin/answer.py?hl=en&answer=151657 for more info."Server: gwsX-XSS-Protection: 1; mode=blockX-Frame-Options: SAMEORIGINTransfer-Encoding: chunked

<!doctype html……

initial line

headers line

body

Initial Line: Response Message

• Consists of 3 parts separated by spaces:– The version of HTTP being used– Response status codes– English phrase describing the status code

HTTP/1.1 200 OK

1 2 3

HTTP Response Status Codes

• Success codes in 2xx– OK 200– CREATED 201– Accepted 202– No Response 204

• Error codes in 4xx– Forbidden 403– Not found 404

HTTP Response Status Codes

• Error codes in 5xx– Internal error 500– Not implemented 501

• Redirection 3xx– Moved 301– Found 302– Not modified 304

Headers Line: Response Message

• Provide information about the response

Headers• Date• Expires• Content-type

Header Lines: Response Message

• In HTTP 1.1, a server must specify a Date header.

Message Body: Response Message

• Can contain html, xml, json, etc

• Usually returns html for webpage

REST

REST Outline

• What is REST?• REST Web Services• HTML and REST

What is REST?

• Representational State Transfer (REST)

• Defines architectural principles for creating web services that focus on a system’s resources.

• Used by a wide range of clients written in many different programming languages.

REST Outline

• What is REST?• REST Web Services• HTML and REST

REST Web Services

Follows four basic principles:1. Use HTTP methods explicitly2. Be stateless3. Expose directory structure-like URIs4. Transfer XML, JSON, or text

1. Use HTTP methods explicitly

• Use methods that follow the HTTP protocol.

• This principle establishes a 1:1 mapping of CRUD operations to HTTP methods.

CRUD to HTTP methods

CRUD – create, read, update, and delete

• To create a resource on the server use POST• To retrieve a resource use GET• To update an entire resource use PUT• To delete a resource use DELETE

Bad Web APIs

• Many Web APIs misuse and abuse HTTP methods

This example uses HTTP GET to trigger a transaction to create a new user named Robert.

GET /adduser?name=Robert

Bad Web APIsThis example uses HTTP GET to trigger a transaction to delete user named Robert.

GET /deleteUser?name=Robert

This example uses HTTP GET to trigger a transaction to update user’s name from Bob to Robert.

GET /updateUser?newName=Robert&oldName=Bob

Good Web APIs

Correct usage of HTTP GET:• The request URI identifies one specific resource:

GET /users/Robert

• The query string in a request URI uses a set of parameters that define search criteria:

GET /users?name=Robert

Good Web APIs

Correct usage of HTTP GET:• GET is for data retrieval only

• GET should be free of server-side changes

• GET is called a SAFE method b/c of the previous two points.

Good Web APIs

Correct usage of HTTP POST:• POST is for creating data.

Good Bad

POST /users HTTP/1.1Host: myserver Content-Type: application/xml <?xml version="1.0"?> <user> <name>Robert</name> </user>

GET /user?action=add&name=Robert

Good Web APIs

Correct usage of HTTP PUT:• PUT is for updating data.

Good Bad

PUT /users/Robert HTTP/1.1 Host: myserver Content-Type: application/xml <?xml version="1.0"?> <user> <name>Bob</name> </user>

GET /user?action=up&newName=Robert&oldName=Bob

Good Web APIs

Correct usage of HTTP DELETE:• DELETE is for deleting data.

Good Bad

DELETE /users/BobHTTP/1.1 Host: myserver Content-Type: application/xml <?xml version="1.0"?> <user> <name>Bob</name> </user>

GET /user?action=del&name=Robert

Good Web APIs

• For URIs use nouns instead of verbs

• The verbs GET, PUT, DELETE, and POST should be all the verbs you need

2. Be stateless

• Send complete and independent requests

• Don’t require the server to hold client state information

• This is similar to static methods where you give it all the data that’s needed to perform the desired operation.

• Requires a FAT-client

3. Expose directory structure-like URIs

• URIs determine how intuitive a RESTful web service is

• Using directory structure makes URIs:– more intuitive to the point where they are easy to

guess

– self documenting

3. Expose directory structure-like URIs

Examples:1. http://www.myservice.org/discussion/topics/{topic}

2. http://www.myservice.org/discussion/2008/12/10/{topic}

• Notice no spaces in directory names. If you need a space, use underscore instead.

4. Transfer XML, JSON, and text

• For sending data to server use XML, JSON, or text

• For receiving data from a server use XML or JSON

• Let clients specify transfer type with MIME type header.

REST Outline

• What is REST?• REST Web Services• HTML and REST

HTML and REST

• Unfortunately, HTML only supports GET and POST actions for form processing.

• PUT and DELETE are in consideration for being added to the HTML spec.

HTML and REST

• To use PUT and DELETE in HTML, you can specify a method=“post” for your form and include a hidden field to specify a PUT, DELETE, or POST action.

AJAX and REST

You can specify PUT and DELETE using XMLHttpRequests:

$.ajax( {       url: '/controller/action',       type: 'PUT',       data: function() { ...package some data as XML },       dataType: 'xml',       ... more options... );