Networking Overview

User's View: Web Browsing

Elements of a webpage:

Text (size, fonts, style).

Structural elements: lists, tables.

Links.

Form elements (input): text, buttons, dropdown lists, files.

MIME elements: postscript, realaudio.

Exercise 1:

Find a webpage with tables;

Find a webpage with a drop-down list;

Find a webpage with a MIME application.

Behind the scenes: HTML

What is HTML?

HTML = HyperText Markup Language.

Originates from SGML (which is more complex).

It's a simple text markup/formatting language.

Limited formatting control given to creator.

Most formatting choices made by displayer (browser)

Newer versions (HTML 3.0, DHTML): HTML on steroids.

Consider this HelloWorld example:

What it looks like in the browser:

The HTML text source:


<HTML>
  <BODY>
     HelloWorld!
  </BODY>
</HTML>

Learn more about HTML

HTML creation tools:

Netscape Composer:
- A simple tool that is available in the Netscape browser itself.
- Capable of simple formatting, adding links, adjusting fonts and colors.
- Runs on any platform.
Frontpage, Dreamweaver:
- Can handle complex formatting, multiple pages (in a project), direct downloading to website.
- Not available on all platforms.

Exercise 2:

Create two simple HTML pages that link to each other.

Create a form to read a name and password, where both the text fields are aligned in a table.

How It Works: An Internet Crash-Course

How stuff moves around the Internet: in packets

TCP/IP:

IP: Internet Protocol (handles packets)
TCP: Transmission Control Protocol (handles connections)

Applications:

HTTP: HyperText Transfer Protocol

User clicks on link in browser.
Browser examines URL and gets IP address of destination (website).
Browser sends HTTP request to website.
Webserver is already listening at port.
Webserver looks at request and extracts filename.
Webserver sends entire file to browser.
Browser decodes (parses) HTML and displays.
Browser makes additional requests as needed (images etc).

Sending Form data (parameters)

User fills in Form (text, buttons etc).
User clicks on submit.
Browser collects Form data.
Browser extracts URL buried in Form (not always visible to user).
Browser sends request and parameters to webserver.
Webserver is listening on port.
Webserver extracts Form data.
Webserver fires up locally-residing program (CGI) and hands over Form data (parameters).
CGI program computes output and gives it to webserver.
Webserver sends output back to Browser.
Browser displays output.

CGI - Common Gateway Interface

What is CGI?

A webserver feature that allows programs to run alongside/inside the webserver.

The programs can be written in any language.

Sometimes the languages are interpreted (Perl, Java, Tcl, VB); sometimes compiled (C, C++).

The webserver passes Form data to these programs, and the programs write output directly to the invoking Browser.

Exercise 3:

Examine the search query at http://www.yahoo.com

Which of GET or POST is being used?

How does a webserver call a CGI program? Three possible ways:

By forking a new process:
- Usually for C/C++ CGI programs.
- The webserver forks off a new (shell) process which starts execution of the C program.
- The forking is performed for each HTTP request.
- Forking is expensive.
- Wasteful for CGI programs that run repeatedly.
By pre-loading the program when the webserver is started:
- For commonly-used programs, the code can be rolled into the webserver.
- Then, the CGI program is really part of the webserver.
- Extremely efficient since it is already loaded.
- Can crash the webserver if badly written.
- Changing the program requires re-starting the webserver.
Dynamic one-time loading:
- The CGI program is loaded when first called.
- Subsequent requests simply multi-thread the already-loaded program.
- If the program is changed, it is re-loaded without bringing the webserver down.
- Interpreted languages make this option very safe.
- This is the approach used by Java servlets.

Database Access

What is a database system?

Data (database).
Programs that handle the data (database server).
Programming language (SQL).

Typical configuration:

How it's used by a webserver:

CGI program realizes dbase needs to be accessed.
It asks dbase server to get data (using SQL commands).
Dbase server returns data.
CGI program formats data in HTML and writes HTML to Browser.

Several ways in which a CGI program can interface with a Dbase server:

Using a custom method used by that particular dbase server.
Using a standard access method like ODBC/JDBC.
Rolling the CGI program and dbase client into a single unit.
Placing the entire webserver inside the dbase server/client.
(e.g., webserver is an Oracle OCI program).

Server Side Includes (SSI)

What is an SSI?

Code that's buried in a page (HTML) that never shows up at the Browser.
It gets executed at the server at the time the page is requested.

Languages:

Active Server Pages (ASP).
- Developed by Microsoft.
- Uses Visual Basic.
- Supported by some webservers (such as IIS).
Java Server Pages (JSP).
- Developed by SUN.
- Uses Java.
- Supported by JSP package (in Apache), or SUN's Java Web Server.

Example:
Here is a simple ASP page:

  
<html> <head> <title> Hello World </title> </head>
   <body>

     Hello World!  (plain HTML text).

     <%
        Dim str
        str = "Hello World (from Visual Basic string)"
        Response.write (str)
     %>

   </body>
  </html>

Before this is sent out by the webserver, the code is executed, which writes "in place".

The HTML actually received by the requesting Browser is:


  <html> <head> <title> Hello World </title> </head>
   <body>

     Hello World!  (plain HTML text).
     Hello World (from Visual Basic string)
   </body>
  </html>

Client-Server Model

Client requests some resource to the server

Server provides that resource to the client

The server may have computing resources or processes or a database

Originally, clients were conceived to be running end-users applications and to be less powerful than servers so clients needed resources from the server.

Now in peer-to-peer architecture, all the computing systems have the same relationship to each other in terms of needing resources.

Consider this client-server example:

Client-Side Computing

What is client-side computing?

The page contains code that executes in the Browser.
You can see this code on the client side (in the Browser).

Languages:
Javascript, Visual Basic Script

How it works: (Javascript example)

Browser fetches page (as usual).
Page contains Javascript.
Browser brings up Javascript engine, which executes code.

What can you do with Javascript?

Bring up new windows.
Flip-over images.
Check input.
Compute and write to page.

An exception: Java applets

References to Java applets are buried in HTML (like references to images).
The browser fetches the code (which you can't see).
The browser runs the code and lets it write to the browser display.

NOTE: Javascript has nothing to do with Java.

Exercise 4: Find a webpage with Javascript or Visual Basic.