UML UNTUK APLIKASI WEB Budi Susanto

Pengantar • Halaman web seharusnya dimodelkan sebagai sebuah

class dalam model rancangan internal. • Class untuk sebuah web disandingkan sangat dekat

dengan class-class dan komponen lain yang membangun lapisan presentasi Web.

• Namun sayangnya blok pembangun UML standar tidak mencukupi untuk mengekspresikan halaman web sebagai objek.

Pengantar • Halaman web dapat mengandung script yang dijalankan

di sisi server, yang berinteraksi dengan sesumber di sisi server sebelum dikirimkan ke browser sebagai sebuah halaman web lengkap.

• Halaman web mungkin juga mengandung script yang dijalankan di browser.

• Web Application Extention (WAE) untuk UML memungkinkan untuk menyatakan halaman web dan arsitektural lain dalam model perancangan lapisan presentasi Web.

Perluasan UML • Bentuk perluasan UML diekspresikan dalam bentuk

stereotype, tagged value, dan atau constraint. • Stereotype

•  sebuah perluasan vocabulary yang memberikan arti baru pada sebuah elemen model UML (misalnya: sebuah class)

•  Tagged value •  didefinisikan sebagai sebuah properti baru yang diasosiasikan

dengan sebuah elemen model •  Class UML memiliki nama, visibility, persistence, dan properti lain

• Constraint •  menyatakan kondisi dimana model dapat dianggap terbentuk

dengan baik.

Controh Stereotype dan Tagged Value /** * @opt attributes * @opt operations * @opt types * @hidden */ class UMLOptions {} /** @hidden */ class Action {} /** * @stereotype container * @tagvalue version 3.2 */ class ActionQueue { void add(Action a) {}; /** @tagvalue version 1.0 */ void add(Action a, int n) {}; void remove(int n) {}; /** @stereotype query */ int length() {}; /** @stereotype "helper functions" */ void reorder() {}; }

Stereotype WEA • Class Stereotype

• Server Page • Client Page •  Form •  Frameset •  Target • Script Library

• Association Stereotype •  Link • Build • Submit • Redirect •  Forward • Object •  Include • Script

Halaman Client • Halaman client adalah halaman web dengan format

HTML • Constraint: tidak ada •  Tagged Values

•  TitleTag •  BaseTag •  BodyTag

Halaman Server • Contraint: hanya dapat memiliki relasi dengan objek di sisi

server •  Tagged Values: tidak ada

Form • Constraint: tidak ada •  Tagged Values:

•  GET atau POST

Contoh

Contoh

UML untuk model UX

UML Internal Model

Association Stereotype WAE Association Stereotype

Source Target Description

<<link>> <<Client Page>> <<Client Page>> <<Server Page>> <<Screen>>

abstraksi <a href=“...”>

<<build>> <<Server Page>> <<Client Page>> output HTML <<submit>> <<Form>> <<Server Page>> <<redirect>> <<Client Page>>

<<Server Page>> <<Client Page>> <<Server Page>>

<<forward>> <<Server Page>> <<Client Page>> <<Server Page>>

<<include>> <<Server Page>> <<Client Page>> <<Server Page>>

<<object>> <<Client Page>> Applet, ActiveX <<script>> <<Client Page>> <<Script Library>>

Parameter Tautan

Parameter Tautan

Sequence Diagram Web

Client-side

TERIMA KASIH