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 yang 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
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
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 Aplikasi Jurus Judo
Pengguna Masyarakat dan semua kalangan pecinta Judo Gambar Menggunakan file berformat .gif yang dibuat sendiri Suara Menggunakan file berformat mp3
Animasi teks Animasi pada teks dan gambar dibuat sendiri
Interaktif 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 CS3.
3.4 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 X akan membawa user keluar dari aplikasi dan tombol bantuan penggunaan akan menampilkan cara penggunaan aplikasi sedangkan tombol sound untuk mematikan suara.
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.
8. Credit
Pada halaman ini adalah halaman penutup yaitu berisi profil penulis dan keluar dari aplikasi tersebut.
3.4.1. 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.
OSOTOGARI
Gokyu 1 HIZAGURUMA
Gambar 3.1 Diagram Peta Navigasi Gokyu 2
Gokyu 5 INTRO
OUCHIGARI UKIGOSHI
KOUCHIGARI TSURIKOMI TAIOTOSHI HARAIGOSHI UCHIMATA KOSHIGURUMA
Gokyu 3
ASHIGURUMA HANEGOSHI HARAITSURI KOSOTOGAKE SODETSURI
Gokyu 4
OGURUMA UKIOTOSHI UTSURIGOSHI UKIWAZA
USHIROGOSHI YOKOGAKE YOKOGURUMA
CREDIT
3.4.2 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
Sound : Linkin Park – Nobody Listening
Bantuan
Animasi
Sound X
Start Navigasi :
Start : Menuju menu utama
Sound : Mengecilkan / membesarkan volume lagu Bantuan : 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.
2. Storyboard Halaman Menu Modul : Pembukaan
Nama Scene : Home
Gambar : Background Dojo (Tempat Latihan Judo)
Animasi : Tombol
Sound : Linkin Park – Nobody Listening 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
Sound X Bantuan
Menu
2 3 1
Bantuan : Menampilan cara penggunaan aplikasi
X : Menuju profil penulis / keluar aplikasi
4 5
Gambar 3.3 Storyboard Halaman Menu
3. Storyboard Gokyu 1
Modul : Pembukaan
Gambar 3.4 Storyboard Halaman Gokyu 1 Nama Scene : Gokyu 1
Gambar : Background Dojo (Tempat Latihan Judo)
Animasi : Tombol Sound : Linkin Park –
Nobody Listening Navigasi :
1 : Simulasi teknik bantingan Ogoshi 2 : Simulasi teknik bantingan Osotogari 3 : Simulasi teknik bantingan Hizaguruma
Bantuan X Back
Gokyu 1 2 3 1
4 5
4 : Simulasi teknik bantingan Ouchigari 5 : Simulasi teknik bantingan Ukigoshi Bantuan : Menampilkan cara penggunaan aplikasi X : Menuju profil penulis / keluar aplikasi Back : Kembali ke halaman Menu
4. Storyboard Gokyu 2
Gambar 3.5 Storyboard Halaman Gokyu 2 Modul : Pembukaan
Nama Scene : Gokyu 2
Gambar 3.5 Storyboard Halaman Gokyu 2 Gambar : Background Dojo
(Tempat Latihan Judo) Animasi : Tombol
Sound : Linkin Park – Nobody Listening Navigasi :
1 : Simulasi teknik bantingan Kouchigari 2 : Simulasi teknik bantingan Tsurikomi 3 : Simulasi teknik bantingan Taiotoshi 4 : Simulasi teknik bantingan Haraigoshi 5 : Simulasi teknik bantingan Uchimata 6 : Simulasi teknik bantingan Koshiguruma
Bantuan X Back
Gokyu 2
1 2 3
4 5 6
Bantuan : Menampilkan cara penggunaan aplikasi X : Menuju profil penulis / keluar aplikasi Back : Kembali ke halaman Menu
5. Storyboard Gokyu 3 Modul : Pembukaan
Nama Scene : Gokyu 3
Gambar : Background Dojo (Tempat Latihan Judo)
Animasi : Tombol
Sound : Linkin Park – Nobody Listening 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 X : Menuju profil penulis / keluar aplikasi Back : Kembali ke halaman Menu
Bantuan X Back
Gokyu 3 2 3 1
4 5
Gambar 3.6 Storyboard Halaman Gokyu 3
6. Storyboard Gokyu 4
Modul : Pembukaan
Nama Scene : Gokyu 4 Back Bantuan X
Gambar : Background Dojo (Tempat Latihan Judo)
Animasi : Tombol
Sound : Linkin Park – Nobody Listening Navigasi :
Gokyu 4 1 : Simulasi teknik bantingan Oguruma
2 : Simulasi teknik bantingan Ukiotoshi 1 2 3 3 : Simulasi teknik bantingan Utsurigoshi
Bantuan : Menampilkan cara penggunaan aplikasi X : Menuju profil penulis / keluar aplikasi Back : Kembali ke halaman Menu
Gambar 3.7 Storyboard Halaman Gokyu 4
7. Storyboard Gokyu 5
Modul : Pembukaan
Nama Scene : Gokyu 5 Back Bantuan X
Gambar : Background Dojo (Tempat Latihan Judo)
Animasi : Tombol
Sound : Linkin Park – Nobody Listening Navigasi :
Gokyu 5 1 : Simulasi teknik bantingan Ukiwaza
2 : Simulasi teknik bantingan Ushirogoshi 1 2 3 : Simulasi teknik bantingan Yokogake
4 : Simulasi teknik bantingan Yokoguruma 3 4 Bantuan : Menampilkan cara penggunaan aplikasi
X : Menuju profil penulis / keluar aplikasi Back : Kembali ke halaman Menu
Gambar 3.8 Storyboard Halaman Gokyu 5
8. Storyboard Credit Modul : Credit
Sound X Nama Scene : Credit
Gamnbar : Background Dojo (Tempat Latihan Judo) Animasi : Tulisan Berjalan
Sound : Pas Band - Jengah Navigasi :
X : keluar aplikasi
Sound : Mengecilkan / membesarkan volume lagu
Gambar 3.9 Storyboard Halaman Credit
3.4.3. 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 X 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.
START GAMBAR
SOUND X Bantuan Penggunaan
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 .
SOUND
X
GAMBAR Bantuan
penggunaan
Menu
Gokyu 1 Gokyu 2 Gokyu 3
Gokyu 4 Gokyu 5
Gambar 3.11 : Rancangan Tampilan Halaman Menu
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 X untuk ke menu credit atau keluar aplikasi.
Gokyu 1
Ogoshi Osotogari Hizaguruma Ouchigari Ukigoshi
Back Bantuan X
ANIMASI
Gambar 3.12 : Rancangan Tampilan Halaman Gokyu 1
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 X untuk ke menu credit atau keluar aplikasi.
Gokyu 2
KOUCHIGARI TSURIKOMI TAIOTOSHI HARAIGOSHI UCHIMATA
Back Bantuan Penggunaan X
KOSHIGURUMA
ANIMASI
Gambar 3.13 : Rancangan Tampilan Halaman Gokyu 2
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 X untuk ke menu credit atau keluar aplikasi.
Gokyu 3
ASHIGURUMA HANEGOSHI HARAITSURI KOSOTOGAKE SODETSURI
Back Bantuan Penggunaan X
ANIMASI
Gambar 3.14 : Rancangan Tampilan Halaman Gokyu 3
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.
Gokyu 4
OGURUMA UKIOTOSHI UTSURIGOSHI Back Bantuan Penggunaan X
ANIMASI
Gambar 3.15 : Rancangan Tampilan Halaman Gokyu 4
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 X untuk ke menu credit atau keluar aplikasi.
Gokyu 5
UKIWAZA USHIROGOSHI
YOKOGAKE YOKOGURUMA
Back Bantuan Penggunaan X
ANIMASI
Gambar 3.16 : Rancangan Tampilan Halaman Gokyu 5
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 X untuk menghentikan suara dan keluar dari aplikasi. Adapun rancangan tampilanya adalah sebagai berikut:
X SOUND
PROFIL
Gambar 3.17 : Rancangan Tampilan Halaman Credit
3.4.4. 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
memperlihatkan interaksi-interaksi use case dengan aktor. Use case diagram Rancang Bangun Aplikasi Jurus Judo dapat dilihat pada Gambar berikut :
GOKYU 5
GOKYU 4 Menu Utama
GOKYU 3 GOKYU 2 GOKYU 1
Keluar Profil
Gambar 3.18 : Use Case Diagram
Tabel 3.2 Use Case Aplikasi
Nama Melihat
Aktor Masyarakat dan pecinta Judo
Deskripsi User dapat memilih menu animasi jurus Judo.
Skenario 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
Kondisi Awal
1. User menerima halaman menu yang di dalamnya terdapat delapan tombol. User memilih tombol-tombol yang ada Kondisi
Akhir
1. User memahami jurus Judo.
3.4.5 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.
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
Menampilkan menu yang dipilih Membuka Aplikasi
Memilih Menu yang diinginkan
Menampilkan tombol pada menu utama :
Gokyu 1, Gokyu 2, Gokyu 3, Gokyu 4, Gokyu 5, keluar, sound, bantuan penggunaan
Gambar 3.19 : Activity Diagram Halaman Menu Utama
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
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
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
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
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 5
3.4.6. Perancangan Sequence Diagram
Sebuah sequence diagram secara khusus menjabarkan aktifitas sebuah skenario tunggal. Diagram tersebuat menunjukkan sejumlah objek contoh dan pesan- pesan melalui objek-objek di dalam use case diagram (Fowler, 2005:81). Dari bentuk use case yang telah di gambarkan sebelumnya, dapat dibuat sequence diagram.
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
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
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
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
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