You are on page 1of 60

Web Engineering 2010 Pertemuan ke-03

Pemodelan Aplikasi Web
Husni
husni@if.trunojoyo.ac.id 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 .

5 . dilakukan tansformasi untuk menganalisis model dan kemudian merancang model (desain). yang akan dijadikan basis bagi implementasi. atribut dan relasinya ke obyek lain) dan perilaku (yaitu fungsi dan proses) • Melalui perbaikan yang runtut dari kebutuhan yang diidentifikasi dalam analisis kebutuhan.Pemodelan Kebutuhan Aplikasi • Level Application Logic dan user interface adalah enkapsulasi dari “what” dan “how” dari aplikasi • Aspek yang ditangani adalah struktur (yaitu obyek.

• Saat ini banyak didasarkan pada pendekatan objectoriented. Pemodelan dalam Software Engineering fokus pada aspek perilaku. berisikan struktur dan perilaku 6 . yaitu model EntityRelationship (ER) (Chen 1976). untuk memenuhi kebutuhan dari bahasa pemrograman.Pemodelan Data Engineering 2-Pemodelan Software Engineering • Menurut sejarah. Ciri paling penting dari pemodelan berorientasi obyek adalah pendekatan holistik terhadap pemodelan sistem dan merupakan konsep sentral dari obyek. pemodelan Data Engineering fokus pada aspek struktural.Pemodelan Kebutuhan Aplikasi • Akar dari pemodelan dijumpai pada dua sisi: 1.

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 .

• Inilah mengapa dikembangkan pendekatan pemodelan khusus bagi aplikasi web yang mampu menangani aplikasi web dalam tiga dimensi yang telah disebutkan: levels.Prinsip Pemodelan dalam Web Eng. aspects dan phases. • Metode untuk memodelkan aplikasi tradisional tidak cukup ekspresif untuk menegaskan ciri aplikasi web. Contoh. 8 . bahasa pemodelan (seperti UML) tidak menyediakan konsep yang tepat bagi spesifikasi hyperlink.

Pemodelan Kebutuhan Aplikasi Web 9 .

• 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 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.

misalnya corporate portal atau online shopping. aplikasi web yang presentationoriented. • Sebaliknya.Tingkatan Pemodelan • Aplikasi web yang menyediakan user interface hypertext-oriented saja tetapi mempunyai himpunan data besar butuh fokus pada pemodelan content dan struktur hypertext. akan sangat membutuhkan pemodelan presentassi. 11 .

• 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 . hypertext & presentation.Aspects (Aspek) • Struktur dan perilaku dimodelkan pada tiap tingkatan (3 level): content.

dapat mengikuti: 1-pendekatan information-driven : memulai dengan pemodelan content 2-pendekatan presentation-driven: memulai dengan pemodelan aspek presentation dari aplikasi 13 .Phases (Fase) • Urutan langkah pemodelan level-level ditentukan dengan modeler • Tergantung pada jenis aplikasi web.

Didefinisikan sebagai profil UML. hypertext maupun presentation. juga setiap fase dari proses pengembangan • UWE (UML-based Web Engineering): sejalan dengan UML. merupakan ekstensi ringan dari UML 14 .Customization (Penyesuaian) • Mempengaruhi semua dimensi pemodelan web baik content. Struktur dan perilaku.

Pemodelan Kebutuhan • Use cases adalah teknik pemodelan yang lebih disukai untuk kebutuhan fungsional. 15 . karena dapat direpresentasikan secara grafis • Keunikan dari kebutuhan aplikasi web adalah fungsi navigasi agar pengguna dapat menjelajah via hypertext dan menemukan node-node.

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. dan tergantung pada jenis aplikasi web. • Pemodelan content menghasilkan suatu model yang menyusun aspek struktural dari content misalnya berbentuk diagram kelas. aspek perilaku dapat berbentuk diagram status dan interaksi 20 .

Contoh Diagram Kelas 21 .

Contoh Diagram Mesin Status 22 .

model struktur hypertext tersaring. dikenal sebagai model struktur navigasi . yaitu tersedianya path navigasi kepada pengguna. 2. 23 . • Pemodelan hypertext fokus pada aspek struktural dari hypertext dan elemen-elemen aksesnya. dimana elemen-elemen akses berbentuk suatu access model. • Pemodelan hypertext menghasilkan dua hal berikut: 1.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. Mendefinisikan struktur dari hypertext.model struktur hypertext. yaitu kelaskelas mana dari model content yang dapat dikunjungi dengan navigasi.

.Konsep Pemodelan Struktur Hypertext • Pemodelan struktur hypertext didasarkan pada konsep hypertext. • Starting point untuk pembuatan model struktur hypertext biasanya adalah model content yang berisi kelas dan obyek. 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. Diperoleh node-node dalam hypertext. yaitu terhadap node (halaman/dokumen) dan link antar node tersebut. • Model struktur hypertext sering dijadikan sebagai view pada model content .

Contoh Model Struktural Hypertext 25 .

2-Perspective links meletakkan berbagai view dari suatu node dalam hubungan dengan tiap yang lain. tergantung pada aplikasi. 26 . misal: suatu link menunjuk ke “makalah terbaik”.Klasifikasi Link • Metode HDM (Hypertext Design Model) menetapkan jenis link berikut: 1-Structural links menghubungkan elemen-elemen dari node yang sama. misal: versi PostScript dan PDF dalam makalah. 3-Application links meletakkan node-node berbeda dalam relasi untuk tiap yang lain. misal: dari suatu rangkuman review ke detail review.

misal: link-link yang menunjuk dari suatu review tunggal ke daftar semua review. misal: nomor unik dari reviewer.Klasifikasi Link • Metode WebML (Web Modeling Language) didasarkan pada perjalanan informasi selama navigasi. untuk menjelajah dari satu reviewer ke semua review yang dibuat olehnya 2-Non-contextual links tidak punya informasi konteks yang berasosiasi. • Menghasilkan jenis link berikut: 1-Contextual links membawa informasi konteks. 27 .

28 . • 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.Klasifikasi Link • Memperhatikan distribusi node-node pada level hypertext terhadap halaman (page) pada level presentation.

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 • Berdasarkan pada kebutuhan fungsional dari aplikasi Web.

2. misal: link-link internal ke detail review dari salah satu reviewer. 30 . T-links (traversal links) mengarah ke node yang mengcover kebutuhan navigasi lain. misal: dari seorang author ke makalahnya. I-links (internal links) menunjuk ke node di dalam batasan dari kebutuhan navigasi yang diberikan.Klasifikasi Link • Metode pemodelan OO-H (Object-Oriented Hypermedia) mendefinisikan 5 jenis link berikut: 1.

X-links (external links) mengarah ke nodenode eksternal. misal: untuk menambahkan suatu review baru. 5. 31 . S-links (service links) mengarah (dengan link responnya yang bersesuaian) ke layanan.Klasifikasi Link 3. R-links (requirement links) menunjuk ke suatu awal (start) jalur (path) navigasi. misal: ke panduan format eksternal. 4. misal: ke suatu search engine eksternal.

• 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 . disebut pula “hypermedia design patterns” atau “navigation patterns”.Konsep Pemodelan Akses • Struktur akses terulang digambarkan sebagai pola rancangan (design patterns). • Pemanfaatan pola navigasi ini akan meningkatkan kualitas dari model hypertext.

mengarah ke home page dari aplikasi Web 2) landmark. • 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. menunjuk ke suatu node yang dapat dicapai dari dalam semua node. 33 .Konsep Pemodelan Akses • Pola navigasi khusus termasuk: 1) home.

Contoh Model Akses 34 .

beberapa metode menentukan turunan langsung hypertext dari content dengan mendefinisikan node-node atas dasar pandangan 35 . model hypertext lebih kurang sangat tergantung pada model content • Ada ketergantung pada level type.Relasi Model Hypertext & Content • Tergantung pada metode pemodelan yang mendasari. Namun. 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.

forms.Pemodelan Presentasi • Pemodelan presentasi membidik perancangan struktur dan perilaku dari user interface untuk memastikan bahwa interaksi dengan aplikasi Web adalah sederhana dan self-explanatory.. 2) Mendeskripsikan aspek berorientasi perilaku dari user interface. texts. 36 . dll. images. Idealnya menunjukkan komposisi dari setiap page dan rancangan dari fields. • Pemodelan presentasi memberikan dua hasil: 1) menghasilkan suatu konsep presentasi uniform dengan memodelkan elemen-elemen terulang pada page. misalnya headers dan footers. termasuk dalam page ini.

37 images. dll. Dapat tersusun dari unit-unit presentasi berbeda. merepresentasikan suatu penggalan logik dari page. Elemen presentasi mewakili himpunan informasi node dan dapat termasuk text. audio. Menghadirkan node stemming dari model hypertext. 3) presentation element adalah building block dasar dari model presentasi. . 2) presentation unit bertugas mengelompokkan elemen-elemen user interface terkait.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.

Contoh Model Presentasi (Sistem Review Makalah Ilmiah) 38 .

Diagram Overview Interaksi 39 .

Diagram Sequence 40 .

Karena ini. 41 .Relasi Model Presentation & Hypertext • Telah diketahui bagaimana elemen hypertext dipetakan ke elemen presentation. dan untuk navigasi pada level hypertext. harus dipertimbangkan kesesuaiannya dengan link-link lain. • Interaksi yang dipicu oleh pengguna tidak perlu dibatasi hanya untuk level presentation. Kesesuaian ini mungkin dalam bentuk obyek dan logik aplikasi pada level content. Normalnya dikerjakan dengan asumsi semua instance dari suatu node akan ditampilkan pada level presentation.

hasilnya tak selalu model kustomisasi eksplisit • Pada banyak kasus. pemodelan kustomisasi bercampur baur dengan model content. • Tergantung pada metode pemodelan. dan adaptations yang berasal darinya. hypertext dan presentation. 42 .Pemodelan Kustomisasi • Customization modeling bertujuan secara eksplisit merepresentasikan informasi context.

Informasi ini kemudian direpresentasikan dalam model context berbentuk diagram class. location information dan transmission bandwidth. • 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. yaitu berurusan dengan pertanyaan “what” yang akan diadaptasi dan “when”. • Saat runtime. . misal: pengguna mengubah preferensinya atau aplikasi “dinikmati” pada 43 lokasi berbeda. context dapat berubah.Konsep Pemodelan Kustomisasi • Kustomisasi harus berdasarkan situasi pemanfaatan aplikasi web.

Jam kosong). Alamat rumah. jam kerja vs. • Informasi konteks ini dapat pula disediakan untuk aplikasi Web oleh sumber eksternal (misal: Geographic Information Systems (GIS) 44 .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.

Aturan transformasi ini menjelaskan varian yang akan dibuat saat runtime. Kekurangan dari adaptasi statis tumbuh exponential dari varian model yang dipertimbangkan. hypertext dan presentation. 2) dynamic adaptation: menambahkan aturan transformasi context-dependent untuk model content.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. 45 .

Konsep Pemodelan Kustomisasi • Contoh. yaitu varian model yang diadaptasi ke context. misalnya diformulasikan sebagai aturan ECA (Event/Condition/Action). tetapi secara aktual akan dibuat “saat runtime”. Aturan transformasi dinamis. untuk membuat daftar ter-personal dengan makalah-makalah pada topik yang disukai pengguna. dapat menetapkan penambahan dan penghapusan elemen model atau penyaringan instance. akibatnya lebih sulit untuk memahami model tersebut. tidak tersedia secara langsung. 46 . • Kekurangannya: hasilnya.

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. 48 . • UWE mewujudkan perhatian cross-cutting dengan menggunakan paket UML tiruan (stereotyped) bagi bagian pointcut dan bagian advice dari suatu aspek.

49 .Konsep Pemodelan Kustomisasi • Designer menggunakan NavigationAnnotation untuk menambahkan atribut (PresStyle) yang termasuk bagian advice ke himpunan link yang termasuk bagian pointcut.

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 .

seperti ER. • Metode lebih baru biasanya dibangun di atas kehebatan metode lebih awal.Metode Pemodelan: Overview • Metode yang tersedia untuk pemodelan aplikasi Web normalnya berbasis pada metode tradisional. 51 . misal: UML. atau meningkat menjadi bahasa pemodelan berorientasi obyek.

Metode ini muncul terutama dari bidang sistem hypertext.Metode Pemodelan • Metode pemodelan mengikuti paradigma berbeda. 52 . 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. tergantung pada asal-usul dan fokusnya: 1) Data-oriented methods berasal dari bidang sistem database. Wakil kelompok ini adalah Hypertext Design Model (HDM) yang dikembangkan menjadi W2000. Sebagian besar berbasis pada model ER yang ditingkatkan dengan konsep spesifik untuk pemodelan pada tingkatan hypertext. dan HDM-lite atau Web Site Design Method (WSDM). Fokus utama dari metode ini adalah pemodelan dari aplikasi web database-driven.

Kategori ini termasuk metode ObjectOriented Hypermedia Design Method (OOHDM) . menggunakan teknik yang betul-betul mengikuti contoh Software Good klasik. 4) Software-oriented methods fokus terutama pada aplikasi Web dari pandangan pengembangan software tradisional.Metode Pemodelan 3) Object-oriented methods didasarkan pada OMT atau UML.UML-based Web Engineering (UWE). Diantaranya adalah Web Application Extension (WAE) atau WAE2. ObjectOriented Web Solutions (OOWS) dan ObjectOriented Hypermedia (OO-H). versi perbaikannya. 53 .

Sejarah Metode Pemodelan Aplikasi Web 54 .

Overview Metode Pemodelan Aplikasi Web 55 .

hypertext. OO-H dan UWE merupakan basis yang bagus untuk pendekatan model-driven dalam pengembangan aplikasi web. 56 . dari spesifikasi sistem s. tetapi juga menekankan butuhnya transformasi dalam semua fase pengembangan. • Pengembangan aplikasi web merupakan domain khusus dimana MDD dapat diterapkan dengan baik.Pengembangan Model-Driven • Pendekatan Model-Driven Development (MDD) tidak hanya menganjurkan pemanfaatan model untuk mengembangkan software. presentation dan customization. • Metode seperti WebML.d implementasi dan testing. dikarenakan pemisahan konsen karakteristik spesifik web – content.

dimana PSM menjadi basis bagi pembangkitan kode executable. PIM) dan bangunan terotomasi berikutnya dari platform specific models (PSM). didasarkan pada paradigma MDA (Model-Driven Architecture). 57 .Pengembangan Model-Driven • WebSA (Web Software Architecture) juga merupakan pendekatan model-driven spesifik untuk domain Web. • WebSA menekankan konstruksi dari model tak-tergantung platform (Platform Independent Model.

Pengembangan Model-Driven (Proses Pengembangan WebSA) 58 .

dan 3.Tool Pendukung • Karena pendeknya siklus pengembangan dan kompleksitas aplikasi web. • Contoh tool untuk jenis ini: 1. disarankan menggunakan tool yang mendukung tidak hanya pemodelan itu sendiri. OpenUWE Suite 59 . 2. tetapi juga pembangkitan kode otomatis dan pemeriksaan konsistensi model. VisualWADE. WebRatio Site Development Studio.

id). Sebutkan referensinya! • Waktu: 1 Minggu • Sifat: Personal (Pribadi) • Kirimkan makalah tersebut ke email (husni@if. Jelaskan definisi. tidak “NGECAP”. Upload juga ke blog! 60 .ac. arsitektur dan contoh terapannya! • Pastikan isi makalah berdasarkan pada referensi.trunojoyo.Tugas Personal • Buat makalah tentang konsep MVC (Model – View – Controller).