REKAYASA PERANGKAT LUNAK LANJUT ANALYSIS WEB E. Defri Kurniawan M.Kom

Ukuran: px

Mulai penontonan dengan halaman:

Download "REKAYASA PERANGKAT LUNAK LANJUT ANALYSIS WEB E. Defri Kurniawan M.Kom"

Hadian Susanto
7 tahun lalu
Tontonan:

1 REKAYASA PERANGKAT LUNAK LANJUT ANALYSIS WEB E Defri Kurniawan M.Kom

2 Objective Memahami bagaimana melakukan Analisis pada Web Engineering Mengenalkan Design Arsitektur Web Engineering

3 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

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

5 Intro Banyak pengembang web berpendapat Proses pengembangan web harus dilakukan secepat mengkin, analisa-analisa pada umumnya menghabiskan waktu & memperlambat pekerjaan Apakah pengembang web benar-benar memahami kebutuhan-kebutuhan yang berkaitan dengan permasalahan-permasalahan? Roger S.Pressman

6 ANALYSIS WEB E Ada 4 (empat) jenis analisis yang dilakukan selama membangun Web E: 1. Content Analysis 2. Interaction Analysis 3. Function Analysis 4. Configuration Analysis

7 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 pada tahap analisis, seperti: Use case, Use Case Scenario Sequence Diagram

8 Interaction Analysis 2. Interaction Analysis Cara pengguna berinteraksi dengan Web App Dapat digambarkan menggunakan diagram interaksi (sequence diagram / collaboration diagram)

9 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 dari Use Case Scenario. Jika diperlukan penggambaran lebih detil dapat menggunakan Activity Diagram. Fungsi lebih menekankan apa yang dikerjakan oleh sistem

10 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 akan digunakan untuk menghasilkan konten) untuk webapp harus diidentifikasi pada tahap ini

11 Studi Kasus Pengelolaan Artikel Ilmiah Contoh Untuk memudahkan artikel ilmiah diperlukan sebuah pengelola artikel ilmiah yg memungkinkan pengguna untuk menentukan kategori artikel, menambahkan artikel dan menghapus artikel. Pengelola artikel tersebut memungkinkan pula pada penggunanya untuk memberi tanda bintang (rating) pada artikelartikel ilmiah yang paling disuka Pertanyaan Siapa pengguna sistem yang dimaksud? Fitur apa yang perlu disediakan?

12 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

13 Use Case Diagram Pengelolaan Artikel

14 Template Use Case Scenario

15 Use Case Scenario- Melakukan Login Title Deskripsi Aktor & Interface Pre-condition Basic Flow Post-condition Alternative(s) Flow Skenario Melakukan Login Aktor melakukan login ke webapp Aktor: Pengelola Interface: Halaman Login, Halaman Admin Pengelola belum melakukan login -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 -Pengelola telah berhasil masuk ke Halaman Admin -Pengelola gagal masuk ke sistem

16 Sequence Diagram - Melakukan Login

17 Use Case Scenario Memberi Tanda Bintang Title Deskripsi Aktor & Interface Pre-condition Skenario Memberi Tanda Bintang Aktor memilih artikel & memberikan tanda bintang Aktor: Pengunjung Interface: Halaman Utama, Halaman Artikel Aktor belum memberi bintang pada artikel Basic Flow Post-condition Alternative(s) Flow - -Aktor membuka halaman utama (home page) -Aktor memilih artikel di halaman utama -Sistem menampilkan artikel yang dipilih pada halaman artikel -Aktor memberi tanda bintang pada artikel yg dipilih -Sistem memperbaharui rating artikel yg dipilih -Aktor telah memberi bintang pada artikel yang disuka -Update rating artikel

18 Sequence Diagram-Memberi Tanda Bintang

19 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

20 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

21 Interaction Analysis Interaksi telah digambarkan melalui Sequence diagram

22 Function Analysis Fungsi Pengelola: Login Menentukan kategori artikel Tambah artikel Hapus artikel Logout Fungsi Pengunjung Cari artikel Memberi tanda bintang

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

24 Configuration Analysis Webapp akan diakses menggunakan jalur internet (public) 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)

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

26 Component of Web Design 4 (empat) bagian utama Web Design: 1. Content: fitur yg akan mempersuasi pengguna 2. Technology: cara u/ menerapkan fungsi situs web 3. Visuals: form situs dan navigasinya 4. Purpose: konsekuensi ekonomi u/ implementasi situs (Powel, 2000)

27 Component of Web Design

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

29 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

30 Architectural Design 1. Arsitektur Isi Mendefinisikan struktur keseluruhan halamanhalaman hypermedia Terdapat 4 (empat) struktur isi: 1. Struktur Linier 2. Struktur Grid 3. Struktur Hirarki 4. Struktur Jaringan

31 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 murni linier, namun diperkenankan adanya variasi / penyimpangan)

32 Struktur Linier

33 Struktur Grid Diterapkan saat isi dapat diorganisir menjadi 2 (dua) dimensi: vertikal & horizontal Contoh: aplikasi e-commerce yang menjual alat/tongkat pemukul, dimensi horionzal menggambarkan jenis tongkat (kayu, besi, dsb) dan dimensi vertikal memuat penawaran/harga barang Arsitektur model grid bermanfaat hanya saat isi aplikasi web bersifat sangat teratur

34 Struktur Grid

35 Struktur Hirarki Merupakan arsitektur yang umum dijumpai pada aplikasi web Isi pada hirarki paling kiri memungkinkan mempunyai link untuk menuju isi bagian tengah maupun kanan, sehingga penelusuran dapat dilakukan dengan cepat. Namun percabangan bisa saja menimbulkan kebingunan untuk pengguna

36 Struktur Hirarki

37 Struktur Jaringan Struktur jaringan biasa disebut struktur web murni Memiliki penelusuran yang fleksibel (tidak kaku) Namun banyaknya link terkait, dapat juga menimbulkan kebingungan pada pengguna

38 Architectural Design Struktur isi yang terdapat pada aplikasi web, mungkin bisa saja campuran, pada bagian tertentu menggunakan linier, di bagian lain hirarki atau jaringan, dan mungkin di sisi lain menggunakan gris Sasaran perancangan arsitektur isi adalah menyesuaikan struktur aplikasi web dengan isi yang akan dipresentasikan serta menyesuaikannya dengan pemrosesan-pemrosesan yang akan dijalankan

39 Architectural Design 2. Arsitektur Aplikasi Mendeskripsikan suatu infrastruktur yang memungkinkan sistem aplikasi berbasis web mencapai sasaran-sasaran bisnisnya Jacyntho, dkk berpendapat Aplikasi-aplikasi berbasis web seharusnya dikembangkan menggunakan lapisan-lapisan (layers) yang masingmasing memberikan perhatian-perhatian kepada hal-hal yang berbeda [Jac02b] Pendapat di atas, akhirnya melahirkan konsep Arsitektur MVC (Model-View-Controller)

40 Architectural Design MVC memisahkan tampilan antar muka, logika pemrograman dan model data Melakukan pemisahan antara antarmuka pengguna, aplikasi, dan navigasi akan menyederhakan implementasi aplikasi web Model: merepresentasikan objek data (database), View: merepresentasikan tampilan antar muka Controller: sebagai penghubung/pengendali antar view dan model

41 MVC Model

42 WEB E Process - Design Pertemuan Selanjutnya Navigation Design Interface Design Content Design

dokumen-dokumen yang mirip

REKAYASA PERANGKAT LUNAK LANJUT. STUDI KASUS PENGELOLAAN ARTIKEL (REV) Defri Kurniawan M.Kom

REKAYASA PERANGKAT LUNAK LANJUT STUDI KASUS PENGELOLAAN ARTIKEL (REV) Defri Kurniawan M.Kom Studi Kasus Sistem Pengelolaan Artikel Untuk memudahkan artikel ilmiah diperlukan sebuah pengelola artikel ilmiah