Rancang Bangun Aplikasi Pembelajaran Haji dan Umrah...

SKRIPSI

Rancang Bangun Aplikasi Pembelajaran Haji dan Umrah

Berbasis Multimedia pada Smartphone Bersistem Operasi

Android

Oleh :

Ahmad Fadhilah Albani

1110091000017

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH

JAKARTA

2015

i

RANCANG BANGUN APLIKASI PEMBELAJARAN HAJI DAN

UMRAH BERBASIS MULTIMEDIA PADA SMARTPHONE

BERSISTEM OPERASI ANDROID

Skripsi

Sebagai Salah Satu Syarat untuk Memperoleh Gelar

Sarjana Komputer (S.Kom)

Fakultas Sains dan Teknologi

Universitas Islam Negeri Syarif Hidayatullah Jakarta

Oleh :

AHMAD FADHILAH ALBANI

1110091000017

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UNIVERSITAS ISLAM NEGERI SYARIF HIDAYATULLAH

JAKARTA

2015 M/1436 H

iv

HALAMAN PERNYATAAN

Dengan ini sayamenyatakan bahwa :

1. Skripsi/tesis/disertasi ini merupakan hasil karya asli saya yang diajukan

untuk memenuhi salah satu persyaratan memperoleh gelar strata 1 di UIN

Syarif Hidayatullah Jakarta.

2. Semua sumber yang saya gunakan dalam penulisan ini telah saya

cantumkan sesuai dengan ketentuan yang berlaku di UIN Syarif

Hidayatullah Jakarta.

3. Jika di kemudian hari terbukti bahwa karya ini bukan hasil karya asli saya

atau merupakan hasil jiplakan dari karya orang lain, maka saya bersedia

menerima sanksi yang berlaku di UIN Syarif Hidayatullah Jakarta.

Jakarta, Juni 2015


1110091000017

v

AHMAD FADHILAH ALBANI – 1110091000017, RANCANG BANGUN

APLIKASI PEMBELAJARAN HAJI DAN UMRAH BERBASIS

MULTIMEDIA PADA SMARTPHONE BERSISTEM OPERASI ANDROID

, dibimbing oleh Arini, M.T. dan Andrew Fiade, M.Kom

ABSTRAK

Ibadah haji adalah ibadah yang wajib dilaksanakan bagi kaum muslimin yang mampu

dan wajib hanya dilakukan satu kali selama masa hidup. Dalam melaksanakan ibadah

haji yang satu kali seumur hidup itu, tentunya kaum muslimin ingin melaksanakan

ibadah itu dengan sempurna agar diterima amalannya oleh Allah SWT. Agar dapat

sempurna, tentunya diperlukan persiapan dan pengetahuan yang matang untuk

melaksanakan ibadah haji tersebut. Dalam perkembangan teknologi saat ini,

perkembangan dan penyebaran informasi berkembang dengan pesat. Salah satu

perkembangan yang mempengaruhi hal tersebut adalah perkembangan teknologi

smartphone. Smartphone yang saat ini paling berkembang pesat adalah smartphone

bersistem operasi android. Untuk itulah, dibangun sebuah aplikasi pembelajaran

ibadah haji yang dapat dilaksanakan pada perangkat smartphone bersistem operasi

android agar para kaum muslimin dapat belajar dan mengetahui hal-hal yang tentang

ibadah haji dengan lebih mudah dan cepat. Metode pengembangan sistem ini

menggunakan Rapid Application Development (RAD) dengan tiga fase yaitu,

perencanaan kebutuhan, fase workshop design, dan fase implementasi dengan

perancangan proses UML (Unified Model Language) dan dikembangkan dengan

menggunakan Android SDK, bahasa pemograman java, HTML untuk menampilkan

konten-konten aplikasi, SQLite sebagai database dan Google Maps untuk

menampilkan peta. Dengan aplikasi ini, para kaum muslimin yang ingin melaksanakan

haji dapat mempelajari dan mendapatkan informasi mengenai ibadah haji maupun

umrah dengan lebih cepat dan mudah.

Kata Kunci : Android, Smartphone, Rapid Application Development, UML, Google

Maps, Haji, Umrah, Java, Android SDK

vi

KATA PENGANTAR

Syukur tiada henti penulis panjatkan kepada Allah SWT yang telah

memberikan nikmat, rahmat dan hidayah-Nya kepada penulis sehingga penulis

dapat menyelesaikan penulisan skripsi dengan judul “Perancangan Aplikasi

Pembelajaran Haji dan Umrah Berbasis Multimedia pada Smartphone Bersistem

Operasi Android”. Skripsi ini penulis ajukan sebagai syarat kelulusan dalam

menempuh pendidikan Strata-1 (S1) di Universitas Islam Negeri Syarif

Hidayatullah Jakarta.

Penulis menyadari, penelitian dan penulisan skripsi ini tidak akan berjalan

baik dan lancar tanpa bantuan dari segenap pihak, baik secara langsung maupun

tidak langsung. Oleh karena itu, penulis ucapkan terima kasih kepada :

1. Prof. DR. Dede Rosyada, MA selaku Rektor UIN Syarif Hidayatullah

Jakarta.

2. Dr. Agus Salim, M.Si selaku Dekan Fakultas Sains dan Teknologi UIN

Syarif Hidayatullah Jakarta.

3. Arini, M.T. selaku Ketua Prodi Teknik Informatika, Fakultas Sains dan

Teknologi UIN Syarif Hidayatullah Jakarta serta pembimbing I penulisan

skripsi.

4. Feri Fahrianto, M.Sc. selaku Sekretaris Prodi Teknik Informatika, Fakultas

Sains dan Teknologi UIN Syarif Hidayatullah Jakarta.

5. Andrew Fiade, M.Kom.,selaku pembimbing II penulisan skripsi.

6. Seluruh Dosen Program Studi Teknik Informatika yang tidak mungkin

penulis sebutkan satu persatu.

7. Keluarga, Ayah, Ibu, dan kakak yang senantiasa memberikan doa,

inspirasi dan semangat.

8. Sholahuddin Alisyahbana, Abdullah M.A, Chulman Chirzi dan Zikrillah

yang memberikan dukungan dan bantuan selama pembuatan skripsi, serta

9. Seluruh teman-teman Teknik Informatika angkatan 2010.

Penulis menyadari bahwa penelitian dalam skripsi ini masih jauh dari

sempurna, oleh karena itu penulis sangat mengharapkan saran dan kritik yang

bersifat membangun demi kesempurnaan skripsi ini. Akhir kata, penulis

vii

berharap skripsi ini dapat berguna dan bermanfaat bagi semua pihak yang

terkait.

Jakarta, Juni 2015


1110091000017

viii

DAFTAR ISI

PENGESAHAN UJIAN ........................................................................................ iii

HALAMAN PERNYATAAN ............................................................................... iv

ABSTRAK .............................................................................................................. v

KATA PENGANTAR ........................................................................................... vi

DAFTAR ISI ........................................................................................................ viii

DAFTAR GAMBAR ............................................................................................. xi

DAFTAR TABEL ................................................................................................ xiv

BAB I ...................................................................................................................... 1

PENDAHULUAN .................................................................................................. 1

1.1 Latar Belakang ......................................................................................... 1

1.2 Perumusan Masalah .................................................................................. 5

1.3 Batasan Masalah ....................................................................................... 5

1.4 Tujuan ....................................................................................................... 6

1.5 Manfaat ..................................................................................................... 6

1.5.1 Manfaat bagi Mahasiswa................................................................... 6

1.5.2 Manfaat bagi User ............................................................................. 6

1.5.3 Manfaat bagi Universitas .................................................................. 7

1.6 Metode Penelitian ..................................................................................... 7

1.7 Sistematika Penelitian .............................................................................. 7

BAB II ..................................................................................................................... 9

LANDASAN TEORI .............................................................................................. 9

2.1 Multimedia ............................................................................................... 9

2.1.2. Elemen Multimedia ........................................................................... 9

2.2 E-Learning .............................................................................................. 12

2.3. Android ................................................................................................... 13

2.3.1 Versi – Versi Android ..................................................................... 13

2.3.2 Fitur dan Arsitektur Android ........................................................... 14

2.4. Android Studio ...................................................................................... 16

2.5. Java ......................................................................................................... 17

2.6. Android Software Development Kit (SDK) ........................................... 17

2.7. HTML (Hyper Text Markup Language) ................................................ 17

ix

2.8. JSOUP .................................................................................................... 18

2.9. SQLiteDatabase ...................................................................................... 19

2.10. Haji dan Umrah ................................................................................... 19

2.10.1. Pengertian Haji ................................................................................ 19

2.10.2. Rukun Haji ...................................................................................... 20

2.10.3. Wajib Haji ....................................................................................... 20

2.10.4. Syarat Haji ....................................................................................... 20

2.10.5. Pengertian Umrah............................................................................ 21

2.10.6. Rukun Umrah .................................................................................. 21

2.10.7. Wajib Umrah ................................................................................... 21

2.10.8. Syarat Umrah .................................................................................. 21

2.10.9. Macam-Macam Haji........................................................................ 22

2.11. Literatur Sejenis .................................................................................. 23

2.12. Metode Pengembangan Penelitian RAD ............................................ 27

2.12.1. Definisi RAD .................................................................................. 27

2.12.2. Tahapan-tahapan RAD .................................................................... 28

2.13. Pengujian Black-Box .......................................................................... 29

2.14. Pengujian White-Box .......................................................................... 30

2.14.1. Pengujian Basis Path ....................................................................... 30

2.15. Unified Modeling Language. (UML) ................................................. 32

2.16. Diagram Class ..................................................................................... 33

2.17. Use Case Diagram .............................................................................. 34

2.18. Activity Diagram ................................................................................ 35

2.19. Sequence Diagram .............................................................................. 37

BAB III ................................................................................................................. 39

METODE PENELITIAN ...................................................................................... 39

3.1. Metode Pengumpulan Data .................................................................... 39

3.1.1. Studi Pustaka ................................................................................... 39

3.1.2. Studi Lapangan................................................................................ 39

3.2. Metodologi Pengembangan Sistem ........................................................ 40

3.2.1. Fase perencanaan syarat-syarat ....................................................... 40

3.2.2. Tahap Desain (Desain Workshop) .................................................. 40

3.2.3. Fase Implementasi/Pelaksanaan ...................................................... 44

3.3. Alur/Kerangka Berfikir .......................................................................... 44

x

BAB IV ................................................................................................................. 46

PERANCANGAN DAN IMPLEMENTASI ........................................................ 46

4.1. Tahap Perencanaan Syarat-Syarat .......................................................... 46

4.1.1. Mencari informasi tentang haji dan umrah ..................................... 46

4.1.2. Mengidentifikasi tujuan –tujuan aplikasi ........................................ 46

4.1.3. Menentukan fitur-Fitur yang akan ada pada aplikasi ...................... 46

4.1.4. Kebutuhan Hardware dan Software ................................................ 50

4.2. Tahap Perancangan (Design Workshop) ................................................ 51

4.2.1. Tahap Perancangan Proses .............................................................. 51

4.2.2. Tahap Perancangan Interface .......................................................... 88

4.2.3. Tahap Perancangan Database .......................................................... 92

4.2.4. Membangun Sistem (Pengkodean) ................................................. 95

4.3. Fase Pelaksanaan/Implementasi ........................................................... 110

4.3.1. Implementasi pada Perangkat Keras dan Perangkat Lunak .......... 110

4.3.2. Implementasi antar muka .............................................................. 112

4.3.3. Instalasi Aplikasi pada Perangkat Android ................................... 115

4.3.4. Pengujian Aplikasi ........................................................................ 116

BAB V ................................................................................................................. 132

PENUTUP ........................................................................................................... 132

5.1. Kesimpulan ........................................................................................... 132

5.2. Saran ..................................................................................................... 132

DAFTAR PUSTAKA ......................................................................................... 133

LAMPIRAN ........................................................................................................ 135

Kuisioner Penelitian ........................................................................................ 135

Hasil Kuisioner ................................................................................................ 136

Source Code .................................................................................................... 141

xi

DAFTAR GAMBAR

Gambar 1. 1 Grafik Perkembangan Sistem Operasi di Indonesia 2008-2014 ......... 3

Gambar 2. 1 serif dan sans serif (Vaughan, 2011) ................................................. 10

Gambar 2.2 Arsitektur Sistem Operasi Android ( Hermawan S, Stephanus, 2011.)

............................................................................................................................... 15

Gambar 3. 1 Alur Pemikiran Penelitian ................................................................. 45

Gambar 4. 1 Perancangan Sistem dari Aplikasi ..................................................... 51

Gambar 4. 2 Kegiatan Aktor dalam Use Case ....................................................... 56

Gambar 4.3 Activity Diagram Pengenalan Haji dan Umrah................................. 68

Gambar 4. 4 Activity Diagram Pengenalan Haji ................................................... 69

Gambar 4. 5 Activity Diagram Detail Pengenalan Haji ......................................... 70

Gambar 4. 6. Activity Diagram Pengenalan Umrah .............................................. 71

Gambar 4. 7 Activity Diagram Detail Pengenalan Umrah .................................... 72

Gambar 4. 8 Activity Diagram Hikmah Haji dan Umrah ...................................... 73

Gambar 4. 9 Activity Diagram Detail Hikmah Haji dan Umrah ........................... 74

Gambar 4.10 Activity Diagram Persiapan Haji .................................................... 74

Gambar 4.11 Activity Diagram Detail Persiapan Haji.......................................... 75

Gambar 4.12 Activity Diagram Pelaksanaan Haji ................................................ 75

Gambar 4. 13 Activity Diagram Detail Pelaksanaan Haji ..................................... 76

Gambar 4. 14 Activity Diagram Amalan Haji ....................................................... 76

Gambar 4. 15. Activity Diagram Detail Amalan Haji ........................................... 77

Gambar 4. 16 Activity Diagram Doa Haji ............................................................. 77

Gambar 4. 17 Activity Diagram Detail Doa-Doa Haji .......................................... 78

Gambar 4. 18 Activity Diagram Berita Haji .......................................................... 79

Gambar 4. 19 Activity Diagram Detail Berita Haji. .............................................. 80

Gambar 4. 20. Activity Diagram Detail Pengumuman Haji .................................. 81

Gambar 4. 21 Activity Diagram Peta Lokasi ......................................................... 82

Gambar 4. 22 Activity Diagram Detail Peta Lokasi .............................................. 82

Gambar 4. 23. Activity Diagram Video Haji ......................................................... 83

xii

Gambar 4. 24 Activity Diagram Istilah Haji .......................................................... 83

Gambar 4. 25 Activity Detail Istilah Haji .............................................................. 84

Gambar 4. 26 Activity Cek Keberangkatan Haji ................................................... 85

Gambar 4. 27 Sequence Diagram Pengenalan Haji dan Umrah, Persiapan haji,

Pelaksanaan Haji, Amalan Haji, dan Istilah Haji ................................................. 86

Gambar 4. 28 Sequence Diagram Detail Doa Haji ................................................ 86

Gambar 4. 29 Sequence Diagram Video Haji ........................................................ 87

Gambar 4. 30 Sequence Diagram Berita Haji dan Pengumuman Haji .................. 87

Gambar 4. 31 Sequence Diagram Cek Keberangkatan .......................................... 88

Gambar 4. 32. Rancangan Tampilan Menu Utama ................................................ 89

Gambar 4. 33 Rancangan Tampilan Bahasan Haji ................................................ 89

Gambar 4. 34. Rancangan Tampilan Doa Haji ...................................................... 90

Gambar 4. 35. Rancangan Tampilan Video Haji ................................................... 90

Gambar 4. 36 Rancangan Tampilan List Berita Haji ............................................. 91

Gambar 4. 37 Rancangan Tampilan Berita Haji .................................................... 91

Gambar 4. 38 Rancangan Tampilan Cek Keberangkatan ...................................... 92

Gambar 4. 39 contoh file HTML yang digunakan oleh aplikasi............................ 96

Gambar 4. 40 isi tabel konten pada database dilihat dengan SQLiteBrowser ....... 96

Gambar 4. 41. Isi Tabel doa pada Database dilihat dengan SQLiteBrowser ......... 98

Gambar 4. 42 Tampilan Situs Berita Haji tanggal 1 Mei 2015 ............................ 100

Gambar 4. 43 Elemen-elemen pada situs

http://haji.kemenag.go.id/v2/publikasi/berita/ .................................................... 101

Gambar 4. 44 tampilan situs berita haji (Sumber :

http://www.haji.kemenag.go.id/v2/content/masyarakat-dapat-pantau-pelunasan-

haji-reguler). ........................................................................................................ 103

Gambar 4. 45 elemen-elemen pada situs berita haji (Sumber :

http://haji.kemenag.go.id/v2/content/masyarakat-dapat-pantau-pelunasan-haji-

reguler) ................................................................................................................ 104

Gambar 4. 46 Tampilan Situs Pengumuman Haji tanggal 1 Mei 2015 ........... 105

Gambar 4. 47 elemen-elemen pada situs berita haji ............................................ 105

Gambar 4. 48 Tampilan Situs Pengumuman Haji tanggal 1 Mei 2015 (Sumber :

http://www.haji.kemenag.go.id/v2/content/pelunasan-jemaah-haji-reguler-tahun-

1436h2015m) ...................................................................................................... 107

xiii

Gambar 4. 49 Elemen – Elemen ada situs Pengumuman Haji tanggal 1 Mei 2015

(Sumber : http://www.haji.kemenag.go.id/v2/content/pelunasan-jemaah-haji-

reguler-tahun-1436h2015m) ............................................................................... 107

Gambar 4. 50 Tampilan Situs Cek Keberangkatan Haji tanggal 1 Mei 2015

(Sumber :http://haji.kemenag.go.id/v2/basisdata/xml/2300098444) .................. 109

Gambar 4. 51 Tampilan Menu Utama.................................................................. 112

Gambar 4. 52 Tampilan Bahasan Haji ................................................................. 112

Gambar 4. 53 Tampilan Doa Haji ........................................................................ 113

Gambar 4. 54 Tampilan Video Haji ..................................................................... 113

Gambar 4. 55 Tampilan List Berita Haji .............................................................. 114

Gambar 4. 56 Tampilan Berita Haji ..................................................................... 114

Gambar 4. 57 Tampilan Cek Keberangkatan Haji ............................................... 115

Gambar 4.58 Flowgraph Berita Haji ................................................................... 117

Gambar 4.59 Flowgraph Cek Keberangkatan Haji ............................................. 120

Gambar 4. 60 Tampilan aplikasi pada android v.4.1. .......................................... 131

Gambar 4. 61 Tampilan aplikasi pada android v.5.1 ........................................... 131

xiv

DAFTAR TABEL

Tabel 1.1 Penelitian Aplikasi yang Serupa di Penelitian Terdahulu ....................... 3

Tabel 2.1 Versi-Versi Android yang telah Rilis.................................................... 14

Tabel 2.2 Perbandingan Aplikasi I ........................................................................ 24

Tabel 2.3 Perbandingan Aplikasi II ...................................................................... 25

Tabel 2.4 Perbandingan Aplikasi III ..................................................................... 26

Tabel 2.5 Simbol pada Diagram Kelas ................................................................. 33

Tabel 2.6 Simbol pada Diagram Use Case ........................................................... 34

Tabel 2.7 Simbol pada Diagram Aktifitas ............................................................ 36

Tabel 2.8 Simbol pada Diagram Sekuen ............................................................... 37

Tabel 3.1 Use Case yang digunakan dalam Penelitian ......................................... 41

Tabel 3.2 Activity Diagram yang digunakan dalam Penelitian ............................ 42

Tabel 4.1 Aktor pada Use Case ............................................................................. 52

Tabel 4.2 Diagram Use Case ................................................................................. 52

Tabel 4.3 Use Case Scenario Pengenalan Haji dan Umrah .................................. 57

Tabel 4.4 Use Case Scenario Pengenalan Haji ..................................................... 57

Tabel 4.5 Use Case Scenario Detail Pengenalan Haji .......................................... 58

Tabel 4.6 Use Case Scenario Pengenalan Umrah ................................................. 58

Tabel 4.7 Use Case Scenario Detail Pengenalan Umrah ...................................... 59

Tabel 4.8 Use Case Scenario Hikmah Haji dan Umrah........................................ 59

Tabel 4.9 Use Case Scenario Detail Hikmah Haji dan Umrah ............................. 60

Tabel 4.10 Use Case Scenario Persiapan Haji ...................................................... 60

Tabel 4.11 Use Case Scenario Detail Persiapan Haji ........................................... 61

Tabel 4.12 Use Case Scenario Pelaksanaan Haji.................................................. 61

Tabel 4.13 Use Case Scenario Detail Pelaksanaan Haji ....................................... 62

Tabel 4.14 Use Case Scenario Do‟a Haji dan Umrah .......................................... 62

Tabel 4.15 Use Case Scenario Detail Do‟a Haji dan Umrah ................................ 62

Tabel 4.16 Use Case Scenario Berita Haji............................................................ 63

Tabel 4.17 Use Case Scenario Detail Berita Haji ................................................. 63

Tabel 4.18 Use Case Scenario Detail Pengumuman Haji..................................... 64

Tabel 4.19 Use Case Scenario Peta Lokasi .......................................................... 64

Tabel 4.20 Use Case Scenario Detail Peta Lokasi ................................................ 65

xv

Tabel 4.21 Use Case Scenario Video Haji............................................................ 65

Tabel 4.22 Use Case Scenario Amalan Haji ......................................................... 66

Tabel 4.23 Use Case Scenario Detail Amalan Haji .............................................. 66

Tabel 4.24 Use Case Scenario Istilah Haji ........................................................... 67

Tabel 4.25 Use Case Scenario Detail Istilah Haji................................................. 67

Tabel 4.26 Use Case Scenario Cek Keberangkatan Haji ...................................... 67

Tabel 4.27 Waktu Mulai Video Haji ..................................................................... 98

Tabel 4.28 Tabel Pengujian Test Case pada Berita Haji ..................................... 116

Tabel 4.29 Tabel Pengujian Test Case pada Cek Keberangkatan Haji ............... 119

Tabel 4.30 Hasil Pengujian Aplikasi dengan Metode Black-box ........................ 121

1

BAB I

PENDAHULUAN

1.1 Latar Belakang

Haji merupakan rukun Islam yang kelima yang wajib dilaksanakan oleh

seorang muslim telah yang mampu melaksanakannya. Haji juga merupakan salah

satu ibadah dalam agama Islam yang wajib hanya dilakukan sekali dalam seumur

hidupnya, selebihnya akan dinilai sebagai tathawwu’ (ibadah tambahan), Sesuai

yang disabdakan oleh Nabi SAW yang diriwayatkan oleh Muslim :

“Dari Abu Hurairah ra. bahwa : Rasulullah saw. berkhutbah kepada kita

lalu bersabda: Wahai sekalian manusia, sesungguhnya Allah telah mewajibkan

haji kepada kalian, Karena itu, berhajilah. Seorang laki-laki bertanya: Apakah

setiap tahun, ya Rasulullah? Beliau saw. diam, hingga orang itu menanyakannya

sampai tiga kali. Lalu Rasulullah saw. bersabda: Apabila aku mengatakan: Ya,

maka akan menjadi wajib, dan kalian tidak akan mampu. Selanjutnya Beliau saw.

bersabda: Jangan kalian tanyakan apa yang aku diamkan. Sesungguhnya, orang-

orang sebelum kalian binasa karena banyaknya pertanyaan mereka, dan

perselisihan mereka dengan Nabi mereka. Karena itu, apa yang aku perintahkan,

kerjakanlah semampu kalian, dan jika aku melarang kalian dari sesuatu,

tinggalkan (HR Muslim).”

Haji yang sempurna adalah haji yang dilaksanakan dengan niat ikhlas

hanya karena Allah, manasik atau rukun haji dikerjakan dengan benar. Dalam haji

ada rukun-rukun dan syarat yang harus dilakukan oleh orang yang sedang

melaksanakan ibadah haji. Rukun haji merupakan kegiatan yang wajib dilakukan

pada saat melaksanakan haji. Apabila seorang muslim yang melaksanakan haji

melanggar atau tidak melakukan salah satu dari rukun haji maka ibadah hajinya

akan dianggap tidak sah dan batal dimata Allah SWT.

Seorang muslim tentunya ingin ibadah haji yang dilakukan sekali dalam

seumur hidupnya sempurna dan diterima oleh Allah SWT. Untuk mencapai

2

kesempurnaan dalam melaksanakan ibadah hajinya maka diperlukan panduan dan

pembelajaran dalam ibadah haji ini agar calon haji dapat mempersiapkan dan

membekali dirinya dengan informasi-informasi yang berkaitan dengan haji.

Menurut survei yang dilakukan oleh penulis kepada 50 orang muslimin

berusia 25-50 tahun yang memiliki dan menggunakan smartphone android,

sebanyak 60% responden yang disurvei oleh penulis masih belum memahami

pengetahuan tentang haji. 58% mengatakan hal tersebut disebabkan terbatasnya

waktu dan 28% disebabkan oleh kurang jelasnya penjelasan yang ada pada buku

panduan yang diberikan.

Dari masalah tersebut, penulis ingin membuat para kaum muslimin dapat

dengan mudah menerima dan mempelajari informasi tentang haji. Dengan

bantuan teknologi, multimedia dan media elektronik saat ini, hal tersebut dapat

dilakukan. Menurut Malik dan Agarwal (2012), multimedia memiliki potensi

untuk membentuk pendidikan dengan berbagai macam model pembelajaran untuk

target pengguna dengan berbagai tingkatan umur. Dan menurut Jackson, Media

elektronik membuat konten-konten multimedia seperti game, digital audio,

digital video, animasi dan gambar dapat dinikmati semuanya hanya dengan

sebuah perangkat elektronik (Jackson, 2011). Contoh perangkat elektronik yang

sedang sangat berkembang saat ini adalah smartphone. Smartphone adalah salah

satu media elektronik yang dapat menggunakan media-media tersebut dan praktis

karena dapat digunakan hanya dengan genggaman tangan dan mempunyai

mobilitas yang tinggi.

Dari uraian diatas, penulis ingin merancang aplikasi multimedia pada

perangkat smartphone bersistem operasi android tentang informasi-informasi dan

tata cara terkait ibadah haji yang baik dan benar yang diharapkan dapat

memudahkan, menambah ilmu pengetahuan dan membantu para muslimin dalam

pelaksanaan ibadah hajinya.

Smartphone bersistem operasi android dipilih oleh penulis karena menurut

data statistik StatsCounter, sistem operasi android merupakan sistem operasi yang

saat ini paling berkembang di Indonesia dan banyak digunakan oleh para warga

Indonesia.

3

Gambar 1.‎01 Grafik Perkembangan Sistem Operasi di Indonesia 2008-2014

(Sumber: http://gstatscounter.com)

Pada saat ini sudah ada penelitian dan aplikasi yang serupa dengan apa

yang ingin dirancang penulis, diantaranya adalah

Tabel 1.1. Tabel Penelitian Aplikasi yang Serupa di Penelitian Terdahulu

No Nama Aplikasi Sumber Kelebihan dan Kekurangan

Aplikasi

1 Aplikasi Simulator

Manasik Haji Berbasis

Mobile

Yayan

Supriatna,

2012

+ Terdapat fitur video

- Isi Konten : Video simulasi

haji, Pedoman-pedoman haji,

persiapan sebelum haji.

2 Analisis dan

Perancangan Aplikasi

Manasik Haji

Menggunakan

Teknologi J2ME

Robimadipa

Yanriko, 2012

- Hanya untuk Handphone

berbasis J2ME

- Konten hanya berupa Teks

- Isi Konten : Pencarian istilah-

istilah haji, informasi Haji,

informasi tentang Umrah,

Doa-Doa Haji, Jadwal Ibadah

Haji, Tips Ibadah Haji

3 Perancangan dan Abdur - Hanya untuk Handphone

4

Implementasi Mobile

Aplication

Pembelajaran Haji dan

Umrah Berbasis

Multimedia

Rahman, 2013 berbasis Symbian

- konten berupa teks dan audio

- Isi Konten : Pengertian, Dasar

Hukum Sejarah Haji dan Umrah,

Pelaksanaan Haji dan Umrah,

Doa-Doa Haji Umrah dan Istilah-

Istilah

4 Panduan Haji &

Umrah

https://play.go

ogle.com/store/

apps/details?id

=com.andromo

.dev272448.ap

p260477

+ Sudah ada konten video

- Konten berupa teks dari file

pdf yang masih membutuhkan

pihak ketiga untuk

membukanya

5 Aplikasi Manasik Haji

https://play.go

ogle.com/store/

apps/details?id

=com.haji

- Konten berupa teks dan audio

- Isi Konten :Persiapan Haji,

Do‟a Haji, Rukun dan Wajib

Haji, Kegiatan Ibadah Haji

6 Haji dan Umrah Saku

https://play.go

ogle.com/store/

apps/details?id

=com.Lukman

Harun.HajiUm

roh

- Konten hanya berupa teks

- Isi Konten : Penjelasan Haji,

Umrah, Jenis Ibadah Haji,

Tips Ibadah Haji, Rukun dan

Wajib Haji

Tetapi masih ada kekurangan dan hal yang dapat dikembangkan pada

penelitian dan aplikasi tersebut, diantara kekurangannya adalah mayoritas aplikasi

tersebut hanya melakukan penyampaian tata cara dan informasi tentang haji dan

umrah melalui teks, tidak dapat mendapatkan informasi terkini dan hanya dapat

beroperasi pada perangkat khusus yang sudah kurang berkembang pada saat ini.

(dapat dilihat pada Tabel 1.1 nomor 1, 2, dan 3).

5

Sesuai dengan uraian penulis diatas, maka penulis ingin menulis Tugas

Akhir ini dengan penelitian berjudul “Perancangan Aplikasi Pembelajaran Haji

dan Umrah Berbasis Multimedia pada Smartphone Bersistem Operasi

Android” yang berfokus pada pemberian informasi baik secara offline maupun

online dan tata cara melaksanakan haji dengan bantuan media teks, suara, gambar

dan video.

Berdasarkan judul diatas, pada penelitian ini penulis akan merancang

aplikasi tentang haji dan umrah yang memberikan informasi haji secara online dan

menjelaskan tata cara dan do‟a – do‟a haji dan umrah dengan bantuan visual dan

audio seperti teks, gambar, video, suara, beserta peta dan fitur-fitur lain.

1.2 Perumusan Masalah

Berdasarkan latar belakang yang telah dijelaskan maka dikembangkan

suatu rumusan masalah pada penelitian ini yaitu bagaimana merancang dan

membangun aplikasi tentang haji dan umrah untuk mendapatkan informasi berita

tentang haji dan umrah secara online dan tata cara melaksanakan haji yang

dibantu dengan media video, suara dan gambar pada smartphone berbasis

android?

1.3 Batasan Masalah

Batasan-batasan masalah dalam penelitian ini adalah sebagai berikut :

1. Aplikasi ini diperuntukan hanya pada pengguna smartphone dengan

operasi sistem android.

2. Aplikasi ini hanya menyediakan informasi terkini tentang haji dan umrah

yang diambil dari situs berita haji di Indonesia dan panduan

melaksanakan haji dan umrah, tidak menyediakan hal terkait pendaftaran,

pembayaran yang berkaitan dengan haji dan umrah

3. Pengenalan dan tata cara pelaksanaan haji dan umrah bersumber dari buku

dan e-book (selengkapnya dapat dilihat pada bab II dan daftar pustaka).

4. Pelaksanaan haji hanya menjelaskan tata cara pelaksanaan haji tamattu‟.

5. Informasi online tentang haji dan umrah bersumber dari situs kementerian

agama tentang haji (http://www.haji.kemenag.or.id).

6

6. Aplikasi ini memiliki konten teks, audio dan visual. Visual berupa video

yang membutuhkan koneksi internet dan gambar.

7. Jalur pada peta hanya menampilkan jalur darat.

8. Software pendukung yang digunakan yaitu , Android Studio 1.2.1, Android

SDK ,dan Android Emulator

9. Aplikasi yang dihasilkan hanya terbatas untuk pengguna Android dengan

versi 4.1 keatas.

10. Aplikasi hanya ada dalam bahasa Indonesia

1.4 Tujuan

Adapun Tujuan yang akan dicapai dari penelitian ini adalah untuk

merancang dan membangun aplikasi tentang haji dan umrah pada smartphone

berbasis android untuk mendapatkan informasi berita tentang haji dan umrah

secara online dan tata cara melaksanakan haji dengan dibantu media video, suara

dan gambar dimana saja dan kapan saja melalui smartphone berbasis android.

1.5 Manfaat

Manfaat yang dapat diambil dari penelitian ini diantaranya:

1.5.1 Manfaat bagi Mahasiswa

1. Dapat menerapkan ilmu-ilmu yang didapat selama perkuliahan

khususnya mengenai perancangan perangkat lunak terutama yang

memiliki konten multimedia pada mobile android

2. Bertambahnya wawasan dan pengalaman peneliti dalam

merancang dan membangun aplikasi terutama yang memiliki

konten multimedia pada perangkat android.

1.5.2 Manfaat bagi Pengguna

1. Dapat memudahkan para calon haji maupun umrah dalam

mengakses dan mendapatkan informasi tentang haji dan umrah

dimana saja dan kapan saja melalui smartphone-nya.

2. Dapat mengetahui tata cara melaksanakan haji dan umrah melalui

smartphone-nya.

3. Para calon haji maupun umrah dapat lebih mudah dalam

mempersiapkan diri mereka sebelum melaksanakan ibadahnya

7

1.5.3 Manfaat bagi Universitas

1. Mengetahui kemampuan mahasiswanya dalam menguasai ilmu

yang telah didapatkan di bangku perkuliahan

2. Mengetahui kemampuan mahasiswa dalam menerapkan ilmunya

dan sebagai bahan evaluasi

1.6 Metode Penelitian

Dalam menyusun tugas akhir ini penulis akan menggunakan metode

pengumpulan data sebagai berikut :

1. Studi Pustaka

Pada metode ini penulis mengumpulkan data dari buku-buku atau

literatur yang sejenis yang berhubungan dengan penelitian sebagai

referensi sehingga dapat membantu penulis dalam melakukan tugas akhir

ini.

2. Studi Lapangan

Pada metode ini penulis menggunakan salah satu jenis studi lapangan

yaitu kuisioner. Pada metode ini penulis menyebarkan kuisioner untuk

mengetahui permasalahan dan kesulitan pada saat mempelajari haji dan

umrah. Kuisioner ini juga bertujuan untuk mengetahui keinginan yang

diharapkan oleh calon pengguna aplikasi serta menganalisa kelayakan

aplikasi. Hasil kuisioner akan dijadikan sebagai sampel data.

Sedangkan dalam metode pengembangan penelitian, penulis

menggunakan metode pengembangan RAD yang menekankan pada fase-

fase sebagai berikut:

1. Tahap perencanaan syarat-syarat

2. Tahap desain (desain workshop)

3. Tahap implementasi

1.7 Sistematika Penelitian

Dalam penelitian ini pembahasan terbagi dalam 5 Bab yang secara singkat

akan diuraikan sebagai berikut :

8

BAB 1 PENDAHULUAN

Dalam bab ini akan dibahas mengenai latar belakang dari penulisan tugas

akhir ini, perumusan masalah, batasan masalah, tujuan penelitian, manfaat

penulisan, metodologi penelitian, dan sistematika penelitian yang

merupakan gambaran menyeluruh dari penulisan tugas akhir ini .

BAB 2 LANDASAN TEORI

Dalam bab ini akan dibahas berbagai teori yang melandasi penelitian ini

dan yang berhubungan dengan topik yang dibahas di penelitian ini .

BAB 3 METODOLOGI PENELITIAN

Bab ini berisikan metode pengumpulan data yang digunakan dalam

penelitian ini serta metode yang digunakan dalam perancangan aplikasi

hasil dari penelitian ini .

BAB 4 PEMBAHASAN

Bab ini berisikan pembahasan dari penelitian ini , yang meliputi tentang

perancangan dan pembuatan dari aplikasi mobile hasil dari penelitian ini .

Bab ini menjelaskan secara terperinci langkah – langkah yang digunakan

dalam melakukan perancangan dan pembuatan Aplikasi Pembelajaran Haji

dan Umrah Berbasis Multimedia

BAB 5 PENUTUP

Bab ini menguraikan tentang kesimpulan yang didapat dari hasil penelitian

yang dilakukan, dan juga saran yang dapat dilakukan untuk pengembangan

aplikasi ke arah yang lebih baik di masa yang akan datang.

9

BAB II

LANDASAN TEORI

2.1 Multimedia

2.1.1. Pengertian Multimedia

Menurut Vaughan (2011) Multimedia adalah kombinasi dari teks,

gambar, grafis, suara, animasi, dan elemen-elemen video yang

dimanipulasi secara digital. Multimedia Interaktif adalah kombinasi dari

elemen-elemen multimedia yang memungkinkan pengguna mengontrol

langsung aplikasi multimedia dan mendapatkan feedback secara langsung.

Multimedia dapat membantu memberikan informasi secara jelas,

menarik, dan efektif. Hal ini dikarenakan terdapat elemen-elemen

multimedia yang membantu informasi menjadi lebih efektif.

2.1.2. Elemen Multimedia

Menurut Vaughan (2011) komponen multimedia terbagi atas lima

jenis yaitu:

1. Teks

Teks adalah bagian penting dalam multimedia. Teks dapat

membentuk kata, surat atau narasi. Penggunaan teks bervariasi,

tergantung fungsi dan aplikasi yang dibuat. Contohnya pada

pembuatan game, hanya sedikit sekali teks yang dibutuhkan.

Sementara itu pada pembuatan ensiklopedia akan membutuhkan teks

dalam jumlah banyak. Secara umum ada empat macam teks yaitu teks

cetak, teks hasil scan, teks elektronik, dan hypertext.

Vaughan (2011) secara umum membagi teks menjadi dua istilah,

yaitu serif dan sans serif. Perbedaan keduanya adalah serif merupakan

contoh kecil pada akhir huruf. Times, New Century Schoolbook,

Bookman, dan Palatino merupakan contoh dari font serif. Sedangkan,

10

Helvetica, Verdana, Arial, Optima, dan Avant Garde merupakan sans

serif. Perhatikan perbedaan antara serif dan sans serif.

Gambar 2.‎01 serif dan sans serif (Vaughan, 2011)

Pada halaman yang dicetak, font serif biasanya digunakan untuk

badan teks karena serif dapat membantu menuntun mata pembaca

melihat baris-baris teks. Sebaliknya, font sans serif digunakan untuk

headline dan pernyataan yang dicetak tebal.

2. Grafik (image)

Menurut Vaughan (2011), Penilaian terhadap suatu aplikasi

multimedia dipengaruhi oleh pengaruh visual dari aplikasi. Karena itu

gambar merupakan salah satu elemen paling dalam pembuatan sebuah

proyek multimedia. Secara umum gambar dibagi dalam dua jenis,

yaitu vektor dan bitmap.

Bitmap adalah sebuah data matriks yang menjelaskan karakteristik

dari titik-titik individual dalam gambar, biasa disebut pixel, yang

membentuk suatu gambar. Bitmap digunakan untuk gambar-gambar

yang berupa foto realistik dan gambar yang memerlukan detail

kompleks. Kekurangan utama gambar bitmap adalah ukurannya yang

besar dan tidak dapat diperbesar tanpa menjaga kualitas gambar.

Contoh kompresi bitmap adalah JPEG dan Tagged Image File Format

(TIFF).

Vektor digunakan untuk garis, kotak, lingkaran, poligon , dan

bentuk-bentuk lain yang bisa diekspresikan secara matematis dalam

sudut, koordinat, dan jarak. Untuk suatu gambar yang sama, besar file

gambar vektor jauh lebih kecil daripada gambar bitmap. Selain itu

gambar vektor dapat diperbesar dan diperkecil tanpa mengurangi

kualitas atau menambah ukuran file gambar. Kekurangan gambar

11

vektor yaitu tidak bisa digunakan untuk menyimpan foto ataupun

gambar-gambar kompleks dan tidak bisa dibuka di halaman web tanpa

plug-in seperti Flash Player. Contoh format vektor adalah Scalable

Vector Graphics (SVG) dan Vector Markup Language (VML).

3. Audio

Menurut Vaughan (2011), Suara merupakan gabungan berbagai

sinyal, tetapi suara murni secara teoritis dapat dijelaskan dengan

kecepatan frekuensi yang diukur dalam Hertz (HZ) dan kenyaringan

bunyi dengan pengukuran dalam desibel. Menurut Vaughan, audio

digital dibuat saat sebuah gelombang dikonversikan dari sebuah

gelombang suara ke dalam angka---prosesnya disebut digitizing

(mendigitalkan). Suara digital dapat dibuat dari sebuah mikrofon,

synthesizer, tape recoding yang ada, siaran televisi dan radio secara

live, dan CD-CD populer. Untuk mendigitalkan suara dapat dari

sumber apapun, natural atau sudah direkam.

4. Video

Menurut Vaughan (2011), Video sebagai integrasi sempurna antara

gambar bergeda audio yang serempak. Klip video yang cocok,

direncanakan dengan hati-hati, dan dilaksanakan dengan baik dapat

membuat perbedaan dramatis pada sebuah proyek multimedia.

Dari semua elemen multimedia, video adalah yang membutuhkan

performa memori dan penyimpanan komputer yang paling tinggi.

Karena alasan tersebut, masih banyak desainer multimedia yang

memilih meniadakan keberadaan video dalam proyeknya. Beberapa

teknologi multimedia dan usaha penelitian yang terpopuler dan paling

dicari saat ini adalah bagaimana memadatkan video digital menjadi

aliran informasi yang kecil dan mudah dikelola.

5. Animasi

Menurut Vaughan (2011), Animasi adalah tindakan membuat

sesuatu menjadi hidup. Dengan animasi, serangkaian gambar diubah

secara perlahan dan sangat cepat, satu sesudah yang lain sehingga

12

tampak berpadu kedalam ilusi visual gerak. Efek visual seperi wipe,

fade, zoom, dan dissolve merupakan bentuk animasi sederhana.

Sebelum video seperti QuickTime dan AVI video menjadi umum,

animasi adalah sumber utama aksi dinamis dalam presentasi

multimedia.

2.2 E-Learning

Para ahli mempunyai pandangan yang berbeda-beda terhadap pengertian

E-Learning. Menurut E. Hartley (Hartley, 2001), E-Learning merupakan suatu

jenis belajar mengajar yang memungkinkan tersampaikannya bahan ajar ke siswa

dengan menggunakan media internet, Intranet atau media jaringan komputer lain.

Menurut LearnFrame.com dalam Glossary of e-Learning Terms (Glossary,

2001), E-Learning adalah sistem pendidikan yang menggunakan aplikasi

elektronik untuk mendukung belajar mengajar dengan media internet, jaringan

komputer, maupun komputer standalone.

Matthew Comerchero dalam E-Learning Concepts and Techniques

[Bloomsburg, 2006], E-learning adalah sarana pendidikan yang mencakup

motivasi diri sendiri, komunikasi, efisiensi, dan teknologi. Karena ada

keterbatasan dalam interaksi sosial, siswa harus menjaga diri mereka tetap

termotivasi. E-learning efisien karena mengeliminasi jarak dan arus pulang-pergi.

Jarak dieliminasi karena isi dari e-learning didesain dengan media yang dapat

diakses dari terminal komputer yang memiliki peralatan yang sesuai dan sarana

teknologi lainnya yang dapat mengakses jaringan atau Internet.

2.2.1. Keuntungan e-learning

Keuntungan menggunakan e-Learning diantaranya sebagai berikut

(Wahono, 2005):

1. Fleksibel karena siswa dapat belajar kapan saja, di mana saja, dan

dengan tipe pembelajaran yang berbeda-beda.

2. Menghemat waktu proses belajar mengajar

3. Mengurangi biaya perjalanan

4. Menghemat biaya pendidikan secara keseluruhan

5. Menjangkau wilayah geografis yang lebih luas

13

2.2.2 Kelemahan E-Learning

Kelemahan menggunakan e-learning diantaranya sebagai berikut

(Rosenberg, 2006):

1. Karena e-learning menggunakan teknologi informasi, tidak semua

orang terutama orang yang masih awam dapat menggunakannya

dengan baik.

2. Membuat e-learning yang interaktif dan sesuai dengan keinginan

pengguna membutuhkan programming yang sulit, sehingga

pembuatannya cukup lama.

3. E-learning membutuhkan infrastruktur yang baik sehingga

membutuhkan biaya awal yang cukup tinggi.

4. Tidak semua orang mau menggunakan e-learning sebagai media

belajar

2.3. Android

Android awalnya diciptakan oleh Andy Rubin sebagai sistem operasi

untuk ponsel telepon, sekitar awal abad kedua puluh satu ini. Android adalah

sistem operasi yang didasarkan pada versi modifikasi dari Linux. Pada tahun 2005

Google membeli Android dan mengambil alih pekerjaan development beserta tim

development mereka (Lee, Wei-Meng, 2011).

Google menginginkan Android menjadi open dan free, oleh karena itu,

sebagian besar kode Android dirilis dibawah open-source Apache License, yang

berarti semua orang yang ingin menggunakan Android dapat melakukannya

dengan cara men-download kode sumber Android.

Keuntungan mengambil Android adalah Android menawarkan pendekatan

ke pengembangan aplikasi. Para pengembang hanya perlu mengembangkan untuk

Android dan aplikasi-aplikasi tersebut akan dapat dijalankan pada bermacam-

macam perangkat yang berbeda selama perangkat tersebut menggunakan Android.

2.3.1 Versi – Versi Android

Android telah melakukan beberapa update sejak hari pertama

meraka rilis. Tabel 2.1 dibawah menunjukkan versi-versi Android yang

telah dirilis oleh Google.

14

Tabel 2.1 Tabel Versi – Versi Android yang Telah dirilis

Versi Kode Tanggal Rilis

1.0 - 23 September 2008

1.1 - 9 Februari 2009

1.5 Cupcake 27 April 2009

1.6 Donut 15 September 2009

2.0 Éclair 26 Oktober 2009

2.2 Froyo 20 May 2010

2.3 GingerBread 6 Desember 2010

3.0 Honeycomb 22 Februari 2011

4.0 Ice Cream Sndwitch 19 Oktober 2011

4.1 Jelly Bean 27 Juni 2012

4.4 Kitkat 31 Oktober 2013

5.0 Lolipop 25 Juni 2014

2.3.2 Fitur dan Arsitektur Android

Android memiliki fitur – fitur. Fitur yang tersedia pada Android

adalah : (Hermawan S, Stephanus, 2011)

• Framework aplikasi : memungkinkan penggunaan dan pemindahan

dari komponen yang tersedia

• Dalvik virtual machine : virtual machine yang dioptimalkan untuk

perangkat mobile

• Grafik : grafik 2D dan grafik 3D yang didasarkan pada library

OpenGL

• SQLite : untuk penyimpanan data

• Mendukung media : audio,video,dan berbagai format gambar

(MPEG4,H.264,MP3,AAC,AMR,JPG,PNG,GIF)

• GSM,Bluetooth,EDGE,3G,and WiFi (tergantung hardware)

• Camera,Global Positioning System (GPS),compass,dan

accelerometer (tergantung hardware)

15

• Lingkungan pembangun yang kaya,termasuk emulator,peralatan

debugging,dan plugin untuk Eclipse IDE

Sistem operasi android dibangun berdasarkan kernel Linux dan memiliki

arsitektur sebagai berikut :

Gambar 2.2 Arsitektur Sistem Operasi Android ( Hermawan S, Stephanus, 2011.)

• Applications

Lapisan ini adalah lapisan aplikasi, serangkaian aplikasi akan

terdapat pada perangkat mobile . Aplikasi inti yang telah terdapat

dalam Android termasuk kalender, kontak, SMS, dan lain-lain.

Aplikasi – aplikasi ini ditulis dengan bahasa pemrograman Java

• Application Framework

Pengembang aplikasi memiliki akses penuh ke Android sama

dengan aplikasi inti yang telah tersedia. Pengembang dapat dengan

mudah mengakses informasi lokasi, mengatur alarm, menambah

pemberitahuan ke status bar dan lain sebagainya. Arsitektur

aplikasi ini dirancang untuk menyederhanakan penggunaan

kembali komponen, aplikasi apa pun dapat mempublikasikan

kemampuan dan aplikasi lain dapat menggunakan kemampuan

mereka sesuai batasan keamanan. Dasar dari aplikasi adalah

seperangkat seperangkat layanan dan sistem, yaitu berbagai view

16

yang digunakan untuk membangun UI, Content Provider yang

memungkinkan aplikasi berbagai data, Resource Manager

menyediakan akses bukan kode seperti grafik, string, dan layout ,

NotificationManager yang akan membuat aplikasi dapat

menampilkan tanda pada status bar dan Activity Manager yang

berguna mengatur daur hidup dari aplikasi.

• Libraries

Satu set libraries dalam bahasa C/C++ yang digunakan oleh

berbagai komponen pada sistem Android.

• Android Runtime

Satu set libraries inti yang menyediakan sebagian besar fungsi

yang tersedia di libraries inti dari bahasa pemrograman Java.

Setiap aplikasi akan berjalan sebagai proses sendiri pada Dalvik

Virtual Machine (VM).

• Linux Kernel

Android bergantung pada linux versi 2.6 untuk layanan sistem inti

seperti keamanan, manajemen memori, manajemen proses,

network stack dan model driver. Kernel juga bertindak sebagai

lapisan antara hardware dan seluruh software.

2.4. Android Studio

Android Studio adalah lingkungan pengembangan Android baru

berdasarkan IntelliJ IDEA. Mirip dengan Eclipse dengan ADT Plugin, Android

Studio menyediakan alat pengembang Android terintegrasi untuk pengembangan

dan debugging (http://developer.android.com/tools/studio/index.html). Di atas

kemampuan yang Anda harapkan dari IntelliJ, Android Studio menawarkan:

Berbasis Gradle membangun dukungan.

Refactoring android, spesifik dan perbaikan yang cepat.

Alat Lint untuk menangkap kinerja, kegunaan, kompatibilitas versi dan

masalah lainnya.

ProGuard dan aplikasi-penanda tanganan kemampuan.

17

Penyihir berbasis template untuk membuat desain Android umum dan

komponen.

Sebuah layout editor yang memungkinkan Anda untuk drag-and-drop

UI komponen, layout pratinjau pada beberapa konfigurasi layar, dan

banyak lagi.

2.5. Java

Menurut Abdul Kadir (2005), Java adalah bahasa pemprograman

serbaguna yang dapat digunakan untuk membuat suatu program. Sedangkan

Menurut Isak Rickyanto (2005), Java Merupakan teknologi dimana teknologi

tersebut mencakup java sebagai bahasa pemprograman yang memiliki sintaks dan

aturan pemprograman tersendiri, juga mencakup java sebagai platform dimana

teknologi ini memiliki virtual machine dan library yang diperlukan untuk menulis

dan menjalankan program yang ditulis dengan bahasa pemprograman java.

2.6. Android Software Development Kit (SDK)

Android SDK adalah tool API (Application Programming Interface) yang

diperlukan untuk mulai mengembangkan aplikasi pada platform Android

menggunakan bahasa pemrograman Java. Android merupakan subset perangkat

lunak untuk ponsel yang meliputi sistem operasi, middleware dan aplikasi kunci

yang release oleh Google. Saat ini di sediakan Android SDK (Software

Development Kit) sebagai alat bantu dan API untuk mulai mengembangkan

aplikasi pada platform Android menggunakan bahasa pemograman java (Nazrudin

Safaat 2011).

2.7. HTML (Hyper Text Markup Language)

HTML, HyperText MarkUp Language adalah bahasa utama untuk

membuat suatu halaman web. HTML memberikan struktur pada halaman web

seperti heading, paragraf, atau gambar. Oleh karena itu, bahasa ini dinamakan

markup, karena HTML hanya memberikan struktur suatu halaman web, bukan

membuat suatu program. (Hoew, Shay. 2014 )

Dokumen HTML mempunyai struktur yang diperlukan elemen

diantaranya : <!DOCTYPE html>, <html>, <head>, and <body>.

18

<!DOCTYPE html> menginformasikan tipe HTML yang digunakan

pada web browser dan diletakkan pada awal dokumen HTML. Setelah

<!DOCTYPE html>, terdapat elemen <html> yang menandakan awal

dokumen.

Di dalam elemen <html>, terdapat elemen <head> yang

mengidentifikasi bagian atas dokumen, termasuk metadata. Konten pada <head>

tidak ditampilkan pada halaman web.

Konten-konten yang terlihat pada halaman web tardapat pada elemen

<body>. Struktur HTML biasanya seperti berikut :

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Hello World</title>

</head>

<body>

<h1>Hello World</h1>

<p>This is a web page.</p>

</body>

</html>

2.8. JSOUP

JSOUP adalah sebuah library java yang bekerja untuk dunia HTML.

Jsoup menyediakan API yang sangat nyaman untuk extracting dan manipulasi

data menggunakan DOM, CSS, dan Jquery (http://www.jsoup.org). Beberapa

fungsi JSOUP :

Mengikis dan mengurai HTML dari sebuah URL, file, atau String

Menemukan dan meng-extract data , menggunakan DOM traversal atau

css selector

Memanipulasi elemen HTML, attribut dan teks

Membersihkan konten user-submited terhadap sebuah white-list yang

aman, untuk mencegah serangan XSS attack

Hasil HTML rapi.

19

JSOUP juga merupakan library yang bersifat open source (gratis atau tidak

berbayar)

2.9. SQLiteDatabase

SQLiteDatabase merupakan interface yang ada pada sistem operasi

Android yang digunakan untuk membuat relational database. SQLite menyokong

implementasi dari SQL yang kaya untuk apapun yang dibutuhkan oleh aplikasi

mobile. Setiap aplikasi dapat memiliki databasenya sendiri dengan pengaturan

lengkap. (Hermawan S, Stephanus, 2011)

Dengan penggunaan SQLite, dapat dibuat database untuk aplikasi yang

digunakan untuk menyimpan dan mengatur data aplikasi terstruktur. Desain

database yang baik termasuk normalisasi cukup penting untuk mengurangi

redudancy.

2.10. Haji dan Umrah

2.10.1. Pengertian Haji

Haji adalah datang ke Baitullah dan tempat-tempat tertentu untuk

melaksanakan serangkaian ibadah pada waktu yang telah ditentukan,

dengan syarat-syarat yang telah ditetapkan. (Abdurrachman Rochimi,H.M,

2011)

Maksud tempat-tempat tertentu adalah Ka‟bah, Mas‟a (tempat sa‟i)

Arafah, Muzdalifah, dan Mina. Sedangkan waktu haji yang telah

ditentukan yaitu dimulai dari bulan Syawal sampai sepuluh hari pertama

bulan Dzulhijjah. Adapun yang dimaksud dengan syarat-syarat adalah

ketentuan-ketentuan yang menjadi dasar diwajibkannya haji bagi

seseorang.

Haji merupakan salah satu rukun islam yang lima dan syari‟at

islam paling agung. Haji wajib bagi setiap muslim yang mukallaf dan

mampu, satu kali sepanjang hayat, dan selebihnya sunnah. Orang yang

meengingkari kewajibannya adalah kafir berdasarkan nash dan ijma.

20

2.10.2. Rukun Haji

Rukun haji adalah kegiatan yang wajib dilaksanakan dalam ibadah

haji. Jika salah satunya ditinggalkan maka hajinya batal. Rukun-rukun itu

adalah: (Abdurrachman Rochimi,H.M, 2011)

1) Ihram yaitu berpakaian ihram dan niat ihram dan haji.

2) Wukuf di arafah pada tanggal 9 Dzulhijjah; yakni hadirnya

sesorang yang berihram untuk haji sesudah tergelincir matahari

yaitu pada hari ke-9 zulhijjah.

3) Thawaf atau thawaf ifadhoh

4) Sa‟i yaitu lari-lari kecil antara sofa dan marwah 7 kali.

5) Tahallul artinya mencukur atau mengunting rambut sedikitnya 3

helai

6) Tertib.

2.10.3. Wajib Haji

Wajib Haji adalah hal-hal yang harus dilakukan dalam ibadah haji.

Jika ditinggalkan maka wajib dengan Dam/fidyah. Hal-hal tersebut adalah:

(Abdurrachman Rochimi,H.M, 2011)

1) Ihram dari miqat zamani dan makani yang telah ditentukan

2) Bermalam di Muzdalifah sesudah wukuf di Arafah

3) Bermalam di Mina selama 2 atau 3 malam pada hari tasyrik

4) Melempar jumrah aqobah 7 kali dengan batu

5) Melempar jumrah ketiga-tiganya yaitu jumrah ula, wustho, dan

aqabah.

6) Meninggalkan segala yang diharamkan karena ihram

7) Thawaf Wada‟

2.10.4. Syarat Haji

Adapun Syarat sah haji adalah sebagai berikut : (Abdurrachman

Rochimi,H.M, 2011)

1. Islam

2. Berakal

3. Baligh

21

4. Ihram dari miqat makani

5. Memenuhi seluruh rukun haji

2.10.5. Pengertian Umrah

Secara bahasa, kata umrah bermakna ziarah (berkunjung, atau

mengunjungi). Adapun maknanya secara syar'i adalah berziarah ke

Baitullah dengan sengaja. (Abdurrachman Rochimi,H.M, 2011)

2.10.6. Rukun Umrah

Rukun Umrah adalah kegiatan yang wajib dilaksanakan dalam

ibadah umrah. Jika salah satunya ditinggalkan maka umrahnya batal.

Rukun-rukun itu adalah: (Abdurrachman Rochimi,H.M, 2011)

1) Ihram yaitu berpakaian ihram dan niat ihram dan haji.

2) Thawaf atau thawaf ifadhoh

3) Sa‟i yaitu lari-lari kecil antara sofa dan marwah 7 kali.

4) Tahallul artinya mencukur atau mengunting rambut sedikitnya 3

helai

5) Tertib.

2.10.7. Wajib Umrah

Wajib Umrah adalah hal-hal yang harus dilakukan dalam ibadah

umrah. Jika ditinggalkan maka wajib dengan Dam/fidyah. Hal-hal tersebut

adalah: (Abdurrachman Rochimi,H.M, 2011)

1) Ihram dari miqat zamani dan makani yang telah ditentukan

2) Bermalam di Muzdalifah sesudah wukuf di Arafah

3) Bermalam di Mina selama 2 atau 3 malam pada hari tasyrik

4) Melempar jumrah aqobah 7 kali dengan batu

5) Melempar jumrah ketiga-tiganya yaitu jumrah ula, wustho, dan

aqabah.

6) Meninggalkan segala yang diharamkan karena ihram

7) Thawaf Wada‟

2.10.8. Syarat Umrah

Adapun Syarat sah umrah adalah sebagai berikut : (Abdurrachman

Rochimi,H.M, 2011)

22

1. Islam

2. Berakal

3. Baligh

4. Ihram dari miqat makani

5. Memenuhi seluruh rukun haji

2.10.9. Macam-Macam Haji

Ada tiga macam haji yang disepakati oleh para ulama, yaitu :

(Sayyid Muhammad bin Alwi Al-Maliki, 2012)

1. Ifrad, yaitu mengatakan, “Saya niat haji dan ihram untuknya

karena Allah Ta‟ala. Setelah itu menghindari dari segala larangan

ihram, selalu mengucapkan talbiyah, mengingat Allah Ta‟ala

hingga saat tiba di Makkah, kemudian melakukan thawaf qudum,

melakukan sa’i‎ haji, tetap dalam keadaan ihram sampai tiba di

Arafah dan singgah di Muzdalifah.

Setelah mabit yang wajib (bermalam di Muzdalidah), lalu singgah

di Mina, melempar jumrah „Aqabah, mencukur atau memotong

rambut, melaksanakan thawaf ifadhah hingga mengakhsa

dilakukan setelah atau sebelum haji, tetapi mendahulukan haji

daripada umrah dalam haji ifrad itu lebih utama. Adapun jika

hendak mendahulukan umrah daripada haji, ada cara haji tamattu‟.

2. Tamattu‟, dimulai dengan niat “Saya niat umrah dan ihram

untuknya karena Allah Ta‟ala”. Kemudian pergi ke Makkah seperti

haji ifrad, melaksanakan thawaf umrah, sa‟i antara shafa dan

marwah, mencukur atau memotong rambut, ber-tahallul untuk

umrah. Pada haji kedelapan bulan Dzulhijjah, baru ber-ihram

untuk haji dan melaksanakan sesuai amalannya secara sempurna.

Dalam keadaan ini, Jema‟ah haji wajib membayar dam, kambing

kurban.

3. Qiran, dimulai dengan niat, “Saya niat haji dan umrah, dan ihram

untuk keduanya karena Allah Ta‟ala”, atau ihram untuk umrah saja,

dan sebelum mulai melaksanakan segala amalannya, jema‟ah

23

memasukkan haji padanya, melakukannya seperti haji ifrad. Pada

haji model ini diwajibkan membayar dam qiran, sebagaimana

halnya dam‎tamattu’.

2.11. Literatur Sejenis

Berikut ini adalah literatur sejenis yang penulis pakai dalam penelitian ini :

1. Judul : Perancangan dan Implementasi Mobile Aplication Pembelajaran

Haji dan Umrah Berbasis Multimedia, 2013

Penulis : Abdurahman

Abstrak :

Perkembangan teknologi menjadikan handphone sebagai alat multimedia

multifungsi dilengkapi dengan fitur-fitur yang canggih sehingga menjadi

lebih fungsional. Fitur flashlite dapat dijadikan media penyimpanan

informasi berbasis multimedia sebagai salah satu perkembangan fitur

handphone.

Tujuan dari penulisan skripsi ini yaitu merancang aplikasi mobile tentang

pembelajaran haji dan umrah untuk memudahkan calon jamaah dalam

mendapatkan metode atau tata cara pelaksanaan dalam persiapan

pelaksanaan ibadah haji dan umrah.

Dalam pembuatan skripsi ini penulis menggunakan dua metode yaitu

metode pengumpulan data yang meliputi studi pustaka, wawancara, dan

observasi juga metode pengembangan multimedia menurut Luther yang

terdiri dari enam tahap yaitu konsep, perancangan, pengumpulan bahan

material, pembuatan, testing dan distribusi.

Software yang digunakan dalam pembuatan aplikasi ini yaitu Adobe Flash

CS4, Adove Device Central CS4, Adobe Photoshop CS2 dan Adobe Audio

Audition 1.5. Output yang dihasilkan berupa aplikasi mobile pembelajaran

haji dan umrah dengan ukuran 1.5 MB yang menampilkan informasi haji

dan umrah, panduan, doa, dan istilah yang ada pada ibadah haji dan umrah.

Berdasarkan hasil penelitian dengan aplikasi ini para jamaah dapat lebih

mudah memperoleh informasi haji dan umrah dan dapat dijadikan sebagai

pemandu ibadah haji dan umrah

24

Kata Kunci : Informasi Haji dan Umrah, Mobile Application, Panduan

Haji dan Umrah, Flashlite, Multimedia

Tabel 2.2 Tabel Perbandingan Aplikasi 1

Hal yang

dibandingkan

Fitur pada penulis

(Abdurrahman)

Fitur pada penulis

sekarang

Penerapan

Aplikasi

Handphone Symbian

dengan Flashlite 2.1

Smartphone

Android 4.1 keatas

Konten

Multimedia

Teks, Gambar Teks, Gambar,

Suara, dan Video

Konten Haji Pengertian, Dasar Hukum

Sejarah Haji dan Umrah,

Pelaksanaan Haji dan

Umrah beserta Rute

pejalanannya, Doa-Doa

Haji Umrah dan Istilah-

Istilah

Istilah haji,

pengertian haji,

amalan-amalan haji,

peta-peta lokasi

haji, doa-doa haji,

pelaksanaan haji,

video haji, Rssfeed

tentang Haji, Lokasi

– lokasi haji, cek

keberangkatan haji

2. Judul : Aplikasi Simulator Manasik Haji Berbasis Mobile, 2012

Penulis : Yayan Supriatna

Abstrak :

Manasik pada dasarnya adalah memberikan pelajaran atau informasi

kepada calon jama‟ah haji mengenai tata cara melaksanakan ibadah haji di

tanah Suci. Namun, banyak di kalangan kaum muslim yang enggan

mendalami manasik haji, yang mengakibatkan mereka menjadi buta akan

hukum-hukum dan tata cara pelaksanaan ibadah haji. Maka tujuan dari

perancangan Aplikasi Simulator Manasik Haji Berbasis Mobile Android,

untuk mengetahui bagaimana Aplikasi Simulator Manasik Haji Berbasis

25

Mobile Android dan untuk melakukan implementasi dari Aplikasi

Simulator Manasik Haji Berbasis Mobile Android. Dari hasil penelitian ini

akan memberikan suatu Aplikasi Simulator Manasik Haji Pada Perangkat

Mobile Berbasis Android agar para calon jama‟ah haji bisa lebih mudah

dalam mempelajarinya.

Metode yang digunakan dalam pembuatan Aplikasi Simulator Manasik

Haji dan penyusun laporan skripsi ini adalah metode pengumpulan data

(Data Gathering), metode wawancara, studi kepustakaan, analisa sistem,

merancang dan mengimplementasi. Metode Pengembangan Sistem yang

digunakan oleh penulis dalam perancangan Sistem Informasi ini yaitu

menggunakan Model Prototyping, Prototyping merupakan salah satu

metode pengembangan perangkat lunak yang banyak digunakan. Dalam

menerapkan rancangan yang telah di buat, di butuhkan beberapa software

untuk membuat program aplikasi simulator manasik haji yaitu Java

Development Kid (JDK) 1.6 dan Java Runtime Environment (JRE),

Integrated Development Environment (IDE) Eclipse 3.4 atau 3.5, Android

Software Development Kit (Android SDK), Android Development Tools

(ADT).

Hasil yang ingin dicapai adalah suatu aplikasi simulator manasik haji

berbasis mobile yang dapat mempermudah jama‟ah haji dalam melakukan

proses haji. Seperti adanya doa-doa dan video simulasi manasik haji dalam

melakukan proses haji.

Kata kunci: Manasik haji, Mobile Android, Model Prototyping


Hal yang

dibandingkan

Fitur pada penulis (Yayan

Supriatna)

Fitur pada penulis

sekarang

Penerapan

Aplikasi

Smartphone Android 2.2

Keatas

Smartphone

Android 4.1 keatas

Konten

Multimedia

Teks, Gambar, Video Teks, Gambar,

Suara, dan Video

Konten Haji Video simulasi haji, Istilah haji,

26

Pedoman-pedoman haji,

persiapan sebelum haji.

pengertian haji,

amalan-amalan haji,

peta-peta lokasi

haji, doa-doa haji,

pelaksanaan haji,

Rssfeed tentang

Haji, Tempat-

tempat berziarah

haji

3. Judul : Analisis dan Perancangan Aplikasi Manasik Haji Menggunakan

Teknologi J2ME, 2012

Penulis : Robimadipa Yanriko

Abstrak :

In syar'i, Hajj means to travel to the shrine to deliberate certain practices

with the intention of worshiping Allah SWT. While other definitions,

according to the second meaning of the pilgrimage, is implementing the

five pillars of Islam as a Muslim Islamic improvements address.

For prospective pilgrims who had yet to perform the pilgrimage, of course,

not knowing how to implement a true pilgrimage With this in mind, it was

held the rituals of Hajj (pilgrimage ordinance).

In the middle of the development of information and communication

technology is so fast with these devices and mobile communication

technology has been a wave of Internet technology that enables a new

trend in mobile learning, or more commonly known as mobile

learning.Mobile learning is a learning model that refers to the use of

information technology devices (IT) and mobile phones, such as PDA, cell

phone, laptop and tablet PCs, in teaching and learning.Expected by the

rituals of Hajj mobile applications will facilitate the prospective pilgrims

can find procedures for proper pilgrimage.

Keywords: Applications, Mobile, Technology

27


Hal yang

dibandingkan

Fitur pada penulis terkait

(Robimadipa Yanriko)

Fitur pada penulis

sekarang

Penerapan

Aplikasi

Handphone Java

berteknologi J2ME

Smartphone

Android 4.1 keatas

Konten

Multimedia

Teks, Gambar dan Suara Teks, Gambar,

Suara, dan Video

Konten Haji Pencarian istilah-istilah

haji, informasi Haji,

informasi tentang Umrah,

Doa-Doa Haji, Jadwal

Ibadah Haji, Tempat-

Tempat Bersejarah, Tips

Ibadah Haji

Istilah haji,

pengertian haji,

amalan-amalan haji,

peta-peta lokasi

haji, doa-doa haji,

pelaksanaan haji,

Rssfeed tentang

Haji, Tempat-

tempat pelaksanaan

haji

2.12. Metode Pengembangan Penelitian RAD

2.12.1. Definisi RAD

Menurut Pressman (2012) Rapid Application Development (RAD)

adalah sebuah model proses perkembangan perangkat lunak sekuensial

linier yang menekankan siklus perkembangan yang sangat pendek. Model

RAD ini merupakan adaptasi “kecepatan tinggi” dari model sekuensial

linier di mana perkembangan cepat dicapai dengan menggunakan

pendekatan konstruksi berbasis komponen.

Menurut Kendall & Kendall (2010) ada tiga fase dalam model

Rapid Application Development (RAD) yang melibatkan penganalisis dan

pengguna dalam tahap penilaian, perancangan, dan penerapan. Hal penting

dari RAD adalah pengguna dilibatkan dalam setiap bagian upaya

28

pengembangan, dengan partisipasi mendalam dalam bagian perancangan

bisnis.

2.12.2. Tahapan-tahapan RAD

Menurut Kendall dan Kendall (2010) tahapan pengembangan

sistem dalam penelitian dengan menggunakan RAD, yaitu :

1. Tahap perencanaan syarat-syarat

Dalam fase ini, pengguna dan penganalisis bertemu untuk

mengidentifikasikan syarat-syarat informasi yang ditimbulkan

dari tujuan-tujuan aplikasi atau sistem serta untuk

mengidentifikasikan syarat-syarat informasi yang ditimbulkan

dari tujuan-tujuan tersebut. Fase ini memerlukan peran aktif

mendalam dari kedua kelompok tersebut, tidak hanya

menunjukkan proposal atau dokumen. Selain itu, juga

melibatkan pengguna dari beberapa level yang berada dalam

organisasi. Orientasi dalam fase ini ialah menyelesaikan

problem-problem perusahaan. Meskipun teknologi informasi

dan sistem bisa mengarahkan sebagian sistem yang diajukan,

fokusnya akan selalu tetap pada upaya pencapaian perusahaan.

2. Tahap desain workshop RAD

Fase ini adalah fase untuk merancang dan memperbaiki yang

bisa digambarkan sebagai workshop. Saat membayangkan

sebuah workshop, partisipasinya sangat intens, tidak pasif, dan

biasanya bertahap. Biasanya peta partisipan duduk mengitari

meja bulat atau di kursi-kursi yang diatur membentuk huruf U

dilengkapi meja sehingga masing-masing dapat melihat satu

sama lain.

Selama workshop desain RAD, pengguna merespon working

prototype yang ada dan penganalisis memperbaiki modul-

modul yang dirancang berdasarkan respons pengguna. Format

workshop sangat mengagumkan dan mampu memberi

dorongan, dan jika pengguna atau penganalisis yang

29

berpengalaman, tidak diragukan lagi bahwa usaha kreatif ini

dapat mendorong pengembang sampai pada tingkat

terakselerasi.

3. Tahap implementasi

Penganalisis bekerja dengan para pengguna secara intens

selama workshop untuk merancang aspek-aspek bisnis dan

non-teknis dari perusahaan. Segera sesudah aspek-aspek ini

disetujui dan sistem-sistem dibangun dan di-sharing, sistem-

sistem baru atau bagian dari sistem diuji coba dan

diperkenalkan kepada organisasi.

2.13. Pengujian Black-Box

Pengujian black-box berfokus pada persyaratan fungsional perangkat

lunak. Dengan demikian, pengujian black-box memungkinkan perekayasa

perangkat lunak mendapatkan serangkaian kondisi input yang sepenuhnya

menggunakan semua persyaratan fungsional untuk suatu program. Pengujian

black-box bukan merupakan alternative dari teknik white-box, tetapi merupakan

pendekatan komplementer yang kemungkinan besar mampu mengungkap kelas

kesalahan daripada metode white-box. (Pressman, 2010).

Gambar 2.3 Tahapan Rapid Application Development (RAD) ( Kendall & Kendall 2010)

30

Pengujian black-box berusaha menemukan kesalahan dalam kategori

sebagai berikut : (1) fungsi-fungsi yang tidak benar atau hilang (2) kesalahan

interface (3) kesalahan pada struktur data atau akses database eksternal, (4)

kesalahan kinerja dan performa, dan (5) kesalahan inisialisai dan terminasi.

Pengujian black-box cenderung diaplikasikan pada tahap akhir pengujian.

Hal itu karena pengujian black-box mengabaikan kontrol struktur, perhatian

black-box berfokus pada domain informasi.

2.14. Pengujian White-Box

Pengujian white box (glass box) adalah pengujian yang didasarkan pada

pengecekan terhadap detil perancangan, menggunakan struktur kontrol dari desain

program secara prosedural untuk membagi pengujian ke dalam beberapa kasus

pengujian. Penentuan kasus uji disesuaikan dengan struktur sistem, pengetahuan

mengenai program digunakan untuk mengidentifikasikan kasus uji tambahan.

Tujuan penggunaan white box untuk menguji semua statement program.

Penggunaan metode pengujian white box dilakukan untuk :

a. Memberikan jaminan bahwa semua jalur independen suatu modul

digunakan minimal satu kali

b. Menggunakan semua keputusan logis untuk semua kondisi true atau false

c. Mengeksekusi semua perulangan pada batasan nilai dan operasional pada

setiap kondisi.

d. Menggunakan struktur data internal untuk menjamin validitas jalur

keputusan.

2.14.1. Pengujian Basis Path

Pengujian basis path adalah pengujian white box yang diusulkan

pertama kali oleh Tom McCabe. Metode ini memungkinkan penguji dapat

mengukur kompleksitas logis dari desain prosedural dan menggunakannya

sebagai pedoman untuk menetapkan himpunan basis dari semua jalur

eksekusi.

a. Flowgraph (Notasi Diagram Alir)

Notasi yang digunakan untuk menggambarkan jalur eksekusi

adalah notasi diagram alir (atau grafik program), yang menggunakan

31

notasi lingkaran (simpul atau node) dan anak panah (link atau edge).

Notasi ini menggambarkan aliran control logika yang digunakan dalam

suatu bahasa pemrograman.

b. Independent Program Path

Jalur independen adalah jalur yang terdapat dalam program yang

mengintroduksi sedikitnya satu rangkaian pernyataan proses atau

kondisi baru.

c. Cyclomatic Complexity

Kompleksitas Siklomatis adalah metrik perangkat lunak yang

memberikan pengukuran kuantitatif terhadap kompleksitas logis suatu

program, nilai yang didapat akan menentukan jumlah jalur independen

dalam himpunan path, serta akan memberi nilai batas atas bagi jumlah

pengujian yang harus dilakukan, untuk memastikan bahwa semua

pernyataan telah dieksekusi sedikitnya satu kali.

Cyclomatic Complexity dapat dhitung dengan tiga cara :

1) Jumlah Region dari flowgraph sama dengan jumlah

Cyclomatic Complexity

2) Cyclomatic Complexity V(G) untuk flowgraph G dihitung

dengan rumus :

V(G) = E - N + 2

E = Jumlah edge

N = Jumlah node

3) Cyclomatic Complexity V(G) untuk flowgraph G juga dapat

dihitung dengan rumus :

V(G) = P + 1

P = jumlah simpul predikat, simpul Predikat adalah

penggambaran suatu node yang memiliki satu atau

lebih inputan, dan lebih dari satu output.

d. Melakukan Test Case

32

Metode uji coba basis path juga dapat diterapan pada perancangan

prosedural rinci atau program sumber. Langkah-langkah

pembuatan test case adalah sebagai berikut :

1) Menggunakan desain atau kode sebagai dasar dan dibuat

flowgraph-nya.

2) Menentukan cyclomatic complexity dari flowgraph yang

dibuat

3) Menentukan independent path dari flowgraph yang dibuat

4) Mambuat test case yang akan mengerjakan masing-masing

path pada basis set.

2.15. Unified Modeling Language. (UML)

Menurut A.S dan Shalahudin (2011) Unified Modeling Language (UML)

adalah sebuah standarisasi bahasa pemodelan untuk pembangunan perangkat

lunak yang dibangun dengan menggunakan teknik pemrograman berorientasi

objek. UML muncul karena adanya kebutuhan pemodelan visual untuk

menspesifikasikan, menggambarkan, membangun, dan dokumentasi dari sistem

perangkat lunak. UML merupakan bahasa visual untuk pemodelan dan

komunikasi mengenai sebuah sistem dengan menggunakan diagram dan teks-teks

pendukung.

UML terdiri dari 13 macam diagram yang dikelompokkan dalam 3

kategori, diantaranya :

Structure Diagrams yaitu kumpulan diagram yang digunakan untuk

menggambarkan suatu struktur statis dari sistem yang dimodelkan.

Behavior diagrams yaitu kumpulan diagram yang digunakan untuk

menggambarkan kelakuan sistem atau rangkaian perubahan yang terjadi

pada sebuah sistem.

Interaction diagrams yaitu kumpulan diagram yang digunakan untuk

menggambarkan interaksi sistem dengan sistem lain maupun interaksi

antarsubsistem pada suatu sistem.

33

2.16. Diagram Class

Diagram kelas atau class diagram menggambarkan struktur sistem dari

segi pendefinisian kelas-kelas yang akan dibuat untuk membangun sistem. kelas

memiliki 3 bagian utama yaitu attribute, operation, dan name. Kelas-kelas yang

ada pada struktur sistem harus dapat melakukan fungsi-fungsi sesuai dengan

kebutuhan sistem. Sususan struktur kelas ynag baik pada diagram kelas sebaiknya

memiliki jenis-jenis kelas berikut :

Kelas Main. Yaitu kelas yang memiliki fungsi awal dieksekusi ketika

sistem dijalankan.

Kelas Interface. Kelas yang mendefinisikan dan mengatur tampilan ke

pemakai. Biasanya juga disebut kelas boundaries.

Kelas yang diambil dari pendefinisian use case. Merupakan kelas yang

menangani fungsi-fungsi yang harus ada dan diambil dari pendefinisian

use case.

Kelas Entitas. Merupakan kelas yang digunakan untuk memegang atau

membungkus data menjadi sebuah kesatuan yang diambil maupun akan

disimpan ke basis data.

Berikut adalah simbol-simbol yang ada pada diagram kelas :

Tabel 2.5 Tabel Simbol pada Diagram Kelas

Simbol Deskripsi

Kelas

Nama_kelas

+atribut

+operasi()

Kelas pada struktur sistem

Antarmuka / interface

nama_interface

Sama dengan konsep interface dalam

pemograman berorientasi objek

Asosiasi / association

Relasi antar kelas dengan makna

umum, asosiasi biasanya juga disertai

dengan multiplicity

34

Asosiasi berarah / directed association

Relasi antar kelas dengan makna kelas

yang satu digunakan oleh kelas yang

lain, asosiasi biasanya juga disertai

dengan multiplicity

Generalisasi


generalisasi-specialisasi (umum-

khusus)

Keberuntungan / dependency


kebergantungan antar kelas

Agregasi / aggregation


semua-bagian (whole-part)

2.17. Use Case Diagram

Use case atau diagram use case merupakan pemodelan untuk melakukan

sisstem informasi yang akan dibuat. Use Case mendepkrisikan sebuah interaksi

antara satu atau lebih aktor dengan sistem informasi yang akan dibuat. Secara

kasar, use case digunakan untuk mengetahui fungsi apa saja yang ada di dalam

sebuah sistem informasi dan siapa saja yang berhak menggunakan fungsi-fungsi

itu.

Berikut adalah simbol-simbol yang ada pada diagram use case :

Tabel 2.6 Tabel Simbol pada Diagram Use Case

Simbol Deskripsi

Use Case

Fungsionalitas yang disediakan sebagai unit-

unit yang saling bertukar pesan antar unit atau

aktor; biasanya dinyatakan dengan

menggunakan kata kerja diawal frase nama

use case

Aktor / actor

Orang, proses, atau sistem lain yang

berinteraksi dengan sistem informasi yang

akan dibuat di luar sistem informasi yang akan

nama_usecase

35

dibuat itu sendiri; jadi walaupun simbol dari

aktor adalah gambar orang, tapi aktor belum

tentu merupakan orang; biasanya dinyatakan

menggunakan kata benda di awal frase nama

aktor

Asosiasi / association

Komunikasi antara aktor dan use case yang

berpartisipasi pada use case atau use case

memiliki interaksi dengan aktor

Ekstensi / extend

<<extend>>

Relasi use case tambahan ke sebuah use case

dimana use case yang ditambahkan dapat

berdiri sendiri walau tanpa use case tambahan

itu; mirip dengan prinsip inheritance pada

pemograman berorientasi objek; biasanya use

case tambahan memiliki nama depan yang

sama dengan use case yang ditambahan

Generalisasi / generalization

Hubungan generalisasi dan spesialisasi

(umum-khusus) antara dua buah use case

dimana fungsi yang satu adalah fungsi yang

lebih umum dari lainnya.

Menggunakan / Include / uses

<<include>>

<<uses>>

Relasi use case tambahan ke sebuah use case

dimana use case yang ditambahkan

memerlukan use case ini untuk menjalankan

fungsinya atau sebagai syarat dijalankan use

case ini.

2.18. Activity Diagram

Diagram aktifitas atau activity diagram menggambarkan workflow atau

aktifitas dari sebuah sistem atau proses bisnis. Yang perlu diperhatikan disini

adalah bahwa diagram aktifitas menggambarkan aktifitas sistem bukan apa yang

dilakukan aktor, jadi aktifitas yang dilakukan oleh sistem.

36

Berikut adalah simbol-simbol yang ada pada diagram aktifitas :

Tabel 2.7 Tabel Simbol pada Diagram Aktifitas

Simbol Deskripsi

Status awal

Status awal aktifitas sistem, sebuah

diagram aktivitas memiliki sebuah

status awal

Aktifitas

Aktivitas yang dilakukan sistem,

aktivitas biasanya diawali dengan kata

kerja

Percabangan / decision

Asosiasi percabangan dimana jika ada

pilihan aktivitas lebih dari satu

Penggabungan / join

Asosiasi penggabungan dimana lebih

dari satu aktivitas digabungkan menjadi

satu

Status akhir

Status akhir yang dilakukan sistem,

sebuah diagram diaktifitas memiliki

sebuah status akhir.

Swimlane

Atau

Memisahkan organisasi bisnis yang

bertanggung jawab terhadap aktivitas

yang terjadi

37

2.19. Sequence Diagram

Diagram sekuen menggambarkan kelakuan objek pada use case dengan

mendeskripsikan waktu hidup objek dan message yang dikirimkan dan diterima

antarobjek. Oleh karena itu untuk menggambar diagram sekuen maka harus

diketahui objek-objek yang terlibat dalam sebuah use case beserta metode-metode

yag dimiliki kelas yang diinstansiasi menjadi objek itu.

Berikut adalah simbol-simbol yang ada pada diagram sekuen :

Tabel 2.8 Tabel Simbol pada Diagram Sekuen

Simbol Deskripsi

Aktor

Atau

Tanpa waktu aktif

Orang, proses, atau sistem lain yang

berinteraksi dengan sistem informasi

yang akan dibuat di luar sistem

informasi yang akan dibuat itu sendir

i; jadi walaupun simbol dari aktor

adalah gambar orang, tapi aktor belum

tentu merupakan orang; biasanya

dinyatakan menggunakan kata benda di

awal frase nama aktor

Garis hidup / lifeline

Menyatakan kehidupan suatu objek

nama_aktor

38

Objek

Menyatakan objek yang berinteraksi

Waktu aktif

Menyatakan objek dalam keadaan aktif

dan berinteraksi pesan

Pesan tipe create

<<create>>

Menyatakan suatu objek membuat

objek yang lain, arah panah mengarah

pada objek yang dibuat

Pesan tipe call

1: nama_metode()

Menyatakan suatu objek memanggil

operasi/metode yang ada pada objek

lain atau dirinya sendiri

Pesan tipe send

1:masukan

Menyatakan bahwa suatu objek

mengirimkan data/masukan/informasi

ke objek lainnya, arah panah mengarah

pada objek yang dikirimi

Pesan tipe return

1: keluaran

Menyatakan bahwa suatu objek yang

telah menjalankan suatu operasi atau

metode menghasilkan suatu kembalian

ke objek tertentu, arah panah mengarah

pada objek yang menerima kembalian

Pesan tipe destroy

<<destroy>>

Menyatakan suatu objek megakhiri

hidup objek yang lain, arah panah

mengarah pada objek yang diakhiri.

Sebaiknya jika ada create maka ada

destroy

Nama objek : nama kelas

39

BAB III

METODE PENELITIAN

3.1. Metode Pengumpulan Data

Dalam merancang dan membangun aplikasi pada penelitian ini, penulis

melakukan pengumpulan data dengan cara :

3.1.1. Studi Pustaka

Metode ini dilakukan dengan mengumpulkan, membaca dan

mempelajari buku-buku yang berkaitan dengan penelitian ini, yakni

tentang haji dan umrah. Salah satunya adalah buku yang diterbitkan oleh

Departememn Agama RI tentang pelaksanaan haji dan umrah. Penulis juga

mencari data melalui website-website yang berkaitan tentang penelitian ini

sebagai acuan untuk penelitian ini. Selengkapnya dapat dilihat pada daftar

pustaka.

Selain dari buku-buku, metode ini juga dilakukan dengan

mengumpulkan dan membaca jurnal maupun skripsi yang sejenis dan

berkaitan dengan penelitian penulis saat ini. Jurnal dan skripsi ini

dijadikan sebagai bahan acuan dan perbandingan penelitian penulis dengan

penelitian sebelumnya. Lebih lanjut dapat dilihat pada bab 1 subbab 1.1

dan bab 2 subbab 2.11.

3.1.2. Studi Lapangan

Pada metode ini penulis menggunakan salah satu jenis studi

lapangan yaitu kuisioner. Pada metode ini penulis menyebarkan kuisioner

untuk mengetahui permasalahan dan kesulitan pada saat mempelajari haji

dan umrah. Kuisioner ini juga bertujuan untuk mengetahui keinginan yang

diharapkan oleh calon pengguna aplikasi serta menganalisa kelayakan

aplikasi. Hasil kuisioner akan dijadikan sebagai sampel data.

40

Kuisioner ditujukan kepada 50 orang berusia 25-50 tahun yang

beragama Islam dan telah menggunakan smartphone berbasis android.

Lembar kuisioner dan hasil kuisioner dapat dilihat pada lampiran.

3.2. Metodologi Pengembangan Sistem

Metologi yang digunakan pada perancangan dan pembangunan aplikasi ini

adalah Metodologi Pengembangan Sistem Rapid Application Development (RAD).

Penulis menggunakan metode ini karena metode ini cocok untuk pengembangan

aplikasi yang akan dirancang oleh penulis dan menekankan kecepatan dalam

membuat aplikasi.

Menurut E. Kendall dan Julie E. Kendall (2010), pada model RAD ini

meliputi tahap-tahap berikut berikut:

3.2.1. Fase perencanaan syarat-syarat

Dalam fase ini, penulis melakukan hal sebagai berikut :

1. Mencari informasi tentang haji dan umrah

2. Mengidentifikasi tujuan-tujuan aplikasi

3. Menentukan fitur-fitur yang ada pada aplikasi yang akan dibangun

4. Kebutuhan hardware dan software untuk membangun aplikasi

3.2.2. Tahap Desain (Desain Workshop)

Pada fase ini penulis mendesain aplikasi yang akan dibangun yang

sesuai dengan tujuan penelitian dan masalah yang dihadapi. Fase

perancangan ini penulis bagi menjadi 3 tahap diantaranya :

a. Tahap Perancangan Proses.

Dalam merancang proses pada aplikasi, penulis menggunakan

diagram UML. Diagram pada UML yang digunakan oleh penulis

diantaranya adalah use case diagram, activity diagram, dan sequence

diagram.

1. Use Case

Use case mendepkrisikan sebuah interaksi antara satu atau

lebih aktor dengan sistem informasi yang akan dibuat. Penulis

menggunakan use case untuk mengetahui fungsi apa saja yang ada

41

di dalam sebuah sistem informasi dan siapa saja yang berhak

menggunakan fungsi-fungsi itu. Use case yang digunakan penulis

diantaranya adalah sebagai berikut :

Tabel 3.1. Tabel Use Case yang Digunakan dalam Penelitian

No Nama Use Case Aktor

1 Pengenalan Haji & Umrah Pengguna

2 Pengenalan Haji Pengguna

3 Detail Pengenalan Haji Pengguna

4 Pengenalan Umrah Pengguna

5 Detail Pengenalan Umrah Pengguna

6 Hikmah Haji & Umrah Pengguna

7 Detail Hikmah Haji & umrah Pengguna

8 Persiapan Haji Pengguna

9 Detail Persiapan Haji Pengguna

10 Pelaksanaan Haji Pengguna

11 Detail Pelaksanaan Haji Pengguna

12 Do‟a Haji & Umrah Pengguna

13 Detail Doa Haji & umrah Pengguna

14 Berita Haji Pengguna

15 Detail berita Pengguna

16 Detail Pengumuman Pengguna

17 Peta Lokasi Pengguna

18 Detail Peta Lokasi Pengguna

19 Video Haji Pengguna

20 Amalan Haji Pengguna

21 Detail Amalan Haji Pengguna

22 Istilah Haji Pengguna

42

23 Detail Istilah Haji Pengguna

24 Cek Keberangkatan Haji Pengguna

2. Activity diagram

Penulis menggunakan activity diagram untuk menggambarkan

workflow atau aktifitas dari sebuah sistem. Activity diagram yang

digunakan penulis diantaranya adalah sebagai berikut :

Tabel 3.2. Tabel Activity Diagram yang Digunakan dalam Penelitian

No Nama Use Case Aktor

1 Pengenalan Haji dan Umrah Pengguna

2 Pengenalan Haji Pengguna

3 Detail Pengenalan Haji Pengguna

4 Pengenalan Umrah Pengguna

5 Detail Pengenalan Umrah Pengguna

6 Hikmah Haji dan Umrah Pengguna

7 Detail Hikmah haji dan umrah Pengguna

8 Persiapan Haji Pengguna

9 Detail Persiapan Haji Pengguna

10 Pelaksanaan Haji Pengguna

11 Detail Pelaksanaan Haji Pengguna

12 Do‟a – Do‟a haji dan Umrah Pengguna

13 Detail Doa-doa haji dan umrah Pengguna

14 Berita Haji Pengguna

15 Detail berita Pengguna

16 Detail Pengumuman Pengguna

17 Peta Lokasi Pengguna

18 Detail Peta Lokasi Pengguna

19 Video Haji Pengguna

43

20 Amalan – Amalan Haji Pengguna

21 Detail Amalan Haji Pengguna

22 Istilah pada Haji Pengguna

23 Detail Istilah Haji Pengguna

24 Cek Keberangkatan Haji Pengguna

3. Diagram sequence

Penulis menggunakan Diagram sekuen untuk menggambarkan

kelakuan objek pada use case dengan mendeskripsikan waktu

hidup objek dan message yang dikirimkan dan diterima antarobjek

b. Tahap Perancangan Interface

Pada tahap ini, penulis merancang tampilan antar muka yang sesuai

dengan kebutuhan sehingga pengguna akan mudah menggunakan

aplikasi dan mendapatkan informasi secara mudah. Penulis

menggunakan situs http://www.google.com/design/spec/material-

design/introduction.html yang dibuat oleh Google sebagai acuan dan

pedoman untuk merancang interface pada aplikasi ini. Rancangan

interface yang penulis buat pada tahap ini antara lain:

1. Rancangan tampilan menu utama

2. Rancangan tampilan bahasan haji

3. Rancangan tampilan doa haji

4. Rancangan tampilan video haji

5. Rancangan tampilan list berita

6. Rancangan tampilan berita haji

7. Rancangan tampilan cek keberangkatan haji

c. Tahap Perancangan Database

Pada tahap ini, penulis merancang database yang akan digunakan

pada aplikasi yang sesuai dengan kebutuhan aplikasi. Database

dirancang dengan meggunakan SQLite. Tabel-tabel pada database yang

akan dibuat adalah:

1. Tabel konten

http://www.google.com/design/spec/material-design/introduction.html

http://www.google.com/design/spec/material-design/introduction.html

44

2. Tabel doa

3. Tabel istilah

4. Tabel lokasi

5. Tabel berita

d. Membangun sistem (Pengkodean)

Pada fase ini setiap desain yang diciptakan dalam fase sebelumnya

selanjutnya ditingkatkan dengan menggunakan perangkat-perangkat

lunak. Penulis menggunakan perangkat lunak diantaranya, Java

Development Kit (JDK), Android Studio IDE, dan Android Software

Development Kit (SDK). Apabila sistem yang dibangun telah cocok,

maka selanjutnya akan dilakukan implementasi dan pengujian.

3.2.3. Fase Implementasi/Pelaksanaan

Pada tahap ini, penulis melakukan tahap-tahap berikut :

1. Implementasi pada perangkat keras dan lunak

2. Implementasi antarmuka

3. Instalasi pada perangkat Android

4. Pengujian aplikasi dengan metode whitebox dan blackbox

3.3. Alur/Kerangka Berfikir

Alur/kerangka berfikir menggambarkan secara keseluruhan alur yang

digunakan dalam penyelesaian skripsi. Alur yang digunakan penulis adalah

sebagai berikut :

45

Start

Mengidentifikasi

Masalah

Studi Pustaka Studi Lapangan

Fase

Perancanaan

Syarat-syarat

Mencari informasi

Mengidentifikasi tujuan

Design

Workshop

Menentukan fitur

Kebutuhan HW

dan SW

Use Case

Diagram Case

Diagram

Sequence

Actifty Diagram

Fase

Implementasi

Implementasi pada

perangkat

Implementasi

antarmuka

Instalasi pada

perangkat android

Pengujian blackbox

Kesimpulan dan

Saran

End

Perancanan

proses

Perancangan

interface

Perancangan

database

Membangun

Sistem

Mendesain sistem

Pengkodean

Apakah

Sesuai?

Ya

Metodologi RAD

Menidentifikasi Syarat-

syarat informasi

Gambar 3.1 Alur Pemikiran Penelitian

46

BAB IV

PERANCANGAN DAN IMPLEMENTASI

Perancangan Aplikasi Pembelajaran Haji dan Umrah pada smartphone

dirancang berdasarkan metode RAD yang mempunyai 4 fase.

4.1. Tahap Perencanaan Syarat-Syarat

Pada tahap ini penulis melakukan identifikasi syarat –syarat informasi

yang diperlukan dan menentukan tujuan dari dibangunnya sistem. Hal-hal yang

dilakukan penulis diantaranya :

4.1.1. Mencari Informasi Tentang Haji dan Umrah

Pada tahap ini peneliti melakukan pencarian referensi berupa buku,

e-book, dan jurnal mengenai haji dan umrah yang dapat digunakan sebagai

informasi pada aplikasi.

4.1.2. Mengidentifikasi Tujuan –Tujuan Aplikasi

Dalam fase ini penulis menentukan tujuan dibangunnya aplikasi ini

agar sesuai dengan kebutuhan pengguna saat ini. Tujuan tersebut

diantaranya adalah:

1) Merancang suatu aplikasi yang berkaitan tentang haji dan umrah

yang praktis dan efektif

2) Memudahkan para kaum muslim dan calon jamaah haji maupun

umrah di Indonesia dalam mengakses dan mendapatkan informasi

tentang haji dan umrah

3) Memudahkan para kaum muslin dan calon jamaah haji untuk

mempelajari tata cara melaksanakan haji dengan baik dan benar

4.1.3. Menentukan Fitur-Fitur yang Akan Ada pada Aplikasi

Pada fase ini penulis menentukan fitur-fitur pada aplikasi yang

dibutuhkan agar sesuai dengan tujuan dari perancangan aplikasi ini. Fitur-

fitur yang berkaitan dengan penjelasan dan pelaksanaan haji dan umrah

47

diambil dari buku-buku studi tentang haji dan umrah. Sumber buku-buku

tersebut dapat dilihat pada daftar pustaka. Fitur-fitur keseluruhan yang

akan ada pada aplikasi diantaranya adalah :

a. Menampilkan penjelasan tentang haji dan umrah, diantaranya

pengertian, rukun, wajib, syarat sah haji dan umrah dan hikmah

dibalik melakukan hal-hal tersebut.

b. Menampilkan kumpulan do‟a- do‟a haji beserta dengan suara

dan terjemahannya agar lebih mudah dimengerti. Kumpulan

do‟a – do‟a tersebut diantaranya :

• Niat haji

o Haji tamattu‟

o Haji ifrad

o Haji qiran

• Niat umrah

• Do‟a setelah ihram

• Do‟a talbiyah

• Shalawat nabi

• Do‟a setelah shalawat

• Do’a masuk Makkah

• Do‟a masuk masjidil haram

• Do‟a melihat Ka‟bah

• Do‟a melintasi maqam Ibrahim AS

• Do‟a thawaf

o Do‟a pada putaran ke-1 sampai ke-7

o Do‟a diantara rukun yamani dan hajar aswad

• Do‟a waktu minum air zam-zam

• Do‟a sa‟i

o Do‟a ketika mendaki bukit Shafa

o Do‟a diatas bukit Shafa

o Do‟a perjalanan pertama sampai ketujuh diantara bukit

Shafa dan Marwah

48

o Do‟a diantara dua pilar/lampu hijau

o Do‟a ketika mendekati bukit Shawa atau Marwah

• Do‟a menggunting rambut

• Do‟a setelah menggunting rambut

• Do‟a wukuf

o Do‟a ketika berangkat ke Arafah

o Do‟a ketika masuk Arafah

o Do‟a wukuf

o Do‟a ketika sampai di Muzdalifah

o Do‟a ketika sampai di Mina

o Do‟a melontar jumrah

o Do‟a setelah melontar tiga jumrah

• Do‟a thawaf wada

o Do‟a thawaf wada

o Do‟a sesudah thawaf wada

• Do‟a berziarah

c. Menampilkan tata cara melaksanakan haji dan umrah. Untuk

haji, hanya menjelaskan tentang haji tamattu‟. Kegiatannya

diantara lain :

Pengertian Haji

tamattu’

Melaksanakan

ihram

Melaksanakan

thawaf

Melaksanakan sa‟i

Melaksanakan tahallul

Kegiatan sebelum

wukuf

Melaksanakan wukuf

d. Menampilkan persiapan – persiapan yang harus dilakukan

sebelum melaksanakan haji diantaranya:

Persiapan Mental dan Fisik

Persiapan Material dan Bekal

Kiat untuk menjadi Haji Mabrur

49

e. Menampilkan peta sekitar lokasi pelaksanaan haji, offline

maupun online. Lokasi tersebut diantaranya :

Makkah

Madinah

Masjidil Haram

Masjid Nabawi

Gua hira

Mina

Muzdalifah

Jeddah

Jabal Rahmah

Masjid Quba

f. Menampilkan istilah – istilah yang sering dipakai pada

pelaksanaan haji dan umrah.

g. Menampilkan berita terkini tentang haji dan umrah secara

online yang diambil dari

http://haji.kemenag.go.id/v2/publikasi/berita/ dengan

menggunakan JSOUP dan di-parsing data-datanya agar dapat

dilihat pada mobile device. Berita tersebut dapat ditampilkan

disimpan (bookmark) pada database agar dapat dibaca secara

offline.

h. Menampilkan pengumuman yang diumumkan Kementerian

Agama melalui situs

http://haji.kemenag.go.id/v2/publikasi/pengumuman.

i. Menampilkan video tata cara melaksanakan haji dan umrah

secara online. Video-video tersebut diantaranya :

Pengertian haji

Pelaksanaan haji

dan umrah

Kiat haji mabrur

Benda bawaan

Jemaah

Di pesawat

Niat umrah

Niat haji

Do‟a setelah ihram

Larangan pada ihram

Hikmah ihram

Thawaf

Tempat air zamzam

Sa‟i

Tahallul

Wukuf

Thawaf ifadhah

Thawaf wada

Hikmah haji

14 Dzulhijjah

http://haji.kemenag.go.id/v2/publikasi/berita/

http://haji.kemenag.go.id/v2/publikasi/pengumuman

50

j. Melakukan pengecekan tanggal keberangkatan haji yang

datanya diambil dari situs

http://haji.kemenag.go.id/v2/node/955358.

4.1.4. Kebutuhan Hardware dan Software

Dalam tahap ini peneliti mengidentifikasi kebutuhan prototype

aplikasi yang meliputi kelengkapan software dan hardware yang akan

digunakan.

1) Kelengkapan Software yang digunakan

a. Image Editor (Photoshop/Paint) untuk mengedit gambar

yang digunakan pada aplikasi

b. Android SDK (Software Development Kit) sebagai alat

bantu dan Application Programming Interface (API) dalam

mengembangkan aplikasi pada platform android.

c. Sublime text editor 2 sebagai text editor untuk membuat file

HTML

d. Android Studio 1.2.1 sebagai Integrated Development

Enviroment (IDE) untuk source code aplikasi Android.

e. SQLite Browser sebagai aplikasi membuat dan mengedit

database SQLite.

f. Sistem operasi Windows 7.

2) Kelengkapan Hardware yang digunakan

a. Notebook Toshiba Satelite Pro C640 dengan spesifikasi

sebagai berikut :

a. Processor Intel Core i3

b. Memory Ram 4GB

c. 320GB HDD

b. Smartphone Android.. Dalam hal ini penulis menggunakan

smartphone Android One, Nexian Journey One.

c. Kabel data untuk mentransfer file aplikasi dari PC ke

smartphone.

http://haji.kemenag.go.id/v2/node/955358

51

4.2. Tahap Perancangan (Design Workshop)

Pada fase perancangan pengguna merancang sistem yang akan dibuat agar

sesuai dengan tujuan pembuatan aplikasi. Hasil perancangan ini nantinya akan

dijadikan sebagai panduan untuk fase berikutnya. Gambaran umum perancangan

yang akan dibuat oleh penulis pada aplikasi pembelajaran haji dan umrah adalah

sebagai berikut

Gambar 4.‎01 Perancangan Sistem dari Aplikasi

Gambar di atas menggambarkan bahwa aplikasi ini menggunakan internet

service dan database SQLite. Internet service atau layanan internet digunakan

mengakses berita-berita terkini lalu menampilkannya ke smartphone. Selain itu

layanan internet juga digunakan untuk mengakses Google Map APIv2 untuk

menampilkan lokasi pengguna ataupun lokasi-lokasi yang berkaitan dengan haji

dan umrah. SQLite digunakan untuk menyimpan konten-konten aplikasi berupa

alamat-alamat file yang akan digunakan oleh aplikasi untuk ditampilan ke

pengguna. SQLite juga digunakan untuk menyimpan berita-berita yang didapat

dari internet.

4.2.1. Tahap Perancangan Proses

Pada tahap perancangan proses pada aplikasi, penulis

menggunakan diagram UML. Diagram pada UML yang digunakan oleh

penulis yang menurut penulis dibutuhkan untuk membangun aplikasi ini

diantaranya adalah use case diagram, activity diagram, dan sequence

diagram,

52

a. Use Case Diagram

Use Case mendepkrisikan sebuah interaksi antara satu atau lebih

aktor dengan sistem informasi yang akan dibuat. Penulis menggunakan

use case untuk mengetahui fungsi apa saja yang ada di dalam sebuah

sistem informasi dan siapa saja yang berhak menggunakan fungsi-

fungsi itu. Penjelasan Use Case yang digunakan penulis diantaranya

adalah seperti yang dijelaskan pada table 4.1 dan 4.2 berikut :

Table 4.1. Tabel Aktor pada Use Case

No Actor Deskripsi

1 Pengguna Orang yang melihat dan

menggunakan apikasi pembelajaran

haji dan umrah yang telah terpasang

pada smartphone android

Tabel 4.2. Tabel Diagram Use Case

No Nama Use

Case

Deskripsi

1 Pengenalan

Haji & Umrah

Use Case untuk menggambarkan

kegiatan untuk melihat Menu

pengenalan Haji dan Umrah

2 Pengenalan

Haji


kegiatan untuk melihat menu

pengenalan haji yang terdiri dari

pengertian haji, rukun haji, syarat haji,

dan wajib haji.

3 Detail

Pengenalan

Haji


kegiatan untuk melihat penjelasan

detail tentang pengenalan haji yang

terdiri dari pengertian haji, rukun haji,

syarat haji, dan wajib haji.

4 Pengenalan

Umrah



53

pengenalan Umrah yang terdiri dari

pengertian haji, hukum haji, syarat

haji, dan wajib haji.

5 Detail

Pengenalan

Umrah



detail tentang pengenalan umrah yang

terdiri dari pengertian umrah, rukun

umrah, syarat umrah, dan wajib

umrah.

6 Hikmah Haji

& Umrah


kegiatan untuk melihat menu Hikmah

Haji & Umrah

7 Detail Hikmah

Haji & Umrah



detail tentang hikmah haji dan umrah

yang bagian-bagiannya dapat dilihat

pada Bab IV subbab 4.1.2

8 Persiapan Haji Use Case untuk menggambarkan


persiapan haji yang bagian-bagiannya

dapat dilihat pada Bab IV subbab 4.1.2

9 Detail

Persiapan Haji



detail tentang persiapan haji yang

bagian-bagiannya dapat dilihat pada

Bab IV subbab 4.1.2

10 Pelaksanaan

Haji



Pelaksanaan Haji

11 Detail

Pelaksanaan

Haji


kegiatan untuk melihat detail tentang

pelaksanaan haji yang bagian-

54

bagiannya dapat dilihat pada Bab IV

subbab 4.1.2

12 Do‟a – Do‟a

Haji dan

Umrah


kegiatan untuk melihat menu doa‟ –

do‟a

13 Detail doa-doa

haji dan umrah



doa-doa haji dan umrah yang bagian-


subbab 4.1.2

14 Berita Haji

dan Umrah


kegiatan untuk melihat menu berita

haji dan umrah

15 Detail Berita

Haji dan

Umrah


kegiatan untuk melihat berita haji dan

umrah

16 Detail

Pengumuman

Haji dan

Umrah


kegiatan untuk melihat pengumuman

haji dan umrah

17 Peta Haji dan

Umrah


kegiatan untuk melihat peta lokasi haji

dan umrah yang bagian-bagiannya

dapat dilihat pada Bab IV subbab 4.1.2

18 Detail Peta

Lokasi



doa-doa haji dan umrah yang bagian-


subbab 4.1.2

19 Video Haji Use Case untuk menggambarkan

kegiatan untuk melihat menu video

haji

55

20 Amalan-

amalan haji

dan umrah


kegiatan untuk melihat amalan amalan

haji dan umrah yang bagian-bagiannya

dapat dilihat pada bab IV sub bab

4.1.2

21 Detail amalan

haji



amalan haji dan umrah yang bagian-


subbab 4.1.2

22 Istilah pada

Haji dan

Umrah


kegiatan untuk melihat menu istilah –

istilah haji

23 Detail istilah

haji dan umrah



istilah haji dan umrah yang bagian-


subbab 4.1.2

24 Cek

Keberangkatan

Haji dan

Umrah


kegiatan untuk mengecek

keberangkatan haji

Dibawah ini adalah use case yang menggambarkan kegiatan aktor.

56

Gambar 4.‎02 Kegiatan Aktor dalam Use Case

57

Gambar diatas menjelaskan bahwa aktor yaitu pengguna dapat

melihat semua use case yang ada seperti pengenalan haji & umrah,

persiapan haji, pelaksanaan haji, do‟a haji, amalan haji, berita haji, peta

lokasi, video haji, istilah haji dan lain-lain.

Dibawah ini merupakan use case scenario yang menggambarkan

alur dari proses setiap use case yang ada.

Tabel 4.3. Use Case Scenario Pengenalan Haji & Umrah

Use Case Pengenalan Haji & Umrah

Use case ID 1

Actor Pengguna

Description menggambarkan kegitatan untuk melihat

Menu pengenalan Haji dan Umrah

Pre-condition Pengguna menekan menu pengenalan haji

dan umrah

Course of event Actor Action System Response

1. Pengguna

mengklik menu

pengenalan haji &

umrah

2. Menampilkan isi

menu pengenalan

haji dan umrah,

yaitu Haji dan

Umrah

Alternate course -

Conclution Pengguna dapat melihat is menu

pengenalan Haji dan Umrah yaitu Haji dan

Umrah

Post Condition Menu Haji dan Umrah tampil dilayar

pengguna

Tabel 4.4. Use Case Scenario Pengenalan Haji

Use Case Pengenalan Haji

Use case ID 2

Actor Pengguna


Menu Haji

Pre-condition Pengguna menekan menu haji


1. Pengguna

mengklik menu

pengenalan haji &

umrah

2. Menampilkan isi

menu pengenalan

haji dan umrah,

yaitu Haji dan

Umrah

3.Pengguna

mengklik menu

Haji

4.Menampilkan isi

menu Haji

Alternate course -

58

Conclution Pengguna dapat melihat isi menu

Pengenalan Haji yaitu Pengertian, Hukum,

Rukun, Syarat, dan Wajib Haji

Post Condition Menu Haji tampil dilayar pengguna

Tabel 4.5 Use Case Scenario Detail Pengenalan Haji

Use Case Detail Pengenalan Haji

Use case ID 3

Actor Pengguna


detail dari menu-menu pada pengenalan

haji yang bagian-bagiannya dapat dilihat

pada bab IV 4.1.2

Pre-condition Pengguna menekan menu-menu pada

pengenalan haji


1. Pengguna

mengklik menu

pengenalan haji &

umrah

2. Menampilkan isi

menu pengenalan

haji dan umrah,

yaitu Haji dan

Umrah

3.Pengguna

mengklik menu

pengenalan Haji

4.Menampilkan isi

menu pengenalan

Haji

5.Pengguna

mengklik salah

satu menu-menu

pada pengenalan

haji

6.Menampilkan isi

menu yang dipilih

pada pengenalan

haji

Alternate course -

Conclution Pengguna dapat melihat detail dari menu-

menu yang dipilih pada pengenalan haji

Post Condition Detail menu pengenalan haji tampil

dilayar pengguna

Tabel 4.6. Use Case Scenario Pengenalan Umrah

Use Case Pengenalan Umrah

Use case ID 4

Actor Pengguna


menu pengenalan mrah

Pre-condition Pengguna menekan menu Pengenalan haji

dan umrah


1. Pengguna

mengklik menu

pengenalan haji &

umrah

2. Menampilkan isi

menu pengenalan

haji dan umrah,

yaitu Haji dan

Umrah

59

3.Pengguna

mengklik menu

pengenalan mrah

4.Menampilkan isi

menu pengenalan

Umrah

Alternate course -

Conclution Pengguna dapat melihat isi menu

pengenalan umrah yaitu Pengertian,

Hukum, Rukun, Syarat, dan Wajib umrah

Post Condition Menu pengenalan umrah tampil dilayar

pengguna

Tabel 4.7. Use Case Scenario Detail Pengenalan Umrah

Use Case Detail Pengenalan Umrah

Use case ID 5

Actor Pengguna


detail dari menu-menu pada pengenalan

umrah yang bagian-bagiannya dapat

dilihat pada bab IV 4.1.2


pengenalan umrah


1. Pengguna

mengklik menu

pengenalan haji &

umrah

2. Menampilkan isi

menu pengenalan

haji dan umrah,

yaitu Haji dan

Umrah

3.Pengguna

mengklik menu

pengenalan umrah

4.Menampilkan isi

menu pengenalan

umrah

5.Pengguna

mengklik salah

satu menu-menu

pada pengenalan

umrah

6.Menampilkan isi

menu yang dipilih

pada pengenalan

umrah

Alternate course -


menu yang dipilih pada pengenalan umrah

Post Condition Detail menu pengenalan umrah tampil

dilayar pengguna

Tabel 4.8. Use Case Scenario Hikmah Haji & Umrah

Use Case Hikmah Haji dan Umrah

Use case ID 6

Actor Pengguna


menu Hikmah haji dan umrah

Pre-condition Pengguna menekan menu Hikmah haji dan

Umrah


60

1. Pengguna

mengklik menu

hikmah haji &

umrah

2. Menampilkan isi

menu hikmah haji

dan umrah

Alternate course -

Conclution Pengguna dapat melihat menu hikmah dan

umrah

Post Condition Menu hikmah haji dan umrah tampil

dilayar pengguna

Tabel 4.9. Use Case Scenario Detail Hikmah Haji & Umrah

Use Case Detail hikmah haji dan umrah

Use case ID 7

Actor Pengguna


detail dari menu-menu pada hikmah haji

dan umrah yang bagian-bagiannya dapat



hikmah haji dan umrah


1. Pengguna

mengklik menu

pengenalan haji &

umrah

2. Menampilkan isi

menu pengenalan

haji dan umrah

3.Pengguna

mengklik menu

hikmah haji dan

umrah

4.Menampilkan isi

menu hikmah haji

dan umrah

5.Pengguna

mengklik salah

satu menu-menu

pada hikmah haji

dan umrah

6.Menampilkan isi

menu yang dipilih

pada hikmah haji

dan umrah

Alternate course -


menu yang dipilih pada hikmah haji dan

umrah

Post Condition Detail hikmah haji dan umrah tampil

dilayar pengguna

Tabel 4.10. Use Case Scenario Persiapan Haji

Use Case Persiapan Haji

Use case ID 8

Actor Pengguna


menu persiapan haji

Pre-condition Pengguna menekan menu persiapan haji


61

1. Pengguna

mengklik menu

persiapan haji

2. Menampilkan isi

menu persiapan haji

Alternate course -

Conclution Pengguna dapat melihat is menu persiapan

haji

Post Condition Menu persiapan haji tampil dilayar

pengguna

Tabel 4.11. Use Case Scenario Detail Persiapan Haji

Use Case Detail persiapan haji

Use case ID 9

Actor Pengguna


detail dari menu-menu pada persiapan haji

yang bagian-bagiannya dapat dilihat pada

bab IV 4.1.2


persiapan haji


1. Pengguna

mengklik menu

persiapan haji

2. Menampilkan

menu pada

persiapan haji

3.Pengguna

mengklik salah

satu menu-menu

pada persiapan haji

4.Menampilkan isi

menu yang dipilih

pada persiapan haji

Alternate course -


menu yang dipilih pada persiapan haji

Post Condition Detail menu persiapan haji tampil dilayar

pengguna

Tabel 4.12. Use Case Scenario Pelaksanaan Haji

Use Case Pelaksanaan haji

Use case ID 10

Actor Pengguna


menu pelaksanaan haji



1. Pengguna

mengklik menu

pelaksanaan haji

2. Menampilkan isi

menu pelaksanaan

haji

Alternate course -

Conclution Pengguna dapat melihat is menu

pelaksanaan haji

62

Post Condition Menu pelaksanaan haji tampil dilayar

pengguna

Tabel 4.13. Use Case Scenario Detail Pelaksanaan Haji

Use Case Detail Pelaksanaan Haji

Use case ID 11

Actor Pengguna


detail dari menu-menu pada pelaksaaan

haji yang bagian-bagiannya dapat dilihat

pada bab IV 4.1.2


pelaksanaan haji


1. Pengguna

mengklik menu

pelaksanaan haji

2. Menampilkan isi

menu pelaksanaan

haji

3. Pengguna

mengklik menu

yang ada pada

pelaksanaan haji

4.Menampilkan isi

menu yang dipilih

pada pelaksanaan

haji

Alternate course -


menu yang dipilih pada pelaksanaan haji

Post Condition Detail menu pelaksanaan haji tampil

dilayar pengguna

Tabel 4.14. Use Case Scenario Doa Haji & Umrah

Use Case Doa haji dan umrah

Use case ID 12

Actor Pengguna


menu doa haji dan umrah

Pre-condition Pengguna menekan menu doa haji dan

umrah


1. Pengguna

mengklik menu

doa haji dan umrah

2. Menampilkan isi

menu doa haji dan

umrah

Alternate course -

Conclution Pengguna dapat melihat is menu doa haji

dan umrah

Post Condition Menu doa haji dan umrah tampil dilayar

pengguna

Tabel 4.15. Use Case Scenario Detail Doa-Doa Haji dan Umrah

Use Case Detail doa-doa haji dan umrah

Use case ID 13

Actor Pengguna

63


detail dari menu-menu pada doa-doa haji

dan umrah yang bagian-bagiannya dapat


Pre-condition Pengguna menekan menu-menu pada doa

haji


1. Pengguna

mengklik menu

doa haji dan umrah

2. Menampilkan isi

menu doa haji dan

umrah

5.Pengguna

mengklik salah

satu menu-menu

pada doa haji dan

umrah

4.Menampilkan isi

menu yang dipilih

pada doa haji dan

umrah

Alternate course -


menu yang dipilih pada doa haji dan

umrah

Post Condition Detail menu doa haji dan umrah tampil

dilayar pengguna

Tabel 4.16. Use Case Scenario Berita Haji

Use Case Berita haji

Use case ID 14

Actor Pengguna


menu berita haji



1. Pengguna

mengklik menu

berita haji dan

memilih tab berita

2.Memparsing

halaman berita dari

internet

3. Menampilkan isi

berita haji dalam list

Alternate course -Jika tidak ada koneksi internet, maka

aplikasi tidak akan memparsing halaman

berita dari internet

Conclution Pengguna dapat melihat isi berita haji

Post Condition List berita haji tampil dilayar pengguna

Tabel 4.17. Use Case Scenario Detail Berita

Use Case Detail berita

Use case ID 15

Actor Pengguna


detail dari list-list berita yang terdapat

pada berita haji

Pre-condition Pengguna menekan list pada berita haji

64


1. Pengguna

mengklik menu

berita haji dan

memilih tab berita

2.Memparsing

halaman berita dari

internet

3. Menampilkan isi


5.Pengguna

mengklik salah

satu list pada berita

haji

6.Menampilkan isi

berita yang dipilih

pada list berita haji

Alternate course -

Conclution Pengguna dapat melihat detail dari berita

yang dipilih pada berita haji

Post Condition Detail dari berita yang dipilih tampil

dilayar pengguna

Tabel 4.18. Use Case Scenario Detail Pengumuman

Use Case Detail pengumuman

Use case ID 16

Actor Pengguna


detail dari list-list pengumuman yang

terdapat pada berita haji

Pre-condition Pengguna menekan list pada pengumuman


1. Pengguna

mengklik menu

berita haji dan

memilih tab

pengumuman

2.Memparsing

halaman

pengumuman dari

internet

3. Menampilkan isi


5.Pengguna

mengklik salah

satu list

pengumuman pada

berita haji

6.Menampilkan isi

berita yang dipilih

pada list

pengumuman

Alternate course -

Conclution Pengguna dapat melihat detail dari

pengumuman yang dipilih pada berita haji

Post Condition Detail dari pengumuman yang dipilih

tampil dilayar pengguna

Tabel 4.19. Use Case Scenario Peta Lokasi

Use Case Peta lokasi

Use case ID 17

Actor Pengguna

Description menggambarkan kegiatan untuk melihat

menu peta lokasi yang bagian-bagiannya

dapat dilihat pada bab IV 4.1.2

65



1. Pengguna

mengklik menu

peta lokasi

2. Menampilkan isi

menu peta lokasi

Alternate course -

Conclution Pengguna dapat melihat is menu peta lokasi

Post Condition Menu meta lokasi tampil dilayar pengguna

Tabel 4.20. Use Case Scenario Detail Peta Lokasi

Use Case Detail peta lokasi

Use case ID 18

Actor Pengguna


detail dari menu-menu pada peta lokasi

beserta mapnya yang bagian-bagiannya

dapat dilihat pada bab IV 4.1.2

Pre-condition Pengguna menekan menu-menu pada peta

lokasi


1. Pengguna

mengklik menu

peta lokasi

2. Menampilkan isi

menu pada peta

lokasi

2. Pengguna

mengklik salah

satu menu-menu

pada peta lokasi

4.Menampilkan isi

menu yang dipilih

pada peta lokasi

5.mendapatkan

longitude dan

latitude sesuai

dengan yang dipilih

dan menampilkan

lokasi yang sesuai

Alternate course -

Conclution Pengguna dapat melihat detail dan peta

dari lokasi yang dipilih pada peta lokasi

Post Condition Detail peta lokasi dan petanya tampil

dilayar pengguna

Tabel 4.21. Use Case Scenario Video Haji

Use Case Video haji

Use case ID 19

Actor Pengguna


menu video haji



1. Pengguna

mengklik menu

2. Menampilkan isi

menu pada video

66

video haji

3. pengguna

memilih video yang

diinginkan

haji

4. menampilkan

video yang dipilih

Alternate course -

Conclution Pengguna dapat melihat menu video haji

Post Condition video haji yang dipilih tampil dilayar

pengguna

Tabel 4.22. Use Case Scenario Amalan Haji

Use Case Amalan haji

Use case ID 20

Actor Pengguna


menu amalan haji

Pre-condition Pengguna menekan menu amalan haji


1. Pengguna

mengklik menu

amalan haji

2. Menampilkan isi

menu pada amalan

haji

Alternate course -

Conclution Pengguna dapat melihat is menu amalan

haji

Post Condition Menu amalan haji tampil dilayar pengguna

Tabel 4.23. Use Case Scenario Detail Amalan Haji

Use Case Detail amalan haji

Use case ID 21

Actor Pengguna


detail dari menu-menu pada amalan haji

yang bagian-bagiannya dapat dilihat pada

bab IV 4.1.2


amalan haji


1. Pengguna

mengklik menu

amalan haji &

umrah

2. Menampilkan

menu pada amalan

haji

3.Pengguna

mengklik menu

pada amalan haji

4.Menampilkan

menu pada amalan

Haji

5.Pengguna

mengklik salah

satu menu-menu

pada amalan haji

6.Menampilkan isi

menu yang dipilih

pada amalan haji

Alternate course -


67

menu yang dipilih pada pengenalan haji

Post Condition Detail menu pengenalan haji tampil

dilayar pengguna

Tabel 4.24. Use Case Scenario Istilah Haji

Use Case Istilah haji

Use case ID 22

Actor Pengguna


menu istilah haji

Pre-condition Pengguna menekan menu istilah haji


1. Pengguna

mengklik menu

istilah haji

2. Menampilkan isi

menu istilah haji

Alternate course -

Conclution Pengguna dapat melihat is menu istillah

haji

Post Condition Menu istilah haji tampil dilayar pengguna

Tabel Use 4.25. Case Scenario Detail istilah Haji

Use Case Detail istilah haji

Use case ID 23

Actor Pengguna


detail dari menu-menu pada istilah

hajiyang bagian-bagiannya dapat dilihat

pada bab IV 4.1.2


istilah haji


1. Pengguna

mengklik menu

istilah haji &

umrah

2. Menampilkan isi

menu istilah haji

dan umrah

5.Pengguna

mengklik salah

satu menu-menu

pada istilah haji

6.Menampilkan isi

menu yang dipilih

pada istilah haji

Alternate course -


menu yang dipilih pada istilah haji

Post Condition Detail menu istilah haji tampil dilayar

pengguna

Tabel Use 4.25. Case Scenario Cek Keberangkatan Haji

Use Case Cek Kebarangkatan Haji

Use case ID 24

Actor Pengguna

68


jadwal keberankatan berdasarkan nomor

porsi

Pre-condition Pengguna menekan menu cek

keberangkatan


1. Pengguna

mengklik menu

cek keberangkatan

2. Menampilkan

tampilan cek

keberankatan yg

berisi form nomor

porsi

5.Pengguna

mengisi form

nomor porsi

6.Menampilkan

jadwal keberankatan

sesuai nomor porsi

Alternate course -

Conclution Pengguna dapat melihat jadwal

keberangkatan haji berdasarkan nomor

porsi

Post Condition Cek keberangkatan tampil dilayar

pengguna

b. Activity Diagram

Activity diagram menggambarkan workflow atau aktifitas dari

sistem yang ada pada aplikasi pembelajaran haji dan umrah.

Activity diagram yang digunakan penulis diantaranya :

1. Activity diagram Pengenalan Haji & Umrah

Gambar 4.3 Activity Diagram Pengenalan Haji dan Umrah

Keterangan gambar : Dalam activity diagram diatas,

pengguna memilih menu pengenalan haji & umrah, kemudian

sistem akan menampilkan menu pada pengenalan haji &

umrah dalam bentuk list, yang kemudian akan tampil pada

layar perangkat milik si pengguna.

69

2. Activity Diagram Pengenalan Haji

Gambar 4.‎04 Activity Diagram Pengenalan Haji

Keterangan gambar : Dalam activity diagram pengenalan

haji, pengguna memilih menu berjudul pengenalan haji &

umrah, kemudian sistem akan menampilkan menu-menu pada

pengenalan haji & umrah dalam bentuk list, yang kemudian

akan tampil pada layar perangkat milik si pengguna. Setelah

list-list tersebut tampil, pengguna memilih salah satu dari list

menu tersebut, yaitu pengenalan haji. Kemudian sistem akan

menampilkan menu-menu dalam pengenalan haji dalam bentuk

list, yang kemudian akan tampil pada layar perangkat milik si

pengguna.

70

3. Activity Diagram Detail Pengenalan Haji

Gambar 4.‎05 Activity Diagram Detail Pengenalan Haji


haji, pengguna memilih menu berjudul pengenalan haji &





menu tersebut, yaitu pengenalan haji. Kemudian sistem akan

menampilkan menu-menu diantaranya pengertian haji, hukum

haji, syarat haji, rukun haji, wajib haji dalam bentuk list, yang

kemudian akan tampil pada layar perangkat milik si pengguna.

Setelah list-list tersebut tampil, pengguna memilih salah satu

dari list menu tersebut, lalu sistem akan menampilkan detail

dari menu liat yang dipilih.

71

4. Activity Diagram Pengenalan Umrah

Gambar 4.‎06. Activity Diagram Pengenalan Umrah


umrah, pengguna memilih menu berjudul pengenalan haji &





menu tersebut, yaitu pengenalan umrah. Kemudian sistem akan

menampilkan menu-menu diantaranya pengertian umrah,

hukum umrah, syarat umrah, rukun umrah, wajib umrah dalam

bentuk list, dalam bentuk list, yang kemudian akan tampil pada

layar perangkat milik si pengguna.

72

5. Activity Diagram Detail Pengenalan Umrah

Gambar 4.‎07 Activity Diagram Detail Pengenalan Umrah







menu tersebut, yaitu pengenalan umrah. Kemudian sistem akan

menampilkan menu-menu diantaranya pengertian umrah,

hukum umrah, syarat umrah, rukun umrah, wajib umrah dalam

bentuk list yang kemudian akan tampil pada layar perangkat

milik si pengguna. Setelah list-list tersebut tampil, pengguna

memilih salah satu dari list menu tersebut, lalu sistem akan

menampilkan detail dari menu liat yang dipilih.

73

6. Activity Diagram Hikmah Haji dan Umrah

Gambar 4.‎08 Activity Diagram Hikmah Haji dan Umrah







menu tersebut, yaitu hikmah haji dan umrah. Kemudian sistem

akan menampilkan menu-menu, dimana menu-menu tersebut

dapat dilihat pada bab IV subbab 4.1.2.

74

7. Activity Diagram Detail Hikmah Haji dan Umrah

Gambar 4.‎09 Activity Diagram Detail Hikmah Haji dan Umrah







menu tersebut, yaitu hikmah haji dan umrah. Kemudian sistem

akan menampilkan menu-menu, dimana menu-menu tersebut

dapat dilihat pada bab IV subbab 4.1.2. Setelah list-list tersebut

tampil, pengguna memilih salah satu dari list menu tersebut,

lalu sistem akan menampilkan detail dari menu liat yang dipilih.

8. Activity Diagram Persiapan Haji

Gambar 4.10 Activity Diagram Persiapan Haji

75


pengguna memilih menu persiapan haji, kemudian sistem akan

menampilkan menu pada persiapan haji dalam bentuk list,

yang kemudian akan tampil pada layar perangkat milik si

pengguna.

9. Activity Diagram Detail Persiapan Haji

Gambar 4.11 Activity Diagram Detail Persiapan Haji

Keterangan gambar : Dalam activity diagram detail

persiapan haji, pengguna memilih menu berjudul persiapan haji,

kemudian sistem akan menampilkan menu-menu pada

persiapan haji dalam bentuk list, rincian menu-menu tersebut

sesuai dengan yang telah disebutkan pada bab IV subbab 4.1.2.

Setelah list-list tersebut tampil, pengguna memilih salah satu

dari list menu tersebut, lalu sistem akan menampilkan detail

dari menu liat yang dipilih.

10. Activity Diagram Pelaksanaan Haji

Gambar ‎04.12 Activity Diagram Pelaksanaan Haji

76


pengguna memilih menu pelaksanaan haji, kemudian sistem

akan menampilkan menu pada pelaksanaan haji dalam bentuk

list, yang kemudian akan tampil pada layar perangkat milik si

pengguna.

11. Activity diagram Detail Pelaksanaan Haji

Gambar 4.‎013 Activity Diagram Detail Pelaksanaan Haji


pelaksanaan haji, pengguna memilih menu berjudul

pelaksanaan haji, kemudian sistem akan menampilkan menu-

menu pada pelaksanaan haji dalam bentuk list, rincian menu-

menu tersebut sesuai dengan yang telah disebutkan pada bab

IV subbab 4.1.2. Setelah list-list tersebut tampil, pengguna

memilih salah satu dari list menu tersebut, lalu sistem akan

menampilkan detail dari menu liat yang dipilih.

12. Activity Diagram Amalan Haji

Gambar 4.‎014 Activity Diagram Amalan Haji

77


pengguna memilih menu amalan haji, kemudian sistem akan

menampilkan menu pada amalan haji dalam bentuk list, yang


13. Activity Diagram Detail Amalan Haji

Gambar 4.15. Activity Diagram Detail Amalan Haji

Keterangan gambar : Dalam activity diagram detail amalan

haji, pengguna memilih menu berjudul amalan haji, kemudian

sistem akan menampilkan menu-menu pada amalan haji dalam

bentuk list, rincian menu-menu tersebut sesuai dengan yang

telah disebutkan pada bab IV subbab 4.1.2. Setelah list-list

tersebut tampil, pengguna memilih salah satu dari list menu

tersebut, lalu sistem akan menampilkan detail dari menu liat

yang dipilih.

14. Activity Diagram Doa Haji

Gambar ‎04.16 Activity Diagram Doa Haji


pengguna memilih menu doa haji, kemudian sistem akan

78

menampilkan menu pada doa haji dalam bentuk list, yang


15. Activity Diagram Detail Doa-Doa Haji

Gambar 4.‎017 Activity Diagram Detail Doa-Doa Haji

Keterangan gambar : Dalam activity diagram detail doa-doa

haji, pengguna memilih menu berjudul doa haji, kemudian

sistem akan menampilkan menu-menu pada doa haji dalam





yang dipilih. Pengguna mempunyai pilihan untuk memutar

suara yang berisi bacaan doa. Apabila pengguna menekan

tombol play, maka sistem akan membuka file berformat *.mp3

pada memori dan memutar file tersebut.

79

16. Activity Diagram Berita Haji

Gambar 4.‎018 Activity Diagram Berita Haji

Keterangan gambar : Dalam activity diagram berita haji,

pengguna memilih menu berjudul berita haji, kemudian sistem

akan menampilkan dua buah tab, yaitu tab berita dan

pengumuman. Apabila pilihan ada pada berita tab, maka sistem

akan mengakses situs

http://www.haji.kemenag.go.id/v2/publikasi/berita/ dan

memparsing data-data pada situs tersebut. Setelah diparsing,

data-data tersebut akan ditampilkan dalam bentuk list pada

perangkat pengguna. Begitu pula jika tab yang dipilih adalah

tab pengumuman. maka sistem akan mengakses situs

http://www.haji.kemenag.go.id/v2/publikasi/pengumuman dan

memparsing data-data pada situs tersebut. Setelah diparsing,

data-data tersebut akan ditampilkan dalam bentuk list pada

perangkat pengguna

80

17. Activity Diagram Detail Berita Haji

Gambar 4.‎019 Activity Diagram Detail Berita Haji.

Keterangan gambar : Dalam activity diagram detail berita

haji, setelah sistem mem-parsing

http://www.haji.kemenag.go.id/v2/publikasi/berita/ dan

menampilkannya dalam bentuk list. Pengguna memilih salah

satu dari list tersebut kemudian akan membuka alamat situs

yang sesuai dengan berita yang dipilih dalam list dan mem-

parsing data-data pada situs tersebut. Setelah di-parsing, data-

data tersebut akan ditampilkan pada perangkat pengguna agar

dapat dibaca.

81

18. Activity Diagram Detail Pengumuman Haji

Gambar 4.‎020. Activity Diagram Detail Pengumuman Haji


pengumuman haji, Setelah sistem mem-parsing situs

http://www.haji.kemenag.go.id/v2/publikasi/pengumuman dan

menampilkannya dalam bentuk list, pengguna memilih salah

satu dari list tersebut kemudian akan membuka alamat situs

yang sesuai dengan pengumuman yang dipilih dalam list.

Kemudian sistem akan mengecek apakah file berformat *.pdf

yang didapat pada alamat situs sudah ada dalam memori atau

tidak. Apabila sudah ada, maka sistem akan langsung membuka

file yang sesuai. Apabila belum ada, maka sistem akan

mengunduh file *.pdf tersebut dan menyimpannya pada

memori perangkat dan membukanya. Setelah membuka file

tersebut, isi file tersebut akan ditampilkan pada perangkat

pengguna.

82

19. Activity Diagram Peta Lokasi

Gambar 4.‎021 Activity Diagram Peta Lokasi


pengguna memilih menu peta lokasi, kemudian sistem akan

menampilkan menu pada peta lokasi dalam bentuk list, rincian

menu-menu tersebut sesuai dengan yang telah disebutkan pada

bab IV subbab 4.1.2 yang kemudian akan tampil pada layar

perangkat milik si pengguna.

20. Activity Diagram Detail Peta Lokasi

Gambar 4.‎022 Activity Diagram Detail Peta Lokasi

Keterangan gambar : Dalam activity diagram detail peta

lokasi, pengguna memilih menu peta lokasi, kemudian aplikasi

akan menampilkan menu-menu didalamnya yang berupa lokasi

yang berkaitan dengan haji, rincian menu-menu tersebut sesuai

dengan yang telah disebutkan pada bab IV subbab 4.1.2.

83

pengguna memilih menu lokasi tersebut lalu aplikasi akan

menampilkan lokasi tersebut. Pengguna dapat memilih lokasi

kedua. Dengan memilih lokasi kedua maka aplikasi akan

menampilkan peta antara lokasi 1 dan lokasi 2 beserta jaraknya.

21. Activity Diagram Video Haji

Gambar 4.‎023. Activity Diagram Video Haji

Keterangan gambar : Dalam activity diagram Video haji,

pengguna memilih menu berjudul video haji, kemudian sistem

akan menampilkan menu-menu pada video haji dalam bentuk

list, rincian menu-menu tersebut sesuai dengan yang telah

disebutkan pada bab IV subbab 4.1.2. Setelah list-list tersebut

tampil, pengguna memilih salah satu dari list menu tersebut,

lalu sistem akan menampilkan video dari menu yang dipilih

pengguna.

22. Activity Diagram Istilah Haji

Gambar ‎04.‎024 Activity Diagram Istilah Haji

84


pengguna memilih menu istilah haji, kemudian sistem akan

menampilkan menu pada istilah haji dalam bentuk list, rincian

menu-menu tersebut sesuai dengan yang telah disebutkan pada

bab IV subbab 4.1.2 yang kemudian akan tampil pada layar

perangkat milik si pengguna.

23. Activity Diagram Detail Istilah Haji

Gambar 4.‎025 Activity Detail Istilah Haji

Keterangan gambar : Dalam activity diagram detail istilah

haji, pengguna memilih menu berjudul istilah haji, kemudian

sistem akan menampilkan menu-menu pada istilah haji dalam





yang dipilih.

85

24. Activity Diagram Cek Keberangkatan Haji

Gambar 4.‎026 Activity Cek Keberangkatan Haji

Dalam activity diagram cek keberangkatan haji, pengguna

memilih menu berjudul cek keberangkatan haji, kemudian

sistem akan menampilkan form untuk diisi. Pengguna mengisi

form tersebut dengan nomor porsi calon jamaah haji. Setelah

mengisi form tersebut, sistem akan mengakses dan mem-

parsing situs

http://haji.kemenag.go.id/v2/basisdata/xml/nomor_porsi untuk

mengecek keberadaan nomor porsi. Setelah proses selesai hasil

pencarian akan muncul pada perangkat pengguna.

c. Sequence Diagram

Diagram sekuen untuk menggambarkan kelakuan objek pada

use case dengan mendeskripsikan waktu hidup objek dan message

yang dikirimkan dan diterima antarobjek. Diagram sekuen yang

digunakan penulis diantaranya :

http://haji.kemenag.go.id/v2/basisdata/xml/nomor_porsi

86

1. Sequence Diagram Pengenalan Haji dan Umrah, Persiapan

haji, Pelaksanaan Haji, Amalan Haji, dan Istilah Haji

Gambar 4.‎027 Sequence Diagram Pengenalan Haji dan Umrah, Persiapan

haji, Pelaksanaan Haji, Amalan Haji, dan Istilah Haji

Pada sequence diagram ini, Pengguna melihat penjelasan

dari haji dengan membuat sistem melakukan request ke

database dan sistem akan menampilkan data yang di-request

tersebut ke layar pengguna.

2. Sequence Diagram Doa

Gambar 4.‎028 Sequence Diagram Detail Doa Haji

87

Pada sequence diagram ini, Pengguna melihat doa haji

dengan membuat sistem melakukan request ke database dan

sistem akan menampilkan data yang di-request tersebut ke

layar pengguna. Pengguna dapat memutar suara doa dengan

membuat sistem melakukan request untuk memutar file suara

yang kemudian sistem akan memutar suara file tersebut agar

dapat didengar oleh pengguna.

3. Sequence Diagram Video

Gambar ‎04.29 Sequence Diagram Video Haji

Pada sequence diagram ini, Pengguna melihat video haji

dengan membuat sistem melakukan request ke alamat situs

video dan sistem akan menampilkan video yang di-request

tersebut ke layar pengguna.

4. Sequence Diagram Berita dan Pengumuman Haji

Gambar 4.‎030 Sequence Diagram Berita Haji dan Pengumuman Haji

88

Keterangan gambar : Dalam sequence diagram berita dan

pengumuman haji, pengguna melihat berita haji dengan

mengirim request ke sistem untuk mengakses alamat situs yang

dituju. Setelah itu sistem akan mem-parsing situs dengan

metode getMenuBerita() untuk dijadikan dalam bentuk list.

Setelah proses selesai list akan ditampilkan ke layar pengguna.

5. Sequence Diagram Cek Keberangkatan Haji

Gambar 4.‎031 Sequence Diagram Cek Keberangkatan

Keterangan gambar : Dalam sequence diagram cek

keberangkatan haji, pengguna masukan input pada form nomor

porsi dan mengirim request ke alamat situs dengan nomor porsi

tersebut. Nomor porsi akan diproses pada alamat situs. Setelah

proses selesai, hasil akan diambil dan dikirim kembali ke

perangkat pengguna agar hasil tersebut dapat ditampilkan di

layar pengguna.

4.2.2. Tahap Perancangan Interface

Pada tahap ini penulis merancang tampak muka aplikasi.

89

a. Rancangan Tampilan Menu Utama

Gambar 4.‎032. Rancangan Tampilan Menu Utama

Keterangan gambar : layar ini tampil pada saat aplikasi

diluncurkan. Antarmuka ini berisi menu-menu utama aplikasi

berbentuk Linear Layout. Pada setiap menu terdapat ikon dan

nama menu tersebut

b. Rancangan Tampilan Bahasan Haji

Gambar 4.‎033 Rancangan Tampilan Bahasan Haji

Keterangan gambar : Antarmuka ini tampil saat menu

pembahasan haji dibuka. Pada antarmuka ini terdapat

gambar(2), judul(3), dan isi pembahasan tersebut(4) yang dapat

di scroll.

1. Nama Aplikasi

2. Menu – menu aplikasi

1. Nama Aplikasi

2. Gambar bahasan terkait

3. Judul bahasan

4. Isi detail bahasan

90

c. Rancangan Tampilan Doa Haji

Gambar 4.‎034. Rancangan Tampilan Doa Haji

Keterangan gambar : Antarmuka ini tampil saat menu doa

dipilih. Pada antarmuka ini terdapat judul doa(1), tombol

play/pause (2), dan isi doa serta terjemahannya yang dapat di

scroll. Apabila tombol play ditekan, maka aplikasi akan

memutar doa yang dipilih. Format file suara untuk doa

berformat *.mp3

d. Rancangan Tampilan Video Haji

Gambar 4.‎035. Rancangan Tampilan Video Haji

Keterangan gambar : Antarmuka ini tampil saat menu video

dipilih. Pada antar muka ini terdapat judul video(1) dan video

player(2) yang memenuhi seluruh layar yang menggunakan

YouTubeAPI.

1. Judul doa

2. Tombol play/pause

3. Isi doa dan terjemahan

1. Nama

Aplikasi

2. Video

player

91

e. Rancangan Tampilan List Berita Haji

Gambar 4.‎036 Rancangan Tampilan List Berita Haji

Keterangan gambar : Antarmuka ini tampil saat menu berita

haji dipilih. Pada antarmuka ini terdapat judul menu(1) dan

menu Tabulator (2). Menu tabulator digunakan untuk

mengganti pilihan menu berita, pengumuman dan bookmark.

Pada setiap tabulator tersebut berisi list-list (3) yang sesuai

dengan menu terkait.

f. Rancangan Tampilan Berita Haji

Gambar 4.‎037 Rancangan Tampilan Berita Haji

1. Judul Menu

2. Tab (Berita, Pengumuman,

Bookmark)

3. List berita haji

1. Judul Menu

2. Gambar berita

3. Judul berita

4. Isi berita

92

Keterangan gambar : Antarmuka ini tampil saat memilih list

berita. Pada antarmuka ini terdapat gambar(2), judul(3), dan isi

berita tersebut(4) yang dapat di scroll.

g. Rancangan Tampilan Cek Keberangkatan

Gambar 4.‎038 Rancangan Tampilan Cek Keberangkatan

Keterangan gambar : Antarmuka ini tampil saat menu cek

keberangkatan dibuka. Pada antarmuka ini terdapat field input

untuk mengetikkan nomor porsi untuk pengecekan

keberangkatan. Setelah nomor porsi dicari, hasil akan

ditampilkan pada kolom yang tersedia (3).

4.2.3. Tahap Perancangan Database

Pada tahap ini penulis merancang database yang akan digunakan

pada aplikasi. Database menggunakan SQLite karena SQLite cocok untuk

perangkat android. Struktur database yang digunakan adalah :

a. Tabel Konten

Nama table : konten

Tujuan tabel : Untuk menyimpan alamat lokasi file yang akan

digunakan untuk membuka konten aplikasi.

Field Type Extra

ID TEXT PRIMARY_KEY

File TEXT

Image TEXT

1. Judul Menu

2. Input nomor

keberangkatan

3. Kolom hasil pencarian

93

Ket TEXT

Keterangan tabel:

Field ID menunjukkan ID dari setiap kolum

Field File menunjukkan alamat dari file yang akan

digunakan oleh aplikasi

Field Image menunjukkan alamat dari file gambar yang

akan digunakan oleh aplikasi

Field Ket meenunjukkan keterangan dari kolum tersebut

b. Tabel Doa

Nama tabel : doa

Tujuan tabel : Untuk menyimpan alamat lokasi file yang akan

digunakan untuk membuka konten aplikasi

Field Type Extra

ID TEXT PRIMARY_KEY

Drawable TEXT

Suara TEXT

Terjemah TEXT

Ket TEXT

Keterangan tabel:

Field ID menunjukkan ID dari setiap kolum

Field Drawable menunjukkan alamat dari file gambar

yang akan digunakan oleh aplikasi

Field suara menunjukkan alamat dari file audio yang

akan digunakan oleh aplikasi

Field Terjemah menunjukkan terjemahan dari doa yang

sesuai

Field Ket menunjukkan keterangan dari kolum tersebut

c. Tabel Berita

Nama tabel : berita

94

Tujuan tabel : Untuk menyimpan data-data berita yang

disimpan untuk dibaca secara offline.

Field Type Extra

Judul TEXT

Date TEXT

Detail TEXT

Link TEXT

Image TEXT

Keterangan tabel:

Field Judul menunjukkan judul dari berita yang

disimpan.

Field Date menunjukkan menunjukkan tanggal berita.

Field Detail menunjukkan menunjukkan isi berita

Field Link menunjukkan link url berita.

Field Image menunjukkan alamat gambar untuk banner

dari berita.

d. Tabel Istilah

Nama tabel : istilah

Tujuan tabel : Untuk menyimpan data-data tentang istilah –

istilah yang ada pada haji.

Field Type Extra

ID TEXT

Judul TEXT

Arti TEXT

Keterangan tabel:

Field ID menunjukkan id dari istilah yang disimpan.

Field Judul menunjukkan nama/judul dari istilah

tersebut.

Field Arti menunjukkan arti dari istilah yang dimaksud.

95

e. Tabel Lokasi

Nama tabel : lokasi

Tujuan tabel : Untuk menyimpan data-data lokasi haji.

Field Type Extra

ID TEXT

Tempat TEXT

Gambar TEXT

Penjelasan TEXT

Lat TEXT

Long TEXT

Keterangan tabel:

Field ID menunjukkan id dari lokasi yang disimpan.

Field Tempat menunjukkan nama tempat yang

dimaksud

Field Gambar menunjukkan alamat dari file gambar

yang sesuai dengan id dan nama tempat

Field Penjelasan menunjukkan penjelasan dari tempat


Field Lat menunjukkan posisi latitude dari tempat yang

sesuai dengan id dan nama tempat.

Field Long menunjukkan posisi longitude dari tempat


4.2.4. Membangun Sistem (Pengkodean)

Pada fase ini penulis melakukan pengkodean dengan menggunakan

program IDE Android Studio dan bahasa pemograman Java untuk

membuat aplikasi. Pembuatan aplikasi yang dilakukan penulis

diantaranya adalah sebagai berikut :

1. Membuat fitur penjelasan tentang haji dan umrah

Salah satu fungsi dari aplikasi ini adalah menjelaskan hal-hal yang

berkaitan tentang haji dnan tata cara pelaksanaannya. Oleh karena itu ,

fitur ini merupakan salah satu hal yang penting dalam aplikasi. Dalam

96

mendapatkan informasi mengenai haji dan umrah, penulis

mendapatkannya dari buku-buku mengenai haji diantaranya buku

„Tuntunan Manasik Haji dan Umrah‟ yang dikeluarkan oleh

Kementerian agama, buku „Segala hal tentang Haji dan Umrah‟

terbitan Erlangga, dan buku-buku lain yang lebih jelasnya dapat

ditemukan di bab daftar pustaka.

Dalam membuat fitur ini, penulis menggunakan file tipe HTML

untuk menampilkan informasi tentang haji dan umrah. File HTML

disimpan pada android_assets/konten.

Gambar 4.‎039 contoh file HTML yang digunakan oleh aplikasi

Setiap file tersebut mempunyai alamat lokasi tersendiri. Masing-

masing alamat file disimpan pada database SQLite pada tabel konten

seperti yang telah dijelaskan pada tahap perancangan.

Gambar 4.‎040 isi tabel konten pada database dilihat dengan SQLiteBrowser

Setiap alamat file diberi ID yang unik. Aplikasi menggunakan ID

unik tersebut untuk mendapatkan alamat file yang sesuai dengan

97

informasi haji yang dipilih. Alamat file digunakan untum memberi

tahu sistem lokasi file yang akan dibuka.

Setelah mendapatkan alamat file. File html tersebut akan

ditampilan dengan fitur WebView yang dimiliki android. Untuk

menampilkan file HTML dengan webview, penulis menggunakan

perintah sebagai berikut :

WebView.loadUrl(“alamat file”);

Selanjutnya untuk tampilan antarmuka, akan disesuaikan dengn

apa yang telah dirancang pada tahap sebelumnya.

Cara ini digunakan penulis dalam menu-menu :

Penjelasan Haji dan Umrah

Istilah haji

Amalan haji

Hikmah haji dan umrah

2. Membuat fitur doa

Fitur doa terdiri dari bacaan doa, file suara doa dan terjemahannya.

Dalam membuat fitur doa, penulis mendapatkan bacaan doa dan

terjemahannya dari buku „Tuntunan Manasik Haji dan Umrah‟ yang

dikeluarkan oleh Kementerian agama. Sementara untuk file suara,

pengguna mendapatkannya dari berbagai sumber di internet.

File bacaan doa disimpan pada lokasi android_resource/drawable,

sedangkan file suara disimpan pada lokasi android_resource/raw.

Sama halnya dengan fitur penjelasan tentang haji dan umrah.

Penulis membuat database untuk meyimpan data-data doa seperti nama

doa, alamat bacaan doa, alamat file suara doa, dan juga terjemahannya..

Setiap doa memiliki ID yang unik.

98

Gambar 4.‎041. Isi Tabel doa pada Database dilihat dengan SQLiteBrowser

Setiap menu doa akan memberikan ID unik yang kemudian

digunakan sistem untuk mencari doa yang memiliki ID yang sama.

Setelah menemukan ID yang sama, sistem akan menampilkan gambar

yang berada pada alamat yang sesuai dengan kolom „Drawable’ dan

memutar suara yang sesuai dengan kolom „Suara‟. Untuk memutar

suara penulis menggunakan perintah :

mediaPlayer = MediaPlayer.create

(getApplicationContext(), “Alamat_File_Suara”);

mediaPlayer.start();

dan untuk memberhentikan suara penulis menggunakan perintah :

mediaPlayer.pause();

Tampilan antarmuka akan sesuai dengan apa yang dirancang

sebelumnya.

3. Membuat fitur video

Pada fitur video, penulis menggunakan video tentang pelaksanaan

haji dari YouTube yang beralamat di

http://www.youtube.com/qTfALaE0vqY. Penulis juga menggunakan

library pemutar YouTube pada android, yaitu

YouTubeAndroidPlayerAPI.

Video yang digunakan penulis berdurasi total 1 jam 7 menit 43

detik (4063 detik). Video tersebut dibagi menjadi beberapa bagian

sesuai dengan tahapan pelaksanaan. bagian – bagian tersebut akan

http://www.youtube.com/qTfALaE0vqY

99

menandakan waktu awal dimulainya video tersebut diantaranya

sebagai berikut :

Tabel 4.27. Tabel Waktu Mulai Video Haji

No Judul Menu Waktu Mulai

(MM:SS)

Waktu mulai

(ms)

1 Penjelasan Haji 0 0

2 Pelaksanaan haji

dan umrah

7:10 430000

3 Kiat Haji Mabrur 7:45 465000

4 Benda Bawaan

Jemaah haji

9:25 585000

5 Di pesawat 12:15 735000

6 Niat umrah 17:11 1031000

7 Niat Haji 17:34 1054000

8 Doa setelah ihram 17:58 1078000

9 Larangan pada

ihram

22:23 1343000

10 Hikmah ihram 23:57 1437000

11 Thawaf 28:21 1701000

12 Tempat air zamzam 36:06 2166000

13 Sa‟i 36:36 2196000

14 Tahalul 46:11 2771000

15 Wukuf 48:02 2882000

16 Thawaf ifadhah 63:26 3806000

17 Thawaf wada 64:10 3850000

18 Hikmah haji 64:51 3891000

19 Perjalanan pulang

haji

65:18 3918000

Setelah menentukan waktu mulai untuk setiap video, pada Activity

android digunakan perintah dari library YouTubeAndroidPlayerAPI,

yaitu :

100

youTubePlayer.loadVideo(ALAMAT_VIDEO, WAKTU_MULAI);

Alamat video merupakan alamat video YouTube dan waktu mulai

merupakan waktu mulai video yang sesuai dengan tabel diatas.

4. Membuat fitur berita tentang haji dan umrah

Dalam membuat fitur berita dan pengumuman, penulis mengambil

berita dari situs http://haji.kemenag.go.id/v2/publikasi/berita/

Gambar 4.‎042 Tampilan Situs Berita Haji tanggal 1 Mei 2015

(Sumber : http://haji.kemenag.go.id/v2/publikasi/berita/).

Penulis menggunakan JSOUP untuk mem-parsing data dari kedua

website tersebut. Dengan menggunakan JSOUP penulis dapat

mengambil bagian-bagian website yang diinginkan untuk ditampilkan

dalam perangkat android.

Untuk membuat fitur berita, penulis mengambil elemen div yang

memiliki class view-content (dapat dilihat pada gambar 4..43) yang

memiliki semua berita yang tampil pada halaman tersebut.. Pada

elemen <div‎class=”view-content”> terdapat sub elemen div berkelas

views-row views-row* yang berisi setiap berita.



101

Gambar 4.‎043 Elemen-elemen pada situs


Penulis akan mengambil setiap bagian elemen yang memiliki class

views-row views-row* pada elemen view-content. Untuk melakukan

hal tersebut penulis menggunakan perintah

Elements main = document.select("div.view-content >

div.views-row.views-row*");

for (Element e : main){

Elements titleNews = e.select("div >

div.header.article-header h2 a");

Elements pubDateNews = e.select("div >

div.footer.submitted > span.time.pubdate > span");

Elements img = e.select("div > div[class=node-

content] > div[class=section field field-name-field-image

field-type-image field-label-hidden] > div[class=field-

items] > div[class=field-item odd]");

title = titleNews.text();

pubDate= pubDateNews.text();

link =

"http://haji.kemenag.go.id"+titleNews.attr("href");

image = img.attr("resource");

Perintah diatas menunjukkan bahwa aplikasi akan memilih elemen

yang memiliki class views-row.views-row* yang berada pada elemen


102

ber-class view-content. Pada setiap elemen ber-class views-row.views-

row*, aplikasi akan melakukan beberapa iterasi dan memilih bagian –

bagian berikut :

1) div.header.article-header h2 a = elemen berisi judul setiap

berita.

2) div.footer.submitted > span.time.pubdate > span = elemen

berisi tanggal berita itu di-publish.

3) div.node-content > div.section.field.field-name-field-image

field-type-image.field-label-hidden. > div.field-items >

div.field-item.odd = berisi alamat yang berisi gambar dari berita

terkait.

Setelah memilih elemen-elemen tersebut, aplikasi mengambil data-data

pada elemen tersebut dengan menggunakan perintah :


pubDate= pubDateNews.text();

link =

"http://haji.kemenag.go.id"+titleNews.attr("href");


Keterangan gambar :

• titleNews.text() = mengambil teks yang ada pada elemen (1).

Jika berdasarkan gambar 4.43, Perintah ini akan menghasilkan

data “Masyarakat Dapat Pantau Pelunasan Haji Reguler” pada

iterasi pertama.

• pubDate.text() = mengambil teks yang ada pada elemen (2).


data “Sen, 01/06/2015 - 09:06” pada iterasi pertama.

• titleNews.attr(“href”) = mengambil nilai yang ada pada

attribute „href’ pada elemen (2). Jika berdasarkan gambar 4.43,

Perintah ini akan menghasilkan data “/v2/content/masyarakat-

dapat-pantau-pelunasan-haji-reguler” pada iterasi pertama.

• img.attr(“resource”) = mengambil nilai yang ada pada

attribute‎“resource” pada elemen (3). Jika berdasarkan gambar

4.43, Perintah ini akan menghasilkan data

103

http://haji.kemenag.go.id/v2/sites/default/files/styles/medium/p

ublic/field/image/Jemaah.jpg?itok=VfycXL_t” pada iterasi

pertama.

Setelah melakukan iterasi pertama, aplikasi akan melakukan iterasi

kedua dan seterusnya hingga elemen ber-class views-row.views-row*

pada elemen view-content selesai di-parsing semua datanya. Setelah

semua data di-parsing, data akan dikumpulkan dan ditampilkan dalam

bentuk list pada perangkat android dengan antarmuka sesuai dengan

rancangan pada tahap sebelumnya.

Untuk menampilkan detail berita yang dipilih dari list. Aplikasi

akan mengakses link yang terdapat pada list misal

http://haji.kemenag.go.id/v2/content/masyarakat-dapat-pantau-pelunasan-

haji-reguler.

Gambar 4.‎044 Tampilan Situs Berita Haji (Sumber :

http://www.haji.kemenag.go.id/v2/content/masyarakat-dapat-pantau-pelunasan-haji-

reguler).

http://haji.kemenag.go.id/v2/content/masyarakat-dapat-pantau-pelunasan-haji-reguler


104

Gambar 4.‎045 elemen-elemen pada situs berita haji (Sumber :

http://haji.kemenag.go.id/v2/content/masyarakat-dapat-pantau-pelunasan-haji-

reguler)

Alamat situs tersebut kemudian diparsing dengan menggunakan

JSOUP untuk diambil data-datanya. Untuk mengambil data-data

tersebut, penulis menggunakan perintah :

Element e = doc.select("div.node-content").first();

isi = e.html();

Keterangan perintah :

• doc.select(“div.node-content”).first() : perintah ini akan

memilih daerah elemen dengan class node-content yang ada

pada alamat situs.

• e.html() : perintah ini akan mengambil data pada daerah

tersebut dalam bentuk html.

Setelah mengambil data, data tersebut akan ditampilkan pada

perangkat android dengan antarmuka sesuai dengan rancangan pada

tahap sebelumnya.

5. Membuat Fitur Pengumuman Haji dan Umrah

Dalam membuat fitur berita dan pengumuman, penulis mengambil

berita dari situs http://haji.kemenag.go.id/v2/publikasi/pengumuman/.



http://haji.kemenag.go.id/v2/publikasi/pengumuman/

105

Gambar 4.‎0.46 Tampilan Situs Pengumuman Haji tanggal 1 Mei 2015

(Sumber : http://haji.kemenag.go.id/v2/publikasi/pengumuman/).

Penulis menggunakan JSOUP untuk mem-parsing data dari kedua

website tersebut. Dengan menggunakan JSOUP penulis dapat

mengambil bagian-bagian website yang diinginkan untuk ditampilkan

dalam perangkat android.

Untuk membuat fitur berita, penulis mengambil elemen div yang

memiliki class view-content (dapat dilihat pada gambar 4.47) yang

memiliki semua berita yang tampil pada halaman tersebut.. Pada

elemen <div‎class=”view-content”> terdapat sub elemen div berkelas

views-row views-row* yang berisi setiap berita.

Gambar 4.‎047 Elemen-Elemen pada Situs Berita Haji

http://haji.kemenag.go.id/v2/publikasi/pengumuman/

106

Penulis akan mengambil setiap bagian elemen yang memiliki class

views-row views-row* pada elemen view-content. Untuk melakukan

hal tersebut penulis menggunakan perintah :

Elements main = document.select("div.view-content >

div.views-row.views-row*");

for (Element e : main) {

Elements titleNews = e.select("div.views-field.views-

field-title h2 a");


link = "http://haji.kemenag.go.id" +

titleNews.attr("href");

Perintah diatas menunjukkan bahwa aplikasi akan memilih elemen

yang memiliki class views-row.views-row* yang berada pada elemen

ber-class view-content. Pada setiap elemen ber-class views-row.views-

row*, aplikasi akan melakukan beberapa iterasi dan memilih bagian

elemen div.header.article-header h2 a yang berisi judul setiap berita.

Setelah memilih elemen tersebut, aplikasi mengambil data-data

pada elemen tersebut dengan menggunakan perintah :


link = "http://haji.kemenag.go.id"

+titleNews.attr("href");

Keterangan gambar :

• titleNews.text() = mengambil teks yang ada pada elemen (1).


data “Pelunasan Jemaah Haji Reguler Tahun 1436H/2015M”

pada iterasi pertama.

• titleNews.attr(“href”) = mengambil nilai yang ada pada

attribute „href’ pada elemen (2). Jika berdasarkan gambar 4.47,

Perintah ini akan menghasilkan data “/v2/content/pelunasan-

jemaah-haji-reguler-tahun-1436h2015m” pada iterasi pertama.

Setelah melakukan iterasi pertama, aplikasi akan melakukan iterasi

kedua dan seterusnya hingga elemen ber-class views-row.views-row*

pada elemen view-content selesai di-parsing semua datanya. Setelah

semua data di-parsing, data akan dikumpulkan dan ditampilkan dalam

107

bentuk list pada perangkat android dengan antarmuka sesuai dengan


Untuk menampilkan detail pengumuman yang dipilih dari list.

Aplikasi akan mengakses link yang terdapat pada list misal

http://www.haji.kemenag.go.id/v2/content/pelunasan-jemaah-haji-

reguler-tahun-1436h2015m.

Gambar 4.‎048 Tampilan Situs Pengumuman Haji tanggal 1 Mei 2015 (Sumber :

http://www.haji.kemenag.go.id/v2/content/pelunasan-jemaah-haji-reguler-tahun-

1436h2015m)

Gambar 4.‎049 Elemen – Elemen ada situs Pengumuman Haji tanggal 1 Mei 2015

(Sumber : http://www.haji.kemenag.go.id/v2/content/pelunasan-jemaah-haji-reguler-

tahun-1436h2015m)

108

Alamat situs tersebut kemudian di-parsing dengan menggunakan

JSOUP untuk diambil data-datanya. Untuk mengambil data-data

tersebut, penulis menggunakan perintah :

Element e = doc.select("div.node-content >

div.section.field.field-name-field-filepengumuman.field-

type-file.field-label-hidden > div.field-items >

div.field-item.odd").first();

String src = e.attr("src");

urlFile = e.text();

File folder = new

File(Environment.getExternalStorageDirectory()+"/BelajarH

aji/pdf/");

folder.mkdirs();

isi =

Environment.getExternalStorageDirectory().getAbsolutePath

()+"/BelajarHaji/pdf/"+urlFile.substring(60);


• doc.select("div.node-content > div.section.field.field-name-

field-filepengumuman.field-type-file.field-label-hidden >

div.field-items > div.field-item.odd").first() = untuk memilih

elemen yang akan diambil. • e.attr("src") = mengambil nilai pada elemen diatas yang ber-

attribute src. Attribute ini berisi alamat file *pdf yang nantinya

akan di-download oleh aplikasi dan disimpan dalam folder

penyimpanan.

• urlFile = e.text() = mendapatkan nama file pdf.

• File(Environment.getExternalStorageDirectory()+"/BelajarHaj

i/pdf/");

folder.mkdirs();

Membuat folder “/BelajarHaji/pdf/”pada memori penyimpanan

utama perangkat android.

109

Setelah berhasil mendapatkan data-data tersebut. Maka aplikasi

akan membuka alamat pdf dan men-download file pdf tersebut.

Kemudian menyimpannya dalam penyimpanan utama perangkat

android. Setelah tersimpan, aplikasi akan membuka file pdf yang telah

ter-dowload dan menampilkannya pada perangkat android dengan

antarmuka yang sesuai dengan perancangan pada tahap sebelumnya.

6. Membuat Fitur Cek Keberangkatan Haji

Dalam membuat fitur cek keberangkatan haji, penulis mengambil

data dari situs http://haji.kemenag.go.id/v2/basisdata/xml/nomor_porsi.

Penulis menggunakan JSOUP untuk memparsing halaman tersebut dan

mendapatkan data-data yang dibutuhkan.

Gambar 4.‎050 Tampilan Situs Cek Keberangkatan Haji tanggal 1 Mei 2015

(Sumber :http://haji.kemenag.go.id/v2/basisdata/xml/2300098444)

Untuk memparsing data dengan JSOUP pada alamat situs tersebut,

penulis menggunakan perintah :

doc=Jsoup.connect("http://haji.kemenag.go.id/v2/basisdata

/xml/"+query).get()

Element e = doc.select("div.view-content > div.views-

row.views-row*").first();

if (e == null) {

isi = "Nomor Porsi " + query + " tidak ditemukan";

} else {

isi = e.html();

}


110


• Jsoup.connect("http://haji.kemenag.go.id/v2/basisdata/xml/"+q

uery).get() = aplikasi akan mencoba mengakses alamat

http://haji.kemenag.go.id/v2/basisdata/xml/query dengan query

merupakan masukan nomor porsi dari pengguna.

• doc.select("div.view-content > div.views-row.views-

row*").first(); = aplikasi akan memilih element ber-class

views-row.views-row* yang berada pada element ber-class

view-content.

• e.html() = mengambil nilai pada elemen diatas dalam bentuk

html.

Setelah mendapatkan semua data yang diperlukan, data akan

ditampilkan pada perangkat android dengan antarmuka yang sesuai


4.3. Fase Pelaksanaan/Implementasi

Fase implementasi adalah fase dimana penulis mengimplementasikan

perancangan yang telah dibuat pada fase sebelumnya dengan menggunakan

program. Hal-hal yang telah dirancang sebelumnya disusun dan dibuat menjadi

bentuk aplikasi yang sesuai dengan tujuannya. Dalam mengimplementasikan

rancangan yang telah dibuat, dibutuhkan perangkat keras dan perangkat lunak

untuk mengkoding aplikasi maupun menguji aplikasi.

4.3.1. Implementasi pada Perangkat Keras dan Perangkat Lunak

Perangkat keras yang digunakan oleh penulis untuk membangun

aplikasi adalah sebagai berikut

1. Komputer

Model : Toshiba Satellite Pro C640

Processor : Processor Intel i3 2.53 GHz

OS : Windows 64bit

RAM : 4 GB

HHD : 320 GB

Layar : 14 Inchi

http://haji.kemenag.go.id/v2/basisdata/xml/%22+query

111

2. Device Android

a. Device 1

Model/OS : Android One/Lolipop 5.1.1

RAM/ROM : 1GB/8GB

Layar : 4.5 inc, dengan kedalaman 240dpi.

b. Device 2

Model/OS : Samsung Galaxy Mini 2/ Jelly Bean 4.2

RAM/ROM : 512MB/4GB

Layar : 3.3 inc, dengan kedalaman 160dpi.

Sedangkan Perangkat lunak yang dibutuhkan untuk mengimplementasikan

aplikasi adalah :

1. Android Studio 1.1.0 : IDE yang digunakan untuk memudahkan

penulis untuk membangun aplikasi, khususnya aplikasi android.

2. Photoshop/Inkscape/Paint : Image editor yang digunakan penulis

untuk membuat, mengedit gambar yang diperlukan untuk aplikasi.

3. Genymotion : Emulator android yang digunakan penulis untuk menguji

coba aplikasi

4. Android SDK : tool API (Application Programming Interface) yang

diperlukan untuk mulai mengembangkan aplikasi pada platform

Android menggunakan bahasa pemrograman Java.

5. SQLite Browser : tool database untuk membuat dan mengedit

database SQLite.

112

4.3.2. Implementasi Antar Muka

1. Tampilan menu utama

Gambar 4.‎051 Tampilan Menu Utama

Keterangan Gambar : Tampilan yang ditampilkan saat membuka

aplikasi. Tampilan ini berisi menu-menu utama dari aplikasi diantaranya

menu penjelasan haji, menu persiapan haji, menu pelaksanaan haji, menu

doa-doa haji, menu peta lokasi, menu berita haji, menu video haji, menu

amalan haji, menu istilah haji dan menu cek keberangkatan haji.

2. Tampilan bahasan haji

Gambar 4.‎052 Tampilan Bahasan Haji

Keterangan Gambar : Tampilan ini merupakan tampilan pembahasan

tentang haji. menu ini tampil saat menu penjelasan haji dan umrah, amalan

haji, persiapan haji, pelaksanaan haji dipilih. Tampilan bisa digeser keatas

113

dan kebawah untuk melihat konten yang ada dibawahnya dan digeser ke

kanan ke kiri untuk melihat topik penjelasan berikutnya.

3. Tampilan doa haji

Gambar 4.‎053 Tampilan Doa Haji

Keterangan Gambar : Tampilan ini merupakan tampilan saat menu doa

haji dipilih. Menu ini terdiri dari bacaan doa dan terjemahannya. Tombol

play/pause pada sisi kanan atas dapat ditekan untuk memutar suara yang

akan membacakan do‟a yang sesuai.

4. Tampilan video haji

Gambar 4.‎054 Tampilan Video Haji

Keterangan Gambar : Tampilan ini merupakan tampilan saat menu

video haji dipilih. Aplikasi akan membuka link video dan membuka video

player untuk memainkan video yang sesuai dengan pilihan.

114

5. Tampilan list berita haji

Gambar 4.‎055 Tampilan List Berita Haji

Keterangan gambar : Tampilan ini merupakan tampilan berita haji

yang ditampilkan dalam bentuk list. Berita diambil secara online dari situs

http://www.haji.kemenag.go.id/v2/publikasi/berita/ pada tanggal 22 Mei

2015.

6. Tampilan berita haji

Gambar 4.‎056 Tampilan Berita Haji

Keterangan gambar : Tampilan ini merupakan tampilan berita haji

yang telah dipilih pada berita sebelumnya.

http://www.haji.kemenag.go.id/v2/publikasi/berita/

115

7. Tampilan cek keberangkatan

Gambar 4.‎057 Tampilan Cek Keberangkatan Haji

Keterangan gambar : Tampilan ini merupakan tampilan untuk

mengecek keberangkatan haji. Terdapat form inputan untuk memasukkan

nomor porsi haji yang kemudian digunakan untuk diproses pada alamat

http://haji.kemenag.go.id/v2/basisdata/xml/nomor_porsi. Setelah diproses

akan ditampilkan nomor porsi yang dimasukkan, nama, kabupaten,

provinsi, kuota provinsi, posisi pada kuota provinsi, dan perkiraan

keberangkatan pemilik nomor porsi.

4.3.3. Instalasi Aplikasi pada Perangkat Android

Implementasi dilakukan pada handset android. Hal yang

dibutuhkan pada tahap ini adalah :

1. Smartphone android dengan sistem operasi 4.1 (Jelly Bean) ke atas,

dalam hal ini penulis menggunakan perangkat android Android

One, Nexian Journey One dengan sistem operasi 5.1 (Lolipop),

dengan prosesor Dual-core 1.3GHz dan Samsung Galaxy Mini 2

dengan sistem operasi 4.2( JellyBean), dengan prosesor 1.2GHz.

2. File aplikasi dalam bentuk .apk

3. Kabel data android untuk mentransfer file aplikasi dari pc ke

handset android.

Untuk menginstall aplikasi di perangkat android, penulis

menghubungkan kabel data android ke PC dan mentransfer file apk


116

aplikasi. Besar file apk aplikasi ini adalah sebesar 35 MB. Setelah di

transfer dilakukan proses instalasi seperti layaknya menginstall aplikasi

lainnya. Setelah penginstallan, besar ukuran aplikasi menjadi sebesar

kurang lebih 44 MB tergantung dari jenis device yang digunakan.

4.3.4. Pengujian Aplikasi

Pada tahap ini, penulis melakukan pengujian pada aplikasi agar

penulis dapat mengecek aplikasi sudah berjalan dengan benar. Pengujian

dilakukan dengan dua metode yaitu metode whitebox dan blackbox.

Pengujian metode whitebox dilakukan untuk mengecek bahwa

sistem telah bebas dari kesalahan logika. Pengujian ini dilakukan pada

bagian aplikasi yang memiliki logika yang lebih rumit seperti berita haji,

cek keberangkatan haji.

Pengujian blackbox dilakukan untuk memperlihatkan bahwa semua

fungsi aplikasi telah berfungsi secara keseluruhan. Pengujian ini dilakukan

pada seluruh use case yang ada pada aplikasi.

a. Pengujian dengan WhiteBox

Pengujian whitebox pada pengujian ini dilakukan dengan metode

Basic Path. Pengujian dilakukan pada bagian berita haji dan cek

keberangkatan haji.

1. Pengujian pada Berita Haji

Flowgraph pada berita haji sebagai berikut:

1 : Mulai

2 : mengecek apakah ada koneksi.

3 : memilih antara 3 pilihan tabulator

4 : Jika pilih berita haji, tampil list berita haji

5 : Jika pilih pengumuman haji, tampil list pengumuman haji

6 : Jika pilih bookmark, tampil list bookmark

7 : memilih salah satu list berita haji, dan menampilkan berita haji

terpilih

8 : memilih salah satu list pengumuman haji, dan mengecek apakah

file sudah ada atau belum.

9 : men-download file karna file belum ada

117

10 : menampilkan file pengumuman haji terpilih

11 : memilih salah satu list berita haji, dan menampilkan berita haji

terpilih

12 : Selesai

1

2

12

3

4 5 6

7

11

8

10

9

R1

R2

R3

R4

Gambar ‎058 Flowgraph Berita Haji

Perhitungan Cyclomatic Complexity dari Flowgraph di atas

memiliki Region = 4.

a. Menghitung Cyclomatic Complexity dari Edge dan Node :

V(G) = (E-N)+2

V(G) = (14-12)+2

V(G) = 4

b. Menghitung Cyclomatic Complexity C dari P :

V(G) = P + 1 = 3 + 1

V(G) = 4

c. Independent Path pada Flowgraph :

Path 1 = 1-2-3-4-7-12

Path 2 = 1-2-3-5-8-10-12

Path 3 = 1-2-3-5-8-9-10-12

Path 4 = 1-2-3-6-11-12

118

d. Pengujian Test Case :

Tabel 4.28 Tabel Pengujian Test Case pada Berita Haji

Path Kondisi Hal yang

diharapkan

Hasil Uji

1 Memilih tab berita

haji dan memilih

berita haji

Menampilkan

berita haji

Sesuai, Alur

terlewati

2 Memilih tab

pengumuman haji dan

memilih

pengumuman haji

namun file sudah ada

Muncul

pengumuman

haji

Sesuai, alur

terlewati

3 Memilih tab

pengumuman haji dan

memilih

pengumuman haji

namun file belum ada

Muncul hasil

dialog

download

(node 9)

Sesuai, alur

terlewati

119

4 Memilih tab

bookmark dan

memilih bookmark

Menampilkan

halaman

bookmark

Sesuai, Alur

terlewati

Berdasarkan tabel 4.28, hasil pengujian pada berita haji sesuai

dengan yang diharapkan dan semua alur pada flowgraph berhasil

dilewati. Hal ini menunjukkan bahwa sudah tidak ada kesalahan

logika pada berita haji.

2. Pengujian pada Cek Keberangkatan Haji

Flowgraph pada Cek Keberangkatan Haji adalah sebagai berikut:

1 : Mulai

2 : memasukkan nomor porsi pada form,

3 : apabila ada koneksi akan menampilkan hasil, apabila tidak maka

akan ada tampilan eror dan pilihan untuk coba lagi

4 : ada koneksi, apakah ada hasil

5 : memilih coba lagi.

6 : hasil tidak ditemukan

120

7 : hasil ditemukan

8 : selesai

2

3

4

5

76

8

1

R1

R2

R3

R4

Gambar ‎059 Flowgraph Cek Keberangkatan Haji

Perhitungan Cyclomatic Complexity dari Flowgraph di atas

memiliki Region = 7.

a. Menghitung Cyclomatic Complexity dari Edge dan Node :

V(G) = (E-N)+2

V(G) = (10-8)+2

V(G) = 4

b. Menghitung Cyclomatic Complexity C dari P :

V(G) = P + 1 = 3 + 1

V(G) = 4

c. Independent Path pada Flowgraph :

Path 1 = 1-2-3-4-6-8

Path 2 = 1-2-3-5-4-6-8

Path 3 = 1-2-3-4-7-8

Path 4 = 1-2-5-4-7-8

121

d. Pengujian Test Case

Tabel 4.29 Tabel Pengujian Test Case pada Cek Keberangkatan Haji

Path Kondisi Hal yang

diharapkan

Hasil Uji

1 Memasukkan nomor

porsi yang tidak ada

Muncul

tulisan bahwa

hasil yang

dicari tidak

ditemukan

Sesuai, Alur

terlewati

2 Koneksi habis dan

tidak mencoba lagi

Muncul

tulisan untuk

mencoba lagi

dan hasil tidak

muncul

Sesuai, alur

terlewati

3 Memasukkan nomer

porsi yang ada

Muncul hasil

nomer porsi

Sesuai, alur

terlewati

122

4 Koneksi habis dan

mencoba lagi

Muncul

tulisan untuk

mencoba lagi,

kemudian

hasil muncul.

Sesuai, Alur

terlewati

Berdasarkan tabel 4.28, hasil pengujian pada cek keberangkatan

haji sesuai dengan yang diharapkan dan semua alur pada flowgraph

berhasil dilewati. Hal ini menunjukkan bahwa sudah tidak ada

kesalahan logika pada cek keberangkatan haji.

b. Pengujian dengan Black Box

Pada tahap terakhir, penulis melakukan testing aplikasi dengan

menggunakan blackbox. Pengujian blackbox ini dilakukan untuk

memperlihatkan bahwa semua fungsi aplikasi telah berfungsi secara

keseluruhan. Pengujian dilakukan dengan perangkat android yang

bersistem operasi Lolipop.

123

Tabel. 4.30. Hasil Pengujian Aplikasi dengan Metode Blackbox

No Nama Use

Case

Kegiatan Hasil yang

diharapkan

Hasil

1 Pengenalan

Haji dan

Umrah

Memilih menu

pengenalan haji

dan umrah

Menampilkan

menu pengenalan

haji dan umrah

Sesuai

2 Pengenalan

Haji

Memilih menu

pengenalan haji

Menampilkan

menu pada

pengenalan haji

Sesuai

3 Detail

pengenalan haji

Memilih menu

pada pengenalan

haji

Menampilkan

detail dari menu

yang dipilih pada

pengenalan haji

Sesuai

4 Pengenalan

Umrah

Memilih menu

pengenalan

Menampilkan

menu pada

Sesuai

124

umrah pengenalan

umrah

5 Detail

Pengenalan

Umrah

Memilih menu

pada pengenalan

umrah

Menampilkan

detail dari menu

yang dipilih pada

pengenalan

umrah

Sesuai

6 Hikmah Haji

dan Umrah

Memilih menu

hikmah haji dan

umrah

Menampilkan

menu pada

hikmah haji dan

umrah

Sesuai

7 Detail hikmah

haji dan umrah

Memilih menu

pada hikmah haji

dan umrah

Menampilkan

detail dari menu

yang dipilih pada

hikmah haji dan

umrah

Sesuai

125

8 Persiapan Haji Memilih menu

persiapan haji

Menampilkan

menu pada

persiapan haji

Sesuai

9 Detail

persiapan haji

Memilih menu

pada persiapan

haji

Menampilkan

detail dari menu

yang dipilih pada

persiapan haji

Sesuai

10 Pelaksanaan

Haji

Memilih menu

pelaksanaan haji

Menampilkan

menu pada

pelaksanaan haji

Sesuai

126

11 Detail

Pelaksanaan

Haji

Memilih menu

pada

pelaksanakan haji

detail dari menu

yang dipilih pada

pelaksanaan haji

Sesuai

12 Do‟a – Do‟a

haji dan Umrah

Memilih menu

do‟a – do‟a haji

dan umrah

Menampilkan

menu pada do‟a

– do‟a haji dan

umrah

Sesuai

13 Detail doa haji

dan umrah

Memilih menu

pada doa-doa haji

dan umrah

Menampilkan

menu yang

dipilih pada doa-

doa haji dan

umrah

Sesuai

127

14 Berita Haji Memilih menu

berita haji

Menampilkan list

berita, list

pengumuman,

dan list berita

yang telah

disimpan dengan

tabulator

Sesuai

15 Detail Berita

Haji

Memilih tab

berita haji dan

salah satu berita

pada list

Menampilkan

berita haji yang

dipilih

Sesuai

16 Detail

Pengumuman

Haji

Memilih tab

pengumuman haji

dan salah satu

pengumuman

pada list

Menampilkan

pengumuman

haji yang dipilih

Sesuai

128

17 Peta Lokasi Memilih menu

peta lokasi

Menampilkan

menu pada peta

lokasi

Sesuai

18 Detail Peta

Lokasi

Memilih menu

pada peta lokasi

Menampilkan

detail dari peta

lokasi yang

dipilih beserta

mapnya.

Sesuai

19 Video Haji Memilih menu

video haji

Menampilkan

video tentang

haji yang dipilih

Sesuai

129

20 Amalan –

Amalan Haji

Memilih menu

amalan haji

Menampilkan

menu pada

amalan haji

Sesuai

21 Detail Amalan

Haji

Memilih menu

pada amalan haji

Menampilkan

detail dari menu

yang dipilih pada

amalan haji

Sesuai

22 Istilah pada

Haji

Memilih menu

istilah haji

Menampilkan

istilah-istilah

pada haji

Sesuai

130

d. Pengujian pada perangkat Android

Pada pengujian ini, penulis melakukan pengujian pada perangkat android

dengan versi sistem operasi yang berbeda. Pengujian dilakukan untuk melihat

kompabilitas aplikasi terhadap perangkat android. Pengujian dilakukan pada

android versi 4.1 (JellyBean) dan versi 5.1 (Lolipop).

23 Detail istilah

haji

Memilih istilah

haji

Menampilkan

pengertian istilah

yang dipilih

Sesuai

24 Cek

Keberangkatan

Haji

Memilih menu

cek

keberangkatan

Menampilkan

inputan untuk

memasukkan

nomor porsi dan

hasil

pencariannya

Sesuai

131

1. Hasil Pengujian pada Android versi 4.1

Gambar 4.‎060 Tampilan aplikasi pada android v.4.1.

Keterangan Gambar : gambar diatas merupakan aplikasi pada saat diluncurkan

pada android versi 4.1. gambar tersebut menunjukkan bahwa aplikasi dapat

diinstall pada perangkat tersebut dan dapat dijalankan

2. Hasil Pengujian pada Android versi 5.1

Gambar 4.‎061 Tampilan aplikasi pada android v.5.1

Keterangan Gambar : gambar diatas merupakan proses instalasi aplikasi pada

android versi 5.1. gambar tersebut menunjukkan bahwa aplikasi dapat

diinstall pada perangkat tersebut dan dapat dijalankan.

132

BAB V

PENUTUP

5.1. Kesimpulan

Berdasarkan pembahasan yang telah dijelaskan, kesimpulan yang dapat

penulis ambil dari penelitian ini adalah :

1) Aplikasi ini dibangun dengan Metode RAD dan menggunakan IDE

Android Studio 1.2.1 menggunakan bahasa pemograman java. Aplikasi

ini hanya dapat dijalankan pada smartphone android versi 4.1 ke atas.

2) Aplikasi ini dapat memudahkan para jamaah haji mendapatkan

informasi tentang Haji dan Umrah seperti berita, pengumuman, serta

jadwal keberangkatan jamaah. Aplikasi ini juga menjelaskan tata cara

melaksanakan haji dan umrah (Selengkapnya dapat dilihat pada tabel

4.28). Aplikasi ini merupakan aplikasi mobile, sehingga dapat dipakai

dimana saja dan kapan saja melalui smartphone berbasis android.

5.2. Saran

Aplikasi yang dibangun ini tentunya masih memiliki kekurangan, oleh

karena itu ada beberapa hal yang diharapkan dapat dikembangkan agar aplikasi

menjadi lebih baik, di antaranya :

1) Aplikasi agar dapat dijalankan pada platform lain, misalnya iOS,

Windows phone, dan Blackberry.

2) Terdapat sistem notifikasi berita secara real-time agar pengguna dapat

mengetahui berita secara langsung tanpa harus mengeceknya terlebih

dahulu.

3) Tambahan penjelasan tentang tata cara pelaksanaan haji yang lebih

lengkap dan fitur yang lebih lengkap seperi cara mendaftar haji,

pembayaran haji, dan lain-lain.

133

DAFTAR PUSTAKA

A.S, Rosa, Shalahuddin, M, 2011. Modul Pembelajaran Rekayasa Perangkat

Lunak (Terstruktur dan Berorientasi Objek). Bandung : Modula

Al-Maliki, Sayyid Muhammad bin Alwi, 2012. Labbaik Allahumma labbaik :

panduan lengkap menuju haji mabrur, Bandung : Pustaka Hidayah

Abdurrachman Rochimi, H.M. 2011. Segala tentang Haji & Umrah, Jakarta :

ERLANGGA

Binanto, Iwan, 2010, Multimedia Digital Dasar Teori + Pengembangannya.

Yogyakarta : ANDI

H, Nazrudin Safaat. 2012. ANDROID : Pemograman Aplikasi Mobile

Smartphone dan Tablet PC Berbasis Android. Bandung : Informatika

Hermawan S, Stephanus, 2011. Mudah Membuat Aplikasi Android. Yogyakarta :

ANDI

Hoew, Shay. 2014 . Learn to Code HTML & CSS Develop & Style Websites.

Collingwood : New Riders

Jackson, Wallace, 2011. Android Apps for Absolute Beginners. APRESS

JULIUS St, M., 2007. Panduan lengkap dan praktis haji tamattu'. Malang :

Bayumedia

Kementerian Agama RI. 2014. Tuntunan Manasik Haji dan Umrah. Direktorat

Jendal Penyelenggaraan Haji dan Umrah : Jakarta

Kendall, Kenneth E dan Julie E. Kendall, 2010, System Analysis and Design,

Pearson Education. New Jersey

Lee, Wei-Meng, 2011. Beginning Androidtm

Application Development.

Indianapolis : Wiley Publishing, Inc

Lloyd, Ian. 2011. Build Your Own Web Site The Right Way Using HTML & CSS

3rd

Edition. SitePoint.Ince

Multimedia, Satria, Apa itu Multimedia,

http://www.satriamultimedia.com/artikel_apa_itu_multimedia.html ,

diakses tanggal 28 November 2014

Roger S. Pressman, Software‎Engineering‎A‎Practicioner’s‎Approach;‎2010

134

Roger S. Pressman, 2010. Rekayasa Perangkat Lunak Pendekatan Praktisi (Buku

Satu). . Yogyakarta : ANDI

Vaughan, Tay, 2010. Multimedia Making it Work : Eight Edition.

135

LAMPIRAN

Kuisioner Penelitian

Nama :

Usia :

Berilah Tanda () pada pertanyaan di bawah ini

1. Apakah anda telah memahami tata cara manasik haji atau umrah yang

benar?

( ) Paham

( ) Belum Paham

2. Media apa yang anda jadikan sebagai media pengetahuan tentang manasik

Haji dan Umrah? (boleh lebih dari satu)

( ) Buku panduan

( ) Kaset/VCD

( ) Perangkat Mobile

( ) Yang lain, ………………………………

3. Dengan media saat ini, apakah sudah cukup efektif untuk para calon jama‟ah

haji supaya mengetahui tentang tata cata haji dan umrah?

( ) Sudah Cukup

( ) Kurang Cukup

( ) Tidak Cukup

4. Materi apa yang anda anggap paling sulit dalam mempelajari manasik Haji

dan Umrah?

( ) Rukun dan syarat Haji atau Umrah

( ) Rukun dan wajib haji atau umrah

( ) Sunnah-sunnah haji atau umrah

( ) Bacaan dan do‟a haji atau umrah

( ) Amalan – amalan haji atau umrah

5. Apakah yang menyebabkan anda merasa sulit dalam mempelajari manasik

haji dan umrah ?

( ) Terbatasnya waktu

( ) Buku panduan agak sulit dimengerti

136

( ) Cepat Bosan

6. Apakah anda setuju atau merasa perlu dibuat aplikasi pembelajaran haji dan

umrah yang dapat membantu dalam memperlajari dan mendapatkan

informasi tentang haji?

( ) Setuju

( ) Tidak Setuju

7. Fasilitas apa yang anda inginkan dalam aplikasi pembelajaran haji dan umrah

berbasis smartphone android? (Boleh memilih lebih dari satu)

( ) Penjelasan haji dan umrah

( ) urutan pelaksanaan haji dan umrah

( ) bacaan dan do‟a haji dan umrah

( ) Peta lokasi-lokasi haji dan umrah

( ) Berita haji dan umrah terkini (terupdate online)

( ) Video haji dan umrah

( ) lainnya, ……………………….

Hasil Kuisioner

1. Apakah anda telah memahami tata cara manasik haji atau umrah yang benar?

Jawaban Jumlah Jawaban Persentase

Belum Paham 30 60%

Paham 20 20%

Jumlah 50 100%

137

2. Media apa yang anda jadikan sebagai media pengetahuan tentang manasik Haji

dan Umrah? (boleh lebih dari satu)


Buku panduan 42 84%

Kaset 16 32%

Perangkat Mobile 6 12%

Lainnya 3 6%

3. Apakah sudah cukup efektif untuk para calon jama‟ah haji supaya mengetahui

tentang tata cata haji dan umrah?


Sudah 14 28%

Kurang 28 56%

Belum 8 16%

138

4. Materi apa yang anda anggap paling sulit dalam mempelajari manasik Haji dan

Umrah?


Rukun dan syarat Haji atau Umrah 16 32%

Rukun dan wajib haji atau umrah 9 18%

Sunnah-sunnah haji atau umrah 5 10%

Bacaan dan do‟a haji atau umrah 31 62%

Amalan haji atau umrah 13 26%

Yang lainnya 1 2%

5. Apakah yang menyebabkan anda merasa sulit dalam mempelajari manasik haji

dan umrah ?


139

Terbatasnya waktu 29 58 %

Buku panduan agak sulit dimengerti 14 28%

Cepat Bosan 2 4%

Yang lainnya, … 5 16 %

Jumlah 50 100%

6. Apakah anda setuju atau merasa perlu dibuat aplikasi pembelajaran haji dan

umrah yang efektif dengan perangkat smartphone android


Setuju 50 100%

Tidak Setuju 0 0%

Jumlah 50 100%

7. Fasilitas apa yang anda inginkan dalam aplikasi pembelajaran haji dan umrah

berbasis smartphone android? (Boleh memilih lebih dari satu)

140


Penjelasan haji dan umrah 28 56%

Urutan pelaksanaan haji dan umrah 22 44%

Bacaan dan do‟a haji dan umrah 21 42%

Peta lokasi-lokasi haji dan umrah 14 32%

Berita haji dan umrah terkini (terupdate online) 16 30%

Video haji dan umrah 15 28%

Yang lainnya, …. 1 2%

141

Source Code

CeKBerangkatActivity.java

public class CekBerangkatActivity extends ActionBarActivity {

Toolbar toolbar;

EditText editCari;

TextView hasilCari;

Button butCari;

String query;

InputMethodManager imm;

boolean koneksi;

ProgressDialog progressDialog = null;

@Override

protected void onCreate(Bundle savedInstanceState) {

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP)

{

getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);

}

getWindow().requestFeature(Window.FEATURE_ACTION_BAR_OVERLAY);

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_cek_berangkat);

toolbar = (Toolbar) findViewById(R.id.app_bar);

setSupportActionBar(toolbar);

getSupportActionBar().setDisplayHomeAsUpEnabled(true);

getSupportActionBar().setTitle("Cek Keberangkatan");

editCari = (EditText) findViewById(R.id.edit_cari);

hasilCari = (TextView) findViewById(R.id.hasil_cari);

imm = (InputMethodManager) getSystemService(

Context.INPUT_METHOD_SERVICE);

koneksi = true;

editCari.setOnEditorActionListener(new

TextView.OnEditorActionListener() {

@Override

public boolean onEditorAction(TextView v, int

actionId, KeyEvent event) {

if (actionId == EditorInfo.IME_ACTION_SEARCH) {

query = editCari.getText().toString();

ConnectivityManager check =

(ConnectivityManager)

getSystemService(CONNECTIVITY_SERVICE);

if (check != null) {

NetworkInfo[] info =

check.getAllNetworkInfo();

if (info != null)

for (int i = 0; i < info.length; i++)

if (info[i].getState() ==

NetworkInfo.State.CONNECTED) {

new

cariBerangkat().execute(query);

142

imm.hideSoftInputFromWindow(editCari.getWindowToken(), 0);

}

} else {

Toast.makeText(CekBerangkatActivity.this,

"not conencted to internet",

Toast.LENGTH_SHORT).show();

}

return true;

}

return false;

}

});

}

private class cariBerangkat extends AsyncTask<String, String,

String> {

@Override

protected void onPreExecute() {

super.onPreExecute();

if (progressDialog == null) {

progressDialog = new

ProgressDialog(CekBerangkatActivity.this);

progressDialog.setMessage("Mohon Tunggu....");

progressDialog.setIndeterminate(true);

progressDialog.setProgressStyle(ProgressDialog.STYLE_SPINNER);

progressDialog.setCancelable(false);

progressDialog.show();

}

}

@Override

protected String doInBackground(String... params) {

String isi = "";

String link =

"http://haji.kemenag.go.id/v2/basisdata/xml/" + query;

try {

URL url = new URL(link);

URLConnection conn = (URLConnection)

url.openConnection();

conn.setReadTimeout(10000);

conn.setConnectTimeout(15000);

conn.connect();

Log.e("URL : ", link);

Document doc;

doc =

Jsoup.connect("http://haji.kemenag.go.id/v2/basisdata/xml/" +

query).get();

// Get document (HTML page) title

Element e = doc.select("div.view-content >

div.views-row.views-row*").first();

if (e == null) {

isi = "Nomor Porsi " + query + " tidak

ditemukan";

} else {

isi = e.html();

143

koneksi = true;

}

Log.e("ISI : ", isi);

} catch (IOException e) {

e.printStackTrace();

koneksi = false;

}

return isi;

}

@Override

protected void onPostExecute(String s) {

super.onPostExecute(s);

progressDialog.dismiss();

progressDialog = null;

if (koneksi == false) {

cobaLagi();

} else {

Typeface sans =

Typeface.createFromAsset(getAssets(), "fonts/opensans.ttf");

hasilCari.setTypeface(sans);

hasilCari.setText(Html.fromHtml(s));

koneksi = true;

}

}

}

public void cobaLagi() {

SnackbarManager.show(

Snackbar.with(getApplicationContext()) // context

.text("Koneksi Habis") // text to display

.actionLabel("Coba lagi") // action button

label

.duration(Snackbar.SnackbarDuration.LENGTH

_INDEFINITE)

.actionListener(new ActionClickListener()

{

@Override

public void onActionClicked(Snackbar

snackbar) {

new cariBerangkat().execute();

koneksi = true;

SnackbarManager.dismiss();

}

}) // action button's ActionClickListener

, this); // activity where it is displayed

}

DoaActivity.java

public class DoaActivity extends ActionBarActivity {

public boolean MP = false;

Toolbar toolbar;

TextView textView;

144

ImageView imageView;

ImageView button;

MediaPlayer mediaPlayer;

TextView textTitle;

int size;

int current;

int menu1;

int menu2;

MyDatabaseAdapter dbAdapter;

Doa doa;

@Override



setContentView(R.layout.activity_doa2);

toolbar = (Toolbar) findViewById(R.id.app_bar);



getSupportActionBar().setHomeAsUpIndicator(R.drawable.abc_ic_clear

_mtrl_alpha);

getSupportActionBar().setTitle("");

Bundle b = getIntent().getExtras();

current = b.getInt("pos");

size = b.getInt("size");

menu1 = b.getInt("menu1");


textView = (TextView) findViewById(R.id.text_doa_a);

imageView = (ImageView) findViewById(R.id.image_doa_a);

button = (ImageView) findViewById(R.id.button_play_a);

textTitle = (TextView) findViewById(R.id.textTitle);

toolbar.setTitle(null);

dbAdapter = new

MyDatabaseAdapter(getApplicationContext());

try {

dbAdapter.open();

} catch (SQLException e) {


}

String query = "" + menu1 + "" + menu2 + "" + current;

Log.i("URL", query);

doa = dbAdapter.getDoa(query);

//IMAGE

String ImageUri = doa.getDrawable();

int ImageResource = getResources().getIdentifier(ImageUri,

"drawable", getPackageName());

imageView.setImageResource(ImageResource);

//TEXT

145

textView.setText(doa.getTerjemah());

textTitle.setText(doa.getKet());

mediaPlayer = new MediaPlayer();

MP = false;

button.setImageResource(R.drawable.ic_putar);

button.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

if (mediaPlayer.isPlaying()) {

if (mediaPlayer != null) {

playerStop();

}

} else {

// Resume song

if (mediaPlayer != null) {

playerPlay();

}

}

}

});

}

@Override

public void onBackPressed() {

if (MP)

playerStop();

else

finish();

}

public void playerStop() {

mediaPlayer.pause();

MP = false;

button.setImageResource(R.drawable.ic_play_arrow_white_48dp);

}

public void playerPlay() {

try {

Uri mp3 = Uri.parse("android.resource://" +

getPackageName() + "/raw/" + doa.getSuara());

mediaPlayer =

MediaPlayer.create(getApplicationContext(), mp3);

mediaPlayer.start();

MP = true;

button.setImageResource(R.drawable.ic_pause_white_48dp);

} catch (Exception e) {


}

}

}

146

BeritaActivity.java

public class BeritaActivity extends ActionBarActivity {

Toolbar toolbar;

ViewPager viewPager;

BeritaPagerAdapter beritaPagerAdapter;

SlidingTabLayout slidingTabLayout;

CharSequence titles[] = {"Berita Haji", "Pengumuman Haji",

"Bookmark"};

int numTabs = 3;

@Override



setContentView(R.layout.activity_berita);

toolbar = (Toolbar)findViewById(R.id.app_bar);


getSupportActionBar().setTitle("Berita Haji");

beritaPagerAdapter = new

BeritaPagerAdapter(getSupportFragmentManager(), titles, numTabs);

viewPager = (ViewPager) findViewById(R.id.berita_pager);

viewPager.setAdapter(beritaPagerAdapter);

slidingTabLayout = (SlidingTabLayout)

findViewById(R.id.tabs);

slidingTabLayout.setDistributeEvenly(true);

slidingTabLayout.setViewPager(viewPager);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

getMenuInflater().inflate(R.menu.menu_berita, menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

int id = item.getItemId();

//noinspection SimplifiableIfStatement

if (id == R.id.action_settings) {

return true;

}

return super.onOptionsItemSelected(item);

}

public class BeritaPagerAdapter extends FragmentPagerAdapter {

CharSequence titles[];

int NUMBER_OF_TABS;

147

public BeritaPagerAdapter(FragmentManager fm, CharSequence

mTitles[], int mNUMBER_OF_TABS) {

super(fm);

this.titles = mTitles;

this.NUMBER_OF_TABS = mNUMBER_OF_TABS;

}

@Override

public android.support.v4.app.Fragment getItem(int

position) {

String text = " ";

switch (position) {

case 0:

text =

"http://haji.kemenag.go.id/v2/publikasi/berita/?page=";

return BeritaFragment.getInstance(position, text);

case 1:

text =

"http://haji.kemenag.go.id/v2/publikasi/pengumuman";

return PengumumanFragment.getInstance(position,

text);

case 2:

text = "";

return BookmarkFragment.getInstance(position,

text);

}

return BeritaFragment.getInstance(position, text);

}

@Override

public CharSequence getPageTitle(int position) {

return titles[position];

}

@Override

public int getCount() {

return NUMBER_OF_TABS;

}

}

}

BeritaFragment.java

public class BeritaFragment extends Fragment implements

ClickListener {

private static final String ARG_PARAM1 = "param1";

private static final String URL_STRING = "param2";

// TODO: Rename and change types of parameters

private int mParam1;

private String mParam2;

148

boolean koneksi = true;

////////////////////////////////////////

RecyclerView recyclerView;

BeritaAdapter beritaAdapter;

List<MenuBerita> beritaList;

LinearLayoutManager mLayoutManager;

MenuBerita menuBerita;

Button button;

String title = "";

String pubDate = "";

String link = "";

String description = "";

String image = "";

int webpage = 0;

public static BeritaFragment getInstance(int param1, String

text) {

BeritaFragment fragment = new BeritaFragment();

Bundle args = new Bundle();

args.putInt(ARG_PARAM1, param1);

args.putString(URL_STRING, text);

fragment.setArguments(args);

return fragment;

}

public BeritaFragment() {

// Required empty public constructor

}

@Override

public void onCreate(Bundle savedInstanceState) {


}

@Override

public View onCreateView(LayoutInflater inflater, ViewGroup

container,

Bundle savedInstanceState) {

View layout = inflater.inflate(R.layout.fragment_berita,

container, false);

mParam1 = getArguments().getInt(ARG_PARAM1);

mParam2 = getArguments().getString(URL_STRING);

koneksi = true;

beritaList = new ArrayList<>();

recyclerView = (RecyclerView)

layout.findViewById(R.id.recycler_berita);

button = (Button) layout.findViewById(R.id.dummybut);

mLayoutManager = new LinearLayoutManager(getActivity());

recyclerView.setLayoutManager(mLayoutManager);

new parseBerita().execute();

149

beritaAdapter = new BeritaAdapter(getActivity(),

beritaList);

beritaAdapter.setOnClickListener(this);

recyclerView.setAdapter(beritaAdapter);

button.setOnClickListener(new View.OnClickListener() {

@Override


webpage = webpage + 1;


beritaList.add(menuBerita);

beritaAdapter.notifyDataSetChanged();

}

});

return layout;

}

@Override

public void itemClicked(View view, int position) {

ImageView newsImage = (ImageView)

view.findViewById(R.id.news_image);

ActivityOptionsCompat activityOptionsCompat =

ActivityOptionsCompat.makeSceneTransitionAnimation(getActivity(),

newsImage, "image_bar");

Intent i = new Intent(getActivity(),

BeritaDetailActivity.class);

i.putExtra("title", beritaList.get(position).getTitle());

i.putExtra("date", beritaList.get(position).getPubDate());

i.putExtra("link", beritaList.get(position).getLink());

i.putExtra("image", beritaList.get(position).getImage());

getActivity().startActivity(i,

activityOptionsCompat.toBundle());

}

public class parseBerita extends AsyncTask<String, Void,

List<MenuBerita>> {

@Override

protected List<MenuBerita> doInBackground(String...

params) {

String address = mParam2 + "" + webpage;

try {

URL url = new URL(address);

URLConnection conn = (URLConnection)

url.openConnection();

conn.setReadTimeout(10000);

conn.setConnectTimeout(15000);

conn.connect();

int count = 0;

Document document;

document = Jsoup.connect(address).get();

boolean done = false;

150

Elements main = document.select("div.view-content

> div.views-row.views-row*");

for (Element e : main) {

Elements titleNews = e.select("div >

div.header.article-header h2 a");

Elements pubDateNews = e.select("div >

div.footer.submitted > span.time.pubdate > span");

Elements desc = e.select("div >

div[class=node-content] > div[class=section field field-name-body

field-type-text-with-summary field-label-hidden] >

div[class=field-items] > div[class=field-item odd] > p");

Elements img = e.select("div > div[class=node-

content] > div[class=section field field-name-field-image field-

type-image field-label-hidden] > div[class=field-items] >

div[class=field-item odd]");


pubDate = pubDateNews.text();

description = desc.text().substring(0, 50) +

"(...)";

link = "http://haji.kemenag.go.id" +

titleNews.attr("href");


menuBerita = new MenuBerita(title, link,

description, pubDate, image);

beritaList.add(menuBerita);

koneksi = true;

}

} catch (IOException e) {

Log.e("APP PARSER", "GA ADA YG NAMBAH");

koneksi = false;

}

return beritaList;

}

@Override

protected void onPostExecute(List<MenuBerita> result) {

if (koneksi == false) {

cobaLagi();

} else {

beritaAdapter.notifyDataSetChanged();

koneksi = true;

}

}

}

public void cobaLagi() {

final Dialog dialog = new Dialog(getActivity());

dialog.setContentView(R.layout.dialog_koneksi);

//

Button buttonOK = (Button)

dialog.findViewById(R.id.but_ok);

151

Button buttonCancel = (Button)

dialog.findViewById(R.id.but_cancel);

dialog.show();

buttonOK.setOnClickListener(new View.OnClickListener() {

@Override



koneksi = true;

dialog.dismiss();

}

});

buttonCancel.setOnClickListener(new View.OnClickListener()

{

@Override


koneksi = true;

dialog.dismiss();

}

});

}

}

DetailActivity.java

public class DetailActivity extends ActionBarActivity {

int size;

int current;

int menu1;

int menu2;

String title;

Toolbar toolbar;

ViewPager myPager;

DetailTextPagerAdapter adapter;

String file;

MyDatabaseAdapter dbAdapter;

Content content;

@Override

public void onConfigurationChanged(Configuration newConfig) {

super.onConfigurationChanged(newConfig);

}

@Override


getWindow().requestFeature(Window.FEATURE_CONTENT_TRANSITIONS);

getWindow().requestFeature(Window.FEATURE_ACTIVITY_TRANSITIONS);


setContentView(R.layout.activity_detail_text_pager);

toolbar = (Toolbar) findViewById(R.id.toolbar);



152

Bundle b = getIntent().getExtras();

current = b.getInt("pos");

size = b.getInt("size");



title = b.getString("title");

adapter = new DetailTextPagerAdapter(this, size);

myPager = (ViewPager)

findViewById(R.id.detailTextViewPager);

myPager.setAdapter(adapter);

myPager.setCurrentItem(current);

}

@Override

public boolean onCreateOptionsMenu(Menu menu) {

// Inflate the menu; this adds items to the action bar if

it is present.

getMenuInflater().inflate(R.menu.menu_detail_text_pager,

menu);

return true;

}

@Override

public boolean onOptionsItemSelected(MenuItem item) {

// Handle action bar item clicks here. The action bar will

// automatically handle clicks on the Home/Up button, so

long

// as you specify a parent activity in

AndroidManifest.xml.

int id = item.getItemId();

//noinspection SimplifiableIfStatement

if (id == R.id.action_next) {

if (current <= size) {

current = current + 1;


}

return true;

}

if (id == R.id.action_prev) {

if (0 <= current) {

current = current - 1;


}

return true;

}

return super.onOptionsItemSelected(item);

}

public class DetailTextPagerAdapter extends PagerAdapter {

int size;

Activity activity;

View view;

TextView titleBar;

TextView subTitleBar;

153

WebView webView;

TextView detailTitle;

ImageView imageBar;

public DetailTextPagerAdapter(DetailActivity

detailTextPagerActivity, int noofsize) {

// TODO Auto-generated constructor stub

size = noofsize;

activity = detailTextPagerActivity;

}

@Override

public int getCount() {

return size;

}

@Override

public Object instantiateItem(View container, int

position) {

LayoutInflater inflater = (LayoutInflater)

activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

view = inflater.inflate(R.layout.detail_text_pager,

null);

// titleBar = (TextView) findViewById(R.id.title_bar);

// subTitleBar = (TextView)

findViewById(R.id.subtitle_bar);

detailTitle = (TextView)

view.findViewById(R.id.detail_title);

webView = (WebView)

view.findViewById(R.id.detail_webPager);

imageBar = (ImageView)

view.findViewById(R.id.card_view);

dbAdapter = new

MyDatabaseAdapter(getApplicationContext());

try {

dbAdapter.open();

} catch (SQLException e) {


}

String url = "" + menu1 + "" + menu2 + "" + position;

int pagenumberTxt = position + 1;

Content content = dbAdapter.getContent(url);

Log.i("URL", url);

// Toast.makeText(getApplicationContext(), "ID = "+url,

Toast.LENGTH_SHORT).show();

file = content.getFile();

getSupportActionBar().setTitle("");

// titleBar.setText(title);

//

subTitleBar.setText(content.getKet()+"("+pagenumberTxt+" of

"+size+")");

154

detailTitle.setText(content.getKet());

String ImageUri = content.getImage();

int ImageResource =

getResources().getIdentifier(ImageUri, "drawable",

getPackageName());

imageBar.setImageResource(ImageResource);

File filea = new File(file);

webView.getSettings().setJavaScriptEnabled(true);

webView.getSettings().setAllowFileAccess(true);

webView.getSettings().setAllowContentAccess(true);

webView.getSettings().getAllowContentAccess();

webView.getSettings().getAllowFileAccess();

webView.getSettings().getJavaScriptEnabled();

webView.loadUrl(file);

((ViewPager) container).addView(view, 0);

dbAdapter.close();

return view;

}

@Override

public void destroyItem(View arg0, int arg1, Object arg2)

{

((ViewPager) arg0).removeView((View) arg2);

}

@Override

public boolean isViewFromObject(View view, Object object)

{

return view == ((View) object);

}

@Override

public Parcelable saveState() {

return null;

}

}

}

Rancang Bangun Aplikasi Pembelajaran Haji dan Umrah...

Documents

Transcript of Rancang Bangun Aplikasi Pembelajaran Haji dan Umrah...