School of Computer Science 15-415 Fall 2009 Recitation Homework 9 Building A Web Application Phase-I Leman Akoglu 11/4/2009

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.

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

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

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 lakoglu@cs.cmu.edu

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)

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

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

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

Top level information flow diagram reg. form T1-reg. user rec. external doc.s (web forms) tasks internal doc.s (db tables) System boundary

More on top level diagram reg. form login form profile form T1-reg. T2 - login ? ? user rec. ?

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

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

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 …

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

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

Relational schema SQL DDL statements 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), … ); ...

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

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

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

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

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

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

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

CMUBook architecture Registration example –register.jsp 1 http://newcastle.db.cs.cmu.edu:8080/lakoglu415/register.jsp 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

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 (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 interfaces Tool: struts

(Optional) MVC