Advanced Web Design And Development BIT 3207

Advanced Web Design and
Development
BIT 3207

Books
• Rabbit and Dynamic C ® - An Introduction
to TCP/IP
• W3C - RFC2616 [Hypertext Transfer
Protocol]
• Responsive Web Design with HTML5 and
CSS3
• Beginning PHP5, Apache, and MySQL ®
Web Development

Motivation
• Web Design is an incredibly fun skill to learn—combining the latest toys of
technology with the creativity of design! On top of that, learning web design
is unique in that we can learn directly from current professionals who
publish their techniques for all to read on their own Web-logs!
• The idea of the Web started with Tim Berners-Lee during 1989, while he
was working at CERN. His vision was to create a global level hypertext
based project, and his implementation with a browser was with
WorldWideWeb in 1991. During the early days only text based pages could
be used on single lined web browsers. There was no integration of
multimedia elements like images, sound and others. However the arrival of
the Mosaic web browser allowed integration of multimedia elements. In
October, 1994, W3C was founded to develop standards for the Web, which
process still continues. In 1999 and on, many browsers like Microsoft's
Internet Explorer, Mozilla Firefox, Google's Chrome, and Netscape have
been released into the market, and new browsers are still coming.

Network fundamentals
• IP : IP provides communication between
hosts on different kinds of networks. It is a
connectionless, unreliable packet delivery
service. Connectionless means that there
is no handshaking, each packet is
independent of any other packet. It is
unreliable because there is no guarantee
that a packet gets delivered; higher-level
protocols must deal with that.

Network fundamentals ctd.
• IP Address : IP defines an addressing scheme that is independent
of the underlying physical address. IP specifies a unique 32-bit
number for each host on a network. This number is known as the
Internet Protocol Address, the IP Address or the Internet Address.
These terms are interchangeable. Each packet sent across the
Internet contains the IP address of the source of the packet and the
IP address of its destination.
• For routing efficiency, the IP address is considered in two parts: the
prefix which identifies the physical network, and the suffix which
identifies a computer on the network. A unique prefix is needed for
each network in an Internet For the global Internet, network numbers
are obtained from Internet Service Providers (ISPs). ISPs coordinate
with a central organization called the Internet Assigned Number
Authority (IANA).

Network fundamentals ctd.
• The Transport Layer : There are two primary transport layer
protocols:
– UDP : This is a minimal service over IP, adding only optional
checksumming of data and multiplexing by port number. UDP is
often used by applications that need multicast or broadcast delivery,
services not offered by TCP. Like IP, UDP is connectionless and
works with datagrams.
– TCP : This is a connection-oriented transport service; it provides
end-to-end reliability, resequencing, and flow control. TCP enables
two hosts to establish a connection and exchange streams of data,
which are treated in bytes. The delivery of data in the proper order
is guaranteed. TCP can detect errors or lost data and can trigger
retransmission until the data is received, complete and without
errors.

Network fundamentals - TCP
• A TCP connection is done with a 3-way handshake between a client
and a server. The following is a simplified explanation of this process.
– The client asks for a connection by sending a TCP segment with the SYN
control bit set.
– The server responds with its own SYN segment that includes identifying
information that was sent by the client in the initial SYN segment.
– The client acknowledges the server’s SYN segment.
• The connection is then established and is uniquely identified by a 4-
tuple called a socket or socket pair:
– (destination IP address, destination port number)
– (source IP address, source port number)
• During the connection setup phase, these values are entered in a
table and saved for the duration of the connection.

Network fundamentals HTTP
• The HTTP protocol is a request/response protocol. A client sends a request
to the server in the form of a request method, URI, and protocol version,
followed by a MIME-like message containing request modifiers, client
information, and possible body content over a connection with a server. The
server responds with a status line, including the message’s protocol version
and a success or error code, followed by a MIME-like message containing
server information, entity metainformation, and possible entity-body content.
• Most HTTP communication is initiated by a user agent and consists of a
request to be applied to a resource on some origin server. In the simplest
case, this may be accomplished via a single connection (v) between the
user agent (UA) and the origin server (O).
request chain -------------------------------------------->
UA ----------------------------v---------------------------- O
<------------------------------------------- response chain

Network fundamentals HTTP - URL
• The “http” scheme is used to locate network resources
via the HTTP protocol.
http_URL = "http:" "//" host [ ":" port ] [ abs_path [ "?" query ]]
• If the port is empty or not given, port 80 is assumed.
The semantics are that the identified resource is
located at the server listening for TCP connections on
that port of that host, and the Request-URI for the
resource is abs_path. The use of IP addresses in URLs
SHOULD be avoided whenever possible. If the
abs_path is not present in the URL, it MUST be given
as “/” when used as a Request-URI for a resource.

Network fundamentals HTTP – Status codes
• The first digit of the Status-Code defines the class of
response. The last two digits do not have any
categorization role. There are 5 values for the first digit:
– 1xx: Informational - Request received, continuing process
– 2xx: Success - The action was successfully received,
understood, and accepted
– 3xx: Redirection - Further action must be taken in order to
complete the request
– 4xx: Client Error - The request contains bad syntax or cannot
be fulfilled
– 5xx: Server Error - The server failed to fulfill an apparently
valid request

Network fundamentals HTTP – Methods
• GET : The GET method means retrieve whatever information (in the form of an entity) is
identified by the Request-URI. If the Request-URI refers to a data-producing process, it is
the produced data which shall be returned as the entity in the response and not the
source text of the process, unless that text happens to be the output of the process.
• HEAD : The HEAD method is identical to GET except that the server MUST NOT return a
message-body in the response. The metainformation contained in the HTTP headers in
response to a HEAD request SHOULD be identical to the information sent in response to
a GET request. This method can be used for obtaining metainformation about the entity
implied by the request without transferring the entity-body itself.
• POST : The POST method is used to request that the origin server accept the entity
enclosed in the request as a new subordinate of the resource identified by the Request-
URI in the Request-Line.
• PUT : The PUT method requests that the enclosed entity be stored under the supplied
Request-URI. If the Request-URI refers to an already existing resource, the enclosed
entity SHOULD be considered as a modified version of the one residing on the origin
server.
• DELETE : The DELETE method requests that the origin server delete the resource
identified by the Request-URI.

CLIENT SIDE COMPONENTS - Browser
• Short for Web browser, a browser is a software
application used to locate, retrieve and display
content on the World Wide Web, including Web
pages, images, video and other files. As a
client/server model, the browser is the client run
on a computer that contacts the Web server and
requests information. The Web server sends the
information back to the Web browser which
displays the results on the computer or other
Internet-enabled device that supports a browser.

CLIENT SIDE COMPONENTS - HTML
• Short for HyperText Markup Language, HTML is the authoring language
used to create documents on the World Wide Web. HTML defines the
structure and layout of a Web document by using a variety of tags and
attributes. The correct structure for an HTML document starts with:
<html>
<head>What document is about</head>
<body>All the information you'd like to include in
your Web page</body>
</html>
• There are hundreds of other tags used to format and layout the
information in a Web page. Tags are also used to specify hypertext
links. These allow Web developers to direct users to other Web pages
with only a click of the mouse on either an image or words.

CLIENT SIDE COMPONENTS - HTML5
• HTML5 is a W3C specification that defines the fifth major
revision of the HTML. One of the major changes in HTML5
is in respect to how HTML addresses Web applications.
Other new features in HTML5 include specific functions for
embedding graphics, audio, video, and interactive
documents.
• New elements also allow you to define sections of your
Web page using new tags such as < article > which defines
an article, < nav > which defines navigation links, < source
> which defines media resources, and many others.
• HTML5 may also be referred to as Web Applications 1.0.

CLIENT SIDE COMPONENTS - XML
• Short for Extensible Markup Language,
XML is a pared-down version of Standard
Generalized Markup Language (SGML),
designed especially for Web documents. It
allows designers to create their own
customized tags, enabling the definition,
transmission, validation, and interpretation
of data between applications and between
organizations.

CLIENT SIDE COMPONENTS - JavaScript
• JavaScript is a scripting language developed by
Netscape to enable Web authors to design interactive
sites. Although it shares many of the features and
structures of the full Java language, it was developed
independently. JavaScript can interact with HTML source
code, enabling Web authors to spice up their sites with
dynamic content. JavaScript is endorsed by a number of
software companies and is an open language that
anyone can use without purchasing a license. It is
supported by recent browsers from Netscape and
Microsoft, though Internet Explorer supports only a
subset, which Microsoft calls Jscript.

SERVER SIDE COMPONENTS - Server
• A server is a computer or device on a network that manages
network resources.
• There are many different types of servers. For example:
– File server : a computer and storage device dedicated to storing files.
Any user on the network can store files on the server.
– Print server : a computer that manages one or more printers, and a
network server is a computer that manages network traffic.
– Database server : a computer system that processes database queries.
• Servers are often dedicated, meaning that they perform no other
tasks besides their server tasks. On multiprocessing operating
systems, however, a single computer can execute several
programs at once. A server in this case could refer to the program
that is managing resources rather than the entire computer.

SERVER SIDE COMPONENTS – Web Server
• Web servers are computers that deliver Web pages.
Every Web server has an IP address and possibly a
domain name.
• Any computer can be turned into a Web server by
installing server software and connecting the machine
to the Internet. There are many Web server software
applications, including public domain software and
commercial packages.
• Apache Web Server or often referred to as simply
Apache, is a public-domain open source Web server
developed by a loosely-knit group of programmers.

SERVER SIDE COMPONENTS – CGI
• Abbreviation of Common Gateway Interface, CGI is a specification for
transferring information between a World Wide Web server and a CGI
program.
• A CGI program is any program designed to accept and return data that
conforms to the CGI specification. The program could be written in any
programming language, including C, Perl, Java, or Visual Basic.
• CGI programs are the most common way for Web servers to interact
dynamically with users. Many HTML pages that contain forms, for example,
use a CGI program to process the form's data once it's submitted. Another
increasingly common way to provide dynamic feedback for Web users is to
include scripts or programs that run on the user's machine rather than the
Web server. These programs can be Java applets, JavaScripts, or ActiveX
controls. These technologies are known collectively as client-side
solutions, while the use of CGI is a server-side solution because the
processing occurs on the Web server.

SERVER SIDE COMPONENTS – JSP
• Short for Java Server Page, JSP is a server-side
technology. Java Server Pages are an extension to the
Java servlet technology that was developed by Sun.
• JSPs have dynamic scripting capability that works in
tandem with HTML code, separating the page logic from
the static elements -- the actual design and display of
the page -- to help make the HTML more functional.
• A JSP is translated into Java servlet before being run,
and it processes HTTP requests and generates
responses like any servlet.

SERVER SIDE COMPONENTS – ASP/PHP
• Active Server Page abbreviated as ASP, is a specification for a
dynamically created Web page with a .ASP extension that utilizes
ActiveX scripting -- usually VB Script or Jscript code. When a
browser requests an ASP, the Web server generates a page with
HTML code and sends it back to the browser. So ASPs are similar to
CGI scripts, but they enable Visual Basic programmers to work with
familiar tools.
• PHP for Hypertext Preprocessor, is an open source, server-side,
HTML embedded scripting language used to create dynamic Web
pages. In an HTML document, PHP script is enclosed within special
PHP tags. Because PHP is embedded within tags, the author can
jump between HTML and PHP instead of having to rely on heavy
amounts of code to output HTML. And, because PHP is executed on
the server, the client cannot view the PHP code.

DATABASE COMPONENTS
• Often abbreviated DB, a database is basically a
collection of information organized in such a way that a
computer program can quickly select desired pieces of
data. You can think of a database as an electronic filing
system.
• Traditional databases are organized by fields, records,
and files. A field is a single piece of information; a record
is one complete set of fields; and a file is a collection of
records. For example, a telephone book is analogous to
a file. It contains a list of records, each of which consists
of three fields: name, address, and telephone number.

DATABASE COMPONENTS – SQL
• Structured query language is a standardized
query language for requesting information from a
database. The original version called SEQUEL
(structured English query language) was designed
by an IBM research center in 1974 and 1975. SQL
was first introduced as a commercial database
systemin 1979 by Oracle Corporation.
• Eg.:
SELECT [fields] FROM [table|view] WHERE [true
condition]

System Artchitectural Design
●
N-Tier architecture
●
is an industry-proved software architecture
model,
●
suitable to support enterprise-level
client/server applications by resolving
issues like scalability, security, fault
tolerance and etc.

Tier vs Layer
●
Tier
●
The physical deployment computer.
●
Usually an individual running server is one tier.
●
Several servers may also be counted as one
tier, such as server failover clustering.
●
Layer
●
Logic software component group mainly by
functionality;
●
is used for software development purpose.

Tier vs Layer ctd.
●
Tier and Layer
●
Layer software implementation has many
advantages and is a good way to achieve N-
Tier architecture.
●
Layer and tier may or may not exactly match
each other.
●
Each layer may run in an individual tier.
●
Multiple layers may also be able to run in one
tier.
●
A layer may also be able to run in multiple tiers.

3-Tier Architecture
●
The simplest of N-Tier architecture
●
is 3-Tier
●
Presentation layer, application layer and data layer
●
A layer
●
Can access directly only the public components of its directly-below layer.
●
For example,
●
presentation layer can only access the public components in application layer, but not in
data layer.
●
application layer can only access the public components in data layer, but not in
presentation layer.
●
Why?
●
minimize the dependencies of one layer on other layers.
●
benefits for layer development/maintenance, upgrading, scaling and etc.
●
makes the tier security enforcement possible.
●
For example, the client layer cannot access the data layer directly but through the application layer, so
data layer has a higher security guarding.
●
avoid cyclic dependencies among software components.

3 Tier Architecture - Layers
●
Presentation layer
●
a layer that users can access directly, such as desktop UI, web page and etc.
Also called client.
●
Application layer
●
this layer encapsulates the business logic (such as business rules and data
validation), domain concept, data access logic and etc. Also called middle
layer.
●
Data layer
●
the external data source to store the application data, such as database server.
●
For N-Tier architecture, we need to use the non-embedded database server,
which can be run in an individual computer such as SQL server, Oracle, DB2,
MySQL or PostgreSQL.
●
Whereas, the embedded type databases, which cannot run in an individual
computer, and then cannot be used as the data layer of the 3-Tier
architecture such as Microsoft access, dbase and etc

1, 2, 3 or More Tier Architecture
●
1-Tier:
●
All above layers can only run in one computer.
●
In order to achieve 1-Tier, we need to use the embedded
database system, which cannot run in an individual process.
●
Otherwise, there will be at least 2-Tier because non-embedded
databases usually can run in an individual computer (tier).
●
2-Tier:
●
Either presentation layer and application layer can only run in
one computer,
●
Or application layer and data layer can only run in one
computer.
●
The whole application cannot run in more than 2 computers.

1, 2, 3 or More Tier Architecture ctd.

●
3-Tier:
●
The simplest case of N-Tier architecture; all above three layers are able
to run in three separate computers.
●
Practically, these three layers can also be deployed in one computer (3-
Tier architecture, but deployed as 1-Tier).
●
N-Tier:
●
3 or more tiers architecture.
●
Some layers in 3-Tier can be broken further into more layers. These
broken layers may be able to run in more tiers. For example,
●
application layer can be broken into business layer, persistence layer or more.
●
Presentation layer can be broken into client layer and client presenter layer.
●
Practically, all these layers can also be deployed in one compute
(tier).

●
Client layer: this layer is involved with users directly. There may be several different types of clients
coexisting, such as Window form, HTML web page and etc.
●
Client presenter layer: contains the presentation logic needed by clients, such as ASP .NET MVC in IIS
web server. Also it adapts different clients to the business layer.
●
Business layer: handles and encapsulates all of business domains and logics; also called domain layer.
●
Persistence layer: handles the read/write of the business data to the data layer, also called data access
layer (DAL).
●
Data layer: the external data source, such as a database.

Advantages and Disadvantages of 1 or
2-Tier Architecture
●
Advantages:
●
simple and fast for a lower number of users due to
fewer processes and fewer tiers;
●
low cost for hardware, network, maintenance and
deployment due to less hardware and network
bandwidth needed.
●
Disadvantages:
●
will have issues when the number of users gets big;
●
has limitation to solve issues like security, scalability,
fault tolerance and etc, because it can be deployed in
only 1 or 2 computes.

N-Tier Architecture - Advantages
●
Scalable:
●
this is due to its capability of multiple tier deployment
and the tier decoupling it brought. For example,
●
the data tier can be scaled up by database clustering
without other tiers involving.
●
The web client side can be scaled up by load-balancer
easily without affecting other tiers.
●
Windows server can be clustered easily for load
balancing and failover.
●
In addition, business tier server can also be clustered to
scale up the application, such as Weblogic cluster in
J2EE.

N-Tier Architecture – Advantages ctd.
●
Better and finer security control to the whole system:
●
we can enforce the security differently for each tier if the security requirement
is different for each tier. For example,
●
business tier and data tier usually need higher security level than presentation tier
does, then we can put these two high security tiers behind firewall for protection. 1
or 2 tiers architecture cannot fully achieve this purpose because of a limited number
of tiers.
●
Also, for N-Tier architecture, users cannot access business layer and data
layer directly, all requests from users are routed by client presenter layer to
business layer, then to data layer. Therefore, client presenter layer also
serves as a proxy-like layer for business layer, and business layer serves
as a proxy-like layer for data layer. These proxy-like layers provides further
protection for their layers below.
●
Better fault tolerance ability:
●
for example, the databases in data layer can be clustered for failover or load
balance purpose without affecting other layers.

●
Independent tier upgrading and changing without affecting other
tiers:
●
in object-oriented world, Interface-dependency implementation can
decouples all layers very well so that each layer can change
individually without affecting other layers too much.
●
Interface-dependency means a layer depends on another layer by
interfaces only, not concrete classes.
●
Also, the dependency of a layer only on its directly-below layer also
minimizes the side effect of a layer’s change on the whole system. For
example,
●
if keep the interfaces unchanged, we can update or replace the implementation
of any layer independently without affecting the whole system.
●
Due to the changing of business requirement and technology, changing the
implementation of a layer to another totally different one does happen often.

●
Friendly and efficient for development:
●
the decoupled layers
●
are logic software component groups mainly by
functionality,
●
are very software development friendly and
efficient.
●
Each layer
●
can be assigned individually to a team who
specializes in the specific functional area; a
specialized team can handle the relevant task
better and more efficiently.

●
Friendly for maintenance:
●
N-Tier architecture groups different things together mainly by
functionality and then makes things clear, easily understandable
and manageable.
●
Friendly for new feature addition:
●
due to the logical grouped components and the decoupling brought
by N-Tier architecture, new features can be added easily without
affecting too much on the whole system.
●
Better reusability:
●
due to the logically grouped components and the loose couplings
among layers.
●
Loosely-coupled component groups are usually implemented in more
general ways, so they can be reused by more other applications.

Disadvantages of N-Tier
Deployement
●
The performance of the whole application
●
May be slow if the hardware and network
bandwidth aren’t good enough because
more networks, computers and processes
are involved.
●
More cost for hardware, network,
maintenance and deployment
●
because more hardware and better network
bandwidth are needed.

Advanced Web Design And Development BIT 3207

Recommended

More Related Content

Similar to Advanced Web Design And Development BIT 3207 (20)

More from Lori Head (20)

Recently uploaded (20)

Advanced Web Design And Development BIT 3207