html forms http rest n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
HTML forms, HTTP, & REST PowerPoint Presentation
Download Presentation
HTML forms, HTTP, & REST

Loading in 2 Seconds...

play fullscreen
1 / 94

HTML forms, HTTP, & REST - PowerPoint PPT Presentation


  • 86 Views
  • Uploaded on

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.

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 forms, HTTP, & REST' - duscha


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 forms
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
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=“processForm.php"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
HTML Form method attribute
  • Specify the HTTP method to submit the form
  • Two possible values:
    • get
    • post
form controls
Form Controls
  • Types of controls:
    • Button
    • Checkbox
    • Radio button
    • Hidden Control
    • File Select
    • Text input
    • Menus
    • Others
additional info
Additional 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
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
Labels
  • Each label element is associated with exactly one control
  • Use the for attribute to explicitly associate a label with a control
  • The forattribute value must match the id attribute of the associated control
label example
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
Benefits of using a <label>
  • When a user clicks the text inside the <label>, the associated control is automatically focused.
adding structure to forms1
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
Complete Form Example

<formaction="showResponse.php?foo=bar"method="post">

<labelfor="userName">Username:</label>

<inputtype="textarea"name="userName"id="userName"/>

Gender:

<labelfor="male">Male</label><inputtype="radio"id="male"name="sex"value="male"/>

<labelfor="female">Female</label><inputtype="radio"id="female"name="sex"value="female"/>

<labelfor="bi">Both</label><inputtype="radio"id="bi"name="sex"value="bi">

<fieldset>

<legend>Cookies you like</legend>

<labelfor="sugar">Sugar</label><inputtype="checkbox"id="sugar"name="cookiePref[]"value="sugar"/>

<labelfor="oatmeal">Oatmeal</label><inputtype="checkbox"id="oatmeal"name="cookiePref[]"value="oatmeal"/>

<labelfor="chocChip">Chocolate Chip</label><inputtype="checkbox"id="chocChip"name="cookiePref[]"value="chocChip"/>

<labelfor="snicker">Snickerdoodle</label><inputtype="checkbox"id="snicker"name="cookiePref[]"value="snicker"/>

</fieldset>

<selectname="car">

<optionvalue="Ford">Ford</option>

<optionvalue="Chevy">Chevy</option>

<optionvalue="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 -->

<inputtype="hidden"name="putOrDelete"value="PUT"/>

<labelfor="passwd">Password</label><inputtype="password"id="passwd"name="passwd"/>

<inputtype="submit"value="Submit"/>

</form>

successful controls
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 controls1
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
Let’s give it a try!

http://lyle.smu.edu/~jmmurphy/cse3345/http/form.html

http outline
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 Quick facts
  • HTTP – Hypertext Transfer Protocol
  • Invented by Tim Berners-Lee and his team
  • Is an application level protocol on top of TCP/IP
http communication
HTTP Communication
  • HTTP is a protocol where clients and servers communicate with messages.
  • An HTTP client (usually a browser) sends message requests to servers on Port 80.
  • HTTP Servers wait for client HTTP requests and respond with response messages.
http communication1
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.comto create an order when they want to buy an item.
http communication2
HTTP Communication
  • The internet’s sole purpose is to get, edit, create, and delete resources (and maybe waste a lot of your time).
http outline1
HTTP Outline
  • HTTP Communications Protocol
  • HTTP Request Methods
  • HTTP Messages
    • Request Messages
    • Using curl
    • Response Messages
      • Response Status Codes
http request methods
HTTP Request Methods
  • HTTP1.1 defines 9 methods that indicate a desired action to be performed on a resource.

Methods

HEAD PUT OPTIONS

GET DELETE CONNECT

POST TRACE PATCH

http request methods1
HTTP Request Methods
  • We will only focus on 4

Methods

HEADPUTOPTIONS

GETDELETECONNECT

POSTTRACEPATCH

http get
HTTP GET
  • Requests a specified resource
  • Should only be used to retrieve data and have no other side effect
http post
HTTP POST
  • Submits data to be processed to the identified resource
  • Used to create data
  • Used to edit data
http put
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
HTTP DELETE
  • Deletes a specified resource
http safe methods
HTTP Safe Methods
  • Safe methods are intended for information retrieval only and do not change the state of a server.

Safe Methods

HEAD OPTIONS

GET TRACE

http idempotent methods
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 methods1
HTTP Idempotent Methods

Idempotent Methods

GET OPTIONS

PUT HEAD

DELETE TRACE

not safe or idempotent
Not Safe or Idempotent
  • POST is not a safe or idempotent method!
http police
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 as the back-end developer!
http police1
HTTP Police
  • ONLY YOU can prevent GET methods from triggering server state changes!
http outline2
HTTP Outline
  • HTTP Communications Protocol
  • HTTP Request Methods
  • HTTP Messages
    • Request Messages
    • Using telnet,curl, and hurl
    • Response Messages
      • Response Status Codes
http messages
HTTP Messages
  • Contain the URI aka resource, the request method (GET), and additional info.
http message format
HTTP Message Format
  • An initial line
  • Zero or more header lines
  • Message body
http request message example
HTTP Request Message Example

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

User-Agent: Fiddler

Host: www.google.com

Initial line

Headers line

body

initial line request message
Initial Line: Request Message
  • Consists of 3 parts separated by spaces:
    • HTTP Method name (GET,POST, etc.)
    • Local path of requested resource
    • Version of HTTP being used

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

1

2

3

header lines request message
Header Lines: Request Message
  • Header fields define additional information about the HTTP message.
  • Several possible request message headers, see wiki.

Notable Request Headers

Host

Content-type

Content-length

Date

User-Agent

header lines request message1
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
Message body: Request Message
  • Used to store data for POST, PUT, and DELETE methods.
http request message example1
HTTP Request Message Example

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

User-Agent: Fiddler

Host: www.google.com

Content-type: application/x-www-form-urlencoded

Content-Length: 8

name=ted

Initial line

Headers line

body

http outline3
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
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/~jmmurphy/cse3345/http/showResponse.php?param1=smu&param2=mustangs

how to send a get request with parameters
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.com

URI and Query Separator: ?

Query String Parameters:

    • Key: n1, Value: bob
    • Key: n2, Value: sally

GET REQUEST = (URI + Separator + Query String)

get request uri and separator
GET Request: URI and Separator
  • Concatenate the URI and Separator together

URI: www.example.com

URI and Query Separator: ?

www.example.com?

get request query string
GET Request: Query String

Query String parameters:

    • Key: n1, Value: bob
    • 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
GET Request: URI + Separator + Query String
  • Concatenate them all together

URI: www.example.com

URI and Query Separator: ?

Query String Parameters:

    • n1 = bob
    • n2 = sally

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

using telnet get
Using telnet: GET
  • $ telnet www.google.com 80
    • GET / HTTP/1.1
    • Host: www.google.com
    • <enter>
using telnet post
Using telnet: POST
  • $ telnet www.google.com 80
    • POST / HTTP/1.1
    • Host: www.google.com
    • Content-type: application/x-www-form-urlencoded
    • Content-length: 8
    • <enter>
    • name=ted
using curl command
Using curl command
  • curl – used to transfer data to/from servers
  • Useful for fetching a webpage

$ curl “www.google.com”

using curl command i
Using curl command: -i
  • Use –ioption to print HTTP header information for a fetched webpage

$ curl –i “www.google.com”

using curl command send get request
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
  • 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
Send a POST request with the browser
  • Use an HTML form with the action set to post.
using curl command send post request
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
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
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
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”

slide61
Hurl
  • Online utility for making CURL requests
  • http://www.hurl.it/
http outline4
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
HTTP Response Message
  • The message sent from the server to the client after the server receives a request message.
http response message format
HTTP Response Message Format
  • An initial line
  • Zero or more header lines
  • Message body
http response message example
HTTP Response Message Example

HTTP/1.1 200 OK

Date: Sat, 15 Sep 2012 04:45:14 GMT

Expires: -1

Cache-Control: private, max-age=0

Content-Type: text/html; charset=ISO-8859-1

Set-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.com

Set-Cookie: NID=63=rRYwex2AO2q9Z2y6lde7aRvbY6rCNEPy4nzW47g0MeAfofvScqQZt-3Zc4jz097J31Xs9HxE46ZtaB6l6803pj9KYexa5Zs0QyzXJ1KxjexFtFGa7XQayzd7SoiqH0R4; expires=Sun, 17-Mar-2013 04:45:14 GMT; path=/; domain=.google.com; HttpOnly

P3P: 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: gws

X-XSS-Protection: 1; mode=block

X-Frame-Options: SAMEORIGIN

Transfer-Encoding: chunked

<!doctype html……

initial line

headers line

body

initial line response message
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
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 codes1
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
Headers Line: Response Message
  • Provide information about the response

Headers

  • Date
  • Expires
  • Content-type
header lines response message
Header Lines: Response Message
  • In HTTP 1.1, a server must specify a Date header.
message body response message
Message Body: Response Message
  • Can contain html, xml, json, etc
  • Usually returns html for webpage
rest outline
REST Outline
  • What is REST?
  • REST Web Services
  • HTML and REST
what is 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 outline1
REST Outline
  • What is REST?
  • REST Web Services
  • HTML and REST
rest web services
REST Web Services

Follows four basic principles:

  • Use HTTP methods explicitly
  • Be stateless
  • Expose directory structure-like URIs
  • Transfer XML, JSON, or text
1 use http methods explicitly
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 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
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 apis1
Bad Web APIs

This 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
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 apis1
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 apis2
Good Web APIs

Correct usage of HTTP POST:

  • POST is for creating data.
good web apis3
Good Web APIs

Correct usage of HTTP PUT:

  • PUT is for updating data.
good web apis4
Good Web APIs

Correct usage of HTTP DELETE:

  • DELETE is for deleting data.
good web apis5
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
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.
3 expose directory structure like uris
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 uris1
3. Expose directory structure-like URIs

Examples:

  • http://www.myservice.org/discussion/topics/{topic}
  • 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
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.
    • application/xml
    • application/json
    • text/plain
rest outline2
REST Outline
  • What is REST?
  • REST Web Services
  • HTML and REST
html and rest
HTML and REST
  • Unfortunately, HTML only supports GET and POSTactions for form processing.
  • PUT and DELETE are in consideration for being added to the HTML spec.
html and rest1
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 POSTaction.
ajax and rest
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... );