Intro to HTMLCGIJava Script n n n n
![HTML Form Made Simple n n n <form action=url method=get|post [target=frame]> <input type=ui_type name=name](https://slidetodoc.com/presentation_image/a8e9f9452be79b0b46e72433000331ed/image-8.jpg "HTML Form Made Simple n n n <form action=url method=get|post [target=frame]> <input type=ui_type name=name")
- Slides: 18
Intro to HTML/CGI/Java. Script n n n n Steven Leung How the Web Works HTML: Basic Concept CGI: Basic Concept Java. Script: It Is Dying Example 1: Test CGI with printenv Some Server Stuffs Example 2: Sort Cell Statistics Introduction to HTML/CGI/Java. Script 1/16
The Evolution of HTTP In the beginning … process Inter-Process Communication Models process • Shared memory • Message passing process Client-Server Computing Model server client • Client sends a request • Server responds Hyper. Text Transport Protocol (HTTP) web browser Steven Leung http server Introduction to HTML/CGI/Java. Script 2/16
Browser-Server Interaction Javascript makes the browser do extra things 2 browser 4 5 cgi-bin/* will cause server to execute the file HTML 1 URL http: //www 1/asic httpd (server) 3 htdocs/ “root” asic/ index. html cgi-bin/ content of request * IP_Adr[: Port] Protocol (ftp, file) Steven Leung Introduction to HTML/CGI/Java. Script 3/16
Summary n HTML files are consumed by the browsers n n n Embedded URLs (links) enable browser to communicate w/ server CGI scripts work on the server side n n n Markers (Tags) tell the browser how to present the materials with the built-in GUI widgets n Text objects like tables, fonts, paragraphs n Graphic images n UI FORM widgets like selection, checkbox, radio, button, etc. 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 Java. Scripts are embedded in the HTML files and work on the browser side (initially) n Steven Leung Example: Check of valid data in forms Introduction to HTML/CGI/Java. Script 4/16
HTML: Structure of Non-Frame Files Container-type of tags has the form <name>…</name> <html> <header><title>Whatever</title> <!-- Start of comment lines Java. Scripts, if present, appear in the header section Header section has no effect on the browser display The <pre> tag tells the browser just display the text as is. --> </header> <body> <pre> is an example of one of the few non-container tags Most of the HTML constructs are shown up here Displays are controlled by tags. Multiple spaces are treated as just one space. Steven Leung </body> </html> Introduction to HTML/CGI/Java. Script 5/16
HTML: Structure of Frame Files Note: Cannot have body in Frame Files <html> <head><title>Frame Example</title></head> <frameset rows=250, *> <frame src=top_frame. html> unit: pixel <frameset cols=20%, 60%, 20%> <frame src=left_panel. html> <frameset rows=33%, *> <frame name=“Mid 1” src=mid 1. html> <frame name=“Mid 2” src=mid 2. html> <frame name=“Mid 3” src=mid 3. html> </frameset> <frame name=“Right” src=right_panel. html> </frameset> </html> Steven Leung Introduction to HTML/CGI/Java. Script 6/16
HTML: Some General Tips n General structure of tags n n The “container” (nested) image: Apply intuitively/sensibly Keep in mind the picture of the 3 functions of the Browser n n n 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 combines all of the above 3 functions and it’s where the CGI scripts come into the picture Two very convenient reverse engineering tools n n n Beginning tag: <name [attribute 1=“value” attribute 2=“value” … ]> Optional ending tag: </name> View source in the browser Netscape Composer The Bare Bones Guide to HTML Steven Leung Introduction to HTML/CGI/Java. Script 7/16
HTML Form Made Simple n n n <form action=url method=get|post [target=frame]> <input type=ui_type name=name value=val > Additional Attributes size=# maxlength=# text checked radio checked checkbox submit/reset button (In 4. 0: button becomes a form object itself) <select name=name> options </select> n Options: <option value=val [selected]> … </select> n <textarea rows=# cols=# name=name> … </textarea> n </form> Steven Leung Introduction to HTML/CGI/Java. Script 8/16
CGI (Common Gateway Interface) when req starts with cgi-bin/* browser httpd (server) CGI var 1 = val 1 var 2 = val 2 . . . cgi-lib. pl executable perl script FORM var 1 = val 1 var 2 = val 2 static html . . . Server passes req info thru ~20 env variables: QUERY_STRING REQUEST_METHOD CONTENT_LENGTH … Steven Leung Program returns a header: Content-type: text/html or Location: <URL> Header must end with a blank line. GET: Form data appended to URL, limited size POST: Form data not passed thru URL, unlimited size. Program obtains form data thru STDIN. Introduction to HTML/CGI/Java. Script 9/16
Javascript n Allow webpage internal data to be changed on the client side n Problem: IE and Netscape have some slight differences HTML JS Netscape’s Document Object Model browser Steven Leung Introduction to HTML/CGI/Java. Script 10/16
CGI: Printenv with Get Method Steven Leung Introduction to HTML/CGI/Java. Script 11/16
CGI: Printenv with Post Method Steven Leung Introduction to HTML/CGI/Java. Script 12/16
Some Server Stuffs n Mosaic Netscape Apache n n Child server daemon httpd assumes uid of nobody n n Installation using port 80 (default) requires root password User/Group configurable The root path / in URL received maps to the Document. Root 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 www 1: /… /htdocs/asic@ cgi-bin/asic@ Steven Leung On file server nfs 05: /import/departments/ Introduction to HTML/CGI/Java. Script asic/ cgi-bin/ dev/ 13/16
Example: Initial Page Steven Leung Introduction to HTML/CGI/Java. Script 14/16
Example: Sort By Area/Descending Steven Leung Introduction to HTML/CGI/Java. Script 15/16
Example: Sort with Data Plot Steven Leung Introduction to HTML/CGI/Java. Script 16/16
CGI (Common Gateway Interface when req starts with cgi-bin/* browser httpd (server) CGI var 1 = val 1 var 2 = val 2 . . . cgi-lib. pl executable perl script FORM var 1 = val 1 var 2 = val 2 static html . . . Server passes req info thru ~20 env variables: QUERY_STRING REQUEST_METHOD CONTENT_LENGTH … Steven Leung Program returns a header: Content-type: text/html or Location: <URL> Header must end with a blank line. GET: Form data appended to URL, limited size POST: Form data not passed thru URL, unlimited size. Program obtains form data thru STDIN. Introduction to HTML/CGI/Java. Script 17/16
Algorithm of sort_cell_stat_png n Save header lines to @header n n Insert <img src=/cgi-bin/serve_png? pngfile> 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: n Write out the data files to /tmp n n n Write out the CMD files (Bulks of sub gen_png) Execute gen_png csh script to actually (at end of sub gen_png) n n Left-shift the line number as x-coordinates for plotting Generate 2 png files Delete the data file Write out the saved header Write out the table according to the sorted line index order Steven Leung Introduction to HTML/CGI/Java. Script 18/16