Intro to html cgi javascript
This presentation is the property of its rightful owner.
Sponsored Links
1 / 18

Intro to HTML/CGI/JavaScript PowerPoint PPT Presentation


  • 128 Views
  • Uploaded on
  • Presentation posted in: General

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.

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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -

Presentation Transcript


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

Introduction to HTML/CGI/JavaScript


The evolution of http

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


Browser server interaction

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


Summary

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


Html structure of non frame files

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


Html structure of frame files

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


Html some general tips

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


Html form made simple

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


Cgi common gateway interface

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


Javascript

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


Cgi printenv with get method

CGI: Printenv with Get Method

Introduction to HTML/CGI/JavaScript


Cgi printenv with post method

CGI: Printenv with Post Method

Introduction to HTML/CGI/JavaScript


Some server stuffs

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


Example initial page

Example: Initial Page

Introduction to HTML/CGI/JavaScript


Example sort by area descending

Example: Sort By Area/Descending

Introduction to HTML/CGI/JavaScript


Example sort with data plot

Example: Sort with Data Plot

Introduction to HTML/CGI/JavaScript


Cgi common gateway interface1

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


Algorithm of sort cell stat png

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


  • Login