Transcript Document

Web Engineering 2010
Pertemuan ke-03
Pemodelan Aplikasi Web
Husni
[email protected]
Husni.trunojoyo.ac.id
Komputasi.wordpress.com
Outline
• Tujuan utama diskusi ini adalah memahami
bagaimana membuat model untuk dijadikan
pijakan dalam pengembangan aplikasi web
• Konsep dasar pemodelan aplikasi web
• Hal-hal yang harus diperhatikan dalam
pemodelan aplikasi web.
2
Fundamental
• Model digunakan untuk mengurangi kompleksitas,
mendokumentasikan keputusan rancangan dan
menfasilitasi komunikasi di dalam tim proyek.
• Pemodelan bertujuan menyediakan suatu
spesifikasi dari sistem yang akan dibangun dengan
derajat detail yang cukup bagi implementasi sistem
tersebut.
• Hasil dari proses pemodelan adalah model yang
merepresentasikan aspek-aspek yang relevan dari
sistem dalam bentuk yang disederhanakan dan
juga comprehensible (dapat dipahami).
3
Pemodelan Kebutuhan Aplikasi
4
Pemodelan Kebutuhan Aplikasi
• Level Application Logic dan user interface adalah
enkapsulasi dari “what” dan “how” dari aplikasi
• Aspek yang ditangani adalah struktur (yaitu obyek,
atribut dan relasinya ke obyek lain) dan perilaku
(yaitu fungsi dan proses)
• Melalui perbaikan yang runtut dari kebutuhan yang
diidentifikasi dalam analisis kebutuhan, dilakukan
tansformasi untuk menganalisis model dan kemudian
merancang model (desain), yang akan dijadikan basis
bagi implementasi.
5
Pemodelan Kebutuhan Aplikasi
• Akar dari pemodelan dijumpai pada dua sisi:
1- Pemodelan Data Engineering
2-Pemodelan Software Engineering
• Menurut sejarah, pemodelan Data Engineering fokus
pada aspek struktural, yaitu model EntityRelationship (ER) (Chen 1976). Pemodelan dalam
Software Engineering fokus pada aspek perilaku,
untuk memenuhi kebutuhan dari bahasa
pemrograman.
• Saat ini banyak didasarkan pada pendekatan objectoriented. Ciri paling penting dari pemodelan
berorientasi obyek adalah pendekatan holistik
terhadap pemodelan sistem dan merupakan konsep
sentral dari obyek, berisikan struktur dan perilaku 6
Pemodelan Kebutuhan Aplikasi
• Unified Modeling Language (UML) adalah
bahasa pemodelan berorientasi obyek
• UML memungkinkan kita menetapkan aspekaspek dari sistem software dalam bentuk
model. Juga menggunakan berbagai diagram
untuk mewujudkannya secara grafis
• UML membentuk basis bagi banyak metode
pemodelan aplikasi web
7
Prinsip Pemodelan dalam Web Eng.
• Metode untuk memodelkan aplikasi tradisional
tidak cukup ekspresif untuk menegaskan ciri
aplikasi web. Contoh, bahasa pemodelan
(seperti UML) tidak menyediakan konsep yang
tepat bagi spesifikasi hyperlink.
• Inilah mengapa dikembangkan pendekatan
pemodelan khusus bagi aplikasi web yang
mampu menangani aplikasi web dalam tiga
dimensi yang telah disebutkan: levels, aspects
dan phases.
8
Pemodelan Kebutuhan Aplikasi Web
9
Tingkatan Pemodelan
Ada tiga tingkatan pemodelan aplikasi web:
• 1-content : informasi dan logik aplikasi di bawah
aplikasi web
Tujuan dari model content adalah definisi
eksplisit dari struktur informasi.
• 2-hypertext : penstrukturan content ke dalam
node-node dan link antar node. Model struktur
hypertext hanya mereferensi content yang
bersesuaian
• 3-Presentation : user interface atau layout
halaman (page)
10
Tingkatan Pemodelan
• Aplikasi web yang menyediakan user interface
hypertext-oriented saja tetapi mempunyai
himpunan data besar butuh fokus pada
pemodelan content dan struktur hypertext.
• Sebaliknya, aplikasi web yang presentationoriented, misalnya corporate portal atau
online shopping, akan sangat membutuhkan
pemodelan presentassi.
11
Aspects (Aspek)
• Struktur dan perilaku dimodelkan pada tiap
tingkatan (3 level): content, hypertext &
presentation.
• Relevansi dari model struktur dan perilaku
tergantung pada jenis aplikasi web yang akan
diimplementasikan
• Aplikasi web yang menyediakan informasi statis
kurang membutuhkan pemodelan perilaku
dibandingkan aplikasi web yang menyediakan
banyak interaksi
12
Phases (Fase)
• Urutan langkah pemodelan level-level
ditentukan dengan modeler
• Tergantung pada jenis aplikasi web, dapat
mengikuti:
1-pendekatan information-driven : memulai
dengan pemodelan content
2-pendekatan presentation-driven: memulai
dengan pemodelan aspek presentation dari
aplikasi
13
Customization (Penyesuaian)
• Mempengaruhi semua dimensi pemodelan web
baik content, hypertext maupun presentation.
Struktur dan perilaku, juga setiap fase dari
proses pengembangan
• UWE (UML-based Web Engineering): sejalan
dengan UML. Didefinisikan sebagai profil UML,
merupakan ekstensi ringan dari UML
14
Pemodelan Kebutuhan
• Use cases adalah teknik pemodelan yang lebih
disukai untuk kebutuhan fungsional, karena
dapat direpresentasikan secara grafis
• Keunikan dari kebutuhan aplikasi web adalah
fungsi navigasi agar pengguna dapat
menjelajah via hypertext dan menemukan
node-node.
15
Contoh
Diagram
Use
Case
16
Contoh Diagram Aktifitas
• Diagram aktifitas (Activity) digunakan ketika use case
berpijak pada logik aplikasi yang lebih kompleks.
17
Pemodelan Content
• Infromasi yang disediakan oleh aplikasi web
adalah salah satu faktor paling penting bagi
suksesnya aplikasi tersebut
• Pembuatan model domain masalah, terdiri
dari aspek statis dan dinamis.
• Ciri aplikasi web berikut harus diperhatikan:
18
Pemodelan Content
1-Document-centric character and multimedia:
Harus memperhitungkan semua jenis format
media berbeda ketika memodelkan content,
termasuk menstrukturkan informasi sebagai
basis
2-Integration of existing data and software:
Banyak aplikasi web dibangun di atas
repositori data dan komponen software yang
telah ada dimana awalnya tidak dimaksudkan
untuk aplikasi web.
19
Tujuan Pemodelan Content
• Pemodelan content bertujuan mentransfer
kebutuhan informasi dan fungsi yang
ditentukan oleh rekayasa kebutuhan untuk
suatu model.
• Pemodelan content menghasilkan suatu model
yang menyusun aspek struktural dari content
misalnya berbentuk diagram kelas, dan
tergantung pada jenis aplikasi web, aspek
perilaku dapat berbentuk diagram status dan
interaksi
20
Contoh Diagram Kelas
21
Contoh Diagram Mesin Status
22
Pemodelan Hypertext
• Dikenal sebagai pemodelan navigasi
• Hypertext non-linearity termasuk properti paling penting yang
harus diperhitungkan ketika memodelkan aplikasi web
• Tujuan dari pemodelan hypertext adalah menetapkan
navigability (dapat dijelajah) dari semua content aplikasi web,
yaitu tersedianya path navigasi kepada pengguna.
• Pemodelan hypertext menghasilkan dua hal berikut:
1- model struktur hypertext, dikenal sebagai model struktur
navigasi . Mendefinisikan struktur dari hypertext, yaitu kelaskelas mana dari model content yang dapat dikunjungi dengan
navigasi.
2- model struktur hypertext tersaring, dimana elemen-elemen
akses berbentuk suatu access model.
• Pemodelan hypertext fokus pada aspek struktural dari
hypertext dan elemen-elemen aksesnya.
23
Konsep Pemodelan Struktur Hypertext
• Pemodelan struktur hypertext didasarkan pada konsep
hypertext, yaitu terhadap node (halaman/dokumen) dan
link antar node tersebut.
• Starting point untuk pembuatan model struktur hypertext
biasanya adalah model content yang berisi kelas dan
obyek. Diperoleh node-node dalam hypertext.
• Model struktur hypertext sering dijadikan sebagai view
pada model content . Karena itu disebut pula navigational
view
• Node yang ditetapkan sebagai view pada model content
memilih satu atau lebih obyek dari content
• Beberapa metode mendefinisikan aturan transformasi
untuk menurunkan link pada basis relationship pada level
24
content.
Contoh Model Struktural Hypertext
25
Klasifikasi Link
• Metode HDM (Hypertext Design Model) menetapkan
jenis link berikut:
1-Structural links menghubungkan elemen-elemen
dari node yang sama, misal: dari suatu rangkuman
review ke detail review.
2-Perspective links meletakkan berbagai view dari
suatu node dalam hubungan dengan tiap yang lain,
misal: versi PostScript dan PDF dalam makalah.
3-Application links meletakkan node-node berbeda
dalam relasi untuk tiap yang lain, tergantung pada
aplikasi, misal: suatu link menunjuk ke “makalah
terbaik”.
26
Klasifikasi Link
• Metode WebML (Web Modeling Language)
didasarkan pada perjalanan informasi selama
navigasi.
• Menghasilkan jenis link berikut:
1-Contextual links membawa informasi
konteks, misal: nomor unik dari reviewer, untuk
menjelajah dari satu reviewer ke semua review
yang dibuat olehnya
2-Non-contextual links tidak punya informasi
konteks yang berasosiasi, misal: link-link yang
menunjuk dari suatu review tunggal ke daftar
semua review.
27
Klasifikasi Link
• Memperhatikan distribusi node-node pada
level hypertext terhadap halaman (page) pada
level presentation.
• WebML menetapkan jenis link tambahan:
1-Intra-page links digunakan ketika source
dan destination dari suatu link berada pada
halaman yang sama
2-Inter-page links digunakan saat source dan
destination pada page yang berbeda.
28
Klasifikasi Link
• Berdasarkan pada kebutuhan fungsional dari
aplikasi Web, metode pemodelan UWE
mendefinisikan jenis link berikut:
1-Navigation links digunakan untuk navigasi
antar node
2-Process links menunjuk ke node start (awal)
dari suatu proses
3-External links menunjuk ke node yang tidak
secara langsung terlibat pada aplikasi
29
Klasifikasi Link
• Metode pemodelan OO-H (Object-Oriented
Hypermedia) mendefinisikan 5 jenis link
berikut:
1. I-links (internal links) menunjuk ke node di
dalam batasan dari kebutuhan navigasi yang
diberikan, misal: link-link internal ke detail
review dari salah satu reviewer.
2. T-links (traversal links) mengarah ke node yang
mengcover kebutuhan navigasi lain, misal: dari
seorang author ke makalahnya.
30
Klasifikasi Link
3. R-links (requirement links) menunjuk ke
suatu awal (start) jalur (path) navigasi, misal:
untuk menambahkan suatu review baru.
4. X-links (external links) mengarah ke nodenode eksternal, misal: ke panduan format
eksternal.
5. S-links (service links) mengarah (dengan link
responnya yang bersesuaian) ke layanan,
misal: ke suatu search engine eksternal.
31
Konsep Pemodelan Akses
• Struktur akses terulang digambarkan sebagai pola rancangan
(design patterns), disebut pula “hypermedia design patterns”
atau “navigation patterns”.
• Pemanfaatan pola navigasi ini akan meningkatkan kualitas dari
model hypertext.
• index adalah suatu struktur yang memungkinkan pengguna
memilih obyek tunggal keluar dari daftar obyek yang
homogen
• menu memungkinkan pengguna mengakses node-node
heterogen
• guided tour memungkinkan pengguna secara runut berjalan
melalui sejumlah node
• query memungkinkan pengguna mencari node-node
32
Konsep Pemodelan Akses
• Pola navigasi khusus termasuk:
1) home, mengarah ke home page dari aplikasi
Web
2) landmark, menunjuk ke suatu node yang
dapat dicapai dari dalam semua node.
• Beberapa struktur akses ini dapat ditambahkan
ke model struktur hypertext secara otomatis
• Contoh: index dapat ditambahkan secara
otomatis kapanpun kita menginginkan akses ke
suatu himpunan (>1) obyek dari suatu node.
33
Contoh
Model
Akses
34
Relasi Model Hypertext & Content
• Tergantung pada metode pemodelan yang
mendasari, model hypertext lebih kurang sangat
tergantung pada model content
• Ada ketergantung pada level type, seperti kelas
mana dalam model content membentuk node
dalam model hypertext, dan pada level instance,
yaitu himpunan obyek dalam model content yang
menempati node tersebut dalam model hypertext
• Tidak semua metode menggambarkan
ketergantungan antara model content dan model
hypertext. Namun, beberapa metode menentukan
turunan langsung hypertext dari content dengan
mendefinisikan node-node atas dasar pandangan
35
Pemodelan Presentasi
• Pemodelan presentasi membidik perancangan
struktur dan perilaku dari user interface untuk
memastikan bahwa interaksi dengan aplikasi Web
adalah sederhana dan self-explanatory.
• Pemodelan presentasi memberikan dua hasil:
1) menghasilkan suatu konsep presentasi uniform
dengan memodelkan elemen-elemen terulang pada
page, misalnya headers dan footers. Idealnya
menunjukkan komposisi dari setiap page dan
rancangan dari fields, texts, images, forms, dll.,
termasuk dalam page ini.
2) Mendeskripsikan aspek berorientasi perilaku dari user
interface.
36
Konsep Pemodelan Presentasi
• Elemen-elemen model digambarkan mengikuti 3
tingkat hirarki :
1) presentation page mengggambarkan halaman
(page) yang disajikan kepada pengguna sebagai suatu
unit visualisasi. Dapat tersusun dari unit-unit
presentasi berbeda.
2) presentation unit bertugas mengelompokkan
elemen-elemen user interface terkait,
merepresentasikan suatu penggalan logik dari page.
Menghadirkan node stemming dari model hypertext.
3) presentation element adalah building block dasar
dari model presentasi. Elemen presentasi mewakili
himpunan informasi node dan dapat termasuk text,
37
images, audio, dll.
Contoh Model Presentasi
(Sistem Review Makalah Ilmiah)
38
Diagram Overview Interaksi
39
Diagram Sequence
40
Relasi Model Presentation & Hypertext
• Telah diketahui bagaimana elemen hypertext
dipetakan ke elemen presentation. Normalnya
dikerjakan dengan asumsi semua instance dari
suatu node akan ditampilkan pada level
presentation.
• Interaksi yang dipicu oleh pengguna tidak perlu
dibatasi hanya untuk level presentation. Karena
ini, harus dipertimbangkan kesesuaiannya dengan
link-link lain. Kesesuaian ini mungkin dalam
bentuk obyek dan logik aplikasi pada level
content, dan untuk navigasi pada level hypertext.
41
Pemodelan Kustomisasi
• Customization modeling bertujuan secara
eksplisit merepresentasikan informasi context,
dan adaptations yang berasal darinya.
• Tergantung pada metode pemodelan, hasilnya
tak selalu model kustomisasi eksplisit
• Pada banyak kasus, pemodelan kustomisasi
bercampur baur dengan model content,
hypertext dan presentation.
42
Konsep Pemodelan Kustomisasi
• Kustomisasi harus berdasarkan situasi pemanfaatan
aplikasi web, yaitu berurusan dengan pertanyaan “what”
yang akan diadaptasi dan “when”.
• Agar mampu mem-personalize suatu aplikasi Web kita
harus memodelkan dan mengelola preferensi
(ketertarikan) dan karakteristik dari pengguna dalam
suatu user profile
• Contoh: untuk mengadaptasi aplikasi Web di bidang
mobile computing, harus dipertimbangkan device
profiles, location information dan transmission
bandwidth. Informasi ini kemudian direpresentasikan
dalam model context berbentuk diagram class.
• Saat runtime, context dapat berubah, misal: pengguna
mengubah preferensinya atau aplikasi “dinikmati” pada
43
lokasi berbeda.
Konsep Pemodelan Kustomisasi
• Hasil konteks fisik dari situasi pemanfaatan
masing-masing (misal: nama login pengguna
menunjukkan lokasi terkini)
• Konteks logik menyediakan pengetahuan konteks
tambahan (misal: alamat kantor vs. Alamat
rumah, jam kerja vs. Jam kosong).
• Informasi konteks ini dapat pula disediakan
untuk aplikasi Web oleh sumber eksternal (misal:
Geographic Information Systems (GIS)
44
Konsep Pemodelan Kustomisasi
• Adaptasi terhadap suatu konteks dapat dimodelkan
dengan salah satu dari dua cara fundamental beikut:
1) Cara result-oriented (static adaptation) dengan
membuat berbagai model atau variasi model dengan
melihat pada himpunan berbeda varian dari
informasi konteks. Kekurangan dari adaptasi statis
tumbuh exponential dari varian model yang
dipertimbangkan.
2) dynamic adaptation: menambahkan aturan
transformasi context-dependent untuk model
content, hypertext dan presentation. Aturan
transformasi ini menjelaskan varian yang akan dibuat
saat runtime.
45
Konsep Pemodelan Kustomisasi
• Contoh. Aturan transformasi dinamis, misalnya
diformulasikan sebagai aturan ECA
(Event/Condition/Action), dapat menetapkan
penambahan dan penghapusan elemen model
atau penyaringan instance, untuk membuat
daftar ter-personal dengan makalah-makalah
pada topik yang disukai pengguna.
• Kekurangannya: hasilnya, yaitu varian model
yang diadaptasi ke context, tidak tersedia
secara langsung, tetapi secara aktual akan
dibuat “saat runtime”, akibatnya lebih sulit
untuk memahami model tersebut.
46
Contoh Kustomisasi
47
Konsep Pemodelan Kustomisasi
• Sebagian besar metodologi saat ini
mengerjakan pemodelan kustomisasi dengan
mendefinisikan aturan-aturan atau filter untuk
setiap titik dalam aplikasi web
• Pendekatan berbeda perlu
mempertimbangkan kustomisasi sebagai
urusan cross-cutting.
• UWE mewujudkan perhatian cross-cutting
dengan menggunakan paket UML tiruan
(stereotyped) bagi bagian pointcut dan bagian
advice dari suatu aspek.
48
Konsep Pemodelan Kustomisasi
• Designer menggunakan NavigationAnnotation untuk
menambahkan atribut (PresStyle) yang termasuk bagian
advice ke himpunan link yang termasuk bagian pointcut.
49
Metode dan Tool
• Semua metode pemodelan menawarkan
sehimpunan elemen pemodelan yang disesuaikan
dengan kebutuhan dari aplikasi Web
• Hampir semua metode menawarkan suatu notasi
spesifik bagi elemen-elemen pemodelan
• Banyak metode mendefinisikan suatu proses dan
didukung oleh tool yang secara otomatis
mengenerate bentuk implementasi dari modelmodel yang dibuat.
50
Metode Pemodelan: Overview
• Metode yang tersedia untuk pemodelan
aplikasi Web normalnya berbasis pada metode
tradisional, seperti ER, atau meningkat
menjadi bahasa pemodelan berorientasi
obyek, misal: UML.
• Metode lebih baru biasanya dibangun di atas
kehebatan metode lebih awal.
51
Metode Pemodelan
• Metode pemodelan mengikuti paradigma berbeda, tergantung
pada asal-usul dan fokusnya:
1) Data-oriented methods berasal dari bidang sistem database;
Sebagian besar berbasis pada model ER yang ditingkatkan
dengan konsep spesifik untuk pemodelan pada tingkatan
hypertext. Fokus utama dari metode ini adalah pemodelan dari
aplikasi web database-driven. Contoh dari metode berorientasi
data termasuk Relationship Management Methodology (RMM)
Hera dan Web Modeling Language (WebML)
2) Hypertext-oriented methods fokus pada karakter hypertext dari
aplikasi Web. Metode ini muncul terutama dari bidang sistem
hypertext. Wakil kelompok ini adalah Hypertext Design Model
(HDM) yang dikembangkan menjadi W2000, dan HDM-lite atau
Web Site Design Method (WSDM).
52
Metode Pemodelan
3) Object-oriented methods didasarkan pada OMT
atau UML. Kategori ini termasuk metode ObjectOriented Hypermedia Design Method (OOHDM)
,UML-based Web Engineering (UWE), ObjectOriented Web Solutions (OOWS) dan ObjectOriented Hypermedia (OO-H).
4) Software-oriented methods fokus terutama pada
aplikasi Web dari pandangan pengembangan
software tradisional, menggunakan teknik yang
betul-betul mengikuti contoh Software Good
klasik. Diantaranya adalah Web Application
Extension (WAE) atau WAE2, versi perbaikannya.
53
Sejarah
Metode
Pemodelan
Aplikasi
Web
54
Overview
Metode
Pemodelan
Aplikasi Web
55
Pengembangan Model-Driven
• Pendekatan Model-Driven Development (MDD) tidak
hanya menganjurkan pemanfaatan model untuk
mengembangkan software, tetapi juga menekankan
butuhnya transformasi dalam semua fase
pengembangan, dari spesifikasi sistem s.d
implementasi dan testing.
• Pengembangan aplikasi web merupakan domain
khusus dimana MDD dapat diterapkan dengan baik,
dikarenakan pemisahan konsen karakteristik spesifik
web – content, hypertext, presentation dan
customization.
• Metode seperti WebML, OO-H dan UWE merupakan
basis yang bagus untuk pendekatan model-driven
dalam pengembangan aplikasi web.
56
Pengembangan Model-Driven
• WebSA (Web Software Architecture) juga
merupakan pendekatan model-driven spesifik
untuk domain Web, didasarkan pada
paradigma MDA (Model-Driven Architecture).
• WebSA menekankan konstruksi dari model
tak-tergantung platform (Platform
Independent Model, PIM) dan bangunan
terotomasi berikutnya dari platform specific
models (PSM), dimana PSM menjadi basis
bagi pembangkitan kode executable.
57
Pengembangan Model-Driven
(Proses Pengembangan WebSA)
58
Tool Pendukung
• Karena pendeknya siklus pengembangan dan
kompleksitas aplikasi web, disarankan
menggunakan tool yang mendukung tidak
hanya pemodelan itu sendiri, tetapi juga
pembangkitan kode otomatis dan
pemeriksaan konsistensi model.
• Contoh tool untuk jenis ini:
1. WebRatio Site Development Studio,
2. VisualWADE, dan
3. OpenUWE Suite
59
Tugas Personal
• Buat makalah tentang konsep MVC (Model – View
– Controller). Jelaskan definisi, arsitektur dan
contoh terapannya!
• Pastikan isi makalah berdasarkan pada referensi,
tidak “NGECAP”. Sebutkan referensinya!
• Waktu: 1 Minggu
• Sifat: Personal (Pribadi)
• Kirimkan makalah tersebut ke email
([email protected]). Upload juga ke blog!
60