Rekayasa WebMetodologi pembuatan Aplikasi Web

Rekayasa Web

Rekayasa Web bagian dari Rekayasa Perangkat lunak.

RPL : Bisnis Proses, Flowchart, UML dan DFD.

Basis Data: ERD & TabelIMK : Navigation Tree (SiteMap) & Storyboard

Keahlian bidang Rekayasa Web

Keahlian Prasyarat:

- Pemograman dan Pemodelan berorientasi objek atau Pemodelan berorientasi Struktur dengan UML dan DFD

- Basis Data dgn JDBC, MySQL, dan Java Servlets, atau bahasa lain yg serupa.

- Pemograman Web dengan HTML, JavaScripts, CGI Scripts, dan PHP, atau bahasa lain.

- Web Editor, Frontpage, Abode Dreamweaver atau s/w desain web lainnya.

Metodologi Rekayasa Web

1. Web Site Design Method (WSDM).

2. Scenario-Based Object-Oriented Hypermedia Design Methodology (SOHDM).

3. Relationship-Navigational Analysis (RNA).

4. Object-Oriented Hypermedia Design Model (OOHDM).

5. UML-based Web Engineering (UWE).

6. Hypermedia Flexible Process Modeling (HFPM)

7. W2000

8. Navigational Development Techniques (NDT)

Sumber: Rekayasa Web, Simarmata Janner

UML-based Web Engineering (UWE)

• UWE adalah salah satu metode rekayasa perancangan Website.

• Karakter utamanya adalah pengunaaan UML untuk semua model dan tahapan perancangannya.

UML-based Web Engineering (UWE)

UML-based Web Engineering (UWE)

1. Requirements Model (Use Case Model).

2. Content Model (Conceptual Model).

3. Navigation Model.

4. Presentation Model.

UML-based Web Engineering (UWE)

Requirements Model (Use Case Model).• Use case diagram digunakan untuk

mengambarkan fungsi-fungsi didalam web.• Definisi Aktor dan Definisi Use case.• Activity diagram digunakan untuk

mengambarkan aliran kerja (Workflow) didalam web.

UML-based Web Engineering (UWE)

Content Model/Conceptual Model• Membuat konten web berdasarkan kegiatan aktor

(use case).• Class diagram untuk mengambarkan struktur

web, hubungan kegiatan aktor dan database.• Sequence diagram & State Chart diagram

untuk mengambarkan interaksi dan sifat web.

UML-based Web Engineering (UWE)

Navigation Model• Mendesain alur Navigasi didalam Web.• Mempresentasikan Nodes dan Link didalam

struktur web.• Mencegah disorientasi didalam Web.

UML-based Web Engineering (UWE)

UML-based Web Engineering (UWE)

Presentation Model• Representasi struktur web kedalam

sebuah user interface.• Desain Halaman Web

UML-based Web Engineering (UWE)

Presentation Element didalam UWE•<<page>> Merepresentaikan sebuah halaman web.•<<presentation class>> Group user interface didalam halaman web.•User interface elements

- <<anchor>>- <<Text>>- <<Image>>- <<button>>

WSDM – Web Site Design Method

WSDM – Web Site Design Method

1. Mission Statement Specification.

Membuat spesifiksi Web yang akan dibuat.-Purpose : Goal atau sasaran yang ingin dicapai oleh web yang akan dibuat.-Subject : Informasi atau data yang diolah didalam web.-Target User : Sasaran penguna.

WSDM – Web Site Design Method

2. Audience Modeling

1. Audience Clasification

+ Identifikasi user yang terlibat didalam sistem.

+ Identifikasi kegiatan user didalam sistem.

+ Pembagian user sesuai kegiatan, informasi dan fungsi

+ Bisnis Proses

2. Audience Characterictic.

+ Identifikasi karakter user didalam sistem

+ Definisi Aktor & Use Case, Use Case dan Activity Diagram

WSDM – Web Site Design Method

3. Conceptual Design

1. Task & Information Modeling

+ Desain Struktur dan Interaksi sistem.

+ Class diagram & Sequen diagram.

2. Navigational Design.

+ Desain Navigasi

WSDM – Web Site Design Method

4. Implementation Design

1. Site Structure Design

+ Membuat Site Map

2. Presentation Design.

+ Membuat template halaman web

3. Logical Data Design

+ ERD

WSDM – Web Site Design Method

WSDM – Web Site Design Method

WSDM – Web Site Design Method

5. Implementation

Implementasi dan Testing

WebML – Web Modelling Language

WebML – Web Modelling Language

1. Requirment Specification

+ Analisa kebutuhan (Analisa penguna, Analisa Informasi dan Analisa Teknologi).

+ Bisnis Proses (Deskripsi dan Flowchart).

2. Data Design

+ Desain data dan aliran data User

+ DFD (Diagram konteks, DPF level, Kamus data)

WebML – Web Modelling Language

3. Hypertext Design.

+ Desain halaman web

+ Desain Navigational, Desain Site map, Storyboard.

4. Archiceture Design.

+ Desain arsitektur sistem, relasi user dengan tabel.

+ ER-Diagram & Tabel.

WebML – Web Modelling Language

5. Implementation

+ Pembuatan web

+ Coding

6. Testing & Evalutation

+ Pengujian dan evaluasi terhadap web.

+ Pengujian Tautan (Blackbox testing).

+ Pengujian Coding (Whitebox testing)

+ Pengujian Device+ Pengujian Browser

WebML – Web Modelling Language

7. Deployment

+ Hosting web

8. Maintanance & Evolution

+ Pemeliharaan.

WEB2000

WEB2000

1 Analisa Kebutuhan

a. Analisa Kebutuhan Fungsional

+ Definisi Use case, Use Case

b. Analisa Kebutuhan Navigational

+ Activity Diagram, Sequen Diagram.

2. Desain Hypermedia

+ Sitemap & Storyboard

3. Desain Fungsional

+ Database

+ Class diagram