Intro to HTML/CGI/JavaScript

Steven Leung Introduction to HTML/CGI/JavaScript 1/16

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 HTTPIn the beginning …

process

process 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)


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

5cgi-bin/* will cause server to execute the file

cgi-bin/

*

Javascript makes the browser do extra things

HTML


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


<html>

<header><title>Whatever</title>



</header>

<body>

<pre>

Most of the HTML constructs are shown up here<br>

</body>

</html>

HTML: Structure of Non-Frame Files

Container-type of tags has the form<name>…

</name>

<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.

The <pre> tag tells the browser just display the text as is.


HTML: Structure of Frame Files

<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>



</frameset>

<frame name=“Right” src=right_panel.html>

</frameset>

</frameset>

</html>

Note: Cannot have body in Frame Files

unit: pixel


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


HTML Form Made Simple <form action=url method=get|post [target=frame]>

size=# maxlength=#

Additional Attributes

checkedtextradiocheckbox checked

<textarea rows=# cols=# name=name> … </textarea> </form>

<input type=ui_type name=name value=val >

submit/reset

<select name=name> options </select> Options: <option value=val [selected]> …

</select>

button (In 4.0: button becomes a form object itself)


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

orLocation: <URL>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


cgi-lib.pl

perl script


Javascript Allow webpage internal data to be changed on the client side

Problem: IE and Netscape have some slight differences

browser

HTMLNetscape’s Document Object ModelJS


CGI: Printenv with Get Method


CGI: Printenv with Post Method


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 setupOn www1:/… /htdocs/asic@ cgi-bin/asic@

On file server nfs05:/import/departments/ asic/ cgi-bin/ dev/


Example: Initial Page


Example: Sort By Area/Descending


Example: Sort with Data Plot


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

orLocation: <URL>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.


FORM


cgi-lib.pl

perl script


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

Documents

Intro to HTML/CGI/JavaScript