SlideShare a Scribd company logo
Lecture 17 
Presentation Layer Design
Reading 
 Patterns 
– Model View Controller 
– Page Controller 
– Front Controller 
– Template View 
– Application Controller 
2
Agenda 
 The Web Layer 
– Model-View-Controller 
 Input controller patterns 
– Page Controller 
– Front Controller 
– Application Controller 
 View patterns 
– Template View 
3
Play! Framework 
 We will be using Play! framework 
– Based on MVC
The Web Layer 
5
The Challenge 
 How to design web applications? 
 How to separate user interface from the 
business logic? 
– User Interface is an HTML string 
 How to provide OO design? 
– Code reuse 
 How can we abstract underlying system 
– For example data base 
6
Presentation and Web Layers 
 Embedded and Desktop clients 
 Web Browser is a different type of client 
7
Web Applications 
8
The Three Layers 
 Presentation 
– User’s interface to the system 
– User can be another system 
– Accepts input, displays views 
 Domain 
– The Application of the system 
– The “Business logic” 
– Has the tendency to creep into presentation and data 
source 
 Data Source 
– Connection to the database 
9
Web Layer Design 
 How to design Web Applications 
 Two approaches 
– Script based – Code using HTML 
– Server Page based – HTML page with code 
10 
Web Browser Web 
Server 
HTML/HTTP 
Web Application 
? ? 
DB 
Server
Web Applications 
 Client is a web Browser 
– All interface is HTML with graphics 
 Server is configured to map URLs to 
applications 
– The web application can be script or page 
11
Script Based 
 Useful when the logic and the flow is important 
– Request is not easily mapped to a single page 
 Examples 
– CGI, ISAPI, Java Servlets 
12
Server Page Based 
 Useful where there are lots of pages 
– Flow is not as important 
– Each request can easily be mapped to a page 
 Examples 
– PHP, JSP, ASP 
13
Web Design 
 Web Layer must handle the request and the 
response 
14
API Based 
 User Interface is HTML5 or Native App 
– Server side is just API 
– Information format in XML or Json 
HTML5 
JavaScript 
Web 
Server 
DB 
Controllers 
Service Layer 
Domain Model 
Data Source Layer 
Native App 
HTTP Request 
Json/XML 
HTTP Request 
Json/XML
Model-View-Controller 
16
Model View Controller 
Splits user interface interactions 
into three distinct roles 
 Separates the user interface from the logic 
– Originally from 70s Smalltalk 
– Similar to Doc/View in MFC 
 MVC considers three roles 
– Clear separations of concerns 
– Model: The domain layer handles state 
– View: Presentation logic 
– Controller: Connects the model and the view 
17
Model View Controller 
 How It Works 
– Model: The domain layer handles state 
– View: Presentation logic 
– Controller: Connects the model and the view 
18
Model View Controller 
 Benefits 
– Separation of the view from the domain logic in the 
model 
– This is key in any presentation design 
 Importance of MVC 
– View and model are different concerns 
– View can change, usually the model is the same 
– Easy to test the model without the view 
 Coupling Dependencies 
– View depends on the model, but the model is not 
depending on the view 19
Model View Controller 
 When to Use It 
– The value is in the separation of concern 
– Separating the model and the view 
– As this separation is so fundamental in any software 
design, any non-trivial system should use MVC in 
some form 
20
MVC in Web Design 
 Web Applications are request/response based 
 Input Controller 
– Takes the request 
– Examines the input parameters 
– Calls the Model 
– Decides how to 
handle the response 
– Sends the control 
to the View for 
rendering 
21
MVC in Web Design 
22
MVC Patterns 
 Input controller patterns 
– Page Controller 
– Front Controller 
– Application Controller 
 View patterns 
– Template View 
– Transform View – Transforms view to some format 
– Two Step View – Logical Screen and final UI 
23
QUIZ 
What design principle is the most important in Model View 
Controller? 
A) Separation of different concerns 
B) All request go the same place 
C) Easy to test different components 
D) Easy to change the view
QUIZ 
What design principle is the most important in Model View 
Controller? 
A) Separation of different concerns 
B) All request go the same place 
C) Easy to test different components 
D) Easy to change the view 
✔
MVC Patterns 
 Input controller patterns 
– Page Controller 
– Front Controller 
– Application Controller 
 View patterns 
– Template View 
– Transform View – Transforms view to some format 
– Two Step View – Logical Screen and final UI 
26
Page Controller 
An object that handles a request for a specific 
page or action on a Web site 
 One input controller for each logical page of the 
web site 
27
Page Controller 
 How It Works 
– One Page Controller for each logical page 
 Page controller as Script 
– Servlet or CGI program 
– Useful for web application that need some logic and 
data 
 Page controller as a server page 
– ASP, PHP, JSP 
– Combines the Page Controller and Template View 
– Helpers used to get data from the model 
– Works fine if the logic is simple or none 
28
Page Controller pattern 
29
Page Controller 
 The basic responsibility of a Page Controller are 
– Decode the URL and extract any form data to figure 
out all data for the action 
– Create and invoke any model objects to process the 
data. 
• All relevant data from the HTML request should be passed to 
the model so that the mode objects don’t need any 
connection to the HTML request 
– Determine which view should display the result page 
and forward the information to it 
30
Page Controller 
 When to Use It 
– Works well in a site where the controller logic is 
simple 
– When the controller logic is simple the Front 
Controller adds too much overhead 
 Examples 
– Simple Display with a Servlet Controller and a JSP 
View 
– Using a JSP as a Handler 
– Page Handler with Code Behind 
31
Front Controller 
A controller that handles all requests for 
a web site 
 One controller handles all requests 
– The handler dispatches to command objects for 
behaviour particular to the request 
32
Front Controller 
 How It Works 
– Takes care of common tasks, for example security, 
authentication, i18n, and so on 
– Built on Commands 
– Usually implemented as script, not page 
 Two phases 
– Request handling – Web Handler 
– Command handling – Command classes 
33
Front Controller 
 Request handling – Web Handler 
– Any common logic 
– Authentication, Web Security etc. 
– Changes in one place apply for the whole site 
– Handler creates the requested command 
 Command handling – Command classes 
– Specific functionality 
– Command classes extend abstract classes and 
implements process method 
– Can be separated form the web infrastructure 
34
Front Controller 
 Handler takes the request 
– Examines the URL 
– Creates command and calls the command 
35
Front Controller 
 Web handler can have commands statically or 
dynamically 
– Static case has the advantage of explicit logic and 
compile time error checking 
– Dynamic case has some property file to map 
request URL to command classes 
– Dynamic case has more flexibility to add new 
commands 
36
Front Controller 
 When to Use It 
– Front controller is more complicated design than the 
Page Controller 
– Only one controller needs to be configured in the web 
server, the handler takes care of the dispatching 
– With dynamic commands, you can easily add new 
commands 
– Single point of entry allowing centralized logic 
37
Application Controller 
A centralized point for handling screen 
navigation and the flow of an application 
 Applications that have significant amount of logic 
about the screens to use at different points 
– For example Wizard style applications 
– Screens depend on the state 
38
Application Controller 
 How it works 
– Two responsibilities: Decide which domain logic to 
use and deciding the view 
39
Application Controller 
 Can be used with Command pattern 
– Commands execute the domain logic 
– Not easy to determine what is domain logic and what 
is the application logic 
 State machine 
– The Controller must maintain a state 
 When to Use It 
– If the flow and application logic is complex and simple 
controllers need to share code 
40
MVC Patterns 
 Input controller patterns 
– Page Controller 
– Front Controller 
– Application Controller 
 View patterns 
– Template View 
– Transform View – Transforms view to some format 
– Two Step View – Logical Screen and final UI 
41
QUIZ 
We are designing an application for corporate tax reduction 
which have multiple of screens and various conditions and 
exceptions. What controller pattern might be useful? 
A) Input Controller 
B) Page Controller 
C) Front Controller 
D) Application Controller
QUIZ 
We are designing an application for corporate tax reduction 
which have multiple of screens and various conditions and 
exceptions. What controller pattern might be useful? 
A) Input Controller 
B) Page Controller 
C) Front Controller 
D) Application Controller 
✔
MVC Patterns 
 Input controller patterns 
– Page Controller 
– Front Controller 
– Application Controller 
 View patterns 
– Template View 
– Transform View – Transforms view to some format 
– Two Step View – Logical Screen and final UI 
44
Template View 
Renders information into HTML by 
embedding markers in an HTML page 
 Place markers in HTML page that can be 
resolved into calls to get dynamic information 
45
Template View 
 How it Works 
– Embed markers into static HTML page when it’s 
written 
– When the page is used to service a request, the 
markers are replaced by the results of some 
computation 
 Server Pages for presentation 
– ASP, PHP, JSP 
– Page receives data to work with 
– Allow scriptlets 
46
Template View 
 Embedding the markers 
– Markers are used for dynamic data 
– <% and %> JSP, ASP 
– Tags such as JSTL and customized 
– Data is sent with the request 
 Helper Objects 
– Provide helper object that give the results 
– Avoids scriptlets and keeps the code in classes 
47
Template View 
 Conditional display 
– Most Server Pages support conditional tags 
– Provides some presentation logic 
– Can lead to bad code and should be avoided if 
possible 
– Try to move the condition into helper object or tags 
48 
<c:if test="${!empty cookie.userName}"> 
Welcome back <c:out value="${cookie.userName.value}" /> 
</c:if>
Example 
49 
<jsp:include page="top.jsp" flush="true" /> 
<table cellpadding="4" cellspacing="4" border="0" width="100%"> 
<tr><td> 
<%@ page import="is.ru.honn.domain.User" session="true" %> 
<% User user = (User)request.getSession().getAttribute ("user"); 
if (user == null) 
{ 
%> 
<h1>Sportvefurinn</h1> 
Ef þú ert nýr notandi getur þú skráð þig með því að smella á <b>Nýskrá</Annars, smelltu á <b>Innskrá</b> til að skrá þig inn á vefinn. 
<% } else { %> 
<h1>Halló <%= user.getName() %></h1>Smelltu á <b>Leikir</b> til að sjá næstu 
<% } %> 
</td></tr></table> 
<%-- bot.jsp síðan inniheldur restina af HTML síðunni --%>
Example 
50
Template 
 Velocity template example
Template 
 Scala template example 
@(customer: Customer, orders: Seq[Order]) 
<h1>Welcome @customer.name!</h1> 
<ul> 
@orders.map { order => 
<li>@order.title</li> 
} 
</ul>
Template 
 Template Engine will execute the view and 
create HTML 
Template Engine HTML 
View Template 
Language 
reads generates 
Model 
Parameters
QUIZ 
What pattern is described like this? 
A) Template View 
B) Transform View 
C) Model View 
D) Two Step View
QUIZ 
What pattern is described like this? 
A) Template View 
B) Transform View 
C) Model View 
D) Two Step View 
✔
MVC Design 
56
MVC Design 
57 
2. Call the model
MVC Design 
58
Domain and Presentation 
 Data from the model need to be accessed by the 
view 
– Data is simple classes 
– Controller handles the flow and decides which view 
to call 
– View needs access to data 
 Two methods 
– Use Request if lifetime of 
the data is the request 
– Use Session if the data 
must span many requests 59
Domain and Presentation 
 Single Request 
– Same request object is used 
– Use getParameter to get input 
– Store the data in request 
using setAttribute 
– JSP can access the 
data using the 
request 
60
Combining Model and View 
Input Controller 
HTTP/HTML handling 
Model 
Domain Layer 
View 
Template 
Model 
Parameters
API Design 
62
Trends 
 Mobile is bigger than Desktop 
– Mobile is the most important platform for many 
applications 
 The Programmable Web 
– If you want to be in the game, you have an API 
 When Good Enough is Not Enough 
– Rise Apps 
– Single purpose programs
Rise of the API 
 Separating UI from code 
– Model View Controller patterns 
 User Interface is HTML5 or Native App 
– Server side is just API 
– Information format in XML or Json
API Based 
 User Interface is HTML5 or Native App 
– Server side is just API 
– Information format in XML or Json 
HTML5 
JavaScript 
Web 
Server 
DB 
Controllers 
Service Layer 
Domain Model 
Data Source Layer 
Native App 
HTTP Request 
Json/XML 
HTTP Request 
Json/XML
API Design 
 HTTP is designed to be simple 
– GET, POST, PUT, DELETE 
 Trends was to build on top of this 
– SOAP 
 SOAP does not use any of the HTTP built in 
functionality 
– Adds a complexity layer on top
REST Explained Briefly 
 REST over HTTP leverages HTTP 
– Uses HTTP request methods: GET, POST, PUT, 
DELETE 
 GET is safe – does not have side effects 
– Possible to cache client side 
– 80% or more of the requests are GET 
 PUT and DELETE are idempotent
REST Explained Briefly 
 GET to get resource 
 POST to add resource 
 PUT to update resource 
 DELETE to delete resource
REST examples 
 Getting 
GET someservice.com/api/customer/3829 
 Adding 
POST someservice.com/api/customer/ 
 Updating 
PUT someservice.com/api/customer/3829
Play Framework 
71
Play Framework 
 Open source web application framework 
– Written in Java 
– Build and deployment is all handled by scripts 
 Follows the model-view-controller architectural 
pattern 
 Goals 
– Optimize developer productivity by using convention 
over configuration, hot code reloading and display of 
errors in the browser 
73
Play MVC 
 Model 
– Domain specific Java classes 
 View 
– User Interface 
– HTML, XML, JSON 
– Scala template language 
 Controller 
– Java classes that take requests and operate on the 
model 
– Results are rendered by the view 
74
Play MVC 
75
The Request Life Cycle 
1. An HTTP Request is received by the framework 
2. The Router component tries to find the most 
specific route able to accept this request. The 
corresponding action method is then invoked 
3. The application code is executed 
4. If a complex view needs to be generated, a 
template file is rendered 
5. The result of the action method (HTTP Response 
code, Content) is then written as an HTTP 
Response 
76
77
Creating a Play app 
 Unzip typesafe-activator-1.2.10-minimal.zip 
 Open CMD or Terminal 
 Run activator 
– This will download and install Play Framework 
$activaor 
 Add activator to PATH 
78
Creating a Play app 
 Open CMD or Terminal 
>activator new RuBook 
 Creates a new appliction 
>cd RuBook 
>play run 
 Runs the Web App 
 Open a browser and goto localhost:9000 
79
80
81
83
Play in IntelliJ 
84
Application.java 
 input controller 
– controllers.Application 
– Requests will go to this Java class 
86 
public class Application extends Controller 
{ 
public static Result index() 
{ 
return ok(index.render("Fagra veröld")); 
}
index.html 
 View is a Scala template 
views/index.scala.html 
 Compiles in to class 
views/html/index.class 
87 
@(message: String) 
@main("Welcome to Play") { 
@message 
}
Routing 
 conf/routes contains the routing information 
88 
# Routes 
# This file defines all application routes (Higher priority routes first) 
# ~~~~ 
# Home page 
GET / controllers.Application.index() 
# Map static resources from the /public folder to the /assets URL path 
GET /assets/*file controllers.Assets.at(path="/public", file)
Errors 
 Play displays errors 
– CMD has more information 
89
Summary 
 Web Presenation Patterns 
– Model View Controller 
– Page Controller 
– Front Controller 
– Template View 
– Application Controller 
 Play framework 
90

More Related Content

What's hot

2 d viewing computer graphics
2 d viewing computer graphics2 d viewing computer graphics
2 d viewing computer graphics
KALESHWAR KUMAR
 
COMPUTER GRAPHICS-"Projection"
COMPUTER GRAPHICS-"Projection"COMPUTER GRAPHICS-"Projection"
COMPUTER GRAPHICS-"Projection"
Ankit Surti
 
Advance Database Management Systems -Object Oriented Principles In Database
Advance Database Management Systems -Object Oriented Principles In DatabaseAdvance Database Management Systems -Object Oriented Principles In Database
Advance Database Management Systems -Object Oriented Principles In Database
Sonali Parab
 
SOA - Unit 3 - SOA and Web Services
SOA - Unit   3 - SOA and Web ServicesSOA - Unit   3 - SOA and Web Services
SOA - Unit 3 - SOA and Web Services
hamsa nandhini
 
What is OLAP -Data Warehouse Concepts - IT Online Training @ Newyorksys
What is OLAP -Data Warehouse Concepts - IT Online Training @ NewyorksysWhat is OLAP -Data Warehouse Concepts - IT Online Training @ Newyorksys
What is OLAP -Data Warehouse Concepts - IT Online Training @ Newyorksys
NEWYORKSYS-IT SOLUTIONS
 
Data mining query language
Data mining query languageData mining query language
Data mining query language
GowriLatha1
 
3D Graphics : Computer Graphics Fundamentals
3D Graphics : Computer Graphics Fundamentals3D Graphics : Computer Graphics Fundamentals
3D Graphics : Computer Graphics Fundamentals
Muhammed Afsal Villan
 
3 d geometric transformations
3 d geometric transformations3 d geometric transformations
3 d geometric transformationsMohd Arif
 
CS8592-OOAD Lecture Notes Unit-5
CS8592-OOAD Lecture Notes Unit-5 CS8592-OOAD Lecture Notes Unit-5
CS8592-OOAD Lecture Notes Unit-5
Gobinath Subramaniam
 
Fundamentals of Database ppt ch02
Fundamentals of Database ppt ch02Fundamentals of Database ppt ch02
Fundamentals of Database ppt ch02Jotham Gadot
 
Data models
Data modelsData models
Introduction to Object Oriented databases
Introduction to Object Oriented databasesIntroduction to Object Oriented databases
Introduction to Object Oriented databases
Dr. C.V. Suresh Babu
 
Clipping
ClippingClipping
Clipping
AMIT VIRAMGAMI
 
Dbms Lecture Notes
Dbms Lecture NotesDbms Lecture Notes
Dbms Lecture Notes
dM Technologies
 
Chapter 2 Relational Data Model-part1
Chapter 2 Relational Data Model-part1Chapter 2 Relational Data Model-part1
Chapter 2 Relational Data Model-part1
Eddyzulham Mahluzydde
 
Design Concept software engineering
Design Concept software engineeringDesign Concept software engineering
Design Concept software engineering
Darshit Metaliya
 
DBMS Unit - 7 - Transaction Processing
DBMS Unit - 7 - Transaction ProcessingDBMS Unit - 7 - Transaction Processing
DBMS Unit - 7 - Transaction Processing
Gyanmanjari Institute Of Technology
 
Requirement engineering evaluation
Requirement engineering evaluationRequirement engineering evaluation
Requirement engineering evaluationIshraq Al Fataftah
 

What's hot (20)

2 d viewing computer graphics
2 d viewing computer graphics2 d viewing computer graphics
2 d viewing computer graphics
 
COMPUTER GRAPHICS-"Projection"
COMPUTER GRAPHICS-"Projection"COMPUTER GRAPHICS-"Projection"
COMPUTER GRAPHICS-"Projection"
 
Advance Database Management Systems -Object Oriented Principles In Database
Advance Database Management Systems -Object Oriented Principles In DatabaseAdvance Database Management Systems -Object Oriented Principles In Database
Advance Database Management Systems -Object Oriented Principles In Database
 
SOA - Unit 3 - SOA and Web Services
SOA - Unit   3 - SOA and Web ServicesSOA - Unit   3 - SOA and Web Services
SOA - Unit 3 - SOA and Web Services
 
What is OLAP -Data Warehouse Concepts - IT Online Training @ Newyorksys
What is OLAP -Data Warehouse Concepts - IT Online Training @ NewyorksysWhat is OLAP -Data Warehouse Concepts - IT Online Training @ Newyorksys
What is OLAP -Data Warehouse Concepts - IT Online Training @ Newyorksys
 
Data mining query language
Data mining query languageData mining query language
Data mining query language
 
3D Graphics : Computer Graphics Fundamentals
3D Graphics : Computer Graphics Fundamentals3D Graphics : Computer Graphics Fundamentals
3D Graphics : Computer Graphics Fundamentals
 
3 d geometric transformations
3 d geometric transformations3 d geometric transformations
3 d geometric transformations
 
CS8592-OOAD Lecture Notes Unit-5
CS8592-OOAD Lecture Notes Unit-5 CS8592-OOAD Lecture Notes Unit-5
CS8592-OOAD Lecture Notes Unit-5
 
Fundamentals of Database ppt ch02
Fundamentals of Database ppt ch02Fundamentals of Database ppt ch02
Fundamentals of Database ppt ch02
 
Data models
Data modelsData models
Data models
 
Introduction to Object Oriented databases
Introduction to Object Oriented databasesIntroduction to Object Oriented databases
Introduction to Object Oriented databases
 
Clipping
ClippingClipping
Clipping
 
Dbms Lecture Notes
Dbms Lecture NotesDbms Lecture Notes
Dbms Lecture Notes
 
Chapter 2 Relational Data Model-part1
Chapter 2 Relational Data Model-part1Chapter 2 Relational Data Model-part1
Chapter 2 Relational Data Model-part1
 
Design Concept software engineering
Design Concept software engineeringDesign Concept software engineering
Design Concept software engineering
 
DBMS Unit - 7 - Transaction Processing
DBMS Unit - 7 - Transaction ProcessingDBMS Unit - 7 - Transaction Processing
DBMS Unit - 7 - Transaction Processing
 
Software design
Software designSoftware design
Software design
 
Requirement engineering evaluation
Requirement engineering evaluationRequirement engineering evaluation
Requirement engineering evaluation
 
Ooad
OoadOoad
Ooad
 

Viewers also liked

Lecture 6 -_presentation_layer
Lecture 6 -_presentation_layerLecture 6 -_presentation_layer
Lecture 6 -_presentation_layer
Serious_SamSoul
 
Session layer ppt
Session layer pptSession layer ppt
Session layer ppt
matangi jha
 
Presentation Layer (Layer OSI)
Presentation Layer (Layer OSI)Presentation Layer (Layer OSI)
Presentation Layer (Layer OSI)wahyu_phutra
 
L13 Presentation Layer Design
L13 Presentation Layer DesignL13 Presentation Layer Design
L13 Presentation Layer Design
Ólafur Andri Ragnarsson
 
Presentation Layer
Presentation LayerPresentation Layer
Presentation LayerHiep Luong
 
OSI Model
OSI ModelOSI Model
OSI Model
Rahul Bandhe
 
Osi model
Osi modelOsi model
Osi model
Online
 
L12 Session State and Distributation Strategies
L12 Session State and Distributation StrategiesL12 Session State and Distributation Strategies
L12 Session State and Distributation Strategies
Ólafur Andri Ragnarsson
 
L10 Web Programming
L10 Web ProgrammingL10 Web Programming
L10 Web Programming
Ólafur Andri Ragnarsson
 
Presentasi model osi ( retno )
Presentasi model osi ( retno )Presentasi model osi ( retno )
Presentasi model osi ( retno )
Dwi Retno Dewati
 
Lecture10
Lecture10Lecture10
Lecture10
Mohsan Ijaz
 
Magento Presentation Layer
Magento Presentation LayerMagento Presentation Layer
Magento Presentation Layer
Volodymyr Kublytskyi
 
Toward a Standardized XMAN Presentation Layer with Consideration of User Inte...
Toward a Standardized XMAN Presentation Layer with Consideration of User Inte...Toward a Standardized XMAN Presentation Layer with Consideration of User Inte...
Toward a Standardized XMAN Presentation Layer with Consideration of User Inte...
Bassel Saab
 
iOS & Android Application Development - Pee Dee User Group Meeting
iOS & Android Application Development - Pee Dee User Group MeetingiOS & Android Application Development - Pee Dee User Group Meeting
iOS & Android Application Development - Pee Dee User Group MeetingJim Tochterman
 
Web App or Native App
Web App or Native AppWeb App or Native App
Web App or Native AppYu Wei Shang
 
Debunking Common Myths of Mobile Application Development
Debunking Common Myths of Mobile Application DevelopmentDebunking Common Myths of Mobile Application Development
Debunking Common Myths of Mobile Application Development
Antenna Software
 
Considerations when building mobile app. Presented by Microstrategy
Considerations when building mobile app. Presented by MicrostrategyConsiderations when building mobile app. Presented by Microstrategy
Considerations when building mobile app. Presented by Microstrategyitnewsafrica
 

Viewers also liked (20)

Lecture 6 -_presentation_layer
Lecture 6 -_presentation_layerLecture 6 -_presentation_layer
Lecture 6 -_presentation_layer
 
Session layer ppt
Session layer pptSession layer ppt
Session layer ppt
 
Presentation Layer (Layer OSI)
Presentation Layer (Layer OSI)Presentation Layer (Layer OSI)
Presentation Layer (Layer OSI)
 
L13 Presentation Layer Design
L13 Presentation Layer DesignL13 Presentation Layer Design
L13 Presentation Layer Design
 
Presentation Layer
Presentation LayerPresentation Layer
Presentation Layer
 
OSI Model
OSI ModelOSI Model
OSI Model
 
Osi model
Osi modelOsi model
Osi model
 
L12 Session State and Distributation Strategies
L12 Session State and Distributation StrategiesL12 Session State and Distributation Strategies
L12 Session State and Distributation Strategies
 
L10 Web Programming
L10 Web ProgrammingL10 Web Programming
L10 Web Programming
 
Presentasi model osi ( retno )
Presentasi model osi ( retno )Presentasi model osi ( retno )
Presentasi model osi ( retno )
 
Network devices
Network devicesNetwork devices
Network devices
 
Lecture10
Lecture10Lecture10
Lecture10
 
Magento Presentation Layer
Magento Presentation LayerMagento Presentation Layer
Magento Presentation Layer
 
Toward a Standardized XMAN Presentation Layer with Consideration of User Inte...
Toward a Standardized XMAN Presentation Layer with Consideration of User Inte...Toward a Standardized XMAN Presentation Layer with Consideration of User Inte...
Toward a Standardized XMAN Presentation Layer with Consideration of User Inte...
 
iOS & Android Application Development - Pee Dee User Group Meeting
iOS & Android Application Development - Pee Dee User Group MeetingiOS & Android Application Development - Pee Dee User Group Meeting
iOS & Android Application Development - Pee Dee User Group Meeting
 
History of Mobile Development
History of Mobile DevelopmentHistory of Mobile Development
History of Mobile Development
 
Web App or Native App
Web App or Native AppWeb App or Native App
Web App or Native App
 
Debunking Common Myths of Mobile Application Development
Debunking Common Myths of Mobile Application DevelopmentDebunking Common Myths of Mobile Application Development
Debunking Common Myths of Mobile Application Development
 
Considerations when building mobile app. Presented by Microstrategy
Considerations when building mobile app. Presented by MicrostrategyConsiderations when building mobile app. Presented by Microstrategy
Considerations when building mobile app. Presented by Microstrategy
 
Application Layer
Application LayerApplication Layer
Application Layer
 

Similar to L17 Presentation Layer Design

4. Introduction to ASP.NET MVC - Part I
4. Introduction to ASP.NET MVC - Part I4. Introduction to ASP.NET MVC - Part I
4. Introduction to ASP.NET MVC - Part I
Rohit Rao
 
Effort estimation for web applications
Effort estimation for web applicationsEffort estimation for web applications
Effort estimation for web applications
Nagaraja Gundappa
 
Asp 1-mvc introduction
Asp 1-mvc introductionAsp 1-mvc introduction
Asp 1-mvc introduction
Fajar Baskoro
 
Software Design Patterns
Software Design PatternsSoftware Design Patterns
Software Design Patterns
alkuzaee
 
Benefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular jsBenefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular js
Harbinger Systems - HRTech Builder of Choice
 
Asp.net c# MVC-5 Training-Day-1 of Day-9
Asp.net c# MVC-5 Training-Day-1 of Day-9Asp.net c# MVC-5 Training-Day-1 of Day-9
Asp.net c# MVC-5 Training-Day-1 of Day-9
AHM Pervej Kabir
 
Using MVC with Kentico 8
Using MVC with Kentico 8Using MVC with Kentico 8
Using MVC with Kentico 8
Thomas Robbins
 
Session 5 : mvc - Giáo trình Bách Khoa Aptech
Session 5 : mvc  - Giáo trình Bách Khoa AptechSession 5 : mvc  - Giáo trình Bách Khoa Aptech
Session 5 : mvc - Giáo trình Bách Khoa AptechMasterCode.vn
 
Lecture 05 - Creating a website with Razor Pages.pdf
Lecture 05 - Creating a website with Razor Pages.pdfLecture 05 - Creating a website with Razor Pages.pdf
Lecture 05 - Creating a website with Razor Pages.pdf
Lê Thưởng
 
Mvc presentation
Mvc presentationMvc presentation
Mvc presentationMaslowB
 
Introduction to mvc architecture
Introduction to mvc architectureIntroduction to mvc architecture
Introduction to mvc architecture
ravindraquicsolv
 
Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013
Thomas Robbins
 
MVC 6 Introduction
MVC 6 IntroductionMVC 6 Introduction
MVC 6 Introduction
Sudhakar Sharma
 
Asp 1a-aspnetmvc
Asp 1a-aspnetmvcAsp 1a-aspnetmvc
Asp 1a-aspnetmvc
Fajar Baskoro
 
Aspnetmvc 1
Aspnetmvc 1Aspnetmvc 1
Aspnetmvc 1
Fajar Baskoro
 
Mvc Brief Overview
Mvc Brief OverviewMvc Brief Overview
Mvc Brief Overview
rainynovember12
 
Technoligent providing custom ASP.NET MVC development services
Technoligent providing custom ASP.NET MVC development servicesTechnoligent providing custom ASP.NET MVC development services
Technoligent providing custom ASP.NET MVC development services
Aaron Jacobson
 

Similar to L17 Presentation Layer Design (20)

4. Introduction to ASP.NET MVC - Part I
4. Introduction to ASP.NET MVC - Part I4. Introduction to ASP.NET MVC - Part I
4. Introduction to ASP.NET MVC - Part I
 
Effort estimation for web applications
Effort estimation for web applicationsEffort estimation for web applications
Effort estimation for web applications
 
Asp 1-mvc introduction
Asp 1-mvc introductionAsp 1-mvc introduction
Asp 1-mvc introduction
 
Software Design Patterns
Software Design PatternsSoftware Design Patterns
Software Design Patterns
 
Benefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular jsBenefits of developing single page web applications using angular js
Benefits of developing single page web applications using angular js
 
Asp.net c# MVC-5 Training-Day-1 of Day-9
Asp.net c# MVC-5 Training-Day-1 of Day-9Asp.net c# MVC-5 Training-Day-1 of Day-9
Asp.net c# MVC-5 Training-Day-1 of Day-9
 
Asp.net mvc
Asp.net mvcAsp.net mvc
Asp.net mvc
 
Using MVC with Kentico 8
Using MVC with Kentico 8Using MVC with Kentico 8
Using MVC with Kentico 8
 
Session 5 : mvc - Giáo trình Bách Khoa Aptech
Session 5 : mvc  - Giáo trình Bách Khoa AptechSession 5 : mvc  - Giáo trình Bách Khoa Aptech
Session 5 : mvc - Giáo trình Bách Khoa Aptech
 
Lecture 05 - Creating a website with Razor Pages.pdf
Lecture 05 - Creating a website with Razor Pages.pdfLecture 05 - Creating a website with Razor Pages.pdf
Lecture 05 - Creating a website with Razor Pages.pdf
 
Mvc presentation
Mvc presentationMvc presentation
Mvc presentation
 
MVC Framework
MVC FrameworkMVC Framework
MVC Framework
 
Introduction to mvc architecture
Introduction to mvc architectureIntroduction to mvc architecture
Introduction to mvc architecture
 
Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013Getting started with MVC 5 and Visual Studio 2013
Getting started with MVC 5 and Visual Studio 2013
 
MVC 6 Introduction
MVC 6 IntroductionMVC 6 Introduction
MVC 6 Introduction
 
Asp 1a-aspnetmvc
Asp 1a-aspnetmvcAsp 1a-aspnetmvc
Asp 1a-aspnetmvc
 
Aspnetmvc 1
Aspnetmvc 1Aspnetmvc 1
Aspnetmvc 1
 
Mvc Brief Overview
Mvc Brief OverviewMvc Brief Overview
Mvc Brief Overview
 
Technoligent providing custom ASP.NET MVC development services
Technoligent providing custom ASP.NET MVC development servicesTechnoligent providing custom ASP.NET MVC development services
Technoligent providing custom ASP.NET MVC development services
 
MVC architecture
MVC architectureMVC architecture
MVC architecture
 

More from Ólafur Andri Ragnarsson

Nýsköpun - Leiðin til framfara
Nýsköpun - Leiðin til framfaraNýsköpun - Leiðin til framfara
Nýsköpun - Leiðin til framfara
Ólafur Andri Ragnarsson
 
Nýjast tækni og framtíðin
Nýjast tækni og framtíðinNýjast tækni og framtíðin
Nýjast tækni og framtíðin
Ólafur Andri Ragnarsson
 
New Technology Summer 2020 Course Introduction
New Technology Summer 2020 Course IntroductionNew Technology Summer 2020 Course Introduction
New Technology Summer 2020 Course Introduction
Ólafur Andri Ragnarsson
 
L01 Introduction
L01 IntroductionL01 Introduction
L01 Introduction
Ólafur Andri Ragnarsson
 
L23 Robotics and Drones
L23 Robotics and Drones L23 Robotics and Drones
L23 Robotics and Drones
Ólafur Andri Ragnarsson
 
L22 Augmented and Virtual Reality
L22 Augmented and Virtual RealityL22 Augmented and Virtual Reality
L22 Augmented and Virtual Reality
Ólafur Andri Ragnarsson
 
L20 Personalised World
L20 Personalised WorldL20 Personalised World
L20 Personalised World
Ólafur Andri Ragnarsson
 
L19 Network Platforms
L19 Network PlatformsL19 Network Platforms
L19 Network Platforms
Ólafur Andri Ragnarsson
 
L18 Big Data and Analytics
L18 Big Data and AnalyticsL18 Big Data and Analytics
L18 Big Data and Analytics
Ólafur Andri Ragnarsson
 
L17 Algorithms and AI
L17 Algorithms and AIL17 Algorithms and AI
L17 Algorithms and AI
Ólafur Andri Ragnarsson
 
L16 Internet of Things
L16 Internet of ThingsL16 Internet of Things
L16 Internet of Things
Ólafur Andri Ragnarsson
 
L14 From the Internet to Blockchain
L14 From the Internet to BlockchainL14 From the Internet to Blockchain
L14 From the Internet to Blockchain
Ólafur Andri Ragnarsson
 
L14 The Mobile Revolution
L14 The Mobile RevolutionL14 The Mobile Revolution
L14 The Mobile Revolution
Ólafur Andri Ragnarsson
 
New Technology 2019 L13 Rise of the Machine
New Technology 2019 L13 Rise of the Machine New Technology 2019 L13 Rise of the Machine
New Technology 2019 L13 Rise of the Machine
Ólafur Andri Ragnarsson
 
L12 digital transformation
L12 digital transformationL12 digital transformation
L12 digital transformation
Ólafur Andri Ragnarsson
 
L10 The Innovator's Dilemma
L10 The Innovator's DilemmaL10 The Innovator's Dilemma
L10 The Innovator's Dilemma
Ólafur Andri Ragnarsson
 
L09 Disruptive Technology
L09 Disruptive TechnologyL09 Disruptive Technology
L09 Disruptive Technology
Ólafur Andri Ragnarsson
 
L09 Technological Revolutions
L09 Technological RevolutionsL09 Technological Revolutions
L09 Technological Revolutions
Ólafur Andri Ragnarsson
 
L07 Becoming Invisible
L07 Becoming InvisibleL07 Becoming Invisible
L07 Becoming Invisible
Ólafur Andri Ragnarsson
 
L06 Diffusion of Innovation
L06 Diffusion of InnovationL06 Diffusion of Innovation
L06 Diffusion of Innovation
Ólafur Andri Ragnarsson
 

More from Ólafur Andri Ragnarsson (20)

Nýsköpun - Leiðin til framfara
Nýsköpun - Leiðin til framfaraNýsköpun - Leiðin til framfara
Nýsköpun - Leiðin til framfara
 
Nýjast tækni og framtíðin
Nýjast tækni og framtíðinNýjast tækni og framtíðin
Nýjast tækni og framtíðin
 
New Technology Summer 2020 Course Introduction
New Technology Summer 2020 Course IntroductionNew Technology Summer 2020 Course Introduction
New Technology Summer 2020 Course Introduction
 
L01 Introduction
L01 IntroductionL01 Introduction
L01 Introduction
 
L23 Robotics and Drones
L23 Robotics and Drones L23 Robotics and Drones
L23 Robotics and Drones
 
L22 Augmented and Virtual Reality
L22 Augmented and Virtual RealityL22 Augmented and Virtual Reality
L22 Augmented and Virtual Reality
 
L20 Personalised World
L20 Personalised WorldL20 Personalised World
L20 Personalised World
 
L19 Network Platforms
L19 Network PlatformsL19 Network Platforms
L19 Network Platforms
 
L18 Big Data and Analytics
L18 Big Data and AnalyticsL18 Big Data and Analytics
L18 Big Data and Analytics
 
L17 Algorithms and AI
L17 Algorithms and AIL17 Algorithms and AI
L17 Algorithms and AI
 
L16 Internet of Things
L16 Internet of ThingsL16 Internet of Things
L16 Internet of Things
 
L14 From the Internet to Blockchain
L14 From the Internet to BlockchainL14 From the Internet to Blockchain
L14 From the Internet to Blockchain
 
L14 The Mobile Revolution
L14 The Mobile RevolutionL14 The Mobile Revolution
L14 The Mobile Revolution
 
New Technology 2019 L13 Rise of the Machine
New Technology 2019 L13 Rise of the Machine New Technology 2019 L13 Rise of the Machine
New Technology 2019 L13 Rise of the Machine
 
L12 digital transformation
L12 digital transformationL12 digital transformation
L12 digital transformation
 
L10 The Innovator's Dilemma
L10 The Innovator's DilemmaL10 The Innovator's Dilemma
L10 The Innovator's Dilemma
 
L09 Disruptive Technology
L09 Disruptive TechnologyL09 Disruptive Technology
L09 Disruptive Technology
 
L09 Technological Revolutions
L09 Technological RevolutionsL09 Technological Revolutions
L09 Technological Revolutions
 
L07 Becoming Invisible
L07 Becoming InvisibleL07 Becoming Invisible
L07 Becoming Invisible
 
L06 Diffusion of Innovation
L06 Diffusion of InnovationL06 Diffusion of Innovation
L06 Diffusion of Innovation
 

Recently uploaded

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Product School
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
ThousandEyes
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
Alison B. Lowndes
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
CatarinaPereira64715
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
DianaGray10
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
Bhaskar Mitra
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
James Anderson
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
Sri Ambati
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
Paul Groth
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
Prayukth K V
 

Recently uploaded (20)

FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...Mission to Decommission: Importance of Decommissioning Products to Increase E...
Mission to Decommission: Importance of Decommissioning Products to Increase E...
 
Assuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyesAssuring Contact Center Experiences for Your Customers With ThousandEyes
Assuring Contact Center Experiences for Your Customers With ThousandEyes
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........Bits & Pixels using AI for Good.........
Bits & Pixels using AI for Good.........
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
FIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdfFIDO Alliance Osaka Seminar: Overview.pdf
FIDO Alliance Osaka Seminar: Overview.pdf
 
ODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User GroupODC, Data Fabric and Architecture User Group
ODC, Data Fabric and Architecture User Group
 
UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4UiPath Test Automation using UiPath Test Suite series, part 4
UiPath Test Automation using UiPath Test Suite series, part 4
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Search and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical FuturesSearch and Society: Reimagining Information Access for Radical Futures
Search and Society: Reimagining Information Access for Radical Futures
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...
 
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
GenAISummit 2024 May 28 Sri Ambati Keynote: AGI Belongs to The Community in O...
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 previewState of ICS and IoT Cyber Threat Landscape Report 2024 preview
State of ICS and IoT Cyber Threat Landscape Report 2024 preview
 

L17 Presentation Layer Design

  • 1. Lecture 17 Presentation Layer Design
  • 2. Reading  Patterns – Model View Controller – Page Controller – Front Controller – Template View – Application Controller 2
  • 3. Agenda  The Web Layer – Model-View-Controller  Input controller patterns – Page Controller – Front Controller – Application Controller  View patterns – Template View 3
  • 4. Play! Framework  We will be using Play! framework – Based on MVC
  • 6. The Challenge  How to design web applications?  How to separate user interface from the business logic? – User Interface is an HTML string  How to provide OO design? – Code reuse  How can we abstract underlying system – For example data base 6
  • 7. Presentation and Web Layers  Embedded and Desktop clients  Web Browser is a different type of client 7
  • 9. The Three Layers  Presentation – User’s interface to the system – User can be another system – Accepts input, displays views  Domain – The Application of the system – The “Business logic” – Has the tendency to creep into presentation and data source  Data Source – Connection to the database 9
  • 10. Web Layer Design  How to design Web Applications  Two approaches – Script based – Code using HTML – Server Page based – HTML page with code 10 Web Browser Web Server HTML/HTTP Web Application ? ? DB Server
  • 11. Web Applications  Client is a web Browser – All interface is HTML with graphics  Server is configured to map URLs to applications – The web application can be script or page 11
  • 12. Script Based  Useful when the logic and the flow is important – Request is not easily mapped to a single page  Examples – CGI, ISAPI, Java Servlets 12
  • 13. Server Page Based  Useful where there are lots of pages – Flow is not as important – Each request can easily be mapped to a page  Examples – PHP, JSP, ASP 13
  • 14. Web Design  Web Layer must handle the request and the response 14
  • 15. API Based  User Interface is HTML5 or Native App – Server side is just API – Information format in XML or Json HTML5 JavaScript Web Server DB Controllers Service Layer Domain Model Data Source Layer Native App HTTP Request Json/XML HTTP Request Json/XML
  • 17. Model View Controller Splits user interface interactions into three distinct roles  Separates the user interface from the logic – Originally from 70s Smalltalk – Similar to Doc/View in MFC  MVC considers three roles – Clear separations of concerns – Model: The domain layer handles state – View: Presentation logic – Controller: Connects the model and the view 17
  • 18. Model View Controller  How It Works – Model: The domain layer handles state – View: Presentation logic – Controller: Connects the model and the view 18
  • 19. Model View Controller  Benefits – Separation of the view from the domain logic in the model – This is key in any presentation design  Importance of MVC – View and model are different concerns – View can change, usually the model is the same – Easy to test the model without the view  Coupling Dependencies – View depends on the model, but the model is not depending on the view 19
  • 20. Model View Controller  When to Use It – The value is in the separation of concern – Separating the model and the view – As this separation is so fundamental in any software design, any non-trivial system should use MVC in some form 20
  • 21. MVC in Web Design  Web Applications are request/response based  Input Controller – Takes the request – Examines the input parameters – Calls the Model – Decides how to handle the response – Sends the control to the View for rendering 21
  • 22. MVC in Web Design 22
  • 23. MVC Patterns  Input controller patterns – Page Controller – Front Controller – Application Controller  View patterns – Template View – Transform View – Transforms view to some format – Two Step View – Logical Screen and final UI 23
  • 24. QUIZ What design principle is the most important in Model View Controller? A) Separation of different concerns B) All request go the same place C) Easy to test different components D) Easy to change the view
  • 25. QUIZ What design principle is the most important in Model View Controller? A) Separation of different concerns B) All request go the same place C) Easy to test different components D) Easy to change the view ✔
  • 26. MVC Patterns  Input controller patterns – Page Controller – Front Controller – Application Controller  View patterns – Template View – Transform View – Transforms view to some format – Two Step View – Logical Screen and final UI 26
  • 27. Page Controller An object that handles a request for a specific page or action on a Web site  One input controller for each logical page of the web site 27
  • 28. Page Controller  How It Works – One Page Controller for each logical page  Page controller as Script – Servlet or CGI program – Useful for web application that need some logic and data  Page controller as a server page – ASP, PHP, JSP – Combines the Page Controller and Template View – Helpers used to get data from the model – Works fine if the logic is simple or none 28
  • 30. Page Controller  The basic responsibility of a Page Controller are – Decode the URL and extract any form data to figure out all data for the action – Create and invoke any model objects to process the data. • All relevant data from the HTML request should be passed to the model so that the mode objects don’t need any connection to the HTML request – Determine which view should display the result page and forward the information to it 30
  • 31. Page Controller  When to Use It – Works well in a site where the controller logic is simple – When the controller logic is simple the Front Controller adds too much overhead  Examples – Simple Display with a Servlet Controller and a JSP View – Using a JSP as a Handler – Page Handler with Code Behind 31
  • 32. Front Controller A controller that handles all requests for a web site  One controller handles all requests – The handler dispatches to command objects for behaviour particular to the request 32
  • 33. Front Controller  How It Works – Takes care of common tasks, for example security, authentication, i18n, and so on – Built on Commands – Usually implemented as script, not page  Two phases – Request handling – Web Handler – Command handling – Command classes 33
  • 34. Front Controller  Request handling – Web Handler – Any common logic – Authentication, Web Security etc. – Changes in one place apply for the whole site – Handler creates the requested command  Command handling – Command classes – Specific functionality – Command classes extend abstract classes and implements process method – Can be separated form the web infrastructure 34
  • 35. Front Controller  Handler takes the request – Examines the URL – Creates command and calls the command 35
  • 36. Front Controller  Web handler can have commands statically or dynamically – Static case has the advantage of explicit logic and compile time error checking – Dynamic case has some property file to map request URL to command classes – Dynamic case has more flexibility to add new commands 36
  • 37. Front Controller  When to Use It – Front controller is more complicated design than the Page Controller – Only one controller needs to be configured in the web server, the handler takes care of the dispatching – With dynamic commands, you can easily add new commands – Single point of entry allowing centralized logic 37
  • 38. Application Controller A centralized point for handling screen navigation and the flow of an application  Applications that have significant amount of logic about the screens to use at different points – For example Wizard style applications – Screens depend on the state 38
  • 39. Application Controller  How it works – Two responsibilities: Decide which domain logic to use and deciding the view 39
  • 40. Application Controller  Can be used with Command pattern – Commands execute the domain logic – Not easy to determine what is domain logic and what is the application logic  State machine – The Controller must maintain a state  When to Use It – If the flow and application logic is complex and simple controllers need to share code 40
  • 41. MVC Patterns  Input controller patterns – Page Controller – Front Controller – Application Controller  View patterns – Template View – Transform View – Transforms view to some format – Two Step View – Logical Screen and final UI 41
  • 42. QUIZ We are designing an application for corporate tax reduction which have multiple of screens and various conditions and exceptions. What controller pattern might be useful? A) Input Controller B) Page Controller C) Front Controller D) Application Controller
  • 43. QUIZ We are designing an application for corporate tax reduction which have multiple of screens and various conditions and exceptions. What controller pattern might be useful? A) Input Controller B) Page Controller C) Front Controller D) Application Controller ✔
  • 44. MVC Patterns  Input controller patterns – Page Controller – Front Controller – Application Controller  View patterns – Template View – Transform View – Transforms view to some format – Two Step View – Logical Screen and final UI 44
  • 45. Template View Renders information into HTML by embedding markers in an HTML page  Place markers in HTML page that can be resolved into calls to get dynamic information 45
  • 46. Template View  How it Works – Embed markers into static HTML page when it’s written – When the page is used to service a request, the markers are replaced by the results of some computation  Server Pages for presentation – ASP, PHP, JSP – Page receives data to work with – Allow scriptlets 46
  • 47. Template View  Embedding the markers – Markers are used for dynamic data – <% and %> JSP, ASP – Tags such as JSTL and customized – Data is sent with the request  Helper Objects – Provide helper object that give the results – Avoids scriptlets and keeps the code in classes 47
  • 48. Template View  Conditional display – Most Server Pages support conditional tags – Provides some presentation logic – Can lead to bad code and should be avoided if possible – Try to move the condition into helper object or tags 48 <c:if test="${!empty cookie.userName}"> Welcome back <c:out value="${cookie.userName.value}" /> </c:if>
  • 49. Example 49 <jsp:include page="top.jsp" flush="true" /> <table cellpadding="4" cellspacing="4" border="0" width="100%"> <tr><td> <%@ page import="is.ru.honn.domain.User" session="true" %> <% User user = (User)request.getSession().getAttribute ("user"); if (user == null) { %> <h1>Sportvefurinn</h1> Ef þú ert nýr notandi getur þú skráð þig með því að smella á <b>Nýskrá</Annars, smelltu á <b>Innskrá</b> til að skrá þig inn á vefinn. <% } else { %> <h1>Halló <%= user.getName() %></h1>Smelltu á <b>Leikir</b> til að sjá næstu <% } %> </td></tr></table> <%-- bot.jsp síðan inniheldur restina af HTML síðunni --%>
  • 51. Template  Velocity template example
  • 52. Template  Scala template example @(customer: Customer, orders: Seq[Order]) <h1>Welcome @customer.name!</h1> <ul> @orders.map { order => <li>@order.title</li> } </ul>
  • 53. Template  Template Engine will execute the view and create HTML Template Engine HTML View Template Language reads generates Model Parameters
  • 54. QUIZ What pattern is described like this? A) Template View B) Transform View C) Model View D) Two Step View
  • 55. QUIZ What pattern is described like this? A) Template View B) Transform View C) Model View D) Two Step View ✔
  • 57. MVC Design 57 2. Call the model
  • 59. Domain and Presentation  Data from the model need to be accessed by the view – Data is simple classes – Controller handles the flow and decides which view to call – View needs access to data  Two methods – Use Request if lifetime of the data is the request – Use Session if the data must span many requests 59
  • 60. Domain and Presentation  Single Request – Same request object is used – Use getParameter to get input – Store the data in request using setAttribute – JSP can access the data using the request 60
  • 61. Combining Model and View Input Controller HTTP/HTML handling Model Domain Layer View Template Model Parameters
  • 63. Trends  Mobile is bigger than Desktop – Mobile is the most important platform for many applications  The Programmable Web – If you want to be in the game, you have an API  When Good Enough is Not Enough – Rise Apps – Single purpose programs
  • 64. Rise of the API  Separating UI from code – Model View Controller patterns  User Interface is HTML5 or Native App – Server side is just API – Information format in XML or Json
  • 65.
  • 66. API Based  User Interface is HTML5 or Native App – Server side is just API – Information format in XML or Json HTML5 JavaScript Web Server DB Controllers Service Layer Domain Model Data Source Layer Native App HTTP Request Json/XML HTTP Request Json/XML
  • 67. API Design  HTTP is designed to be simple – GET, POST, PUT, DELETE  Trends was to build on top of this – SOAP  SOAP does not use any of the HTTP built in functionality – Adds a complexity layer on top
  • 68. REST Explained Briefly  REST over HTTP leverages HTTP – Uses HTTP request methods: GET, POST, PUT, DELETE  GET is safe – does not have side effects – Possible to cache client side – 80% or more of the requests are GET  PUT and DELETE are idempotent
  • 69. REST Explained Briefly  GET to get resource  POST to add resource  PUT to update resource  DELETE to delete resource
  • 70. REST examples  Getting GET someservice.com/api/customer/3829  Adding POST someservice.com/api/customer/  Updating PUT someservice.com/api/customer/3829
  • 72.
  • 73. Play Framework  Open source web application framework – Written in Java – Build and deployment is all handled by scripts  Follows the model-view-controller architectural pattern  Goals – Optimize developer productivity by using convention over configuration, hot code reloading and display of errors in the browser 73
  • 74. Play MVC  Model – Domain specific Java classes  View – User Interface – HTML, XML, JSON – Scala template language  Controller – Java classes that take requests and operate on the model – Results are rendered by the view 74
  • 76. The Request Life Cycle 1. An HTTP Request is received by the framework 2. The Router component tries to find the most specific route able to accept this request. The corresponding action method is then invoked 3. The application code is executed 4. If a complex view needs to be generated, a template file is rendered 5. The result of the action method (HTTP Response code, Content) is then written as an HTTP Response 76
  • 77. 77
  • 78. Creating a Play app  Unzip typesafe-activator-1.2.10-minimal.zip  Open CMD or Terminal  Run activator – This will download and install Play Framework $activaor  Add activator to PATH 78
  • 79. Creating a Play app  Open CMD or Terminal >activator new RuBook  Creates a new appliction >cd RuBook >play run  Runs the Web App  Open a browser and goto localhost:9000 79
  • 80. 80
  • 81. 81
  • 82.
  • 83. 83
  • 85.
  • 86. Application.java  input controller – controllers.Application – Requests will go to this Java class 86 public class Application extends Controller { public static Result index() { return ok(index.render("Fagra veröld")); }
  • 87. index.html  View is a Scala template views/index.scala.html  Compiles in to class views/html/index.class 87 @(message: String) @main("Welcome to Play") { @message }
  • 88. Routing  conf/routes contains the routing information 88 # Routes # This file defines all application routes (Higher priority routes first) # ~~~~ # Home page GET / controllers.Application.index() # Map static resources from the /public folder to the /assets URL path GET /assets/*file controllers.Assets.at(path="/public", file)
  • 89. Errors  Play displays errors – CMD has more information 89
  • 90. Summary  Web Presenation Patterns – Model View Controller – Page Controller – Front Controller – Template View – Application Controller  Play framework 90