BAB III ANALISA DAN PERANCANGAN

Transkripsi

1 BAB III ANALISA DAN PERANCANGAN 3.1 Analisis Sistem Dalam tahap merancang bangun aplikasi jurus Judo, tahap-tahap yang harus dilakukan adalah tahap analisis kemudian dilanjutkan dengan tahap konsep perancangan aplikasi tersebut. Pada tahap pertama penulis menganalisa kebutuhan dasar yang ada pada sistem yang akan dibuat, yang biasa dilakukan adalah mempresentasikan suatu masalah, sehingga data tersebut dapat diketahui spesifikasi kebutuhannya. Di dalam aplikasi ini penulis membahas beberapa teknik gerakan bantingan dasar di dalam Judo. 3.2 Analisis Kebutuhan Dalam melakukan penelitian, dibutuhkan beberapa komponen mendukung terhadap keberhasilan peneliltian ini yaitu : 1. Perangkat lunak (software) a. Sistem operasi Windows 7 b. Software animasi Adobe Flash CS3 c. Software Adobe Photoshop CS3 2. Perangkat keras (hardware) Seperangkat Komputer yang 3.3 Konsep Aplikasi simulasi ini merupakan aplikasi yang dibuat untuk digunakan oleh masyarakat umum yang ingin belajar teknik gerakan bantingan dalam Judo. Aplikasi 29

2 30 ini mempergunakan suara, teks, gambar dan animasi untuk penjelasan agar lebih menarik serta lebih mudah di pahami. Deskripsi konsep aplikasi ini adalah sebagai berikut : Tabel 3.1 Deskripsi Konsep Aplikasi Judul Pengguna Gambar Suara Animasi teks Interaktif Aplikasi Jurus Judo Masyarakat dan semua kalangan pecinta Judo Menggunakan file berformat.gif yang dibuat sendiri Menggunakan file berformat mp3 Animasi pada teks dan gambar dibuat sendiri Menggunakan script yang dimasukan kedalam aplikasi Aplikasi ini juga dikemas dalam bentuk.swf sehingga bisa langsung digunakan pada laptop atau komputer yang sudah terinstal Adobe Flash CS Perancangan Pada bagian ini penulis akan dijelaskan secara rinci Rancang Bangun Aplikasi Jurus Judo yang meliputi pemodelan use case diagram, perancangan storyboard, sequence diagram, activity diagram dan perancangan antarmuka. 1. Pembuka Halaman ini terdapat empat pilihan tombol dan animasi pembuka. Tombol start akan membawa user ke menu utama, sedangkan tombol akan membawa user keluar dari aplikasi dan tombol bantuan penggunaan akan menampilkan cara penggunaan aplikasi sedangkan tombol sound untuk mematikan suara.

3 31 2. Menu Utama Pada halaman ini terdapat berbagai pilihan yang berfungsi mengarahkan user kehalaman yang di inginkan. 3. Gokyu 1 Pada halaman ini terdapat 5 (lima) pilihan gerakan bantingan. User dapat memilih berbagai gerakan yang ada, Yaitu gerakan bantingan ogoshi, osotogari, hizaguruma, ouchigari, ukigoshi dan dapat pula kembali ke menu sebelumnya, yaitu menu utama. 4. Gokyu 2 Pada halaman ini terdapat 6 (enam) pilihan gerakan bantingan. Yaitu, Kouchigari, Tsurikomi, Taiotoshi, Haraigoshi, Uchimata, Koshiguruma. Pada halaman ini user juga dapat kembali kehalaman menu utama. 5. Gokyu 3 Pada halaman ini terdapat 5 (lima) pilihan gerakan bantingan. User dapat memilih berbagai gerakan yang ada, Yaitu gerakan bantingan Ashiguruma, Hanegoshi, Haraitsuri, Kosotogake, Sodetsuri dan dapat pula kembali ke menu sebelumnya, yaitu menu utama. 6. Gokyu 4 Pada halaman ini terdapat 3 (tiga) pilihan gerakan bantingan. User dapat memilih berbagai gerakan yang ada, Yaitu gerakan bantingan Oguruma, Ukiotoshi, Utsurigoshi dan dapat pula kembali ke menu sebelumnya, yaitu menu utama. 7. Gokyu 5 Pada halaman ini terdapat 4 (empat) pilihan gerakan bantingan. User dapat memilih berbagai gerakan yang ada, Yaitu gerakan bantingan Ukiwaza, Yokogake, Yokoguruma, Ushirogoshi dan dapat pula kembali ke menu sebelumnya, yaitu menu utama. 31

4 32 8. Credit Pada halaman ini adalah halaman penutup yaitu berisi profil penulis dan keluar dari aplikasi tersebut Perancangan Peta Navigasi Peta navigasi ini memudahkan untuk merancang aplikasi yang akan dibuat dalam menentukan lokasi pada setiap halaman yang ada. Berikut ini adalah gambar peta navigasi dari rancang bangun aplikasi jurus Judo.

5 33 Gokyu 1 OGOSHI OSOTOGARI HIZAGURUMA OUCHIGARI UKIGOSHI KOUCHIGARI TSURIKOMI Gokyu 2 TAIOTOSHI HARAIGOSHI UCHIMATA KOSHIGURUMA INTRO Gokyu 3 ASHIGURUMA HANEGOSHI HARAITSURI KOSOTOGAKE SODETSURI Gokyu 4 OGURUMA UKIOTOSHI UTSURIGOSHI Gokyu 5 CREDIT UKIWAZA YOKOGURUMA USHIROGOSHI YOKOGAKE Gambar 3.1 Diagram Peta Navigasi

6 Perancangan Storyboard Selanjutnya adalah membuat storyboard. Storyboard merupakan deskripsi masing-masing tampilan suatu kejadian dari movie yang akan dimainkan. Dengan mencantumkan semua objek atau elemen-elemen multimedia serta komponen-komponen aplikasi yang akan dibuat. Satu kolom storyboard mewakili satu tampilan dilayar monitor. 1. Storyboard Halaman Awal Modul : Pembukaan Nama Scene : Home Gambar : Background Dojo (Tempat Latihan Judo) Animasi : Pintu Navigasi Logo Umb Profil Penulis Bantuan Sound Sound : Linkin Park Nobody Listening Animasi Navigasi : Start Start Sound Bantuan : Menuju menu utama : Mengecilkan / membesarkan volume lagu : Menampilkan cara penggunaan aplikasi Gambar 3.2 Storyboard Halaman Awal Pada halaman ini menampilkan animasi, teks dan suara. Halaman awal ini bertujuan untuk menampilkan judul dari aplikasi ini dan terdapat tombol untuk masuk ke halaman menu utama dan keluar dari aplikasi.

7 35 2. Storyboard Halaman Menu Modul Nama Scene Gambar Animasi Sound : Pembukaan : Home : Background Dojo (Tempat Latihan Judo) : Tombol : Linkin Park Nobody Listening Bantuan Sound Navigasi : Tombol 1 : Menuju ke halaman Gokyu 1 Tombol 2 : Menuju ke halaman Gokyu 2 Tombol 3 : Menuju ke halaman Gokyu 3 Tombol 4 : Menuju ke halaman Gokyu 4 Tombol 5 : Menuju ke halaman Gokyu 5 Sound : Untuk mengecilkan atau membesarkan volume Bantuan : Menampilan cara penggunaan aplikasi : Menuju profil penulis / keluar aplikasi Menu Gambar 3.3 Storyboard Halaman Menu

8 36 3. Storyboard Gokyu 1 Modul : Pembukaan Nama Scene : Gokyu 1 Gambar : Background Dojo (Tempat Latihan Judo) Animasi : Tombol Sound : Linkin Park Nobody Listening Back Bantuan Navigasi : Gokyu 1 1 : Simulasi teknik bantingan Ogoshi 2 : Simulasi teknik bantingan Osotogari 3 : Simulasi teknik bantingan Hizaguruma 4 : Simulasi teknik bantingan Ouchigari 5 : Simulasi teknik bantingan Ukigoshi Bantuan : Menampilkan cara penggunaan aplikasi : Menuju profil penulis / keluar aplikasi Back : Kembali ke halaman Menu Gambar 3.4 Storyboard Halaman Gokyu 1

9 37 4. Storyboard Gokyu 2 Modul : Pembukaan Nama Scene : Gokyu 2 Gambar : Background Dojo (Tempat Latihan Judo) Animasi : Tombol Sound : Linkin Park Nobody Listening Back Bantuan Navigasi : Gokyu 2 1 : Simulasi teknik bantingan Kouchigari 2 : Simulasi teknik bantingan Tsurikomi : Simulasi teknik bantingan Taiotoshi 4 : Simulasi teknik bantingan Haraigoshi : Simulasi teknik bantingan Uchimata 6 : Simulasi teknik bantingan Koshiguruma Bantuan : Menampilkan Gambar cara 3.5 Storyboard penggunaan Halaman aplikasi Gokyu 2 : Menuju profil penulis / keluar aplikasi Back : Kembali ke halaman Menu Gambar 3.5 Storyboard Halaman Gokyu 2

10 38 5. Storyboard Gokyu 3 Modul : Pembukaan Nama Scene : Gokyu 3 Gambar : Background Dojo (Tempat Latihan Judo) Animasi : Tombol Sound : Linkin Park Nobody Listening Back Bantuan Navigasi : 1 : Simulasi teknik bantingan Ashiguruma 2 : Simulasi teknik bantingan Hanegoshi 3 : Simulasi teknik bantingan Haraitsuri 4 : Simulasi teknik bantingan Kosotogake 5 : Simulasi teknik bantingan Sodetsuri Bantuan : Menampilkan cara penggunaan aplikasi : Menuju profil penulis / keluar aplikasi Back : Kembali ke halaman Menu Gokyu Gambar 3.6 Storyboard Halaman Gokyu 3

11 39 6. Storyboard Gokyu 4 Modul : Pembukaan Nama Scene : Gokyu 4 Gambar : Background Dojo (Tempat Latihan Judo) Animasi : Tombol Sound : Linkin Park Nobody Listening Back Bantuan Navigasi : Gokyu 4 1 : Simulasi teknik bantingan Oguruma 2 : Simulasi teknik bantingan Ukiotoshi 3 : Simulasi teknik bantingan Utsurigoshi Bantuan : Menampilkan cara penggunaan aplikasi : Menuju profil penulis / keluar aplikasi Back : Kembali ke halaman Menu Gambar 3.7 Storyboard Halaman Gokyu 4

12 40 7. Storyboard Gokyu 5 Modul : Pembukaan Nama Scene : Gokyu 5 Bantuan Back Gambar : Background Dojo (Tempat Latihan Judo) Animasi : Tombol Sound : Linkin Park Nobody Listening Navigasi : 1 : Simulasi teknik bantingan Ukiwaza Gokyu 5 2 : Simulasi teknik bantingan Ushirogoshi 1 3 : Simulasi teknik bantingan Yokogake 2 4 : Simulasi teknik bantingan Yokoguruma 3 Bantuan : Menampilkan cara penggunaan aplikasi 4 : Menuju profil penulis / keluar aplikasi Back : Kembali ke halaman Menu Gambar 3.8 Storyboard Halaman Gokyu 5

13 41 8. Storyboard Credit Modul : Credit Nama Scene : Credit Gamnbar : Background Dojo (Tempat Latihan Judo) Animasi : Tulisan Berjalan Sound : Pas Band - Jengah Navigasi : Sound Sound : keluar aplikasi : Mengecilkan / membesarkan volume lagu Gambar 3.9 Storyboard Halaman Credit Perancangan Antar Muka Pada rancangan aplikasi ini user harus dapat berintraksi karena terdapat tombol-tombol yang akan menjalankan proses-proses dalam aplikasi, sehingga dengan demikian user dapat memahami tentang aplikasi ini. Karena user tersebut dapat terlibat dan sesuai dengan apa yang diinginkan. Adapun rancangan sistemnya pada aplikasi ini adalah : a. Rancangan Tampilan Halaman Awal Halaman ini adalah halaman yang akan ditampilkan saat pertama kali aplikasi dijalankan. Pada halaman ini akan ditampilkan beberapa animasi untuk lebih menarik user dalam mengoperasikan aplikasi ini. Animasi berupa pintu kebuka dan keterangan tentang judul aplikasi yang akan digunakan, pembuat, dan jurusan dari pembuat aplikasi. Selain menampilkan beberapa item keterangan, halaman ini juga terdapat dua buah tombol untuk melakukan navigasi ke layar berikutnya, yaitu tombol start untuk menuju ke halaman utama, dan tombol untuk keluar dari aplikasi.dan satu tombol bantuan untuk menampilkan cara penggunaan aplikasi. Dan tombol Sound untuk menghentikan lagu. Dan untuk memperindah tampilan, maka dibuat juga beberapa animasi berupa text blur dan text muncul pada aplikasi.

14 42 Bantuan Penggunaan SOUND GAMBAR START Gambar 3.10 : Rancangan Tampilan Halaman Awal a. Rancangan Tampilan Halaman Menu Halaman kedua ini merupakan halaman utama dalam aplikasi ini. Pada halaman kedua ini, user dapat memilih berbagai pilihan yang tersedia. User dapat melanjutkan ke halaman berikutnya yaitu halaman Gokyu 1, Gokyu 2, Gokyu 3, Gokyu 4, Gokyu 5 dan tombol bantuan untuk menampilkan cara penggunaan aplikasi dan dan tombol sound untuk menghentikan lagu dan bisa juga keluar dari aplikasi tersebut. Bantuan penggunaan SOUND GAMBAR Menu Gokyu 1 Gokyu 2 Gokyu 3 Gokyu 4 Gokyu 5 Gambar 3.11 : Rancangan Tampilan Halaman Menu

15 43 b. Rancangan Tampilan Halaman Gokyu 1 Pada halaman ini terdapat beberapa pilihan teknik bantingan yang dapat dipilih oleh user. Pada halaman ini juga terdapat tombol back,bantuan penggunaan, jurus-jurus judo untuk user dapat kembali lagi ke menu utama, menampilkan cara penggunaan aplikasi dan menampilkan simulasi animasi jurus-jurus pada Gokyu 1. Tombol untuk ke menu credit atau keluar aplikasi. Back Bantuan ANIMASI Gokyu 1 Ogoshi Osotogari Hizaguruma Ouchigari Ukigoshi Gambar 3.12 : Rancangan Tampilan Halaman Gokyu 1

16 44 c. Rancangan Tampilan Halaman Gokyu 2 Pada halaman ini terdapat beberapa pilihan teknik bantingan yang dapat dipilih oleh user. Pada halaman ini juga terdapat tombol back,bantuan penggunaan, jurus-jurus judo untuk user dapat kembali lagi ke menu utama, menampilkan cara penggunaan aplikasi, dan menampilkan simulasi animasi jurus-jurus pada Gokyu 2. Tombol untuk ke menu credit atau keluar aplikasi. Back Bantuan Penggunaan ANIMASI Gokyu 2 KOUCHIGARI TSURIKOMI TAIOTOSHI HARAIGOSHI UCHIMATA KOSHIGURUMA Gambar 3.13 : Rancangan Tampilan Halaman Gokyu 2

17 45 d. Rancangan Tampilan Halaman Gokyu 3 Pada halaman ini terdapat beberapa pilihan teknik bantingan yang dapat dipilih oleh user. Pada halaman ini juga terdapat tombol back, bantuan penggunaan, jurus-jurus judo untuk user dapat kembali lagi ke menu utama, menampilkan cara penggunaan aplikasi dan menampilkan simulasi animasi jurus-jurus pada Gokyu 3. Tombol untuk ke menu credit atau keluar aplikasi. Back Bantuan Penggunaan ANIMASI Gokyu 3 ASHIGURUMA HANEGOSHI HARAITSURI KOSOTOGAKE SODETSURI Gambar 3.14 : Rancangan Tampilan Halaman Gokyu 3

18 46 e. Rancangan Tampilan Halaman Gokyu 4 Pada halaman ini terdapat beberapa pilihan teknik bantingan yang dapat dipilih oleh user. Pada halaman ini juga terdapat tombol back, bantuan penggunaan, jurus-jurus judo untuk user dapat kembali lagi ke menu utama, menampilkan cara penggunaan aplikasi dan menampilkan simulasi animasi jurus-jurus pada Gokyu 4. Tombol x untuk ke menu credit atau keluar aplikasi. Back Bantuan Penggunaan ANIMASI Gokyu 4 OGURUMA UKIOTOSHI UTSURIGOSHI Gambar 3.15 : Rancangan Tampilan Halaman Gokyu 4

19 47 f. Rancangan Tampilan Halaman Gokyu 5 Pada halaman ini terdapat beberapa pilihan teknik bantingan yang dapat dipilih oleh user. Pada halaman ini juga terdapat tombol back, bantuan penggunaan, jurus-jurus judo untuk user dapat kembali lagi ke menu utama, menampilkan cara penggunaan aplikasi dan menampilkan simulasi animasi jurus-jurus pada Gokyu 5. Tombol untuk ke menu credit atau keluar aplikasi. Back Bantuan Penggunaan ANIMASI Gokyu 5 UKIWAZA YOKOGAKE USHIROGOSHI YOKOGURUMA Gambar 3.16 : Rancangan Tampilan Halaman Gokyu 5

20 48 g. Rancangan Tampilan Halaman Credit Tampilan credit ini menampilkan profil pembuat aplikasi seperti nama, Tujuan Aplikasi, Thanx to, Support, universitas. Dan terdapat tombol suara dan untuk menghentikan suara dan keluar dari aplikasi. Adapun rancangan tampilanya adalah sebagai berikut: SOUND PROFIL Gambar 3.17 : Rancangan Tampilan Halaman Credit Perancangan Use Case Diagram Diagram ini menunjukkan fungsionalitas suatu sistem atau kelas dan bagaimana sistem berinteraksi dengan dunia luar. Aktor memperlihatkan himpunan pengguna use case, himpunan sesuatu yang berinteraksi dengan sistem yang akan digunakan. Kita harus mengidentifikasi aktor dan memahami bagaimana aktor akan menggunakan dan berinteraksi dengan sistem. Pada aplikasi jurus Judo ini, dapat diidentifikasikan bahwa aktor utamanya adalah user (pengguna). Dari identifikasi aktor tersebut, maka akan didapatkan satu use case diagram dan beberapa skenario yang

21 49 memperlihatkan interaksi-interaksi use case dengan aktor. Use case diagram Rancang Bangun Aplikasi Jurus Judo dapat dilihat pada Gambar berikut : GOKYU 1 Profil GOKYU 2 Menu Utama GOKYU 3 GOKYU 4 Keluar GOKYU 5 Gambar 3.18 : Use Case Diagram

22 50 Tabel 3.2 Use Case Aplikasi Nama Aktor Deskripsi Skenario Kondisi Awal Kondisi Akhir Melihat Masyarakat dan pecinta Judo User dapat memilih menu animasi jurus Judo. 1. User memilih menu aplikasi 2. Sistem masuk ke halaman menu aplikasi di mana terdapat delapan tombol, Gokyu 1, Gokyu 2, Gokyu 3, Gokyu 4, Gokyu 5, bantuan penggunaan, sound, keluar 3. Sistem menampilkan animasi Gokyu 1 4. Sistem menampilkan animasi Gokyu 2 5. Sistem menampilkan animasi Gokyu 3 6. Sistem menampilkan animasi Gokyu 4 7. Sistem menampilkan animasi Gokyu 5 8. Sistem menampilkan bantuan penggunaan 9. Sistem menampilkan sound 1. User menerima halaman menu yang di dalamnya terdapat delapan tombol. User memilih tombol-tombol yang ada 1. User memahami jurus Judo Perancangan Activity Diagram Activity diagram menunjukkan langkah demi langkah untuk melakukan komputasi. Setiap langkah adalah sebuah keadaan dalam melakukan sesuatu. Diagram ini menggambarkan langkah yang mana yang harus dijalankan secara berurutan dan langkah mana yang bisa dijalankan secara bersamaan.

23 51 1. Perancangan Activity Diagram Halaman Menu Utama Aktifitas dimulai ketika pengguna memilih masuk, kemudian sistem menampilkan halaman menu utama, aktifitas selanjutnya adalah memilih halaman berikutnya terdiri dari, Gokyu 1, Gokyu 2, Gokyu 3, Gokyu 4, Gokyu 5 dan Keluar. Kemudian sistem akan menampilkan halaman yang dipilih. PENGGUNA SISTEM Membuka Aplikasi Menampilkan tombol pada menu utama : Gokyu 1, Gokyu 2, Gokyu 3, Gokyu 4, Gokyu 5, keluar, sound, bantuan penggunaan Memilih Menu yang diinginkan Menampilkan menu yang dipilih Gambar 3.19 : Activity Diagram Halaman Menu Utama

24 52 2. Perancangan Activity Diagram Halaman Gokyu 1 Aktifitas dimulai ketika pengguna memilih tombol Gokyu 1 kemudian sistem menampilkan halaman Gokyu 1, aktifitas selanjutnya adalah memilih delapan tombol yang ada di halaman Gokyu 1. Kemudian sistem akan menampilkan animasi Gokyu 1 tersebut. Pengguna Sistem Memilih menu Gokyu 1 pada menu utama Menampilkan lima tombol animasi Gokyu 1, dan tiga tombol untuk kembali ke menu utama, bantuan penggunaan, dan keluar yang ada di halaman Gokyu 1 Memilih tombol yang diinginkan Menampilkan animasi yang dipilih Gambar 3.20 Activity Diagram Halaman Gokyu 1

25 53 3. Perancangan Activity Diagram Halaman Gokyu 2 Aktifitas dimulai ketika pengguna memilih tombol Gokyu 2 kemudian sistem menampilkan halaman Gokyu 2, aktifitas selanjutnya adalah memilih Sembilan tombol yang ada di halaman Gokyu 2. Kemudian sistem akan menampilkan animasi Gokyu 2 tersebut. Pengguna Sistem Memilih menu Gokyu 2 pada menu utama Menampilkan enam tombol animasi Gokyu 2, dan tiga tombol untuk kembali ke menu utama, bantuan penggunaan, dan keluar Memilih tombol yang diinginkan Menampilkan animasi yang dipilih Gambar 3.21 Activity Diagram Halaman Gokyu 2

26 54 4. Perancangan Activity Diagram Halaman Gokyu 3 Aktifitas dimulai ketika pengguna memilih tombol Gokyu 3 kemudian sistem menampilkan halaman Gokyu 3, aktifitas selanjutnya adalah memilih delapan tombol yang ada di halaman Gokyu 3. Kemudian sistem akan menampilkan animasi Gokyu 2 tersebut. Pengguna Sistem Memilih menu Gokyu 3 pada menu utama Menampilkan lima tombol animasi Gokyu 3, dan tiga tombol untuk kembali ke menu utama, bantuan penggunaan, dan keluar Memilih tombol yang diinginkan Menampilkan animasi yang dipilih Gambar 3.22 Activity Diagram Halaman Gokyu 3

27 55 5. Perancangan Activity Diagram Halaman Gokyu 4 Aktifitas dimulai ketika pengguna memilih tombol Gokyu 4 kemudian sistem menampilkan halaman Gokyu 4, aktifitas selanjutnya adalah memilih enam tombol yang ada di halaman Gokyu 4. Kemudian sistem akan menampilkan animasi Gokyu 4 tersebut. Pengguna Sistem Memilih menu Gokyu 4 pada menu utama Menampilkan tiga tombol animasi Gokyu 4, dan tiga tombol untuk kembali ke menu utama, bantuan penggunaan, dan keluar Memilih tombol yang diinginkan Menampilkan animasi yang dipilih Gambar 3.23 Activity Diagram Halaman Gokyu 4 6. Perancangan Activity Diagram untuk halaman Gokyu 5 Aktifitas dimulai ketika pengguna memilih tombol Gokyu 5 kemudian sistem menampilkan halaman Gokyu 5, aktifitas selanjutnya adalah

28 56 memilih tujuh tombol yang ada di halaman Gokyu 5. Kemudian sistem akan menampilkan animasi Gokyu 5 tersebut. Pengguna Sistem Memilih menu Gokyu 5 pada menu utama Menampilkan empat tombol animasi Gokyu 5, dan tiga tombol untuk kembali ke menu utama, bantuan penggunaan, dan keluar Memilih tombol yang diinginkan Menampilkan animasi yang dipilih Gambar 3.24 Activity Diagram Halaman Gokyu Perancangan Sequence Diagram Sebuah sequence diagram secara khusus menjabarkan aktifitas sebuah skenario tunggal. Diagram tersebuat menunjukkan sejumlah objek contoh dan pesanpesan melalui objek-objek di dalam use case diagram (Fowler, 2005:81). Dari bentuk use case yang telah di gambarkan sebelumnya, dapat dibuat sequence diagram.

29 57 1. Perancangan untuk halaman Jurus Gokyu 1 Sequence diagram untuk halaman Gokyu 1 menggambarkan skenario dan langkah-langkah yang dilakukan pengguna. Pertama pengguna masuk halaman menu utama, selanjutnya pengguna memilih menu Gokyu 1, dan pengguna akan di bawa oleh sistem ke halaman Gokyu 1. Di halaman Gokyu 1 pengguna dapat memilih 5 pilihan Gokyu 1, dan bisa juga kembali ke halaman sebelumnya, yaitu halaman menu utama. Pengguna juga dapat menampilkan bantuan penggunaan dan keluar dari aplikasi. Pengguna memilih salah satu pilihan Gokyu 1, dan sistem akan memberikan tampilan animasi Gokyu 1 tersebut kepada pengguna. halaman menu utama halaman Gokyu 1 1. Menuju menu utama Pengguna 2. Menuju halaman Gokyu 1 3. Tampilan halaman Gokyu 1 4. Memilih animasi Gokyu 1 5. Tampilan animasi Gokyu 1 Gambar 3.25 Sequence Diagram Halaman Gokyu 1 2. Perancangan untuk halaman Jurus Gokyu 2 Sequence diagram untuk halaman Gokyu 2 menggambarkan skenario dan langkah-langkah yang dilakukan pengguna. Pertama pengguna masuk halaman menu utama, selanjutnya pengguna memilih menu Gokyu 2, dan pengguna akan di bawa oleh sistem ke halaman Gokyu 2. Di halaman

30 58 Gokyu 2 pengguna dapat memilih 6 pilihan Gokyu 2, dan bisa juga kembali ke halaman sebelumnya, yaitu halaman menu utama. Pengguna juga dapat menampilkan bantuan penggunaan dan keluar dari aplikasi. Pengguna memilih salah satu pilihan Gokyu 2, dan sistem akan memberikan tampilan animasi Gokyu 2 tersebut kepada pengguna. halaman menu utama halaman Gokyu 2 1. Menuju menu utama Pengguna 2. Menuju halaman Gokyu 2 3. Tampilan halaman Gokyu 2 4. Memilih animasi Gokyu 2 5. Tampilan animasi Gokyu 2 Gambar 3.26 Sequence Diagram Halaman Gokyu 2 3. Perancangan untuk halaman Jurus Gokyu 3 Sequence diagram untuk halaman Gokyu 3 menggambarkan skenario dan langkah-langkah yang dilakukan pengguna. Pertama pengguna masuk halaman menu utama, selanjutnya pengguna memilih menu Gokyu 3, dan pengguna akan di bawa

31 59 oleh sistem ke halaman Gokyu 3. Di halaman Gokyu 3 pengguna dapat memilih 5 pilihan Gokyu 3, dan bisa juga kembali ke halaman sebelumnya, yaitu halaman menu utama. Pengguna juga dapat menampilkan bantuan penggunaan dan keluar dari aplikasi. Pengguna memilih salah satu pilihan Gokyu 3, dan sistem akan memberikan tampilan animasi Gokyu 3 tersebut kepada pengguna. halaman menu utama halaman Gokyu 3 1. Menuju menu utama Pengguna 2. Menuju halaman Gokyu 3 3. Tampilan halaman Gokyu 3 4. Memilih animasi Gokyu 3 5. Tampilan animasi Gokyu 3 Gambar 3.27 Sequence Diagram Halaman Gokyu 3 4. Perancangan untuk halaman Jurus Gokyu 4 Sequence diagram untuk halaman Gokyu 4 menggambarkan skenario dan langkah-langkah yang dilakukan pengguna. Pertama pengguna masuk halaman menu utama, selanjutnya pengguna memilih menu Gokyu 4, dan pengguna akan di bawa oleh sistem ke halaman Gokyu 4. Di halaman Gokyu 4 pengguna dapat memilih 3 pilihan Gokyu 4, dan bisa juga kembali ke halaman sebelumnya, yaitu halaman menu utama. Pengguna juga dapat menampilkan bantuan penggunaan dan keluar dari

32 60 aplikasi. Pengguna memilih salah satu pilihan Gokyu 4, dan sistem akan memberikan tampilan animasi Gokyu 4 tersebut kepada pengguna. halaman menu utama halaman Gokyu 4 1. Menuju menu utama Pengguna 2. Menuju halaman Gokyu 4 3. Tampilan halaman Gokyu 4 4. Memilih animasi Gokyu 4 5. Tampilan animasi Gokyu 4 Gambar 3.28 Sequence Diagram Halaman Gokyu 4 5. Perancangan untuk halaman Jurus Gokyu 5 Sequence diagram untuk halaman Gokyu 5 menggambarkan skenario dan langkah-langkah yang dilakukan pengguna. Pertama pengguna masuk halaman menu utama, selanjutnya pengguna memilih menu Gokyu 5, dan pengguna akan di bawa oleh sistem ke halaman Gokyu 5. Di halaman Gokyu 5 pengguna dapat memilih 4 pilihan Gokyu 5, dan bisa juga kembali ke halaman sebelumnya, yaitu halaman menu utama. Pengguna juga dapat menampilkan bantuan penggunaan dan keluar dari

33 61 aplikasi. Pengguna memilih salah satu pilihan Gokyu 5, dan sistem akan memberikan tampilan animasi Gokyu 5 tersebut kepada pengguna. halaman menu utama halaman Gokyu 5 1. Menuju menu utama Pengguna 2. Menuju halaman Gokyu 5 3. Tampilan halaman Gokyu 5 4. Memilih animasi Gokyu 5 5. Tampilan animasi Gokyu 5 Gambar 3.29 Sequence Diagram Halaman Gokyu 5

34 62