ANALYSIS WEB Edinus.ac.id/.../ajar/07_-_RPL.DEF.2013.Analysis_Web_E.pdfAnalysis Web E Content Analysis Interaction Analysis Function Analysis Configuration Analysis ... Halaman Login,

email Fasilkom|| 12/10/2013

ANALYSIS WEB EDefri Kurniawan M.Kom

REKAYASA PERANGKAT LUNAK LANJUT


Objective

Memahami bagaimana melakukan Analisis padaWeb Engineering

Mengenalkan Design Arsitektur Web Engineering


Content

Analysis Web E Content Analysis Interaction Analysis Function Analysis Configuration Analysis

Studi Kasus Pengelolaan Artikel Ilmiah Template Use Case Scenario Use Case Diagram Sequence Diagram

Design Web E Component Design Web E Architectural Design Web E


Intro

Pertanyaan utama pada pemodelan aplikasi web adalah siapa yang akan menggunakan sistem, fitur & fungsi apa yang akan disediakan untuk pengguna?


Intro

Banyak pengembang web berpendapat “Prosespengembangan web harus dilakukan secepatmengkin, analisa-analisa pada umumnyamenghabiskan waktu & memperlambat pekerjaan”

“Apakah pengembang web benar-benar memahamikebutuhan-kebutuhan yang berkaitan denganpermasalahan-permasalahan?”

Roger S.Pressman


ANALYSIS WEB E

Ada 4 (empat) jenis analisis yang dilakukan selamamembangun Web E:

1. Content Analysis2. Interaction Analysis3. Function Analysis4. Configuration Analysis


Content Analysis

1. Content Analysis Mengidentifikasi konten yang akan diberikan pada

web app Konten meliputi teks, grafik, gambar, video dan

audio Pengidentifikasian konten bisa dilakukan dengan

meninjau diagram-diagram yang digunakan padatahap analisis, seperti: Use case, Use Case Scenario Sequence Diagram


Interaction Analysis

2. Interaction Analysis Cara pengguna berinteraksi dengan Web App Dapat digambarkan menggunakan diagram interaksi

(sequence diagram / collaboration diagram)


Function Analysis

3. Function Analysis Fungsi-fungsi apa saja yang yang diberikan, bisa

dilihat dari penggunaan use case diagram Function juga memperlihatkan operasi (aktivitas

yang dilakukan oleh sistem), hal ini dapat dilihat dariUse Case Scenario. Jika diperlukan penggambaranlebih detil dapat menggunakan Activity Diagram.

Fungsi lebih menekankan apa yang dikerjakan olehsistem


Configuration Analysis

4. Analysis Configuration Lingkungan dan infrastruktur dimana WebApp

dijelaskan secara rinci. Webapp dapat berada di Internet atau intranet Selain itu, infrastruktur (yaitu, komponen

infrastruktur dan sejauh mana database akandigunakan untuk menghasilkan konten) untukwebapp harus diidentifikasi pada tahap ini


Studi Kasus Pengelolaan Artikel Ilmiah

ContohUntuk memudahkan artikel ilmiah diperlukan sebuahpengelola artikel ilmiah yg memungkinkan penggunauntuk menentukan kategori artikel, menambahkanartikel dan menghapus artikel. Pengelola artikeltersebut memungkinkan pula pada penggunanyauntuk memberi tanda bintang (rating) pada artikel-artikel ilmiah yang paling disukaPertanyaan Siapa pengguna sistem yang dimaksud? Fitur apa yang perlu disediakan?


Studi Kasus Pengelolaan Artikel Ilmiah

Identifikasi Aktor Pengguna 1 (Aktor Utama): Pengelola (Admin)

Menentukan kategori artikel, Menambahkan artikel dan Menghapus artikel

Pengguna 2 (Aktor Sekunder): Pengunjung Memberi tanda bintang (rating) pada artikel


Use Case Diagram Pengelolaan Artikel


Template Use Case Scenario


Use Case Scenario- Melakukan Login

Title Skenario Melakukan Login

Deskripsi Aktor melakukan login ke webapp

Aktor & Interface Aktor: PengelolaInterface: Halaman Login, Halaman Admin

Pre-condition Pengelola belum melakukan login

Basic Flow -Aktor membuka Halaman Login-Aktor memasukkan username & password-Sistem memeriksa account pengelola apakah valid-Jika valid, Sistem menampilkan Halaman Admin-Jika tidak, Sistem mengkonfirmasi bahwa username & password salah di Halaman Login

Post-condition -Pengelola telah berhasil masuk ke Halaman Admin

Alternative(s) Flow -Pengelola gagal masuk ke sistem


Sequence Diagram - Melakukan Login


Use Case Scenario – Memberi Tanda Bintang

Title Skenario Memberi Tanda Bintang

Deskripsi Aktor memilih artikel & memberikan tanda bintang

Aktor & Interface Aktor: PengunjungInterface: Halaman Utama, Halaman Artikel

Pre-condition Aktor belum memberi bintang pada artikel

Basic Flow -Aktor membuka halaman utama (home page)-Aktor memilih artikel di halaman utama-Sistem menampilkan artikel yang dipilih pada halamanartikel-Aktor memberi tanda bintang pada artikel yg dipilih-Sistem memperbaharui rating artikel yg dipilih

Post-condition -Aktor telah memberi bintang pada artikel yang disuka-Update rating artikel

Alternative(s) Flow -


Sequence Diagram-Memberi Tanda Bintang


Content Analysis

Home Page: Memuat kumpulan artikel

Jenis text Berisi Judul & Deskripsi singkat artikel

Halaman Artikel Menampilkan artikel secara lengkap

Jenis text Berisi Judul, deskripsi lengkap artikel dan star rating


Content Analysis

Halaman Login: Menampilkan Form Login

Jenis text Berisi kolom username & password, tombol submit & batal

Halaman Admin Memuat Menu-menu untuk Admin

Jenis text, gambar Berisi menu-menu dengan gambar sebagai link


Interaction Analysis

Interaksi telah digambarkan melalui Sequence diagram


Function Analysis

Fungsi Pengelola: Login Menentukan kategori artikel Tambah artikel Hapus artikel Logout

Fungsi Pengunjung Cari artikel Memberi tanda bintang


Function Analysis

Fungsi: Login Operasi: - Sistem memeriksa account pengelola apakah valid- Sistem menampilkan Halaman Admin- Sistem mengkonfirmasi bahwa username & password salah di Halaman Login


Configuration Analysis

Webapp akan diakses menggunakan jalur internet (public) http://www.example.com

Server: Lokasi Server di Indonesia (IIX) Disk Space : 1 Gb Bandwidth: 20 Gb

Database: MySQL (Database digunakan untuk menampilkan artikel-artikel di

front-end dan pengelolaan artikel di back-end)


DESIGN WEB E

Sasaran-sasaran perancangan pada aplikasi web: Kesederhanaan Konsistensi Identitas Ketangguhan Kemudahan untuk melakukan navigasi Daya tarik visual Kompabilitas


Component of Web Design

4 (empat) bagian utama Web Design:1. Content: fitur yg akan mempersuasi pengguna2. Technology: cara u/ menerapkan fungsi situs web3. Visuals: form situs dan navigasinya4. Purpose: konsekuensi ekonomi u/ implementasi

situs

(Powel, 2000)


Component of Web Design


WEB E Process - Design

Architectural Design Navigation Design Interface Design Content Design


Architectural Design

Perancangan Arsitektural, meliputi: Arsitektur isi Arsitektur aplikasi

Arsitektur Isi Fokus pada bagaimana objek-objek isi (halaman-halaman

web) distrukturkan untuk direpresentasikan ke pengguna

Arsitektur Aplikasi Fokus pada bagaimana aplikasi web distrukturkan,

bagaimana menangani pemrosesan, pengaturan navigasi& isinya



1. Arsitektur Isi Mendefinisikan struktur keseluruhan halaman-

halaman hypermedia

Terdapat 4 (empat) struktur isi:1. Struktur Linier2. Struktur Grid3. Struktur Hirarki4. Struktur Jaringan


Struktur Linier

Interaksi pengguna dengan aplikasi web yang memperlihatkan urutan yang dapat diramalkan

Contoh: urutan melakukan pemesanan produk (step by step)

Semakin kompleknya aplikasi web saat ini, memungkinkan urutan tidak berjalan secara murnilinier, namun diperkenankan adanya variasi / penyimpangan)


Struktur Linier


Struktur Grid

Diterapkan saat isi dapat diorganisir menjadi 2 (dua) dimensi: vertikal & horizontal

Contoh: aplikasi e-commerce yang menjualalat/tongkat pemukul, dimensi horionzalmenggambarkan jenis tongkat (kayu, besi, dsb) dandimensi vertikal memuat penawaran/harga barang

Arsitektur model grid bermanfaat hanya saat isiaplikasi web bersifat sangat teratur


Struktur Grid


Struktur Hirarki

Merupakan arsitektur yang umum dijumpai padaaplikasi web

Isi pada hirarki paling kiri memungkinkanmempunyai link untuk menuju isi bagian tengahmaupun kanan, sehingga penelusuran dapatdilakukan dengan cepat.

Namun percabangan bisa saja menimbulkankebingunan untuk pengguna


Struktur Hirarki


Struktur Jaringan

Struktur jaringan biasadisebut struktur web murni

Memiliki penelusuranyang fleksibel (tidakkaku)

Namun banyaknya link terkait, dapat jugamenimbulkankebingungan padapengguna



Struktur isi yang terdapat pada aplikasi web, mungkin bisa saja campuran, pada bagian tertentumenggunakan linier, di bagian lain hirarki ataujaringan, dan mungkin di sisi lain menggunakan gris

Sasaran perancangan arsitektur isi adalahmenyesuaikan struktur aplikasi web dengan isi yang akan dipresentasikan serta menyesuaikannyadengan pemrosesan-pemrosesan yang akandijalankan



2. Arsitektur Aplikasi Mendeskripsikan suatu infrastruktur yang

memungkinkan sistem aplikasi berbasis web mencapai sasaran-sasaran bisnisnya

Jacyntho, dkk berpendapat “Aplikasi-aplikasiberbasis web seharusnya dikembangkanmenggunakan lapisan-lapisan (layers) yang masing-masing memberikan perhatian-perhatian kepadahal-hal yang berbeda” [Jac02b]

Pendapat di atas, akhirnya melahirkan konsepArsitektur MVC (Model-View-Controller)



MVC memisahkan tampilan antar muka, logikapemrograman dan model data

Melakukan pemisahan antara antarmuka pengguna, aplikasi, dan navigasi akan menyederhakanimplementasi aplikasi web

Model: merepresentasikan objek data (database), View: merepresentasikan tampilan antar muka Controller: sebagai penghubung/pengendali antar

view dan model


MVC Model


WEB E Process - Design

Pertemuan Selanjutnya Navigation Design Interface Design Content Design


Documents

ANALYSIS WEB Edinus.ac.id/.../ajar/07_-_RPL.DEF.2013.Analysis_Web_E.pdfAnalysis Web E Content Analysis Interaction Analysis Function Analysis Configuration Analysis ... Halaman Login,