1. CGI & HTML forms -05-

2. CGI Common Gateway Interface  A web server is only a pipe between user-agents  and content – it does not generate content

3. CGI Common Gateway Interface  A web server is only a pipe between user-agents  and content – it does not generate content  Works well with static content (e.g. html files)

4. CGI Common Gateway Interface  A web server is only a pipe between user-agents  and content – it does not generate content  Works well with static content, but what about  dynamic content?

5. CGI Common Gateway Interface  A web server is only a pipe between user-agents  and content – it does not generate content  Works well with static content, but what about  dynamic content?  A web server needs to delegate content generation  to third party applications

6. CGI Common Gateway Interface  A web server is only a pipe between user-agents  and content – it does not generate content  Works well with static content, but what about  dynamic content?  A web server needs to delegate content generation  to third party applications  Common Gateway Interface is a standard protocol  which defines how to delegate content generation  from a web server to a console application

7. CGI Common Gateway Interface  If dynamic content generation is required, the web  server invokes console applications as commands

8. CGI Common Gateway Interface  If dynamic content generation is required, the web These console applications are often called CGI scripts Although they can be written in any programming language, scripting languages are often used  server invokes console applications as commands

9. CGI Common Gateway Interface  If dynamic content generation is required, the web These console applications are often called CGI scripts Although they can be written in any programming language, scripting languages are often used  server invokes console applications as commands  For example: wikipedia User makes a requests for an entry The web server activates a script which transforms the source of the entry into an HTML document and sends the result to the user

10. CGI Common Gateway Interface  How do you tell a server to invoke an application  rather than send back its source code/binary form?

11. CGI Common Gateway Interface The CGI scripts are placed in a special directory recognized by the web server  How do you tell a server to invoke an application  rather than send back its source code/binary form?

12. CGI Common Gateway Interface The CGI scripts are placed in a special directory recognized by the web server Once there is a request for a resource in that directory, the web server knows to invoke the script/executable rather than return its content  How do you tell a server to invoke an application  rather than send back its source code/binary form?

13. CGI Common Gateway Interface The CGI scripts are placed in a special directory recognized by the web server Once there is a request for a resource in that directory, the web server knows to invoke the script/executable rather than return its content Usually the directory is called cgi-bin under the web server’s path  How do you tell a server to invoke an application  rather than send back its source code/binary form?

14. CGI Common Gateway Interface The CGI scripts are placed in a special directory recognized by the web server Once there is a request for a resource in that directory, the web server knows to invoke the script/executable rather than return its content Usually the directory is called cgi-bin under the web server’s path For security reasons only webmasters can update this directory or make it active  How do you tell a server to invoke an application  rather than send back its source code/binary form?

15. CGI CGI specification

16.  (e.g. search query) is passed to the command  CGI defines how information about the request CGI CGI specification

17.  (e.g. search query) is passed to the command  CGI defines how information about the request CGI CGI specification The web server sets the environment variables with proper information

18.  (e.g. search query) is passed to the command  CGI defines how information about the request CGI CGI specification The web server sets the environment variables with proper information If there is additional content (e.g. a PUT method), then it is passed using stdin

19.  (e.g. search query) is passed to the command  CGI defines how information about the request CGI CGI specification The web server sets the environment variables with proper information If there is additional content (e.g. a PUT method), then it is passed using stdin  CGI sets rules for the CGI script output and how  it needs to be handled by the web server

20.  (e.g. search query) is passed to the command  CGI defines how information about the request CGI CGI specification The web server sets the environment variables with proper information If there is additional content (e.g. a PUT method), then it is passed using stdin  CGI sets rules for the CGI script output and how The response is written to stdout  it needs to be handled by the web server

21.  (e.g. search query) is passed to the command  CGI defines how information about the request CGI CGI specification The web server sets the environment variables with proper information If there is additional content (e.g. a PUT method), then it is passed using stdin  CGI sets rules for the CGI script output and how The response is written to stdout There are two types of response: NPH and CGI  it needs to be handled by the web server

22. CGI CGI mechanism

23.  CGI Script execution CGI CGI mechanism The web server acts like an application gateway

24. CGI CGI mechanism The web server acts like an application gateway as follows: 1.Receives the request from a client  CGI Script execution

25. CGI CGI mechanism The web server acts like an application gateway as follows: 1.Receives the request from a client 2.Selects a CGI script to handle the request  CGI Script execution

26. CGI CGI mechanism The web server acts like an application gateway as follows: 1.Receives the request from a client 2.Selects a CGI script to handle the request 3.Converts the client’s request to a CGI request and sets the environment variables  CGI Script execution

27. CGI CGI mechanism The web server acts like an application gateway as follows: 1.Receives the request from a client 2.Selects a CGI script to handle the request 3.Converts the client’s request to a CGI request and sets the environment variables 4.Executes the script (request data might not be immediately available through stdin)  CGI Script execution

28. CGI CGI mechanism The web server acts like an application gateway as follows: 1.Receives the request from a client 2.Selects a CGI script to handle the request 3.Converts the client’s request to a CGI request and sets the environment variables 4.Executes the script (request data might not be immediately available through stdin) 5.Converts the CGI response into a response to the client  CGI Script execution

29. CGI CGI mechanism The web server acts like an application gateway  CGI Script execution Web server CGI script CGI Request Response User Request CGI Response

30. CGI CGI mechanism The web server acts like an application gateway The web server MAY act in a “non-transparent” manner, modifying the request or response in order to provide some additional service (e.g. media type transformation or protocol reduction)  CGI Script execution

31. CGI CGI mechanism The web server acts like an application gateway The web server MAY act in a “non-transparent” manner, modifying the request or response in order to provide some additional service (e.g. media type transformation or protocol reduction) The web server has to conform to the client’s request protocol, even if the CGI script fails to  CGI Script execution

32. CGI CGI mechanism The web server acts like an application gateway The web server MAY act in a “non-transparent” manner, modifying the request or response in order to provide some additional service (e.g. media type transformation or protocol reduction) The web server has to conform to the client’s request protocol, even if the CGI script fails to If authentication is involved, the script can be invoked only if access is granted  CGI Script execution

33. CGI CGI mechanism  CGI Script selection

34. CGI CGI mechanism The CGI script is selected based on the request URI  CGI Script selection

35. CGI CGI mechanism The CGI script is selected based on the request URI The script may match the whole or a leading part of the hierarchical part  CGI Script selection

36. CGI CGI mechanism The CGI script is selected based on the request URI The script may match the whole or a leading part of the hierarchical part The remainder of the path, if any, is a resource or sub- resource identifier to be interpreted by the script  CGI Script selection

37. CGI CGI mechanism The CGI script is selected based on the request URI The script may match the whole or a leading part of the hierarchical part The remainder of the path, if any, is a resource or sub- resource identifier to be interpreted by the script Several paths may be associated with the same script  CGI Script selection

38. CGI CGI Request

39. CGI CGI Request The variables contain data about the request passed from the server to the script  Meta-variables passed as environment variables

40. CGI CGI Request The variables contain data about the request passed from the server to the script They are identified by case-insensitive names; there cannot be two different variables whose names differ in case only  Meta-variables passed as environment variables

41. CGI CGI Request The variables contain data about the request passed from the server to the script They are identified by case-insensitive names; there cannot be two different variables whose names differ in case only Usually they appear as capitals with underscores (e.g. PATH_INFO)  Meta-variables passed as environment variables

42. CGI CGI Request The variables contain data about the request passed from the server to the script They are identified by case-insensitive names; there cannot be two different variables whose names differ in case only Usually they appear as capitals with underscores (e.g. PATH_INFO) A missing environment variable is equivalent to a zero-length (NULL) value; it is impossible to tell if the value is NULL or missing  Meta-variables passed as environment variables

43. CGI CGI Request Some variables are set for every request, some don’t  Meta-variables passed as environment variables

44. CGI CGI Request Some variables are set for every request, some don’t Variables set for every request  Meta-variables passed as environment variables

45. CGI CGI Request Some variables are set for every request, some don’t Variables set for every request SERVER_SOFTWARE The name and version of the web server SERVER_NAME The server's hostname or IP address GATEWAY_INTERFACE The revision of the CGI specification to which this server complies (e.g. CGI/1.1)  Meta-variables passed as environment variables

46. CGI CGI Request Some variables are set for every request, some don’t Request specific variables  Meta-variables passed as environment variables

47. CGI CGI Request Some variables are set for every request, some don’t Request specific variables SERVER_PROTOCOL The name and revision of the protocol this request came in with (e.g. HTTP/1.1) SERVER_PORT The port number to which the request was sent REQUEST_METHOD The method with which the request was made (e.g. POST)  Meta-variables passed as environment variables

48. CGI CGI Request Some variables are set for every request, some don’t Request specific variables REMOTE_ADDR The IP address of the client REMOTE_HOST The hostname of the client the request  Meta-variables passed as environment variables

49. CGI CGI Request Some variables are set for every request, some don’t Request specific variables PATH_INFO Identifies the resource or sub-resource derived from the portion of the URI path hierarchy following the part that identifies the script itself PATH_TRANSLATED The server provides a translated version of PATH_INFO, which takes the path and does any virtual-to-physical mapping to it  Meta-variables passed as environment variables

50. CGI CGI Request Some variables are set for every request, some don’t Request specific variables QUERY_STRING The part of the request URI which follows the first ? This string is added either by an HTML form with a GET method or by an HTML anchor This string is encoded in the standard URL format – spaces are replaced by “+” and special characters are encoded with %xx (hex value) for example: “ur/ a%&”  “ur%2F+a%25%26”  Meta-variables passed as environment variables

51. CGI CGI Request Some variables are set for every request, some don’t HTTP_* variables The web server may choose to pass some of the headers it received to the script  Meta-variables passed as environment variables

52. CGI CGI Request Some variables are set for every request, some don’t HTTP_* variables The web server may choose to pass some of the headers it received to the script Each such header is passed through an environment variable which name is composed in the following way: starts with “HTTP_” and then the HTTP header name, converted to upper case with occurrences of “-” replaced with “_” for example: HTTP_USER_AGENT HTTP_ACCEPT  Meta-variables passed as environment variables

53. CGI CGI Request The request data (for methods PUT and POST) is passed in stdin  Message body

54. CGI CGI Request The request data (for methods PUT and POST) is passed in stdin The script should expect to read data from stdin only if the variable CONTENT_LENGTH is not NULL; do not expect end- of-file after reading CONTENT_LENGTH bytes CONTENT_TYPE should be supplied as well  Message body

55. CGI CGI vs. NPH Response

56. CGI CGI vs. NPH Response These are scripts to which the server passes all responsibility for response processing The script’s output is sent to the client unmodified  NPH (non-parsed header) Response

57. CGI CGI vs. NPH Response These are scripts to which the server passes all responsibility for response processing The script’s output is sent to the client unmodified  NPH (non-parsed header) Response The response generated by the client is handled by the web server before being sent to the client Some special action by the web server might be required  CGI Response

58. CGI CGI Response The response has a message-header and a message-body, separated by a blank line (just like HTTP) The message-header contains one or more header fields The body may be NULL  General structure

59. CGI CGI Response The response has a message-header and a message-body, separated by a blank line (just like HTTP) The message-header contains one or more header fields The body may be NULL  General structure CGI; Extension; Protocol  Three different types of a response header

60. CGI CGI Response The response has a message-header and a message-body, separated by a blank line (just like HTTP) The message-header contains one or more header fields The body may be NULL  General structure CGI; Extension; Protocol Interpreted by the server; At least one CGI header must be present  Three different types of a response header

61. CGI CGI Response The response has a message-header and a message-body, separated by a blank line (just like HTTP) The message-header contains one or more header fields The body may be NULL  General structure CGI; Extension; Protocol Included in the response returned to the client  Three different types of a response header

62. CGI CGI Response Content-Type; Location; Status  CGI headers

63. CGI CGI Response Content-Type; Location; Status The content type of the message body (if exists) Syntax:Content-Type: Example:Content-Type: text/html  CGI headers

64. CGI CGI Response Content-Type; Location; Status This is used to specify to the server that the script is returning a reference to a document rather than an actual document Syntax:Location: URI | Example:Location: http://www.amazon.com Location: /images/logo.gif  CGI headers

65. CGI CGI Response Content-Type; Location; Status Used to indicate to the server what status code it should use in the response message Syntax:Status: Example:Status: 200  CGI headers

66. CGI CGI Response Content-Type; Location; Status  CGI headers  Response types Document response; Local redirect; Client redirect

67. CGI CGI Response Content-Type; Location; Status  CGI headers  Response types Document response; Local redirect; Client redirect The CGI script returns a document to the user The script MUST include a Content-Type header field The script might return a Status header; if omitted, the web server assumes 200 OK

68. CGI CGI Response Content-Type; Location; Status  CGI headers  Response types Document response; Local redirect; Client redirect A local redirection is indicated to the web server by providing a Location header with local URL The server MUST generate the response that it would have produced in response to a request containing the local URL The script MUST NOT return any other header fields or a message-body

69. CGI CGI Response Content-Type; Location; Status  CGI headers  Response types Document response; Local redirect; Client redirect A client redirection is indicated to the web server by providing a Location header with absolute URL The server MUST generate a 302 Found HTTP response The script MUST not provide any other header fields, except for server-defined Extension headers

70. CGI CGI Response The script might generate a data attachment The server MUST read all the data provided by the script, until the script sends the end-of-file symbol  Message body

71. CGI CGI summary  A web server is only a pipe between user-agents  and content – it does not generate content  Works well with static content, but what about  dynamic content?  A web server needs to delegate content generation  to third party applications  Common Gateway Interface is a standard protocol  which defines how to delegate content generation  from a web server to a console application

72.  (e.g. search query) is passed to the command  CGI defines how information about the request CGI CGI summary The web server sets the environment variables with proper information If there is additional content (e.g. a PUT method), then it is passed using stdin  CGI sets rules for the CGI script output and how The response is written to stdout There are two types of response: NPH and CGI  it needs to be handled by the web server

73.  CGI scripts generate content based on data CGI Input for CGI scripts

74.  It might be meta-data, such as user-agent or user’s  CGI scripts generate content based on data CGI Input for CGI scripts  IP address; no user interaction required

75.  It might be meta-data, such as user-agent or user’s  CGI scripts generate content based on data CGI Input for CGI scripts  It is possible to have user interaction which yields  user generated data  IP address; no user interaction required

76.  It might be meta-data, such as user-agent or user’s  CGI scripts generate content based on data CGI Input for CGI scripts  It is possible to have user interaction which yields  user generated data  IP address; no user interaction required  HTML forms – a convenient way to generate user  input For example, shipping information or credit card details

77.  A form is created by using the element CGI HTML forms

78.  A form is created by using the element  A form is an area that contains form controls CGI HTML forms Form controls are elements that allow the user to enter information (e.g. text fields, drop-down menus, radio buttons, checkboxes, …)

79.  A form is created by using the element  A form is an area that contains form controls CGI HTML forms Form controls are elements that allow the user to enter information (e.g. text fields, drop-down menus, radio buttons, checkboxes, …)  Users set the values of form controls and submit Control modification is achieved though entering text, selecting menu items, etc…

80.  A form is created by using the element  A form is an area that contains form controls CGI HTML forms Form controls are elements that allow the user to enter information (e.g. text fields, drop-down menus, radio buttons, checkboxes, …)  Users set the values of form controls and submit Control modification is achieved though entering text, selecting menu items, etc… Then, the form is submitted to an agent (e.g. a web server) for processing

81.  It is a block-level element  A form is an area that contains form controls CGI The element It contains: normal content, markup, controls, and labels

82. HTML forms  Example (html) Username: E-mail: Skip intro The element

83. HTML forms  Example (browser) The element

84.  It is a block-level element  A form is an area that contains form controls CGI The element It contains: normal content, markup, controls, and labels  The layout of the form depends on its contents

85.  It is a block-level element  A form is an area that contains form controls CGI The element It contains: normal content, markup, controls, and labels  The layout of the form depends on its contents  Two important attributes actionSpecifies the resource URI which is used to process the form data

86.  It is a block-level element  A form is an area that contains form controls CGI The element It contains: normal content, markup, controls, and labels  The layout of the form depends on its contents  Two important attributes actionSpecifies the resource URI which is used to process the form data method Specifies which HTTP method will be used to submit the form data

87. HTML forms  Example (html) Username: E-mail: Skip intro The element

88.  Users interact with forms through named controls CGI Form controls Each control has a control name

89.  Users interact with forms through named controls CGI Form controls Each control has a control name Each control has an initial value and a current value (strings); at first the current value is set to the initial value and is then modified through user interaction If a form is reset, the current value of each control becomes the initial value again

90. HTML forms  Example (html) Username: E-mail: Skip intro The element

91.  Users interact with forms through named controls CGI Form controls Each control has a control name Each control has an initial value and a current value (strings); at first the current value is set to the initial value and is then modified through user interaction If a form is reset, the current value of each control becomes the initial value again Control types: buttons, checkboxes, radio buttons, menus, text input, files select, hidden controls

92.  On submit, the form data is processed in steps CGI Form submission 1.Identify successful controls 2.Build a form data set 3.Encode the form data set 4.Submit the encoded form data set

93.  On submit, the form data is processed in steps CGI Form submission 1.Identify successful controls 2.Build a form data set 3.Encode the form data set 4.Submit the encoded form data set A successful control is valid for submission It must have a control name and a current value It cannot be disabled

94.  On submit, the form data is processed in steps CGI Form submission 1.Identify successful controls 2.Build a form data set 3.Encode the form data set 4.Submit the encoded form data set A data set is a sequence of control-name/current-value pairs Only successful controls are paired

95.  On submit, the form data is processed in steps CGI Form submission 1.Identify successful controls 2.Build a form data set 3.Encode the form data set 4.Submit the encoded form data set The data is encoded The default encoding is URL encoding

96.  On submit, the form data is processed in steps CGI Form submission 1.Identify successful controls 2.Build a form data set 3.Encode the form data set 4.Submit the encoded form data set The data is sent to the processing resource The resource is identified by the action attribute The method used is identified by the method attribute

97.  If method=“GET” CGI Form submission The user agent constructs a URI by taking the value of action, appending a “?” to it, and then appending the form data set The user agent then traverses the link to this URI. In this scenario, form data are restricted to ASCII codes

98.  If method=“GET” CGI Form submission The user agent constructs a URI by taking the value of action, appending a “?” to it, and then appending the form data set The user agent then traverses the link to this URI. In this scenario, form data are restricted to ASCII codes  If method=“POST” Instead of appending the encoded form data set to the URI, it is sent as the body of the message Content-Length is set to the length of the data set, and Content-Type is set to application/x-www-form-urlencoded

99.  A form is created by using the element  A form is an area that contains form controls CGI HTML forms summary Form controls are elements that allow the user to enter information (e.g. text fields, drop-down menus, radio buttons, checkboxes, …)  Users set the values of form controls and submit Control modification is achieved though entering text, selecting menu items, etc… Then, the form is submitted to an agent (e.g. a web server) for processing