perancangan dan implementasi mobile application...

134
1 PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION PEMBELAJARAN HAJI DAN UMRAH BERBASIS MULTIMEDIA (Studi Kasus : PT. Arminareka Perdana) Oleh : ABDUR RAHMAN 104091002854 PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS SAINS DAN TEKNOLOGI UIN SYARIF HIDAYATULLAH JAKARTA 2011 M / 1432 H

Upload: doxuyen

Post on 08-Apr-2019

224 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

1

PERANCANGAN DAN IMPLEMENTASI MOBILE

APPLICATION PEMBELAJARAN HAJI DAN UMRAH

BERBASIS MULTIMEDIA

(Studi Kasus : PT. Arminareka Perdana)

Oleh :

ABDUR RAHMAN

104091002854

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UIN SYARIF HIDAYATULLAH

JAKARTA

2011 M / 1432 H

Page 2: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

2

PERANCANGAN DAN IMPLEMENTASI MOBILE

APPLICATION PEMBELAJARAN HAJI DAN UMRAH

BERBASIS MULTIMEDIA

(Studi Kasus : PT. Arminareka Perdana)

Skripsi

Sebagai Salah Satu Syarat untuk Memperoleh Gelar Sarjana Komputer

Fakultas Sains dan Teknologi

Universitas Islam Negeri Syarif Hidayatullah Jakarta

Oleh :

Abdur Rahman

104091002854

PROGRAM STUDI TEKNIK INFORMATIKA

FAKULTAS SAINS DAN TEKNOLOGI

UIN SYARIF HIDAYATULLAH

JAKARTA

2011 M / 1432 H

Page 3: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

3

Page 4: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

4

ABSTRAK

ABDUR RAHMAN, Perancangan dan implementasi Mobile Application

Pembelajaran Haji dan Umrah berbasis Multimedia. Di bawah bimbingan YUSUF

DURACHMAN dan VIVA ARIFIN.

Perkembangan teknologi menjadikan handphone sebagai alat multimedia

multifungsi dilengkapi dengan fitur-fitur yang canggih sehingga lebih fungsional.

Fitur flashlite dapat dijadikan media penyampaian 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 lutheryang 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,

Adobe 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.

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

umrah, Flashlite, Multimedia

xvii + 120 Halaman; 25 Gambar; 7 Tabel; 7 Lampiran

Daftar Pustaka : 40 (2002-2010)

Page 5: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

5

KATA PENGANTAR

Assalamualaikum wr.wb.

Alangkah nikmat dan indahnya kehidupan ini jika kita mampu mensyukuri

karunia yang diberikan Allah kepada kita semua. Puji syukur kehadirat Ilahi

Robbi yang dengan berkah dan pertolongan-Nya maka penulis dapat

menyelesaikan laporan skripsi ini. Shalawat serta salam semoga senantiasa

tercurah kepada Rasulullah Saw yang sangat menyayangi umatnya dan telah

membawa kita kepada zaman yang terang benderang.

Skripsi merupakan salah satu tugas wajib mahasiswa sebagai persyaratan

untuk mengambil gelar Strata 1 (S1) pada Program Studi Teknik Informatika

Universitas Islam Negeri Syarif Hidayatullah Jakarta.

Dalam penyusunan skripsi ini, penulis mendapat bimbingan dan bantuan

dari berbagai pihak. Oleh karena itu, perkenankanlah pada kesempatan ini penulis

mengucapkan terima kasih kepada :

1. Bapak Prof. DR. Komarudin Hidayat, selaku Rektor UIN Syarif

Hidayatullah Jakarta.

2. Bapak DR. Syopiansyah Jaya Putra, M.Sis, selaku Dekan Fakultas

Sains dan Teknologi.

3. Bapak Yusuf Durrachman, M.Sc, selaku Ketua Program Studi Teknik

Informatika, Ibu Viva Arifin, M.Si, selaku Sekretaris Program Studi

Teknik Informatika dan juga sekaligus merangkap dosen pembimbing

skripsi yang secara kooperatif telah memberikan bimbingan, bantuan

Page 6: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

6

dan dukungan, baik moral maupun secara teknis juga telah

meluangkan waktu, tenaga dan pikirannya untuk membimbing penulis

dalam penyusunan skripsi ini.

4. Seluruh dosen program studi Teknik Informatika yang telah

membagikan ilmunya kepada penulis dengan sabar dan ikhlas.

5. Ibu Widya Eka Rahmawati, S.HI dan Bapak H. Subaebasni Selaku

Sekretaris dan Direktur PT. Arminareka Perdana atas bantuan dan

dukungannya terhadap penulis selama penelitian.

6. Ayahanda dan Ibunda Tercinta beserta Adik-adikku, atas doa,

dukungan, dan kasih sayang sepanjang masa.

Pada kesempatan ini pula, penulis ingin memohon maaf yang sebesar-

besarnya kepada semua pihak apabila sewaktu menjalankan skripsi ini terdapat

hal-hal yang kurang berkenan.

Penulis menyadari bahwa masih banyak kekurangan dari laporan skripsi

ini, baik dari materi maupun teknik penyajiannya. Semoga laporan skripsi ini

dapat memenuhi syarat dan bermanfaat bagi siapa saja yang membacanya.

Wassalamualaikum wr.wb.

Jakarta, Juni 2011

Abdur Rahman

Page 7: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

7

HALAMAN PERSEMBAHAN

Penulis dapat menyelesaikan skripsi ini tak lepas dari doa dan dukungan

dari banyak pihak. Maka perkenankanlah penulis untuk mengucapkan terima

kasih yang sebesar-besarnya kepada :

1. Papa dan Umi tercinta, yang tidak pernah berhenti merawat,

mendoakan, dan mendukung penulis dengan penuh kasih sayang.

2. Adik-Adikku, Sani, Said, Abrar, Ulfa dan Aulia yang selalu penulis

banggakan dan sayangi sepenuh hati.

3. Widya Eka Rahmawati, S.Hi dan Keluarga yang selalu memberikan

dukungan dan semangat kepada penulis.

4. Bapak dan Bunda selaku orang tua yang selalu mendoakan dan

menyayangi penulis hingga selesai penulisan skripsi ini.

5. Teman-teman kampus UIN Syarif Hidayatullah Jakarta dan khususnya

kepada mahasiswa TI dan SI dari seluruh angkatan.

6. Teman-teman dari organisasi IKAPDA, KMSU dan RISNA yang

selalu memberikan dukungan, semangat untuk segera lulus.

7. Amir, Slamet, Alan Gansifa, Wandi, Jejen, Agil, Fajar dan segenap

orang yang mendoakan dan memberikan motivasi besar kepada

penulis. Semoga Allah selalu melimpahkan rahmat dan karunia-Nya

kepada kalian semua dan melindungi kalian di setiap langkah.

Arman Medan

Page 8: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

8

DAFTAR ISI

Halaman Judul ..................................................................................................... i

Lembar Persetujuan Pembimbing .................................................................... ii

Lembar Pengesahan Ujian ................................................................................ iii

Lembar Pernyataan ........................................................................................... iv

Abstrak .................................................................................................................. v

Kata Pengantar .................................................................................................. vi

Lembar Persembahan ...................................................................................... viii

Daftar Isi ............................................................................................................. ix

Daftar Tabel ...................................................................................................... xiv

Daftar Gambar ................................................................................................... xv

Daftar Lampiran ............................................................................................. xvii

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

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

1.2. Perumusan Masalah ............................................................................ 3

1.3. Batasan Masalah ................................................................................. 3

1.4. Tujuan dan Manfaat Penulisan ........................................................... 4

1.4.1. Tujuan ....................................................................................... 4

1.4.2. Manfaat .................................................................................... 5

1.5. Metodologi Penelitian ....................................................................... 6

1.5.1. Metodologi Pengumpulan Data ............................................... 6

1.5.1.1. Studi Kepustakaan ...................................................... 6

1.5.1.2. Wawancara .................................................................. 6

1.5.1.3. Observasi ..................................................................... 6

1.5.1.4. Kuisioner ..................................................................... 7

1.5.2. Metodologi Pengembangan Multimedia .................................. 7

1.6. Sistematika Penulisan Skripsi .............................................................. 7

BAB II LANDASAN TEORI .............................................................................. 9

2.1. Mobile Application ............................................................................. 9

2.1.1. Ponsel ..................................................................................... 10

2.2. Multimedia ....................................................................................... 10

2.2.1. Definisi Multimedia ............................................................... 10

2.2.2. Objek Multimedia .................................................................. 11

2.2.2.1. Teks ........................................................................... 11

2.2.2.2. Grafis atau Gambar ................................................... 12

2.2.2.3. Animasi ..................................................................... 14

2.2.2.4. Audio ......................................................................... 15

2.2.2.5. Video ......................................................................... 15

2.2.2.6. Interactive Link ......................................................... 15

2.3. Multimedia Interaktif ........................................................................ 16

2.4. Perancangan Sistem ........................................................................... 17

2.4.1. Storyboard .............................................................................. 17

2.4.2. Flowchart ............................................................................... 18

2.4.3. Desain Struktur Navigasi ....................................................... 19

Page 9: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

9

2.4.4. State Transition Diagram ....................................................... 20

2.5. Haji .................................................................................................... 22

2.5.1. Pengertian Haji ....................................................................... 22

2.6. Adobe Flash CS4 Professional .......................................................... 22

2.6.1. Area Kerja .............................................................................. 24

2.6.2. Action Script pada Flash ......................................................... 27

2.7. Flash Lite ........................................................................................... 28

2.7.1. Sejarah .................................................................................... 28

2.7.2. Pembahasan umum Flash Lite ................................................ 29

2.7.3. Pembahasan umum Action Script pada Flash Lite ................. 32

2.8. Adobe Device Central CS4 ............................................................... 33

2.8.1. Area Kerja Adobe Device Central CS4 ................................... 34

2.8.2. Cara Kerja Adobe Device Central ........................................... 37

2.9. Adobe Photoshop CS2 ...................................................................... 38

2.10. Adobe Audition 1.5 ......................................................................... 39

2.11. Literatur Sejenis .............................................................................. 39

2.12. Metodologi Pengembangan Multimedia ......................................... 43

2.12.1. Konsep (Concept) ................................................................ 44

2.12.2. Perancangan (Design) ......................................................... 45

2.12.3. Pengumpulan Bahan Material (Material Collecting) .......... 46

2.12.4. Pembuatan (Assembly) ........................................................ 46

2.12.5. Pengujian (Testing) ............................................................. 47

2.12.6. Distribusi (Distribution) ...................................................... 47

BAB III METODOLOGI PENELITIAN ........................................................ 48

3.1. Metodologi Pengumpulan Data ........................................................ 48

3.1.1. Studi Kepustakaan .................................................................. 48

3.1.2. Wawancara ............................................................................. 48

3.1.3. Observasi ................................................................................ 49

3.1.3. Kuisioner ................................................................................ 49

3.1.4. Studi Literatur ........................................................................ 49

3.2. Metodologi Pengembangan Multimedia .......................................... 50

3.2.1. Konsep (Concept) ................................................................... 50

3.2.2. Perancangan (Design) ............................................................ 50

3.2.3. Pengumpulan Bahan Material (Material Collecting) ............. 53

3.2.4. Pembuatan (Assembly) ........................................................... 54

3.2.5. Pengujian (Testing) ................................................................ 55

3.2.6. Distribusi (Distribution) ......................................................... 56

BAB IV PERANCANGAN DAN IMPLEMENTASI ..................................... 57

4.1. Profil Perusahaan ............................................................................... 57

4.1.1. Visi dan Misi Perusahaan ....................................................... 58

4.1.2. Struktur Organisasi ................................................................. 58

4.2. Konsep Pengoperasian Program Aplikasi ......................................... 59

4.3. Perancangan (Design) Program Aplikasi ........................................... 59

4.3.1. Perancangan Storyboard ........................................................ 60

4.3.2. Perancangan Struktur Navigasi .............................................. 70

4.3.2.1. Perancangan Bagan Aliran (Flowchart) .................... 71

Page 10: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

10

4.3.2.2. Perancangan STD (State Transition Diagram) ........... 74

4.3.2.3. Perancangan Antarmuka Pemakai (Interface) ........... 76

4.4. Pengumpulan Bahan Material (Material Collecting) ........................ 79

4.4.1. Teks ........................................................................................ 79

4.4.2. Gambar ................................................................................... 80

4.4.3. Animasi .................................................................................. 80

4.4.4. Audio ...................................................................................... 80

4.4.5. Kontrol Navigasi .................................................................... 80

4.5. Pembuatan (Assembly) ..................................................................... 83

4.5.1. Spesifikasi Perangkat Lunak ................................................... 83

4.5.2. Spesifikasi Perangkat Keras .................................................... 84

4.6. Pengujian (Testing) .......................................................................... 88

4.7. Distribusi (Distribution) ................................................................... 90

BAB IV KESIMPULAN DAN SARAN ............................................................. 91

5.1. Kesimpulan ........................................................................................ 91

5.2. Saran .................................................................................................. 92

DAFTAR PUSTAKA ......................................................................................... 93

Page 11: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

11

BAB I

PENDAHULUAN

1.1. Latar Belakang

Perkembangan teknologi sangat mendukung integrasi dari berbagai media

yang mampu menghasilkan aplikasi multimedia yang dapat dimanfaatkan di

berbagai aspek. (Siswoutomo, 2007)

Menurut Siswoutomo (2007), salah satu hasil perkembangan teknologi

adalah perangkat handphone. dan telah menjadikan handphone suatu perangkat

yang berfungsi sebagai sarana telekomunikasi yang memiliki berbagai fitur yang

sangat kompleks dan canggih yang digunakan untuk menelepon dan Short

Messege Service (SMS), karena bersifat moveable, menjadikan handphone

sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari. Fitur

handphone juga mampu menjalankan aplikasi mobile atau mobile application

dengan berbagai macam format. Perangkat handphone telah memberikan berbagai

dampak positif maupun negatif bagi kehidupan manusia. Dampak negatif berupa

penipuan melalui layanan sms, penyebaran virus, kejahatan internet melalui

handphone, dan lainnya. Dari berbagai macam dampak negatif yang ditimbulkan

oleh perkembangan teknologi handphone, terdapat dampak positif yang dapat

dimanfaatkan, seperti dalam penyampaian informasi untuk pembelajaran haji dan

Umrah melalui mobile application.

Haji merupakan rukun Islam kelima yang sangat penting bagi orang yang

mampu baik secara material, kesiapan fisik, lahir maupun batin serta keilmuan

yang cukup dalam melaksanakannya. Haji merupakan ritual keagamaan yang

Page 12: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

12

dilaksanakan setiap tahun di bulan Dzulhijjah. Secara estimologi (bahasa) haji

berarti niat (al-qasdu), sedangkan menurut syara’ berarti niat menuju baitul haram

dengan amal-amal yang khusus ke tempat-tempat tertentu yang dimaksud tempat

tertentu adalah ka’bah dan mas’a (tempat sa’i). Juga Padang Arafah (tempat

wukuf), Muzdalifah (tempat mabit) dan Mina (tempat melontar jumrah).

Sedangkan waktu tertentu adalah bulan haji yaitu sepuluh hari pertama bulan

Dzulhijah. melaksanakan haji bukan hanya menunjukkan kesalehan individual

tetapi juga meningkatkan iman dan taqwa kepada Allah Swt Abu Hurairah r.a

berkata: Saya telah mendengar Rasulullah Saw bersabda: Barang siapa

mengerjakan haji semata-mata karena Allah Swt, tidak berbuat keji dan tidak

berbuat jahat, maka ia pulang seperti ia baru dilahirkan oleh ibunya. (Subaebasni,

2010)

Oleh karena itu, berhubung sangat dibutuhkannya informasi dalam

pelaksanaan ibadah haji dan umrah untuk kaum muslimin yang akan

melaksanakan ibadah tersebut maka penulis mencoba memberikan dampak positif

atau manfaat dari perkembangan perangkat handphone dengan merancang suatu

aplikasi mobile atau mobile application berbasis multimedia yang dijalankan pada

perangkat handphone menggunakan flashlite yang akan mempermudah kita

sebagai kaum muslimin untuk memperoleh informasi mengenai haji dan umrah,

terutama kepada personal yang mempunyai mobilitas tinggi karena dalam

penyampaian informasi dan pengaksesan terhadap informasi lebih cepat, praktis

dan efisien.

Page 13: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

13

Pengembangan aplikasi ini tidak terlepas dari sudah banyaknya perangkat

handphone yang mendukung aplikasi flashlite versi 2.1 dan mendukung berbagai

macam elemen multimedia, maka penulis ingin mendalami teknologi flashlite

dengan merancang aplikasi pembelajaran haji dan umrah tersebut.

Dari permasalahan di atas, maka penulis memilih judul : Perancangan

dan Implementasi Mobile Application Pembelajaran Haji dan Umrah

Berbasis Multimedia. (Studi Kasus PT. Arminareka Perdana)

1.2. Perumusan Masalah

Berdasarkan pada latar belakang yang dijelaskan di atas dan sesuai dari

tujuan penulisan skripsi ini, maka pokok permasalahan yang dapat penulis

simpulkan adalah sebagai berikut:

1. Bagaimana merancang pembuatan aplikasi mobile yang dapat menyajikan

informasi mengenai pembelajaran haji dan umrah berbasis multimedia yang

mudah dipahami dan digunakan untuk para calon jamaah haji dan umrah.

2. Bagaimana menerapkan aplikasi tersebut pada perangkat handphone yang

mendukung aplikasi Flashlite versi 2.1.

1.3. Batasan Masalah

Dengan luasnya cakupan pembahasan mengenai haji dan umrah, maka

penulis membatasi ruang lingkup pembahasan lebih ke informasi pembelajaran

haji dan umrah agar penulisan skripsi dapat terfokus kepada masalah yang ada.

Ruang lingkup pembahasan adalah:

Page 14: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

14

1. Penyajian informasi mengenai pembelajaran haji dan umrah di antaranya

mencakup tentang pengertian, sejarah, dasar hukum haji dan umrah, rangkaian

kegiatan ibadah haji, persiapan jamaah ibadah haji dan umrah (secara umum,

untuk pria dan wanita), doa’ dan istilah-istilah pada haji dan umrah. Hal ini

bersumber dari lembaga bimbingan manasik haji, Ditjen Bimas Islam dan

Urusan Haji Kementerian Agama RI dan sumber lainya yang berkaitan dalam

penulisan skripsi ini.

2. Tools atau software yang digunakan adalah Adobe Flash CS4, Adobe Device

Central CS4, Adobe Photoshop CS2.

3. Jenis handphone yang digunakan dalam perancangan aplikasi ini adalah Nokia

tipe 5800 XpressMusic.

4. Aplikasi ini tidak dihubungkan ke internet pada handphone dan hasil akhir

aplikasi adalah aplikasi multimedia yang memberikan informasi haji dan

umrah.

5. Aplikasi ini berjalan pada handphone dengan media input touch screen.

1.4. Tujuan dan Manfaat Penulisan

1.4.1. Tujuan Penulisan

Tujuan dari penulisan skripsi ini adalah untuk merancang suatu mobile

application yang berisi tentang informasi pembelajaran haji dan umrah yang

sesuai dengan ajaran Rasulullah dalam bentuk aplikasi flashlite ke dalam

perangkat handphone berbasis multimedia .

Page 15: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

15

1.4.2. Manfaat Penulisan

Dengan melakukan penulisan skripsi ini, penulis mendapatkan manfaat-

manfaat, antara lain:

1. Bagi Penulis

a. Lebih paham secara detail pengetahuan tentang haji dan umrah serta tata

cara pelaksanaannya.

b. Penulis mampu menerapkan aplikasi mobile menggunakan flashlite ke

dalam handphone untuk menyajikan informasi haji dan umrah.

2. Bagi Pengguna

a. Dengan dirancangnya aplikasi ini memudahkan pengguna atau jamaah yang

akan melaksanakan ibadah haji atau umrah dalam memperoleh informasi

karena sangat mudah digunakan dan lebih efisiensi waktu bagi jamaah yang

mempunyai aktivitas yang padat dan mobilitas yang tinggi.

b. Membantu pengguna untuk mempersiapkan diri dalam pelaksanaan ibadah

haji dan umrah.

3. Bagi Universitas

a. Mengetahui kemampuan mahasiswa dalam menguasai materi ilmu yang

telah diperoleh di bangku kuliah.

b. Mengetahui kemampuan mahasiswa dalam menerapkan ilmunya dan

sebagai bahan evaluasi.

Page 16: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

16

1.5. Metodologi Penelitian

Dalam penulisan skripsi ini penulis menggunakan metodologi-metodologi

untuk perancangan aplikasi, antara lain:

1.5.1. Metodologi Pengumpulan Data:

1.5.1.1. Studi Kepustakaan

Metode pengumpulan kepustakaan atau studi literatur, dilakukan

dengan cara membaca buku-buku, mencari jurnal atau karya ilmiah

melalui website-website khususnya tentang aplikasi mobile ibadah haji

dan umrah serta informasi lain yang berkaitan sehingga dapat dijadikan

sebagai acuan dalam penulisan skripsi ini.

1.5.1.2. Wawancara

Metode ini dilakukan dengan mewawancarai pihak PT.

Arminareka Perdana kerena metode ini sangat dibutuhkan sebagai evaluasi

dalam perancangan aplikasi mobile agar didapatkan data dan masukan

yang mendukung.

1.5.1.3. Observasi

Metode pengumpulan data ini dilakukan dengan pengamatan

langsung pada objek yang ada pada pihak lembaga atau instansi terkait

dalam hal ini PT. Arminareka Perdana untuk mendapatkan data-data yang

diperlukan.

Page 17: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

17

1.5.1.4. Kuisioner

Kuisioner dibagikan kepada pengguna untuk mengetahui sejauh

mana aplikasi yang dirancang dapat bermanfaat bagi para calon jamaah

haji dan umrah mengenai pembelajaran terkait manasiknya.

1.5.2. Metodologi Pengembangan Multimedia:

Menurut Luther (1994) (dalam Ariesto Hadi Sutopo, 2003:32) metodologi

pengembangan multimedia dilakukan melalui 6 tahapan, yaitu konsep (concept),

desain atau perancangan (design), pengumpulan bahan material (material

collecting), pembuatan (assembly), pengujian (testing), dan distribusi

(distribution).

1.6. Sistematika Penulisan Skripsi

Untuk memudahkan penulis dalam menyusun skripsi ini, pembahasan

terbagi kedalam 5 (lima) bab yang diuraikan sebagai berikut:

BAB I PENDAHULUAN

Bab ini berisi pembahasan mengenai uraian tentang Latar Belakang,

Rumusan Masalah, Batasan Masalah, Tujuan dan Manfaat dari

Pembuatan Aplikasi Informasi pembelajaran haji dan Umrah,

Metodologi dan Sistematika Penulisan.

Page 18: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

18

BAB II LANDASAN TEORI

Bab ini berisi pembahasan tentang landasan teori dari multimedia,

definisi dan komponen pembangun dari aplikasi pendukung lainnya

yang ada dalam penyusunan skripsi ini.

BAB III METODOLOGI PENELITIAN

Bab ini berisi pembahasan mengenai metodologi yang penulis gunakan

dalam merancang aplikasi mobile application berbasis multimedia

berdasarkan metodologi pengembangan aplikasi multimedia.

BAB IV PERANCANGAN DAN IMPLEMENTASI

Bab ini berisi pembahasan perancangan dan proses pembuatan aplikasi

mobile application sebagai solusi berdasarkan permasalahan yang ada.

BAB V KESIMPULAN DAN SARAN

Bab ini berisi mengenai Kesimpulan dan Saran yang penulis peroleh

dari penulisan dan penyusunan skripsi ini.

Page 19: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

19

BAB II

LANDASAN TEORI

2.1. Mobile Application

Mobile application merupakan aplikasi yang cara aksesnya menggunakan

perangkat bergerak (mobile device) seperti handphone, smartphone dan PDA

phone. (Suryana, 2008)

Aplikasi yang menggunakan perangkat bergerak semakin meningkat dan

beragam saat ini, seperti aplikasi mobile berbasis symbian maupun berbasis java.

(Kusrianto, 2006)

2.1.1. Ponsel

Telepon seluler atau lebih dikenal dengan nama ponsel atau

handphone saat ini menjadi salah satu alat komunikasi populer. Karena

perkembangan alat komunikasi yang satu ini belakangan berubah secara

signifikan. Ini dibuktikan dengan kemampuan ponsel yang diisi dengan

berbagai macam software dan hardware multimedia seperti kamera,

pemutar musik, kemampuan berselancar di internet dan lain-lain. (Rudi,

2009)

Perkembangan handphone atau ponsel telah memasuki babak baru,

yaitu babak multimedia. kemunculan babak baru yang dipicu oleh luasnya

perkembangan komputer dan perkembangan teknologi internet menjadikan

fitur ponsel tidak hanya sekedar untuk sms atau sebagai telepon saja.

(Sugiarto, 2007)

Page 20: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

20

2.2. Multimedia

Multimedia ditinjau dari bahasanya, terdiri dari 2 kata, yaitu multi dan

media. Multi memiliki arti banyak atau lebih dari satu. Sedangkan media

merupakan bentuk jamak dari medium. juga diartikan sebagai saran, wadah, atau

alat. (Darma dkk, 2009).

2.2.1. Definisi Multimedia

Dalam Suyanto 2003, terdapat definisi-definisi multimedia, antara

lain:

1. Menurut Hoftsteter (2001), multimedia adalah pemanfaatan

komputer untuk membuat dan menggabungkan teks, grafik, audio,

video dan animasi dengan menggabungkan link dan tool yang

memungkinkan pemakai melakukan navigasi, berinteraksi,

berkreasi dan berkomunikasi.

2. Menurut Rosch (1996), multimedia adalah kombinasi dari

komputer dan video.

3. Menurut McComick (1996), multimedia merupakan kombinasi tiga

elemen yaitu, suara, gambar dan teks.

4. Menurut Turban dkk. (2002), multimedia adalah kombinasi dari

paling sedikit dua media input atau output dari data, media ini

dapat berupa audio (suara atau musik), animasi, video, teks, grafik

dan gambar

Page 21: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

21

Definisi lain multimedia adalah salah satu teknologi yang

mengkombinasikan dua atau beberapa bentuk media, seperti teks, grafik,

suara atau animasi/gambar hidup (animation) dengan menggunakan

tambahan perangkat lunak ke dalam aplikasi berbasis komputer. (Gaol,

2008)

Dalam hal ini aplikasi yang dibangun penulis lebih kepada definisi

berdasarkan menurut Mc Comick.

2.2.2. Objek Multimedia

Menurut Sutopo (2003), Multimedia terdiri dari beberapa objek

(elemen), yaitu teks, grafik atau image, animasi, audio, video dan link

interaktif.

2.2.2.1. Teks

Teks merupakan dasar dari pengolahan kata dan informasi

berbasis multimedia. Penggunaan teks dalam multimedia sangat

efektif untuk menyampaikan ide serta memberikan panduan kepada

penggunanya. Teks dapat membentuk kata, surat atau narasi dalam

multimedia dan merupakan bentuk data yang paling mudah di

simpan dan dikendalikan. (Suyanto, 2003)

Teks dapat disajikan dalam berbagai bentuk font maupun

ukuran dan merupakan media yang paling umum digunakan dalam

penyajian informasi yang bertujuan untuk memudahkan

penyampaian informasi ke pengguna.

Page 22: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

22

Menurut (Suyanto, 2003), teks secara umum terbagi

menjadi empat elemen teks, yaitu :

1. Teks cetak, yaitu teks yang tercetak di atas kertas.

2. Teks hasil scan, yaitu teks tercetak di atas kertas yang di

scan oleh scanner, dan mengkonversinya menjadi format

yang dapat dibaca oleh komputer.

3. Teks elektronik, yaitu jenis teks yang bisa dibaca oleh

komputer dan dikirim secara elektronis melalui jaringan.

4. Hypertext, pertama kali diperkenalkan oleh Ted Nelson

(1965). Hypertext merupakan dasar untuk produksi

multimedia virtual dan mengacu ke proses linking (teks

yang telah masuk link (linked) yang membuat multimedia

menjadi interaktif.

2.2.2.2. Grafis atau Gambar

Grafis atau gambar digunakan dalam presentasi atau

publikasi multimedia karena dapat menghasilkan multimedia yang

menarik dan dapat mengurangi kebosanan dibandingkan dengan

teks. (Suyanto, 2003)

Gambar dapat meringkas dan menyajikan data kompleks

dengan cara yang baru dan lebih berguna. Sedangkan grafis

seringkali muncul sebagai latar belakang suatu teks untuk

menghadirkan kerangka yang mempermanis teks. (Suyanto, 2003)

Page 23: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

23

Secara garis besar terdapat dua jenis gambar, yaitu gambar

vektor dan gambar bitmap.

1. Gambar Vektor

Gambar vektor merupakan gambar yang terbentuk

atas kumpulan garis dan kurva yang peletakannya dicatat

dan diperhitungkan secara matematis. (Kusrianto, 2006)

Kumpulan garis dan kurva tersebut dinamakan

vektor. gambar vektor posisinya dapat dipindah-pindahkan,

ukuran atau warnanya diubah tanpa mempengaruhi kualitas

gambar. sifat dari grafis vektor adalah resolusi bebas

(resolution independent). (Yoga, 2005)

2. Gambar Bitmap

Bitmap secara teknis di sebut raster, yaitu metode

komputer untuk menampilkan informasi menggunakan

kumpulan titik-titik (dot), disebut juga pixel (picture

elemen), dengan warna sendiri-sendiri yang disusun pada

bidang tegak lurus (grid), dengan tingkat kerapatan tertentu,

sehingga jika dilihat pada jarak tertentu, kumpulan titik-titik

tersebut akan membentuk gambar yang diinginkan. (Yoga,

2005)

Sifat gambar bitmap tergantung pada tingkat

kerapatan pixel penyusunnya (resolution dependent), ketika

gambar di perbesar melampaui batas toleransi pixel-pixel

Page 24: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

24

penyusunnya, gambar akan terlihat pecah, yang umumnya

disebut dengan istilah jaggy. (Yoga, 2005)

Dalam hal ini penulis menggunakan kedua jenis gambar tersebut

dalam pembuatan aplikasi ini.

2.2.2.3. Animasi

Animasi berarti gerakan image atau video. Konsep dari

animasi menggambarkan sulitnya menyajikan informasi dengan

satu gambar atau sekumpulan gambar. (Sutopo, 2003)

Definisi lain animasi menurut Tuhusetya (2010), animasi

adalah paparan urutan lakaran yang setiap satunya terdapat sedikit

perbedaan untuk menghasilkan satu pergerakan secara berterusan.

Dalam multimedia, animasi menciptakan gerak pada layar

yang bertujuan untuk menarik perhatian dan menghilangkan

kejenuhan yang monoton. (Suyanto, 2003)

Dalam hal ini penulis menggunakan animasi gambar dan

teks dalam pembuatan aplikasi ini.

2.2.2.4. Audio

Didefinisikan sebagai sembarang bunyi dalam bentuk

digital seperti suara, musik, narasi dan sebagainya. Dengan adanya

Audio (suara atau musik) suatu aplikasi multimedia menjadi lebih

menarik dan lebih interaktif.

Page 25: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

25

Penyajian audio merupakan cara lain untuk lebih

memperjelas pengertian suatu informasi. Audio atau suara dapat

lebih menjelaskan karakteristik suatu gambar. (Sutopo, 2003)

Dalam pembuatan aplikasi ini penulis menggunakan audio

berbentuk MP3 yang dikompres ke dalam bentuk MIDI.

2.2.2.5. Video

Menurut YongFei (2010) definisi video adalah sebagai

media digital yang menunjukkan susunan atau urutan gambar-

gambar dan memberikan ilusi, gambaran serta fantasi kepada

gambar yang bergerak. Video menyediakan suatu kaedah

penyaluran informasi yang amat menarik dan live. Video

merupakan sumber atau media yang paling dinamik serta efektif

dalam menyampaikan suatu informasi.

2.2.2.6. Interactive Link

Interactive link merupakan sebagian dari multimedia yang

diperlukan untuk menggabungkan beberapa elemen (objek)

multimedia sehingga menjadi informasi yang terpadu, di mana

pengguna dapat menekan mouse atau objek pada layer seperti

tombol atau teks dan menyebabkan program melakukan perintah

tertentu. (Sutopo, 2003)

Page 26: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

26

Dalam hal ini yang digunakan oleh penulis adalah teks, gambar (vektor

dan bitmap), animasi, dan audio.

2.3. Multimedia Interaktif

Multimedia interaktif atau disebut juga sebagai non-linear multimedia

adalah multimedia yang dapat menangani interaktif dari pengguna (user). (Sutopo,

2003)

Pengertian interaktif terkait dengan komunikasi 2 arah atau lebih dari

komponen-komponen komunikasi. komunikasi dalam multimedia interaktif

berbasis komputer adalah hubungan antara manusia (sebagai user) dan komputer

perangkat lunak atau aplikasi dalam format tertentu yang diharapkan memiliki

hubungan 2 arah atau timbal balik antara aplikasi dengan penggunanya. (Harto,

2008)

Interaktif dalam multimedia menurut (Suyanto, 2003) diberikan batasan

sebagai berikut:

1. Pengguna (user) dilibatkan untuk berinteraksi dengan program aplikasi.

2. Aplikasi informasi interaktif bertujuan agar pengguna bisa mendapatkan

informasi yang di butuhkan.

Perancangan aplikasi mobile berbasis multimedia interaktif pada

prinsipnya sama dengan multimedia interaktif berbasis komputer, karena pada

tahun 2004 handphone tidak hanya berfungsi sebagai telepon saja, melainkan

dapat memainkan dan menampilkan objek-objek multimedia seperti memutar

musik dan memainkan video. Aplikasi mobile berbasis multimedia

Page 27: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

27

memungkinkan user memilih informasi yang diinginkan dan mudah digunakan.

(Siswoutomo, 2007)

2.4. Perancangan Sistem

2.4.1. Storyboard

Storyboard menurut Luther (1994, dalam Sutopo, 2003: 25),

merupakan deskripsi dari setiap scene yang secara jelas menggambarkan

objek multimedia serta perilakunya yang penjelasannya dapat

menggunakan symbol maupun teks (Sutopo, 2003). Storyboard merupakan

serangkaian sketsa dibuat persegi panjang yang menggambarkan suatu

urutan (alur cerita) elemen-elemen yang diusulkan untuk aplikasi

multimedia (Nugroho, 2005).

Storyboard memiliki manfaat antara lain:

1. Merupakan visual test bagi pengembang atau pemilik multimedia.

2. Pedoman dari aliran pekerjaan bagi staf pembuat multimedia.

3. Gambaran suatu multimedia yang akan diproduksi bagi sponsor.

2.4.2. Flowchart

Sistem flowchart menggambarkan tahapan proses dari suatu

sistem, termasuk sistem multimedia. Sedangkan program flowchart

menggambarkan urutan-urutan instruksi dari suatu program komputer.

(Suyanto, 2003)

Page 28: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

28

Flowchart view digunakan untuk melengkapi storyboard untuk

multimedia non-linier (interaktif) dan multimedia yang menggunakan

banyak percabangan. Flowchart disebut juga diagram tampilan yang

digunakan pada multimedia interaktif untuk menggambarkan alur dari

suatu scene (tampilan) ke scene lainnya. (Sutopo, 2003)

Tabel 2.1 Simbol-simbol flowchart (Suyanto, 2003)

Nama Simbol Fungsi

Terminator Permulaan atau akhir program

Flow line Arah atau arus aliran program/data

Preparation Proses inisialisasi atau pemberian harga

awal dan pemasukan data melalui keyboard

Proses Proses pengolahan data

Input/Output data Proses input atau output data, parameter,

informasi

Decision Perbandingan pernyataan, penyeleksian data

untuk langkah selanjutnya

Merge

Proses dalam penggabungan data

Extract

Proses dalam pemecahan data

Document

Input berasal dari dokumen dalam bentuk

kertas atau output dicetak dikertas

Display

Simbol visual display unit atau cathode ray

tube sebagai input atau output

Page 29: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

29

2.4.3. Desain Struktur Navigasi

Struktur navigasi merupakan rancangan alur program.

dalam pengembangan aplikasi berbasis multimedia maupun

pengembangan web menurut Lowery (2001, dalam Sutopo,

2003:37), terdapat beberapa model navigasi dasar, di mana

desainer harus mengenal dengan baik karena setiap model

memberikan solusi untuk kebutuhan yang berbeda.

Secara umum terdapat 4 jenis model struktur navigasi

dalam pengembangan aplikasi berbasis multimedia, yaitu :

1. Linear navigation model

Merupakan model yang digunakan oleh sebagian

besar multimedia linier. Informasi diberikan secara

sekuensial dimulai dari satu halaman.

Linear navigation model banyak digunakan dan

berhasil dengan baik pada beberapa macam aplikasi seperti:

a. Presentasi

b. Aplikasi computer based-training

c. Aplikasi yang memerlukan informasi berurutan

2. Hierarchical model

Model ini diadaptasi dari top-down design yang

memiliki konsep dimulai dari satu node yang menjadi

halaman utama dan dibuat beberapa cabang dari tiap

halaman level 1 menjadi beberapa cabang lagi.

Page 30: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

30

3. Spoke-and-hub model

Model hub dinyatakan dengan halaman utama yang

mempunyai hubungan dengan setiap node, setiap node

dapat berhubungan kembali ke halaman utama dan

memiliki struktur hyperlink yang fleksibel.

4. Full web model

Model ini memberikan kemampuan hyperlink yang

banyak digunakan untuk dapat mengakses semua topik

dengan cepat, namun memiliki kelemahan seperti user akan

kehilangan cara untuk kembali ke topik sebelumnya.

Dalam hal ini penulis menggunakan model struktur

navigasi hierarchical model dalam pembuatan aplikasi ini.

2.4.4. State Transition Diagram

State transition diagram (STD) menunjukkan bagaimana

sistem bertingkah laku sebagai akibat dari kejadian eksternal.

Untuk melakukannya, STD menunjukkan berbagai model tingkah

laku (disebut state) sistem dan cara di mana transisi dibuat dari

state satu ke state lainnya. STD berfungsi sebagai dasar bagi

pemodelan tingkah laku. (Pressman, 2002 : p354)

Page 31: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

31

Notasi state transition diagram:

1. Sistem. Setiap kotak yang disimbolkan dengan segi empat

mewakili suatu keadaan di mana sistem mungkin berada di

dalamnya.

Gambar 2.1. Notasi STD Sistem

2. Perubahan sistem. Untuk menghubungkan suatu keadaan

dengan keadaan lain.

Gambar 2.2. Notasi STD Perubahan Sistem

3. Kondisi dan aksi. Untuk melengkapi STD, dibutuhkan dua hal

untuk mengubah keadaan. Di bawah ini ilustrasi dari kondisi

dan aksi yang ditampilkan di sebelah anak panah yang

menghubungkan dua keadaan.

Gambar 2.3. Notasi State Transition Diagram

(Sumber: Wisnu, 2002)

Page 32: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

32

2.5. Haji

2.5.1. Pengertian Haji

Pengertian haji secara estimologi (bahasa) adalah niat (al-

qasdu) sedangkan menurut syara’ berarti Niat menuju Baitul

Haram pada waktu, tempat dan amal-amal tertentu. waktu tertentu

adalah bulan-bulan haji yaitu dimulai dari Syawal sampai sepuluh

hari pertama bulan Dzulhijjah. Tempat-tempat tertentu yang

dimaksud dalam definisi diatas adalah selain Ka’bah dan Mas’a

(tempat sa’i), juga Padang Arafah (tempat wukuf), Muzdalifah

(tempat mabit), dan Mina (tempat melontar jumroh). Amalan

ibadah tertentu ialah thawaf, sa’i, wukuf, mabit di Muzdalifah,

melontar jumroh, dan mabit di Mina. (Subaebasni, 2010)

2.6. Adobe Flash CS4 Professional

Adobe Flash CS4 Professional adalah aplikasi perangkat lunak utama

yang digunakan untuk membuat dan menyampaikan konten interaktif. Adobe

Flash CS4 Profesional adalah program yang sangat handal dan paling maju dalam

lingkungan authoring untuk membuat konten interaktif untuk digital, web, dan

mobile platform.

Flash dirancang dan dikembangkan untuk membuat presentasi, aplikasi

dan beberapa karya multimedia interaktif. Pekerjaan yang dapat dilakukan oleh

flash meliputi animasi, video, presentasi, dan aplikasi lainnya. Aplikasi dalam

Page 33: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

33

flash dapat menggunakan elemen-elemen seperti, gambar atau foto, suara, video,

dan efek spesial. (Thabrani, 2006)

Menurut (Budiarjo, 2008) Secara umum, semua aplikasi flash baik animasi

maupun interaktif dibuat mengikuti tahap-tahap berikut:

1. Menentukan jenis aplikasi yang akan dibuat. menurut jenisnya, ada 3

macam aplikasi flash, yaitu:

a. Animasi, biasanya berupa film kartun singkat, animasi logo, dan

sebagainya.

b. Interaktif, banyak digunakan untuk pembuatan formulir atau polling

online di internet

c. Gabungan animasi dan interaktif, paling sering ditemukan berupa

permainan flash.

2. Membuat atau menambahkan unsur-unsur media, bisa berupa gambar,

video, suara, atau teks.

3. Menyusun unsur-unsur media yang telah dibuat atau ditambahkan.

4. Memberi efek khusus.

5. Menambahkan actionscript

6. Menguji aplikasi

7. Mempublikasikan hasil akhir aplikasi.

Secara ringkas tahap-tahap pembuatan aplikasi dalam flash dapat dilihat

pada gambar 2.4.

Page 34: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

34

Gambar 2.4. Proses desain aplikasi pada flash

(Sumber: Budiarjo, 2008)

Dalam hal ini penulis menerapkan aplikasi flash lite untuk

digunakan pada telepon seluler.

2.6.1. Area Kerja

Lingkungan kerja Adobe Flash CS4 Professional terdiri atas menu,

jendela-jendela, dan beberapa panel. Susunan jendela, panel dan menu

Page 35: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

35

inilah yang merupakan lingkungan kerja atau lebih di kenal dengan

sebutan area kerja.

Gambar 2.5. Area kerja Adobe Flash CS4

(Sumber: Madcoms, 2009)

1. Menu, sekumpulan perintah untuk mengatur objek atau animasi dan

berisi kontrol untuk berbagai fungsi seperti membuat dan menyimpan

file, copy, paste dan lain-lain.

2. Stages, merupakan lembar kerja berupa area persegi empat yang

digunakan untuk mendesain, membuat, membentuk, dan

menempatkan atau menganimasikan objek seperti gambar, teks, dan

foto.

Page 36: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

36

3. Panel tools atau toolbox, berisi koleksi tombol-tombol perintah untuk

membuat atau menggambar, memilih dan memformat objek. Panel

tools juga berisi fungsi-fungsi untuk membuat tulisan, mewarnai,

menghapus dan membuat path pada stage dan timeline.

4. Panel properties, untuk memformat atau mengatur properti pada

stage, seperti ukuran stage, warna dasar stage dan framerate dengan

satuan FPS (frame per Second). Panel properties juga memberikan

informasi seperti versi flash player, script yang sedang digunakan.

5. Timeline merupakan bagian dalam flash yang berfungsi untuk

membuat dan mengontrol objek dan animasi, terdiri atas layer, frame

dan playhead. Timeline mengatur objek yang muncul dan berfungsi

untuk mengatur waktu suatu movie dan memunculkan objek tertentu

serta penempatan efek suara dan musik latar belakang.

6. Layer digunakan untuk menempatkan objek berbeda-beda. Layer

digambarkan seperti tumpukan lembaran yang transparan yang

berguna untuk pengaturan kerja, animasi dan elemen lainnya dan

memudahkan dalam meng-edit suatu objek tanpa mempengaruhi

objek lain yang berada pada layer lain.

7. Frame adalah gambar yang membentuk suatu gerakan bila frame

tersebut ditampilkan satu demi satu secara berurutan untuk mengatur

pembuatan animasi. Berikut istilah-istilah pada frame:

Page 37: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

37

a. Keyframe, merupakan suatu tanda yang digunakan untuk

membatasi suatu gerakan animasi, ditandai dengan titik hitam tebal

pada frame.

b. Blank Keyframe, merupakan keyframe yang tidak terdapat objek

didalamnya, ditandai dengan lingkaran pada frame.

8. Playhead, merupakan garis merah vertikal yang menunjukkan posisi

frame pada suatu saat.

9. Frame rate adalah Jumlah bingkai gambar atau frame yang

ditunjukkan setiap detik dalam membuat gambar bergerak,

diwujudkan dalam satuan fps (frames per second), makin tinggi angka

fps-nya, semakin mulus pergerakan gambar.

2.6.2. Action Script pada Flash

Action script adalah bahasa pemrograman flash yang digunakan

untuk membuat animasi atau interaksi. Action script dapat digunakan

untuk mengontrol navigasi dalam movie flash, menganimasi objek,

mengontrol movie clip, memanipulasi teks, dan yang lainnya. (Fanani,

2007).

Actionscript pada flash diterapkan pada frame (di dalam panel

timeline), button (tombol) atau movie clip (di dalam stage). (Syarif, 2003)

1. Action script yang diterapkan pada frame akan dieksekusi pada saat

playhead mencapai frame tersebut.

Page 38: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

38

2. Action script yang diterapkan pada movie atau button (tombol)

dieksekusi pada saat event terjadi. Event adalah suatu kejadian di

dalam movie, misalnya pergerakan mouse, penekanan tombol, atau

movie clip yang sedang di-load.

ActionScript merupakan pemrograman visual berorientasi objek

yang memiliki sintaks, tata bahasa dan struktur yang mirip dengan bahasa

pemrograman C++ yang digunakan dengan tujuan:

1. Memberikan kebebasan berkreasi bagi desainer

2. Membuat animasi interaktif

3. Dapat menampilkan animasi tertentu (non-linier)

2.7. Flashlite

2.7.1. Sejarah

Pada bulan februari 2003, Macromedia (sekarang Adobe)

mengumumkan peluncuran Flashlite, sebuah flash berdasarkan flash 4

scripting engine. Flashlite ditujukan untuk pasar handphone yang cukup

luas. (Siswoutomo, 2006)

Flashlite 1.0 diluncurkan pertama kali untuk handset 505i NTT

DoCoMo di Jepang dan memberikan kemudahan dalam penempatan

konten flash ke pasar ponsel untuk pertama kalinya. Penerapan Flashlite di

jepang telah sukses dengan Flashlite pre-installed pada 25 model handset

yang berbeda. (Wilson, 2005)

Page 39: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

39

2.7.2. Pembahasan umum Flashlite

Flashlite merupakan versi ringan dari adobe flash player (aplikasi

perangkat lunak yang di-publish oleh Adobe Systems), versi ini ditujukan

untuk ponsel dan perangkat elektronik portabel lainnya yang

memungkinkan pengguna perangkat ini untuk melihat konten multimedia

dan aplikasi yang dikembangkan dengan menggunakan tool adobe flash

yang sebelumnya hanya tersedia pada komputer. (YongFei, 2010)

Flashlite merupakan aplikasi yang berjalan di sistem operasi

mobile yang memungkinkan pengembangan aplikasi-aplikasi berbasis

flash yang unik, karena terdapat elemen-elemen multimedia di dalamnya.

(Siswoutomo, 2006)

Dalam pengembangan aplikasi Flashlite diperlukan tools seperti:

1. Adobe Flash Professional

2. Adobe Device Central

3. Action Script

Untuk menjalankan aplikasi Flashlite, diperlukan handphone atau

device yang telah terinstal Flashlite player. illustrasi berikut ini

menjelaskan tentang proses kerja desain aplikasi mobile dalam flash.

Aplikasi Flashlite dapat di bagi menjadi tiga jenis, yaitu:

1. Standalone

Aplikasi standalone Flashlite merupakan kategori yang paling

umum dari aplikasi Flashlite. Aplikasi ini tidak memerlukan

Page 40: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

40

hubungan ke jaringan. Contoh dari jenis aplikasi ini adalah

application dan games.

2. Browser

Konten Flashlite juga dapat dimasukkan dalam halaman web

sehingga konten Flashlite ditampilkan pada situs mobile.

Gambar 2.6. Aplikasi client twittle berbasis Flashlite

(Sumber: Faraday, 2009)

3. Screensaver

Merupakan file SWF yang didalamnya tidak terdapat interaksi

oleh pengguna. tidak semua perangkat dengan Flashlite mendukung

screensaver, sehingga pengembang harus memastikan sasaran

perangkat yang bisa menjalankannya.

Page 41: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

41

Gambar 2.7. Screensaver Flashlite pada Handphone

(Sumber: Rankine, 2009)

Wallpaper merupakan bagian dari screensaver. wallpaper

ditampilkan sebagai gambar latar belakang pada layar perangkat atau

dalam sub-LCD. perangkat yang mendukung screensaver otomatis

mendukung wallpaper.

Gambar 2.8. Tampilan wallpaper Flashlite

(Sumber: Forum Nokia, 2010)

Page 42: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

42

Perangkat (device) yang mendukung untuk jenis aplikasi

tergantung pada platform perangkat dan kemampuan dari Flashlite

player yang di instal pada perangkat.

2.7.3. Pembahasan umum ActionScript pada Flashlite

Action script merupakan 'urat nadi' dari aplikasi yang dibangun

dengan berbasis flash. peranan actionscript sulit diabaikan dalam

membangun aplikasi berbasis flash, termasuk dalam membangun aplikasi

mobile berbasis flash. Mobile device (handphone) mempunyai banyak

keterbatasan, tidak seperti komputer, beban yang dapat ditanggung tidak

sebanyak yang bisa ditanggung oleh komputer.(Siswoutomo, 2006)

Action script dalam pembuatan aplikasi mobile berbasis Flashlite

pada dasarnya tidak berbeda dengan actionscipt dalam pembuatan aplikasi

berbasis flash seperti web interaktif, company-profile, maupun aplikasi

lainnya. Dengan didukung Flash 4 Action Script, pengembang dapat

memakai script-script seperti operator perhitungan, movie clip properties

(_height,_x dan _y, fungsi kontrol timeline (gotoAndPlay() atau stop()), dan

fungsi jaringan seperti loadvariables() dan loadMovie(), namun juga terdapat

script yang tidak didukung oleh Flashlite seperti fungsi startdrag, stopDrag(

) dan _dropTarget. (Adobe Systems Incorporated, 2007)

Karena berbasis mobile, action script pada Flashlite memiliki

kemampuan seperti mengakses tombol-tombol navigasi handphone,

Page 43: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

43

mengirim SMS, dan mengaskes status baterai dan sinyal. Berikut ini

contoh-contoh action script dalam Flashlite:

1. <Enter>, merupakan script untuk mengakses tombol select atau

enter pada handphone.

Contoh :

on(keyPress "<Enter>") {

trace("Anda menekan tombol enter");

}

2. GetBatteryLevel : mengembalikan level baterai saat ini

Contoh: batrai = fscommand2("GetBattery Level");

3. GetDeviceID : mengatur sebuah parameter yang mempresentasikan

identitas unik dari device seperti serial number.

Contoh : status = fscommand2("GetDeviceID","deviceID);

4. GetNetworkName: mengeset sebuah parameter ke nama dari

jaringan saat ini.

Contoh: netNameStatus = fscommand2 (”GetNetworkName”,

myNetName);

2.8. Adobe Device Central CS4

Adobe Device Central adalah perangkat lunak yang berfungsi sebagai

emulator yang memungkinkan pengembang untuk menguji konten flash

berdasarkan profil menggunakan berbagai perangkat. Device central memudahkan

pengembang untuk mengetahui perangkat mana saja yang dapat menjalankan

Page 44: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

44

aplikasi, sehingga pengembang dapat melihat bagaimana tampilan aplikasi yang

akan terlihat oleh pengguna. (Global Web Site, 2009)

Device central memiliki pengaturan-pengaturan untuk menguji aplikasi,

seperti kondisi pencahayaan, kekuatan jaringan atau sinyal, dan memori yang

tersedia. Device central juga berguna dalam tugas-tugas meliputi desain dan

proses pengembangan, termasuk perencanaan, ide, pengetesan, dokumentasi dan

presentasi. (Adobe Systems Incorporated, 2008)

Device central juga menyediakan pengembang konten mobile dan penguji

dengan cara membuat dan mem-preview konten mobile pada berbagai macam

perangkat (devices). (Adobe Systems Incorporated, 2008)

2.8.1. Area Kerja Adobe Device Central

Gambar 2.9. Tampilan Adobe Device Central

(Sumber : Hasil Pengolahan Penulis, 2010)

Page 45: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

45

1. Menu: berisi kontrol untuk berbagai fungsi perintah seperti membuat,

membuka, menyimpan file, meng-edit, dan perintah-perintah standar

windows lainnya.

2. Device Sets: digunakan untuk membuat suatu perangkat (device)

dengan pengaturan tertentu untuk menguji konten aplikasi.

3. Device profiles : merupakan salah satu bagian utama dari Device

Central, yang digunakan untuk melihat dan mengatur informasi

perangkat (devices).

Device profiles memberikan informasi mengenai perangkat termasuk

media dan jenis konten yang didukung, yaitu yaitu, konten yang dapat

digunakan pada masing-masing perangkat seperti screen saver,

wallpaper, dan stand-alone.

Gambar 2.10. Tampilan Device Profiles

(Sumber: Elrom, 2009)

Page 46: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

46

4. Emulator : merupakan salah satu bagian utama dari Device Central

untuk melihat tampilan aplikasi pada perangkat virtual yang telah di

pilih dari Device Library. Dalam modus ini, device central bisa

digunakan sebagai aplikasi stand-alone untuk melihat konten seperti

multimedia player dan melakukan interaksi seperti pada perangkat

yang sebenarnya.

Emulator memiliki panel-panel yang menampilkan informasi

yang dibutuhkan dalam pembuatan aplikasi, antara lain:

a. Display: fasilitas yang terdapat pada emulator yang berfungsi

sebagai simulasi tampilan yang dapat di atur untuk dapat

melihat bagaimana tampilan aplikasi pada lingkungan tertentu.

Gambar 2.11. Tampilan Simulasi Display

(Sumber: Hasil Pengolah Penulis, 2011)

Page 47: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

47

b. File Info : memberikan informasi tentang nama, ukuran, versi

flash dan dimensi dari suatu file.

c. Content Type : memberikan informasi tipe konten aplikasi

yang sedang dijalankan pada emulator.

d. Memory : panel ini memberikan informasi ukuran memori

yang terpakai saat aplikasi dijalankan.

5. Online library: menampilkan semua perangkat yang tersedia untuk di-

download ke dalam local library.

6. Local library : menampilkan perangkat umum Flashlite dan juga

menampilkan perangkat mobile yang telah di-download ke dalam

device central dari online library.

2.8.2. Cara Kerja Adobe Device Central

Berikut ini adalah cara kerja dari Adobe Device Central, meliputi:

1. Menyediakan informasi menyediakan perangkat (device) seperti

hardware, software dan kemampuan media untuk menjalankan

bitmap, video, web dan tipe Flashlite, dan memungkinkan untuk

merancang secara tepat untuk setiap perangkat.

2. Membantu untuk mengatur efisiensi proyek pada perancangan

untuk beberapa perangkat.

3. Memungkinkan untuk melihat hasil pekerjaan di dalam lingkungan

emulator perangkat secara interaktif.

Page 48: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

48

2.9. Adobe Photoshop CS2

Photoshop adalah aplikasi atau software yang digunakan untuk

memanipulasi foto, mengedit gambar, dan menciptakan sebuah karya grafis

orisinal. (SmithDev Community, 2009:2)

Photoshop merupakan salah satu software pengolah grafis berbasis bitmap

yang memiliki fitur yang sangat kompleks dibanding software sejenisnya.

(Soeherman, 2007)

Dengan fitur yang sangat komplek, menjadikan photoshop sebagai standar

program aplikasi pengolah foto dan penyunting gambar yang banyak digunakan

oleh para desainer untuk keperluan media cetak, reklame, elektronik, stiker, iklan

dan internet. (Hakim, 2003)

Gambar 2.12. Tampilan aplikasi Adobe Photoshop CS2

(Sumber: Agung, 2005)

Page 49: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

49

2.10. Adobe Audition 1.5

Adobe Audition merupakan suatu program editing audio yang lengkap,

digunakan untuk merekam, mengedit suara dalam bentuk digital berbasis windows

dan merupakan standar pengolah audio pada bisnis multimedia dan broadcasting.

(Pustaka, 2008)

Gambar 2.13. Tampilan aplikasi Adobe Audition 1.5

(Sumber: McMahon, 2010)

2.11. Literatur Sejenis

Sumber literatur yang dipergunakan di dalam penulisan skripsi ini adalah

studi literatur dari penelitian atau hasil penulisan karya ilmiah. Sebagai sumber

referensi dan bahan acuan terhadap kelebihan dan kekurangan dari sisi sistem

yang telah dirancang. Berikut adalah perbandingannya :

Page 50: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

50

Judul : Visualisasi Belajar Manasik Haji Efektif dan Interaktif

Berbasis Multimedia

Jenis Literatur : Skripsi

Penulis : Putri Handayani

Tahun : 2009

No Hal-hal yang

diperbandingkan Penulis Sebelumnya Penulis Sekarang

1. Tools

Menggunakan

Macromedia Director MX,

Macromedia Flash MX,

Adobe Audition 1.5,

Ulead Video Studio,

Adobe Photoshop 7.0

Menggunakan

Adobe Flash CS4,

Adobe Audition 1.5

Adobe Device Central CS4,

Adobe Photoshop CS2,

2. Penerapan Aplikasi

CD interaktif pada

komputer

Handphone dengan Flash

Lite v. 2.1

3. Panduan Haji

Belajar Haji, Macam-

macam Haji, Tata Cara,

Sejarah Haji, Waktu

pelaksanaan, Kuis Haji.

Pengertian, Dasar hukum

Sejarah Haji dan Umrah,

Pelaksanaan Haji dan

Umrah beserta Rute

perjalanannya, Doa-Doa

ketika Haji dan Umrah,

Istilah-Istilah

4. Hasil

User dapat dipandu, tetapi

dikhususkan untuk siswa

maupun pelajar

User dapat dipandu melalui

handphone, dan dapat

digunakan untuk kalangan

yang memiliki mobilitas

tinggi.

Page 51: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

51

Judul : Visualisasi Interaktif Panduan Manasik Haji

Dengan Teknologi Multimedia

Jenis Literatur : Skripsi

Penulis : Sartono

Tahun : 2005

No. Perbandingan Penulis Sebelumnya Penulis Sekarang

1. Tools

Menggunakan

Macromedia Director MX,

Flash Mx, Adobe Premier,

Ulead Video Studio,

Adobe Photoshop CS

Menggunakan Adobe

Flash CS4, Adobe

Device Central CS4,

Adobe Photoshop CS2,

Adobe Audition 1.5

2. Penerapan

Aplikasi

CD interaktif pada

computer

Handphone dengan

Flashlite v. 2.1

3. Panduan Haji

Pengertian Haji, Macam-

macam Haji, Syarat,

Rukun dan Wajib Haji,

Tertib Haji, Dalil-Dalil

Haji, Haji Tamatu, Urutan

Pelaksanaan Haji, Kuis

Haji, Haji Tamatu Saja

Pengertian, Dasar hukum

Sejarah Haji dan Umrah,

Pelaksanaan Haji dan

Umrah beserta Rute

perjalanannya, Doa-Doa

ketika Haji dan Umrah,

Istilah-Istilah

4 Hasil

User dapat dipandu, tetapi

pembahasan untuk haji

tamattu’ saja

User dapat dipandu

melalui handphone

dengan pembahasan haji

dan umrah, dan juga

dapat digunakan untuk

kalangan yang memiliki

mobilitas tinggi

Page 52: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

52

Judul : Lomba Pembuatan Media Pembelajaran Berbasis TIK

Departemen Pendidikan Nasional

Jenis Literatur : Praktik dan Peragaan Manasik Haji

Penulis : Drs. Ariasdi,

Dra. Hj. Rahmah

Dra. Hj. Darnis Z.

Tahun : 2006

No Hal-hal yang

diperbandingkan Penulis Sebelumnya Penulis Sekarang

1. Tools

Menggunakan

Macromedia Director MX,

Macromedia Flash MX,

Adobe Audition 1.5,

Ulead Video Studio,

Adobe Photoshop 7.0

Menggunakan

Adobe Flash CS4,

Adobe Audition 1.5

Adobe Device Central CS4,

Adobe Photoshop CS2,

2. Penerapan Aplikasi

CD interaktif pada

komputer

Handphone dengan Flash

Lite v. 2.1

3. Panduan Haji

Kawasan Makkah,

Ketentuan Ibadah, Rute

Haji, Rute Sa’i, Jembatan

Jumrah, Makna Istilah,

Kumpulan Doa, Visualisasi,

Gelombang Haji.

Pengertian, Dasar hukum

Sejarah Haji dan Umrah,

Pelaksanaan Haji dan

Umrah, Rute perjalanannya,

Doa-Doa ketika Haji dan

Umrah, Istilah-Istilah

4. Hasil

User dapat dipandu, tetapi

dikhususkan untuk siswa

maupun pelajar

User dapat dipandu melalui

handphone, dan dapat

digunakan untuk kalangan

yang memiliki mobilitas

tinggi.

Page 53: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

53

2.12. Metodologi Pengembangan Multimedia

Metode penelitian yang digunakan dalam pembuatan aplikasi ini adalah

metode menurut Luther (1994), dalam buku Sutopo (2003), yaitu pengembangan

multimedia dilakukan berdasarkan 6 tahap, yaitu concept, design, material

collecting, assembly, testing, dan distribution. dalam hal ini penulis membatasi

sampai tahap testing atau pengetesan

Concept

Design

Testing

Distribution Assembly

Material Collecting

Gambar 2.14. Tahapan Pengembangan Multimedia

(Sumber: Sutopo, 2003)

Tahapan pengembangan multimedia dapat dijabarkan secara rinci

seperti gambar 2.15.

Page 54: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

54

Gambar 2.15. Tahapan Pengembangan Multimedia secara rinci

2.12.1. Konsep (Concept)

Tahap konsep (concept) yaitu menentukan tujuan, termasuk

identifikasi user, macam aplikasi (presentasi, interaktif, dan lain-lain),

tujuan aplikasi (informasi, pelatihan) dan spesifikasi umum. dasar aturan

untuk perancangan juga ditentukan pada tahap ini, seperti ukuran aplikasi,

target dan lain-lain.

` Dalam tahap konsep perlu diperhatikan:

1. Menentukan tujuan. Pada tahap ini ditentukan tujuan dari

multimedia, serta audiens yang menggunakannya, karena

Page 55: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

55

berpengaruh pada nuansa multimedia sebagai pencerminan

identitas dari pihak yang menginginkan informasi sampai kepada

audiens. secara detail dapat dilihat pada subbab 2.2

2. Memahami karakteristik user. Tingkat kemampuan audiens sangat

mempengaruhi pembuatan desain. Dengan demikian multimedia

dapat dikatakan komunikatif.

2.12.2. Perancangan (Design)

Maksud dari tahap perancangan (design) adalah membuat

spesifikasi secara rinci mengenai arsitektur proyek, gaya, dan kebutuhan

material untuk proyek. Spesifikasi dibuat cukup rinci sehingga pada tahap

berikutnya, yaitu tahap pengumpulan bahan material dan pembuatan tidak

diperlukan keputusan baru, tetapi menggunakan apa yang sudah ditentukan

pada tahap perancangan.

Spesifikasi yang akan dibuat disesuaikan berdasarkan pada:

1. Perancangan storyboard.

2. Desain struktur navigasi.

3. Perancangan diagram tampilan (flowchart).

4. Perancangan diagram transisi (state transition diagram).

5. Perancangan antar muka (interface)

Page 56: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

56

2.12.3. Pengumpulan Bahan Material (Material Collecting)

Pada tahap ini dilakukan pengumpulan bahan seperti image,

animasi, audio, berikut pembuatan gambar grafik, foto, audio, dan lain-lain

yang diperlukan untuk tahap-tahap berikutnya. Pengumpulan objek yang

akan digunakan berdasarkan konsep dan perancangan. Bahan material

yang diperlukan dalam multimedia dapat diperoleh dari berbagai sumber

seperti buku, internet, koleksi ilmiah maupun dari bahan yang terdapat dari

pihak tempat dimana penelitian dilaksanakan.

2.12.4. Pembuatan (Assembly)

Tahap pembuatan (assembly) merupakan tahap dimana seluruh

objek multimedia dibuat. Pembuatan aplikasi berdasarkan storyboard,

flowchart, struktur navigasi atau diagram objek yang berasal dari tahap

perancangan (design). Semua objek atau elemen multimedia dibuat dan

digabungkan menjadi satu kesatuan aplikasi. Pada tahap ini menggunakan

software seperti Adobe Flash CS4, Adobe Device Central CS4, Adobe

Photoshop CS2, dan Adobe Audition 1.5.

Pada Adobe Device Central CS4 penulis menggunakan fitur yang

terdapat didalamnya, yaitu device sets, emulator, file info, memori,

display, local library, dan device profiles. Sedangkan pada Adobe

Audition 1.5. penulis hanya menggunakan fitur kompres file mp3 dan pada

Adobe Photoshop CS2 penulis menggunakan fitur yang terdapat

didalamnya yaitu layer, text tools dan effect layer.

Page 57: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

57

2.12.5. Pengujian (Testing)

Tahap pengujian (testing) dilakukan setelah tahap pembuatan

(assembly) dan seluruh data telah dimasukkan. Tahap pengujian bertujuan

untuk melihat apakah ada kesalahan atau tidak dan memastikan hasil

pembuatan aplikasi multimedia sesuai dengan yang direncanakan.

Pengujian dilakukan sebanyak 2 tahap, tahap pertama dilakukan pada

lingkungan emulator, dan tahap kedua diterapkan pada perangkat (device)

sebenarnya, yaitu media handphone.

Suatu hal yang tidak kalah penting adalah aplikasi harus dapat

berjalan dengan baik dan bermanfaat untuk user yang menggunakannya.

dalam hal ini penulis memberikan testing kepada pihak PT. Arminareka

Perdana dan calon jamaah haji dan umrah dari perusahaan tersebut.

2.12.6. Distribusi (Distribution)

Tahap distribusi adalah tahap dimana hasil evaluasi dan

implementasi aplikasi multimedia dapat disebar-luaskan. Evaluasi ini

dilakukan untuk menentukan pengembangan sistem dalam merevisi atau

memodifikasi aplikasi ini. Beberapa tahap yang dilakukan adalah :

1. Menentukan spesifikasi perangkat keras dan perangkat lunak yang

dibutuhkan untuk menjalankan aplikasi.

2. Panduan penggunaan aplikasi.

3. Evaluasi aplikasi.

4. Distribusi aplikasi.

Page 58: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

58

BAB III

METODOLOGI PENELITIAN

Dalam rangka menyusun skripsi ini diperlukan kelengkapan dan

keabsahan data-data serta informasi yang dapat mendukung kebenaran materi

uraian dan pembahasan. Oleh karena itu sebelum menyusun skripsi ini, penulis

dalam persiapannya terlebih dahulu melakukan studi kasus ke PT. Arminareka

Perdana untuk menjaring data serta informasi atau bahan materi yang diperlukan

untuk ibadah haji dan umrah.

3.1. Metode Pengumpulan Data

Dalam metodologi pengumpulan data yang digunakan oleh penulis untuk

merancang mobile application informasi haji dan umrah ini adalah :

3.1.1. Studi Kepustakaan

Metode pengumpulan kepustakaan atau studi literatur, dilakukan

dengan cara membaca buku-buku yang berkaitan, mencari melalui

website-website khususnya tentang haji dan umrah serta informasi lain

yang berkaitan sehingga dapat dijadikan acuan dalam penulisan skripsi ini.

secara detail dapat dilihat pada Daftar Pustaka.

3.1.2. Wawancara

Metode ini dilakukan pada tanggal 15 Januari 2011 dengan

mewawancarai H. Subaebasni, SE sebagai Direktur Marketing PT.

Page 59: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

59

Arminareka Perdana dan jamaah yang akan melaksanakan ibadah haji dan

umrah di perusahaan tersebut, dengan cara tanya-jawab mengenai hal-hal

yang berkaitan dengan pembelajaran haji dan umroh dan apa-apa yang

dibutuhkan dan diharapkan oleh pengguna dalam perancangan aplikasi

mobile ini agar didapatkan data dan masukan yang mendukung. Hasil

wawancara dapat dilihat pada lampiran.

3.1.3. Observasi

Metode pengumpulan data ini dilakukan Pada 15 januari 2011

sampai dengan 11 Maret 2011, dengan metode pengamatan langsung pada

objek yang ada di PT. Arminareka Perdana Perusahaan untuk

mendapatkan data-data yang diperlukan.

3.1.4. Studi Literatur

Sumber literatur yang dipergunakan di dalam penulisan skripsi ini

adalah studi literatur dari penelitian atau hasil penulisan karya ilmiah.

Sebagai sumber referensi dan bahan acuan terhadap kelebihan dan

kekurangan dari sisi sistem yang telah dirancang. Dapat dilihat pada

subbab 2.11.

Page 60: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

60

3.2. Metodologi Pengembangan Multimedia

3.2.1. Konsep (Concept)

Tahap konsep (concept) yaitu menentukan tujuan, termasuk

identifikasi user, macam aplikasi (presentasi, interaktif, dan lain-lain),

tujuan aplikasi (informasi, pelatihan) dan spesifikasi umum. dasar aturan

untuk perancangan juga ditentukan pada tahap ini, seperti ukuran aplikasi,

target dan lain-lain.

Dalam tahap konsep perlu diperhatikan:

3. Menentukan tujuan aplikasi yaitu untuk memberikan informasi

dengan bentuk mobile application yang memudahkan calon jamaah

dan masyarakat luas dalam mendapatkan informasi haji dan umrah.

4. Deskripsi aplikasi dengan judul Mobile Application Pembelajaran

Haji dan Umrah (Maphum), bentuk aplikasi mobile application,

dengan audiens calon haji dan umrah dan aplikasi ini dijalankan

pada handphone yang mendukung aplikasi flash lite versi 2.1.

3.2.2. Perancangan (Design)

Pada tahap ini penulis membuat spesifikasi aplikasi secara rinci

dalam perancangan aplikasi.

Spesifikasi yang akan dibuat disesuaikan berdasarkan pada:

1. Perancangan Storyboard

Page 61: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

61

Pada aplikasi storyboard sebenarnya berjumlah 65, tetapi

dikarenakan tampilannya hamper sama, maka yang diberikan

contoh ada sebanyak sebanyak 15, yaitu :

1) Storyboard intro info,

2) Storyboard intro animasi,

3) Storyboard menu utama,

4) Storyboard menu utama 2,

5) Storyboard keluar animasi,

6) Storyboard informasi haji dan umrah,

7) Storyboard panduan ibadah,

8) Storyboard doa,

9) Storyboard istilah,

10) Storyboard about aplikasi,

11) Storyboard daftar isi,

12) Storyboard help-bantuan,

13) Storyboard tentang saya,

14) Storyboard menu isi doa,

15) Storyboard menu isi Al-Quran.

Secara detail dapat dilihat pada subbab 4.3.1.

Page 62: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

62

2. Desain Struktur Navigasi

Pada aplikasi ini hanya terdapat 1 desain struktur navigasi,

yaitu struktur navigasi menu utama. Secara detail dapat dilihat

pada subbab 4.3.2.

3. Perancangan diagram tampilan (flowchart).

Ada 3 diagram tampilan (flowchart), yaitu.

1) Flowchart menu utama,

2) Flowchart informasi,

3) Flowchart panduan,

Secara detail dapat dilihat pada subbab 4.3.3.

4. Perancangan diagram transisi (state transition diagram).

Ada 2 state transition diagram (STD), yaitu

1) STD Menu Utama,

2) STD Informasi.

Secara detail dapat dilihat pada subbab 4.3.4.

5. Perancangan antar muka (interface).

Pada aplikasi yang sebenarnya interface ada sejumlah 65,

tetapi dikarenakan pada umumnya tampilan sama, maka yang

diberikan contoh ada sebanyak 10, yaitu :

Page 63: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

63

1) Interface intro,

2) Interface menu utama,

3) Interface menu utama 2,

4) Interface keluar,

5) Interface informasi,

6) Interface panduan ibadah,

7) Interface doa,

8) Interface istilah,

9) Interface daftar isi,

10) Interface tentang aplikasi.

Secara detail dapat dilihat pada subbab 4.3.5.

3.2.3. Pengumpulan Bahan Material (Material Collecting)

Pada tahap ini bahan material yang diperlukan penulis terkait

multimedia seperti image, animasi, audio, pembuatan gambar grafik, foto,

dan lain-lain, penulis peroleh dari berbagai sumber, seperti internet,

koleksi ilmiah, dan hasil pembuatan penulis. Sedangkan bahan-bahan

informasi haji dan umrah penulis peroleh dari PT. Arminareka Perdana

sebagai tempat penelitian penulis, internet seperti panduan praktis ibadah

umrah dan haji plus dan buku-buku terkait haji dan umrah yang secara

detail dapat dilihat pada daftar pustaka.

Page 64: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

64

3.2.4. Pembuatan (Assembly)

Tahap pembuatan (assembly) merupakan tahap dimana seluruh

objek multimedia dibuat. Pembuatan aplikasi berdasarkan storyboard,

flowchart, struktur navigasi atau diagram objek yang berasal dari tahap

perancangan (design). Semua objek atau elemen multimedia dibuat dan

digabungkan menjadi satu kesatuan aplikasi. Pada tahap ini menggunakan

software seperti Adobe Flash CS4, Adobe Device Central CS4, Adobe

Photoshop CS2, dan Adobe Audition 1.5.

Pada Adobe Flash CS4 penulis menggunakan fitur yang terdapat

didalamnya yaitu layer, action script, frame, keyframe, blank keyframe,

playhead, stages, toolbox seperti teks, panel properties yang digunakan

untuk mengatur framerate dan warna background aplikasi, mengatur

bentuk, jenis dan warna teks dan penggunaan menu seperti save, open file,

import, dan test movie.

Pada Adobe Device Central CS4 penulis menggunakan fitur yang

terdapat didalamnya, yaitu device sets, emulator, file info, memori,

display, local library, dan device profiles. Sedangkan pada Adobe

Audition 1.5. penulis hanya menggunakan fitur kompres file mp3 dan pada

Adobe Photoshop CS2 penulis menggunakan fitur yang terdapat

didalamnya yaitu layer, text tools dan effect layer.

Spesifikasi minimum dalam pembuatan aplikasi ini adalah

menggunakan software Adobe Flash CS3, Adobe Device Central CS3

Adobe Photoshop 7, dan Adobe Audition 1.5.

Page 65: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

65

Perangkat handphone yang dapat digunakan untuk menjalankan

aplikasi ini harus memiliki spesifikasi minimal seperti pada tabel 3.1.

Tabel 3.1. Spesifikasi minumum handphone

Spesifikasi Keterangan

Layar 360x640

OS Symbian versi 60

Flash Lite Version Flash Lite 2.1

Memori kosong 1.2 Megabyte

Memori Internal 64 RAM

3.2.5. Pengujian (Testing)

Pada tahap ini, penulis memberikan pengujian kepada salah

satu calon jamaah umrah dan Bapak H. Subaebasni, S.E selaku

Direktur Marketing PT. Arminareka Perdana.

Pengujian dilakukan sebanyak 2 tahap, tahap pertama

dilakukan pada lingkungan emulator, dan tahap kedua diterapkan

pada perangkat (device) sebenarnya, yaitu media handphone. dan

yang tidak kalah penting adalah aplikasi harus dapat berjalan

dengan baik dan bermanfaat untuk user yang menggunakannya.

Page 66: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

66

3.2.6. Distribusi (Distribution)

Dalam hal ini penulis membatasi tidak sampai melakukan

tahap distribusi aplikasi ke perusahaan-perusahaan penyelenggara

perjalanan haji dan umrah, penulis hanya sebatas memberikan

kontribusi ke PT. Arminareka Perdana sebagai tempat penilitian

dan studi kasus yang dilakukan penulis.

Page 67: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

67

BAB IV

PERANCANGAN DAN IMPLEMENTASI

Perancangan Mobile Aplication Pembelajaran Haji dan Umrah

(MAPHUM) dengan flashlite sebagai information atau guide untuk kaum

muslimin yang akan melaksanakan ibadah haji dan umrah berbasis multimedia

didasarkan pada enam tahap (Sutopo, 2003) yaitu, concept, design, material

collecting, assembly, testing, dan implementation.

4.1. Profil Perusahaan

Tabel 4.1. Latar Belakang Perusahaan

(Sumber: Data Primer)

Nama Perusahaan

PT. Arminareka Perdana

Jenis Usaha

Penyelenggara Perjalanan Haji dan

Umrah

Lokasi

Gd. Menara Salemba Lt. V

Alamat Perusahaan

Jl. Salemba Raya No.5

Kota

Jakarta Pusat

Propinsi

DKI Jakarta

Telepon

021 – 39842982

Surat Keputusan/ SK

Kep.21/BPU/II/90

Penerbit SK (ditandatangani oleh)

Zulkarnain Yunus, SH. MH

Berdiri Sejak Tanggal

09 Februari 1990

Page 68: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

68

4.1.1. Visi dan Misi Perusahaan

1. Mengajak Masyarakat untuk melaksanakan ibadah haji dan umrah.

2. Meningkatkan taraf hidup keluarga dan masyarakat.

3. Memberi solusi.

4.1.2. Struktur Organisasi

Tabel 4.2. Struktur PT. Arminareka Perdana

(Sumber: Data Primer)

Komisaris

H. Heru Syam

Direktur Utama

Ir. Hj. Darnelly Guril, M.Sc

Direktur Marketing

H. Subaebasni, SE

Sekretaris Direksi

Widya Eka Rahmawati S.HI

Presenter

Dhani Kusuma

Rita Andayani

Lili Sukarli

IT

Muhammad Sultomi

Riani Rilanda

Bagian Haji Dan Umrah

Hj. Wiwi Sobarsari

Hj. Ria Fitriyah Ramdhani, SE

Administrasi

Cika Nurfianti

Andi Dirgantara

Keuangan

Hj. Ismaeni Lestari

Fitri Nurul Aini

Data Entry

Khumaedi Priyo Leksono, S.Kom

Irwan Saputra, S.Kom

Saiful Amin, S.Kom

Kasir

Diana Manifestari

Imma Tri Septiani, SE

Logistik

Budi Mulyanto

Santoso

Junaidi

Security Suyendi Harmaedi

Page 69: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

69

4.2. Konsep Pengoperasian Program Aplikasi

Program aplikasi yang digunakan yakni aplikasi flash lite 2.1, disini

penulis ingin merancang program aplikasi dan menamakannya dengan aplikasi

MAPHUM (Mobile Application Pembelajaran Haji dan Umrah) yang berbentuk

file berekstensi *.swf yang akan digunakan sebagai sarana penyampain informasi,

tata cara pelaksanaan, doa’ dan hukum yang tertera dalam Al-Qur’an dan Al-

Hadis. yang bertujuan untuk memudahkan kaum muslimin yang akan

melaksanakan ibadah haji maupun umrah dan membantu perusahaan

penyelenggara perjalanan umrah dan haji plus.

Tabel 4.3. Deskripsi Konsep Storyboard perancangan mobile application

Judul Mobile Aplication Pembelajaran Haji dan Umrah (MAPHUM).

Studi Kasus PT. Arminareka Perdana

Audiens PT. Arminareka Perdana dan Calon Jamaah di perusahaan tersebut.

Image Menggunakan format file *.JPG, *.PNG dan *.GIF

Audio Menggunakan format file *.MIDI dan *.MP3 dengan bitrate 8 kbps.

Animasi Animasi gambar dan tombol yang dibuat sendiri oleh penulis

Interaktif Penggunaan tombol navigasi yang memungkinkan user menuju

halaman yang diinginkan.

4.3. Perancangan (Design) Program Aplikasi

Pada tahap ini penulis melakukan perancangan aplikasi berupa

perancangan storyboard, perancangan flowchart, desain struktur navigasi berupa

Page 70: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

70

hirarki menu, perancangan STD (State Transition Diagram) dan perancangan

antarmuka pengguna (user interface).

4.3.1. Perancangan Storyboard

Storyboard merupakan deskripsi tiap tampilan (scene) dengan

mencantumkan semua obyek multimedia serta link ke scene lain sesuai

alur cerita dari deskripsi komponen-komponen aplikasi yang akan

dirancang.

Storyboard yang akan dirancang penulis terdiri dari:

Page 71: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

71

Page 72: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

72

Page 73: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

73

Page 74: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

74

Page 75: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

75

Page 76: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

76

Page 77: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

77

Page 78: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

78

Page 79: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

79

Page 80: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

80

4.3.2. Perancangan Struktur Navigasi

Intro

Menu Utama 1 KeluarMenu Utama 2

Sejarah

Dasar Hukum

Pengertian

Informasi

Hari Arafah

Haji Tamattu’

Haji Qiran

Haji Ifrad

Hajar Aswad

Dam/Fidyah

Doa akhir

Manasik

Doa di

Muzdalifah

Doa di Mina

Doa di Arafah

Doa Bercukur

Doa Sa’i

Doa Thawaf

Doa di

Ka’bah

Bacaan

Talbiyah

Doa Ihram

Bacaan Niat

Doa

Perjalanan

Doa

Rute Umrah

Rute Haji

Panduan Haji

Panduan

Umrah

Panduan

Bagi Wanita

Daftar Isi

Ubah

Tampilan

Pilih Menu

OpsiTentang

Aplikasi

Wuquf

Talbiyah

Thawaf

Tahallul

Sa’i

Rukun Haji

Nafar

Miqat Zamani

Miqat Makani

Maqam

Ibrahim

Mabit

Kiswah

Jumrah

Haji Badal

Haji Mabrur

Istilah

Isthitha’ah

Ihram

Ifadhah

Hijr Ismail

Hari Tasyrik

Hari

Tarwiyah

Hari Nahar

Rancangan Struktur Navigasi

Gambar 4.1. Rancangan Struktur Navigasi

Page 81: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

81

Struktur navigasi yang digunakan adalah hierarchiecal model

dengan sedikit modifikasi. Pada model ini dapat dilihat penggunaan setiap

scene atau layar yang berhubungan dengan scene lainnya.

4.3.2.1. Perancangan Bagan Aliran (Flowchart View)

Sistem flowchart menggambarkan tahapan proses dari suatu

sistem, termasuk sistem multimedia (Suyanto, 2003).

Start

Tampilan Layar Intro

Tampilan Layar Menu Utama

Pilih Menu

Plih Menu

Informasi

Pilih Menu

Panduan

Plih Menu Doa

Plih Menu Istilah

Plih Menu Tentang

Aplikasi

Plih menu Opsi

Pilih Keluar

Tampil Layar

Panduan

Tampil Layar

Informasi

Tampil Layar Doa

Tampil Layar

Istilah

Tampil Layar

Tentang Aplikasi

Tampilan Menu

Opsi

Tidak

Ya

Tidak

Tidak

Tidak

Tidak

Tidak

Ya

Ya

Ya

Ya

Ya

Ya

A

B

C

D

E

PERANCANGAN FLOWCHART MENU UTAMA

End

Gambar 4.2. Rancangan Flowchart Menu Utama

Page 82: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

82

Dari rancangan Flowchart diatas, penulis dapat menyimpulkan bahwa

:

1. Tampilan menu utama sebagai pembuka dan pilihan menu

ditampilkan secara sekaligus untuk efisiensi dan kemudahan

akses dari menu utama ke sub program. sub program di buat

sesederhana mungkin agar user mudah mengerti alur

program dan diharapkan dapat memenuhi kebutuhan “User

Friendly Program”.

Page 83: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

83

A

Pilih

Menu

Pilih Menu

Informasi

Pilih Menu

Pengertian

Pilih Menu

Dasar

Hukum

Pilih Menu

Sejarah

Pilih Menu

Bagi

Wanita

Tampilkan Layar

Informasi

Tampilkan Layar

Pengertian

Tampilkan Layar

Dasar Hukum

Tampilkan Layar

Sejarah

Tampilkan Layar

Bagi Wanita

End

Tidak

Tidak

Tidak

Tidak

Ya

Ya

Ya

Ya

Ya

Rancangan Flowchart

Informasi

Tidak

Gambar 4.3. Rancangan Flowchart Informasi

Page 84: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

84

B

Pilih

Menu

Pilih Menu

Panduan

Pilih Menu

Panduan

Umrah

Pilih Menu

Panduan

Haji

Pilih Menu

Rute Haji

Pilih Menu

Rute Umrah

Tampilkan Layar

Panduan

Tampilkan Layar

Panduan Umrah

Tampilkan Layar

Panduan Haji

Tampilkan Layar

Rute Haji

Tampilkan Layar

Rute Umrah

End

Tidak

Tidak

Tidak

Tidak

Ya

Ya

Ya

Ya

Ya

Rancangan Flowchart Panduan

Tidak

Gambar 4.4. Rancangan Flowchart Panduan

Page 85: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

85

4.3.2.2. Perancangan State Transition Diagram (STD)

Menu Utama

Informasi Panduan Doa

Intro Keluar

Istilah Tentang Aplikasi Opsi

Tekan Tombol “Masuk”

Tampilkan Menu Utama

Tekan Tombol “Informasi”

Tampilkan Layar Informasi

Tekan Tombol “Panduan”

Tampilkan Layar Panduan

Tekan Tombol “Doa”

Tampilkan Layar Doa

Tekan Tombol “Istilah”

Tampilkan Layar Istilah

Tekan “Tentang Aplikasi”

Tampilkan Tentang Aplikasi Tekan Tombol “Opsi”

Tampilkan Layar Opsi

Tekan Tombol “Keluar”

Menutup Aplikasi

Tekan Tombol “Kembali”

Tampilkan Menu Utama Tekan Tombol “Kembali”

Tampilkan Menu Utama

Tekan Tombol “Kembali”

Tampilkan Menu Utama

Tekan Tombol “Kembali”

Tampilkan Menu Utama

Tekan Tombol “Kembali”

Tampilkan Menu Utama

Tekan Tombol “Kembali”

Tampilkan Menu Utama

State Transition Diagram (STD) Menu Utama

Gambar 4.5. STD Menu Utama

Page 86: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

86

Informasi

Pengertian Dasar Hukum

Menu Utama

Sejarah Bagi Wanita

Tekan Tombol “Pengertian”

Tampilkan Layar Pengertian

Tekan Tombol “Dasar Hukum”

Tampilkan Layar Dasar Hukum

Tekan Tombol “Sejarah”

Tampilkan Layar Sejarah

Tekan Tombol “Bagi Wanita”

Tampilkan Layar Bagi Wanita

Tekan Tombol “Kembali”

Tampilkan Layar Menu Utama

Tekan Tombol “Kembali”

Tampilkan Layar Informasi

State Transition Diagram (STD) Informasi

Tekan Tombol “Informasi”

Tampilkan Layar Informasi

Tekan Tombol “Kembali”

Tampilkan Layar Informasi

Tekan Tombol “Kembali”

Tampilkan Layar Informasi

Tekan Tombol “Kembali”

Tampilkan Layar Informasi

Gambar 4.6. STD Informasi

Page 87: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

87

4.3.2.3. Perancangan Antarmuka Pengguna (User Interface)

Rancangan antarmuka pemakai (user interface) yang akan

ditampilkan pada mobile application ini akan disesuaikan dengan

perancangan yang dibuat pada menu dan tampilan sebelumnya yang

sesuai dengan kebutuhan pengguna yang akan menggunakan dan melihat

informasi yang mereka butuhkan. Pada program aplikasi MAPHUM ini

terdapat 10 rancangan layar, yaitu:

1. Rancangan Layar Intro

Rancangan ini merupakan tampilan awal sebelum ke tampilan utama

program. terdiri dari 2 tampilan, yaitu tampilan info pembuka dan

tampilan animasi. Tampilan info pembuka berisi judul aplikasi dan

tombol enter. Tombol enter ini digunakan untuk memasuki tampilan

animasi, setelah tampilan animasi selesai ditampilkan, tampilan menu

utama dari aplikasi akan ditampilkan secara otomatis. Tampilan pembuka

berisi kata selamat datang di Mobile Aplication pembelajaran haji dan

umrah (MAPHUM) dan tampilan animasi,

2. Rancangan Menu Utama

Merupakan tampilan utama dari aplikasi yang dibuat. Tampilan ini

memuat beberapa unsur elemen penting dalam multimedia, yaitu

animasi, teks, gambar, suara latar dan tombol-tombol navigasi. Tombol

navigasi pada tampilan ini terdiri dari 2 tombol utama yang menuju

halaman isi informasi atau materi dari aplikasi, 2 tombol pada opsi

Page 88: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

88

pilihan yang menuju informasi tambahan dari aplikasi seperti pilih menu,

ubah tampilan serta tombol untuk keluar aplikasi.

3. Rancangan Menu Utama 2

Merupakan tampilan alternatif dari menu utama yang memiliki isi

dan tombol navigasi yang sama dengan menu utama.

4. Rancangan Keluar

Tampilan ini digunakan sebagai tampilan keluar aplikasi. terdapat 2

tampilan keluar, yaitu tampilan keluar animasi dan tampilan keluar info.

Setelah user memilih keluar dari aplikasi, tampilan keluar animasi akan

dijalankan secara otomatis, tampilan keluar info akan ditampilkan setelah

tampilan keluar animasi selesai. Pada tampilan keluar info, user di minta

untuk menekan enter untuk menutup aplikasi.

5. Rancangan Menu Informasi

Rancangan ini digunakan untuk menampilkan submenu informasi

haji dan umrah yang terdiri dari 4 tombol navigasi yang menuju halaman

materi informasi haji dan umrah dan tombol navigasi untuk memilih

menu dan tombol navigasi untuk kembali ke halaman menu utama.

Page 89: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

89

6. Rancangan Menu Panduan Ibadah

Rancangan ini digunakan untuk menampilkan submenu panduan

pelaksanaan ibadah yang terdiri dari 4 tombol navigasi yang menuju

halaman panduan pelaksanaan ibadah dan tombol navigasi untuk

memilih menu dan tombol navigasi untuk kembali ke halaman menu

utama.

7. Rancangan Menu Doa

Rancangan ini digunakan untuk menampilkan submenu doa-doa

ketika haji dan umrah. Terdapat 13 tombol navigasi utama untuk

menampilkan bacaan do’a tertentu pada menu doa-doa.ketika haji dan

umrah dan tombol navigasi untuk kembali ke halaman menu utama.

8. Rancangan Menu Istilah

Rancangan ini digunakan untuk menampilkan istilah-istilah yang

berkaitan dengan haji dan umrah. Terdapat 30 tombol navigasi utama,

yaitu tombol navigasi untuk memilih istilah serta tombol navigasi untuk

kembali ke halaman menu utama.

9. Rancangan Menu Daftar Isi

Tampilan ini digunakan untuk menampilkan list isi seluruh isi dari

aplikasi ini. Tombol navigasi berupa tombol untuk memilih list isi,

menuju ke halaman list berikutnya dan tombol ke menu utama.

Page 90: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

90

10. Rancangan Menu Tentang Aplikasi

Rancangan ini digunakan untuk menampilkan informasi tentang fitur

aplikasi, spesifikasi aplikasi, software yang digunakan dalam proses

pembuatan aplikasi, menampilkan data penulis dan tujuan pembuatan

aplikasi. Tombol navigasi berupa tombol kembali kehalaman menu

utama dan tombol untuk memilih informasi aplikasi.

4.4. Pengumpulan Bahan Program Aplikasi (Material Collecting)

Bahan-bahan yang diperlukan untuk membangun aplikasi ini, baik berupa

file teks, gambar animasi, audio dan kontrol navigasi diperoleh dengan cara

mengambil dari berbagai sumber namun sebagian besar elemen banyak yang

dibuat sendiri oleh penulis menggunakan software programming yaitu Adobe

Flash CS4 dan software desain grafis Adobe Photoshop CS2.

4.4.1. Teks

File teks berupa materi yang isinya berhubungan dengan manasik

haji dan umrah, penulis memperoleh data-data berdasarkan dari buku yang

penulis gunakan adalah buku dari Departemen Agama R.I. DirJen

Bimbingan Masyarakat Islam dan Urusan Haji Jakarta 2009 dan juga dari

perusahaan penyelenggara perjalanan umrah dan haji plus PT. Arminareka

Perdana. Hal ini dilakukan agar materi yang disampaikan dapat

dipertanggungjawabkan sesuai dengan ketentuan yang berlaku.

Page 91: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

91

4.4.2. Gambar

File gambar penulis peroleh dari internet, koleksi pribadi dan

dibuat sendiri oleh penulis yang kemudian diolah dengan menggunakan

Adobe Photoshop CS2 dan aplikasi pendukung Adobe Flash CS4 untuk

menambahkan efek-efek seperti bayangan pada gambar, tampilan

background dasar atau gambar latar aplikasi ini.

4.4.3. Animasi

Animasi pada aplikasi ini dibuat dari gambar berbasis bitmap

dengan format PNG dan gambar berbasis vector yang penulis animasikan

menggunakan Adobe Flash CS4.

4.4.4. Audio

Musik latar dan suara pada aplikasi ini didapatkan dari internet dan

koleksi pribadi penulis, berformat MIDI dan MP3. File-file audio tersebut

penulis olah menggunakan Adobe Audition 1.5 dengan melakukan

penurunan bitrate dan pemotongan pada bagian tertentu.

4.4.5. Kontrol Navigasi

Kontrol navigasi berupa tombol (button) yang mengandung link

yang menghubungkan dari satu halaman ke halaman lainnya. Tombol

yang terdapat pada aplikasi didapat dari internet dan penulis buat sendiri

Page 92: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

92

menggunakan Adobe Photoshop dan Adobe Flash. Animasi tombol

dibuat menggunakan Adobe Flash.

Tabel 4.4. Kontrol Navigasi

Button Keterangan

Button yang membawa user

menuju ke halaman menu

informasi haji dan umrah.

Button yang membawa user

menuju ke halaman menu

panduan ibadah.

Button yang membawa user

menuju ke halaman menu doa.

Button yang membawa user

menuju ke halaman menu

istilah.

Button yang membawa user

menuju ke halaman menu

tentang aplikasi.

Button untuk menutup arti dari

ayat qur’an atau doa.

Button yang membawa user

menuju pilihan kearah bawah.

Page 93: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

93

Button yang membawa user

masukke menu utama.

Button yang membawa user

menuju ke halaman sebelumnya.

Button yang membawa user

menuju ke halaman selanjutnya.

Button yang membawa user

menuju pilihan ke arah kiri.

Button yang membawa user

menuju pilihan ke arah kanan.

:: Artinya :: Button yang membawa user

membuka halaman artinya.

Button untuk memilih pilihan

yang ada pada button menu.

Button yang menampilkan menu

pilihan.

Button yang membawa user

menuju ke halaman sebelumnya.

Button untuk menutup aplikasi.

Page 94: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

94

Selain tombol-tombol pada table di atas, terdapat juga tombol

lainnya yang memiliki fungsi untuk link ke halaman berikutnya

maupun untuk memilih menu.

4.5. Pembuatan Program Aplikasi (Assembly)

Pada tahap ini semua bahan-bahan yang telah terkumpul seperti elemen-

elemen multimedia diintegrasikan menggunakan Adobe Flash CS4. Pada Adobe

Flash CS4 ini dilakukan pengkodingan dengan bahasa pemrograman flash yaitu

actionscript 2.0 dengan acuan pemrograman flash lite versi 2.1 hingga

menghasilkan file berformat SWF Movie (.swf) atau file yang dapat dijalankan

menggunakan flash lite player. Dalam pembuatan aplikasi ini penulis

menggunakan spesifikasi ukuran layer 360x640 pixel dengan tampilan fullscreen

dengan quality di set high, dan framerate 15 fps.:

4.5.1. Spesifikasi Perangkat Lunak

Untuk merancang mobile application pembelajaran haji dan

umrah ini menggunakan spesifikasi perangkat lunak sebagai

berikut:

1. Adobe Flash CS4 untuk perangkat lunak utama yang berfungsi

menggabungkan semua komponen program yang telah dibuat.

2. Adobe Device Central CS4 untuk pengujian emulator

perangkat handphone dan memastikan hasil aplikasi berjalan

dengan baik.

Page 95: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

95

3. Adobe Photoshop CS2 untuk mendesain gambar tampilan layer

program, desain tulisan, desain tombol, dan mendesain segala

animasi yang dibutuhkan.

4. Adobe Audition 1.5 untuk memberikan efek suara pada

aplikasi.

4.5.2. Spesifikasi Perangkat Keras

Untuk mengembangkan dalam perancangan mobile application

pembelajaran haji dan umrah ini penulis menggunakan komputer dengan

spesifikasi perangkat keras (hardware) sebagai berikut :

1. AMD Phenom X3, 2.3 GHz.

2. Memory 2 GB RAM.

3. Kartu VGA 512 MB.

4. Harddisk 300 GB.

5. Monitor dengan resolusi 1152x864 pixel.

6. Speaker Active.

7. Mouse.

8. Keyboard.

9. Bluetooth device.

10. Kabel data mini USB / Card reader.

Page 96: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

96

Setelah spesifikasi hardware dan software dipenuhi, tahap selanjutnya

adalah tahap pembuatan dengan menggunakan perangkat lunak yang telah

disiapkan, berikut tahapan-tahapan penting dalam pembuatan aplikasi.

Proses pertama yang penulis lakukan adalah membuat gambar latar

aplikasi dan gambar lainnya seperti logo-logo, icon menggunakan aplikasi

pengolah gambar Adobe Photoshop CS2.

Gambar 4.7. Pembuatan gambar latar aplikasi dengan Adobe Photoshop CS2.

Setelah gambar latar dan gambar lainnya yang dibutuhkan selesai, penulis

menggunakan Adobe Flash CS4 untuk membuat aplikasi mobile termasuk

navigasi-navigasinya dan perancangan user interface atau tampilan aplikasi.

Demikian pula dengan animasi yang dibuat penulis dalam pembuatan

aplikasi. Animasi digunakan pada tampilan intro menggunakan teknik motion

tween, teknik ini juga digunakan pada pembuatan animasi layer penutup.

Page 97: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

97

Gambar berikut adalah pembuatan tampilan menu utama. Menu utama

otomatis ditampilkan setelah layar intro selesai dimainkan.

Gambar 4.8. Pembuatan Layar Menu Utama

Gambar latar dan gambar lainnya dirancang oleh penulis, teks keterangan

untuk tombol-tombol di buat untuk melengkapi tampilan menu utama. Script pada

menu utama digunakan pada frame untuk menampilkan jam, tanggal dan waktu.

Script juga digunakan pada tombol untuk masuk ke content aplikasi, membuka

menu opsi dan keluar aplikasi.

Pembuatan tampilan menu informasi, menu panduan ibadah, menu doa,

menu istilah dan menu tentang aplikasi kurang lebih sama dengan pembuatan

Page 98: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

98

layar menu utama. Script juga terdapat pada frame dan tombol untuk menuju

menu atau content pada aplikasi.

Pada pembuatan layar al Qur’an atau Hadits, script digunakan pada frame

dan tombol. Pada layar ini terdapat tampilan ayat al Qur’an yang menggunakan

gambar berformat GIF transparan. Penulis menggunakan gambar berformat GIF

adalah untuk mendapatkan gambar berukuran kecil sehingga hasil dari aplikasi

akan menghasilkan file dengan ukuran kecil pula.

Gambar 4.9. Pembuatan Layar al Qur’an

Proses selanjutnya, penulis memasukkan suara latar dengan format MIDI,

file ini digunakan karena berukuran kecil dan pada layar al Qur’an, penulis

menggunakan file suara berformat mp3. Penulis menggunakan perangkat lunak

Page 99: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

99

Adobe Audition 1.5 untuk pengeditan file audio sehingga mendapatkan mp3

dengan bitrate 16 KBps dengan tujuan mendapatkan file ukuran kecil.

4.6. Pengujian Program Aplikasi (Testing)

Pada tahap ini penulis melakukan pengujian (testing) terhadap program

aplikasi yang dibuat. Pertama-tama testing dilakukan pada emulator Adobe

Device Central CS4 untuk memastikan apakah hasilnya sesuai rencana dan bisa

berjalan dengan baik. Pengujian selanjutnya dilakukan pada perangkat handphone

yang sesungguhnya dengan tujuan untuk mengetahui apakah program aplikasi

Maphum ini berjalan dengan baik.

Adapun spesifikasi handphone yang dapat menggunakan aplikasi yaitu:

1. Mempunyai system operasi (OS) Symbian Versi 5.0 keatas.

2. Mendukung Aplikasi Flashlite 2.1

3. Sisa kapasitas memori penyimpanan minimal 1.5 Megabyte atau lebih

sebagai tempat media penyimpanan aplikasi.

Berikut ini adalah tabel spesifikasi ponsel yang digunakan dalam

pengujian aplikasi mobile application pembelajaran haji dan umrah ini.

Tabel 4.5. Spesifikasi ponsel Nokia 5800 Express Musik yang digunakan

Spesifikasi Keterangan

Layar TFT 2.8", 360x640 pixel

16.7 juta warna

Network GPRS, EDGE, HSDPA, WLAN

Page 100: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

100

OS Symbian versi 9.4 S60 5th Edition

CPU Dual ARM 11 332 MHz processor,

3D Graphics HW Accelerator

browser WAP 2.0/xHTML, HTML

Konektivitas Bluetooth, WiFi, Mini USB

Flash Lite Version Flash Lite 3.0

Memori Internal 81 MB, 128 MB RAM/ 256 MB ROM

Untuk pengujian menggunakan perangkat ponsel, pertama-tama aplikasi

ditransfer dari komputer ke dalam ponsel dengan memanfaatkan fitur konektifitas

yang tersedia pada perangkat ponsel diantaranya: Bluetooth, miniUSB dan card

reader. Setelah proses transfer selesai, aplikasi ini langsung dapat dijalankan

tanpa proses instalasi terlebih dahulu. Tampilan pada ponsel setelah aplikasi

dijalankan dapat dilihat seperti gambar berikut ini.

Gambar 4.10. Pengujian aplikasi pada perangkat ponsel Nokia 5800 EM

Page 101: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

101

Hasil dari pengujian pada perangkat ponsel memperlihatkan bahwa

aplikasi ini dapat berjalan dengan baik dan sesuai dengan pengujian pada emulator

Adobe Device Central CS4 yang dilakukan sebelumnya.

4.7. Distribusi Program Aplikasi (Distribution)

Aplikasi yang telah melalui tahap pengetesan pada emulator maupun

perangkat ponsel selanjutnya dikemas dalam bentuk CD (Compact Disk), Pada

tahap ini penulis membatasi sampai melakukan tahap evaluasi atau pengujian

terhadap perancangan dan implementasi mobile application pembelajaran haji dan

umrah saja, karena pada tahap metodelogi penelitian sebelumnya penulis telah

membatasi hanya sampai tahap testing atau pengujian.

Page 102: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

102

BAB V

KESIMPULAN DAN SARAN

5.1. Kesimpulan

Berdasarkan uraian pada bab-bab sebelumnya, maka dapat diambil

kesimpulan sebagai berikut :

1. Setiap manusia yang memiliki tingkat rutinitas yang padat dan mobilitas

yang tinggi maka handphone sebagai suatu perangkat teknologi yang

kompleks dan canggih, tidak terpisahkan dalam kehidupan sehari-hari.

karna selain sebagai alat komunikasi, handphone juga memiliki fitur

multimedia yang dapat difungsikan dalam membantu menerapkan aplikasi

pembelajaran manasik haji dan umrah.

2. Penerapan aplikasi yang dikembangkan, dapat didistribusikan pada

perangkat handphone yang sudah mendukung aplikasi Flash lite 2.1

berbasis symbian sehingga pengguna dapat dengan mudah menggunakan

Aplikasi Mobile Pembelajaran Haji dan Umrah kapan saja.

3. Dengan adanya aplikasi MAPHUM (Mobile Application Pembelajaran

Haji dan Umrah) besar harapan dapat membantu dalam, Memberikan

solusi pelayanan kepada pihak Perusahaan peyelenggara kegiatan ibadah

haji dan umrah, Hemat karena tidak menggunakan pulsa dan Cepat karena

tidak menggunakan koneksi internet dalam mengaksesnya.

Page 103: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

103

5.2. Saran

Dengan kemajuan teknologi yang sangat pesat, diharapkan adanya

kemudahan dalam setiap aplikasi yang dibuat. Perancangan aplikasi MAPHUM

harus selalu semakin baik dari yang ada sebelumnya dimasa mendatang dan

diharapkan aplikasi dapat dikembangkan dengan fasilitas tambahan yang berbeda.

Adapun saran-saran lain adalah :

1. Aplikasi MAPHUM ini hanya bisa menampilkan informasi seputar

pembelajaran haji dan umrah saja, dan belum bisa online untuk melakukan

pendaftaran calon jamaah haji/umrah, melakukan transaksi, seperti

pembayaran biaya pendaftaran. mengingat aplikasi MAPHUM ini hanya

sebatas informasi untuk kalangan yang hampir seluruhnya merupakan

peserta dengan mobilitas yang tinggi atau memiliki aktivitas yang padat,

sehingga aplikasi ini akan lebih memudahkan para pengguna jika memiliki

fasilitas tersebut.

2. Penggunaan multi bahasa pada aplikasi ini yang akan memberikan manfaat

dan target pengguna (user) yang lebih luas dibanding menggunakan satu

bahasa.

3. Semoga pengembangan aplikasi MAPHUM ini tidak sebatas pada

handphone dengan Operating System Symbian saja tetapi juga dapat

dijalankan pada handphone Smartphone berbasis java.

Page 104: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

104

Daftar Pustaka

Adobe System Incorporated. 2007. Adobe Flash CS3 Professional Create and

Deliver Rich, Interactive Content. http://wwwimages.adobe.com/www.adobe.com

/products/flash/pdfs/flash_datasheet.pdf. 11 maret 2011, 11.11 WIB.

Adobe System Incorporated. 2007. LEARNING FLASHLITE 1.x

ACTIONSCRIPT. http://livedocs.adobe.com/flash/9.0/main/flashlite1_as_learning.

pdf. 12 Februari 2010, 15.00 WIB.

Adobe System Incorporated. 2008. About Adobe Device Central.

http://help.adobe.com/en_US/DeviceCentral/2.0_UsingDeviceCentral/WS3E3B31

C4-CD66-4bad-B6E8-56F88AED8511a.html. 16 Februari 2010, 08.56 WIB.

Adobe System Incorporated. 2008. Introducing Device Central.

http://www.adobe.com /devnet/devices/ articles/introducing_device_central.html.

14 Februari 2010, 10.15 WIB.

Agung, G. 2005. Beginner's Guide Adobe Photoshop CS2. Jakarta: PT Elex Media

Komputindo.

Al-Qur’an dan Terjemahannya. Kompleks Percetakan al- Qur’an Raja Fahad

Budiarjo. 2008. Video: Flash Lite and Flash 10.1’s Difference. http://www.adobe-

flashlite.com/?p=1624. 07 Maret 2011, 17:21 WIB

Darma. 2009. Buku Pintar Menguasai Multimedia. Jakarta: MediaKita.

Elrom, E. 2009. AdvancED Flash on Devices: Mobile Development with Flash

Lite and Flash 10. United States of America: Friendsof.

Page 105: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

105

Fanani, A.Z. 2007. Bermain Logika ActionScript. Macromedia Flash Pro 8.

Jakarta: PT Elex Media Komputindo.

Faraday. 2009. Twittle: A Flash Lite Twitter Client. http://flashedmobile.blogspot.

com/2009/04/twittle-flash-lite-twitter-client.html. 10 Februari, 2010 13:49.

Forum Nokia, 2010. Flash Lite Developer's Library 1.6. http://library.forum.

nokia.com/index.jsp?topic=/Flash_Lite_Developers_Library/GUID-A53E1022-

2EC2-44D3-A04D-E6735C9637C3.html. 09 Maret 2011, 09.11 WIB.

Gaol, C. J. L. 2008. Sistem Informasi Manajemen. Jakarta: Grasindo

Global Web Site. 2009. Introduction to Flash Lite E-learning. http://www.forum.

nokia.com/ info/sw.nokia.com/id/184088f1-358d-4b5b-ba4d-b1262ae32f9f/

Introduction_to_Flash_Lite_E-learning.html#). 14 Februari 2010, 07.15 WIB.

Hakim, L. 2004. Membuat Grafik Web yang Menarik dengan Photoshop. Jakarta:

PT Elex Media Komputindo.

Harto, D. B. 2008. Pertimbangan Estetika Dalam Perancangan Multimedia

Interaktif (MPI). http://www.scribd.com/doc/57243858/15-Dwi-Budi-Harto, 01

Maret 2010, 23:12 WIB.

Kusrianto, A. 2006. Panduan Lengkap Memakai Macromedia Flash Professional

8. Jakarta: PT Elex Media Komputido.

Madcoms. 2009. Mahir dalam 7 Hari: Adobe Flash CS4. Madiun: Madcoms

Madiun.

Page 106: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

106

McMahon, F. 2008. Audition 1.5: Audio Secrets Part 1. http://library.

creativecow.net/articles/mcmahon_frank/Audition1.php. 20 Februari 2010, 22.15

WIB.

Pressman, R. S. 2002. Rekayasa Perangkat Lunak Pendekatan Praktisi.

Yogyakarta: Andi.

Pustaka, R.K. 2008. Pintar 256 Software Komputer. Jakarta: Kawan Pustaka

Rudi, R. 2009. Game Ponsel Paling Populer. Yogyakarta: MediaKom.

Rankine, D. 2009. What Can I Make with Flash Lite. http://vimeo.com/6727455.

11 April 2010, 13:25 WIB.

Soeherman, B. 2007. Membuat Karikatur dengan Photoshop. Jakarta: PT Elex

Media Komputindo.

Siswoutomo, W. 2007. Membangun Aplikasi Ponsel Menggunakan Flash 8.

Jakarta: PT. Elex Media Komputindo

SmithDev Community. 2009. 36 Menit Belajar Komputer Adobe Photoshop CS4.

Jakarta: PT Elex Media Komputindo.

Subaebasni.2010. Panduan Jamaah Haji dan Umrah. http://www.arminareka.com

/index.php?menu=panduan-umrahdanhajiplus. 23 Januari 2011, 13.10 WIB.

Sugiarto, A. 2007. Fotografi Ponsel Murah, Mudah, Indah. Jakarta: PT Gramedia

Pustaka Utama.

Nugroho, F. 2005. Membuat Animasi Kartu Ucapan dengan Flash 8. Jakarta: PT

Elex Media Komputido.

Page 107: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

107

Suryana, N. 2008. Arsitektur Mobile Application dengan Platform Propietary.

http://informatika.lipi.go.id/publikasi/arsitektur-mobile-application-dengan-

platform-propietary.html, 08 Maret 2011, 14:45 WIB.

Sutopo. A.H. 2003. Multimedia Interaktif dengan Flash. Yogyakarta: Graha Ilmu.

Suyanto, M. 2003. Multimedia Alat untuk Meningkatkan Keunggulan Bersaing.

Yogyakarta: Andi.

Syarif, A.M. 2003. Bedah Action Script : Menguasi Penulisan Skrip Macromedia

Flash MX. Jakarta: PT. Elex Media Komputindo.

Thabrani, S. 2006. Buku Latihan Membuat Aplikasi untuk Ponsel dan Web dengan

Flash Professional 8. Jakarta: PT Elex Media Komputido.

Tuhusetya, S. 2010. Ragam Bahasa Media dalam Perspektif Pembelajaran

Bahasa. http://www.cintabahasa.co.cc/2009/04/ragam-bahasa-media-dalam-

perspektif_24.html, 20 mei 2011, 14:47 WIB.

Wilson, P. 2005. Getting Started With Flash Lite. http://www.communitymx.com/

download.cfm?cid=95A1E. 07 Maret 2011, 16:27 WIB.

Wisnu. 2002. Topik 3 : Analisis. http://images.lie2phoet.multiply.multiplycontent.

com/attachment/0/S1atNwooCkUAABDhZ6c1/bab_3_analisis.pdf?key=lie2phoet

:journal:45&nmid=311680078. 08 Maret 2011, 22.10 WIB.

Yoga. 2005. CorelDraw untuk Bisnis. Jakarta: PT Elex Media Komputido.

YongFei, L. 2010. Video: Flash Lite and Flash 10.1’s Difference.

http://www.adobe-flashlite.com/?p=1624. 07 Maret 2011, 17:21 WIB.

Page 108: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

108

Page 109: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

109

Page 110: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

110

Page 111: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

111

Page 112: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

112

Page 113: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

113

Lampiran IV - Kuisioner Evaluasi

Nama : ___________________________

Tanggal : ___________________________

1. Apakah icon dan navigasi yang terdapat aplikasi dapat di mengerti ?

a. Ya ( )

b. Tidak ( )

2. Apakah informasi dan panduan aplikasi ini mudah digunakan ?

a. Ya ( )

b. Tidak ( )

3. Apakah aplikasi ini memudahkan anda dalam memperoleh informasi

haji dan umrah ?

a. Ya ( )

b. Tidak ( )

4. Apakah anda merasa kesulitan dalam menggunakan aplikasi ini ?

a. Ya ( )

b. Tidak ( )

5. Apakah tampilan aplikasi ini menarik ?

a. Ya ( )

b. Tidak ( )

Page 114: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

114

Lampiran V – Hasil Kuisioner Evaluasi

1. Apakah icon dan navigasi yang terdapat aplikasi dapat di mengerti ?

Pertanyaan ini dimaksudkan untuk mengetahui apakah para pengguna (user)

dapat memahami icon dan navigasi yang terdapat dalam aplikasi. Sebahagian

besar pengguna dapat mengerti icon dan navigasi aplikasi ini.

Jawaban Jumlah Presentase (%)

Ya 9 90 %

Tidak 1 10 %

Jumlah 10 100%

2. Apakah Aplikasi Mobile Pembelajaran Haji dan Umrah ini mudah

digunakan ?

Pertanyaan ini dimaksudkan untuk mengetahui apakah aplikasi MAPHUM ini

mudah digunakan. Sebahagian besar pengguna dapat dengan mudah

menggunakan aplikasi ini.

Jawaban Jumlah Presentase (%)

Ya 9 90 %

Tidak 1 10 %

Jumlah 10 100%

Hasil Pertanyaan 1

Ya

Tidak

Hasil Pertanyaan 2

Ya

Tidak

Page 115: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

115

3. Apakah aplikasi ini memudahkan anda dalam memperoleh informasi

haji dan umrah ?

Pertanyaan ini dimaksudkan untuk mengetahui apakah dengan menggunakan

aplikasi ini, pengguna dapat dengan mudah memperoleh informasi haji dan

umrah. Ternyata seluruh pengguna menjawab ”Ya”, artinya aplikasi ini

memudahkan dalam memperoleh informasi haji dan umrah.

Jawaban Jumlah Presentase (%)

Ya 10 100 %

Tidak 0 0 %

Jumlah 10 100%

4. Apakah anda merasa kesulitan dalam menggunakan aplikasi ini ?

Pertanyaan ini dimaksudkan untuk mengetahui apakah pengguna merasa ada

kesulitan dalam menggunakan aplikasi. Sebahagian besar pengguna

menjawab ”Tidak”, artinya aplikasi ini dapat dengan mudah digunakan.

Jawaban Jumlah Presentase (%)

Ya 9 90 %

Tidak 1 10 %

Jumlah 10 100%

Hasil Pertanyaan 3

Ya

Tidak

Hasil Pertanyaan 4

Ya

Tidak

Page 116: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

116

5. Apakah tampilan aplikasi ini menarik ?

Pertanyaan ini dimaksudkan untuk mengetahui apakah aplikasi ini menarik.

Ternyata seluruh pengguna menjawab ”Ya”, artinya aplikasi ini menarik.

Jawaban Jumlah Presentase (%)

Ya 10 100 %

Tidak 0 0 %

Jumlah 10 100%

Hasil Pertanyaan 5

Ya

Tidak

Page 117: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

117

Page 118: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

118

Page 119: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

119

Lampiran VII – Penulisan Source Code

fscommand2("FullScreen", "true");

fscommand2("DisableKeypadCompatibilityMode");

stop();

stop();

var today_date:Date = new Date();

var dayOfWeek_array:Array = new Array("Minggu", "Senin", "Selasa", "Rabu",

"Kamis", "Jum'at", "Sabtu");

var day_str:String = dayOfWeek_array[today_date.getDay()];

var month_array:Array = new Array("Januari", "Februari", "Maret", "April",

"Mei", "Juni", "Juli", "Augustus", "September", "Oktober", "November",

"Desember");

getyear = fscommand2("GetDateYear");

var month_str:String = month_array[today_date.getMonth()];

var date_str:String = (today_date.getDate()+" "+month_str+ " " +getyear);

hariTb.text = day_str

dateTb.text = date_str

tellTarget("soundcontainer"){gotoAndPlay(2);}

onClipEvent (enterFrame)

{

h = fscommand2("GetTimeHours");

m = fscommand2("GetTimeMinutes");

if (h<10)

{h="0"+h;}

if (m<10)

{m="0"+m;}

jam.text = h+":"+m;

}

on (press)

{

if(birudoa._x == 127 && birudoa._y == 98)

{

gotoAndStop(13);

}

else

{

birudoa._x = 127;

birudoa._y = 98;

keterangan.text = "Do'a Sa'i";

}

Page 120: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

120

}

on (press)

{

if(birudoa._x == 235 && birudoa._y == 98)

{

gotoAndStop(14);

}

else

{

birudoa._x = 235;

birudoa._y = 98;

keterangan.text = "Bacaan Niat Haji dan Umrah";

}

}

on (release)

{

gotoAndStop(3);

}

on (press)

{

artihdu2._x = 12.45;

artihdu1._x = 500;

vbawah._x = 500;

vatas._x = 0;

}

on (press)

{

artihdu1._x = 12.45;

artihdu2._x = 500;

vbawah._x = 500;

vbawah._x = 330;

vatas._x = 500;

}

on (press)

{

tmbartinya._x = 93.2;

putihartinya._x = 500;

xtutup._x = 500;

artidoakeluarrumah._x = 500;

artidoasai._x = 500;

artihdu1._x = 500;

Page 121: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

121

artihdu2._x = 500;

vatas._x = 500;

vbawah._x = 500;

selesaiihram._x = 500;

artiMH1._x = 500;

artiMH2._x = 500;

artithawaf._x = 500;

artiwuquf._x =500;

}

on (release) {

gotoAndPlay(1);

}

on (press) {

if (opsiquran._x == 500)

{

opsiquran._x = 4.75;

xtutup._x = 315.8;

textopsi2._x = 96.5;

op1._x = 6.2;

op2._x = 6.2;

op3._x = 6.2;

op4._x = 6.2;

op5._x = 6.2;

}

else

{

opsiquran._x = 500;

xtutup._x = 500

textopsi2._x = 500;

merahopsi._x = 500;

}

}

on (press)

{

if(birudoa._x == 235 && birudoa._y == 98)

{

gotoAndStop(14);

}

else

{

birudoa._x = 235;

birudoa._y = 98;

keterangan.text = "Bacaan Niat Haji dan Umrah";

Page 122: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

122

}

}

on (press)

{

if(kmu._x == 129.5)

{

gotoAndStop(28);

}

else

{

kmu._x = 129.5;

kmu._y = 243;

keterangan.text = "Panduan Haji dan Umrah";

}

}

on (press)

{

if(kmu._x == 236)

{

gotoAndStop(6);

}

else

{

kmu._x = 236;

kmu._y = 243;

keterangan.text = "Do'a Haji dan Umrah";

}

}

on (press)

{

if(kmu._x == 76)

{

gotoAndStop(26);

}

else

{

kmu._x = 76;

kmu._y = 350;

keterangan.text = "Istilah Haji dan Umrah";

}

}

on (press)

Page 123: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

123

{

if(kmu._x == 184)

{

gotoAndStop(7);

}

else

{

kmu._x = 184;

kmu._y = 350;

keterangan.text = "Tentang Aplikasi";

}

}

on (press)

{

if(merahopsi._x == 6.2 and merahopsi._y == 444.25)

{

gotoAndStop(3);

}

else

{

merahopsi._x = 6.2;

merahopsi._y = 444.25;

}

}

on (press)

{

if(merahopsi._x == 6.2 and merahopsi._y == 474.8)

{

gotoAndStop(4);

}

else

{

merahopsi._x = 6.2;

merahopsi._y = 474.8;

}

}

on (press)

{

if(merahopsi._x == 6.2 and merahopsi._y == 504.8)

{

gotoAndStop(2);

}

else

Page 124: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

124

{

merahopsi._x = 6.2;

merahopsi._y = 504.8;

}

}

on (press)

{

if(merahopsi._x == 6.2 and merahopsi._y == 536.3)

{

gotoAndStop(25);

}

else

{

merahopsi._x = 6.2;

merahopsi._y = 536.3;

}

}

on (release)

{

gotoAndStop(2);

}

on (press)

{

if(merahopsi._x == 6.2 and merahopsi._y == 566.3)

{

gotoAndStop(5);

}

else

{

merahopsi._x = 6.2;

merahopsi._y = 566.3;

}

}

on (release) {

if (opsimenuutama2._x == 500)

{

opsimenuutama2._x = 4.75;

xtutup._x = 315.8;

textopsi._x = 96.5;

merahopsi2._x = 6.2;

}

else

Page 125: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

125

{

opsimenuutama2._x = 500;

xtutup._x = 500

textopsi._x = 500;

merahopsi2._x = 500;

}

}

on (release) {

if (opsimenuutama2._x == 500)

{

if(kmu2._y == 130)

{

kmu2._y = 410;

}

else if(kmu2._y == 200)

{

kmu2._y = 130;

}

else if(kmu2._y == 270)

{

kmu2._y = 200;

}

else if(kmu2._y == 340)

{

kmu2._y = 270;

}

else if(kmu2._y == 410)

{

kmu2._y = 340;

}

}

else if(merahopsi2._x == 6.2 and opsimenuutama2._x != 500)

{

if(merahopsi2._y == 363)

{

merahopsi2._y = 333;

}

else if(merahopsi2._y == 393)

{

merahopsi2._y = 363;

}

else if(merahopsi2._y == 425)

{

merahopsi2._y = 393;

}

Page 126: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

126

else if(merahopsi2._y == 455)

{

merahopsi2._y = 425;

}

else if(merahopsi2._y == 333)

{

merahopsi2._y = 455;

}

}

}

on (release) {

if (opsimenuutama2._x == 500)

{

if(kmu2._y == 130)

{

gotoAndStop(27);

}

else if(kmu2._y == 200)

{

gotoAndStop(28);

}

else if(kmu2._y == 270)

{

gotoAndStop(6);

}

else if(kmu2._y == 340)

{

gotoAndStop(26);

}

else if(kmu2._y == 410)

{

gotoAndStop(7);

}

}

else if(merahopsi2._x == 6.2 and opsimenuutama2._x != 500)

{

if(merahopsi2._y == 333)

{

gotoAndStop(2);

}

else if(merahopsi2._y == 363)

{

gotoAndStop(3);

}

else if(merahopsi2._y == 393)

Page 127: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

127

{

gotoAndStop(2);

}

else if(merahopsi2._y == 425)

{

gotoAndStop(25);

}

else if(merahopsi2._y == 455)

{

gotoAndStop(5);

}

}

}

on (release) {

if (opsimenuutama2._x == 500)

{

if(kmu2._y == 130)

{

kmu2._y = 200;

}

else if(kmu2._y == 200)

{

kmu2._y = 270;

}

else if(kmu2._y == 270)

{

kmu2._y = 340;

}

else if(kmu2._y == 340)

{

kmu2._y = 410;

}

else if(kmu2._y == 410)

{

kmu2._y = 130;

}

}

else if(merahopsi2._x == 6.2 and opsimenuutama2._x != 500)

{

if(merahopsi2._y == 333)

{

merahopsi2._y = 363;

}

else if(merahopsi2._y == 363)

Page 128: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

128

{

merahopsi2._y = 393;

}

else if(merahopsi2._y == 393)

{

merahopsi2._y = 425;

}

else if(merahopsi2._y == 425)

{

merahopsi2._y = 455;

}

else if(merahopsi2._y == 455)

{

merahopsi2._y = 333;

}

}

}

on (release) {

opsimenuutama2._x = 500;

xtutup._x = 500

textopsi._x = 500;

merahopsi2._x = 500;

}

on (press)

{

if(birudoa._x == 18 && birudoa._y == 450)

{

gotoAndStop(12);

}

else

{

birudoa._x = 18;

birudoa._y = 450;

keterangan.text = "Do'a Keluar Rumah";

}

}

on (press)

{

if(birudoa._x == 127 && birudoa._y == 450)

{

gotoAndStop(8);

}

else

Page 129: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

129

{

birudoa._x = 127;

birudoa._y = 450;

keterangan.text = "Do'a Selesai Haji atau Umrah";

}

}

on (press)

{

if(birudoa._x == 235 && birudoa._y == 450)

{

gotoAndStop(11);

}

else

{

birudoa._x = 235;

birudoa._y = 450;

keterangan.text = "Do'a Ketika Tiba di Tanah Air";

}

}

on (press)

{

if(birudoa._x == 18 && birudoa._y == 333)

{

gotoAndStop(18);

}

else

{

birudoa._x = 18;

birudoa._y = 333;

keterangan.text = "Do'a Ketika Thawaf";

}

}

on (press)

{

if(birudoa._x == 127 && birudoa._y == 333)

{

gotoAndStop(10);

}

else

{

birudoa._x = 127;

birudoa._y = 333;

keterangan.text = "Do'a Tahalul (Bercukur)";

Page 130: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

130

}

}

on (press)

{

if(birudoa._x == 235 && birudoa._y == 333)

{

gotoAndStop(19);

}

else

{

birudoa._x = 235;

birudoa._y = 333;

keterangan.text = "Do'a Wuquf Arafah";

}

}

on (press)

{

if(birudoa._x == 18 && birudoa._y == 215)

{

gotoAndStop(15);

}

else

{

birudoa._x = 18;

birudoa._y = 215;

keterangan.text = "Do'a di Muzdalifah";

}

}

on (press)

{

if(birudoa._x == 127 && birudoa._y == 215)

{

gotoAndStop(2);

}

else

{

birudoa._x = 127;

birudoa._y = 215;

keterangan.text = "Do'a Selesai Ihram";

}

}

on (press)

Page 131: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

131

{

if(birudoa._x == 235 && birudoa._y == 215)

{

gotoAndStop(17);

}

else

{

birudoa._x = 235;

birudoa._y = 215;

keterangan.text = "Do'a Masuk Masjidil Haram";

}

}

on (press)

{

if(birudoa._x == 18 && birudoa._y == 98)

{

gotoAndStop(9);

}

else

{

birudoa._x = 18;

birudoa._y = 98;

keterangan.text = "Do'a Ketika Sampai di Mina";

}

}

on (release) {

gotoAndStop(3);

}

on (press)

{

tmbartinya._x = 500;

putihartinya._x = 4.75;

xtutup._x = 315;

artidoakeluarrumah._x = 12.45;

}

on (press)

{

tmbartinya._x = 500;

putihartinya._x = 4.75;

xtutup._x = 315;

artidoasai._x = 12.45;

}

Page 132: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

132

on (press)

{

tmbartinya._x = 500;

putihartinya._x = 4.75;

xtutup._x = 315;

artihdu1._x = 12.45;

vbawah._x = 330;

}

on (press)

{

tmbartinya._x = 500;

putihartinya._x = 4.75;

xtutup._x = 315;

selesaiihram._x = 12.45;

}

on (press)

{

tmbartinya._x = 500;

putihartinya._x = 4.75;

xtutup._x = 315;

if (arti1._x == 28.5)

{

artiMH1._x = 12.45;

artiMH2._x = 500;

}

else (arti2._x == 33.5)

{

artiMH2._x = 12.45;

artiMH1._x = 500;

}

}

on (press)

{

arti1._x = 28.5;

arti2._x = 500;

artimasuk1._x = 30.9;

artimasuk2._x = 500;

vbawah._x = 171;

vatas._x = 500;

}

on (press)

Page 133: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

133

{

arti1._x = 500

arti2._x = 33.5;

artimasuk1._x = 500;

artimasuk2._x = 30.9;

vbawah1._x = 500;

vatas1._x = 136;

}

on (press)

{

tmbartinya._x = 500;

putihartinya._x = 4.75;

xtutup._x = 315;

artithawaf._x = 12.45;

}

on (press)

{

tmbartinya._x = 500;

putihartinya._x = 4.75;

xtutup._x = 315;

artiwuquf._x = 12.45;

}

on (release) {

gotoAndStop(2);

}

on (press)

{

if (exit._x == 500)

{

exit._x = 0;

ya._x = 56.9;

tidak._x = 196.9;

masuk._x = 500;

}

}

on (press)

{

fscommand2("quit")

}

on (press)

Page 134: PERANCANGAN DAN IMPLEMENTASI MOBILE APPLICATION ...repository.uinjkt.ac.id/dspace/bitstream/123456789/4977/1/ABDUR... · sebagai perangkat yang tidak terpisahkan dalam kehidupan sehari-hari

134

{

ya._x = 500;

tidak._x = 500;

exit._x = 500;

masuk._x = 0;

keluar._x = 251.1;

}

on (release) {

gotoAndStop(6);

}