CSE 136 - Lecture 1 (Part 1)

Enterprise-class Web Applications Design and implementation Large scale web-based applications Software web-architecture Presented by Isaac Chu

Prototype

Today's lecture

Administration Overview of this course Assignment (project-based) Enterprise Software Architecture Architectural Design Patterns & Principles Object-oriented Design Architectural Pattern UML .NET Overview

Administration

Assignment : one project Grading

One project (70%) Final exam (30%)

TA Melvin Go melvin@melrose27.com M/W:

530-830pm Professor

Isaac Chu ichu@cs.ucsd.edu Mobile office & by appointment on weekends

Group of 3

Course Overview 1

Day 1 Projects Architectural

Principles and Pattern, UML

Intro to .NET architecture

Day 2 Database Design Database Security Enterprise Database

Architecture

Course Overview 2

Day 3 Intro to C# language

(Java-like) Memory management

in C# Advanced: inheritance,

interfaces, polymorphism, generics, etc

Day 4 Data Access Layer (DAL) Unit Tests for DB/DAL Database due

Course Overview 3

Day 5 Business Logic

Layer Business Objects Design Patterns

Day 6 Service Layer BLL code security DAL layer + unit

tests due

Course Overview 4

Day 7 Presentation Layer ASP.NET MVC3 MVC Unit Test

Day 8 AJAX Presentation Layer

Security Business & service

layer + unit tests due

Course Overview 5

Day 9 More on MVC? Final Review

Day 10 Student project

presentation/demo (project due)

Assignment Options

Course Registration Register classes online

Library System Check-in, checkout books.

Room/board management system Tenants, available rooms.

Parking Management A, B, S parking, violations, payment received

Cable subscribers Customers subscribe to cable TV packages

E-commerce Category, products, purchases, fulfillments

From CSE 132A DB project Think of a “FLOW” of transactions/activities

Course Registration Project example

Allow administrators to manage courses ex: Add/update course descriptions ex: Add/update Course plan

Allow students to view courses offered Allow students to add courses

ex: Enforce Pre-req rule ex: Enforce class size

Allow students to drop classes ex: Enforce drop before deadline

These features would be enough for a group of 3-4

Architecture 1 – The CSA

Chief Software Architect

Control complexity Easy to use Easy to maintain Fault tolerant High performance Scalable Secured

Bill Gate started as theChief Software Architect

Architecture 2 – Information Architect

Chief Information Architect

Servers, networks, and applications System organization

& interaction What hardware and

OS to run on Cloud hosting Why do we care? Your web-app will ultimate

run on the server environment

Architecture 3 - many hats

Business Analyst Gather spec functional - behavior (input/output) Analyze the spec

Conflicts & confusion 136 : you define the spec

Technical lead Describing architecture Validation Integration Write proof-of-concept code (prototype) 136 : implement proof-of-concept code (prototype)

Design Principles and Patterns Principles - Do you have principles in your life Patterns - Your daily habits shaped by your principles Why we need Software Design Principles and

Patterns We have bad software

Inexperience Miscommunication (he said, she said) Forever-changing Specs

How to fix this Fix the human issue (miscommunication) Design Principles and Patterns Iterative process

Principle – rigid is fragile

DisplayGPA.aspx

public Page_Load(){

}

// Set the background colorthis.setBackground (Color.white );

// Create a button and add it to the applet. // Also, set the button's colors clear_button = new Button("Clear"); clear_ button.setForeground (Color.black ); clear_ button.setBackground (Color.lightGray );

this.add(clear_button);

// Create a menu of colors and add it to the applet. // Also set the menus's colors and add a label. color_choices = new Choice(); color_ choices.addItem("black"); color_ choices.addItem("red"); color_ choices.addItem("yellow"); color_ choices.addItem("green"); color_ choices.setForeground (Color.black ); color_ choices.setBackground(Color.lightGray );

this.add(new Label("Color: "));this.add(color_choices);

// If the Clear button was clicked on, handle it. if ( event.target == clear_button) { Graphics g = this.getGraphics(); Rectangle r = this.bounds();

g.setColor(this.getBackground ());g.fillRect(r.x , r.y , r.width , r.height );

return true; } // Otherwise if a color was chosen, handle that else if ( event.target == color_choices) { String colorname = (String) arg; if ( arg.equals("black")) current_color = Color.black ; else if ( arg.equals("red")) current_color = Color.red ; else if ( arg.equals("yellow")) current_color = Color.yellow ; else if ( arg.equals("green")) current_color = Color.green ; return true; } // Otherwise, let the superclass handle it. else return super.action(event, arg); // The pink oval

g.setColor(Color.pink );g.fillOval(10, 10, 330, 100);

// The red outline. java doesn't support wide lines, so we // try to simulate a 4-pixel wide line by drawing four ovals

g.setColor(Color.red );g.drawOval(10,10, 330, 100);g.drawOval(9, 9, 332, 102);g.drawOval(8, 8, 334, 104);g.drawOval(7, 7, 336, 106);

// The textg.setColor(Color.black );g.setFont (font);g.drawString (message, 40, 75);

Rigid code = fragile code // Set the background color

this.setBackground (Color.white );

// Create a button and add it to the applet. // Also, set the button's colors clear_button = new Button("Clear"); clear_ button.setForeground (Color.black ); clear_ button.setBackground (Color.lightGray );

this.add(clear_button);

// Create a menu of colors and add it to the applet. // Also set the menus's colors and add a label. color_choices = new Choice(); color_ choices.addItem("black"); color_ choices.addItem("red"); color_ choices.addItem("yellow"); color_ choices.addItem("green"); color_ choices.setForeground (Color.black ); color_ choices.setBackground(Color.lightGray );

this.add(new Label("Color: "));this.add(color_choices);

// If the Clear button was clicked on, handle it. if ( event.target == clear_button) { Graphics g = this.getGraphics(); Rectangle r = this.bounds();

g.setColor(this.getBackground ());g.fillRect(r.x , r.y , r.width , r.height );

return true;

setColor()

setGradient() Coloring.cs(GUI)

List< SqlParameter> p = new List<SqlParameter>();p.Add(new SqlParameter("@accountID", ID));p.Add(new SqlParameter("@searchText ", partialName));

if (! String.IsNullOrEmpty (sortCol))p.Add(new SqlParameter("@sortCol", sortCol));

if ( sortDir >= 0)p.Add(new SqlParameter("@sortDir", sortDir));

return GetList(SearchAccountSubaccountsByNameStoredProc ,p.ToArray ());

loop x times: for(int i=0;i<x;i++)within loop:System.out.println ("Please enter grade "+i);int gradeTemp =reader.nextInt ();gradeSum+=gradeTemp ;end loopint gpa=gradeSum/x;System.out.println ("GPA: "+gpa)

LoadStudentInfo()

LoadData.cs(Data Access)

CalculateGPA()Calculation.vb

(Business Logic)

Easy to maintain

Code-Reuse

CalculateGPA() may be usedby other parts of the program

In Enterprise Application Development GUI developers can start on

asp.net/HTML/CSS code without data Business Logic developers can start

designing and writing code for GPA calculations (A+, B-, P, I, etc)

Database Design can start data storage design

Each team can work independently without affecting other team.

Integration : Data Transfer Object

Principle – separation of concerns

Principle – dependency inversion

Dependency Inversion principle High-level modules should not depend on

low-level modules. Both should depend on abstractions (common interface)

Ex: Changing GPA calculation rule should not affect the web UI.

Ex: Changing database from MS SQL to Oracle should not affect your business rules.

Ex: Your web-app project uses an error-log module to log errors but does not depend on it.

Principle – dependency inversion

Web server

web-serviceclient

(Abstraction)

Abstraction

Business LogicServer

web-serviceserver

Dependency Inversion Principle

No DirectDependency

Database Server

Html/ajax

MS C#

Oracle

From Design Principle to OO Design

Object-Oriented Design - a design method to achieve the design principles: Single Responsibility Object Object Definition Object Interaction High cohesion and low coupling Open/closed Don’t repeat!

OO Design – single responsibility

Fit in your pocket? What do we do?

Break it apart Keep similar functions together

(hikers, office managers, handy-man)

class student_info { // 100 methods inside?? //name, id, courses taken, grades, mental condition, etc}Break it apart… by functionalities.

OO Design – objects

Goal : Interacting objectsEach object holds its own data & behaviorObject Data: properties of the class

Object Behavior : methods which contains the business logic

Objects

data

Behavior

This is an example of a state machine design inObject Oriented Design (more on this in lecture 4)

OO Design – interactions

Find pertinent objects first: student, staff, faculty, course, enrollment, etc.

Low Coupling: objects need to interact and communicate through interfaces

Code-reuse: user wrapper class

OO Design – high cohesion

Question: Student register for cse136, does thestudent meet all pre-requisites?

Answer: Must check the courses the student(1) has taken (passed) and (2) what classes he'scurrently taking

class PreReq{

}

ClassesTaken()

CoursesTaking()

Put all logic relatedto pre-requisites inthis class definition

High Cohesion

OO Design – low coupling

Find pertinent objects first: student, staff, faculty, course, enrollment, etc.

Object 1class Student{ string ID first, last;

}

Object 2class Course{ string department; string course_number;

}

Low Coupling: objects need to interact and communicate through interfaces

getCourses() thru interfaces(more on this on

lecture 3) getWaitListStudents()

Code-reuse: user wrapper class

Object 2B (thru composition or aggregation)class SpecialCourse{

}

more on lecture 4

lecture 1: start thinking design rather than coding

OO Design – open/closed

Open/Closed principle Open for extension but closed for modification. Ex: Open for extending a new feature to substitute an

equivalent course with another for graduation purposes. Enrollment.SubstituteCourse(student_id, original_course_id,

sub_course_id) Achieve this through inheritance and override methods. No modification to the original class Enrollment definition.

Experience : more code you modify, the more bugs you can create. Close for modification but open for extension

OO Design – don’t repeat

Duplicated logic in two classes. Create a new class definition

Same hard-coded values in your code Use constants or put it in configuration file

“Switch” statements If (student_type == “undergrad”) getUndergradCourses()Else if (student_type == “graduate”) getGradCourses()Else if (student_type == “extension”) getExtCourses()

Consider using polymorphism (lecture 3)

Transition to Design Patterns From basic principles to software

design patterns (lecture 5) Why office/cubes at work all look similar?

Software Design Patterns Common good designs in software

Exercise is a good pattern in your lifestyle Anti-patterns : common bad/no designs

in software Heavy drinking is an anti-pattern

More on Design Pattern in lecture 5

Transition to Architectural pattern

From basic principles to software architectural patterns

Architectural Pattern - Early in the course of design Performance, security, maintenance,

extensibility, and testability.

Architectural Patterns - layering Layering : Presentation, Service, Business Logic,

Data Access, and Database. Re-usability Maintainability

ex: One place to change the GPA calculation code Independent development Physical separation - improves performance

and security Keeping the business logic on one computer &

database on another (physical separation for security)

Architectural Patterns - layering

multi-layer architecture

Database

ASP.NET MVCModel View Controller

WCFwindows communication foundation

DesignPatterns

ADO.NET

SQL Server

Data TransferObject (xml orbinary data)

Data TransferObject (Object

RelationalMapping)

136 will implementthis technology

Architectural Patterns - testing Design for testing at each layer (cse

136) Ex: unit testing business

rules/validations on enrollment in business layer

Ex: enrollment system: create 1000s students and 100 courses: test database/table insert/update/delete

Architectural Patterns - security Security at every layer Integrating security at all layers in software

development. Define who has access to what objects/methods. Roles & permissions

Separating enrollment servers from GPA server physically (or firewall).

Define Thread Model Malicious student Poorly trained staff Logging & Tracing

Review questions

When are the projects due? Difference between CSA and CIA? Difference between principals and

patterns? What are the design principals? What are the OO design principals and how

do they achieve the overall design principals?

Difference between OO design principals and architectural patterns?

Break time

Get into a group of Three Exchange phone/email Decide on a project

CSE 136 - Lecture 1 (Part 2)

UML .NET overview

UML – Unified Modeling Language

136 will use the following types of UML Usage Case:

Show users and system interaction Activity Diagram:

To show the “flow” or “process” of user interaction Domain Entity diagram:

Define high level entities and relationship Sequence Diagram:

To show the detailed “flow” or “process” between entities

Class diagram: Communicate with developers of your design (more

details in lecture 5)

Student

Drop Class

View MyClasses

Add Class

View ClassSchedule

<<system>>Registrar

Edit profile

UML – Usage Diagram

UML - Activity Diagram

Any process begins with control residing in the initial node

Activity nodes are states where specified work is processed

The process terminates when control reaches a final node

UML - Activity Diagram 2

UML - Activity Diagram 3

UML - Activity Diagram 4

Example Activities for UML Student dropping a class for current quarter Staff requesting a transcript to check for

graduation status Professor updating a course pre-requisites

student enrollment

schedule instructor

courses staff

UML – Domain Model Diagram

More examples on day 5

UML - Sequence Diagram

Lead systems engineerto define a flow/process

UML - Class Diagram

Class Notation and example

A class is a descriptor for aset of objects that sharesome attributes and/ oroperations.

Notional Variations

Emphasizing Operations

Emphasizing Attributes

Emphasizing Class Object

For developersTo understandOO design

UML - Class Diagram

Object Relationships

Association Car is associated with a driver

Generalization Sedan is a type of car

AggregationCars are a part of the carpool. Both cars and carpoolcan co-exists

Composition Car has a frame. Frame is partof a car. Life time of the frameis the lifetime of the car

UML - Class diagram - Composition

has a (composition)

When you destroy a car, the engine is destroyed along with it.

Car car1 = new Car();...car1 = null; // Engine is out of memory as well

UML - Class Diagram - Aggregation

pointer to the actual object

person = null; // address still exists in memory

address = null; // address is now destroyed

UML - Class Diagram - Generalization

Manager is an employee Engineer is an employee Technician is (inherited from) an employee Secretary is (inherited from) an employee

UML – Rule of thumb

UML Rule of thumb You don't need UML for everything Keep UML in one page Keep UML clear, not a jumbled mess

.NET Overview 1 - CLR

Memory management Code safety verification Code execution Garbage collection JIT Compiler

.NET Overview 2 - Programming Tools

The Visual Studio integrated development environment .NET-compliant compilers (e.g., C#, VB, and managed

C++) Debugger Server-side improvements, such as ASP.NET/MVC

.NET Overview 3 - Base Class Library

General base classes Provide you with an extremely powerful set of tools for a wide range

of programming tasks, such as string manipulation, security, and encryption

Windows Forms classes: For building Windows GUI applications ASP.NET classes: For building web-based applications ADO.NET classes: For database manipulation

.NET Overview 4 - Compiler

Visual Studio

2010 IDE

.NET Overview 5 - CTS

A rich set of intrinsic types, with fixed, specific characteristics for each type

string, int, double, bool, etc

all types are derived from a common base class—called object.

More on lecture 3

.NET Overview 6 - CLS

The Common Language Specification

Specifies the rules, properties, and behaviors of a .NET-compliant programming language. The topics include data types, class construction, and parameter passing

Review questions

What are the five UML diagrams 136 are focusing on?

What is the difference between composition and aggregation?

What is CLR? What is BCL? What is CTS?

Today's assignment

Due Day 2 Create specification for what features you will implement for the

demo. Create one ACTIVITY UML diagram for your project

Ex: What is the process for staff to create a course plan for next quarter? What is the detail process of a student register for classes?

Due Day 3: Setup your IDE Download & install VS 2010 + SP1 & create the layer projects Download & install MVC 3.0 Install SQL 2008 Express & SP & Management Studio & create a

simple database "cse136" Setup a simple .aspx web page in VS 2010 Create a simple table in SQL 2008 Express (or Dev edition) Show that you can retrieve simple data from SQL and display on

webpage (search Google for example)

References

.NET : Architecting Applications for the Enterprise

UML 2.0 in a Nutshell