FormsAndCGIMechanism.pdf

Lecture Forms and Common Gateway Interface Mechanism This content is protected and may not be shared, uploaded, or distributed. Copyright © Ellis Horowitz 1999-2024 CGI 1  What are We Talking About Today? HTML Forms – Used to create inter...

Lecture Forms and Common Gateway Interface Mechanism This content is protected and may not be shared, uploaded, or distributed. Copyright © Ellis Horowitz 1999-2024 CGI 1  What are We Talking About Today? HTML Forms – Used to create interactive web pages where users can input and submit data. – Key for interactions like registration and data submission. – Represents documents as a tree structure Form Submission Methods – GET: Appends data to URL. – POST: Sends data as a payload to the server. CGI Mechanism – Server-side scripts process form data and generate dynamic content. – Popular scripting languages for CGI include Python, Perl, and PHP Copyright © 1999 - 2024 Ellis Horowitz CGI DOM 2  Forms Used to create a set of pages that contain fields in which the viewer can select and supply information – Introduced very early in HTML 2.0 – Allows WWW users to perform data entry – Permit direct interaction with customers for inquiries, registration, sales of products, and services – To create a capability requires two steps: Use HTML form elements to create the pages that contain the form Write a server-side script to process form data; this program must be placed so the WWW server can execute it Copyright © Ellis Horowitz 1999-2024 CGI 3  The Original Set of User Interface Elements Text File Browse Checkbox Radio button Submit submit Reset reset Password **** Red Red Green Blue Copyright © Ellis Horowitz 1999-2024 CGI 4  FORM Element and Some Attributes Syntax... Attribute Specifications – ACTION=URI (form handler) – METHOD=[ get | post ] (HTTP method for submitting form) GET is the default; form contents are appended to the URL POST form contents to be sent as payload – ENCTYPE=ContentType (content type to submit form as) Defaults to application/x-www-urlencoded which returns name/value pairs, separated by &, spaces replaced by + and reserved characters (like #) replaced by %HH, H a hex digit – ACCEPT-CHARSET=Charsets (supported character encodings) – TARGET=FrameTarget (frame to render form result in, in HTML4) (a browsing context name or keyword, in HTML5, such as _self, _blank, _parent, _top, iframename) – ONSUBMIT=Script (form was submitted) – ONRESET=Script (form was reset) – AUTOCOMPLETE (HTML5 ONLY) values completed by browser https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form Copyright © Ellis Horowitz 1999-2024 CGI 5  Tag Used inside tag to specify a data-entry object Has attributes, here are a few – TYPE: User input type (default is TEXT) – NAME: Name of data entry object whose value the user will supply – VALUE: Required for radio and checkboxes – CHECKED: For radio buttons and checkboxes – SIZE: Specific to each type of field – MAXLENGTH: Limit on accepted characters – SRC: Image file used as a graphical submit button when TYPE=IMAGE – DISABLED unavailable in this context – READONLY for text and passwords HTML5 adds several new attributes for validation See http://www.w3schools.com/tags/tag_input.asp Copyright © Ellis Horowitz 1999-2024 CGI 6  Tag Attributes tag also supports the Global Attributes, that can be used with all HTML elements – CLASS: Specifies one or more class names for an element (refers to a class in a style sheet) – HIDDEN: Specifies that an element is not yet, or is no longer, relevant – And many more. See: https://www.w3schools.com/tags/ref_standardattributes.asp The tag also supports the Event Attributes in HTML. – Window event attributes: onload, onunload, etc. – Form event attributes: onchange, onfocus, etc. – Keyboard / mouse events: onkeydown, onclick, etc. – Drag, clipboard, media events: onpause, onplay, etc. – And many more. See: https://www.w3schools.com/tags/ref_eventattributes.asp Copyright © Ellis Horowitz 1999-2024 CGI 7  Element, Type Options(cont’d) TYPE:[CHECKBOX FILE HIDDEN IMAGE PASSWORD RADIO RESET SUBMIT TEXT] [HTML5 adds 13 new input types. See later slides] CHECKBOX: A single value, on/off; each generates name/value pair FILE: Users attach a file to the form contents; a text field holds the file name, and a button permits browsing Which School would you like to apply to? Letters&Science Engineering Business Law Medicine What semester do you wish to start? Fall Spring Summer To submit your choices, press this button:. To reset the form, press this button:. Copyright © Ellis Horowitz 1999-2024 CGI 31 Browser Output of , Example Copyright © Ellis Horowitz 1999-2024 CGI 32 Query Results for Example Copyright © Ellis Horowitz 1999-2024 CGI 33  FIELDSET – Form Control Group The FIELDSET element defines a form control group. – By grouping related form controls, authors can divide a form into smaller, more manageable parts, improving the usability problem that can strike when confronting users with too many form controls. – The grouping provided by FIELDSET also helps the accessibility of forms to those using aural browsers by allowing these users to more easily orient themselves when filling in a large form. The content of a FIELDSET element must begin with a LEGEND to provide a caption for the group of controls. Following the LEGEND, FIELDSET may contain any HTML element, including another FIELDSET. Copyright © Ellis Horowitz 1999-2024 CGI 34  Browser Output 3 Fieldsets Grouping form elements Run through Tab order: Name E-mail Mailing Address HTML 3.2 HTML 4.0.. Etc To test ACCESSKEY in Chrome use ALT + ACCESSKEY (I, O, C) To test ACCESSKEY in Firefox use ALT + SHIFT + ACCESSKEY http://csci571.com/examples/html5/fieldsettest.html Copyright © Ellis Horowitz 1999-2024 CGI 35  Fieldset Example 3 fieldsets with legends ACCESSKEY specifies a single Contact Information character for giving focus Name: E-mail Address: Mailing Address: Ordering Information Please select the product(s) that you wish to order: HTML 3.2 Reference HTML 4.0 Reference Cascading Style Sheets Guide Credit Card Information Visa MasterCard Number: Expiry: Copyright © Ellis Horowitz 1999-2024 CGI 36  Ways to pass data to the backend over HTTP URL – Path – QueryString Body – Supported by application/x-www-form-urlencoded (default) multipart/form-data (support files) text/plain See: https://developer.mozilla.org/en- US/docs/Web/HTTP/Methods/POST – Other: JSON (applications/json) See: https://www.geeksforgeeks.org/how-to-post- json-data-to-server/ Copyright © Ellis Horowitz 1999-2024 CGI 37  Purpose of the CGI Common Gateway Interface (CGI) is a mechanism by which programs, called scripts, can be used to create dynamic Web documents – Scripts are placed in a server directory often named cgi-bin – Scripts can deliver information that is not directly readable by clients – Scripts dynamically convert data from a non- Web source (e.g., DBMS) into a Web-compatible document Current version of CGI is 1.1 The reason for the term “common gateway” is these programs act as gateways between the WWW and any other type of data or service See http://www.w3.org/CGI/ Copyright © Ellis Horowitz 1999-2024 CGI 38  Basic Operation An executable program that can be run without being directly invoked by users The browser issues a query, (a), which is sent to the server; the server interprets it and invokes the proper CGI script, passing it the input data, (b); output from the script is returned, (c), via the server, to the browser, (d); output may be HTML, but it may instead be a URL, which is fetched by the server Copyright © Ellis Horowitz 1999-2024 CGI 39  Languages to Write Gateway Programs Any language that can produce an executable file Some typical ones are: – Traditional compiled languages such as C/C++ – Or interpreted languages such as: PHP, JavaScript, Python or Java Interpreted languages are often preferred as they are – Easy to write and portable, and speed is usually not a factor http://w3techs.com/technologies/overview/programming_language/all Copyright © Ellis Horowitz 1999-2024 CGI 40  Anchors Are Used to Invoke CGI Scripts A hypertext reference can refer to: – A remote file – An executable script in the cgi-bin directory – An executable script with arguments URLs produced by the query “bicycle tours”: http://search.yahoo.com/bin/search?p=bicycle+tours http://search.msn.com/results.asp?RS=CHECKED&FORM=M SNH&v=1&q=bicycle+tours&zip=90211 Copyright © Ellis Horowitz 1999-2024 CGI 41  CGI Script Environment Variables Environment variables – are a set of pre-defined dynamic values that can affect a running program – they are generally part of the operating environment in which a program runs; – UNIX (its variants) and Windows all use these as a means of passing information about the environment of a process – CGI environment variables are created by the web server and set immediately before the web server executes a gateway script – the CGI script can retrieve the values and use the data they send – CGI environment variables are defined in https://datatracker.ietf.org/doc/html/rfc3875 Copyright © Ellis Horowitz 1999-2024 CGI 42  CGI Environment Variables Can be classified into two major categories: – 1. Non-request specific – 2. Request specific Non-request-specific environment variables are the same for all requests: SERVER_SOFTWARE, the name and version of the information server software answering the request e.g., SERVER_SOFTWARE = Apache/1.3.15 SERVER_NAME, server’s hostname, DNS alias, or IP address, e.g., SERVER_NAME = nunki.usc.edu GATEWAY_INTERFACE, the revision of the CGI specification with which this server complies SERVER_PROTOCOL, the name and revision of the information protocol with which this request came in e.g., SERVER_PROTOCOL = HTTP/1.0 SERVER_PORT, the port number to which the request was sent e.g., SERVER_PORT = 8088 Copyright © Ellis Horowitz 1999-2024 CGI 43  CGI Environment Variables (cont’d) Request-specific environment variables –These variables are set depending on each request REQUEST_METHOD, the method with which the request was made; e.g., (GET, POST) PATH_INFO, the extra path information as given by the client; e.g., given http://nunki.usc.edu:8080/cgi-bin/test.cgi/extra/path then PATH_INFO = /extra/path PATH_TRANSLATED, the PATH_INFO path translated into an absolute document path on the local system PATH_TRANSLATED = /auto/home-scf- 03/csci571/WebServer/apache_1.2.5/htdocs/extra/path SCRIPT_NAME, the path and name of the script being accessed as referenced in the URL SCRIPT_NAME = /cgi-bin/test.cgi QUERY_STRING, the information that follows the ? in the URL that referenced this script Copyright © Ellis Horowitz 1999-2024 CGI 44  CGI Environment Variables (cont’d) – REMOTE_HOST, Internet domain name of the host making the request – REMOTE_ADDR, the IP address of the remote host making the request – AUTH_TYPE, the authentication method required to authenticate a user who wants access – REMOTE_USER, username that server and script have authenticated – REMOTE_IDENT, the remote username retrieved by the server using inetd identification (RFC 1413) – CONTENT_TYPE, for queries that have attached information, such as POST method, this is the MIME content type of the data – CONTENT_LENGTH, the length of the content as given by the client Copyright © Ellis Horowitz 1999-2024 CGI 45  CGI Environment Variables (cont’d) Also, every item of information in an HTTP request header is stored in an environment variable – Capitalize the name in the request header field – Convert dashes to underscores – Add the prefix HTTP_ For example: – HTTP_USER_AGENT contains the request header User_Agent field data e.g., HTTP_USER_AGENT = Mozilla/4.7 [en]C-DIAL (WinNT; U) – HTTP_ACCEPT contains the request header Accept field, of the form type/subtype – HTTP_REFERER contains the URL of the document that generated this request Copyright © Ellis Horowitz 1999-2024 CGI 46  CGI Script Output The script sends its output to stdout; the server adds appropriate headers and returns this output to the client Output from a script to the server could be: – A document generated by a script – The type of document could be HTML, plain text, image, video or audio clip, and many other types – Instructions to the server for retrieving the desired output elsewhere – an error indicator Copyright © Ellis Horowitz 1999-2024 CGI 47  Server Directives The output of scripts begins with a small header consisting of text lines containing server directives – This must be followed by a blank line Any headers that are not server directives are sent directly back to the client Server directives are used by CGI scripts to inform the server about the type of output The current CGI specification defines three (3) server directives: – Content-type – Location – Status Copyright © Ellis Horowitz 1999-2024 CGI 48  Server Directives (cont’d) 1. Content-type: type/subtype – The MIME type of the document being returned – For example, content-type: text/html (HTML document) content-type: text/plain (plain-text document) 2. Location – Alerts the server that the script is returning a reference to a document, not an actual document – If the argument is a URL, the server will issue a redirect to the client; for example, location: http://www.ncsa.uiuc.edu/ – If the argument is a path, the document specified will be retrieved by the server, starting at the document root; for example, location: /path/doc.txt Copyright © Ellis Horowitz 1999-2024 CGI 49  Server Directives (cont’d) 3. Status – This is used to give the server an HTTP/1.1 status line to send to the client – The format is nnn xxxx: nnn is the three-digit status code xxxx is the informative message E.g., 403 Forbidden Copyright © Ellis Horowitz 1999-2024 CGI 50 Things to Check Before Running CGI Scripts The following need to be readable and executable by the server – CGI scripts – Other programs that the scripts call – The directory in which the scripts reside In UNIX, check the read/write/execute permissions of the files and directories In Windows, check the web server settings of the script directories Copyright © Ellis Horowitz 1999-2024 CGI 51  show_vars.php PHP is a language with built-in ability to access environment variables show_vars.php is a program that prints environment variables The code is available at: http://csci571.com/examples/php/show_vars.php Below is some sample output Copyright © Ellis Horowitz 1999-2024 CGI 52  show_vars.php – output tabs & arrays Show $_SERVER, $_POST, $_GET Variables Copyright © Ellis Horowitz 1999-2024 CGI 53  show_vars.php – $_SERVER, $_POST, $_GET $_SERVER $_POST $_GET Copyright © Ellis Horowitz 1999-2024 CGI 54  show_vars.php – POST $_SERVER array is initialized by the server, and contains special parameters such as headers, server version. The $_POST array is set when a form of method=POST has an action to this page and is submitted. A form with method = POST First Name Last Name Copyright © Ellis Horowitz 1999-2024 CGI 55  Demo session Firefox developer Tools – Built-in, no download required – Invoke at “burger” -> More Tools -> Web Developer Tools Copyright © Ellis Horowitz 1999-2024 CGI 56