3/5/2015 TT284: Web Technologies 1

Arab Open University

TT284 WEB TECHNOLOGIES

Tutorial 4

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 2

Block 2, Part 1: Architectures

Contents

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 3

Block 2, Part 2: The Client Side

Contents

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 4

Part 1: Architectures
• Design at this level is often termed the ‘architecture’ of a system.
• Architecture specifies the components that make up a system, their
functionality and how they interact or communicate.
• architecture can relate to the products and components used to implement
a specific architecture

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 5

• ‘Architecture’ is a term normally associated with the design of

buildings. In the construction industry, architecture is often
taken to relate to the style and structure of buildings.
• the architecture of web applications in terms of their
‘structure’, which can relate to both hardware (the physical
structure of the application) and software (the programs
making up an application).
• The architecture of a software system defines that system
in terms of computational components and interactions among
those components.

• The word ‘architecture’ :

Structure, Foundations, Infrastructure services, Vision.
By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 6

Client–server and multi-tier architecture

Two-tier architecture
• a client-server architecture divides an application into two
parts, ‘client’ and ‘server’.
• The server part provides functionality:
any number of clients can connect to the server and request that it performs a
task. The server accepts these requests, performs its task and returns any
results to the client, if appropriate.

• Example, Consider an online bookstore. The application allows a user to

search and look at the details of a large range of books, and then to order a
book. The application software provides an interface and a means of
selecting or finding a book’s details, as well as displaying book information
and allowing a book order to be generated.

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 7

• This would not work well in the above example because the catalogue of
books will change regularly. An improvement might be to split the
application into two parts.
• One part, the client, can provide the interface for users and be distributed to them.
• The other part can be kept and run on the company’s own server machine
• The client application can display information and be used to pass
information to the server for searching, such as the title of a book.
• The client application, or software, that displays information is quite commonly
called the ‘presentation’ layer or tier.

This simple client–

server architecture
is also commonly
called ‘two-tier
architecture’.

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 8

• A common client used to access applications is a web browser that

accesses server applications (such as applications on websites) using
HTTP. … for most applications the browser is provided by a third party.
• One advantage: the client is loosely coupled to the server application

Multi-tier architecture
• Both the client and the server parts can be further subdivided if this is
appropriate to the application.
• The client, for example, may be responsible both for some processing of data
(such as totalling) and for the presentation of information. These two functions
might be separated into two tiers at the client end.
• Meanwhile the server software might include one or more data stores (for
instance, in the form of a database system).
By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 9

• In the following Figure, two more tiers on the server side: a data tier and
another tier that handles interactions with the data tier, such as retrieving
requested information or validating data that is put into the data stores.
• This tier, between the data tier and the web server application, is
sometimes termed the ‘middle tier’ or middleware. An application that
uses middleware to handle data requests between a user and a database
is said to employ multi-tier architecture.

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 10

• ‘multi-tier architecture’ refers to what should more specifically be called

three-tier architecture (client, server and data tiers).

• more tiers can be used and so the term ‘N-tier architecture’ is used
generally to mean any architecture that has more than two tiers.

• Advantages:
• Each tier can be changed more easily as it is less dependent
• the tiers or components are truly loosely coupled

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 11

Network and distributed architectures

Service-oriented architecture (SOA)

SOA is based around the idea of breaking down an application into a set of
much smaller tasks that can be performed by small independent pieces of
software, each performing a discrete task commonly called a service.

Examples of services
• Currency conversion. A service that converts a sum of money from one
currency to another might be used in a wide range of circumstances. It
might be used, for example, to convert all the prices on a website store to a
customer’s local currency when they select this.

• Data storage. A service that allows data to be stored and later retrieved,
perhaps with a range of capacities, costs and timescales on offer.

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 12

• SOA is based on three main components or roles:

1. a requester that can both search and discover web services and use or
‘bind’ to a web service by communicating with XML messages
2. a directory or registry that holds the details of web services that are
available
3. the services themselves. Each service has its details published as an
XML description in any number of directories. The description includes
details of what the service does and how to use the service in terms of
how to call it and what response to expect.

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 13

• To find a service on the Web, a requester must know the location (a URL
for example) of a directory service and then search the directory for the
type of service required. The directory provides a description of the
service, where it is located on a network (often the internet) and how to use
the service. The requester can then make a connection, or ‘bind’ to the
service. This allows the requester to put a request to the service, which the
service processes before returning any response required.

• Commonly the protocols used in SOA include HTTP, FTP and SMTP

Web service architecture

• Web service architecture (WSA) is a particular realization of SOA that is

used to provide services over the internet. It has four distinct layers,
which are:
By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 14

1. Network transport layer. This supports the passing of messages

between components in the architecture. Common protocols used here
are HTTP, FTP and SMTP, which you visited in Block 1.
2. Message encoding layer. This provides a standard approach to
encoding information in messages so that they can be understood. Web
service messaging approaches such as XML-RPC and SOAP are based
on XML.
3. Service description layer. This provides a way to describe a web
service so that it can be accessed and used. The Web Services
Description Language (WSDL) is used to describe services.
4. Service discovery layer. This provides the means to publish
descriptions of and find web services in a central repository. The
Universal Description, Discovery and Integration (UDDI) registry
standard supports this layer.

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 15

• These four layers are termed the web services protocol stack.
• The upper layers build on the lower levels so, for example, service
descriptions are expressed using XML, and SOAP messages are
usually exchanged using HTTP.

Web services
protocol stack

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 16

Web service operation

• The operation of a web service is outlined in following Figure

1. Publish service description. The requestor or service

client wanting to access a service first needs to know
where to find a directory of services. A directory may be
publicized, or it may be found by looking on the internet
with a search engine. By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 17

2. Search request. The first step for a client is to send a request

to the directory for the details of appropriate web services.
The client can ask for details of a specific service or may
send some keywords to be used in searching for services.
3. Service descriptions. The directory returns a set of service
descriptions. Each description contains the information
required to locate and access (make a request to) the service.
4. Request service. The client chooses which service is
preferred from those available and makes a request to the
service.
5. Service response. Most services can be expected to return a
result of some kind.

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 18

• Detailed service operations

By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 19

• service operations With protocols

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 20

• a look at an example of services. Sun have produced an interesting ‘before

and after SOA’ overview diagram

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 21

• The three applications on the left (‘service scheduling’, ‘order processing’

and ‘account management’) are all broken into a set of ‘reusable business
services’ on the right.

• It is these five services that would be implemented as part of an SOA-

based solution. Notice how three of the services, signified by their having
two coloured dots in the service, serve within two of the applications. This
means that the implementation of the services can be made just once and
then shared or ‘reused’ between the applications.

• The new applications, called here ‘Composite applications’, are made up of

a set of services that are called to perform their functions according to a
‘business process’. This process can call services one after another,
perhaps passing the result of one service to the next service, or it might call
several at the same time.

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 22

Composite application calls to services By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 23

Note: there are special ‘business process’ languages for organizing (or ‘orchestrating’) web services, such as
WS-BPEL, which is a standard maintained by OASIS, and Business Process Model and Notation (BPMN),
which is currently maintained by the Object Management Group.

SOA properties

• The SOA model (with its ‘publish’, ‘find’ and ‘bind’ operations), together with
the small size of operations embodied by services, leads to a very flexible
solution.
• Not all the services used in a process may be provided by the organization.
Third-party services can be included in a process.
• Ex: an organization taking orders in foreign currencies might use a currency exchange
service provided by a bank to convert the cost of an order from sterling to the customer’s
local currency.
• Another important property of the SOA model is that services are called
only at the point in time when they are needed. This is often termed ‘Just-
in-time’ use of services.
By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 24

• The SOA model adopts a platform-neutral approach to implementation. So,

for example, the descriptions of web services that are published in a
directory are written in XML often using Web Services Description
Language (WSDL). The messages passed between client and service are
often encoded as Simple Object Access Protocol (SOAP), or supported
more directly by the HTTP-based Representational State Transfer (REST)
approach.

Cloud architecture
• SOA is well placed to take advantage of a recent development known as
‘cloud technology’ based on what is often termed ‘the Cloud’. Cloud
technology is an emerging advance at this time and there is a lack of clarity
as to what the term will really come to mean. Some definitions restrict the
Cloud to mean that virtual servers are made available and used over the
internet, but more generally the Cloud is seen as consisting of a wide range
of different resources.
By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 25

• Cloud computing: is defined as a model for enabling

convenient, on-demand network access to a shared pool of
configurable computing resources (e.g. networks, servers,
storage, applications, and services) that can be rapidly
provisioned and released with minimal management effort or
service provider interaction.
• The general principle behind the Cloud is that it functions as a set of
available resources and services that can be accessed over the internet.

Web 2 and architecture

• In the recent past there has been a trend to enhance the user experience
on the Web by increasing the opportunities for participation (Facebook,
LinkedIn, etc.) and also to improve the interactivity of the Web. These
advances have led to the labelling of a new era as ‘Web 2’ and the past
achievements have become ‘Web 1’.
By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 26

• In the standard HTTP-based interaction, the browser sends a request and

then has to wait for a response. This delay in the reaction.
• Asynchronous JavaScript + XML (AJAX) is an approach utilizing an
additional client-side layer that sits behind the client user interface
(browser window) and manages the communication, using HTTP
requests, with the server on behalf of the client.

Realizing an architecture

• By looking at components and how

they might be used in an architecture
We are moving from the high level,
more abstract architecture toward more
concrete implementation aspects in
a top-down fashion
By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 27

A few products
There is an enormous range of products available. Examples:

• Client tier
open source option that is fully HTML- and HTTP-compliant as well as quite popular such as
FireFox which is freely available. Most of the features of FireFox are based on the open
HTML, XML standards
• Server tier
Microsoft’s Internet Information Services (IIS) or Zeus. Apache is freely available as open
source software. IBM HTTP Server
• Middle tier
‘Apache’ can run languages such as PHP, code in PHP and run the business logic programs
on the same server as HTML web pages. Tomcat. This application server is also an ‘Apache’
project and can communicate with the Apache web server.
• Data tier
MySQL as this is another freely available product. This database management system
(DBMS) allows any number of actual databases to be created for holding and managing data
and can easily have both the sales records and stock levels databases.

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 28

Outline of multi-tier architecture realisation

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 29

Block 2, Part 2: The Client Side

• focus on the client side, particularly the most common client
‘the browser’.
• explore the client-side programming language ‘JavaScript’.
Small programs or ‘scripts’ can be written in this language and
embedded into HTML web pages.
• No detailed investigation into JavaScript here.

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 30

Contents

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 31

Clients: The ‘thick’ and the ‘thin’

Thin clients

• A thin client has little internal logic so it will not do very much work and will
perform only quite simple functions. The thinnest client will simply present
information. An HTML browser that simply renders HTML, images, etc., as
pages is a good example of this.
• So a thin client typically results in frequent exchanges with the server, with
the user waiting for the server to respond between each update on the
client side see Figure:

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 32

Thick clients

• A thick client performs a significant amount of processing on the client side

and thus puts greater demands on the client-side machine. As the thick
client performs much of the processing required, then operations carried
out on behalf of the user frequently do not require any interaction with the
server.

• the thick client may download data as if directly from the data layer, In
some cases, establish their own private connections to a data layer outside
of the HTTP.
• it will be quite a complex piece of software that may be difficult to install,
run and manage across a large number of different client machines and
their (usually) different environments. By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 33

• The view of clients as ‘thick’ or ‘thin’ is rather over simplified.

Domenig’s
architecture
options

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 34

• Activity:
• Discuss the ‘clients’ and consider the following software that
you can run on your own machine and consider how ‘thick’ or
‘thin’ you would consider it to be:
• Google Earth
• Street Map
• Skype

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 35

Programming language types

• Programs are ‘translated’ from a programming language into a set of
processor instructions for execution. set of instructions for performing a task.
• two types of computer languages can be distinguished:
1. Interpreted languages
• Scripts are interpreted at execution time. JavaScript, Basic, Perl
• The key distinguishing property of interpreted languages is that they are
translated from the programming language into processor instructions when the
script is executed.
2. Compiled languages
• Compiled languages are translated to an executable file. C, Delphi or Fortran,
the complete program is translated before being executed.
• A major advantage of the compiled approach is that the program can be
compiled once and run as many times as required without having to translate the
high-level programming code into processing instructions each time the program
is run.
• modern languages such as Java runs on any type of computer (e.g. Macintosh,
PC) using any operating system (e.g. Windows, Solaris, Linux).
By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 36

So, how does Java achieve computer-type (processor) and

operating-system independence?

The answer is to introduce a two-stage translation process.

• First the program is translated into a new set of instructions, known as
bytecode, that are closer to the language that any processor understands
but are not specific to any one processor or operating system.
• Then, when the program is run, another software program takes the
translation and converts it to the instructions for a particular computer and
operating system. This is, therefore, a partially compiled and a partially
interpreted approach.

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 37

Browser-based clients
• The most common client, of course, is simply a browser. Most
browsers also support the use of extensions, commonly
known as ‘plug-ins’, which provide some additional
functionality. A number of browser extensions exist, including:
• Flash
• Java
• VBScript
• ECMAScript

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 38

Back to forms
• Both HTML and CSS are very frequently used in combination with
JavaScript, a client-side programming language that allows much greater
functionality and interactivity to be supported within web pages on the client.
• A web page can be seen as composed of a set of layers

• HTML is used to structure the basic

page content.

• CSS is used to specify the

presentation of the structured content
and

• JavaScript gives the web page

functionality or ‘behaviours’.

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 39

Software for programming

• In Block 2 you will be called upon to do some practical coding work.
• you will need a simple editor, simple tool, such as Notepad. A recommendation is ‘gedit’,
which is free, simple to use, and supports both JavaScript and PHP. You can obtain gedit from
the gedit website.

JavaScript
• is a programming language and often called a scripting language.
• just one client-side scripting language
• JavaScript can be embedded in any XHTML page
• JavaScript can be natively interpreted by most modern browsers, without
the use of plug-ins
• Computations and actions are executed on the client side, and there are
situations in which this is preferred, for example to add responsiveness to a
web page
• JavaScript is ‘mainstream’, meaning that it is recognized as a useful
language, a standard and as having some longevity.
By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 40

Inserting JavaScript into web pages

1. Inside an HTML tag script, in a ‘character data’ or CDATA section:
<script type="text/javascript">
/* <![CDATA[ */
alert("JavaScript is working in your browser");
/* ]]> */
</script>
2. Inside an external .js file, linked to the HTML page that contains a
declaration:
<script type="text/javascript" src="path/to/file.js"> </script>
The external .js file will include just the JavaScript code. No HTML is
allowed in the external file.
3. As a value of some HTML attribute in the HTML:
<a href="javascript:alert('JavaScript is working in your
browser');">link</a>
By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 41

• JavaScript code in a page is parsed as the page is loaded just as HTML is

parsed. The code may be executed at the time it is loaded into a browser,
or it may be executed following some subsequent event such as the user
clicking a button.

• Do The following Activity JavaScript ‘Hello world’

• Include the following instructions (a JavaScript script) in the body of the otherwise empty
HTML page in the Block 2 Part 2 Resources folder:
<script type="text/javascript">
<!–
document.write("Hello world");
//–>
</script>

• open your HTML

By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 42

• JavaScript uses ‘document.write’ to print information in the web page.

• You can use ‘alert’ instead of ‘document.write’.

More realistic use of JavaScript in HTML

• See “Flooring 4-u R-us” in your resource files.

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 43

• See your text for Adding a behaviour to a form.

In line 20 the area that the user has typed into the form is retrieved from the
form and converted to a number. This is done by using a reference into the
form: document.floorOrderForm.msquared.value
This reference is based on what is termed the ‘Document Object Model’
(DOM) of the web page. When the page is loaded in a browser, it is parsed
and a set of objects are created that correspond to the different items found
in the page (forms, headings, etc.).

• If the value cannot be used to generate a number then the value ‘Not-a-
Number’ (‘NaN’) is returned.

• The ‘onClick’ feature of a button is an event that is called when the user
clicks on the button.

• Do Activity 3 and 4.
By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 44

Some DOM methods for forms

To get the value entered into the metres squared field (line 20) I used:
document.floorOrderForm.msquared.value
In the HTML form (line 60) the field is specified by:
<input type="text" name="msquared" size="3"
maxlength="4" />
So in the DOM reference the ‘name’ parameter is used to specify which of
the form’s elements is required.

• The DOM provides a very sophisticated set of functions for accessing and
manipulating documents and forms. These ‘functions’ are more correctly
termed ‘methods’ as they are part of the objects making up the DOM (see
w3schools.com (n.d.(c)) on ‘HTML DOM properties and methods’).

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 45

• The first of these DOM functions searches for an element with the specified value of
a parameter called ‘id’. So to use this approach, you first need to change or add an
‘id’ to the form element:
<input type="text" id="msquared" size="3" maxlength="4" />
Then you can access the value of the form field using:
document.getElementByID(‘msquared’).value

• Names are used as the names of the parameters, and may be non-unique (which
allows for checkbox groups, radio button groups, etc). IDs are used to refer to the
element within the document from JavaScript, and must be unique to the document.
If the ID is not unique, then the first element with the specified ID is used, which
makes it difficult to access subsequent elements.
• The other two functions, ‘getElementsByName’ and ‘getElementsByTagName’,
return a number of results as an array.
By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 46

• The JavaScript below gets all the elements in the document that are of
HTML tag type ‘input’. It then uses a loop to write the names of all of these
elements out as part of the page being loaded.

<script type="text/javascript">
/* <![CDATA [ */
document.write("<p/>");
elements = document.getElementsByTagName('input')
for (elementNum=0; elementNum<elements.length; elementNum++)
{
document.write(elements[elementNum].name);
document.write("<br/>");
}
/* ]]> */
</script> Do Activity 5 and 6
By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 47

The Document Object Model (DOM)

• The Document Object Model (DOM) is a technique based on a view of a
web page as a hierarchical structure made up of objects. The DOM itself is
not part of JavaScript, but has been defined by the W3C
• The DOM provides the functionality needed to manipulate hierarchical
elements and attributes in an HTML page.
The DOM is based on a representation of a document
in a structure similar to that of a family tree.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN“
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-859-1" />
<title>My DOM example</title>
</head>
<body>
<h1>A heading</h1>
<p>Some <b>text in a</b> paragraph.</p>
</body>
</html>
By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 48

• can be represented by the tree

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 49

• The upper levels of the model consist of a few fixed objects that are always
accessible to JavaScript

The window object

At the top level of the DOM hierarchy is a single window object, which
represents the browser window. All the other objects in the DOM are
contained directly or indirectly by the window object.

Do Activity 7
By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 50

The document object

• The document object is a child of the window object, and allows us to
manipulate a web page. For example, you can use the document object to
insert content in a web page:
document.write("<p>This text is going to be inserted in the web page</p>");

The navigator object

• The navigator object (window.navigator) allows us to retrieve information
about the browser that has been used to access a page. Through the
navigator object, you then can then identify the name of the browser
(navigator.appname) and the operating system of the client
(navigator.platform).

The images object

• The document object includes an images object (document.images), which
allows access to all the images that are included in the document.
By: Dr. Monif Jazzar. AOU-KW
3/5/2015 TT284: Web Technologies 51

Walking the DOM

• The DOM application program interface (API) allows the relationships
between nodes to be used to ‘walk’ around a document tree, examining the
nodes and their content and changing, deleting or adding new nodes to the
tree. The DOM also provides other, higher-level functions for retrieving
nodes with specific attributes.

• See the listing script in your text.

• Do Activity 9 Using online references

By: Dr. Monif Jazzar. AOU-KW

3/5/2015 TT284: Web Technologies 52

End of Tutorial 4
Have a nice day

By: Dr. Monif Jazzar. AOU-KW