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

Presentasi berjudul: "Web Engineering 2010 Pertemuan ke-03 Pemodelan Aplikasi Web Husni Husni.trunojoyo.ac.id Komputasi.wordpress.com."— Transcript presentasi:

1 Web Engineering 2010 Pertemuan ke-03 Pemodelan 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. 2

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

4 Pemodelan Kebutuhan Aplikasi 4

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

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 ini banyak 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 6

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 7

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

9 Pemodelan Kebutuhan Aplikasi Web 9

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) 10

11 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 presentation- oriented, misalnya corporate portal atau online shopping, akan sangat membutuhkan pemodelan presentassi. 11

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 12

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 13

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 14

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

16 Contoh Diagram Use Case 16

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

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

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

20 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

21 Contoh Diagram Kelas 21

22 Contoh Diagram Mesin Status 22

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 hypertext menghasilkan 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 hypertext fokus pada aspek struktural dari hypertext dan elemen-elemen aksesnya. 23

24 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 content. 24

25 Contoh Model Struktural Hypertext 25

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

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

28 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

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 29

30 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

31 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 node- node 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

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 32

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

34 Contoh Model Akses 34

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

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

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

38 Contoh Model Presentasi (Sistem Review Makalah Ilmiah) 38

39 Diagram Overview Interaksi 39

40 Diagram Sequence 40

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

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

43 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 lokasi berbeda. 43

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) 44

45 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

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

47 Contoh Kustomisasi 47

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

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

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

51 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

52 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

53 Metode Pemodelan 3) Object-oriented methods didasarkan pada OMT atau UML. Kategori ini termasuk metode Object- Oriented Hypermedia Design Method (OOHDM),UML-based Web Engineering (UWE), Object- Oriented Web Solutions (OOWS) dan Object- Oriented 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

54 Sejarah Metode Pemodelan Aplikasi Web 54

55 Overview Metode Pemodelan Aplikasi Web 55

56 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

57 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

58 Pengembangan Model-Driven (Proses Pengembangan WebSA) 58

59 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

60 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 (husni@if.trunojoyo.ac.id). Upload juga ke blog! 60