Presentation is loading. Please wait.

Presentation is loading. Please wait.

HTML forms, HTTP, & REST. HTML Forms A composition of controls that include buttons, checkboxes, text input, etc. that are used to capture user input.

Similar presentations


Presentation on theme: "HTML forms, HTTP, & REST. HTML Forms A composition of controls that include buttons, checkboxes, text input, etc. that are used to capture user input."— Presentation transcript:

1 HTML forms, HTTP, & REST

2 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.

3 HTML Form action attribute Specifies a form processing agent Usually an HTTP URI Could launch an client. Useful for debugging Checkbox 1 Text Field 1

4 HTML Form method attribute Specify the HTTP method to submit the form Two possible values: – get – post

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

6 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.

7 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 element to specify labels for controls that do not have implicit labels.

8 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

9 Label example First Name: or First Name:

10 Benefits of using a When a user clicks the text inside the, the associated control is automatically focused.

11 Adding structure to forms The element allows developers to group related controls and labels. The element allows developers to assign a caption to a fieldset.

12 Complete Form Example Username: Gender: Male Female Both Cookies you like Sugar Oatmeal Chocolate Chip Snickerdoodle Ford Chevy Hummer Password

13 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

14 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.

15 Lets give it a try!

16 HTTP

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

18 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

19 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.

20 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 People POST data to and create an order when they want to buy an item.www.amazon.com

21 HTTP Communication The internets sole purpose is to get, edit, create, and delete resources (and maybe waste a lot of your time).

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

23 HTTP Request Methods HTTP1.1 defines 9 methods that indicate a desired action to be performed on a resource. Methods HEADPUTOPTIONS GETDELETECONNECT POSTTRACEPATCH

24 HTTP Request Methods We will only focus on 4 Methods HEADPUTOPTIONS GETDELETECONNECT POSTTRACEPATCH

25 HTTP GET Requests a specified resource Should only be used to retrieve data and have no other side effect

26 HTTP POST Submits data to be processed to the identified resource Used to create data Used to edit data

27 HTTP PUT Uploads a representation of the specified resource Updates or edits a resource Must update the entire resource. Not just parts of it.

28 HTTP DELETE Deletes a specified resource

29 HTTP Safe Methods Safe methods are intended for information retrieval only and do not change the state of a server. Safe Methods HEADOPTIONS GETTRACE

30 HTTP Idempotent Methods Idempotent – multiple identical requests should have the same effect on the server as a single request. Idempotent doesnt mean the response wont be different. Idempotent means the server state will be the same every time for multiple requests.

31 HTTP Idempotent Methods Idempotent Methods GET OPTIONS PUTHEAD DELETETRACE

32 Not Safe or Idempotent POST is not a safe or idempotent method!

33 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!

34 HTTP Police ONLY YOU can prevent GET methods from triggering server state changes!

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

36 HTTP Messages Contain the URI aka resource, the request method (GET), and additional info.

37 HTTP Message Format An initial line Zero or more header lines Message body

38 HTTP Request Message Example GET HTTP/1.1 User-Agent: Fiddler Host: Initial line Headers line body

39 Initial Line: Request Message Consists of 3 parts separated by spaces: 1.HTTP Method name (GET,POST, etc.) 2.Local path of requested resource 3.Version of HTTP being used GET /path/to/file/index.html HTTP/

40 Header Lines: Request Message Header fields define additional information about the HTTP message. Several possible request message headers, see wiki.wiki Notable Request Headers Host Content-type Content-length Date User-Agent

41 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

42 Message body: Request Message Used to store data for POST, PUT, and DELETE methods.

43 HTTP Request Message Example POST HTTP/1.1 User-Agent: Fiddler Host: Content-type: application/x-www-form-urlencoded Content-Length: 8 name=ted Initial line Headers line body

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

45 Sending a GET request with a browser Open your favorite browser Paste your GET request string in the URL bar and submit it sponse.php?parm1=taco&parm2=beef

46 How to send a GET request with Parameters GET requests can append a query string to the end of the requested URI URI: URI and Query Separator: ? Query String Parameters: 1.Key: n1, Value: bob 2.Key: n2, Value: sally GET REQUEST = (URI + Separator + Query String)

47 GET Request: URI and Separator Concatenate the URI and Separator together URI: URI and Query Separator: ?

48 GET Request: Query String Query String parameters: 1.Key: n1, Value: bob 2.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

49 GET Request: URI + Separator + Query String Concatenate them all together URI: URI and Query Separator: ? Query String Parameters: 1.n1 = bob 2.n2 = sally

50 Using telnet: GET $ telnet GET / HTTP/1.1 2.Host: 3.

51 Using telnet: POST $ telnet POST / HTTP/1.1 2.Host: 3.Content-type: application/x-www-form-urlencoded 4.Content-length: name=ted

52 Using curl command curl – used to transfer data to/from servers Useful for fetching a webpage $ curl

53 Using curl command: -i Use –i option to print HTTP header information for a fetched webpage $ curl –i

54 Using curl command: Send GET request GET data immediately follows the request URI and begins with a ? curl

55 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

56 Send a POST request with the browser Use a HTML form with the action set to post.

57 Using curl command: Send POST request POST query string is sent with the –d parameter. You dont need the ? for POST requests. curl –d n1=bob&n2=sally

58 Using curl command: -X Use –X option to specify a custom HTTP request method (GET, PUT, DELETE, POST). $ curl –X GET $ curl –X PUT $ curl –X DELETE $ curl –X POST

59 Using curl command: Send PUT request PUT query string is sent with the –d parameter. You dont need the ? for PUT requests. curl –d –X PUT n1=bob&n2=sally

60 Using curl command: Send DELETE request DELETE query string is sent with the –d parameter. You dont need the ? for DELETE requests. curl –d –X DELETE n1=bob&n2=sally

61 Hurl Online utility for making CURL requests

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

63 HTTP Response Message The message sent from the server to the client after the server receives a request message.

64 HTTP Response Message Format An initial line Zero or more header lines Message body

65 HTTP Response Message Example HTTP/ OK Date: Sat, 15 Sep :45:14 GMT Expires: -1 Cache-Control: private, max-age=0 Content-Type: text/html; charset=ISO Set-Cookie: PREF=ID=eff3eeca6edc9216:FF=0:TM= :LM= :S=rYavmahIW-zC321Y; expires=Mon, 15-Sep :45:14 GMT; path=/; domain=.google.com Set-Cookie: NID=63=rRYwex2AO2q9Z2y6lde7aRvbY6rCNEPy4nzW47g0MeAfofvScqQZt- 3Zc4jz097J31Xs9HxE46ZtaB6l6803pj9KYexa5Zs0QyzXJ1KxjexFtFGa7XQayzd7SoiqH0R4; expires=Sun, 17-Mar :45:14 GMT; path=/; domain=.google.com; HttpOnly P3P: CP="This is not a P3P policy! See for more info." Server: gws X-XSS-Protection: 1; mode=block X-Frame-Options: SAMEORIGIN Transfer-Encoding: chunked

66 Initial Line: Response Message Consists of 3 parts separated by spaces: – The version of HTTP being used – Response status codesstatus codes – English phrase describing the status code HTTP/ OK 123

67 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

68 HTTP Response Status Codes Error codes in 5xx – Internal error 500 – Not implemented 501 Redirection 3xx – Moved 301 – Found 302 – Not modified 304

69 Headers Line: Response Message Provide information about the response Headers Date Expires Content-type

70 Header Lines: Response Message In HTTP 1.1, a server must specify a Date header.

71 Message Body: Response Message Can contain html, xml, json, etc Usually returns html for webpage

72 REST

73 REST Outline What is REST? REST Web Services HTML and REST

74 What is REST? Representational State Transfer (REST) Defines architectural principles for creating web services that focus on a systems resources. Used by a wide range of clients written in many different programming languages.

75 REST Outline What is REST? REST Web Services HTML and REST

76 REST Web Services Follows four basic principles: 1.Use HTTP methods explicitly 2.Be stateless 3.Expose directory structure-like URIs 4.Transfer XML, JSON, or text

77 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.

78 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

79 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

80 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 users name from Bob to Robert. GET /updateUser?newName=Robert&oldName=Bob

81 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

82 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.

83 Good Web APIs Correct usage of HTTP POST: POST is for creating data. GoodBad POST /users HTTP/1.1 Host: myserver Content-Type: application/xml Robert GET /user?action=add&name=Robert

84 Good Web APIs Correct usage of HTTP PUT: PUT is for updating data. GoodBad PUT /users/Robert HTTP/1.1 Host: myserver Content-Type: application/xml Bob GET /user?action=up&newName=Robert &oldName=Bob

85 Good Web APIs Correct usage of HTTP DELETE: DELETE is for deleting data. GoodBad DELETE /users/Bob HTTP/1.1 Host: myserver Content-Type: application/xml Bob GET /user?action=del&name=Robert

86 Good Web APIs For URIs use nouns instead of verbs The verbs GET, PUT, DELETE, and POST should be all the verbs you need

87 2. Be stateless Send complete and independent requests Dont require the server to hold client state information This is similar to static methods where you give it all the data thats needed to perform the desired operation. Requires a FAT-client

88 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

89 3. Expose directory structure-like URIs Examples: 1.http://www.myservice.org/discussion/topics/{topic}http://www.myservice.org/discussion/topics/{topic} 2.http://www.myservice.org/discussion/2008/12/10/{topic}http://www.myservice.org/discussion/2008/12/10/{topic} Notice no spaces in directory names. If you need a space, use underscore instead.

90 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.

91 REST Outline What is REST? REST Web Services HTML and REST

92 Unfortunately, HTML only supports GET and POST actions for form processing. PUT and DELETE are in consideration for being added to the HTML spec.

93 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.

94 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... );


Download ppt "HTML forms, HTTP, & REST. HTML Forms A composition of controls that include buttons, checkboxes, text input, etc. that are used to capture user input."

Similar presentations


Ads by Google