Aplikasi Panduan Haji dan Umrah.docx

Aplikasi Panduan Haji dan Umrah
“ Tugas Pengganti UTS Interaksi manusia dan Komputer “

Disusun Oleh
Ketua
: Samsul Rijal
16.11.0387
Anggota : Muhammad Dwisyal Alfitra
16.11.0336
Uswatul Khasanah
14.11.7862
Muhammad Fathurahman A
16.11.0348
Apolos Ade Ardison
16.11.0356

JURUSAN INFORMATIKA
FAKULTAS TEKNIK KOMPUTER
UNIVERSITAS AMIKOM YOGYAKARTA
YOGYAKARTA
2017

Daftar Isi
COVER ……………………………………………………………………………….
DAFTAR ISI ………………………………………………………………………….
BAB 1 PENDAHULUAN ……………………………………………………………
1.1 Latar Belakang ……………………………………………………………
1.2 Rumusan Masalah ………………………………………………………...
1.3 Batasan Masalah ………………………………………………………….
1.3 Tujuan …………………………………………………………………….
BAB 2 PEMBAHASAN ……………………………………………………………...
2.1 DESAIN UI ………………………………………………………………
2.1.1 Sketch ……………………………………………………………
2.1.2 Wireframe ………………………………………………………..
2.1.3 Mock Up …………………………………………………………
2.2 FUNGSI YANG DISEDIAKAN …………………………………………..
2.2.1 FiturFungsional …………………………………………………..
2.2.2 Fitur Visual ……………………………………………………….
2.3 CARA PENGGUNAAN ……………………………………………………
2.3.1 Fitur Fungsional …………………………………………………..
2.3.2 Fitur Visual ………………………………………………………..

2.4 KEUNGGULAN …………………………………………………………….
2.4.1 Fungsional …………………………………………………………
2.4.1 Visual ……………………………………………………………...

BAB 1

PENDAHULUAN

1.1 LATAR BELAKANG
Informasi tidak hanya di dapatkan di dalam buku, akan tetapi internet dan teknologi dapat
juga memberikan informasi terutama dalam bidang Agama. Dalam bidang Agama, banyak
sekali aturan dan sebagainya yang harus kita pelajari. Salah satunya tentang haji dan umrah.
Ibadah dalam Agama Islam banyak macamnya. Haji dan Umroh adalah salah satunya. Haji
merupakan rukun Islam yang ke lima setelah sahadat, sholat, zakat dan puasa.
Kita dapat memanfaatkan teknologi untuk memberikan alternatif lain kepada jamaah haji
dan umrah, maka dibangunlah sebuah aplikasi panduan haji dan umrah yang membantu
jamaah haji dan umrah dalam melaksanakan persiapan ibadah haji dan umrah.
Aplikasi Panduan Haji dan Umrah ini memberikan informasi tentang pelaksaan dalam
haji dan umrah tersebut. Dari perkembangan teknologi yang semakin canggih, aplikasi ini
memudahkan untuk user mengetahui informasi dengan smartphone yang user gunakan.

Aplikasi ini membantu user untuk mengetahui tentang segala sesuatu yang berkaitan denga
haji dan umroh beserta tata caranya.
Penulis bermaksud untuk membuat aplikasi Panduan Haji dan Umrah yang bisa
digunakan oleh siapa saja dan dimana pun pengguna berada. Dimana para pengguna dengan
mudah menambah dan mengembangkan wawasan mengenai agama terutama haji dan umrah
hanya dengan smartphone.
Berdasarkan latar belakang yang telah di uraikan di atas, penulis sangat tertarik
untuk membuat “Aplikasi Panduan Haji dan Umrah “.
1.2 RUMUSAN MASALAH
Berdasarkan latar belakang yang telah diuraikan diatas, maka rumusan masalah dalam
pembuatan aplikasi ini adalah sebagai berikut:
a. Bagaimana membuat aplikasi berbasis mobile android mengenai tuntunan haji dan
umroh?
b. Bagaimana membuat aplikasi yang dapat memberikan informasi tentang pelaksaan
dalam haji dan umrah tersebut?
c. Apa saja fitur penunjang yang ada di dalam aplikasi sehingga sesuai dengan
kebutuhan?
1.3 BATASAN MASALAH

Dalam perancangan aplikasi ini terdapat beberapa batasan masalah. Hal ini

dilakukan agar aplikasi dapat terfokus / sesuai kebutuhan. Batasan masalah tersebut
sebagai berikut :
1. Aplikasi Panduan haji dan umroh ini berisikan tentang Tempat Ziarah, panduan haji,
Panduan umrah, doa- doa, trevel.
1.4 TUJUAN
Tujuan membuat aplikasi Panduan Haji dan Umrah
Dengan adanya aplikasi ini user dengan mudah :
1. Untuk memperkaya pengetahuan jamaah sebelum melaksanakan perjalana ibadah haji
dan umrah,
2. Memudahkan umat muslim khususnya calon jamaah umroh untuk mendapatkan
pengetahuan umroh melalui smartphone android kapan saja dan dimana saja.
3. Untuk dapat membantu serta memudahkan kaum muslimin yang akan atau sedang
mealaksanakan haji dan umrah dan dapat memandu mereka saat menjalani manasik haji
maupun umrah sesuai dengan apa-apa yang di contohkan rasulullah SAW.

BAB II
PEMBAHASAN
2.1 DESAIN UI
2.1.1 Sketch
2.1.2 Wireframe

(Gambar 1.1 Tampilan utama)

Keterangan gambar 1.1
Tampilan utama aplikasi panduan haji dan umrah sebelum login
Images
: gambar icon dari aplikasi
Button login : untuk masuk/menampilkan halaman login
Button daftar : untuk masuk/menampilkan halaman registrasi/daftar

(Gambar 1.2 Halaman login)

Keterangan gambar 1.2
Tampilan halaman login
Label
Images
Text input 1
Text input 2
Button

: login
: icon aplikasi
: untuk mengimputkan email atau no.tlp
: untuk menginputkan password
: login ke menu utama

(Gambar 1.3 halaman registrasi/daftar)
Keterangan gambar 1.3
Tampilan dari halaman daftar/registrasi
Label 1
Label 2
Label 3
Label 4
Label 5
Text input 1
Text input 2
Text input 3
Text input 4
Button

: nama halaman
: nama
: email
: no.tlp
: password
: nama
: email
: no.tlp
: password
: daftar

(Gambar 1.4 halaman beranda)
Keterangan gambar 1.4
User
:
Search
:
Menu 1
: pilihan menu
Menu 2

: pilihan menu
Menu 3
: pilihan menu
Menu 4
: pilihan menu
Menu 5
: pilihan menu
Menu 6
: pilihan menu

(Gambar 1.5 Tampilan menu 1)
Keterangan Gambar 1.5

Button 1 : pilihan pertama dalam menu tempat ziarah
Button 2 : pilihan kedua dalam menu tempat ziarah

(Gambar 1.6 Tampilan menu ziarah)

Keterangan :
Menu 1 : pilihan pertama tempat ziarah pertama dalam menu tampilan

Menu 2 : pilihan kedua tempat ziarah pertama dalam menu tampilan
Menu 3 : pilihan ketiga tempat ziarah pertama dalam menu tampilan
Menu 4 : pilihan keempat tempat ziarah pertama dalam menu tampilan
Menu 5 : pilihan kelima tempat ziarah pertama dalam menu tampilan
Menu 6 : pilihan keenam tempat ziarah pertama dalam menu tampilan
Layar : menampilkan isiinformasi tiap menu yang di pilih

(Gambar 1.7 Tampilan Menu 2)
Keterangan :
Menu bars samping kiri atas = untuk kembali ke menu utama
User

= Untuk menampilkan ke menu akun user

Search

= Untuk memudahkan user mencari dengan kata yang mereka inginkan atau
dengan kata lain pencarian berdasarkan kata

Button 1

= Hanya sebagai Judul tidak bisa dieksekusi

Button 2- 8

= Untuk menu mengarahkan user ke menu selanjutnya

(Gambar 1.8 Tampilan penjelasan isi menu )
Keterangan :
a. Bars menu
= Untuk mengarahkan User ke menu Utama
b. Search
= Untuk memudahkan user mencari dengan kata yang mereka inginkan
atau dengan kata lain pencarian berdasarkan kata
c. Button 10
= Untuk membawa / mengarahkan user ke menu sebelumnya atau back to
past page
d. Button 11
= Untuk membawa / mengarahkan user ke menu selanjutnya atau next to
new page

(Gambar 1.9 Tampilan penjelasan isi menu)
Keterangan :
a. Bars menu
= Untuk mengarahkan User ke menu Utama
b. Search = Untuk memudahkan user mencari dengan kata yang mereka inginkan atau
dengan kata lain pencarian berdasarkan kata
c. Button 12
= Untuk membawa / mengarahkan user ke menu sebelumnya atau back to
past page
d. Button 13
= Untuk membawa / mengarahkan user ke menu selanjutnya atau next to
new page

(Gambar 1.10 tampilan penjelasan isi menu)

Keterangan :
a. Bars menu
= Untuk mengarahkan User ke menu Utama
b. Search = Untuk memudahkan user mencari dengan kata yang mereka inginkan atau
dengan kata lain pencarian berdasarkan kata
c. Button 13
= Untuk membawa / mengarahkan user ke menu sebelumnya atau back to
past page
d. Button 14
= Untuk membawa / mengarahkan user ke menu selanjutnya atau next to
new page

(Gambar 1.11 Tampilan penjelasan isi menu)

Keterangan :
a. Bars menu
= Untuk mengarahkan User ke menu Utama
b. Search
= Untuk memudahkan user mencari dengan kata yang mereka inginkan
atau dengan kata lain pencarian berdasarkan kata
c. Button 15
= Untuk membawa / mengarahkan user ke menu sebelumnya atau back to
past page
d. Button 16
= Untuk membawa / mengarahkan user ke menu selanjutnya atau next to
new page

(Gambar 1.12 tampilan penjelasan isi menu)
Keterangan :
a. Bars menu
= Untuk mengarahkan User ke menu Utama
b. Search
= Untuk memudahkan user mencari dengan kata yang mereka inginkan
atau dengan kata lain pencarian berdasarkan kata
c. Button 17
= Untuk membawa / mengarahkan user ke menu sebelumnya atau back to
past page
d. Button 18
= Untuk membawa / mengarahkan user ke menu selanjutnya atau next to
new page

(Gambar 1.13 tampilan penjelasan isi menu)

Keterangan :
a. Bars menu
= Untuk mengarahkan User ke menu Utama
b. Search
= Untuk memudahkan user mencari dengan kata yang mereka inginkan
atau dengan kata lain pencarian berdasarkan kata
c. Button 19
= Untuk membawa / mengarahkan user ke menu sebelumnya atau back to
past page
d. Button 20
= Untuk membawa / mengarahkan user ke menu selanjutnya atau next to
new page

(Gambar 1.14 tampilan penjelasan isi menu)

Keterangan :
a. Bars menu
= Untuk mengarahkan User ke menu Utama
b. Search = Untuk memudahkan user mencari dengan kata yang mereka inginkan atau
dengan kata lain pencarian berdasarkan kata
c. Button 21
= Untuk membawa / mengarahkan user ke menu sebelumnya atau back to
past page
d. Button 22
= Untuk membawa / mengarahkan user ke menu selanjutnya atau next to
new page

(Gambar 1.15 tampilan menu panduan umrah)

Keterangan :
Button 1 : pilihan pertama dalam menu panduan umroh
Button 2 : pilihan kedua dalam menu panduan umroh
Button 3 : pilihan ketiga dalam menu panduan umroh
Button 4 : pilihan keempat dalam menu panduan umroh

(Gambar 1.16 Tampilan penjelasan isi menu)

Keterangan :
Layar 1 : pada layar ini menampilkan isi button 1
Layar 2 : pada layar ini menampilkan isi button 2
Layar 3 : pada layar ini menampilkan isi button 3
Layar 4 : pada layar ini menampilkan isi button 4

(Gambar 1. Tampilan menu travel)

Keterangan :
Menu
:teravel
Penjelasan
: menu travel merupak menu diman auser memilih perusahan travelnya sendiri di
situ ada menu sersch untuk membantu user dalam mencari perusahaan terevelnya

(Gambar 1. Tampilan Menu informasi )

Keterangan ;
Menu

: informasi

Keterangn

: menu informasi merupak menu yang berisi tentang tempat wisata,restoran

kepolisihan mesjid

(Gambar 1. Bagian dari menu informasi)
Keterangan :
Menu

:bagian dari mesu informasi

Keterangan

: merupakan menu setelah memilih tempat informasi yang di tuju misalnya

restoran ketika di kelik name restoran yang di inginkan maka akan muncul lokasinya di map

2.1.3 Mock Up

(Gambar 2.1 Mock Up tampilan Utama)

(Gambar 2.2 Mock Up tampilan Lgin)

(Gambar 2.3 mock up tampilan registrasi/daftar)

(Gambar 2.4 mock up tampilan menu utama)

(Gambar 2.5 mock up tampilan menu ziarah)

(Gambar 2.6 mock up menu tempat- tempat ziarah)

(Gambar 2.7 mock up tampilan penjelasan menu tempat- tempat ziarah)

(Gambar 2.8 mockup Menu utama haji)

(Gambar 2.9 mockup pengertian ibadah haji)

(Gambar 2.10 mockup Syarat dan hukum haji)

(Gambar 2.11 mockup Keutamaan haji)

(Gambar 2.12 mockup Amalan amalan haji)

(Gambar 2.13 mockup Rukun Haji)

(Gambar 2.14 mockup Jenis-jenis haji)

(Gambar 2.15 mockup Penutup dan lampiran)

(Gambar 2.16 mock up panduan umrah)

(Gambar 2.17 mock up tampilan isi panduan umrah)

(Gambar 2.18 mock up menu utama doa-doa)

(Gambar 2.19 mockup doa ketika ihram)

(Gambar 2.20 mockup doa tawaf)

(Gambar 2.21 mockup doa ketika sai)

(Gambar 2.22 mockup ketika muquf)

(Gambar 2.23 mock up doa ketika mabit)

(Gambar 2.24 mock up dao ketika tahallul)

(Gambar 2.25 mock up doa lempar jumrah)

(Gambar 2.26 mock up menu trevel)

(Gambar mock up menu informasi)

2.2 FUNGSI YANG DISEDIAKAN
2.2.1 Fitur fungsional
Mock up tampilan utama
a) Rectangle
: item ini digunakan untuk memberikan
warna background pada mockup
b) Images
: item ini berfungsi menampilkan file
gambar pada aplikasi, seperti untuk hiasan, logo, perlengkapan
data dsb. Sedangkan di menu yang saya buat item ini digunakan
untuk menampilkan logo aplikasi
c) Button login
: item ini digunakan untuk menampilkan
menu baru ya itu menu login
d) Button daftar
: item ini digunakan untuk menampilkan
menu daftar
e) Text area
: sebuah kolom yang dibuat sebagai
kontainer tulisan
Mock up menu login
a) Text area
: sebuah kolom yang dibuat sebagai
kontainer tulisan
b) Images
: item ini berfungsi menampilkan file
gambar pada aplikasi, seperti untuk hiasan, logo, perlengkapan
data dsb. Sedangkan di menu yang saya buat item ini digunakan
untuk menampilkan logo aplikasi
c) Text input email : digunakan untuk menginputkan email
d) Text input password : text yang diinput tidak akan terlihat,akan
berupa bintang atau bulatan, hanya digunakan untuk inputan
yang sensitif
e) Button login
: item ini digunakan untuk menampilkan
menu utama pada aplikasi
Mock Up Menu Registrasi
a) Label
: berfungsi untuk memberikan informasi kepada
user mengenai apa yang harus di isi dalam sebuah text box,
contohnya Nama, no.tlp,email dan password
b) Text input/text box : sebagai from isian, untuk menginputkan
apa yang diperintahkan pada label
c) Button daftar
: fungsi dari kontrol ini biasanya untuk
mengeksekusi perintah tertentu. Sedangkan pada menu yang
saya buat button ini berfungsi untuk mengeksekusi data
pendftar

Mock Up Menu Utama
a) User

:

2.2.2 Fitur visual
2.3 CARA PENGGUNAAN
2.3.1 Fitur fungsional
Deskripsi gambar 2.1
Disini saya membuat halaman awal dari aplikasi panduan haji dan
umrah.dimana setiap user yang ingin menggunakan aplikasi ini wajib
login atau daftar.
Deskripsi gambar 2.2
maka user mengisikan alamat email atau no.tlp dan password lalu
mengklik button login.
Deskripsi gambar 2.3
Disini saya membuat halaman untuk daftar sebagai pengguna aplikasi
panduan haji dan umrah. User mengisi nama user,no.tlp user,email user,kata
sandi. Lalu user mengklik button daftar. Setelah mengklik button daftar maka user
akan menuju halaman utama panduan haji dan umrah.
Deskripsi gambar 2.4
Setelah user selesai mendaftar maka akan muncul halaman utama panduan
haji dan umrah. Dihalaman utama panduan haji dan umrah ada beberapa menu di
tempat ziarah, panduan haji, panduan umrah,doa-doa,trevel dan informasi.
2.3.1 Fitur visual

2.4 KEUNGGULAN
2.4.1 F itur fungsional
2.4.2 Fitur visual