4.2.2. Perancangan Struktur Navigasi
Struktur navigasi ini berguna untuk memberikan gambaran link dari halaman satu ke halaman lainnya.
Halaman Pembuka
Halaman Selamat
Datang
Halaman Menu Utama
Bantuan
Halaman Menu Game
Halaman Manfaat
Halaman Pemanasan
Halaman Level
Menengah Halaman
Level Sulit Halaman
Level Mudah Keluar
Gambar 4.1. Struktur Navigasi
4.2.3. Perancangan State Transition Diagram STD
STD merupakan diagram yang memodelkan tingkah laku behaviour sistem berdasarkan pada definisi satu bagian dari
keadaan sistem. Langkah ini digunakan untuk menggambarkan kinerja sistem. Terdapat 6 State Transition Diagram pada
perancangan permainan edukasi ini. 1. STD Selamat Datang
Selamat Datang
Menu Utama Bantuan
Keluar
Klik Bantuan Tampil Informasi Bantuan
Klik Keluar Keluar dari Aplikasi
Klik Play Tampil Halaman
Menu Utama Lanjut ke STD Menu Utama
Klik Bantuan Tampil Halaman
Selamat Datang
Gambar 4.2.
State Transition Diagram Selamat Datang Pada Halaman Selamat
Datang, pengguna dapat mengakses 3 navigasi, yaitu Menu Utama, tombol Bantuan dan Keluar
.
2. STD Menu Utama State transtion diagram STD pada halaman utama
terdapat empat navigasi yaitu Pemanasan, Game, Manfaat dan Keluar
Menu Utama
Game Keluar
Manfaat Pemanasan
Klik Keluar Keluar dari
Aplikasi
Klik Kembali Tampil Halaman
Menu Utama
Klik Kembali Tampil Halaman
Menu Utama Klik Kembali
Tampil Halaman Menu Utama
Klik Manfaat Tampil Halaman Manfaat
Lanjut ke STD Manfaat
Klik Pemanasan Tampil Halaman Pemanasan
Lanjut ke STD Pemanasan Klik Game
Tampil Halaman Menu Game
Lanjut ke STD Menu Game
Gambar 4.3. State Transition Diagram Menu Utama
3. STD Pemanasan State transtion diagram pada halaman pemanasan terdapat
dua navigasi yaitu Menu Utama dan Keluar.
Pemanasan Menu Utama
Keluar
Klik Kembali Tampil Halaman
Menu Utama Lanjut ke STD Menu Utama
Klik Keluar Keluar dari Aplikasi
Klik Pemanasan Tampil Halaman
Pemanasan
Gambar 4.4.
State Transition Diagram Pemanasan
4. STD Game
Menu Game Game
Level Mudah Keluar
Game Level Menengah
Game Level Sulit
Menu Utama
Klik Keluar Keluar dari Aplikasi
Klik Kembali Tampil Halaman
Game Klik Kembali
Tampil Halaman Game
Klik Kembali Tampil Halaman
Game Klik Kembali
Tampil Halaman Menu Utama
Lanjut ke STD Menu Utama
Klik Menengah Tampil Halaman
Game Level Menengah
Klik Sulit Tampil Halaman
Game Level Sulit
Klik Mudah Tampil Halaman
Game Level Mudah Klik Game
Tampil Halaman Game
Gambar 4.5. State Transition Diagram Game
Pada State Transition Diagram Game terdapat 5 navigasi. Yaitu Mudah, Menengah, Sulit, Kembali untuk ke menu utama dan Keluar
untuk keluar aplikasi.
5. ST
D Manfaat
Gambar 4.6. State Transition Diagram Manfaat
Pada State Transition Diagram manfaat terdapat 2 navigasi. Yaitu tombol Kembali untuk ke menu utama dan Keluar untuk keluar
aplikasi.
4.3. Material Collecting Pengumpulan Materi
Kategori