Click submit to view solution

A web browser is a software that helps us access a resource (web page) available on the World Wide Web and identified by a URL. A web browser consists of different sub-components, which can be primarily categorized into browser rendering engine, and browser control.

The rendering engine is responsible for displaying a requested page in the web browser. The rendering engine itself is quite a complex piece of software, which knows how to display a web page based on the HTML elements present in the page, and CSS rules defined (if any). Today browsers are not only limited to displaying text and images, but can provide access to audio and video components also.

The web browser control, too, consists of several sub-components including navigation, window control, event handlers, page display. The navigation control aids users to request for web pages (resources) by specifying a URL, navigate to other resources through internal and external hyperlinks, move across pages visited earlier. Event handlers are responsible to identify the kind of activity that user is trying to do, and perform it. For example, when a user clicks on a hyperlink, event handlers identify the URL of the target resource, and delegates loading of the resource to other components. A resource that has been retrieved by the web browser is then displayed in its page display area. Window control, in association with the rendering engine, helps in controlling various aspects of page display like changing font-size, resolution, and so on, apart from resizing or closing the window.

Represent the above problem with a class diagram. In particular

  • Represent the individual classes
  • Represent how browser rendering engine, and browser control are related to web browser class
  • Add methods that let a web browser retrieve a resource from the web server, and convince yourself
Learning Objectives:
  1. Problem formulation in an object-oriented manner by identifying relevant classes
  2. Modeling behaviour of classes
  3. Associating different classes in the system to get meaningful work done

Limitations: All possible features of a class diagram could not be implemented here. Also, auto-generation of code from the class diagram is not possible here.

Note: Please use the following classes in order to get the result: Web Browser, Rendering Engine, Browser Control, Web Server, Web Resource, Navigation, Window Control, Event Handler, HTML File, Image File, Text File, Event

How would you represent the three-way handshaking mechanism of TCP with a sequence diagram?

Learning Objectives:
  • • Identify objects playing a role in the concerned events
  • • Arrange events in tme sequence of their execution
  • • Use of synchronous message.

Limitations: Only simple sequence diagrams could be represented in this experiment. One can't depict alternate flows or loops. Lifeline activation / deactivation / destroy couldn't be represented here.

The Web traditionally worked in a client-server model, where a user click on the web browser and web browser would send a HTTP request to the web server, and the server would send back a HTTP response to the browser. The HTTP request actually encapsulates the contents of the requested resource in some format. In cases where access to a resource is restricted or say, it requires a user authentication, the HTTP request encapsulates the login credentials and sends to the server. The server then checks with the database server if the credentials are correct. The status of verification is then send back to the browser.

In the recent years there has been a shift from the traditional way of how HTTP works. A new technique has been proposed, popularly know as AJAX, that lets asynchronous communication between a browser and web server. In traditional model, the browser used to send a HTTP request, and then wait for a HTTP response. The next HTTP request was usually sent after getting response from the server.

AJAX, however, lets a web browser to send multiple HTTP requests one after another, without waiting until a response is received. This approach is found to be very helpful in cases when contents of only a portion of the web page has to be updated, rather than refreshing the entire page. Web 2.0 uses AJAX in many different cases for better user experience.

From the above problem statement

  1. How would you represent the traditional Web with a sequence diagram when user verification is required?
  2. What changes would appear in your sequence diagram if you are trying model a scenario where AJAX is being used?

Learning Objectives:

  • • Arranging activities in a logical sequence of their execution
  • • Use of synchronous messages and response
  • • Use of synchronous, asynchronous messages and response

Limitations: Only simple sequence diagrams could be represented in this experiment. One can't depict alternate flows or loops. Lifeline activation / deactivation / destroy couldn't be represented here.

Class Name Add
Select Class Attribute Type Add
Select Class Operation Return Type Add
Select Sub-class Inheritance Select super-class Add
Extends
Select Class Multiplicity(optional) Association Name(optional) Association type Multiplicity(optional) Association Direction(optional) Select Class Add
Tip: To display a direction, you should name the relationship as well.


Classes Attributes Operations
Sub-class Super-class Remove
Class Multiplicity Relation Name Relation Type Multiplicity Class Direction Remove
Object Name (Role) Add
Object (Sender) Message Type Message Object (Receiver) Add
Object (Sender) Message Type Message Object (Receiver) Remove

Object Name (Role) Add
Object (Sender) Message Type Message Object (Receiver) Add
Object (Sender) Message Type Message Object (Receiver) Remove
element-1a











element-1b
element-2a











element-2b
element-3a











element-3b
element-4a











element-4b

Object Name (Role) Add
Object (Sender) Message Type Message Object (Receiver) Add
Object (Sender) Message Type Message Object (Receiver) Remove
element-1a


















element-1b
element-2a


















element-2b
element-3a


















element-3b
element-5a


















element-5b
element-6a


















element-6b
class-diagram-solution
sequence-diagram-solution
sequence-diagram-solution
sequence-diagram-solution