PENGANTAR TEKNOLOGI WEB 2

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 Computer

• 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

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

How to build a 2-tier web app…

How to build a 3-tier web app…

Physical architecture

Conceptual architecture

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