Modeling Web Applications

Fourth and Fifth Lecture

Dr. Iqbal Ahmed

Associate Professor
Dept. of Computer Science and Engg.
1
University of Chittagong.
Outline
• System modeling
• Modeling requirements

2
1. System modeling
• Process of developing abstract models of a
system
• Representing system using graphical
notations
– UML

3
1. System modeling
• each model presents a different view or
perspective of the system
– External perspective: system context and
environment
– Interaction perspective: how system interact with
environment
– Structural perspective: how system is organized
– Behavioral perspective: dynamic behavior of the
system

4
1. System modeling…
• Models are used during
– RE phase to derive system requirements
• use-case diagram, activity diagram
– design phase to describe the system to engineers
• class diagrams, sequence diagrams etc.
– after implementation
• to document system’s structure and operation

5
1. System modeling…
• Why system modeling?
– reduce complexity
– document design decisions
– facilitate communication among team members

6
1. System modeling…
Levels Modeling dimensions:
User interface

Application Logic

Phases
Structure Analysis Design Implementation

Behavior

Aspects

• Levels – the “how” & “what” of an application

• Aspects – objects, attributes, and relationships; function & processes
• Phases – Development cycle

7
1. System modeling…
Levels
Presentation
Hypertext
Customization
Content

Phases
Structure Analysis Design Implementation

Behavior

Aspects
• Levels – Information, node/link structure, UI & page layout
• Aspects – Same as Software Applications
• Phases – Approach depends upon type of application
• Customization – Context information (user’s preferences, bandwidth restriction, device
characteristic etc.) and allow to adopt web application accordingly

8
1. System modeling…
• Requirement modeling
– use-case diagram
– activity diagram
• Content modeling
– class diagram
• Navigational modeling
– to model nodes and navigational structure among
them
• Presentation modeling
– model user interface, page-layout
9
1. System modeling…
• “The Unified Modeling Language is a visual
language for specifying and documenting the
artifacts of systems”
– Structural – Class diagrams
– Behavioral – Use Case diagrams
• For Web-centric modeling, UML is used with
some extensions from UWE (UML-based web
engineering)
- http://uwe.pst.ifi.lmu.de/

10
 2. Modeling requirements
• Use-case Diagram: The goal of the diagram is to
provide a high-level explanation of the relationship
between the system and the outside world (set
goals)
• Activity diagram: a graphical representation
of workflows of stepwise activities and
actions with support for choice, iteration and
concurrency

11
2.1 Use-case diagram
• Components:
System Name
• The system

• The use case task referred to as the use case

that represents a feature needed in a software
system
Use-case title

12
2.1 Use-case diagram
• Components:
• The actor(s) who trigger the use case to activate
<<actor>>
HR system

• The communication line to show how the actors

communicate with the use case

13
2.1 Use-case diagram…
• The include relationship represents the inclusion
of the functionality of one use case within
another <<include>>
include use-case base use-case

• The extend relationship represents the

extension of the use case to include optional
functionality
<<extend>>
Base use-case Extension use-case

14
2.1 Use-case diagram…
• A use-case-generalization is a relationship from
a child use case to a parent use case, specifying
how a child can specialize all behavior and
characteristics described for the parent

Generalized

Specialized user Registered user

15
2.1 Use-case diagram…
• Web specific requirements:
• Need to distinguish between functional and
navigational use-cases
– UWE provides <<browsing>> to represent a
navigational use-case while <<processing>> to
represent a functional use-case

16
2.1 Use-case diagram…
• Consider an online video sharing system:
– Users can search and view the videos
– A user must be a register user to share videos

17
 2.1 Use-case diagram…
Online video sharing system

<<browsing>>
Search a video
user

<<browsing>>
Watch a video

<<processing>>
register
<<extend>>
Registered user <<processing>>
<<browsing>>
login share a video
<<include>>

18
 2. The activity diagram
• Elements of an activity diagram:
• An activity is a step in a process where some work is
getting done
activity

• The transition takes place because the activity is

completed

Read a page Turn the page

19
 2. The activity diagram
• Elements of an activity diagram:

• A guard condition can be assigned to a transition to

restrict use of the transition

[get driving license]

Learn driving Drive the car

20
2. The activity diagram…
• Decisions

• Merge point

• Start and end

21
2. The activity diagram…

User fill in the

registration form

User selects submit User corrects

button input

No System shows error

Correct ?
message

User is registered Yes

22
 2. The activity diagram…
• UWE activity diagram elements:
• userAction : user’s action or response
• systemAction : system’s action
• displayAction : display action
• navigationAction : navigation
• displayPin : output
• interactionPin : input

23
2. The activity diagram…

<<displayAction>> name
{type=text}
registratinForm Email
{type=form} {type=email}

Password
{type=password}

<<userAction>> name <<systemAction>>

inputData
email saveData
{validated}
password

24
Summary
• System modeling
• Modeling Requirement
– use-case diagram
– activity diagram

25
• Use case diagrams are usually referred to as behavior diagrams
• used to describe a set of actions (use cases) that some system or systems
(subject) should or can perform in collaboration with one or more external
users of the system (actors)

26
• Activity diagram in UML is used to describe the dynamic aspects
of the system

• Activity diagram is basically a flowchart to represent the flow from

one activity to another activity

27
• Class diagram describes the attributes and operations of a class
and also the constraints imposed on the system.

28
• A sequence diagram simply depicts interaction between objects in
a sequential order i.e. the order in which these interactions take
place.

• Sequence diagrams describe how and in what order the objects in

a system function.

29
References
• Chapter 3, Kappel, G., Proll, B. Reich, S. &
Retschitzegger, W. (2006). Web Engineering,
Hoboken, NJ: Wiley & Sons
• Chapter 5, Sommerville, Software Engineering,
ISBN-10: 0-13-703515-2 , PEARSON

30