Rancangan Tampilan Pengembangan Multimedia Pedoman Pelaksanaan Tata Cara Ibadah Haji

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