Leman Akoglu11/4/2009

15-415 Fall 2009 Recitation

Homework 9

Building A Web Application Phase-I

School of Computer Science

HW9 OutlineBuilding a simple Web application

(CMUBook) using JSP2 phasesPhase I : design and documentation

due 11/10 next Tue!hard copy in class

Phase II : implementationdue 11/19 both hard copy in class and via email.

description

req. anal.

top level I.F.D.

sys. anal.

conc. mod. impl.+test.

task + doc forms.

schema.code.

task emul.

tests

user’s man.

pseudo-code

Database Design Methodology [N. Roussopoulos and R.T. Yeh]

description

req. anal.

top level I.F.D.

sys. anal.

conc. mod. impl.+test.

task + doc forms.

schema.code.

task emul.

tests

user’s man.

pseudo-code

Phase-I Phase-II

Recitations11/4 2:30pm-3:20pm DH 212211/4 3:30pm-4:20pm DH 2105 11/1011/11 2:30pm-3:20pm DH 212211/11 3:30pm-4:20pm DH 2105

11/18 2:30pm-3:20pm DH 212211/18 3:30pm-4:20pm DH 2105 11/19

Phase-1

Phase-2

Q&A

Send additional questions to lakoglu@cs.cmu.edu

Phase-1 due

Phase-2 due

Today’s OutlineHomework 9 description

Data requirementsFunctionality requirements

DeliverablesTop-level Information Flow Diagrams

(IFDs)Document formsEntities & RelationsSchema (in BCNF or 3NF)

description

req. anal.

top level I.F.D.

sys. anal.

conc. mod. impl.+test.

task + doc forms.

schema.code.

task emul.

tests

user’s man.

pseudo-code

Phase-I Phase-II

Homework 9 CMUBookA mini web application like FacebookUsers could upload/tag photos, add friends,

etc.

Tasks to implement1. Registration2. Login/Logout3. Photo Upload4. Photo Browsing5. Photo Tagging6. Profile Review7. Search by User Name8. Friendship Management9. Reporting

description

req. anal.

top level I.F.D.

sys. anal.

conc. mod. impl.+test.

task + doc forms.

schema.code.

task emul.

tests

user’s man.

pseudo-code

Phase-I Phase-II

reg. form

T1-reg.

user rec.

Top level information flow diagram

System boundary

tasks

internal doc.s (db tables)

external doc.s(web forms)

reg. form

More on top level diagram

login form

T2 - login

?

T1-reg.

user rec.

?

?

profile form

description

req. anal.

top level I.F.D.

sys. anal.

conc. mod. impl.+test.

task + doc forms.

schema.code.

task emul.

tests

user’s man.

pseudo-code

Phase-I Phase-II

Document + Task formsTask 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• …

internal

external

Document formsD1: registration

formlogin namepasswordname…

D3: profile form• name?List-of:

photo-id (URL) ?friend-id (login name) ?…

Dx: user recordlogin namepasswordname…

description

req. anal.

top level I.F.D.

sys. anal.

conc. mod. impl.+test.

task + doc forms.

schema.code.

task emul.

tests

user’s man.

pseudo-code

Phase-I Phase-II

E-R diagram for CMUBook

user photo

login emailURL...

...owns

?-1 ?-1

passw

?-2

How about friendships, photo tags, …?

o ?-1: Specify cardinalitieso ?-2: Think about weak/strong entities

Relational schemauser( login, passw, name, email-add.) photo( URL, … ) ?….

SQL DDL statementscreate table user (login char(20), passw

char (20) NOT NULL (?), … );create table photo (URL char(200), … );

...

description

req. anal.

top level I.F.D.

sys. anal.

conc. mod. impl.+test.

task + doc forms.

schema.code.

task emul.

tests

user’s man.

pseudo-code

Phase-I Phase-II

Task emulation/pseudo-code

Task1: Registration read login, password, name and emailif ( 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

description

req. anal.

top level I.F.D.

sys. anal.

conc. mod. impl.+test.

task + doc forms.

schema.code.

task emul.

tests

user’s man.

pseudo-code

Phase-I Phase-II

Phase IIYou will develop

JSP pages that handle user interactionsProcessing logic written in Java classManipulating data in database, connect from

JSP to database using JDBC

Outline of the next recitationSchema outline

A Typical Web Application ArchitectureCMUBook architecture

Brief introduction to JSPJSP mini demo register.jspSession and cookie management login.jspExceptions

MVC (Model-View-Controller) pattern (optional) Better Software Design

Users

Web app

(JSP, ASP, PHP)

Apache, Tomcat,

Windows IIS

Web Server

Java Virtual Machine

Web app backend

component

Backend Server

Database

Server

Client

Web Application ArchitectureMulti-tier architecture

http e.g. RMI

JDBC

ODBC

Homework 9:CMUBook architecture

Tomcat 5.5

CMUBook

JSP, Java

Web Servernewcastle.db.cs.cmu.edu

PostgreSQL

Database Servernewcastle.db.cs.cmu.e

du

hw9 database

Client

Browser

User

http

JDBC

CMUBook architectureRegistration example –register.jsp

Tomcat 5.5

CMUBook

JSP, Java

Web Servernewcastle.db.cs.cmu.edu

PostgreSQL

Database Server

newcastle.db.cs.cmu.edu

hw9 database

Client

Browser

User

http://newcastle.db.cs.cmu.edu:8080/lakoglu415/register.jsp

register.jsp

html page with input FORM

Submit FORM with login, name, password and email

JDBC exec. queryjava.sqlStatement.executeUpdate()

JDBC insert succeeds

Html page with successful info

1

2

3

4

5

6

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 (http://www.mindviewinc.com/downloads/TIPatterns-0.9.zip)

Design Pattern for Web App:MVC pattern (Model – View – Controller)Basic idea: break software functionalities and

interfacesTool: struts

(Optional)

MVC

(Optional)