designing web applications. client server architectures design patterns model 2 web applications
TRANSCRIPT
![Page 1: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/1.jpg)
Designing Web Applications
![Page 2: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/2.jpg)
Designing Web Applications
• client server architectures
• design patterns
• model 2 web applications
![Page 3: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/3.jpg)
client-server systems
• network of machines, each designated as a client or server
• not exclusive to intranet systems– but large web sites now the main examples– account here is web and eCommerce-biased
• different levels of complexity exist– related to more sophisticated functionality
• peer-to-peer network– any machine has client and server roles
![Page 4: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/4.jpg)
client-server systems
• client– active (master)– sends requests– awaits response
• server– passive (slave)– waits for requests– serves requests and sends a response
![Page 5: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/5.jpg)
thin client vs fat client
• thin client– function is mainly presentational
• e.g. standard browser functionality
– all significant processing done by server– client-server communication is frequent
• fat client– significant processing on client– e.g. Java applet, Flash, JavaScript– less communication required, less server load
![Page 6: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/6.jpg)
2-tier client-server architecture
• client (browser)– http request– mainly for presentation of information– serving mainly static (D)HTML pages
• server (simple web server)– http response– web-server processing http– perhaps SSI, simple CGI– earliest and low-end web-sites
![Page 7: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/7.jpg)
3-tier client-server architecture
• 3rd tier is a database layer– data persists beyond request and response
• server layer– expanded functionality
• database connectivity• user authentication and sessions• perhaps multi-threading
• client layer (web browser)– forms interface to interact with data
![Page 8: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/8.jpg)
a typical 3-tier architecture
database/file system
webserver
andprograms
webbrowser
presentation tier logic tier data tier
![Page 9: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/9.jpg)
multi-tier architecture• additional business logic layer(s)• middleware
– preprocessing and error handling– sophisticated transaction management
• multiple middle-ware servers– server farms linking to database layer
• web layer– standard web server
• JSP/Servelets | ASP.NET | ColdFusion |PHP
![Page 10: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/10.jpg)
web applications
• Applications delivered over the web!
• Many server side components– N-tier architecture
• Very wide range of functionality– web mail– online retail sales and auction sites– wikis, discussion boards, weblogs– multi-player online role-playing games, etc…
![Page 11: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/11.jpg)
software components of a web app
• web server– configuration files
• general processor components– e.g. PHP, ASP processor, XSLT processor
• application-specific software– servelets– scripts
![Page 12: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/12.jpg)
data components of a web app
• databases– possibly distributed or mirrored
• session information– stateful servers retain session information– may persist in a database
• global information– shared by all or many web app processes– e.g. number of hits on the site, user profiles
![Page 13: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/13.jpg)
file components of a web app
• web pages– html files, stylesheets– script files, applets– images
• dynamically generated pages– templates, e.g. PHP, ASP pages– xml files
• web app architecture– structure definition and global data files
![Page 14: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/14.jpg)
design problems
• construction and testing– how do we build a web application?– what technology should we choose?
• re-use– can we use standard components?
• scalability– how will our web application cope with
• large numbers of requests?• large volumes of data exchanged?
![Page 15: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/15.jpg)
design problems
• security– how do we protect against attack?
• viruses• malicious data access• denial of service
– different data views• user types• individual accounts• data protection
![Page 16: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/16.jpg)
design patterns
• a design pattern is a general solution to a common software design problem
• provides a development template
• OO design patterns:– relationships and interactions between objects
• not a finished design– the pattern must be adapted to the application– cannot simply translate into code
![Page 17: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/17.jpg)
design patterns
• originally developed for architecture– Christopher Alexander
• ideas were adapted to OO Design– Beck and Cunningham, 1987– Design Patterns: elements of Re-useable
Object-oriented software, 1994• Reprinted and analysed many times
• now widely-used in software engineering
![Page 18: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/18.jpg)
The Model-View-Controller Pattern
• very widely used pattern
• allows separation of development effort
• model– contains data and system state
• view– presents data and system state
• controller– handles events affecting model or view
![Page 19: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/19.jpg)
model-view-controller
• model knows little about the view– simply signals changes (alerts listeners)
• view understands the model interface– uses model methods to get update data
• controller knows model and view interfaces– updates model in response to events– updates view in response to events or changes
in the model
![Page 20: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/20.jpg)
model-view-controller
model
view controller
event
event is passed to the controller
controller updates model and/or view
controller updates model and/or view
view queries model
model signals changes
![Page 21: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/21.jpg)
example
• design and build a computer Monopoly game
• model– ???
• view– ???
• controller– ???
![Page 22: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/22.jpg)
Monopoly model
• game state– board data
• properties• cards (chance and community chest)
– player data• money and properties owned, token, location
– rules• pay rent• build houses and hotels• Go to Jail
![Page 23: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/23.jpg)
Monopoly View
• Representation of game state
• Various views possible
• Simple text– List of players, positions, properties owned,…
• Graphic presentation– Image of Monopoly Board– Visual positioning of players– Visualisation of money, properties owned,…
![Page 24: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/24.jpg)
Monopoly view
![Page 25: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/25.jpg)
Monopoly controllerstart game
select next player
player move
end player turn
playerbankrupt?
N
end game
gamewon?
Y
Y
N
remove player
updates tomodel and view
![Page 26: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/26.jpg)
advantages of M-V-C
• clarity of design– model methods give an API for data and state– eases the design of view and controller
• efficient modularity– any of the components can be easily replaced
• multiple views– many views can be developed as appropriate– each uses the same API for the model
![Page 27: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/27.jpg)
advantages of M-V-C
• easier to construct and maintain– simple (text-based) views while constructing– more views and controllers can be added– stable interfaces ease development
• distributable– natural fit with a distributed environment
• powerful user interfaces– controller supports “macro-like” interaction
with the model API
![Page 28: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/28.jpg)
developing a M-V-C app
• build the model– public methods become the interface for views and
controller– build simple views to test the model
• build the view(s)– use simple controllers to test view and model
• build the controller– implement handling of all events
• maintain– model remains fairly stable, views and controller may
become more elaborate
![Page 29: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/29.jpg)
M-V-C for web applications
![Page 30: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/30.jpg)
Model for Web Applications
• model consists of data and system state
• database tables– persistent data
• session information– current system state data
• business logic (eCommerce)– rules governing the transaction
![Page 31: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/31.jpg)
View for web applications
• view gives a presentation of the model
• client-side presentation in a browser window– (D)HTML– CSS stylesheets– server-side templates
• administrative information– server output logs
![Page 32: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/32.jpg)
Controller for web applications
• controller handles events
• user-generated events– client-side scripting– http request processing– redirection– preprocessing
• system maintenance– web application management
![Page 33: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/33.jpg)
M-V-C Example
PHP/CGI
WebServer
WebBrowser
presentation request processing program logic
controllerview model
two-tier client-server architecture
![Page 34: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/34.jpg)
M-V-C Example
JSP/ASP/CF
WebServer
WebBrowser
entity
entity
database
view
controller
view/controller model
model
multi-tier client server architecture
![Page 35: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/35.jpg)
development of absence monitoring web app
• model data– student ids and names– number of absences
• model API– list names– list names and absences– update absences
• implement as a relational database
![Page 36: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/36.jpg)
development of absence monitoring web app
• views– attendance register– list of absences– add a student– delete a student
• implemented in a browser– DHTML interface– pages dynamically generated from model
![Page 37: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/37.jpg)
development of absence monitoring web app
• controller– handle requests for views
• generate correct page from the database
– update the model• translate user action into a database update
– update the views• refresh browser when view changes
![Page 38: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/38.jpg)
build the model
• design data structure• implement tables• create SQL queries
– support all required functionality
• test queries against sample data– this is a simple view
![Page 39: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/39.jpg)
build the view
• develop server side scripts to query the database– SQL already tested is
the model API
• design web pages and embed the scripts– view now updates
from the model
![Page 40: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/40.jpg)
build the controller
• add client side scripts– JavaScript– HTML forms– input validation
• add navigation functionality– frames– layers
• update confirmation pages
![Page 41: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/41.jpg)
web application frameworks
![Page 42: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/42.jpg)
web application frameworks
• technologies designed to implement web apps in M-V-C– model 2 architecture
• provide standard re-useable components for model, view and controller
• greatly ease the design of large sophisticated web apps
• significant learning curve
![Page 43: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/43.jpg)
web application frameworks
• typically xml configuration files “glue” components into an application
• implement standard web concepts– interface features (forms)– request and response objects– sessions– database interactions
• many frameworks exist
![Page 44: Designing Web Applications. client server architectures design patterns model 2 web applications](https://reader036.vdocuments.site/reader036/viewer/2022062619/5515e5c355034638038b4e26/html5/thumbnails/44.jpg)
web application frameworks
• Many frameworks are being developed…– JavaServer Faces, Struts, Webwork2– WebObjects (.NET specific)– Model Glue (ColdFusion specific)– Velocity, Fusebox, Mach II, Maypole, Catalyst,
Tapestry, ZNF, Phrame, Cocoon, Ruby on Rails, …
• Most, but not all, are based around M-V-C