Web Tools - Department of Information Technology
Download
Report
Transcript 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