3.2.2.2. Perancangan Arsitektur Navigasi
Opening
Menu Utama
Pengantar Sifat Huruf
Hijaiyah Makharijul Huruf
Evaluasi Tentang
Penulis Al-Jauf
Belajar Membaca
Al-Halqu Al-Lisan
Pilihan Ganda
Asy-Syafatain Al-Khoisyum
Gambar 3.6. Struktur Navigasi
58
3.2.2.3. Perancangan Diagram Transisi State Transition
Diagram
Pengantar Makharijul Huruf
Klik Menu Pengantar Tampilkan Menu Pengantar
Klik Makharijul Huruf Tampilkan Makharijul
Huruf Klik Menu Utama
Tampilkan Menu Utama
Klik Menu Utama Tampilkan Menu Utama
Evaluasi
Klik Evaluasi Tampilkan Evaluasi
Menu Utama
Klik Keluar Keluar dari Program
Keluar
Klik Sifat Huruf Hijaiyah Tampilkan Sifat Huruf Hijaiyah
Klik Tentang Penulis Tampilkan Tentang Penulis
Klik Menu Utama Tampilkan Menu Utama
Tentang Penulis Sifat Huruf Hijaiyah
Gambar 3.7. Diagram Transisi Menu Utama
59
Menu Utama Makharijul Huruf
Klik Menu Pengantar Klik Makharijul Huruf
Tampilkan Menu Pengantar Tampilkan Makharijul
Huruf
Evaluasi
Klik Evaluasi Tampilkan Evaluasi
Menu Pengantar
Klik Keluar Keluar dari Program
Keluar
Klik Tentang Penulis Klik Sifat Huruf Hijaiyah
Tampilkan Tentang Penulis Tampilkan Sifat Huruf Hijaiyah
Tentang Penulis Sifat Huruf Hijaiyah
Gambar 3.8. Diagram Transisi Menu Pengantar
60
Menu Utama Makharijul Huruf
Klik Menu Sifat Huruf Hijaiyah Tampilkan Menu Sifat Huruf
Hijaiyah Klik Makharijul Huruf
Tampilkan Makharijul Huruf
Evaluasi
Klik Evaluasi Tampilkan Evaluasi
Menu Sifat Huruf
Hijaiyah
Klik Keluar Keluar dari Program
Keluar
Klik Tentang Penulis Klik Pengantar
Tampilkan Pengantar Tampilkan Tentang Penulis
Tentang Penulis Pengantar
Gambar 3.9. Diagram Transisi Menu Sifat Huruf Hijaiyah
61
Al-Jauf Al-Halqu
Klik Al-Jauf Tampilkan Al-Jauf
Klik Al-Halqu Tampilkan Al-Halqu
Al-Lisan
Klik Al-Lisan Tampilkan Al-Lisan
Menu Makharijul
Huruf Asy-Syafatain
Klik Asy-Syafatain Tampilkan Asy-Syafatain
Klik Al-Khoisyum Tampilkan Al-Khoisyum
Klik
Menu Utama
Tampilkan Menu
Utama Klik Makharijul Huruf
Tampilkan Makharijul Huruf
Al-Khoisyum Menu Utama
Gambar 3.10. Diagram Transisi Menu Makharijul Huruf
62
Belajar Membaca
Klik Belajar Membaca Tampilkan Belajar Membaca
Menu Evaluasi
Pilihan Ganda
Klik Pilihan Ganda Tampilkan Pilihan Ganda
Klik Menu Utama Tampilkan Menu Utama
Klik Menu Evaluasi Tampilkan Menu Evaluasi
Menu Utama
Gambar 3.11. Diagram Transisi Menu Evaluasi
3.2.2.4. Perancangan Antarmuka User Interface