(ati3 – Arsitektur Aplikasi Web [Compatibility Mode])
Transcript of (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])
![Page 2: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/2.jpg)
Internet & Web BasicsInternet & Web Basics
![Page 3: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/3.jpg)
Internet
• What is Internet?– A world-wide network of computer networks
• Internet is huge client server system
• A Server runs continuously, waiting to be contacted by a Clientcontacted by a Client– Each Server provides certain services
– Services include providing web pages => web application => web services
• A Client will send a message to a Server requesting the service provided by that server– The client will usually provide some information,
parameters, with the request
![Page 4: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/4.jpg)
Web
• Tim Berners-Lee at CERN proposed the Web in 1989
– Purpose: to allow scientists to have access to many databases of scientific work through their own computers
• From document (linier media) to hypertext (hyper • From document (linier media) to hypertext (hyper media)
– Ex of Linier media is a book, pages, document, cassete• We’ll call them documents
– Hypermedia – media that provide point to the need• Examples: CD, DVD, Webpages
• Web provides Hyperlink
![Page 5: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/5.jpg)
Protokol Web: HTTP
• Hypertext Transport Protocol (RFC 1945)– Oleh Tim Berners-Lee, 1990
• Protocol that used to communicate between web browsers and web servers
• Using TCP port 80 (default)• Using TCP port 80 (default)
• This protocol supports hypermedia files
• HTTP 1.0 becomes 1.1 by IETF (RFC 2616)
![Page 6: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/6.jpg)
HTTP Session
• When client and server communicate, their
connection has to be maintenance…
• HTTP provides session
• A basic HTTP session has four phases:• A basic HTTP session has four phases:
– Client opens the connection
– Client makes the request
– Server sends a response
– Server closes the connection
![Page 7: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/7.jpg)
HTTP Stateless
• But HTTP is “stateless”
– HTTP is a stateless protocol, which means that once a server has delivered the requested data to a client, the connection is broken, and the server retains no memory broken, and the server retains no memory of what has just taken place
• No information that retain
• Solution? Cookies & Session
![Page 8: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/8.jpg)
HTTP (2)
• HTTP is request – response:
– HTTP client (user agent) request s to HTTP server and Server will response
• The basic different of HTTP/1.1 and HTTP/1.0 is theirpersistent connectionpersistent connection
• HTTP/1.0 is not using persistent connection
– Header = Connection: close
• HTTP/1.1 is using persistent connection
– Header = Connection: Keep-Alive
– But client can set header manually (header = Connection: close).
![Page 9: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/9.jpg)
![Page 10: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/10.jpg)
HTTP Message
![Page 11: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/11.jpg)
Request
• A request consists of:
– Initial line
– Headers
– Blank line– Blank line
– Message body
![Page 12: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/12.jpg)
Request Example
GET /courses/dbi/index.html HTTP/1.0 From: [email protected] User-Agent: HTTPTool/1.0 User-Agent: HTTPTool/1.0 [blank line here] Method Path Version
Headers
Initial line
![Page 13: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/13.jpg)
HTTP Request Methods
• GET - Fetch a document
– Ex: URL variabel
• POST - Execute the document, using the data in bodydocument
– Ex: form submit– Ex: form submit
• HEAD - Fetch just the header of the document
– Ex: date modified
• PUT - Store a new document on the server
– Ex: upload using WebDAV
• DELETE - Remove a document from the server
![Page 14: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/14.jpg)
HTTP Response status
![Page 15: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/15.jpg)
![Page 16: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/16.jpg)
HTTP/1.0 200 OK Date: Fri, 31 Dec 1999 23:59:59 GMT Content-Type: text/html Content-Length: 1354
Response ExampleInitial line
Version
Status code
<html> <body> <h1>Hello World</h1> (more file contents) . . . </body> </html>
Headers
Reason phrase
Message body
![Page 17: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/17.jpg)
HTTP Environment Variables
![Page 18: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/18.jpg)
Web Server Basics
• The main job of a Web server computer is to
respond to requests from Web client
computers
• Three main elements of a Web server: • Three main elements of a Web server:
– Hardware
– Operating system software
– Web server software
![Page 19: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/19.jpg)
Web Server basic capabilities
• Virtual hosting: multiple domain
• Address mapping: map request address to the
actual file on server
• Authentication: by password, host credentials• Authentication: by password, host credentials
• Handling MIME (multi purpose internet mail
extensions)
• Caching support
• Security support
![Page 20: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/20.jpg)
Mapping URL Sistem Web
![Page 21: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/21.jpg)
Web Server Software
• The most popular Web server programs are:
– Apache HTTP Server
– Microsoft Internet Information Server (IIS)
• Netcraft
– Accumulates popularity rankings
![Page 22: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/22.jpg)
Web Server Hardware
Architectures
• Server farms
– Large collections of servers
• Centralized architecture• Centralized architecture
– Uses a few very large and fast computers
• Distributed/decentralized architecture
– Uses a large number of less powerful computers
– Divides the workload among them
![Page 23: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/23.jpg)
Web Browsers
• Browsers are clients
• Mosaic - NCSA (Univ. of Illinois), in early 1993
– First to use a GUI, led to explosion of Web use
– Initially for X-Windows, under UNIX, but was – Initially for X-Windows, under UNIX, but was ported to other platforms by late 1993
• Most requests are for existing documents, using HTTP
– But some requests are for program execution, with the output being returned as a document
![Page 24: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/24.jpg)
Web TierWeb Tier
![Page 25: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/25.jpg)
Web Architecture
• Layering Aspect
– “Separation of concerns”
– How many concurrent users are you serving?
– Shared needs among multiple applications?
• Data Aspect• Data Aspect
– What kind(s) of data are you delivering?• Structured vs non structured
• On-demand vs. real-time
– What are the bandwidth requirements?• Size & nature of data
• audience concerns
![Page 26: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/26.jpg)
Tiers…?
• A “tier” can be hardware, software, or logical
in layer.
• Therefore:
– A non-application-specific client (such as a web – A non-application-specific client (such as a web
browser) is not a tier
– A database with no overlying data access layer is
not really considered a tier either
![Page 27: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/27.jpg)
Two-Tier Architecture
BrowserYour code to generate HTML,process forms, generate SQL
queries on database (1 or 2 tiers)
Any old browser(you don’t care)
Application
…the easy way…
MySQL
queries on database (1 or 2 tiers)
Apache
PHP
Application
Open-source: free, fast,and dependable
Linux, Solaris, etc
LAMP: Linux, Apache, MySQL, PHP.
US$10+/month from http://www.he.net
![Page 28: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/28.jpg)
Three-Tier Architecture
BrowserYour object-oriented php / asp.net code, structured into three
Any current browser
Custom C++modulePresentation
…the traditional way…?
Database
structured into three tiers
Apache
module
Open-source: free, fast,and dependable
Linux, Solaris, etc
Typically database choice will be decided by factors other than just suitability
for web use.
Presentation
Application Logic
Data Access
![Page 29: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/29.jpg)
N-tier web architectures
Client
Presentation
HTML rendering
Templates, HTML generationscripts, XML and XSLT
Application-specific componentsBusiness Logic
Data Access
Data
Application-specific componentsand application logic
Domain-specific anddatabase-independent layer,
typically object-oriented
Data storage, typicallyan (SQL) RDBMS
![Page 30: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/30.jpg)
Web Integration ProblemWeb Integration Problem
![Page 31: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/31.jpg)
Connecting to Legacy Systems
by “Wrapping”
Web ServerWeb Server MAINFRAMEMAINFRAME
“WRAPPER”
WebApp
LegacyApp
WrapperMiddleware
CORBA, RMI
![Page 32: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/32.jpg)
Connecting to Legacy Systems
The “screen scraper”
Terminalscreen data
Screen Existing
HTML data
HTMLdata
Legacy system(mainframe)
Client Web server Legacy database
Screen scraper
Existing application
SOURCE: WIM GEVERS
![Page 33: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/33.jpg)
Connecting to Legacy Systems
The “web sevices”
SOAP/REST
Web Existing
HTML data
XMLdata
Legacy system(mainframe)
Client Web server Legacy database
Service Client
Existing application
SOURCE: WIM GEVERS
Web Service Server
![Page 34: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/34.jpg)
Web application architectureWeb application architecture
![Page 35: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/35.jpg)
Server side
• Server hardware
• Web servers software
• Apache, Xitami, IIS, GlassFish
• Server side programming language
• PHP, JSP, ASP, ASP.NET, Ruby on Rails, Python, • PHP, JSP, ASP, ASP.NET, Ruby on Rails, Python, Perl, Cold Fusion
• MIME configuration• Utility Programming Tools:
• Database Server
• MySQL, SQLServer, Oracle
![Page 36: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/36.jpg)
Client side
• Client hardware• Web browsers
• MIME config
• Language: HTML / XML / XHTML• Client side scripting: Javascript / VBScript• Design: CSS• Design: CSS• Interactive software:
• Flash player
• Java Applet
• Client software:• ActiveX / Plugin: program yg terintegrasi dgn browser
• Helper: program yg terinstall di client
![Page 37: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/37.jpg)
Arsitektur Aplikasi Web umum
Arsitektur Global
![Page 38: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/38.jpg)
Arsitektur Aplikasi Web konvensional
Arsitektur Konvensional
![Page 39: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/39.jpg)
Komponen Web Detail
![Page 40: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/40.jpg)
Arsitektur Aplikasi Web SekarangTren Sekarang (Ajax-Based)
![Page 41: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/41.jpg)
Web Data Aspect architectureWeb Data Aspect architecture
![Page 42: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/42.jpg)
• Structured data of the kind held in database
• Documents of the kind used in document
management systems
• Multimedia data of kind held in media servers
Data aspect architecture
• Multimedia data of kind held in media servers
![Page 43: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/43.jpg)
• Integrate DB into Web app
• DB are accessed either directly from within
Web server extension or application servers
– JDBC
Database centric architecture
– JDBC
– ODBC
– ADO
– ADO.NET
![Page 44: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/44.jpg)
• Content management architecture
– Integrate documents from different sources
– Representing mechanism to integrate contents into Web
Architecture of Web Document
Management
Ex: Alfresco Document Management SystemsEx: Alfresco Document Management Systems
![Page 45: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/45.jpg)
• Streaming
– Client can begin play out of
audio few second after it
begins receiving the file from
server
– Corresponding bandwidth,
low jitter
Architecture of multimedia data
low jitter
– Real time protocol
• Example: Helix Media
Server
![Page 46: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/46.jpg)
Now: Web ApplicationNow: Web Application
![Page 47: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/47.jpg)
– More than 200 million active users
– MS paid $240 million for 1.6 percent
Modern Web App
Case Study : Facebook
Activities of your friends
Your current status
photos
Friends
47
Comment, Rate
Chat
Aggregationwith Picasa
Video
groupsMore apps!
![Page 48: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/48.jpg)
Previous Web App
Case Study : Yahoo! Directory
Provider-defined directory
4848
![Page 49: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/49.jpg)
Examples of two “versions” of web
apps
1995-2005 Web 2005-Present Web
Britannica Online Wikipedia
Akamai BitTorrent
Directories TaggingDirectories(Taxonomy)
Tagging(Folksonomy)
Tightly coupled apps App Mashup/Integration
Home page Blog
![Page 50: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/50.jpg)
OpenSocial
• A coherent open architecture designed for social network services and applications.
– Common APIs across many websites
• REST/RPC protocols – for server-to-server interactions
• Javascript APIs – for browser-to-server interactions• Javascript APIs – for browser-to-server interactions
– Authorization mechanism, Data model …
• Usage
– Supported by MySpace, Google Orkut, Twitter, LinkedIn, XiaoNei…
• Internationalization
– Rival: Facebook
![Page 51: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/51.jpg)
OpenSocial – Architecture exampleComponents• Interface –
REST, Javascript APIs
• Client – Ajax, Gadget
• Message Format –JSON, XML
• Security - OAuth
• Data Model
Logic level
![Page 52: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/52.jpg)
Authentication – OpenID• Motivation
– Provide lightweight authentication service across domains
• SolutionUsers are asked to prove ownership of their OpenID identifiers.
– OpenID identifiers are URLs (e.g. http://zhenhua-guo.blogspot.com).
– Service provider and identity provider are clearly separated.
– Authentication delegation (service provider → identity provider)
• Advantages• Advantages– Cross-domain authentication
– Attribute exchange beyond authentication
– Single Sign-On
– Easy OpenID provider switch
• Drawbacks– Phishing attack
• Resources– Supported by Facebook, Verisign, Sourceforge, Yahoo, etc.
http://fcom.us.es/blogs/nuevafcom/files/2008/09/openid-1.jpg
![Page 53: (ati3 – Arsitektur Aplikasi Web [Compatibility Mode])](https://reader031.fdocuments.us/reader031/viewer/2022022417/5879f7cb1a28abb2368b7fa5/html5/thumbnails/53.jpg)
Next
• Service Oriented Architectures