web engg notes final

7/26/2019 Web Engg Notes Final

http://slidepdf.com/reader/full/web-engg-notes-final 1/18

1 Shafiq Hussain Gujjar

Lecturer Computer Science

N-tier Architecture

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

a client – server 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 physicalstructuring mechanism for the system infrastructure.





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.





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-to-

use 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?





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 I’ve 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 serverto retrieve and/or save data without posting the entire page back to the server. By not performinga full postback and sending all form data to the server, network utilization is minimized andquicker operations occur. In sites and locations with restricted bandwidth, this can greatlyimprove network performance. Most of the time, the data being sent to and from the server isminimal. By using callbacks, the server is not required to process all form elements. By sendingonly 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 tothe 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 toact once more.

3. User-Friendly: Because a page postback is being eliminated, Ajax enabled applications willalways be more responsive, faster and more user-friendly.





4. Increased Speed: The main purpose of Ajax is to improve the speed, performance and usabilityof a web application. A great example of Ajax is the movie rating feature on Netflix. The userrates a movie and their personal rating for that movie will be saved to their database withoutwaiting for the page to refresh or reload. These movie ratings are being saved to their databasewithout 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-sideJavaScript. 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” meansthat multiple events are happening independently of one another. Once a client initializes anAjax callback to the server, the client will not need to wait for a response and can continue to usethe 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 definedata. JSON is another markup language to define data. JSON (JavaScript Object Notation) ismuch easier to use with JavaScript than XML. When it comes to Ajax and JavaScript, JSONWeb 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 writeclient-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 VisualStudio and can be dragged and dropped onto web forms just like html and server controls. Thesecontrols are intended to be used for Ajax callbacks. However, they can also be used as normalclient 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 likeserver 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





this is data validation on save actions. Another example would be to change the values in a dropdown list-box based on other inputs, such as state and college list boxes. When the user selects astate, 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 widthcould 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 object’s width based on this sessionvariable. 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 ofletters and a list of all values that start with those letters appear below. A callback is made to aweb service that will retrieve all values that begin with these characters. This is a fantasticfeature 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 tolimited bandwidth and page size. The combination caused the application to take too long toretrieve data and display it on the page. Sometimes, the web server would simply not have theresources 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 thedetails about the selected item. The JSON web service would retrieve the data and convert intoJSON and return a JSON string. Instead of posting back to the server, the client would call theweb service when an item was selected from the list box. We used jQuery to make anasynchronous Ajax call to the web service. Once the client retrieved the data back from the webservice, 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 wasno page flicker, refresh or postback involved.

Web cost estimation

Mendes et al. (2001) investigated the prediction accuracy of top-down and bottom-up Web costestimation 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.





Size metrics

Reusability metrics





Complexity metrics





Effort metrics





Confounding metrics





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);

}





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 theXML isretrieved. The first query pulls out all the main sub-elements of the <channel> element in thefeed andcreates new objects called Title, Description, and Link to get the values of these sub-elements.Fromthere, 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 upinto properties, in the foreach loop, only the Title property is used. You will see somethingsimilar to the following results from this query:

AJAX Control Toolkit Controls Grayed Out-HOW TO FIXWelcome .NET 4.5!

http://geekswithblogs.net/evjen/Default.aspx








Visual StudioIIS 7.0 Rocks the House!Word Issue-Couldn't Select TextMicrosoft Releases XML Schema Designer CTP1Silverlight Book

Microsoft Tafiti as a betaReSharper on Visual StudioWindows Vista Updates for Performance and Reliability IssuesFirst Review of Professional XMLGo to MIX07 for free!Microsoft Surface and the Future of Home Computing?Alas my friends-I'm *not* TechEd bound

JQuery selectors

JQuery Selector Description

$(“*”) Select all the elements in the document.

$(“.myClass”) Selects all the elements to which the CSS classmyclass has been assigned

$(“element”) Selects all the elements of the type element

$(“#myid”) 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 shouldn’t rely on

this behavior because it is dependent on the behavior of the user’s browser.

JQuery document ready function short cut

$(function( ){ // all javascript code });

JQuery selectors examples





<%-- 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 object-

oriented 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 consumesseveral Web services at different machines, and compiles the content into one user interface.

JSON and XML





JSON

JSON: JavaScript O bject 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>





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). I’m 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;





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





After, when “Save” button is clicked

And when giving only first name

web engg notes final

Documents