webeng2010 05-arsitektur-aplikasi-web

36
Web Engineering 2010 Pertemuan ke-05 Arsitektur Aplikasi Web Husni [email protected] Husni.trunojoyo.ac.id Komputasi.wordpress.com

Upload: adkha-abib

Post on 11-Apr-2017

715 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Webeng2010 05-arsitektur-aplikasi-web

Web Engineering 2010Pertemuan ke-05

Arsitektur Aplikasi Web

[email protected]

Husni.trunojoyo.ac.idKomputasi.wordpress.com

Page 2: Webeng2010 05-arsitektur-aplikasi-web

Outline

• Pendahuluan• Metode dan Pendekatan• Seluk beluk Arsitektur Web• Komponen dasar dari Arsitektur• MVC, Struts, OOHDM

2

Page 3: Webeng2010 05-arsitektur-aplikasi-web

Pendahuluan

• Pertimbangkan besarnya dari kebutuhan (requirements) dan batasan (constraints)

• Meliputi:– Kebutuhan fungsional: pemesanan produk berbasis

web– Kebutuhan kualitas: kinerja, ketersediaan– Integrasi dengan sistem yang telah ada

• Normalnya tidak dikembangkan “from scratch” (tidak dari nol)

3

Page 4: Webeng2010 05-arsitektur-aplikasi-web

Arsitektur?

• Arsitektur mendeskripsikan struktur: Menurut (Bassetal.1998), Arsitektur dari sistem perangkat lunak (software) terdiri dari strukturnya, dekomposisinya ke dalam komponen-komponen, dan interface dan hubungannya.

• Arsitektur menjelaskan aspek statis dan dinamis dari sistem software sehingga dapat diperkirakan rancangan bangunan (building design) dan diagram alir (flow chart) bagi suatu produk software.

4

Page 5: Webeng2010 05-arsitektur-aplikasi-web

Arsitektur?

• Arsitektur membentuk transisi dari analisis ke implementasi: Saat membuat arsitektur, kita mencoba untuk memecah kebutuhan fungsional dan kebutuhan kualitas ke dalam komponen-komponen software dan relationship dan interfacenya dalam pendekatan iteratif.

• Proses ini didukung oleh sejumlah pendekatan, seperti Unified Process (Baca Bab 10)

5

Page 6: Webeng2010 05-arsitektur-aplikasi-web

Pengembangan Arsitektur(Sangat dipengaruhi oleh kebutuhan)

6

Page 7: Webeng2010 05-arsitektur-aplikasi-web

Pengembangan Arsitektur

• Kembangkan dengan cara berulang–Buatlah resiko (kemungkinan rugi) sebagai

hasil dari kebutuhan tidak aman.• Mengapa?

– Tentukan batasan yang dapat diperhitungkan (calculateable) dan dapat dikendalikan (controlable )

7

Page 8: Webeng2010 05-arsitektur-aplikasi-web

Pola (Patterns)

• Menjelaskan masalah rancangan berulang. Berupa konteks rancangan spesifik dan menawarkan satu atau lebih solusi.

• Solusi menjelaskan komponen-komponen yang berpartisipasi, tanggungjawabnya, relationship antar komponen-komponen ini, dan saling mempengaruhi dari komponen-komponen ini dalam masalah spesifik tersebut.

• Pattern memungkinkan kita menggunakan ulang pengetahuan rancangan gabungan dan telah terbukti (terjamin)

8

Page 9: Webeng2010 05-arsitektur-aplikasi-web

Framework

• Pilihan lain untuk menggunakan ulang pengetahuan arsitektur yang ada– Memuat pengetahuan arsitektural

• Framework adalah sistem software yang dapat digunakan ulang (reusable) dengan fungsi umum yang telah diimplementasikan.

• Harus mempertimbangkan kekurangannya– Perlunya training (mungkin mahal dan sulit)– Tak ada (atau kurang) standard– Misalnya...

9

Page 10: Webeng2010 05-arsitektur-aplikasi-web

Kategori Arsitektur

• Aspek Layering: Sistem Software distrukturkan dalam beberapa tier (deretan bertingkat) untuk mengimplementasikan prinsip “pemisahan urusan (konsen)”

• Aspek Data: Data dapat berupa:– Structured (Terstruktur)• Relational DB• XML

– Non-structured (Tak-Terstruktur)• Konten Multimedia • Gambar, audio, video 10

Page 11: Webeng2010 05-arsitektur-aplikasi-web

Pokok2 Arsitektur Aplikasi Web

Kebutuhan aplikasi Web lebih menuntut daripada sistem software◦ Changeability, performance, security, scalability, availability

Hingga membedakan infrastruktur web (platform) dan arsitektur aplikasi web

Platform◦ Variasi masalah yang luas◦ J2EE, .NET

Masalah◦ Kesulitan memanfaatkan wide range sistem berbeda meningkat◦ Inhomogeneity (ketakserbasamaan, tiadanya keseragaman)◦ Immaturity (ketidakmatangan, kurangnya pengalaman) 11

Page 12: Webeng2010 05-arsitektur-aplikasi-web

Komponen Arsitektur Aplikasi Web Dasar

12

Page 13: Webeng2010 05-arsitektur-aplikasi-web

Komponen Arsitektur Aplikasi Web Dasar

Client: Biasanya browser (user agent). Dikendalikan oleh pengguna untuk mengoperasikan aplikasi web. Fungsionalitas client dapat diperluas dengan menginstall plug-in (atau applet).

Firewall: Bagian dari software yang mengatur komunikasi antara jaringan tak-aman (misal: Internet) dan jaringan aman (misal: LAN perusahaan). Komunikasi ini difilter oleh aturan akses. 13

Page 14: Webeng2010 05-arsitektur-aplikasi-web

Komponen Arsitektur Aplikasi Web Dasar

Proxy: Biasanya digunakan untuk secara temporer menyimpan halaman-halaman web dalam suatu cache. Proxy dapat pula memikul fungsi lain seperti mengadaptasikan content bagi pengguna (customization), atau user tracking.

Web server: bagian dari software yang mendukung berbagai protokol Web seperti HTTP dan HTTPS, untuk memroses permintaan client.

14

Page 15: Webeng2010 05-arsitektur-aplikasi-web

Komponen Arsitektur Aplikasi Web Dasar

Database server: Server ini normalnya menyediakan data produksi organisasi dalam bentuk terstruktur, misalnya dalam tabel-tabel.

Media server: Komponen ini terutama digunakan untuk content streaming dari data besar yang tak-terstruktur (misal: audio atau video).

Content management server: Mirip database server, server ini menangani content untuk melayani aplikasi. Content ini biasanya tersedia dalam bentuk data semi-terstruktur, misal: dokumen XML.

15

Page 16: Webeng2010 05-arsitektur-aplikasi-web

Komponen Arsitektur Aplikasi Web Dasar

Application server: Server ini menangani fungsionalitas yang dibutuhkan oleh beberapa aplikasi, misal: workflow atau kustomisasi.

Legacy application: Ini adalah sistem (aplikasi) yang lebih tua yang sebaiknya diintegrasikan sebagai komponen internal atau eksternal.

16

Page 17: Webeng2010 05-arsitektur-aplikasi-web

Arsitektur 2-Layer

• Terdapat 2-layer: Client dan Server. Server terdiri dari beberapa komponen yang saling bekerjasama.

17

Page 18: Webeng2010 05-arsitektur-aplikasi-web

Arsitektur N-Layer

Bagaimana melekatkan (embed) layanan-layanan ke dalam komponen application server?◦ Kustomisasi, workflow◦ Business logic

Layanan dilekatkan dalam application server dengan suatu interface terdefinisi.

18

Page 19: Webeng2010 05-arsitektur-aplikasi-web

Arsitektur N-Layer

19

Page 20: Webeng2010 05-arsitektur-aplikasi-web

JSP Model 2Berbasis Arsitektur MVC (Model View Controller)

20

Page 21: Webeng2010 05-arsitektur-aplikasi-web

JSP Model 2

Meletakkan fondasi bagi integrasi aspek-aspek navigasi, internasionalisasi dan pengiriman multi-platform dalam aplikasi Web.

View Representasi Grafis, JSP

Controller Aliran (flow) dan Logik Control

Logik (model), View Bagian dari fungsionalitas model

Java bean, Komponen software 21

Page 22: Webeng2010 05-arsitektur-aplikasi-web

Struts

Berguna untuk penanganan error, internasionalisasi

Menggunakan file konfigurasi XML Kontrol dari pemrosesan mengalir dalam pola

MVC untuk men-fasilitasi pemrosesan dari request client

Mungkin mengkonfigurasi alokasi view dan model dalam file konfigurasi. Content dapat disajikan secara lebih fleksibel

22

Page 23: Webeng2010 05-arsitektur-aplikasi-web

Implementasi JSP Model 2 dalam Struts

23

Page 24: Webeng2010 05-arsitektur-aplikasi-web

Struts

1. Terima request (dari pengguna) dan temukan controller (Action) atau application logic.

2. Sampaikan ke Action3. Pilih dan buat suatu model dalam bentuk

JavaBean4. ActionServlet dapat memilih view utuk

menyajikan content5. View terpilih mengenerate output

24

Page 25: Webeng2010 05-arsitektur-aplikasi-web

OOHDM Java 2

• Berbasis pada arsitektur MVC (Model View Controller)

• Komponen navigasi eksplisit• User interface diperkaya dengan aspek-aspek

navigasi

25

Page 26: Webeng2010 05-arsitektur-aplikasi-web

Komponen OOHDM Java 2

26

Page 27: Webeng2010 05-arsitektur-aplikasi-web

Arsitektur Integrasi

Sistem yang ada dapat diintegrasikan pada 3 level◦ Presentation ◦ Application logic◦ Content

Istilah kunci: Enterprise Application Integration ◦ Fokus pada integrasi sistem

lama (legacy)27

Page 28: Webeng2010 05-arsitektur-aplikasi-web

Arsitektur IntegrasiMuncul dari integrasi business-to-business

Point to point: Bertukar content untuk diintegrasikan melalui komunikasi eksternal

Data delivery: akses ke data internal secara langsung (misal: akses database)

Integrasi Data: beberapa aplikasi menggunakan tempat penyimpanan data yang sama

Functionality Delivery: Sistem lama membolehkan akses fungsionalitas (misal: terhadap suatu API)

Rekonstruksi fungsionalitas: Akses ke fungsi transparan bagi client

Porting : Sistem lama dimigrasikan ke platform Web, menggantikan sistem aslinya 28

Page 29: Webeng2010 05-arsitektur-aplikasi-web

Arsitektur Aspek Data

• Data terstruktur dan sejenis ditangani dalan database

• Dokumen dan sejenis digunakan dalam document management system

• Data multimedia dan sejenis ditangani dalam media server

29

Page 30: Webeng2010 05-arsitektur-aplikasi-web

Arsitektur Centric Database

• Integrasikan DB ke dalam aplikasi Web• Diakses secara langsung dalam ekstensi Web

server atau application server.– JDBC– ODBC

30

Page 31: Webeng2010 05-arsitektur-aplikasi-web

Arsitektur Manajemen Dokumen Web

• Arsitektur Manajemen Content– Integrasikan dokumen dari sumber berbeda– Sediakan mekanisme untuk menginte-

grasikan content ke dalam Web

31

Page 32: Webeng2010 05-arsitektur-aplikasi-web

Arsitektur Manajemen Dokumen Web

32

Page 33: Webeng2010 05-arsitektur-aplikasi-web

Arsitektur Data Multimedia

• Lamban untuk menampilkan data multimedia

• Streaming –Client dapat mulai memutarkan audio

beberapa detik setelah ia mulai menerima file dari server–Bandwitdh yang sesuai, jitternya rendah,

videonya juga

33

Page 34: Webeng2010 05-arsitektur-aplikasi-web

Arsitektur Multimedia(Point-to-Point)

34

Page 35: Webeng2010 05-arsitektur-aplikasi-web

Arsitektur Multimedia

35

Page 36: Webeng2010 05-arsitektur-aplikasi-web

Tugas

• Jelaskan perbedaan antara Pattern dan Framework!

• Jelaskan tentang MVC dan Struts!• Jelaskan arsitektur dari CodeIgniter, sertakan

gambar!• Jelaskan tentang Integrasi Sistem dan SOA,

sertakan gambar!

36