1. School of Computer Science
Fall Recitation Homework 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 .

3. Database Design Methodology
[N. Roussopoulos and R.T. Yeh]
description
impl.+test.
conc. mod.
req. anal.
code.
tests
top level I.F.D.
schema.
user’s man.
sys. anal.
task emul.
task + doc forms.
pseudo-code

4. Phase-I Phase-II description impl.+test. conc. mod. req. anal. code.
tests
top level I.F.D.
schema.
user’s man.
sys. anal.
task emul.
task + doc forms.
pseudo-code

5. Recitations Phase-1 Phase-2 Q&A 11/4 2:30pm-3:20pm DH 2122
11/10
11/11 2:30pm-3:20pm DH 2122
11/11 3:30pm-4:20pm DH 2105
11/18 2:30pm-3:20pm DH 2122
11/18 3:30pm-4:20pm DH 2105
11/19
Phase-1
Phase-1 due
Phase-2
Q&A
Phase-2 due
 Send additional questions to

6. Today’s Outline Homework 9 description Deliverables 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 description impl.+test. conc. mod. req. anal. code.
tests
top level I.F.D.
schema.
user’s man.
sys. anal.
task emul.
task + doc forms.
pseudo-code

8. Homework 9 CMUBook Tasks to implement
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 description impl.+test. conc. mod. req. anal. code.
tests
top level I.F.D.
schema.
user’s man.
sys. anal.
task emul.
task + doc forms.
pseudo-code

10. Top level information flow diagram
reg. form
T1-reg.
user rec.
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.
T2 - login ? ?
user rec. ?

12. Phase-I Phase-II description impl.+test. conc. mod. req. anal. code.
tests
top level I.F.D.
schema.
user’s man.
sys. anal.
task emul.
task + doc forms.
pseudo-code

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 D3: profile form Dx: user record
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 description impl.+test. conc. mod. req. anal. code.
tests
top level I.F.D.
schema.
user’s man.
sys. anal.
task emul.
task + doc forms.
pseudo-code

16. E-R diagram for CMUBook
passw
...
URL
login
?-2
owns
?-1
?-1
...
user
photo
How about friendships, photo tags, …?
?-1: Specify cardinalities
?-2: Think about weak/strong entities

17. Relational schema SQL DDL statements
user( login, passw, name, -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 description impl.+test. conc. mod. req. anal. code.
tests
top level I.F.D.
schema.
user’s man.
sys. anal.
task emul.
task + doc forms.
pseudo-code

19. Task emulation/pseudo-code
Task1: Registration
read login, password, name and
if ( login does not exist in ‘user’){
insert into user values ( :login, :password, :name, : );
} else{
print “error: login exists, choose another” }
should be valid
SQL queries

20. Phase-I Phase-II description impl.+test. conc. mod. req. anal. code.
tests
top level I.F.D.
schema.
user’s man.
sys. anal.
task emul.
task + doc forms.
pseudo-code

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 Architecture Multi-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 9: CMUBook 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 architecture Registration example –register.jsp1
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
register.jsp 5
JDBC insert succeeds 6
Html page with successful info

28. Better Software Design?
(Optional)
Better Software Design?
Design Pattern
Design Patterns: Elements of Reusable Object-Oriented Software, Gamma, Erich; Richard Helm, Ralph Johnson, and John Vlissides
Thinking in Patterns ( 0.9.zip)
Design Pattern for Web App:
MVC pattern (Model – View – Controller)
Basic idea: break software functionalities and interfaces
Tool: struts

29. (Optional)
MVC