N-tier Architecture

In software engineering, multitier architecture (often referred to as n-tier architecture) is

a clientserver architecture in which presentation, application processing, and data management
functions are physically separated. The most widespread use of multitier architecture is
the three-tier architecture.
N-tier application architecture provides a model by which developers can create flexible and
reusable applications. By segregating an application into tiers, developers acquire the option of
modifying or adding a specific layer, instead of reworking the entire application. A three-tier
architecture is typically composed of a presentation tier, a domain logic tier, and a data
storage tier.
While the concepts of layer and tier are often used interchangeably, one fairly common point of
view is that there is indeed a difference. This view holds that a layer is a logical structuring
mechanism for the elements that make up the software solution, while a tier is a physical
structuring mechanism for the system infrastructure.

Shafiq Hussain Gujjar

Lecturer Computer Science

N-tier architecture advantages

Other applications will be able to reuse the functionality exposed by your layers.

You will be able to distribute your layers over multiple physical tiers. This can make a
very good impact on your application by improving performance (sometimes), scalability
and fault tolerance.

The maintenance of your application is easier because of the low coupling between
layers.

Adding more functionality to your application is made easier.

Layers make your application more testable.

Shafiq Hussain Gujjar

Lecturer Computer Science

Building well formed layers makes the orientation in your application more easier.

Having your application not layered means that you have to deal with all security threats
in one place which is very difficult. Having your application distributed to layers makes it
much easier for design and implement

Without a good deployment plan it is not trivial to distribute your layers over multiple
physical tiers in distributed computing. You need to plan ahead your layers when you
create a distributed application.

JQuery
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document
traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-touse API that works across a multitude of browsers. With a combination of versatility and
extensibility, jQuery has changed the way that millions of people write JavaScript. jQuery is a
lightweight, "write less, do more", JavaScript library.
The purpose of jQuery is to make it much easier to use JavaScript on your website. jQuery takes
a lot of common tasks that require many lines of JavaScript code to accomplish, and wraps them
into methods that you can call with a single line of code.
jQuery also simplifies a lot of the complicated things from JavaScript, like AJAX calls and DOM
manipulation.
The jQuery library contains the following features:

HTML/DOM manipulation
CSS manipulation
HTML event methods
Effects and animations
AJAX
Utilities

Why jQuery?

Shafiq Hussain Gujjar

Lecturer Computer Science

There are lots of other JavaScript frameworks out there, but jQuery seems to be the most
popular, and also the most extendable. Many of the biggest companies on the Web use jQuery,
such as:

Google
Microsoft
IBM
Netflix

Ajax is not a programming language or a tool, but a concept. Ajax is a client-side script that
communicates to and from a server/database without the need for a postback or a complete page
refresh. The best definition Ive read for Ajax is the method of exchanging data with a server,
and updating parts of a web page - without reloading the entire page. Ajax itself is mostly a
generic term for various JavaScript techniques used to connect to a web server dynamically
without necessarily loading multiple pages. In a more narrowly-defined sense, it refers to the use
of XmlHttpRequest objects to interact with a web server dynamically via JavaScript.

Benefits of Ajax
There are 4 main benefits of using Ajax in web applications:
1. Callbacks: Ajax is used to perform a callback, making a quick round trip to and from the server
to retrieve and/or save data without posting the entire page back to the server. By not performing
a full postback and sending all form data to the server, network utilization is minimized and
quicker operations occur. In sites and locations with restricted bandwidth, this can greatly
improve network performance. Most of the time, the data being sent to and from the server is
minimal. By using callbacks, the server is not required to process all form elements. By sending
only the necessary data, there is limited processing on the server. There is no need to process all
form elements, process the ViewState, send images back to the client, or send a full page back to
the client.
2. Making Asynchronous Calls: Ajax allows you to make asynchronous calls to a web server.
This allows the client browser to avoid waiting for all data to arrive before allowing the user to
act once more.
3. User-Friendly: Because a page postback is being eliminated, Ajax enabled applications will
always be more responsive, faster and more user-friendly.

Shafiq Hussain Gujjar

Lecturer Computer Science

4. Increased Speed: The main purpose of Ajax is to improve the speed, performance and usability
of a web application. A great example of Ajax is the movie rating feature on Netflix. The user
rates a movie and their personal rating for that movie will be saved to their database without
waiting for the page to refresh or reload. These movie ratings are being saved to their database
without posting the entire page back to the server.
Technical Aspects of Ajax
Ajax callbacks can be done by instantiating an XMLHttpRequest object in the client-side
JavaScript. The XMLHttpRequest object can be used to directly call server-side objects like
pages and web services. These pages and web services will either save and/or return data.
Ajax was originally an acronym for Asynchronous JavaScript and XML. Asynchronous means
that multiple events are happening independently of one another. Once a client initializes an
Ajax callback to the server, the client will not need to wait for a response and can continue to use
the web application while the request is being processed. Once done, the server will send a
response back to the client and the client will process it as necessary.
What Advances have Been Made to Ajax?
JavaScript is the client-side programming language and XML is a markup language to define
data. JSON is another markup language to define data. JSON (JavaScript Object Notation) is
much easier to use with JavaScript than XML. When it comes to Ajax and JavaScript, JSON
Web Services are replacing XML Web Services.
Another major advance to JavaScript and Ajax is the JavaScript object library called jQuery.
This free, open-source software is a wrapper around JavaScript. jQuery is used to easily write
client-side JavaScript to navigate and manipulate a page and make asynchronous Ajax callbacks.
By using jQuery and JSON Web Services, Ajax callbacks have become standard programming
practices for designing and developing web applications.
The Ajax Control Toolkit is a suite of controls created by Microsoft that is integrated into Visual
Studio and can be dragged and dropped onto web forms just like html and server controls. These
controls are intended to be used for Ajax callbacks. However, they can also be used as normal
client and or server controls. For example, Asp.Net does not come with the Tabs controls.
However, the Ajax Control Toolkit does. The Tab control can postback to the server just like
server controls.
Where Should Ajax be Used?
Ajax should be used anywhere in a web application where small amounts of information could
be saved or retrieved from the server without posting back the entire pages. A good example of

Shafiq Hussain Gujjar

Lecturer Computer Science

this is data validation on save actions. Another example would be to change the values in a drop
down list-box based on other inputs, such as state and college list boxes. When the user selects a
state, the college list box will repopulate with only colleges and universities in that state.
Another great example is when the client needs to save or retrieve session values from the server,
based on a user preference such as the height, width or position of an object. Adjusting the width
could make a callback to the server to set the session variable for the new width. This way,
whenever the page is refreshed, the server can adjust the objects width based on this session
variable. Otherwise, the object would go back to its initial default width.
Other features include text hints and autocomplete text boxes. The client types in a couple of
letters and a list of all values that start with those letters appear below. A callback is made to a
web service that will retrieve all values that begin with these characters. This is a fantastic
feature that would be impossible without Ajax and is also part of the Ajax Control Toolkit.
Many websites have recently used Ajax to support a client application that had problems due to
limited bandwidth and page size. The combination caused the application to take too long to
retrieve data and display it on the page. Sometimes, the web server would simply not have the
resources to handle the request and timeout. The best solution for this issue was Ajax.
To solve this problem, we created JSON Web Services on the web server in order to retrieve the
details about the selected item. The JSON web service would retrieve the data and convert into
JSON and return a JSON string. Instead of posting back to the server, the client would call the
web service when an item was selected from the list box. We used jQuery to make an
asynchronous Ajax call to the web service. Once the client retrieved the data back from the web
service, more client side processing was done to display the information on the page. The time it
took to display the details on the page after the item was selected was instantaneous. There was
no page flicker, refresh or postback involved.

Web cost estimation

Mendes et al. (2001) investigated the prediction accuracy of top-down and bottom-up Web cost
estimation models, generated using linear and stepwise multiple regression models. They
employed one dataset with data on 37 Web applications developed by honors and postgraduate
computer science students. Gathered measures were organized into five categories: length size,
reusability, complexity size, effort, and confounding factors (factors that, if not controlled, could
influence the validity of the evaluation), and are associated to one of the following entities:
application, page, media and program.

Shafiq Hussain Gujjar

Lecturer Computer Science

Size metrics

Reusability metrics

Shafiq Hussain Gujjar

Lecturer Computer Science

Complexity metrics

Shafiq Hussain Gujjar

Lecturer Computer Science

Effort metrics

Shafiq Hussain Gujjar

Lecturer Computer Science

Confounding metrics

10

Shafiq Hussain Gujjar

Lecturer Computer Science

RSS Reader
A lot of dynamic XML documents are available online these days. You will find blog feeds,
podcast feeds, and more that provide an XML document by sending a request to a specific URL
endpoint. These feeds can be viewed either in the browser, through an RSS-aggregator, or as
pure XML. This example demonstrates how to work with an RSS feed directly from your code:
using System;
using System.Linq;
using System.Xml.Linq;
namespace ConsoleApplication1
{
class Class1
{
static void Main()
{
XDocument xdoc =
XDocument.Load(@"http://geekswithblogs.net/evjen/Rss.aspx");
var query = from rssFeed in xdoc.Descendants("channel")
select new
{
Title = rssFeed.Element("title").Value,
Description = rssFeed.Element("description").Value,
Link = rssFeed.Element("link").Value,
};
foreach (var item in query)
{
Console.WriteLine("TITLE: " + item.Title);
Console.WriteLine("DESCRIPTION: " + item.Description);
Console.WriteLine("LINK: " + item.Link);
}

11

Shafiq Hussain Gujjar

Lecturer Computer Science

Console.WriteLine();
var queryPosts = from myPosts in xdoc.Descendants("item")
select new
{
Title = myPosts.Element("title").Value,
Published =
DateTime.Parse(
myPosts.Element("pubDate").Value),
Description =
myPosts.Element("description").Value,
Url = myPosts.Element("link").Value,
Comments = myPosts.Element("comments").Value
};
foreach (var item in queryPosts)
{
Console.WriteLine(item.Title);
}
Console.ReadLine();
}
}
}
Here, you can see that the Load method of the XDocument object points to a URL where the
XML is
retrieved. The first query pulls out all the main sub-elements of the <channel> element in the
feed and
creates new objects called Title, Description, and Link to get the values of these sub-elements.
From
there, a foreach statement is run to iterate through all the items found in the query.
The results are as follows:
TITLE: Bill Evjen's Blog
DESCRIPTION: Code, Life and Community
LINK: http://geekswithblogs.net/evjen/Default.aspx
The second query works through all the <item> elements and the various sub-elements it finds
(these are all the blog entries found in the blog). Although a lot of the items found are rolled up
into properties, in the foreach loop, only the Title property is used. You will see something
similar to the following results from this query:
AJAX Control Toolkit Controls Grayed Out-HOW TO FIX
Welcome .NET 4.5!

12

Shafiq Hussain Gujjar

Lecturer Computer Science

Visual Studio
IIS 7.0 Rocks the House!
Word Issue-Couldn't Select Text
Microsoft Releases XML Schema Designer CTP1
Silverlight Book
Microsoft Tafiti as a beta
ReSharper on Visual Studio
Windows Vista Updates for Performance and Reliability Issues
First Review of Professional XML
Go to MIX07 for free!
Microsoft Surface and the Future of Home Computing?
Alas my friends-I'm *not* TechEd bound

JQuery selectors
JQuery Selector
$(*)
$(.myClass)
$(element)
$(#myid)

Description
Select all the elements in the document.
Selects all the elements to which the CSS class
myclass has been assigned
Selects all the elements of the type element
Selects the element with the ID of myid

jQuery selectors are greedy, meaning they select as many elements as they can in the HTML
DOM. One exception to this is the $('#id') selector, which selects the element with the specified
id attribute value.
Element id values are meant to be unique in HTML although a common error in web
applications is to generate duplicate ID values from data objects. When this happens, you can
usually expect to get the first element that has the specified id value, but you shouldnt rely on
this behavior because it is dependent on the behavior of the users browser.
JQuery document ready function short cut
$(function( ){ // all javascript code });

JQuery selectors examples

13

Shafiq Hussain Gujjar

Lecturer Computer Science

<%-- Add reference to JQuery library --%>

<script src="Scripts/jquery-1.10.2.js"></script>
<script type="text/javascript">
//Jquery document ready function, and inside this function
//We are using different JQuery selectors
$(function () {
//Select all elements in document
//and apply highlight css class
$("*").addClass("highlight");
//Select all p (paragraph) elements
//and apply highlight css class
$("p").addClass("highlight");
//Select all elements css class 'myClass'
//and apply 'highlight' css class
$(".myClass").addClass("highlight");

//Select a single div element

//which have ID 'myDiv'
//and apply 'highlight' css class
$("#myDiv").addClass("highlight");
});
</script>

Web Service
A Web service is a service offered by an electronic device to another electronic device,
communicating with each other via the World Wide Web. In a Web service, Web technology
such as the HTTP, originally designed for human-to-machine communication, is utilized for
machine-to-machine communication, more specifically for transferring machine readable file
formats such as XML and JSON. In practice, the Web service typically provides an objectoriented Web-based interface to a database server, utilized for example by another Web server,
or by a mobile application, that provides a user interface to the end user. A Web server consumes
several Web services at different machines, and compiles the content into one user interface.

JSON and XML

14

Shafiq Hussain Gujjar

Lecturer Computer Science

JSON

JSON: JavaScript Object Notation.

JSON is a syntax for storing and exchanging data.
JSON is an easier-to-use alternative to XML.

Syntax
{"employees":[
{"firstName":"Asim", "lastName":"Raza"},
{"firstName":"Adnan", "lastName":"Shahid"},
{"firstName":"Mazhar", "lastName":"Khan"}
]}

XML

XML stands for EXtensible Markup Language

XML is a markup language much like HTML
XML was designed to store and transport data
XML was designed to be self-descriptive
XML is a W3C Recommendation

<employees>
<employee>
<firstName>Asim</firstName> <lastName>Raza</lastName>
</employee>
<employee>
<firstName>Adnan</firstName> <lastName>Shahid</lastName>
</employee>
<employee>
<firstName>Mazhar</firstName> <lastName>Khan</lastName>
</employee>
</employees>

15

Shafiq Hussain Gujjar

Lecturer Computer Science

Practical portion

In this practical we have a HTML page, which contains different Textboxes and button Submit
or Save. When the button is clicked, every textbox in the HTML page is validated for required
input text.
Run your favorite IDE (which you used for web development). Im using Visual Studio. Create a
web site project in your desired IDE. Add a HTML page and write the code as given below
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<style type="text/css">
div#mydiv {
margin: 0 auto;
width: 75%;
background-color: lemonchiffon;
padding: 20px;
border-radius: 10px;
border: 1px solid black;
}
div#mydiv label {
display: inline-block;
width: 200px;
padding: 8px;
background-color: black;
color: white;
margin: 4px;
}
div#mydiv input[type=text] {
width: 150px;
padding: 4px;
border-radius: 4px;
margin: 4px;
}
.error {
color: red;
padding: 5px;
background-color: pink;
border-radius: 4px;
border: 1px solid red;
}
.mybtn{
padding: 6px;
background-color: darkblue;

16

Shafiq Hussain Gujjar

Lecturer Computer Science

color: white;
border: 1px solid black;
border-radius: 5px;
display: inline-block;
width: 200px;
margin-top: 10px;
}
</style>
</head>
<body>
<form id="form1">
<div id="mydiv">
<div>
<label>First name:</label>
<input type="text" id="firstName" />
</div>
<div>
<label>Last name:</label>
<input type="text" id="lastName" />
</div>
<div>
<label>Age:</label>
<input type="text" id="age" />
</div>
<div>
<input type="button" id="btn" class="mybtn" value="save" />
</div>
</div>
</form>
<script src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function () {
$("#btn").click(function (e) {
e.preventDefault();
$("input[type=text]").each(function (index, elem) {
var element = $(elem);
var str = element.val();
if (!str) {
element.addClass("error");
}
});
});
});
</script>
</body>
</html>

Run and test this HTML page in web browser

Before Save button click

17

Shafiq Hussain Gujjar

Lecturer Computer Science

After, when Save button is clicked

And when giving only first name

18

Shafiq Hussain Gujjar

Lecturer Computer Science