Download Web Tools - Department of Information Technology

1DT057
Distributed Information Systems
Web applications, tools &
architectures
WEB SERVERS
In e-commerce terms, the most important type of
server
 Deal with in detail later
 Stores HTML files and dispenses them to clients
 Processes forms details
 Communicates with other servers, for example
database servers

DATABASE SERVERS
Next to web servers the most important type of
server for ecommerce
 Explained in more detail later
 Stores relational databases
 Responds to queries in language called SQL

TIERED ARCHITECTURE

Distributed architecture


TERMINOLOGY
System composed of programs running on multiple hosts
Tier
One of those host computers
 But…can have virtual distributed apps running on a single host
 Tier can also signify a logical partition of processing


Examples:

Client


e.g. web browser
Server




Object server
Enterprise server
Database server
Web server
… MORE TERMINOLOGY

Presentation logic


Business logic


How information is presented to the client
Collection of objects and methods which are different from
business to business, e.g. flight, customer, checkAvailability(),
…
Data logic

How to ensure data is persisted, secure, and transactionally
safe
TIERED ARCHITECTURES





An example of separation of concerns
Most popular model has three layers
Developed for maintenance reasons
Also have important security implications
Importance of tiers
allow separation of concerns
 coding paradigms different for each tier
 required skill set differs too

Along with security, this is probably the most important
aspect of e-commerce system design
1 TIER
STANDALONE
APPLICATION
+ Simplicity – no networking
+ High-performance
+ Self-contained
- Can’t access remote services
- Potential for spaghetti code
2 TIERS
CLIENTS
CLIENT
(WEB)SERVER
+ Quite simple
+ Separation of presentation logic from
business logic
- Little potential for resource sharing, a
big
problem for ecommerce applications
3 TIERS
CLIENTS
CLIENT
(WEB)SERVER
database
+ Separation of presentation, business
and data logic
+ Concurrent data access
+ Shared resources
- More expertise required
- More security
- might need object-relational mapping
4 TIERS
CLIENT
CLIENT
(WEB)SERVER
APPSERVER
database
+ (near) automatic handling of
transactions,
security, persistence, …
+ supports just about anything
- learning curve
- can be inefficient due to generality
- expensive (but see JBoss)
ANOTHER LOOK AT THE THREE-TIER
MODEL
Clients
Business
objects
Presentation layer
Processing layer
Database
Data layer
THREE-TIER MODEL




Presentation layer contains HCI for client
Processing layer contains business objects
Data layer contains stored data
Rationale:





HCI can go on the client and does not require to be transmitted over
network
Business objects reflect domain entities in application, for example in
a sales site: catalogue, product and customer
Business objects shield the implementation of data
All application programming done on business objects
Details of underlying data hidden to the application programmer, for
example the programmer should be unaware of the database
technology
WEB MARKUP LANGUAGES

HTML: HyperText Markup Language, is the predominant markup language for
web pages.





XML: The Extensible Markup Language is a general-purpose markup language.


It is classified as an extensible language because it allows its users to define their own
elements. Its primary purpose is to facilitate the sharing of structured data across
different information systems, particularly via the Internet.
XHTML: The Extensible HyperText Markup Language


It provides a means to describe the structure of text-based information in a document by
denoting certain text as links, headings, paragraphs, lists, etc.
Furthermore, text can be and supplemented with interactive forms, embedded images, and
other objects.
HTML can to some degree describe the appearance and semantics of a document, and can
include embedded scripting language code affecting the behavior of web browsers.
HTML is also used to refer to content of the MIME type text/html or even more broadly as
a generic term for HTML whether in its XML-descended form (such as XHTML 1.0 and
later) or its form descended directly from SGML (such as HTML 4.01 and earlier).
It is a markup language with the same depth of expression as HTML but conforming to
XML syntax.
DHTML: Dynamic HTML is a collection of technologies used together to create
interactive and animated web sites.

This include a static markup language (such as HTML), a client-side scripting language
(such as JavaScript), a presentation definition language (Cascading Style Sheets, CSS),
and the Document Object Model (DOM).
WEB CLIENTS AND WEB SERVERS
Clients running
browsers
Web server
Requests sent
pages received
MARKUP
Pages expressed in HTML
 Based on SGML
 Text intermixed with tags
 Pages can be dynamic or static
 Forms embedded in pages

AN EXAMPLE OF HTML
<HTML>
<HEAD>
<TITLE> Darrel’s Rudimentary Home Page </TITLE>
</HEAD>
<BODY>
<H1> Darrel Ince </H1>
Hi I am Darrel Ince. I am a Professor at the Open University.
There are a number of things worth knowing about me:
<UL>
<LI> I own a psychotic cat. </LI>
<LI> My youngest daughter is named after Dylan Thomas’s
late wife. </LI>
<LI> I am a fanatical Welsh rugby supporter. </LI>
<LI> I am very tall. </LI>
<LI> I am a proficient Java programmer. </LI>
</UL>
</BODY>
</HTML>
ANCHORS AND LINKS
HTML provides facilities whereby documents can
link to other documents either on the same
computer or on another one
 Uses anchors
 Clicking a link transfers to the new page

AN EXAMPLE
<UL>
<LI> <A HREF = “http://www.WelshRugby.com/home”> The
home of Welsh rugby </A> </LI>
<LI> <A HREF = “http://www.open.ac.uk/staff/Darrel”> My
home page</A></LI>
<LI> <A HREF = “http://www.open.ac.uk/Faculty/Computing”>
My department’s page</A></LI>
</UL>
URL
Known either as Uniform Resource Locator or
Universal Resource Locator
 Is an address of a Web page or other resource
 Links can be web pages, mail, newsgroups, FTP
etc

AN EXAMPLE OF A URL
http://www.open.ac.uk/staff/Darrel
Specifies Web page
Specifies computer
Specifies location
of Web page
FORMS
HTML has facilities for including forms
 Forms contain visual objects such as text fields,
buttons, select boxes etc.
 When a form is completed data is sent to the Web
server and a program executed

AN EXAMPLE OF AN HTML FORM (I)
<FORM METHOD=”POST” ACTION=”/cgi-bin/Form1process”>
<P>
Please type your name below
</P>
<P>
<INPUT TYPE=”TEXT” NAME=”nameField” MAXLENGTH=”30”>
</P>
<P>
Please type your address below
</P>
<P>
<TEXTAREA NAME=”addField” ROWS=”5” COLS=”40”>
</TEXTAREA>
</P>
<P>
Male<INPUT TYPE=“RADIO”
NAME=”maleButton”
VALUE=”mButt”>
</P>
AN EXAMPLE OF AN HTML FORM (II)
<P>
Female<INPUT TYPE=“RADIO”
NAME=“femaleButton”
VALUE=”fButt”>
</P>
<P>
<INPUT TYPE=”SUBMIT”
VALUE=”Submit”>
</P>
</FORM>
Form contains two radio buttons,
a text field and a text area
HTTP
The Hypertext Transfer Protocol
 Protocol used for communication between Web
server and Web client running a browser
 An example of a request/reply protocol

AN EXAMPLE OF A REQUEST
I want this page
GET /index.html HTTP/1.1
User-Agent: Lynx/2.4
Connection: Keep-Alive
Host: www.openaccess.com
Accept: text/html
I am using
this browser
Keep the
connection live
Accept only text/HTML
This is the
computer on
which the
page resides
AN EXAMPLE OF A REPLY
Server using version 1.1 of HTTP
Client request successful
HTTP/1.1 200 OK
Date: Thu, 22 July 1998 18:40:55 GMT
Server: Apache 1.3.5 (Unix) PHP/3.0.6
Last-Modified: Mon, 19 July 1997 16:03:22 GMT
Content-Type: text/html
Content-Length: 12987
...
Type of
content
When page
last modified
Length
of content (bytes)
When
request
satisfied
Server
used
SOME HTTP COMMANDS
GET
HEAD
POST
PUT
OPTIONS
Get a file from a Web server
Like GET no content sent just header info
Invoke a program on a form
Store some resource
Find out about communication options
STATUS CODES





Indicates the result of a request
Starting with 2 mean correct response
Starting with 3 means browser has to carry out some other
action
Starting with 4 means there is a problem, normally the
page cannot be found (Error 404)
Starting with a 5 indicates a serious server problem
THE COMMON GATEWAY INTERFACE
(CGI)
An interface in the Web server
 Used to communicate with non-Web software
such as database server software
 A number of environment variables found in the
CGI which can be interrogated

SOME EXAMPLES OF CGI VARIABLES
SERVER_SOFTWARE
REMOTE_ADDR
SERVER_PROTOCOL
REQUEST_METHOD
SERVER_PORT
Server software
The address of the client
The protocol used and it version
The method used by the request
for example GET
The port number used for the Web
server (normally 80)
LOGGING BY THE WEB SERVER
Produces a file of data about accesses to a Web
server
 Used for marketing purposes
 Used for optimising the web server
 Also used for security post-mortems

WEBMASTER DUTIES
Optimising the performance of a Web server
 Setting up the initial configuration
 Setting up initial directories and files
 Implementing security policies
 Monitoring server logs

PROGRAMMING WEB SERVERS
Client side programming involves code resident
at the client although it may be downloaded from
the server
 Server side involves code at the server
 Examples applets, JavaScript (Client), servlets
and PHP (Server)

APPLETS
Code downloaded to client
 Code referenced in HTML
 Do not have constructors
 Heavy security restrictions on such downloaded
code

DIFFERENCES BETWEEN APPLETS AND
APPLICATIONS




Applets do not use
constructors
Not allowed to use
System.exit browser
terminates
All output to visual objects
Extends the Applet class




Applications use
constructors
Uses System.exit for
termination
Output to visual objects and
System.out
Extends Frame normally
RICH WEB SITE
Content
 Animations
 Chat rooms
 Alerting services
 Searchable archives
 Mailing lists
 Bulletin boards
