1 / 18

Intro 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. The Evolution of HTTP. process. process. process. Inter-Process Communication Models.

dolan-wolfe
Download Presentation

Intro to HTML/CGI/JavaScript

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 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 Introduction to HTML/CGI/JavaScript

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

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

  4. 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 Introduction to HTML/CGI/JavaScript

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

  6. HTML: Structure of Frame Files Note: Cannot have body in Frame Files unit: pixel <html> <head><title>Frame Example</title></head> <frameset rows=250,*> <frame src=top_frame.html> <frameset cols=20%,60%,20%> <frame src=left_panel.html> <frameset rows=33%,33%,*> <frame name=“Mid1” src=mid1.html> <frame name=“Mid2” src=mid2.html> <frame name=“Mid3” src=mid3.html> </frameset> <frame name=“Right” src=right_panel.html> </frameset> </frameset> </html> Introduction to HTML/CGI/JavaScript

  7. HTML: Some General Tips • General structure of tags • Beginning tag: <name [attribute1=“value” attribute2=“value” … ]> • Optional ending tag: </name> • 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 Introduction to HTML/CGI/JavaScript

  8. HTML Form Made Simple 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> • <input type=ui_type name=name value=val > • <form action=url method=get|post [target=frame]> • Options: <option value=val [selected]> … </select> • <textarea rows=# cols=# name=name> … </textarea> • </form> Introduction to HTML/CGI/JavaScript

  9. CGI (Common Gateway Interface) when req starts with cgi-bin/* CGI cgi-lib.pl browser httpd (server) perl script executable FORM Program returns a header: Content-type: text/html or Location: <URL> Header must end with a blank line. var1 = val1 var2 = val2 var1 = val1 var2 = val2 static html . . . . . . Server passes req info thru ~20 env variables: QUERY_STRING REQUEST_METHOD CONTENT_LENGTH … 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/JavaScript

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

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

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

  13. Some Server Stuffs On file server nfs05: /import/departments/ asic/ cgi-bin/ dev/ On www1: /… /htdocs/asic@ cgi-bin/asic@ • 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 Introduction to HTML/CGI/JavaScript

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

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

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

  17. CGI (Common Gateway Interface when req starts with cgi-bin/* CGI cgi-lib.pl browser httpd (server) perl script executable FORM Program returns a header: Content-type: text/html or Location: <URL> Header must end with a blank line. var1 = val1 var2 = val2 var1 = val1 var2 = val2 static html . . . . . . Server passes req info thru ~20 env variables: QUERY_STRING REQUEST_METHOD CONTENT_LENGTH … 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/JavaScript

  18. Algorithm of sort_cell_stat_png • Save header lines to @header • 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: • 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 Introduction to HTML/CGI/JavaScript

More Related