Outline

CHPTER 2:
UNDERSTANDING THE ELEMENTS OF A WEB BASSED
APPLICATION

Client Side vs. Server

Side Web
Client Side vs. Server Side Web

 Simply defined, client-side code executes on the end-user's

computer, usually within a web browser.

 Server-side code executes on the web server, usually within a

web application environment, which in turn generates HTML to
be viewed in a browser.
Client Side vs. Server Side Web

 Which one to choose? What are the determining factors?

– Performance:
 Responsiveness, speed, reliability
 Ability to handle a large number of simultaneous users
– Functionality:
 Simplicity of use and maintenance,
 Breadth of user options
 Ability to handle multiple simultaneous transactions
– Security:
 Desktop security
 Server security
 Database security
 Network security
Client Side vs. Server Side Web

 Examples:
– Code that runs on the server that interprets every mouse
move and keystroke is clearly undesirable
 terminal to mainframe paradigm
– On the other hand, one does not want to download an
entire product database to a browser and then run code that
searches for the products.
– Server side forms have direct access to active code and
perform more reliably
– On the other hand they are more prone to slowdowns due
to the server/network congestion
 Client Side vs. Server Side Web
In general, the key areas where client-side coding has advantages stem from its
location on the user desktop and/or other end device. They include the
following:

– Interactivity (e.g., mouse and keyboard handling)

– Handling of user interface controls: buttons, textboxes, etc.
– Feedback and validation

Key server-side strengths include stem from their proximity to the backend
business databases and other applications. They include the following:

– Direct information access, retrieval, processing and storage

 facilitate e-commerce, reservations, shipment tracking etc.
– central repository of added web features such as e-mail, chat and
multimedia streaming
– security and authentication (mostly)
Client Side Technologies

 HTML : markup language for display of web content

– DHTML extensions for dynamic and interactive control of
web page content and display.
– Tools for writing html documents include : Dreamveawer,
FrontPage and any word processor (including Notepad)
 JavaScript: client side programming language
 VBScript: client side programming language (MS
proprietary, supported by IE)
Client Side Technologies

 Java Applets:
– small programs written in Java, embedded in an
HTML page and executed from within a browser
– Unlike JavaScript, the Java code must be pre-
compiled into a so-called bytecode before it can
be interpreted by a browser’s so–called Java
Virtual Machine
– In other words, the Notepad and the browser
alone are not enough to write java applets
Client Side Technologies

 ActiveX controls
– Similar to Java Applets but can be written in a
variety of programming languages such as C, C+
+, VB and even Java
– Supported by Windows only
– Security issues: unlike Java applets, ActiveX
controls have full access to all desktop resources:
memory, operating systems, …
 Authentication and registration system
Client Side Technologies

 Macromedia Flash
– Proprietary commercial application for creating
interactive graphic content
– It has its own scripting language
– To reproduce the Flash content browsers must be
equipped with a Flash Player plug-in
Client Side Technologies: summary

 Client Side technologies have evolved form a

simple tools for creating static pages to
sophisticated array of technologies turning a
browser into a powerful multifunctional client
 Consequently, we can stop referring to a web
client as “thin” client (i.e. limited in size and
computational needs)
Server Side Technologies

Server-side technologies are quite numerous and diverse. Popular

server side web application technologies include:

 Microsoft ASP/.NET
 Java server technologies such as J2EE, JSP, and servlets
 CGI / Perl- Common Gateway Interface
 PHP – Hypertext Preprocessor
 ColdFusion
Server Side Technologies

 Inaddition, the server-side technologies include

database systems such as Oracle, SQL Server
(Microsoft), MySQL (open source) and many
others
– DB systems are indispensable part of server side
operations and some DB software providers, such as
Oracle are combining web application functionality
with their core database functions
Server Side Technologies

 The “core” server side application development platforms can

retrieve, modify and query the contents of databases through their
own access mechanisms:
 ADO.NET for Microsoft’s .NET platform enables access to
almost every existing database platform
 php enables direct access to many existing DB platforms,
most notably MySQL, but also, Oracle, SQL Server and
others
Server Side Technologies: ASP/.NET

 .NET is Microsoft framework supports many programming languages

such as VB, C++, C#, JScript
– One application can have components written in multiple languages
 ASP.NET (Active Server Pages) is an integral part of .NET initiative
– It is a technology for creating dynamic web content on the server that
appears as HTML on a client’s browser
– Developers can use this technology to write scripts in a language of their
choice for from processing, interactive web pages, or any other dynamic
content
 Every element in an ASP.NET page is treated as an object and run on
the server.
 ASP.NET server controls are components that can perform the same
work as HTML controls: radio buttons, text boxes, buttons, etc.
 Unlike HTML controls, ASP.NET controls preserve their content if and
when this is needed
 Outline

WEB BROWSERS
 INTRODUCTION

 A Web browser acts as an interface between the user

and Web server
 Software application that resides on a computer and
is used to locate and display Web pages.
 Web user access information from web servers,
through a client program called browser.
 A web browser is a software application for retrieving,
presenting, and traversing information resources on
the World Wide Web
 FEATURES

 All major web browsers allow the user to open multiple

information resources at the same time, either in
different browser windows or in different tabs of the
same window
 A refresh and stop buttons for refreshing and stopping
the loading of current documents
 Home button that gets you to your home page
 Major browsers also include pop-up blockers to prevent
unwanted windows from "popping up" without the
user's consent
 COMPONENTS OF WEB
BROWSER

1. User Interface
• this includes the address bar, back/forward button ,
bookmarking menu etc

2. Rendering Engine
• Rendering, that is display of the requested contents on the
browser screen.
• By default the rendering engine can display HTML and
XML documents and images
 HISTROY
 The history of the Web browser dates back in to the late
1980s, when a variety of technologies laid the
foundation for the first

 Web browser, WorldWideWeb, by Tim Berners-Lee in

1991.
 Microsoft responded with its browser Internet Explorer in
1995 initiating the industry's first browser war
 Opera first appeared in 1996; although it have only 2%
browser usage share as of April 2010, it has a
substantial share of the fast-growing mobile phone Web
browser market, being preinstalled on over 40 million
phones.
 In 1998, Netscape launched Mozilla
 TYPES OF WEB BROWSER
 Amaya  Internet Explorer
 AOL Explorer  Internet Explorer
 Elinks for Mac
  Konqueror
Arlington Kiosk
  Links
Dillo
  Lynx
Epiphany
  Maxthon
Flock
  Mosaic
Galeon
  Mozilla
iCab
  Mozilla Firefox
K-Meleon
  Netscape
KioWare
  OmniWeb
SeaMonkey
  Opera
Safari
 MOZILLA FIREFOX

 The Firefox Web Browser is the

faster, more secure, and fully
customizable way to surf the web
 Mozilla is a global community
dedicated to building free, open
source products like the award
winning Firefox web browser and
Thunderbird email software.
Mozilla Firefox
 MOSIAC

Mosaic was developed at the

National Center for Supercomputing
Applications(NCSA) at the University
of Illinois Urbana-Champaign
beginning in late 1992. NCSA released
the browser in 1993, and officially
discontinued development and support
on January 7, 1997.
Mosaic was also the first browser to
display images inline with text instead
of displaying images in a separate
window
NETSCAPE NAVIGATOR
 Netscape Navigator and
Netscape are the names for the
 proprietary web browser popular
in the 1990s
 It was the flagship product of the
Netscape Communications
Corporation and the dominant
web browser in terms of usage
share, although by 2002 its usage
had almost disappeared
WINDOWS INTERNET
EXPLORER

 Windows Internet Explorer

(formerly
 Microsoft Internet Explorer),
is a series of graphical web
browsers developed by
Microsoft and included as part
of the Microsoft Windows line of
operating systems starting in
1995
 OPERA

 Opera is a web browser and Internet

 suite developed by Opera Software.
 The browser handles common
Internet-related tasks such as
displaying web sites, sending and
receiving e-mail messages, managing
contacts, chatting on IRC downloading
files via BitTorrent, and reading web
feeds.
 Opera is offered free of charge for
personal computers and mobile
phones.
SAFARI

 Safari is a graphical web

browser developed by Apple and
included as part of the Mac OS X
operating system.
 on the company's Mac OS X
operating system, it became
Apple's default browser
GOOGLE CHROME

 Google Chrome is a web

browser developed by
Google that uses the WebKit layout
engine and application framework
 It was first released as a beta
version for Microsoft Windows on
2 September 2008, and the public
stable release was on 11
December 2008.
 MOBILE BROWSERS

 Mobile Browsers A mobile browser, also called

a micro browser, minibrowser or wireless
internet browser(WIB), is a web browser
designed for use on a mobile device such as a
mobile phone.
 Opera Mini, offered free of charge, is designed
primarily for mobile phones, but also for
smartphones and personal digital assistants.
 Web Servers

29
 WEB SERVERS

Web Server Definition

 A Web server is a program that generates and
transmits responses to client requests for Web

resources.
 Handling a client request consists of several
key steps:
 Parsing the request message
 Checking that the request is authorized
 Associating the URL in the request with a file name
 Constructing the response message
 Transmitting the response message to the requesting
client

30
 WEB SERVERS

Web Server Definition

 The server can generate the response message

in a variety of ways:
 The server simply retrieves the file associated
with the URL and returns the contents to the
client.
 The server may invoke a script that
communicates with other servers or a back-end
database to construct the response message.

31
 WEB SERVERS

Web Site versus Web Server

 Web site and Web server are different:

 A Web site consists of a collection of Web pages

associated with a particular hostname.
 A Web server is a program to satisfy client
requests for Web resources.

32
 WEB SERVERS

Steps in Handling a Client Request

 A Web server proceeds through the following
steps in handling an HTTP request:
 Read and parse the HTTP request message
for example GET the resource /foo.htm
 Translate the URL to a file name
for example the resource be located in the base directory
such as /www, where the URL
http://www.bar.com/foo/index.html corresponds to
the file of www/foo/index.html
 Determine whether the request is authorized
 Generate and transmit the response that includes
header to show the status information
33
 WEB SERVERS

Access Control
 A Web server may limit which users can access
certain resources. Access control requires a

combination of authentication and authorization.

 Authentication identifies the user who originated
the request.
 Authorization determines which users have
access to a particular resource.

34
 WEB SERVERS

AUTHENTICATION
 Most client-server systems authenticate a user by
asking for a name and password.

 Web server must perform authentication for every

request for a resource that has access restrictions.
 The server returns an HTTP response that indicates that
the request requires authorization.
 The response also identifies what kind of authentication
is required.
 The response also identifies the realm
 a string that associates a collection of resources
at the server
35
 WEB SERVERS

AUTHORIZATION
 To control access to Web resources, the server must
employ an authorization policy.

 A policy typically expressed in terms of an access

control list that enumerates the users who are granted
or denied access to the resources.
 In addition to checking the user name, the server may
allow or deny access to the resource based on other
information associated with the HTTP request, such as
the host name or IP address of the requesting client.
 Authenticating HTTP requests can impose a heavy
load on the Web server.

36
 WEB SERVERS

Dynamically Generated Responses

 This feature differentiates the Web from earlier
file transfer services on the Internet.
 Dynamically generated responses are created
in a variety of ways:
 Server-side include
 Server script

37
 WEB SERVERS

Server-Side Include
 A server-side include instructs the Web
server to customize a static resource based

on directives in an HTML-like file.

38
 WEB SERVERS

Server Script
 A server script is a separate program that generates
the request resource.

 The program may run as

 Part of the server
 A separate process
 The main role of the Web server is
 To associate the requested URL with the appropriate script
 To pass data to/from the script
 The main role of the script is
 To process the input from the server
 To generate the content to the client

39
 WEB SERVERS

Server Script
 The server can interact with the script in
several different ways:
 Separate process invoked by the server
 Software module in the same process
 Persistent process contacted by the server

40
 WEB SERVERS

Passing Data to/from the Script

 Decoupling the scripts from the Web server
requires a well-defined interface for passing

data between the two pieces of software.

 Common Gateway Interface (CGI) defines
interfaces for a variety of operating system
platforms.

41
Client‐Side Scripting

 Client-side scripting generally refers to the

class of computer programs on the web that
are executed client-side, by the user's
web browser, instead of server-side (on the
web server).
 Script delivered to web browser as part of page
source code. Browser runs the script.
 Script source code is exposed to the user.
…

 Client-sidescripts are often embedded within

an HTML or XML document (hence known as
an "embedded script"), but they may also be
contained in a separate file, to which the
document (or documents) that use it make
reference (hence known as an "external
script").
…

 Client-side scripts in a Web application are

run by a software application—the scripting
engine—that is part of the Web browser. The
scripting engine parses and runs the script
code, allowing it to manipulate resources of
the browser and Web document
Client-Side Scripting Languages

 JavaScript
 ActionScript (used to create animated interactive web
applications for Adobe Flash Player using Adobe Flash
Pro)
 Dart
 VBScript (NOTE: VBScript can also be used as Server-
side so that processing is done on the server.)
 Typescript
 Python
JavaScript

 JavaScript (JS) is
dynamic computer programming language.
 It is most commonly used as part of web
browsers, whose implementations
allow client-side scripts to interact with the
user, control the browser, communicate
asynchronously, and alter the document
content that is displayed.
Interactive Web Applications

 What separates a Web page from an application is rich,

two-way communication between the user and the site.
 An application accepts data from the user and
dynamically tailors its output based on this input. While
HTML itself does offer a few built-in elements and
features that enable Web developers to implement
interactive functionality in a Web page, these features
revolve around form submission, and do not, by
themselves, offer much opportunity for creating exciting
Web applications.
The role of client side scripting

 Using a client-side script for interactivity in a

Web application usually provides the
appearance of better performance than using a
server-side script to implement the same
functionality because the client-side script does
not incur the delay of a round trip between the
client and the server, making the Web
application more responsive.
…

 This is crucial for a dynamic user experience

in a Web application. As an extreme
example, imagine that a developer wants to
limit input to a text box to only numbers.
Each time the user hits a key, the character
entered must be examined and thrown away
if it's not a number or cursor movement key.
Capabilities and limitations of
client side scripting

 Client-sidescripts execute in the Web

browser under strictly enforced rules
designed to protect the user's system from
malicious code. Client-side scripts can
control most browser behavior and
manipulate most HTML document elements.
…

 Client-sidescripts are often used for

navigation and to enrich and customize the
user experience. Web developers extend the
look and feel of the standard application by
associating a script with a document element
in such a way that the script executes in
response to user interaction with the
element.
Elements of client side scripting

 Client-side scripts use four essential

components to enable the creation of full-
featured Web applications.
 Scott Loban introduces those major
components of client-side scripting and their
roles in a dynamic Web application.
…

 These essential elements work together to

enable the creation of exciting, full-featured
Web applications:
1. The runtime environment
2. The browser API
3. The document object model
4. Scripting languages
The Environment: Scripts in the
Browser

 A scripting engine is software that parses and executes

program commands.
 Modern Web browsers contain a scripting engine that is
used to run scripts that are downloaded from the server
along with a Web document.
 The script code itself is plain text and is an integral part
of the HTML document. The browser application on the
client is responsible for identifying, parsing, and
executing the code.
The Browser API

 A scripting language provides the capability to process data—to

store data in variables, to execute calculations and transformations
on this data, and to combine all these into purpose-built functions.
However, a full-featured Web application requires more: the
capability to manipulate the elements of the browser and of the
document themselves.
 Scripts interact with the browser and the document
through application programming interfaces(APIs). An API is a set
of methods and data types that expose the resources of an
application to programmatic manipulation.
The Document Object Model

 While the capability to manipulate these browser

elements represented a big improvement over pure
HTML, developers soon began clamoring for more.
 Client-side scripting had the potential to be much more
powerful and versatile if scripts could manipulate the
document itself. This need was met by adocument API,
a way to control the elements of the HTML document.