1. Requirements Modelling & Design for WebApps
Chapter 2
Requirements Modelling & Design for WebApps
Date: 12 September 2017

2. Outlines How much analysis is enough Requirement Modelling Input
Requirement Modelling Output
Interaction Model for WebApps
Information Model for WebApps
Functional Model for WebApps
Configuration for WebApps
WebApps Design

3. How much analysis is enough?
What is analysis?
Elements must considered in analysis such as:
User requirements
Input & output requirements
Hardware & software

4. Analysis modelling
Understand detail requirements that will allow you to satisfy user needs

5. Requirement Modelling Input
What is input?
Process
Input
Output

6. Requirement Modelling Input
Input Name : username
Type : varchar
Size : 20
Example:-
Username
Login Form
Password
Login
Reset
Fig. 1: Input Model

7. Requirement Modelling Input
Data type:
Char (0-255)
Varchar (0-255)
Text ( )
Decimal (Double stored as string)
Date (YYYY-MM-DD)

8. Requirement Modelling Output
Output model
Username
user1
Password
1234
Fig. 2: Ouput Model

9. Interaction Model for WebApps
User interact with the WebApps
Output/Diagrams
Use cases
Sequence diagram

10. Interaction Model for WebApps
Login
Withdraw
Money Transfer
Check Balance
Fig. 3:
User case diagram
(ATM System)

11. Interaction Model for WebApps
Fig. 4:
Sequence. Diagram

12. Information Model for WebApps
Content include text, graphics and images, and video and audio data
Output/Diagrams
Content Object
DFD

13. Information Model for WebApps
Content Object:
Customer
Attributes:
customerName
address
noTel
Fig. 5: A content object

14. Information Model for WebApps
Fig. 6:
Data Flow Diagram

15. Functional model for WebApps
Describes other processing functions that are independent of content but neccessary to the end user
Output/Diagram
STD
Activity Diagram

16. Functional model for WebApps
Fig. 7:
State Transition Diagram

17. Configuration for WebApps
Describe environment & insfrastructure in which the WebApps resides
Components:-
Hardware, operating system
Software
Internet, Browser
Security considerations

18. WebApps Design Interface design Content design Navigation design
Database Design

19. WebApps Design Interface Design: - Color - Position Content Design:
Font size
Font style
Font color
Navigation Design:
- Next page

20. WebApps Design Customer Booking Room customerName * customerID
customerTel
Booking
** customerID
** roomNo
Room
* roomNo
roomRate
roomType
Database design

21. WebApps Design: Good vs. Bad
Good Design
Bad Design
User friendly
Information overload
Standardized
Mystery meat navigation
Suitable color, font, etc
Superfluous animation
Page navigation