Web Engineering 2010

Pertemuan ke-04

Perancangan Aplikasi dengan WebML

Husnihusni@if.trunojoyo.ac.id

Husni.trunojoyo.ac.idKomputasi.wordpress.com

Outline

• Pendahuluan• Mengenal WebML• Rangkuman

• Materi dalam presentasi ini diambil dari webml.org.

Pendahuluan

• Mengapa WebML?

Tujuan WebML

• WebML bermaksudf menyediakan suatu pendekatan terstruktur untuk perancangan situs web yang bersifat Data-intensive.

• Sehimpunan model terintegrasi yang akan membantu designer dalam produksi situs web high-quality.

• Semua aspek desain web akan ditangani• Pemanfaatan metodologi tua atau membingungkan

menjadi “menyusahkan”

Target dari WebML

• Target: Situs web yang data-intensive– Jumlah datanya besar– Interface diarahkan untuk masyarakat umum• Exploratory (berhubungan dengan penjelahan)• Berorientasi Browsing• Terpersonalkan (1 ke 1)

– Isi, struktur, navigasi dan presentasi bersifat Volatile (mudah berubah)

• WebML bukanlah pendekatan yang tepat untuk:– Situs web kecil (Homepage, …)– Situs web statis.

Apa Itu WebML?

• WebML– Suatu bahasa konseptual untuk perancangan high-

level dari situs web.

7

Model WebML

• Model Structure – organisasi data• Model Derivation – definisi data redundant

Derivasi merupakan proses penambahan informasi redundant ke model struktur, dalam rangka memperkuat ekspresinya dan mendefinisikan view dan grouping berbeda dari data yang sama.

• Model Composition – Definisi dari halaman-halaman situs sebagai himpunan (set) dari subhalaman-subhalaman dan unit-unit publikasi elementer.

• Model Navigation : definisi hubungan (link) antar halaman dan antar unit

• Model Presentation : penentuan posisi unit di dalam halaman dan definisi tampilan grafis

Konsep WebML

Site = Structure + Composition + Navigation + Presentation

structurenavigation

+composition

presentationuser models

entities,relationships

units, pages,links

site views styles

Model Struktur

• Pertanyaan– Obyek-obyek apa yang dipublikasikan dalam situs dan bagaimana

mereka terhubung?

• Jawaban– Entity: suatu tipe obyek dalam domain aplikasi tersebut– Attribute: properti skalar dari suatu entitas– Relationship: koneksi antar entitas– IS-A hierarchy: klasifikasi dan pengelomponan (grouping)

• Kompatibel dengan diagram Entity-Relationship dan kelas UML

Model Struktur

• Model Entity-Relationship disederhanakan– Keterkaitan biner antar

entitas– Hirarki IS-A– Atribut-atribut bertipe

sederhana dalam entitas– Model derivasi dapat

diterapkan terhadap data redundant

Book

Author Genre

BestSeller

Model Derivasi

• Data redundant dapat dengan mudah ditetapkan menggunakan WebML-OQL (Object Query Language).

• Contoh– BestSeller := Book dimana Book.Sales > 50,000– Author.BooksNumber = count(self.Author2Book)

BookAuthor

BestSeller

Model Hypertext

• Q1: Informasi apa yang dipublikasikan dalam node-node hypertext?

• Q2: Bagaimana node-node hypertext dihubungkan?• Q3: Bagaimana hypertext dibagi ke dalam halaman-

halaman yang disajikan kepada pengguna?

• A1: Unit-unit isi (content) (Composition)• A2: Link-link (Navigation)• A3: Halaman-halaman (Composition)

Komposisi: Contoh Deskripsi Unit Content

DATAUNIT

INDEXUNIT

content

content

Untuk mempublikasikan informasi tentang obyek

TUNGGAL(Misal: AuthorDetail)

Untuk mempublikasikan daftar obyek

(Misal: IndexOfAuthors)

Komposisi: Contoh rendering unit Content

DATAUNIT

INDEXUNIT

Author first name:XXX last name:YYY

photo:

Index of Authors

• S. Ceri• P. Fraternali• O.Versand

Author

Author

Model Navigasi: Link

entity:author

Book[ author2book ]

Semantik dari link: 1. Menggerakkan dari satu tempat ke tempat lain2. Mengangkut informasi dari satu tempat ke tempat

lain (konteks navigasi)3. Mengaktifkan suatu komputasi (efek samping)

AuthorID dikirimkan

Komposisi: Halaman (Pages)

• Halaman adalah suatu container terstruktur dari unit-unit dan link-link– Mungkin distrukturkan dalam subhalaman-subhalaman– Abstraksi dari screen, frame, card, deck...– Boleh mengclusterkan informasi terkait untuk komunikasi

yang lebih efisien.

• Contoh

AuthorAuthor

index dari authors dan author terpilih

diperlihatkan bersama-sama dalam halaman

yang sama

Tipe Link

• Contextual links– Antar unit– Context dikirimkan

• Non-contextual links– Antar halaman– Tak ada content dikirim

Voyages Books

Akses Write: Operasi WebML

• Beberapa operasi predefined disediakan• Operasi Customized dapat didefinisikan

• Contoh: menghapus (delete) Author

Create Op. X

AuthorAuthor

Delete

Siteviews

• Siteview adalah sehimpunan halaman yang pengguna dapat pengalaman sebagai suatu situs web keseluruhan

• site views berbeda dapat didefinisikan untuk perangkat berbeda dan kelompok pengguna berbeda

• Access control dan multi-devices delivery dicapai melalui Siteviews

Rangkuman

• WebML adalah Domain Specific Language (DSL)– Bukan UML atau MDA– Tetapi…

• WebML adalah mengenai Perancangan dan Pengembangan Model Driven– Fokus pada aplikasi web data-intensive– Pembangkitan kode otomatis dari aplikasi web

• Satu model untuk setiap layer– Content– Navigation– Presentation

• Dukungan Tool!

Referensi

• Bacaan utama– M. Brambilla, S. Comai, P. Fraternali, M. Matera.

"Designing Web Applications with WebML and WebRatio". In book: G. Rossi, O. Pastor, D. Schwabe, L. Olsina (Eds.). Web Engineering: Modelling and Implementing Web Applications. Springer, 2007, ISBN: 978-1846289224• http://webml.org/webml/upload/ent5/1/Chapter 9 - WebML.pdf

• Mengenai content web– www.webratio.com– www.webml.org

Pertanyaan?