3.6 Rancangan Tampilan
Rancangan tampilan digunakan untuk mempermudah dalam membangun aplikasi. Berikut ini akan dijelaskan rancangan dari masing-masing layar yang akan
ditampilkan dalam aplikasi ini.
3.6.1 Rancangan Tampilan Halaman Judul
Pada halaman ini, layar hanya akan menampilkan judul dari aplikasi ini yaitu “Pengembangan Multimedia Pedoman Pelaksanaan Tata Cara Ibadah Haji”. Judul
tersebut akan dibagi menjadi dua bagian yang akan bergerak dari arah yang berbeda kemudian akan bertemu di bagian tengah dari halaman ini. Pada bagian ini akan
terdapat tombol enter yang dapat di klik untuk menuju ke halaman utama. Rancangan halaman judul dapat dilihat pada Gambar 3.13.
enter PENGEMBANGAN MULTIMEDIA PEDOMAN
PELAKSANAAN TATA CARA IBADAH HAJI
GAMBAR MASJIDIL HARAM
Oleh; SITI REZEKI
061401005
Gambar 3.13 Rancangan Tampilan Halaman Judul
Universitas Sumatera Utara
3.6.2 Rancangan Tampilan Halaman Utama
Halaman ini merupakan link dari tombol enter yang terdapat di halaman judul. Halaman ini berisi pilihan materi yang disediakan bagi pengguna antara lain materi
umrah, haji, haji ifrad, haji tamattu’, haji qiran, animasi dan latihan. Selain itu, pada bagian kanan halaman terdapat beberapa gambar tempat bersejarah yang ada di
Mekkah dan Madinah. Dengan mengarahkan kursor ke gambar maka akan diberikan penjelasan mengenai gambar tersebut. Rancangan halaman menu utama dapat dilihat
pada Gambar 3.14.
home about
UMRAH HAJI
HAJI IFRAD HAJI TAMATTU’
HAJI QIRAN LATIHAN
ANIMASI Gambar Sumur
Zam-zam Gambar Jabal
Rahmah Gambar
Raudah Gambar
Mesjid Nabawi Gambar
Masjidil Haram
Gambar Ka’bah
Gambar Gua Hira
Gambar Maqam
Ibrahim Gambar
Hajar Aswad
exit
Gambar 3.14 Rancangan Tampilan Halaman Utama
3.6.3 Rancangan Tampilan Materi
Pada tampilan materi disediakan tombol-tombol navigasi seperti tombol home link menuju ke halaman utama, tombol about link menuju ke halaman penjelasan aplikasi
dan penulis, tombol back, next, exit. Ada materi tentang umrah, haji, haji ifrad, haji tamattu’, dan haji qiran. Rancangan halaman materi haji dapat dilihat pada Gambar
3.15, rancangan halaman materi umrah dapat dilihat pada Gambar 3.16, rancangan halaman materi haji ifrad dapat dilihat pada Gambar 3.17, rancangan halaman materi
haji tamattu’ dapat dilihat pada Gambar 3.18 dan rancangan halaman materi haji qiran dapat dilihat pada Gambar 3.19.
Universitas Sumatera Utara
exit home
about HAJI
MATERI HAJI
back next
Gambar 3.15 Rancangan Tampilan Halaman Materi Haji
exit home
about UMRAH
MATERI UMRAH
back next
Gambar 3.16 Rancangan Tampilan Halaman Materi Umrah
Universitas Sumatera Utara
exit home
about HAJI IFRAD
MATERI HAJI IFRAD
back next
Gambar 3.17 Rancangan Tampilan Halaman Materi Haji Ifrad
exit home
about HAJI TAMATTU’
MATERI HAJI TAMATU’
back next
Gambar 3.18 Rancangan Tampilan Halaman Materi Haji Tamattu’
Universitas Sumatera Utara
exit home
about HAJI QIRAN
MATERI HAJI QIRAN
back next
Gambar 3.19 Rancangan Tampilan Halaman Materi Haji Qiran
3.6.4 Rancangan Tampilan Halaman Animasi
Halaman ini dirancang hampir menyerupai halaman menu utama. Jika pada halaman utama kata yang ada menuju ke link materi penjelas maka pada halaman ini link yang
ada akan menuju halaman animasi dari masing-masing link yang dipilih oleh pengguna. Rancangan halaman animasi dapat dilihat pada Gambar 3.20 dan rancangan
tampilan animasi pelaksanaan tata cara ibadah haji dan umrah dapat dilihat pada Gambar 3.21.
home about
UMRAH HAJI IFRAD
HAJI TAMATTU’ HAJI QIRAN
Gambar Sumur Zam-zam
Gambar Jabal Rahmah
Gambar Raudah
Gambar Mesjid Nabawi
Gambar Masjidil
Haram Gambar
Ka’bah
Gambar Gua Hira
Gambar Maqam
Ibrahim Gambar
Hajar Aswad
exit
Gambar 3.20 Rancangan Tampilan Halaman Animasi
Universitas Sumatera Utara
exit home
about ANIMASI ...
ANIMASI Jika di klik urutan ke berapa baru ditampilkan
1 2 3 4 5 6 7 8 9 10 11 12 13
Gambar 3.21 Rancangan Tampilan Halaman Animasi Pelaksanaan Ibadah Haji dan Umrah
3.6.5 Rancangan Tampilan Halaman Latihan
Halaman ini dirancang sebagai petunjuk kepada pengguna bagaimana cara untuk memulai dan mengerjakan latihan yang disediakan. Dengan adanya petunjuk terlebih
dahulu maka diharapkan pengguna tidak akan mengalami kesulitan dalam mengetahui cara menjawab pertanyaan yang telah disediakan di dalam aplikasi ini. Selain petunjuk
cara mengerjakan latihan juga disediakan teks input untuk memasukkan nama pengguna yang akan mengerjakan latihan. Setelah itu baru menekan tombol enter
untuk mulai mengerjakan latihan yang berupa pilihan berganda. Jika sudah mencapai 10 soal. Halaman latihan juga merupakan sarana yang dapat digunakan untuk
mengetahui tingkat pemahaman dari pengguna terhadap materi yang telah disediakan dalam aplikasi ini. Rancangan halaman petunjuk latihan ini dapat dilihat pada Gambar
3.22.
Universitas Sumatera Utara
exit home
LATIHAN
PETUNJUK LATIHAN INPUT NAMA
MULAI
Gambar 3.22 Rancangan Tampilan Halaman Latihan
3.6.6 Rancangan Tampilan Halaman Hasil Latihan
Setelah menjawab 10 soal latihan pilihan berganda maka nilai dari pengguna yang mengerjakan latihan tersebut akan ditampilkan. Jika pengguna kurang puas dengan
nilai yang telah diperolehnya maka dapat mengulang latihan dengan soal yang berbeda dari sebelumnya hanya dengan mengklik tombol ulang. Rancangan halaman
hasil latihan dapat dilihat pada Gambar 3.23.
exit home
HASIL LATIHAN
NAMA : NILAI :
Ulang test
Gambar 3.23 Rancangan Tampilan Halaman Hasil Latihan
Universitas Sumatera Utara
3.6.7 Rancangan Tampilan Halaman About
Halaman ini berisi mengenai cara penggunaan aplikasi ini. Selain itu, juga terdapat gambar, nama, nim dan email dari penulis. Rancangan halaman about dapat dilihat
pada Gambar 3.24.
exit home
about ABOUT
PENJELASAN SINGKAT TENTANG APLIKASI
back next
Copyright by: SITI REZEKI
061401005 kyky_nasutionyahoo.co.id
Gambar penulis
Gambar 3.24 Rancangan Tampilan Halaman About
Universitas Sumatera Utara
BAB 4
IMPLEMENTASI
4.1 Implementasi