4.3.2. Perancangan Struktur Navigasi
Intro Menu Utama 1
Keluar Menu Utama 2
Sejarah Dasar Hukum
Pengertian Informasi
Hari Arafah Haji Tamattu’
Haji Qiran Haji Ifrad
Hajar Aswad DamFidyah
Doa akhir Manasik
Doa di Muzdalifah
Doa di Mina Doa di Arafah
Doa Bercukur Doa Sa’i
Doa Thawaf Doa di
Ka’bah Bacaan
Talbiyah Doa Ihram
Bacaan Niat Doa
Perjalanan Doa
Rute Umrah Rute Haji
Panduan Haji Panduan
Umrah Panduan
Bagi Wanita Daftar Isi
Ubah Tampilan
Pilih Menu Opsi
Tentang Aplikasi
Wuquf Talbiyah
Thawaf Tahallul
Sa’i Rukun Haji
Nafar Miqat Zamani
Miqat Makani Maqam
Ibrahim Mabit
Kiswah Jumrah
Haji Badal
Haji Mabrur Istilah
Isthitha’ah
Ihram Ifadhah
Hijr Ismail Hari Tasyrik
Hari Tarwiyah
Hari Nahar
Rancangan Struktur Navigasi
Gambar 4.1. Rancangan Struktur Navigasi
Struktur navigasi yang digunakan adalah hierarchiecal model dengan sedikit modifikasi. Pada model ini dapat dilihat penggunaan setiap
scene atau layar yang berhubungan dengan scene lainnya.
4.3.2.1. Perancangan Bagan Aliran Flowchart View
Sistem flowchart menggambarkan tahapan proses dari suatu sistem, termasuk sistem multimedia Suyanto, 2003.
Start Tampilan Layar Intro
Tampilan Layar Menu Utama Pilih Menu
Plih Menu Informasi
Pilih Menu Panduan
Plih Menu Doa
Plih Menu Istilah
Plih Menu Tentang Aplikasi
Plih menu Opsi
Pilih Keluar Tampil Layar
Panduan Tampil Layar
Informasi
Tampil Layar Doa
Tampil Layar Istilah
Tampil Layar Tentang Aplikasi
Tampilan Menu Opsi
Tidak Ya
Tidak Tidak
Tidak Tidak
Tidak
Ya Ya
Ya Ya
Ya Ya
A
B
C
D
E PERANCANGAN FLOWCHART MENU UTAMA
End
Gambar 4.2. Rancangan Flowchart Menu Utama
Dari rancangan Flowchart diatas, penulis dapat menyimpulkan bahwa :
1. Tampilan menu utama sebagai pembuka dan pilihan menu
ditampilkan secara sekaligus untuk efisiensi dan kemudahan akses dari menu utama ke sub program. sub program di buat
sesederhana mungkin agar user mudah mengerti alur program dan diharapkan dapat memenuhi kebutuhan
User Frie dly Progra
.
A
Pilih Menu
Pilih Menu Informasi
Pilih Menu Pengertian
Pilih Menu Dasar
Hukum
Pilih Menu Sejarah
Pilih Menu Bagi
Wanita Tampilkan Layar
Informasi
Tampilkan Layar Pengertian
Tampilkan Layar Dasar Hukum
Tampilkan Layar Sejarah
Tampilkan Layar Bagi Wanita
End Tidak
Tidak Tidak
Tidak Ya
Ya
Ya
Ya
Ya
Rancangan Flowchart Informasi
Tidak
Gambar 4.3. Rancangan Flowchart Informasi
B
Pilih Menu
Pilih Menu Panduan
Pilih Menu Panduan
Umrah
Pilih Menu Panduan
Haji
Pilih Menu Rute Haji
Pilih Menu Rute Umrah
Tampilkan Layar Panduan
Tampilkan Layar Panduan Umrah
Tampilkan Layar Panduan Haji
Tampilkan Layar Rute Haji
Tampilkan Layar Rute Umrah
End Tidak
Tidak Tidak
Tidak Ya
Ya
Ya
Ya
Ya
Rancangan Flowchart Panduan
Tidak
Gambar 4.4. Rancangan Flowchart Panduan
4.3.2.2. Perancangan State Transition Diagram STD
Menu Utama Informasi
Panduan Doa
Intro Keluar
Istilah Tentang Aplikasi
Opsi Tekan Tombol “Masuk”
Tampilkan Menu Utama Tekan Tombol “Informasi”
Tampilkan Layar Informasi Tekan Tombol “Panduan”
Tampilkan Layar Panduan Tekan Tombol “Doa”
Tampilkan Layar Doa
Tekan Tombol “Istilah” Tampilkan Layar Istilah
Tekan “Tentang Aplikasi” Tampilkan Tentang Aplikasi
Tekan Tombol “Opsi” Tampilkan Layar Opsi
Tekan Tombol “Keluar” Menutup Aplikasi
Tekan Tombol “Kembali” Tampilkan Menu Utama
Tekan Tombol “Kembali” Tampilkan Menu Utama
Tekan Tombol “Kembali” Tampilkan Menu Utama
Tekan Tombol “Kembali” Tampilkan Menu Utama
Tekan Tombol “Kembali” Tampilkan Menu Utama
Tekan Tombol “Kembali” Tampilkan Menu Utama
State Transition Diagram STD Menu Utama
Gambar 4.5. STD Menu Utama
Informasi Pengertian
Dasar Hukum
Menu Utama
Sejarah Bagi Wanita
Tekan Tombol “Pengertian” Tampilkan Layar Pengertian
Tekan Tombol “Dasar Hukum” Tampilkan Layar Dasar Hukum
Tekan Tombol “Sejarah” Tampilkan Layar Sejarah
Tekan Tombol “Bagi Wanita” Tampilkan Layar Bagi Wanita
Tekan Tombol “Kembali” Tampilkan Layar Menu Utama
Tekan Tombol “Kembali” Tampilkan Layar Informasi
State Transition Diagram STD Informasi
Tekan Tombol “Informasi” Tampilkan Layar Informasi
Tekan Tombol “Kembali” Tampilkan Layar Informasi
Tekan Tombol “Kembali” Tampilkan Layar Informasi
Tekan Tombol “Kembali” Tampilkan Layar Informasi
Gambar 4.6. STD Informasi
4.3.2.3. Perancangan Antarmuka Pengguna User Interface
Rancangan antarmuka pemakai user interface yang akan ditampilkan pada mobile application ini akan disesuaikan dengan
perancangan yang dibuat pada menu dan tampilan sebelumnya yang sesuai dengan kebutuhan pengguna yang akan menggunakan dan melihat
informasi yang mereka butuhkan. Pada program aplikasi MAPHUM ini terdapat 10 rancangan layar, yaitu:
1. Rancangan Layar Intro Rancangan ini merupakan tampilan awal sebelum ke tampilan utama
program. terdiri dari 2 tampilan, yaitu tampilan info pembuka dan tampilan animasi. Tampilan info pembuka berisi judul aplikasi dan
tombol enter. Tombol enter ini digunakan untuk memasuki tampilan animasi, setelah tampilan animasi selesai ditampilkan, tampilan menu
utama dari aplikasi akan ditampilkan secara otomatis. Tampilan pembuka berisi kata selamat datang di Mobile Aplication pembelajaran haji dan
umrah MAPHUM dan tampilan animasi,
2. Rancangan Menu Utama Merupakan tampilan utama dari aplikasi yang dibuat. Tampilan ini
memuat beberapa unsur elemen penting dalam multimedia, yaitu animasi, teks, gambar, suara latar dan tombol-tombol navigasi. Tombol
navigasi pada tampilan ini terdiri dari 2 tombol utama yang menuju halaman isi informasi atau materi dari aplikasi, 2 tombol pada opsi
pilihan yang menuju informasi tambahan dari aplikasi seperti pilih menu, ubah tampilan serta tombol untuk keluar aplikasi.
3. Rancangan Menu Utama 2 Merupakan tampilan alternatif dari menu utama yang memiliki isi
dan tombol navigasi yang sama dengan menu utama.
4. Rancangan Keluar Tampilan ini digunakan sebagai tampilan keluar aplikasi. terdapat 2
tampilan keluar, yaitu tampilan keluar animasi dan tampilan keluar info. Setelah user memilih keluar dari aplikasi, tampilan keluar animasi akan
dijalankan secara otomatis, tampilan keluar info akan ditampilkan setelah tampilan keluar animasi selesai. Pada tampilan keluar info, user di minta
untuk menekan enter untuk menutup aplikasi.
5. Rancangan Menu Informasi Rancangan ini digunakan untuk menampilkan submenu informasi
haji dan umrah yang terdiri dari 4 tombol navigasi yang menuju halaman materi informasi haji dan umrah dan tombol navigasi untuk memilih
menu dan tombol navigasi untuk kembali ke halaman menu utama.
6. Rancangan Menu Panduan Ibadah Rancangan ini digunakan untuk menampilkan submenu panduan
pelaksanaan ibadah yang terdiri dari 4 tombol navigasi yang menuju halaman panduan pelaksanaan ibadah dan tombol navigasi untuk
memilih menu dan tombol navigasi untuk kembali ke halaman menu utama.
7. Rancangan Menu Doa Rancangan ini digunakan untuk menampilkan submenu doa-doa
ketika haji dan umrah. Terdapat 13 tombol navigasi utama untuk menampilkan bacaan do’a tertentu pada menu doa-doa.ketika haji dan
umrah dan tombol navigasi untuk kembali ke halaman menu utama.
8. Rancangan Menu Istilah Rancangan ini digunakan untuk menampilkan istilah-istilah yang
berkaitan dengan haji dan umrah. Terdapat 30 tombol navigasi utama, yaitu tombol navigasi untuk memilih istilah serta tombol navigasi untuk
kembali ke halaman menu utama.
9. Rancangan Menu Daftar Isi Tampilan ini digunakan untuk menampilkan list isi seluruh isi dari
aplikasi ini. Tombol navigasi berupa tombol untuk memilih list isi, menuju ke halaman list berikutnya dan tombol ke menu utama.
10. Rancangan Menu Tentang Aplikasi Rancangan ini digunakan untuk menampilkan informasi tentang fitur
aplikasi, spesifikasi aplikasi, software yang digunakan dalam proses pembuatan aplikasi, menampilkan data penulis dan tujuan pembuatan
aplikasi. Tombol navigasi berupa tombol kembali kehalaman menu utama dan tombol untuk memilih informasi aplikasi.
4.4. Pengumpulan Bahan Program Aplikasi Material Collecting
Bahan-bahan yang diperlukan untuk membangun aplikasi ini, baik berupa file teks, gambar animasi, audio dan kontrol navigasi diperoleh dengan cara
mengambil dari berbagai sumber namun sebagian besar elemen banyak yang dibuat sendiri oleh penulis menggunakan software programming yaitu Adobe
Flash CS4 dan software desain grafis Adobe Photoshop CS2.
4.4.1. Teks
File teks berupa materi yang isinya berhubungan dengan manasik haji dan umrah, penulis memperoleh data-data berdasarkan dari buku yang
penulis gunakan adalah buku dari Departemen Agama R.I. DirJen Bimbingan Masyarakat Islam dan Urusan Haji Jakarta 2009 dan juga dari
perusahaan penyelenggara perjalanan umrah dan haji plus PT. Arminareka Perdana. Hal ini dilakukan agar materi yang disampaikan dapat
dipertanggungjawabkan sesuai dengan ketentuan yang berlaku.
Kategori