Web Application Design

1
Web Application Design
2
Web Application Design

• Data
• What data is available?
• How do we store it or how is it stored in the DB?
• Schema
• Data types
• Etc.
• Where is the data?

3
Web Application Design

• Define Use cases
• What are the use cases?
• What services are provided for each use case?
• Define generic and specific services
• Accomplish tasks of use cases
• Define flow through use cases
• Not pages, just flow of operations
• Also flow of data
• This stage may force changes in data

4
Web Application Design

• Organize flow through use cases into pages
• Be sensible, follow good examples
• Remember front controller design
• Access to pages should flow through front
  controllers
• Front controllers should
• Determine use
• Do any necessary filtering
• pass necessary arguments to view
• Design exception handling
• Part of normal flow

5
Web Application Design

• Look and feel
• Define a consistent look and feel
• Banners, contents, etc.
• All views
• Based on one view
• Include appropriate elements
• Using info from front controller

6
Web Application Design

• Design Data Access Objects
• Contain all database interaction
• Keep View and Controller as separate as possible
• Design functions that interact with controller
• View contains as little code as possible
• Function calls, etc.
• Keep code away from web designer

7
Design Document

• Data Definition
• Database schema
• Data description
• Use Cases
• Definition Description
• Controller Functionality and API
• Define interface to Data (Data Access Object)
• Define interface to Views
• View Data Flow
• Define necessary page elements
• Define data flow through pages
• Define AJAX elements
• Layout

8
Office Depot Use Cases
9
Control Flow
10
Data
11
Project

• Team Building Psychology Website
• Users take Personality Quizzes that are analyzed
  and then suggestions are made to team supervisors
  and users to improve team relationships, etc.

12
Data Definition

• Database Schema
• Quiz Answers
• uid, specializer, harmonizer, organizer, and
  analyzer
• Users
• uid, name, password, address, company, and
  whether or not this UID has administrative
  privileges.
• Analyses
• uid, analysis
• Describe each
• More detail
• Type,
• purpose,
• use, etc.

---------------------------------------------
----------------- Field Type
Null Key Default Extra
-------------------------------------------
------------------- id int(11)
NO PRI NULL auto_increment
username varchar(255) YES NULL
password varchar(255)
YES NULL name
varchar(255) YES NULL
address varchar(255) YES
NULL phone
varchar(255) YES NULL
company varchar(255) YES
NULL department
varchar(255) YES NULL
role varchar(255) YES
NULL --------------------
------------------------------------------
13
Use Cases

• Administrative Use Case
• Do Analysis
• List users that need analysis
• Record analysis
• Manage Users
• Add, Modify, Delete Users
• Registered User Case
• Take Quiz
• See resulting analysis (upon later login)
• See group members analysis if group admin
• Guest User
• Register

14
Controller Functionality API

• Data Access Object
• getAnalysisList
• getUsers
• updateUser
• recordAnalysis
• Front Controllers
• Administrator
• Assure login as admin
• User
• Assure login
• Next View
• State always contains userid, role, page id and
  link id

Define full calls parameters, etc.
15
View Data Flow
AJAX
Username Passwd LoginMessage
Login
Admin Menu
Logged In? No Yes
Admin Users Do Analysis
Menu
User Menu
UserRole ?
Take Quiz View Analysis
Home Page
Guest Menu
Register
About Us
Quiz1
Take Quiz View Analysis
Registration
Admin Users Do Analysis
Quiz2
Username Passwd Name, Address, Etc.
Session Info
Quiz3
UserID UserRole Page Link
Quiz1 Ans Quiz2 Ans Quiz3 Ans
16
Layout