Day1
-
Upload
madamewoolf -
Category
Education
-
view
285 -
download
4
description
Transcript of Day1
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 [email protected] M/W:
530-830pm Professor
Isaac Chu [email protected] 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