Web System

Architectures
Needs of large business Applications
 Functionality
 Stability
 Adaptability under rising workloads and changing
business requirements
 Highest levels of performance and availability
 Cost Effective
Contents of Business Applications

 Business Logic
 Database
 Graphical User Interface
Explanation of keywords
 Business Logic: Rules governing the business.
These can change frequently depending upon the
business.

 Database: Contains the data relevant for the

business.

 Graphical User Interface: Provides the platform

for interaction of the user with the system.
The 1-Tier Architecture
The 1-Tier Architecture
The 1-Tier Architecture
 Advantages
 Easy and quick to develop
 Useful for small offices

 Disadvantages
 Difficult to upgrade
 Not scalable
 Don't protect valuable "Business Logic"
The 2-Tier Architecture
The 2-Tier Architecture
Advantages:
 Protects business logic from UI

Disadvantages:
 Business-logic is implemented on the PC
 Increased network traffic
 Application logic can’t be reused
 Must design/implement protocol for
communication between client and server.
The 3-Tier Architecture
The 3-Tier Architecture
Advantages
 Clear separation of user-interface-control
and data presentation from application-
logic.
 Change in business logic wont need change
in other layers.
 Dynamic load balancing by use of multiple
servers
N-tier architecture

 Also known as the “layered” architecture

 N usually denotes 3 or more tiers (layers)

 Can be used to model both a web-based

application and a desktop application
The N-tier architecture
The N-tier architecture

 The tiers may contain one or more

components of the application

 The components in one tier can

communicate ONLY with the components
in the tiers above and below
The N-tier architecture

 The components implement major

functionalities in the application

 Every application can have at least three

tiers:
 The UI tier
 The Business Logic tier
 The Data Storage tier
The N-tier architecture
Disadvantages

 In small applications, the benefits are usually not

visible.

 Every data that goes in the system from the user to

the database must pass through the components in
the middle layers, and therefore the response time
of the system will be slower.
The N-tier architecture

Advantages

 Easy to change: you can decide to switch from

desktop applications to web based applications by
just changing the UI layer (a small part of the
application). The same thing with the database
system.
 Easy to manage: if each layer has its own
functionality, when something needs to be
changed you will know what to change
The N-tier architecture

Advantages

 Easy to reuse: if another application is developed

for the same domain, it can use a big part of the
business layer

 Easy to develop: each layer can be developed by

separate teams, and focus only on theirs specific
problems (you don’t have to know HTML, ASP,
OO design and SQL at the same time)
 Domain Name System


 IP addresses are difficult to remember

 Sachin @140.203.8.22 would be difficult to remember
 If Sachin mail server moves to another machine, then his e-mail address would
not be valid anymore
 Something like sachin@bvcoenm.edu.in would be appropriate
 Need some mechanohnDoisms to translate wuzwuz.ucg.ie to the IP address
 To solve this problem DNS was invented
 It is a hierarchical, domain-based naming scheme and a distributed database
system for implementing this naming scheme
 Usage:
 Map name onto an IP address, an application program calls an library procedure,
called resolver, passing it the name as a parameter (i.e. gethostbyname() is an resolver)
 The resolver sends UDP packet to a local DNS server which looks up the name and
returns the IP address to the resolver
 The resolver returns the IP address to the application, which can establish an TCP/IP
connection with the destination (or send UDP packets)
 DNS Name Space

 Internet is divided into over 200 top level domains

 Each domain is divided into sub-domains, which are further partitioned, etc..
 All domains can be represented by a tree
 The leaves of the tree represent domains that have no sub-domains (but contain machines)
 A leaf domain may contain a single host or represent a company and contain thousands of hosts
 Top level domains could be generic and country domains
 Domain Names
 Can be either absolute (ends with a period i.e. eng.sun.com.) or relative (it
doesn’t end with a dot)
 Relative ones have to be interpreted in a context to find the true meaning
 Both of them refers to a specific node in the tree and all the nodes under it
 Are case insensitive (edu, Edu, EDU are same thing)
 Components names can be up to 63 characters and full names should not exceed 255
characters
 There is no rule against registering under two top level domains (sony.com and
sony.nl)
 Each domain controls how it allocates the domains under it
 i.e. Japan makes a domains ac.jp and co.jp that mimic edu and com
 Netherlands doesn’t make this distinction
 To create a new domain, permission is required from the domain that will include it;
once created, it can create sub-domains without having to ask permission from the
higher up domains.
Name servers

 One DNS server could service all requests

 In practice it will be overloaded
 To solve this, DNS name space is divided in non overlapping zones
 Each zone contains some part of the tree and name servers holding zone info
 A zone would have a primary DNS (gets info from disk)
 One or more secondary DNS (get info from the primary DNS)
Name Servers – Lookup mechanism

 In the example, a resolver on flits.cs.vu.nl is looking for IP address of

linda.cs.yale.edu (using recursive query; some servers don’t
implement recursive query and return the address of the next server
to try)
 The resolver sends a query containing the domain name sought
 The query is forwarded by the local name server to the name server for domain
edu, that is found in its database….etc
 Once the records get back to cs.vu.nl name server, they will be
entered in a local cache, in case they are needed later;
URL – Uniform Resource
Locator
 URL – Uniform Resource
Locator

 Some common URLs

 Stateless and cookies
 Web is stateless, no concept of login session; the browser sends a request to the server, and
gets back a file; server forgets it seen that particular client
 A quick solution would be to observe client’s IP addresses (not good since they could be NAT-ed)
 Cookies (Netscape) solve this problem, by having the server supply additional information
when a client requests a page; this info may include a cookie, that is a small (4KB) file or
string
 Contains up to five fields
 When the browser sends a request to a page, it first checks to see if it has an associated cookie with
the domain the request is going to. If yes, then it appends this cookie to the request; the server gets it
and interpret it any way it wants
Cross-Browser Compatibility
Myth or Reality?
 There's a long tradition to be overcome
 Sniffers to look for browser and OS
combinations
 Separate code forks for different browsers
 Special HTML "tricks" to overcome browser
defaults and bugs
 Proprietary DOM and HTML
 So can cross-browser compatilibity be real?
The Reality
 Yes! Cross-browser compatibility lies
within your reach!
 First, you must do as Yoda says: "Unlearn what
you have learned"
 Second, adjust your thinking for a new reality
 Third, start coding!
 Let's look at some common pitfalls and
things that must be unlearned
 Shed the Deadweight
 Things to give up:
 Invalid HTML
 LAYER—it's dead and it's time to move on
 Proprietary DOMs
 document.layers died with LAYER itself
 document.all is still alive, but it's also completely
proprietary
 Code forking
 Most forking is based around incompatible proprietary
DOMs, so give them up and forking is unnecessary
Shiny New Toys!
 Try playing with these:
 Valid HTML
 Purify your structure and compatibility will follow
 W3C DOM
 Both IE5.x+ and NS6 support the W3C DOM, so
code written once can run in both with NO
FORKING!
 How can this process be any easier? Let's
find out!
 Validating Your HTML
 The fastest way to improve your pages
 http://validator.w3.org/
 Any page that triggers an error is invalid and the problem
needs to be fixed
 If you can get a page to validate with no errors or warnings,
you're golden
 The results will be different depending on what DOCTYPE
you use
 There's a CSS validator too
 http://jigsaw.w3.org/css-validator/
 Valid CSS is as important to page layout as valid HTML
 DOCTYPE Issues
 Do NOT lie about your DOCTYPE!
 If you have HTML 4.0 Transitional markup, then
say so; don't claim XHTML 1.1 Strict!
 The DOCTYPE you use will trigger one of two
layout models in recent browsers
 Old, missing, or transitional DOCTYPEs will trigger
"legacy" layout mode
 XML, XHTML, and strict DOCTYPEs will trigger
"standards" layout mode
 Legacy vs. Standards
 What's the difference?
 Plenty—too much to list here, in fact! Some
highlights:
 'height' and 'width' do not apply to inline elements
 'width' means the content's width, not the aggregate of
content + padding + border
 'class' and 'id' values are case-sensitive
 units are required on length measures
 'body' and 'html' can be styled separately
 Common Errors
 We see a lot of recurring problems…
 Generally poor structure:
 TD elements outside of TRs
 Unclosed TABLE elements
 SPANs wrapped around DIVs
 Badly-nested inline elements
 FORMs spread across multiple cells, or wrapped around
a few rows or cells of a table
 Class and ID names treeated as though they're case-
insensitive
An Example of Bad FORM
 Have you ever done this?
 <table>
<form action="script.cgi" method="put">
<tr>…</tr>
</form>
</table>
 That construct is invalid and can cause
functionality and layout problems
 Similarly, putting the <form> in one cell and
</form> in a different cell is a bad idea
Even Worse Markup
 Here's a popular one:
 <span class="someThing">
<div>…</div>
</span>
 Yikes! Wrapping an inline element around a block-
level element is no good
 The beginning of a block-level element implicitly terminates any
unclosed elements, so the 'span' ends right before the 'div' begins
 Convert the 'span' to a 'div', adjust your styles and
scripts as necessary, and be happy
Enjoy the Free DOM
 Both IE5+ and NS6 follow the W3C DOM
 You can manipulate style, structure, even
content in a truly cross-browser fashion
 Any other standards-compliant browser will be
able to run the same scripts and get the same
results
The Proof Is In The Showing
 A working example:
 <http://developer.netscape.com/evangelism/
sidebar/html401qr/attr.html>
 The show/hide functionality is all W3C
DOM-based and does no browser detection
at all
 Confession: there's an OS detect to set the
proper graphic effect for the icons
Picking a Piece of HTML
 There are two basic choices
 document.getElementById('idname')
 Lets you manipulate whatever element in the document
has that unique 'id' value
 document.getElementsByTagName('tagname')
 Lets you manipulate all elements of a given type

 There isn't a way to select elements by class

name, so we'll just have to build one ourselves
HTTP: the hypertext transfer
protocol

Skills: none
IT concepts: protocol, the RFC process,
communication protocol layers, application
layer
HTTP vs HTML

 HTML: hypertext markup language

 Definitions of tags that are added to Web documents
to control their appearance
 HTTP: hypertext transfer protocol
The rules governing the conversation between a Web


client and a Web server

Both were invented at the same time by the same person
What is a protocol?

 In diplomatic circles, a protocol is the set of rules

governing a conversation between people

 We have seen that the client and server carry on a

machine-to-machine conversation

 A network protocol is the set of rules governing a

conversation between a client and a server

 There are many protocols, HTTP is just one

 An HTTP conversation

Client Server
 I would like to open a
connection  OK

 GET <file location>

 Send page or error message

 Display response
 Close connection
 OK

HTTP is the set of rules governing the format and content

of the conversation between a Web client and server
An HTTP example

The message requesting a Web page must begin with the

work “GET” and be followed by a space and the location of
a file on the server, like this:

GET /fac/lpress/shortbio.htm

The protocol spells out the exact message format, so

any Web client can retrieve pages from any Web server.
Network protocols

 The details are only important to developers.

 The rules are defined by the inventor of the protocol – may be
a group or a single person.
 The rules must be precise and complete so programmers can
write programs that work with other programs.
 The rules are often published as an RFC along with running
client and server programs.
 The HTTP protocol used for Web applications was invented
by Tim Berners Lee.

RFC = request for comments

Tim Berners-Lee

Tim Berners-Lee was knighted by Queen Elizabeth for his invention of the
World Wide Web. He is shown here, along with the first picture posted on the
Web and a screen shot from an early version of his Web browser.
 HTTP is an application layer protocol

 The Web client and the Web server are application

programs
 Application layer programs do useful work like retrieving
Web pages, sending and receiving email or transferring files
 Lower layers take care of the communication details
 The client and server send messages and data without
knowing anything about the communication network
 The application layer is boss – the top layer
Layer Function
Application Do useful work like Web browsing, email,
and file transfer
Lower layers Handle communication between the client
and server

 Your boss says: Send this package to Miami -- I don't care if you
use Federal Express, UPS, or any other means. Also, let me know
when it arrives or if it cannot be delivered for some reason.

 The application program says: Send this request to the server -- I

don't care how you do it or whether it goes over phone lines, radio,
or anything else about the details. Just send the message, and let
me know when it arrives or if it cannot be delivered for some
reason.
There are five TCP/IP layers, the application layer and four lower layers.
Many application layer protocols are used on
the Internet, HTTP is only one

Protocol Application

HTTP: Hypertext Transfer Retrieve and view Web pages

Copy files from client to server

FTP: File Transfer
or from server to client
SMTP: Simple Mail
Send email
Transport

POP: Post Office Read email

The TCP/IP protocol layers
The application program is king – it gets work done using the
lower level layers for communication between the client and
server.

Get useful work done – retrieve Web pages, copy

Application files, send and receive email, etc.

Make client-server connections and optionally

Transport control transmission speed, check for errors, etc.

Internet Route packets between networks

Route data packets within the local area network

Data link
Specify what medium connects two nodes, how
Physical binary ones and zeros are differentiated, etc,
File Transfer Protocol
 Introduction
 File Transfer Protocol (FTP)

 Used to transfer files and data between

computers via internet

 Defined as RFC959

 Developed in 1971

 Last updated in July 1973

 Introduction (Continued)
 Server/Client model

 FTP often works with

 Transmission Control Protocol (TCP)

 Telnet Protocol

 Allows to transfer large files

 Why FTP?
 Transfer Ability
 FTP allows file sharing between remote machines
 Allow file transferring between computers that have different
operating System

 Availability
 Available for almost all operating systems
 Can be used in command prompt by using FTP commands
 Can be used in the web browser
 FTP applications
 Why FTP (Continued)
 Independency
 Allow between client and server machine system files

 Efficiency
 Enable efficient data transfer

 Security
 It provide the a environment to transfer files indirectly and
implicitly between users
 Accessing by user name and password makes it reliable and
safe to use FTP anywhere
 Some FTP server allows people to use anonymous as a
default user name
 How Does FTP Work
 FTP has to be on both server and client computers to work
 Connection
 Control connection (port 21)
 Used to send and receive FTP commands
 Data connection (port 20)
 Used to upload and download files
 Processes
 Data Transfer Process
 Establishing the connection and managing the data channel
 Protocol Interpreter
 Interprets the protocol
 let DTP be controlled using commands received over the control
channel
 Transferring mode between server and client

 Active mode
 Control connection port: Client: Large port (N>1023); Server: 21
 Data connection port: Client: N+1; Server: 20
 Passive mode
 Control connection port: Client: Large port (N>1023); Server: 21
 Data connection port: Client: N+1; Server: large port (P>1023)
 File Transferring mode
 ASCII mode
 .txt, .html, .asp, .vbs,.js
 Binary
 .doc, .pdf, .mp3/mp4
 Where is FTP
 Desktop Environment
 Use “ftp” command to implement FTP
 FTP server
 Used to keep files that are available users
 Websites
 Easy to update
 Internet
 Very efficient to get a specific file through the internet
 Everywhere
 Advantages
 Allows multiple File transfer
 Failed file download tolerance
 Resume the file when failed to download in the middle of
process
 User can choose whether to use ASCII or Binary mode
as needed
 Be able to get file from FTP server on any computer
that has access to internet by using his own username
and password
 Easy to manage files by using FTP applications and to
set the read/write privilege
 Softwares
 Cute FTP

 FileZilla

 Leech FTP

 Windows FTP

 FTP Explorer