1. 1/16 Steven Leung Introduction to HTML/CGI/JavaScript Intro to HTML/CGI/JavaScript How the Web Works HTML: Basic Concept CGI: Basic Concept JavaScript: It Is Dying Example 1: Test CGI with printenv Some Server Stuffs Example 2: Sort Cell Statistics

2. 2/16 Steven Leung Introduction to HTML/CGI/JavaScript The Evolution of HTTP In the beginning … process Inter-Process Communication Models Shared memory Message passing client server Client-Server Computing Model Client sends a request Server responds web browser http server HyperText Transport Protocol (HTTP)

3. 3/16 Steven Leung Introduction to HTML/CGI/JavaScript IP_Adr[:Port] Browser-Server Interaction browser httpd (server) Protocol (ftp, file) http://www1/asic content of request URL 1 2 htdocs/ “root” asic/ index.html 3 4 5 cgi-bin/* will cause server to execute the file cgi-bin/ * Javascript makes the browser do extra things HTML

4. 4/16 Steven Leung Introduction to HTML/CGI/JavaScript Summary HTML files are consumed by the browsers Markers (Tags) tell the browser how to present the materials with the built-in GUI widgets Text objects like tables, fonts, paragraphs Graphic images UI FORM widgets like selection, checkbox, radio, button, etc. Embedded URLs (links) enable browser to communicate w/ server CGI scripts work on the server side Invoked by the ‘cgi-bin/’ entry in the request part of the URL Additional information from FORM is passed to the server Server then passes the info to script thru a set of env variables The script generates responses sent back to the browser by the server JavaScripts are embedded in the HTML files and work on the browser side (initially) Example: Check of valid data in forms

5. 5/16 Steven Leung Introduction to HTML/CGI/JavaScript Whatever <!-- Start of comment lines JavaScripts, if present, appear in the header section Header section has no effect on the browser display --> Most of the HTML constructs are shown up here HTML: Structure of Non-Frame Files Container-type of tags has the form … is an example of one of the few non-container tags Displays are controlled by tags. Multiple spaces are treated as just one space. The tag tells the browser just display the text as is.

6. 6/16 Steven Leung Introduction to HTML/CGI/JavaScript HTML: Structure of Frame Files Frame Example Note: Cannot have body in Frame Files unit: pixel

7. 7/16 Steven Leung Introduction to HTML/CGI/JavaScript HTML: Some General Tips General structure of tags Beginning tag: Optional ending tag: The “container” (nested) image: Apply intuitively/sensibly Keep in mind the picture of the 3 functions of the Browser Generate the webpage display – the bulk of HTML tags Accept user inputs – via the form elements Send request messages to servers – Link, Source Attribute, and Form Form combines all of the above 3 functions and it’s where the CGI scripts come into the picture Two very convenient reverse engineering tools View source in the browser Netscape Composer The Bare Bones Guide to HTML

8. 8/16 Steven Leung Introduction to HTML/CGI/JavaScript HTML Form Made Simple size=# maxlength=# Additional Attributes checked text radio checkbox checked … submit/reset options Options: … button (In 4.0: button becomes a form object itself)

9. 9/16 Steven Leung Introduction to HTML/CGI/JavaScript CGI (Common Gateway Interface) httpd (server) static html browser Server passes req info thru ~20 env variables: QUERY_STRING REQUEST_METHOD CONTENT_LENGTH … executable when req starts with cgi-bin/* CGI Program returns a header: Content-type: text/html or Location: Header must end with a blank line. GET: Form data appended to URL, limited sizePOST: Form data not passed thru URL, unlimited size. Program obtains form data thru STDIN. var1 = val1 var2 = val2... FORM var1 = val1 var2 = val2... cgi-lib.pl perl script

10. 10/16 Steven Leung Introduction to HTML/CGI/JavaScript Javascript Allow webpage internal data to be changed on the client side Problem: IE and Netscape have some slight differences browser HTML Netscape’s Document Object Model JS

11. 11/16 Steven Leung Introduction to HTML/CGI/JavaScript CGI: Printenv with Get Method

12. 12/16 Steven Leung Introduction to HTML/CGI/JavaScript CGI: Printenv with Post Method

13. 13/16 Steven Leung Introduction to HTML/CGI/JavaScript Some Server Stuffs Mosaic  Netscape  Apache Installation using port 80 (default) requires root password Child server daemon httpd assumes uid of nobody User/Group configurable The root path / in URL received maps to the DocumentRoot dir. (in the httpd.conf file), not the machine’s root directory When the server executes the cgi script, it assumes the uid of nobody, which normally has the least access rights Symbolic links depend on the configuration setup On www1: /… /htdocs/asic@ cgi-bin/asic@ On file server nfs05: /import/departments/ asic/ cgi-bin/ dev/

14. 14/16 Steven Leung Introduction to HTML/CGI/JavaScript Example: Initial Page

15. 15/16 Steven Leung Introduction to HTML/CGI/JavaScript Example: Sort By Area/Descending

16. 16/16 Steven Leung Introduction to HTML/CGI/JavaScript Example: Sort with Data Plot

17. 17/16 Steven Leung Introduction to HTML/CGI/JavaScript CGI (Common Gateway Interface httpd (server) static html browser Server passes req info thru ~20 env variables: QUERY_STRING REQUEST_METHOD CONTENT_LENGTH … executable when req starts with cgi-bin/* CGI Program returns a header: Content-type: text/html or Location: Header must end with a blank line. GET: Form data appended to URL, limited sizePOST: Form data not passed thru URL, unlimited size. Program obtains form data thru STDIN. var1 = val1 var2 = val2... FORM var1 = val1 var2 = val2... cgi-lib.pl perl script

18. 18/16 Steven Leung Introduction to HTML/CGI/JavaScript Algorithm of sort_cell_stat_png Save header lines to @header Insert Save the rest of the lines (table) to @lines Sort the table according to the user criteria and save the line index into array @sorted_line_idx Generate 2 png files: Write out the data files to /tmp Left-shift the line number as x-coordinates for plotting Write out the CMD files (Bulks of sub gen_png) Execute gen_png csh script to actually (at end of sub gen_png) Generate 2 png files Delete the data file Write out the saved header Write out the table according to the sorted line index order