BAB III PEMBAHASAN - repository.bsi.ac.id · sholat, dzikir sesudah sholat, doa sesudah sholat, yang ditampilkan di dalam aplikasi panduan sholat tersebut. Hal di dalam penelitian

19

BAB III

PEMBAHASAN

1.1. Analisis Kebutuhan Sistem

Analisis sistem menjelaskan tentang berbagai analisis yang berhubungan

dengan aplikasi yang akan di buat. Tahap analisis ini bertujuan untuk memperoleh

informasi-informasi yang dibutuhkan dan memperoleh konsep aplikasi yang akan

dibuat. Ditahap ini, penelitian di awali dengan melakukan observasi terhadap

informasi-informasi yang dibutuhkan di dalam pembuatan aplikasi. Informasi

tersebut antara lain materi dan kebutuhan pembuatan aplikasi.

Materi aplikasi mencakup tentang proses panduan berwudhu, tuntunan

sholat, dzikir sesudah sholat, doa sesudah sholat, yang ditampilkan di dalam

aplikasi panduan sholat tersebut. Hal di dalam penelitian ini mencakup tentang

analisis aplikasi sejenis, aplikasi yang akan di buat, analisisis kebutuhan

fungsional dan analisis kebutuhan non-fungsional.

1.1.1. Kebutuhan Fungsional

Kebutuhan fungsional adalah jenis kebutuhan yang berisi tentang proses-

proses apa saja yang nantinya dilakukan oleh sistem. Kebutuhan fungsional juga

berisikan tentang informasi-informasi apa saja yang harus ada dan dihasilkan oleh

sistem.

Berikut ini adalah kebutuhan fungsional dari perancangan aplikasi yang

akan dibuat adalah sebagai berikut:

19

20

1. Aplikasi Panduan Sholat ini nenampilkan Splash screen.

2. Pada tampilan dashboard atau menu terdapat tombol mulai, keluar dan

pengaturan yang di dalamnya terdapat tombol lagi yaitu (music play, music

stop)

a. Tombol mulai berfungsi untuk menampilkan layout menu panduan sholat

yang terdiri dari berwudhu, tuntunan sholat, dzikir sesudah sholat, dan

doa sesudah sholat.

1) Berwudhu, berfungsi untuk menampilkan panduan cara berwudhu.

2) Tuntunan Sholat, berfungsi untuk menampilkan panduan sholat.

3) Dzikir Sesudah Sholat, berfungsi untuk menampilkan bacaan dzikir

sesudah sholat.

4) Doa Sesudah Sholat, berfungsi untuk menampilkan doa-doa sesudah

sholat.

b. Tombol Keluar berfungsi menampilkan gambar layout konfirmasi keluar.

c. Tombol Pengaturan untuk menampilkan tombol pilihan.

d. Music Play, berfungsi untuk mengaktifkan suara.

e. Music Stop, berfungsi mematikan suara.

3.1.2. Kebutuhan Non-Fungsional

Analisa kebutuhan non-fungsional merupakan analisa yang dibutuhkan

untuk menentukan spesifikasi kebutuhan sistem. Spesifikasi non-fungsional juga

meliputi elemen atau komponen-komponen apa saja yang dibutuhkan mulai dari

sistem dibangun sampai diimplementasikan. Pada analisis kebutuhan non-

21

fungsional dijelaskan analisis kebutuhan perangkat keras, perangkat lunak, dan

juga analisis pengguna diantaranya sebagai berikut:

1. Perangkat Lunak (Software)

Perangkat lunak (software) yang diperlukan dalam pembuatan aplikasi

mobile “Panduan Sholat” untuk Android Phone ini adalah sebagai berikut:

a. Microsoft Windows 8 (64-bit)

b. Construct 2

c. Android Software Development Kit (Android SDK)

d. PhoneGap

e. Photoshop

2. Perangkat Keras (Hardware)

a. Komputer

Spesifikasi perangkat keras yang digunakan untuk membuat aplikasi

”Panduan Sholat” adalah sebagai berikut:

1) Prosesor Core 2 Duo (TM) cpu @ 2.1 GHz

2) Memory : 4 GB

3) HDD : 500 GB

4) VGA : Intel(R) HD Graphics

b. Perangkat Android

Spesifikasi minimal perangkat Android yang dibutuhkan untuk

menjalankan aplikasi ini adalah sebagai berikut:

1) Ponsel : ponsel berbasis Android

2) OS : OS 4.0 Android (Jelly Bean), Ice Cream Sandwich (Crosswalk),

Kitkat dan Lollipop.

22

3) Prosesor : 528 Mhz, Qualcomm MSM 7225 chipset

4) Memory : 512 MB ROM, 256 MB RAM.

c. Perangkat Windows

Spesifikasi perangkat Windows yang digunakan untuk menjalankan

aplikasi ini adalah sebagai berikut:

1) Laptop : OS Windows.

2) OS : OS Windows 32/64 bit (XP, VISTA, 7, 8 dan Windows 10).

3) Aplikasi Browser : Google Chorome versi 9.0 dan Frifox versi

3.6.13.

1.2. Perancangan Perangkat Lunak

3.2.1.Rancangan Storyboard

Tabel III.1. Storyboard Splash Screen

VISUAL SKETSA AUDIO

Dalam frame ini terdapat

Loading 7 detik untuk

masuk ke menu utama.

Tidak ada

Gambar Animasi

Loading

23

Tabel III.2. Storyboard Halaman Utama

VISUAL SKETSA AUDIO

Dalam frame ini terdapat

tiga tombol yang dapat

dipilih yaitu: Mulai,

Keluar dan Pengaturan.

Instrumen.wav

Klik.wav

Judul Aplikasi

Mulai

Keluar

24

Tabel III.3. Storyboard Halaman Panduan Sholat

VISUAL SKETSA AUDIO

Dalam frame ini berisi

Panduan Sholat dan

terdapat 7 tombol yang

dapat dipilih yaitu:

Tuntunan Sholat,

Berwudhu, Doa Sesudah

Sholat, Dzikir Sesudah

Sholat, Undo, Informasi,

Home.

Klik.wav

Tuntunan

Sholat

Panduan Sholat

Berwudhu

Dzikir

Sesudah

Sholat

Doa

Sesudah

Sholat

Informasi

25

Tabel III.4. Storyboard Halaman Panduan Berwudhu

VISUAL SKETSA AUDIO


gambar berwudhu dan



1.Telapak Tangan,

2.Mulut, 3.Hidung,

4.Muka, 5.Tangan,

6.Rambut, 7.Telinga,

8.Kaki, Doa Sesudah

Wudhu, Yang

Membatalkan Wudhu,

Undo, dan Home.

Klik.wav

1.Telapak Tangan

Gambar

Berwudhu

2.Mulut

3.Hidung

4.Muka

5.Tangan

6.Rambut

7.Telinga

8.Kaki

Doa Sesudah Wudhu

Yang Membatalkan

26

Tabel III.5. Storyboard Halaman Tuntunan Sholat

VISUAL SKETSA AUDIO


gambar Tuntunan Sholat

dan terdapat 10 tombol

yang dapat dipilih yaitu:

Sholat Subuh, Sholat

Dzuhur, Sholat Ashar,

Sholat Maghrib, Sholat

Isya, Syarat-syarat

Sholat, Rukun Sholat,

Yang Membatalkan

Sholat, Undo, dan

Home.

Klik.wav

SHOLAT SUBUH

Gambar Tuntunan

Sholat

SHOLAT DZUHUR

SHOLAT ASHAR

SHOLAT MAGHRIB

SHOLAT ISYA

SYARAT-SYARAT SHOLAT

RUKUN SHOLAT

YANG MEMBATALKAN

SHOLAT

27

Tabel III.6. Storyboard Halaman Dzikir Sesudah Sholat

VISUAL SKETSA AUDIO

28


gambar Dzikir Sesudah

Sholat dan terdapat 15

tombol yang dapat

dipilih yaitu: Dzikir 1,

Dzikir 2, Dzikir 3, Dzikir

4, Dzikir 5, Dzikir 6,

Dzikir 7, Dzikir 8, Dzikir

9, Dzikir 10, Dzikir 11,

Dzikir 12, Dzikir 13,

Undo, dan Home.

Klik.wav

Tabel III.7. Storyboard Halaman Doa Sesudah Sholat

DZIKIR 1

Gambar Dzikir

Sesudah Sholat

DZIKIR 2

DZIKIR 3 DZIKIR 4

DZIKIR 5

DZIKIR 7

DZIKIR 9 DZIKIR 10

DZIKIR 6

DZIKIR 8

DZIKIR 13

DZIKIR 12 DZIKIR 11

29

VISUAL SKETSA AUDIO


Gambar Doa Sesudah

Sholat dan terdapat 19

tombol yang dapat

dipilih yaitu: Doa 1, Doa

2, Doa 3, Doa 4, Doa 5,

Doa 6, Doa 7, Doa 8,

Doa 9, Doa 10, Doa 11,

Doa 12, Doa 13, Doa 14,

Doa 15, Doa 16, Doa 17,

Undo, dan Home.

Klik.wav

Tabel III.8. Storyboard Halaman Panduan Berwudhu (1.Telapak Tangan)

DOA 1

Gambar Doa

Sesudah Sholat

DOA 2

DOA 3

DOA 4

DOA 5

DOA 6

DOA 7

DOA 8

DOA 9

DOA 10

DOA 11

DOA 12

DOA 14

DOA 15

DOA 16

DOA 17

DOA 13

30

VISUAL SKETSA AUDIO


Nama Halaman dan


dapat dipilih yaitu: Play,

Pause, Stop, Panah Kiri,

Panah Kanan, Undo, dan

Home.

Bismillah.wav

Klik.wav

Tabel III.9. Storyboard Halaman Panduan Berwudhu (2.Mulut)

Gambar Mencuci Kedua

Belah Tangan

1.Telapak Tangan

Penjelasan

Arabic

Latin

Arti

31

VISUAL SKETSA AUDIO


Nama Halaman dan



Panah Kiri, Panah

Kanan, Undo, dan

Home.

Klik.wav

Gambar Berkumur

2.Mulut

Penjelasan

32

Tabel III.10. Storyboard Halaman Panduan Berwudhu (3.Hidung)

VISUAL SKETSA AUDIO


Nama Halaman dan



Panah Kiri, Panah

Kanan, Undo, dan

Home.

Klik.wav

Gambar Mencuci Lubang

Hidung

3.Hidung

Penjelasan

33

Tabel III.11. Storyboard Halaman Panduan Berwudhu (4.Muka)

VISUAL SKETSA AUDIO


Nama Halaman dan




Panah Kanan, Undo,

dan Home.

Niatwudhu.wav

Klik.wav

Gambar Mencuci muka

4.Muka

Penjelasan

Arabic

Latin

Arti

34

Tabel III.12. Storyboard Halaman Panduan Berwudhu (5.Tangan)

VISUAL SKETSA AUDIO


Nama Halaman dan



Panah Kiri, Panah

Kanan, Undo, dan

Home.

Klik.wav


Belah Tangan

5.Tangan

Penjelasan

35

Tabel III.13. Storyboard Halaman Panduan Berwudhu (6.Rambut)

VISUAL SKETSA AUDIO


Nama Halaman dan



Panah Kiri, Panah

Kanan, Undo, dan

Home.

Klik.wav

Gambar Membasahi Rambut

6.Rambut

Penjelasan

36

Tabel III.14. Storyboard Halaman Panduan Berwudhu (7.Telinga)

VISUAL SKETSA AUDIO


Nama Halaman dan



Panah Kiri, Panah

Kanan, Undo, dan

Home.

Klik.wav


Belah Telinga

7.Telinga

Penjelasan

37

Tabel III.15. Storyboard Halaman Panduan Berwudhu (8.Kaki)

VISUAL SKETSA AUDIO


Nama Halaman dan



Panah Kiri, Panah

Kanan, Undo, dan

Home.

Klik.wav


Belah Kaki

8.Kaki

Penjelasan

38

Tabel III.16.Storyboard Halaman Panduan Berwudhu (Doa Sesudah Wudhu)

VISUAL SKETSA AUDIO

39


Nama Halaman dan




Panah Kanan, Undo, dan

Home.

Doawudu.wav

Klik.wav

Tabel III.17. Storyboard Halaman Panduan Berwudhu (Yang Membatalkan)

Doa Sesudah

Wudhu

Penjelasan

Arabic

Latin

Arti

40

VISUAL SKETSA AUDIO


Nama Halaman dan



Panah Kiri, Panah

Kanan, Undo, dan

Home.

Klik.wav

Yang Membatalkan

Penjelasan

41

Tabel III.18. Storyboard Halaman Panduan Sholat (1.Niat)

VISUAL SKETSA AUDIO

Dalam frame ini

berisikan Panduan Sholat

yang terdiri dari Gambar

dan penjelasan rakaat,

rukun sholat,

menampilkan animasi

gerakan sholat,

penjelasan dari gerakan

sholat, bacaan niat sholat

berupa tulisan arab, latin

dan artinya. Terdapat

juga beberapa tombol

yaitu: Play, Pause, Stop,

Undo, Home.

Niatsholat.wav

Klik.wav

1.Niat Sholat

Gambar dan

Penjelasan Rakaat

Jumlah

Rakaat

Objek

Animasi

Penjelasan

Arabic

Arti

Latin

42

Tabel III.19. Storyboard Halaman Panduan Sholat (2.Takbiratul Ikhram)

VISUAL SKETSA AUDIO

Dalam frame ini


yang terdiri dari Rukun

Sholat, menampilkan

animasi gerakan sholat,


sholat, bacaan takbir

sholat berupa tulisan

arab, latin dan artinya.

Terdapat juga beberapa

tombol yaitu: Play,

Pause, Stop, Undo,

Home.

Takbir.wav

Klik.wav

2.Takbiratul

Ikhram

Objek

Animasi

Penjelasan

Arabic

Arti

Latin

43

Tabel III.20. Storyboard Halaman Panduan Sholat (3.Iftitah)

VISUAL SKETSA AUDIO

Dalam frame ini


yang terdiri dari

menampilkan animasi

gerakan sholat,


sholat, bacaan iftitah





Undo, Home.

Iftitah.wav

Klik.wav

3.Iftitah

Objek

Animasi

Penjelasan

Arabic

Arti

Latin

44

Tabel III.21. Storyboard Halaman Panduan Sholat (4.Al-Fatihah)

VISUAL SKETSA AUDIO

Dalam frame ini


yang terdiri dari

menampilkan animasi

gerakan sholat,


sholat, bacaan al-fatihah





Undo, Home.

Al-fatihah.wav

Klik.wav

4.Al-Fatihah

Objek

Animasi

Penjelasan

Arabic

Arti

Latin

45

Tabel III.22.

Storyboard Halaman Panduan Sholat (5.Bacaan Setelah Al-Fatihah)

VISUAL SKETSA AUDIO

Dalam frame ini


yang terdiri dari

menampilkan animasi

gerakan sholat,


sholat. Terdapat juga

beberapa tombol yaitu:

Play, Pause, Stop, Undo,

Home.

Klik.wav

5.Bacaan Setelah

Al-Fatihah

Objek

Animasi

Penjelasan

46

Tabel III.23. Storyboard Halaman Panduan Sholat (6.Ruku)

VISUAL SKETSA AUDIO

Dalam frame ini


yang terdiri dari

menampilkan animasi

gerakan sholat,


sholat, bacaan Ruku





Undo, Home.

Ruku.wav

Klik.wav

6.Ruku

Objek

Animasi

Penjelasan

Arabic

Arti

Latin

47

Tabel III.24. Storyboard Halaman Panduan Sholat (7.Bangkit dari Ruku)

VISUAL SKETSA AUDIO

Dalam frame ini


yang terdiri dari

menampilkan animasi

gerakan sholat,


sholat, bacaan bangkit

dari ruku berupa tulisan

arab, latin dan artinya.


tombol yaitu: Play,

Pause, Stop, Undo,

Home.

Bangkit.wav

Klik.wav

7.Bangkit dari

Ruku

Objek

Animasi

Penjelasan

Arabic

Arti

Latin

48

Tabel III.25. Storyboard Halaman Panduan Sholat (8.I`tidal)

VISUAL SKETSA AUDIO

Dalam frame ini


yang terdiri dari

menampilkan animasi

gerakan sholat,


sholat, bacaan I`tidal





Undo, Home.

I`tidal.wav

Klik.wav

8.I`tidal

Objek

Animasi

Penjelasan

Arabic

Arti

Latin

49

Tabel III.26. Storyboard Halaman Panduan Sholat (9.Doa Qunut)

VISUAL SKETSA AUDIO

Dalam frame ini


yang terdiri dari

menampilkan animasi

gerakan sholat,


sholat, bacaan doa qunut





Undo, Home.

Qunut.wav

Klik.wav

9.Doa Qunut

Objek

Animasi

Penjelasan

Arabic

Arti

Latin

50

Tabel III.27. Storyboard Halaman Panduan Sholat (10.Sujud)

VISUAL SKETSA AUDIO

Dalam frame ini


yang terdiri dari

menampilkan animasi

gerakan sholat,


sholat, bacaan sujud





Undo, Home.

Sujud.wav

Klik.wav

10.Sujud

Objek

Animasi

Penjelasan

Arabic

Arti

Latin

51

Tabel III.28.

Storyboard Halaman Panduan Sholat (11. Duduk Antara 2 Sujud)

VISUAL SKETSA AUDIO

Dalam frame ini


yang terdiri dari

menampilkan animasi

gerakan sholat,


sholat, bacaan duduk

antara 2 sujud berupa

tulisan arab, latin dan

artinya. Terdapat juga



Home.

2Sujud.wav

Klik.wav

11.Duduk Antara

2 Sujud

Objek

Animasi

Penjelasan

Arabic

Arti

Latin

52

Tabel III.29. Storyboard Halaman Panduan Sholat (12.Tasyahud Awal)

VISUAL SKETSA AUDIO

Dalam frame ini


yang terdiri dari

menampilkan animasi

gerakan sholat,


sholat, bacaan tasyahud

awal berupa tulisan arab,

latin dan artinya.


tombol yaitu: Play,

Pause, Stop, Undo,

Home.

Awal.wav

Klik.wav

12.Tasyahud

Awal

Objek

Animasi

Penjelasan

Arabic

Arti

Latin

53

Tabel III.30. Storyboard Halaman Panduan Sholat (13.Tasyahud Akhir)

VISUAL SKETSA AUDIO

Dalam frame ini


yang terdiri dari

menampilkan animasi

gerakan sholat,


sholat, bacaan tasyahud

akhir berupa tulisan arab,

latin dan artinya.


tombol yaitu: Play,

Pause, Stop, Undo,

Home.

Akhir.wav

Klik.wav

13.Tasyahud

Akhir

Objek

Animasi

Penjelasan

Arabic

Arti

Latin

54

Tabel III.31. Storyboard Halaman Panduan Sholat (14.Salam)

VISUAL SKETSA AUDIO

Dalam frame ini


yang terdiri dari

menampilkan animasi

gerakan sholat,


sholat, bacaan salam





Undo, Home.

Salam.wav

Klik.wav

14.Salam

Objek

Animasi

Penjelasan

Arabic

Arti

Latin

55

Tabel III.32. Storyboard Halaman Dzikir Sesudah Sholat

VISUAL SKETSA AUDIO

Dalam frame ini

berisikan dzikir-dzikir

sesudah sholat yang

terdiri dari bacaan

dzikir-dzikir berupa

tulisan arab, latin dan

artinya. Terdapat juga



Home.

Dzikir.wav

Klik.wav

Gambar Dzikir

Arabic

Arti

Latin

56

Tabel III.33. Storyboard Halaman Doa Sesudah Sholat

VISUAL SKETSA AUDIO

Dalam frame ini

berisikan doa-doa

sesudah sholat yang

terdiri dari bacaan doa

sesudah sholat yang





Undo, Home

Doa.wav

Klik.wav

Gambar Doa

Arabic

Arti

Latin

57

3.2.2.Rancangan Antarmuka

Menjelaskan rancangan antarmuka (interface) yang terdapat pada aplikasi

“panduan sholat”.

1. Rancangan Antarmuka Splash Screen

Tampilan ini menampilkan gambar loading selama 7 detik untuk masuk ke

menu utama.

Gambar III.1.Rancangan Antarmuka Splash Screen

LOADING

58

2. Rancangan Antarmuka Menu Utama

Pada frame ini berisikan judul aplikasi, tombol “Mulai” untuk masuk ke

menu panduan sholat, tombol “Keluar” untuk menampilkan konfirmasi

keluar dengan pilihan ya atau tidak, tombol “pengaturan” untuk

menampilkan pilihan seperti audio on dan audio off. Tombol “audio on”

untuk

menghidupkan audio, tombol “audio off” untuk mematikan audio.

Keluar

Mulai

Judul Aplikasi

Pengatura

n

Pengatura

n

Audio

off

Audio

on

59

Gambar III.2.Rancangan Antarmuka Menu Utama

3. Rancangan Antarmuka Panduan Sholat

Dalam frame ini berisi Panduan Sholat dan terdapat 7 tombol yang dapat

dipilih yaitu tombol ”Tuntunan Sholat” untuk masuk ke layout tuntunan

sholat, tombol “Berwudhu” untuk masuk ke layout panduan berwudhu,

tombol “Doa Sesudah Sholat” untuk masuk ke layout doa sesudah sholat,

tombol “Dzikir Sesudah Sholat” untuk masuk ke layout dzikir-dzikir

sesudah sholat, tombol ”Undo” untuk kembali ke layout menu utama,

tombol “Informasi” untuk menampilkan tujuan pembuatan aplikasi, tombol

“Home”untuk kembali ke menu utama.

60

Gambar III.3.Rancangan Antarmuka Panduan Sholat

4. Rancangan Antarmuka Panduan Berwudhu

Dalam frame ini berisi gambar berwudhu dan terdapat 12 tombol yang

dapat dipilih yaitu: tombol 1.Telapak Tangan berfungsi untuk masuk ke

layout telapak tangan, 2.Mulut berfungsi untuk masuk ke layout mulut,

3.Hidung berfungsi untuk masuk ke layout hidung , 4.Muka berfungsi untuk

masuk ke layout muka, 5.Tangan berfungsi untuk masuk ke layout tangan,

6.Rambut berfungsi untuk masuk ke layout rambut, 7.Telinga berfungsi

Tuntunan

Sholat

Panduan Sholat

Berwudhu

Dzikir

Sesudah

Sholat

Doa

Sesudah

Sholat

Informasi

61

untuk masuk ke layout telinga, 8.Kaki berfungsi untuk masuk ke layout

kaki, Doa Sesudah Wudhu berfungsi untuk masuk ke layout doa sesudah

wudhu, Yang Membatalkan Wudhu berfungsi untuk masuk ke layout

membatalkan wudhu, Undo berfungsi untuk kembali ke menu panduan

sholat, dan Home berfungsi untuk kembali ke menu utama.

1.Telapak Tangan

Gambar

Berwudhu

2.Mulut

3.Hidung

4.Muka

5.Tangan

6.Rambut

62

Gambar III.4.Rancangan Antarmuka Panduan Berwudhu

5. Rancangan Antarmuka Tuntunan Sholat

Dalam frame ini berisi gambar Tuntunan Sholat dan terdapat 10 tombol

yang dapat dipilih yaitu: Sholat Subuh, Sholat Dzuhur, Sholat Ashar, Sholat

Maghrib, Sholat Isya, Syarat-syarat Sholat, Rukun Sholat, Yang

63

Membatalkan Sholat, tombol tersebut berfungsi untuk masuk ke masing-

masing layout yang sesuai dengan tombol yang di pilih, Undo untuk

kembali ke menu panduan sholat, dan Home untuk kembali ke menu utama.

Gambar III.5.Rancangan Antarmuka Tuntunan Sholat

6. Rancangan Antarmuka Dzikir Sesudah Sholat

Dalam frame ini berisi gambar Dzikir Sesudah Sholat dan terdapat 15

tombol yang dapat dipilih yaitu: Dzikir 1, Dzikir 2, Dzikir 3, Dzikir 4,

SHOLAT SUBUH

Gambar Tuntunan

Sholat

SHOLAT DZUHUR

SHOLAT ASHAR

SHOLAT MAGHRIB

SHOLAT ISYA

SYARAT-SYARAT SHOLAT

RUKUN SHOLAT

YANG MEMBATALKAN

SHOLAT

64

Dzikir 5, Dzikir 6, Dzikir 7, Dzikir 8, Dzikir 9, Dzikir 10, Dzikir 11, Dzikir

12, Dzikir 13, tombol tersebut berfungsi untuk masuk ke masing-masing

layout yang sesuai dengan tombol yang di pilih, Undo untuk kembali ke

panduan sholat, dan Home untuk kembali ke menu utama.

DZIKIR 1

Gambar Dzikir

Sesudah Sholat

DZIKIR 2

DZIKIR 3 DZIKIR 4

65

Gambar III.6.Rancangan Antarmuka Dzikir Sesudah Sholat

7. Rancangan Antarmuka Doa Sesudah Sholat

66

Dalam frame ini berisi Gambar Doa Sesudah Sholat dan terdapat 19

tombol yang dapat dipilih yaitu: Doa 1, Doa 2, Doa 3, Doa 4, Doa 5, Doa 6,

Doa 7, Doa 8, Doa 9, Doa 10, Doa 11, Doa 12, Doa 13, Doa 14, Doa 15,

Doa 16, Doa 17, tombol tersebut berfungsi untuk masuk ke masing-masing


menu panduan sholat, dan Home untuk kembali ke menu utama.

DOA 1

Gambar Doa

Sesudah Sholat

DOA 2

DOA 3

DOA 4

67

Gambar III.7.Rancangan Antarmuka Doa Sesudah Sholat

8. Rancangan Antarmuka Panduan Berwudhu (1.Telapak Tangan)

68

Dalam frame ini berisi Nama Halaman dan terdapat 7 tombol yang dapat

dipilih yaitu: tombol Play untuk memutar audio, Pause untuk menghentikan

audio sesaat dan dapat di lanjutkan kembali, Stop untuk menghentikan total,

Panah Kiri, Panah Kanan, untuk pindah halaman, Undo untuk kembali ke

menu panduan berwudhu, dan Home untuk kembali ke menu utama.

Gambar III.8.

Rancangan Antarmuka Panduan Berwudhu (1.Telapak Tangan)


Belah Tangan

1.Telapak Tangan

Penjelasan

Arabic

Latin

Arti

69

9. Rancangan Antarmuka Panduan Berwudhu (2.Mulut)


dipilih yaitu: Panah Kiri, Panah Kanan, untuk pindah halaman, Undo untuk

kembali ke menu panduan berwudhu, dan Home untuk kembali ke menu

utama.

Gambar III.9.Rancangan Antarmuka Panduan Berwudhu (2.Mulut)

Gambar Berkumur

2.Mulut

Penjelasan

70

10. Rancangan Antarmuka Panduan Berwudhu (3.Hidung)




utama.

Gambar III.10.Rancangan Antarmuka Panduan Berwudhu (3.Hidung)

Gambar Mencuci Lubang

Hidung

3.Hidung

Penjelasan

71

11. Racangan Antarmuka Panduan Berwudhu (4.Muka)






Gambar Mencuci muka

4.Muka

Penjelasan

Arabic

Latin

Arti

72

Gambar III.11.Rancangan Antarmuka Panduan Berwudhu (4.Muka)

12. Rancangan Antarmuka Panduan Berwudhu (5.Tangan)




utama.

Gambar III.12.Rancangan Antarmuka Panduan Berwudhu (5.Tangan)


Belah Tangan

5.Tangan

Penjelasan

73

13. Rancangan Antarmuka Panduan Berwudhu (6.Rambut)




utama.

Gambar III.13.Rancangan Antarmuka Panduan Berwudhu (6.Rambut)

Gambar Membasahi Rambut

6.Rambut

Penjelasan

74

14. Rancangan Antarmuka Panduan Berwudhu (7.Telinga)




utama.


Belah Telinga

7.Telinga

Penjelasan

75

Gambar III.14.Rancangan Antarmuka Panduan Berwudhu (7.Telinga)

15. Rancangan Antarmuka Panduan Berwudhu (8.Kaki)




utama.


Belah Kaki

8.Kaki

Penjelasan

76

Gambar III.15.Rancangan Antarmuka Panduan Berwudhu (8.Kaki)

16. Rancangan Antarmuka Panduan Berwudhu (Doa Sesudah Wudhu)






Doa Sesudah

Wudhu

Penjelasan

Arabic

77

Gambar III.16

Rancangan Antarmuka Panduan Berwudhu (Doa Sesudah Wudhu)

17. Rancangan Antarmuka Panduan Berwudhu (Yang Membatalkan)




utama.

Yang Membatalkan

Penjelasan

78

Gambar III.17

Rancangan Antarmuka Panduan Berwudhu (Yang Membatalkan)

18. Rancangan Antarmuka Panduan Sholat (1.Niat Sholat)

Dalam frame ini berisikan Panduan Sholat yang terdiri dari Gambar dan

penjelasan rakaat, rukun sholat, menampilkan animasi gerakan sholat,

penjelasan dari gerakan sholat, bacaan niat sholat berupa tulisan arab, latin

dan artinya. Terdapat juga beberapa tombol yaitu tombol Play untuk

memutar audio, Pause untuk menghentikan audio sesaat dan dapat di

lanjutkan kembali, Stop untuk menghentikan total, Undo untuk kembali ke


79

1.Niat Sholat

Gambar dan

Penjelasan Rakaat

Jumlah

Rakaat

Objek

Animasi

Penjelasan

Arabic

Latin

80

Gambar III.18.Rancangan Antarmuka Panduan Sholat (1.Niat Sholat)

19. Rancangan Antarmuka Panduan Sholat (2.Takbiratul Ikhram)

Dalam frame ini berisikan Panduan Sholat yang terdiri dari penjelasan

rakaat, rukun sholat, menampilkan animasi gerakan sholat, penjelasan dari

gerakan sholat, bacaan takbiratul ikhram berupa tulisan arab, latin dan

artinya. Terdapat juga beberapa tombol yaitu tombol Play untuk memutar

audio, Pause untuk menghentikan audio sesaat dan dapat di lanjutkan

kembali, Stop untuk menghentikan total, Undo untuk kembali ke menu


81

2.Takbiratul

Ikhram

Objek

Animasi

Penjelasan

Arabic

82

Gambar III.19.

Rancangan Antarmuka Panduan Sholat (2.Takbiratul Ikhram)

20. Rancangan Antarmuka Panduan Sholat (3.Iftitah)

Dalam frame ini berisikan Panduan Sholat yang terdiri dari menampilkan

animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan iftitah berupa

tulisan arab, latin dan artinya. Terdapat juga beberapa tombol yaitu tombol

83

Play untuk memutar audio, Pause untuk menghentikan audio sesaat dan

dapat di lanjutkan kembali, Stop untuk menghentikan total, Undo untuk


3.Iftitah

84

Gambar III.20.Rancangan Antarmuka Panduan Sholat (3.Iftitah)

Objek

Animasi

85

21. Rancangan Antarmuka Panduan Sholat (4.Al-Fatihah)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan al-fatihah

berupa tulisan arab, latin dan artinya. Terdapat juga beberapa tombol yaitu

tombol Play untuk memutar audio, Pause untuk menghentikan audio sesaat

dan dapat di lanjutkan kembali, Stop untuk menghentikan total, Undo untuk


86

Gambar III.21.Rancangan Antarmuka Panduan Sholat (4.Al-Fatihah)

4.Al-Fatihah

Objek

Animasi

Penjelasan

Arabic

Latin

Arti

87

22. Rancangan Antarmuka Panduan Sholat (5.Bacaan Setelah Al-Fatihah)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan setelah al-

fatihah berupa tulisan arab, latin dan artinya. Terdapat juga beberapa tombol

yaitu tombol Play untuk memutar audio, Pause untuk menghentikan audio

sesaat dan dapat di lanjutkan kembali, Stop untuk menghentikan total, Undo

untuk kembali ke menu panduan sholat, dan Home untuk kembali ke menu

utama.

88

5.Bacaan Setelah

Al-Fatihah

Objek

Animasi

Penjelasan

Arabic

Latin

Arti

89

Gambar III.22.

Rancangan Antarmuka Panduan Sholat (5.Bacaan Setelah Al-Fatihah)

23. Rancangan Antarmuka Panduan Sholat (6.Ruku)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan ruku berupa





90

6.Ruku

Objek

Animasi

Penjelasan

Arabic

Latin

Arti

91

Gambar III.23.Rancangan Antarmuka Panduan Sholat (6.Ruku)

24. Rancangan Antarmuka Panduan Sholat (7.Bangkit dari Ruku)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan bangkit dari

ruku berupa tulisan arab, latin dan artinya. Terdapat juga beberapa tombol




utama.

92

7.Bangkit dari

Ruku

Objek

Animasi

Penjelasan

Arabic

Latin

93

Gambar III.24.

Rancangan Antarmuka Panduan Sholat (7.Bangkit dari Ruku)

25. Rancangan Antarmuka Panduan Sholat (8.I`tidal)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan i`tidal berupa





94

8.I`tidal

Objek

Animasi

Penjelasan

Arabic

95

Gambar III.25.Rancangan Antarmuka Panduan Sholat (8.I`tidal)

26. Rancangan Antarmuka Panduan Sholat (9.Doa Qunut)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan doa qunut



96



9.Doa Qunut

Objek

Animasi

97

Gambar III.26.Rancangan Antarmuka Panduan Sholat (9.Doa Qunut)

27. Rancangan Antarmuka Panduan Sholat (10.Sujud)

98


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan sujud berupa





99

Gambar III.27.Rancangan Antarmuka Panduan Sholat (10.Sujud)

10.Sujud

Objek

Animasi

Penjelasan

Arabic

Latin

Arti

100

28. Rancangan Antarmuka Panduan Sholat (11.Duduk Antara 2 Sujud)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan duduk antara

2 sujud berupa tulisan arab, latin dan artinya. Terdapat juga beberapa

tombol yaitu tombol Play untuk memutar audio, Pause untuk menghentikan


Undo untuk kembali ke menu panduan sholat, dan Home untuk kembali ke

menu utama.

101

11.Duduk Antara

2 Sujud

Objek

Animasi

Penjelasan

Arabic

Latin

Arti

102

Gambar III.28

Rancangan Antarmuka Panduan Sholat (11.Duduk Antara 2 Sujud)

29. Rancangan Antarmuka Panduan Sholat (12.Tasyahud Awal)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan tasyahud

awal berupa tulisan arab, latin dan artinya. Terdapat juga beberapa tombol




utama.

103

12.Tasyahud

Awal

Objek

Animasi

Penjelasan

Arabic

Latin

Arti

104

Gambar III.29.Rancangan Antarmuka Panduan Sholat (12.Tasyahud Awal)

30. Rancangan Antarmuka Panduan Sholat (13.Tasyahud Akhir)



akhir berupa tulisan arab, latin dan artinya. Terdapat juga beberapa tombol




utama.

105

13.Tasyahud

Akhir

Objek

Animasi

Penjelasan

Arabic

Latin

Arti

106

Gambar III.30.Rancangan Antarmuka Panduan Sholat (13.Tasyahud Akhir)

31. Rancangan Antarmuka Panduan Sholat (14.Salam)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan salam berupa





107

14.Salam

Objek

Animasi

Penjelasan

Arabic

108

Gambar III.31.Rancangan Antarmuka Panduan Sholat (14.Salam)

32. Rancangan Antarmuka Panduan Sholat Dzikir Sesudah Sholat

Dalam frame ini berisikan dzikir-dzikir sesudah sholat yang terdiri dari

bacaan dzikir-dzikir berupa tulisan arab, latin dan artinya. Terdapat juga

beberapa tombol yaitu tombol Play untuk memutar audio, Pause untuk

menghentikan audio sesaat dan dapat di lanjutkan kembali, Stop untuk

109

menghentikan total, Undo untuk kembali ke menu panduan sholat, dan

Home untuk kembali ke menu utama.

110

Gambar III.32.

Rancangan Antarmuka Panduan Sholat Dzikir Sesudah Sholat

33. Rancangan Antarmuka Panduan Sholat Doa Sesudah Sholat

Gambar Dzikir

Arabic

Arti

Latin

111

Dalam frame ini berisikan doa-doa sesudah sholat yang terdiri dari bacaan

doa-doa berupa tulisan arab, latin dan artinya. Terdapat juga beberapa




menu utama.

112

Gambar III.33.

Rancangan Antarmuka Panduan Sholat Doa Sesudah Sholat

3.3. Implementasi dan Pengujian Unit

Gambar Doa

Arabic

Arti

Latin

113

3.3.1.Implementasi

1. Implementasi Tampilan Splash Screen

Tampilan ini menampilkan gambar loading selama 7 detik untuk masuk ke

menu utama.

Gambar III.34.Implementasi Tampilan Splash Screen

114

2. Implementasi Tampilan Menu Utama

Pada frame ini berisikan judul aplikasi, tombol “Mulai” untuk masuk ke

menu panduan sholat, tombol “Keluar” untuk menampilkan konfirmasi

keluar dengan pilihan ya atau tidak, tombol “pengaturan” untuk

menampilkan pilihan seperti audio on dan audio off. Tombol “audio on”

untuk menghidupkan audio, tombol “audio off” untuk mematikan audio.

Gambar III.35.Implementasi Tampilan Menu Utama

115

3. Implementasi Tampilan Panduan Sholat

Dalam frame ini berisi Panduan Sholat dan terdapat 7 tombol yang dapat

dipilih yaitu tombol ”Tuntunan Sholat” untuk masuk ke layout tuntunan

sholat, tombol “Berwudhu” untuk masuk ke layout panduan berwudhu,

tombol “Doa Sesudah Sholat” untuk masuk ke layout doa-doa sesudah

sholat, tombol “Dzikir Sesudah Sholat” untuk masuk ke layout dzikir-dzikir

sesudah sholat, tombol ”Undo” untuk kembali ke menu utama, tombol

“Informasi” untuk menampilkan tujuan pembuatan aplikasi, tombol

“Home”untuk kembali ke menu utama.

Gambar III.36.Implementasi Tampilan Panduan Sholat

116

4. Implementasi Tampilan Panduan Berwudhu

Dalam frame ini berisi gambar berwudhu dan terdapat 12 tombol yang

dapat dipilih yaitu: tombol 1.Telapak Tangan berfungsi untuk masuk ke

layout telapak tangan, 2.Mulut berfungsi untuk masuk ke layout mulut,

3.Hidung berfungsi untuk masuk ke layout hidung , 4.Muka berfungsi untuk

masuk ke layout muka, 5.Tangan berfungsi untuk masuk ke layout tangan,

6.Rambut berfungsi untuk masuk ke layout rambut, 7.Telinga berfungsi

untuk masuk ke layout telinga, 8.Kaki berfungsi untuk masuk ke layout

kaki, Doa Sesudah Wudhu berfungsi untuk masuk ke layout doa, Yang

Membatalkan Wudhu berfungsi untuk masuk ke layout membatalkan

wudhu, Undo berfungsi untuk kembali ke menu panduan sholat, dan Home

berfungsi untuk kembali ke menu utama.

Gambar III.37.Implementasi Tampilan Panduan Berwudhu

117

5. Implementasi Tampilan Tuntunan Sholat

Dalam frame ini berisi gambar Tuntunan Sholat dan terdapat 10 tombol

yang dapat dipilih yaitu: Sholat Subuh, Sholat Dzuhur, Sholat Ashar, Sholat

Maghrib, Sholat Isya, Syarat-syarat Sholat, Rukun Sholat, Yang

Membatalkan Sholat, tombol tersebut berfungsi untuk masuk ke masing-

masing layout yang sesuai dengan tombol yang di pilih, Undo untuk


Gambar III.38.Implementasi Tampilan Tuntunan Sholat

118

6. Implementasi Tampilan Dzikir Sesudah Sholat

Dalam frame ini berisi gambar Dzikir Sesudah Sholat dan terdapat 15

tombol yang dapat dipilih yaitu: Dzikir 1, Dzikir 2, Dzikir 3, Dzikir 4,

Dzikir 5, Dzikir 6, Dzikir 7, Dzikir 8, Dzikir 9, Dzikir 10, Dzikir 11, Dzikir

12, Dzikir 13, tombol tersebut berfungsi untuk masuk ke masing-masing



Gambar III.39.Implementasi Tampilan Dzikir Sesudah Sholat

119

7. Implementasi Tampilan Doa Sesudah Sholat

Dalam frame ini berisi Gambar Doa Sesudah Sholat dan terdapat 19

tombol yang dapat dipilih yaitu: Doa 1, Doa 2, Doa 3, Doa 4, Doa 5, Doa 6,

Doa 7, Doa 8, Doa 9, Doa 10, Doa 11, Doa 12, Doa 13, Doa 14, Doa 15,

Doa 16, Doa 17, tombol tersebut berfungsi untuk masuk ke masing-masing


menu doa panduan sholat, dan Home untuk kembali ke menu utama.

Gambar III.40.Implementasi Tampilan Doa Sesudah Sholat

120

8. Implementasi Tampilan Panduan Berwudhu (1.Telapak Tangan)






Gambar III.41.

Implementasi Tampilan Panduan Berwudhu (1.Telapak Tangan)

121

.9. Implementasi Tampilan Panduan Berwudhu (2.Mulut)




utama.

Gambar III.42.Implementasi Tampilan Panduan Berwudhu (2.Mulut)

122

10. Implementasi Tampilan Panduan Berwudhu (3.Hidung)




utama.

Gambar III.43.Implementasi Tampilan Panduan Berwudhu (3.Hidung)

123

11. Implementasi Tampilan Panduan Berwudhu (4.Muka)




Panah Kiri, Panah Kanan untuk pindah halaman, Undo untuk kembali ke


Gambar III.44.Implementasi Tampilan Panduan Berwudhu (4.Muka)

124

12. Implementasi Tampilan Panduan Berwudhu (5.Tangan)




utama.

Gambar III.45.Implementasi Tampilan Panduan Berwudhu (5.Tangan)

125

13. Implementasi Tampilan Panduan Berwudhu (6.Rambut)


dipilih yaitu: Panah Kiri, Panah Kanan untuk pindah halaman, Undo untuk


utama.

Gambar III.46.Implementasi Tampilan Panduan Berwudhu (6.Rambut)

126

14. Implementasi Tampilan Panduan Berwudhu (7.Telinga)


dipilih yaitu: Panah Kiri, Panah Kanan untuk pindah halaman, Undo untuk

kembali ke menu berwudhu, dan Home untuk kembali ke menu utama.

Gambar III.47.Implementasi Tampilan Panduan Berwudhu (7.Telinga)

127

15. Implementasi Tampilan Panduan Berwudhu (8.Kaki)



kembali ke menu berwudhu, dan Home untuk kembali ke menu utama.

Gambar III.48.Implementasi Tampilan Panduan Berwudhu (8.Kaki)

128

16. Implementasi Tampilan Panduan Berwudhu (Doa Sesudah Wudhu)




Panah Kiri, Panah Kanan untuk pindah halaman, Undo untuk kembali ke


Gambar III.49

129

Implementasi Tampilan Panduan Berwudhu (Doa Sesudah Wudhu)

17. Implementasi Tampilan Panduan Berwudhu (Yang Membatalkan)


dipilih yaitu: Panah Kiri, Panah Kanan untuk mengatur arah, Undo untuk


utama.

Gambar III.50.

130

Implementasi Tampilan Panduan Berwudhu (Yang Membatalkan)

18. Implementasi Tampilan Panduan Sholat (1.Niat Sholat)

Dalam frame ini berisikan Panduan Sholat yang terdiri dari Gambar dan

penjelasan rakaat, rukun sholat, menampilkan animasi gerakan sholat,

penjelasan dari gerakan sholat, bacaan niat sholat berupa tulisan arab, latin

dan artinya. Terdapat juga beberapa tombol yaitu tombol Play untuk

memutar audio, Pause untuk menghentikan audio sesaat dan dapat di

lanjutkan kembali, Stop untuk menghentikan total, Undo untuk kembali ke


131

Gambar III.51.Implementasi Tampilan Panduan Sholat (1.Niat Sholat)

19. Implementasi Tampilan Panduan Sholat (2.Takbiratul Ikhram)

Dalam frame ini berisikan Panduan Sholat yang terdiri dari penjelasan

rakaat, rukun sholat, menampilkan animasi gerakan sholat, penjelasan dari

gerakan sholat, bacaan takbiratul ikhram berupa tulisan arab, latin dan

artinya. Terdapat juga beberapa tombol yaitu tombol Play untuk memutar

audio, Pause untuk menghentikan audio sesaat dan dapat di lanjutkan

132

kembali, Stop untuk menghentikan total, Undo untuk kembali ke menu


Gambar III.52.

Implementasi Tampilan Panduan Sholat (2.Takbiratul Ikhram)

20. Implementasi Tampilan Panduan Sholat (3.Iftitah)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan iftitah berupa



133



Gambar III.53.Implementasi Tampilan Panduan Sholat (3.Iftitah)

21. Implementasi Tampilan Panduan Sholat (4.Al-Fatihah)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan al-fatihah


134




Gambar III.54.Implementasi Tampilan Panduan Sholat (4.Al-Fatihah)

22. Implementasi Tampilan Panduan Sholat (5.Bacaan Setelah Al-Fatihah)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan setelah al-

135

fatihah berupa tulisan arab, latin dan artinya. Terdapat juga beberapa tombol




utama.

Gambar III.55

Implementasi Tampilan Panduan Sholat (5.Bacaan Setelah Al-Fatihah)

23. Implementasi Tampilan Panduan Sholat (6.Ruku)

136


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan ruku berupa





Gambar III.56.Implementasi Tampilan Panduan Sholat (6.Ruku)

137

24. Implementasi Tampilan Panduan Sholat (7.Bangkit dari Ruku)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan bangkit dari

ruku berupa tulisan arab, latin dan artinya. Terdapat juga beberapa tombol




utama.

Gambar III.57.

Implementasi Tampilan Panduan Sholat (7.Bangkit dari Ruku)

138

25. Implementasi Tampilan Panduan Sholat (8.I`tidal)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan i`tidal berupa





Gambar III.58.Implementasi Tampilan Panduan Sholat (8.I`tidal)

139

26. Implementasi Tampilan Panduan Sholat (9.Doa Qunut)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan doa qunut





Gambar III.59.Implementasi Tampilan Panduan Sholat (9.Doa Qunut)

140

27. Implementasi Tampilan Panduan Sholat (10.Sujud)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan sujud berupa





Gambar III.60.Implementasi Tampilan Panduan Sholat (10.Sujud)

141

28. Implementasi Tampilan Panduan Sholat (11.Duduk Antara 2 Sujud)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan duduk antara

2 sujud berupa tulisan arab, latin dan artinya. Terdapat juga beberapa




menu utama.

Gambar III.61.

142

Implementasi Tampilan Panduan Sholat (11.Duduk Antara 2 Sujud)

29. Implementasi Tampilan Panduan Sholat (12.Tasyahud Awal)



awal berupa tulisan arab, latin dan artinya. Terdapat juga beberapa tombol




utama.

143

Gambar III.62.Implementasi Tampilan Panduan Sholat (12.Tasyahud Awal)

30. Implementasi Tampilan Panduan Sholat (13.Tasyahud Akhir)



akhir berupa tulisan arab, latin dan artinya. Terdapat juga beberapa tombol



144


utama.

Gambar III.63.Implementasi Tampilan Panduan Sholat (13.Tasyahud Akhir)

31. Implementasi Tampilan Panduan Sholat (14.Salam)


animasi gerakan sholat, penjelasan dari gerakan sholat, bacaan salam berupa



145



Gambar III.64.Implementasi Tampilan Panduan Sholat (14.Salam)

32. Implementasi Tampilan Panduan Sholat Dzikir Sesudah Sholat

Dalam frame ini berisikan dzikir-dzikir sesudah sholat yang terdiri dari

bacaan dzikir-dzikir berupa tulisan arab, latin dan artinya. Terdapat juga

beberapa tombol yaitu Panah Kiri, Panah Kanan berfungsi untuk pindah

146

halaman, tombol Play untuk memutar audio, Pause untuk menghentikan


untuk pindah halaman, Undo untuk kembali ke menu panduan sholat, dan

Home untuk kembali ke menu utama.

Gambar III.65.

Implementasi Tampilan Panduan Sholat Dzikir Sesudah Sholat

33. Implementasi Tampilan Panduan Sholat Doa Sesudah Sholat

Dalam frame ini berisikan tampilan doa sesudah sholat yang terdiri dari

bacaan doa sesudah sholat berupa tulisan arab, latin dan artinya. Terdapat

juga beberapa tombol yaitu tombol Play untuk memutar audio, Pause untuk

147

menghentikan audio sesaat dan dapat di lanjutkan kembali, Stop untuk

menghentikan total, Panah kiri, Panah kanan, untuk pindah halaman, Undo


utama.

Gambar III.66.Implementasi Tampilan Panduan Sholat Doa Sesudah Sholat

3.3.2. Pengujian Unit

1. Blackbox Testing

148

Pengujian terhadap program yang dibuat menggunakan blackbox testing

yang fokus terhadap proses masukan dan keluaran program.

Pengujian Unit :

Tabel III.34

Hasil Pengujian Black Box Testing

Input/Even Proses Output/Next

Stage

Hasil

Pengujian

Tombol

“Mulai”

Menampilkan

Tampilan

Panduan

Sholat

Sesuai

Tombol

“Keluar”

Menampilkan

Tampilan

Konfirmasi

Keluar

Sesuai

Tombol

“Setting”

Menampilkan

Tampilan

Tombol

Pilihan

Sesuai

Tabel III.34

149

Hasil Pengujian Black Box Testing (Lanjutan 1)


Stage

Hasil

Pengujian

Tombol

“Panah Kiri

dan Kanan”

Untuk

menggeser

tampilan

selanjutnya

atau

sebelumnya

Sesuai

Tombol

“Home”

Kembali

kemenu

Utama

Sesuai

150

Tabel III.34



Stage

Hasil

Pengujian

Tombol

“Undo”

Untuk

kembali

kemenu

sebelumnya

Sesuai

Tombol

”Informasi”

Menampilkan

Tujuan

Pembuatan

Aplikasi

Sesuai

Tombol

“Berwudhu

”

Menampilkan

Panduan

Berwudhu

Sesuai

151

Tabel III.34



Stage

Hasil

Pengujian

Tombol

“Tuntunan

Sholat”

Menampilkan

Panduan

Sholat

Sesuai

Tombol

“Dzikir”

Menampilkan

Panduan

Dzikir

Sesuai

Tombol

“Doa

Sesudah

Sholat”

Menampilkan

Panduan Doa

Sesudah

Sholat

Sesuai

152

Tabel III.34



Stage

Hasil

Pengujian

Tombol

“Membatal

kan

Wudhu”

Menampilkan

Penjelasan

yang

Membatalkan

Wudhu

Sesuai

Tombol

“Doa

Sesudah

Wudhu”

Menampilkan

Halaman Doa

Sesudah

Wudhu

Sesuai

Tombol

“Doa1”

Menampilkan

Halaman

Doa-doa

Sesudah

Sholat

Sesuai

153

Tabel III.34



Stage

Hasil

Pengujian

Tombol

“Dzikir1”

Menampilkan

Halaman

Dzikir-dzikir

Sesudah Sholat

Sesuai

Tombol

“Play”

Untuk

Memutar

Audio

Sesuai

Tombol

“Pause”

Untuk

Menghentikan

Audio

Sementara

Sesuai

154

Tombol

“Stop”

Untuk

Mematikan

Audio

Sesuai

2. Penerimaan User Terhadap Aplikasi “Panduan Sholat”

Pertanyaan Kuesioner dan grafiknya :

Tabel III.35

Pengujian Kuesioner

KUESIONER

APLIKASI “PANDUAN SHOLAT”

Untuk Mengetahui Penerimaan User Terhadap Aplikasi “Panduan Sholat”

Kami sangat berterima kasih apabila berkenan untuk meluangkan waktu

mengisi kuesioner ini.

Profesi : Pelajar ( ) Mahasiswa ( ) Karyawan (

)

Umur :

Jenis Kelamin : ( ) Laki-Laki ( ) Perempuan

Berilah tanda Centang (v) pada kolom di masing-masing pertanyaan di

bawah ini yang menurut anda sesuai dengan yang anda rasakan setelah

mencoba menggunakan aplikasi “Panduan Sholat”.

STS :

TS :

S :

SS :

N Pertanyaan ST TS S SS

155

o S

Tampilan Aplikasi

1 Tampilan aplikasi "Panduan Sholat" sangat

menarik untuk digunakan?

2 Warna pada aplikasi "Panduan Sholat" tidak

membosankan?

3 tampilan aplikasi "Panduan Sholat" mudah

dipahami dan mudah untuk digunakan?

Tujuan Aplikasi

4 Dengan aplikasi "Panduan Sholat" sangat

membatu anak-anak dan pemula untuk

mempelajari sholat?

5 Dengan aplikasi "Panduan Sholat" dapat

meningkatkan keingin tahuan dalam pendidikan

agama?

6 Dengan aplikasi "Panduan Sholat" sangat

mempermudah untuk anak-anak dan pemula untuk

menghafal doa-doa?

Kemudahan Pengguna (User Frindly)

7 Bentuk tombol pada aplikasi "Panduan Sholat"

mudah di pahami?

8 Aplikasi "Panduan Sholat" mudah untuk

dioprasikan?

9 Aplikasi "Panduan Sholat" tidak berat saat di

jalankan?

10 Secara keseluruhan saya puas dengan aplikasi ini?

Tabel III.36

Rekapitulasi Jawaban Kuesioner

No Responden

Pertanyaan

Tampilan Tujuan Kemudahan

1 2 3 4 5 6 7 8 9 10

1 Responden 1 4 3 4 4 4 3 4 3 4 4

2 Responden 2 4 4 4 3 4 3 4 4 4 4

3 Responden 3 3 4 3 4 4 4 3 4 4 4

4 Responden 4 4 4 4 4 4 4 4 3 4 4

156

5 Responden 5 4 3 4 4 3 3 4 4 4 3

6 Responden 6 4 4 3 4 4 4 3 4 3 4

7 Responden 7 3 4 4 3 4 4 4 4 4 4

8 Responden 8 4 3 4 4 4 4 4 4 4 4

9 Responden 9 2 4 3 3 4 3 3 4 3 3

10 Responden 10 4 4 3 4 4 4 3 4 4 4

Tampilan Tujuan Aplikasi Kemudahan

TST TS S SS TST TS S SS TST TS S SS

0 1 9 20 0 0 8 22 0 0 10 30

Total Jawaban

"Sangat tidak

setuju=1"

0

Total Jawaban

"Tidak setuju=2"

1

Total Jawaban

"Setuju=3"

27

Total Jawaban

"Sangat setuju=4"

72

Tabel III.37

Tampilan Grafik Kuesioner

10

9

8

7

6

5

4

157

Dari hasil jawaban responden pada kuesioner penerimaan user terhadap

aplikasi panduan sholat di uji menggunakan kuesioner dengan 10 pertanyaan dari

10 orang responden. Pada kategori tampilan pertanyaan 1 mendapat respon baik

70% pengguna merasa aplikasi menarik untuk digunakan, pada pertanyaan 2

responden merespon 70% sangat setuju warna pada aplikasi tidak membosankan,

dan pertanyaan 3 responden merespon baik 60% tampilan pada aplikasi mudah

untuk digunakan, kemudian kategori tujuan aplikasi pada pertanyaan 4 responden

merespon baik 70% responden sangat setuju aplikasi dapat membantu anak-anak

dan pemula untuk mempelajari sholat, pada pertanyaan 5 respon 90% responden

sangat setuju aplikasi panduan sholat dapat meningkatkan keingin tahuan dalam

pendidikan agama, dan pada pertanyaan 6 respon 60% responden sangat baik

aplikasi panduan sholat sangat mempermudah untuk anak-anak dan pemula untuk

menghafal doa-doa. Dan pada kategori kemudahan penggunaan pertanyaan 7

158

respon 60% responden merasa bentuk tombol pada aplikasi panduan sholat mudah

di pahami sehingga fungsi dari aplikasi dinilai baik, pada pertanyaan 8 respon

80% dari responden setuju bahwa aplikasi mudah untuk dioprasikan, pada

pertanyaan 9 respon 80 % responden sangat setuju bahwa aplikasi tidak berat pada

saat di jalankan, dan pada pertanyaan 10 respon 80% dari responden secara

keseluruhan puas dengan aplikasi panduan sholat.

3.3.3. Kompilasi Aplikasi

Setelah pembuatan aplikasi dengan Construct 2 agar bisa digunakan pada gadget

Android, maka file harus berextensi Apk. Sebelum kita konversi ke file Apk

project yang telah kita buat pada Construct 2 kita export ke library Cordova

terlebih dahulu.

Caranya sebagai berikut:

1. Pilih menu file- export project - pilih library Cordova - pilih next.

2. Setelah itu buat folder baru yang akan menyimpan file game yang akan kita

export-setelah selesai membuat folder-pilih next.

3. Pada bagian menu export audio files for - centang di bagian IOS, Windows

Phone (.m4a) dan centang pada bagian - Android, any other platform(.ogg)

bagian ini untuk mengatur format audio game yang kita buat baik

IOS,Windows maupun Android.

4. Pada bagian menu minimum supported OSs - pilih 7.0+ pada minimum

IOS, untuk batas OS minimum game yang akan bisa dimainkan pada IOS

dan pada bagian minimum Android - pilih 4.0+ untuk batas OS minimum

game yang bisa dimainkan pada gadget Android.

159

5. Setelah melakukan pengisian pada bagian menu export - selanjutnya pilih

export dan tunggu export selesai sampai tampil konfirmasi export sukses.

6. File yang telah kita export akan berformat Jscript Script file dan XML

dokumen. Pada tahap ini belum bisa dikatakan selesai file yang telah di

export tadi akan kita upload lagi ke aplikasi Intel XDK untuk menjadikan

file berextensi Apk.

7. Buka aplikasi Intel XDK- pilih menu Import your HTML5 Code Base.

8. Pada bagian Import From – pilih folder aplikasi yang di export tadi - setelah

itu pilih “Continue” - setelah itu tampil konfigurasi pilih library Cordova -

pilih “Continue” akan tampil konfigurasi sukses.

9. Setelah konfigurasi selesai maka akan tampil beberapa tab menu, pilih tab

menu “Build”. Kita tinggal pilih file berextensi apa yang kita ingin jadikan

game tersebut, klik icon IOS, Windows ataupun Android.

10. Kita pilih Icon Android - pada buil setting isi data-data tentang aplikasi

yang kita buat dan Mengantur jenis aplikasi yang bisa di main kan di gadget

landscape atau portrait. Setelah selesai pilih “Done”.

11. Pada icon Android centang icon tersebut dan pilih icon gembok untuk

membuka proses upload file dan isi password yang kita daftar pada aplikasi

Intel XDK setelah itu pilih “Start Builds” untuk meng-comfile game tersebut

menjadi Apk - dan tunggu proses upload file selesai.

12. Setelah upload selesai, download Apk game tersebut dan instal ke gadget

Android, aplikasi tersebut sudah bisa dimainkan pada smartphone.

BAB III PEMBAHASAN - repository.bsi.ac.id · sholat, dzikir sesudah sholat, doa sesudah sholat, yang ditampilkan di dalam aplikasi panduan sholat tersebut. Hal di dalam penelitian

Documents