Pengantar Teknologi Web 2 Web Architectures & Technologies Antonius Rachmat C.

Pengantar Teknologi Web 2

Web Architectures & Technologies

Antonius Rachmat C

WWW

• Software• Kumpulan service Internet, yaitu web-web yang

berada di layer aplikasi• Ditemukan oleh Tim Berners-Lee dkk di CERN • Didesain untuk membantu para ilmuwan di

CERN untuk memperoleh informasi dari dokumen-dokumen di Internet

• Tujuannya: membuat software (browser) untuk menampilkan informasi tersebut– Idenya: hyperlink

WWW

• The world wide web consortium (W3C) definition of the web: "The World Wide Web is the universe of network-accessible information, an embodiment of human knowledge"

• Provides information access in ways not previously possible– Hyperlinked (Hypertext)– Graphical user interface– Pictorial and non-text information– Information that changes rapidly– Immediate access– Anyone can author a web site– Multi-user access to the same information (try that with a book)– Easily searchable information

WWW Components

• Structural Components– Clients/browsers – to dominant implementations– Servers – run on sophisticated hardware– Caches – many interesting implementations– Internet – the global infrastructure which facilitates data

transfer

• Semantic Components– Hyper Text Transfer Protocol (HTTP)– Hyper Text Markup Language (HTML)

• eXtensible Markup Language (XML)

– Uniform Resource Identifiers (URIs)

Web Server survey (netcraft)

Growth of World Wide Web

A brief history of the web

Dynamic content

Server-side scripting

Static content cgi-bin, php, asp.net, asp

Database-backedcontent

Componentized/enterprise applications

Web applicationframeworks

EAI

Better script/database integration

Web Architecture

• Layering Aspect– “Separation of concerns”– How many concurrent users are you serving?– Shared needs among multiple applications? (e.g.,

security)• 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• Again, audience concerns

Tiers…?

• A “tier” can be hardware, software, or logical. The last is the most sensible option from an architectural viewpoint.

• Therefore:– 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

N-tier web architectures

Client

Presentation

Business Logic

Data Access

Data

HTML rendering

Templates, HTML generationscripts, XML and XSLT

Application-specific componentsand application logic

Domain-specific anddatabase-independent layer,

typically object-oriented

Data storage, typicallyan (SQL) RDBMS

How to build a 2-tier web app…

Browser

MySQL

Your code to generate HTML,process forms, generate SQL

queries on database (1 or 2 tiers)

Any old browser(you don’t care)

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

…the easy way…

How to build a 3-tier web app…

Browser

Database

Your object-oriented php / asp.net code,

structured into three tiers

Any current browser

Apache

Custom C++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.

PresentationApplication Logic

Data Access

…the traditional way…?

Physical architecture

Application server

Compute server #1

Compute server #N

Secure customer cluster #1

GatewayFirewallBrowsers

Administrativeterminals ssh

https

Secure customer cluster #N

Firewall:Port 443 (https) from anywherePort 23 (ssh) from admin domain only

Conceptual architecture

Encryption &Tunneling

Browser

ActiveX

Thin Client

Decryption &Routing

TC srv

App Mgt

UNIX apps

App srv

HTTPS Tunneling

MySQL

the three roles

• the Model contains data that represents the problem

• the Controller responds to user actions by telling the Model how to change

• the View displays the current state of the Model to the user

how do we design it?

• the Model is a class that represents the actual problem being solved– it has private fields, and provides accessor

(getter and setter) methods– the Model should always be a separate class

• if using a GUI– the listeners collectively are the Controller– the displayed components are the View– the Controller and View are thus a little bit interdependent

Combining Controller and View

• Sometimes the Controller and View are combined, especially in small programs

• Combining the Controller and View is appropriate if they are very interdependent

• The Model should always be independent• Never mix Model code with GUI code!

– why?• ANSWER: you may be required to change the View• if you keep View and Model separate, changing the View

will be relatively simple

MVC

Contoh

MVC Separation

• Separating the presentation from the model– Presentasi dan model memiliki fokus yang berbeda:

• presentasi ke tampilan, model ke data. – Perbedaan ketergantungan:

• presentasi bergantung pada model tapi tidak sebaliknya.– Sehingga dapat mengembangkan multiple presentation

dengan model yang sama• Separating the controller from the view

– Contoh: .NET Web application– File: *.aspx dan *.aspx.vb

• Contoh: PHP Zend Framework, Code Igniter

Kelebihan & Kekurangan Aplikasi Web

Teknologi Aplikasi Web

Bagaimana web bekerja?

Web application

Planning A Web site

• Purpose– Purpose and Goal– Target Audience– New Web Technologies– Web site comparison

• Content– Value-added contents– Text– Images– Color Palette– Multimedia

NEXT