Leman%20Akoglu - PowerPoint PPT Presentation

Title: Leman%20Akoglu


1
15-415 Fall 2009 RecitationHomework 9
Building A Web Application Phase-I

• Leman Akoglu
• 11/4/2009

2
HW9 Outline

• Building a simple Web application (CMUBook) using
  JSP
• 2 phases
• Phase I design and documentation
• due 11/10 ? next Tue!
• hard copy in class
• Phase II implementation
• due 11/19
• both hard copy in class and via email.

3
Database Design Methodology
N. Roussopoulos and R.T. Yeh
4
Phase-I
Phase-II
5
Recitations

• 11/4 230pm-320pm DH 2122
• 11/4 330pm-420pm DH 2105
• 11/10
• 11/11 230pm-320pm DH 2122
• 11/11 330pm-420pm DH 2105
• 11/18 230pm-320pm DH 2122
• 11/18 330pm-420pm DH 2105
• 11/19

Phase-1
Phase-1 due
Phase-2
QA
Phase-2 due
? Send additional questions to lakoglu_at_cs.cmu.edu
6
Todays Outline

• Homework 9 description
• Data requirements
• Functionality requirements
• Deliverables
• Top-level Information Flow Diagrams (IFDs)
• Document forms
• Entities Relations
• Schema (in BCNF or 3NF)

7
Phase-I
Phase-II
8
Homework 9 CMUBook

• A mini web application like Facebook
• Users could upload/tag photos, add friends, etc.
• Tasks to implement
• Registration
• Login/Logout
• Photo Upload
• Photo Browsing
• Photo Tagging
• Profile Review
• Search by User Name
• Friendship Management
• Reporting

9
Phase-I
Phase-II
10
Top level information flow diagram
external doc.s (web forms)
tasks
internal doc.s (db tables)
System boundary
11
More on top level diagram
reg. form
login form
profile form
T1-reg.
?
?
?
user rec.
12
Phase-I
Phase-II
13
Document Task forms

• Task forms and task list
• not required for this homework
• Document forms and document list

• D1 registration form
• D2 login form
• D3 profile form
• Dx user record

external
internal
14
Document forms

• D1 registration form
• login name
• password
• name

• D3 profile form
• name?
• List-of
• photo-id (URL) ?
• friend-id (login name) ?

• Dx user record
• login name
• password
• name

15
Phase-I
Phase-II
16
E-R diagram for CMUBook
...
?-2
?-1
?-1
...
user
photo

• How about friendships, photo tags, ?
• ?-1 Specify cardinalities
• ?-2 Think about weak/strong entities

17
Relational schema

• user( login, passw, name, email-add.)
• photo( URL, ) ?
• .

SQL DDL statements
create table user (login char(20), passw char
(20) NOT NULL (?), ) create table photo (URL
char(200), ) ...
18
Phase-I
Phase-II
19
Task emulation/pseudo-code

• Task1 Registration
• read login, password, name and email
• if ( login does not exist in user)
• insert into user values ( login, password,
  name, email)
• else
• print error login exists, choose another

should be valid SQL queries
20
Phase-I
Phase-II
21
Phase II

• You will develop
• JSP pages that handle user interactions
• Processing logic written in Java class
• Manipulating data in database, connect from JSP
  to database using JDBC

22
Outline of the next recitation

• Schema outline
• A Typical Web Application Architecture
• CMUBook architecture
• Brief introduction to JSP
• JSP mini demo ? register.jsp
• Session and cookie management ? login.jsp
• Exceptions
• MVC (Model-View-Controller) pattern (optional)
• Better Software Design

23
Web Application ArchitectureMulti-tier
architecture
Web Server
Apache, Tomcat, Windows IIS
Client
Backend Server
http
e.g. RMI
Java Virtual Machine
Web app (JSP, ASP, PHP)
Users
Web app backend component
JDBC ODBC
Database Server
24
Homework 9CMUBook architecture
Web Server newcastle.db.cs.cmu.edu
Client Browser
PostgreSQL Database Server newcastle.db.cs.cmu.edu
Tomcat 5.5
http
User
hw9 database
JDBC
CMUBook JSP, Java
25
CMUBook architectureRegistration example
register.jsp
http//newcastle.db.cs.cmu.edu8080/lakoglu415/reg
ister.jsp
1
Web Server newcastle.db.cs.cmu.edu
Client Browser
PostgreSQL Database Server newcastle.db.cs.cmu.edu
Tomcat 5.5
4
2
JDBC exec. query java.sqlStatement.executeUpdate()
html page with input FORM
User
hw9 database
CMUBook JSP, Java
3
Submit FORM with login, name, password and email
register.jsp
5
JDBC insert succeeds
6
Html page with successful info
26
(No Transcript)
27
(No Transcript)
28
Better Software Design?
(Optional)

• Design Pattern
• Design Patterns Elements of Reusable
  Object-Oriented Software, Gamma, Erich Richard
  Helm, Ralph Johnson, and John Vlissides
• Thinking in Patterns (http//www.mindviewinc.co
  m/downloads/TIPatterns-0.9.zip)
• Design Pattern for Web App
• MVC pattern (Model View Controller)
• Basic idea break software functionalities and
  interfaces
• Tool struts

29
MVC
(Optional)