Web Engineering 2010 Pertemuan ke-03 Pemodelan Aplikasi Web

1. Web Engineering 2010Pertemuan ke-03Pemodelan Aplikasi Web Husni husni@if.trunojoyo.ac.id Husni.trunojoyo.ac.id Komputasi.wordpress.com

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

3. 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).

4. Pemodelan Kebutuhan Aplikasi

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

6. 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 Entity-Relationship (ER) (Chen 1976). Pemodelan dalam Software Engineering fokus pada aspek perilaku, untuk memenuhi kebutuhan dari bahasa pemrograman. • Saat inibanyak didasarkan pada pendekatan object-oriented. Ciri paling penting dari pemodelan berorientasi obyek adalah pendekatan holistik terhadap pemodelan sistem dan merupakan konsep sentral dari obyek, berisikan struktur dan perilaku

7. Pemodelan Kebutuhan Aplikasi • Unified Modeling Language (UML) adalah bahasa pemodelan berorientasi obyek • UML memungkinkan kita menetapkan aspek-aspek dari sistem software dalam bentuk model. Juga menggunakan berbagai diagram untuk mewujudkannya secara grafis • UML membentuk basis bagi banyak metode pemodelan aplikasi web

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

9. Pemodelan Kebutuhan Aplikasi Web

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

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

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

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

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

15. 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 navigasiagar pengguna dapat menjelajah via hypertext dan menemukan node-node.

16. Contoh DiagramUse Case

17. Contoh Diagram Aktifitas • Diagram aktifitas (Activity) digunakan ketika use case berpijak pada logik aplikasi yang lebih kompleks.

18. 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:

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

20. Tujuan Pemodelan Content • Pemodelan contentbertujuan mentransfer kebutuhan informasi dan fungsi yang ditentukan oleh rekayasa kebutuhan untuk suatu model. • Pemodelan contentmenghasilkan 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

21. Contoh Diagram Kelas

22. Contoh Diagram Mesin Status

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

24. Konsep Pemodelan Struktur Hypertext • Pemodelan struktur hypertext didasarkan pada konsep hypertext, yaitu terhadap node (halaman/dokumen) dan link antar node tersebut. • Startingpoint 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 content.

25. Contoh Model Struktural Hypertext

26. 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”.

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

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

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

30. Klasifikasi Link • Metode pemodelan OO-H (Object-Oriented Hypermedia) mendefinisikan 5 jenis link berikut: • 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. • T-links (traversal links) mengarah ke node yang mengcover kebutuhan navigasi lain, misal: dari seorang author ke makalahnya.

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

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

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

34. Contoh Model Akses

35. 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 contentdan model hypertext. Namun, beberapa metode menentukan turunan langsung hypertext dari content dengan mendefinisikan node-node atas dasar pandangan

36. 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 uniformdengan 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.

37. 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, images, audio, dll.

38. Contoh Model Presentasi(Sistem Review Makalah Ilmiah)

39. Diagram Overview Interaksi

40. Diagram Sequence

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

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

43. Konsep Pemodelan Kustomisasi • Kustomisasi harus berdasarkan situasi pemanfaatan aplikasi web, yaitu berurusan dengan pertanyaan “what” yang akan diadaptasi dan “when”. • Agar mampu mem-personalizesuatu 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 informationdan 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 lokasi berbeda.

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

45. Konsep Pemodelan Kustomisasi • Adaptasi terhadap suatu konteks dapat dimodelkan dengan salah satu dari dua cara fundamental beikut: 1) Cararesult-oriented (static adaptation) dengan membuat berbagai model atau variasi model dengan melihat pada himpunan berbeda varian dari informasi konteks.Kekurangan dari adaptasi statis tumbuh exponentialdari 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.

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

47. Contoh Kustomisasi

48. 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-cuttingdengan menggunakan paket UML tiruan (stereotyped) bagi bagian pointcutdan bagian advice dari suatu aspek.

49. Konsep Pemodelan Kustomisasi • Designermenggunakan NavigationAnnotationuntuk menambahkan atribut (PresStyle) yang termasuk bagian adviceke himpunan link yang termasuk bagian pointcut.

50. 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 model-model yang dibuat.