Embed Size (px)
Citation preview
ii
LAPORAN TUGAS AKHIR
APLIKASI DOA HARIAN UNTUK PAUD
BERBASIS ANDROID
Disusun oleh:
Nama : Dewi Nurlaili
NIM : 16.3.00020
Program Studi : Teknik Informatika
Jenjang Pendidikan : Diploma III
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
STMIK SINAR NUSANTARA
SURAKARTA
2019
iii
Laporan Tugas Akhir
Laporan ini disusun guna memenuhi salah satu syarat
untuk menyelesaikan Jenjang Pendidikan Diploma III
pada STMIK Sinar Nusantara
Disusun oleh:
Nama : Dewi Nurlaili
NIM : 16.3.00020
Program Studi : Teknik Informatika
Jenjang Pendidikan : Diploma III
SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER
SINAR NUSANTARA
SURAKARTA
2019
iv
v
vi
ii
RINGKASAN
Laporan Proyek Akhir dengan judul Aplikasi Doa Harian Untuk PAUD
Berbasis Android telah dilaksanakan pada April s/d Agustus 2019.
Tujuan Proyek Akhir ini untuk penelitian dan pembuatan tugas akhir yaitu
membuat aplikasi doa harian untuk paud khususnya pada PAUD Khanza Kids
yang interaktif dan aplikatif sebagai media pembelajaran.
Metode penelitian yang digunakan adalah MDLC (Multimedia
Development Life Cycle) yang meliputi Concept (Pengonsepan), Design
(Perancangan), Material Collecting (Pengumpulan Bahan), Assembly
(Pembuatan), Testing (Pengujian), dan Distribution (Pendistribusian). Program
yang digunakan untuk membuat aplikasi ini adalah App Inventor dan Adobe
Illustrator serta Adobe Photoshop untuk mendesain komponen dan tampilan yang
ada pada aplikasi.
Berdasarkan hasil pengujian dengan pengujian black box dan pengujian
kuesioner yang telah dilakukan, maka hasil dari proyek akhir ini dengan judul
Aplikasi Doa Harian Untuk PAUD Berbasis Android sudah cukup baik dan cukup
layak untuk digunakan.
iii
SUMMARY
The Final Project Report with the title of Daily Prayer Application for
PAUD Based on Android has been held on April to September 2019.
The purpose of this Final Project is to conduct research and make a final
assignment, which is to make a daily prayer application for paud especially for
PAUD Khanza Kids which is interactive and applicable as a learning media.
The research method used is MDLC (Multimedia Development Life
Cycle) which includes Concept, Design, Material Collecting, Assembly, Testing,
and Distribution. The program used to create this application is App Inventor and
Adobe Illustrator and Adobe Photoshop to design the components and displays
that are on the application.
Based on the results of testing with black box testing and testing of the
questionnaire that has been done, the results of this final project with the title of
Daily Prayer Application for PAUD Based on Android are quite good and quite
feasible to use.
iv
MOTTO
“... Berusahalah kamu maka Allah dan Rasul-Nya serta orang-orang beriman
akan melihat usahamu”
(Q.S. At-Taubah : 105)
“The purpose to live a happy life is to always be grateful and don’t forget the
magic world: ikhlas, ikhlas, ikhlas”
(Gita Safitri Devi)
“Melakukan kesalahan dalam bertindak lalu belajar darinya lebih baik daripada
tidak pernah salah apalagi tidak pernah melakukan apapun”
(Syafii Efendi)
“Manusia takkan tau kekuatan maksimalnya sampai ia berada dalam kondisi
dimana ia dipaksa kuat untuk bisa bertahan”
(Merry Riana)
“Bagaimana cara menikmati hidup? Bersyukur, ikhlas, dan menikmati sesuai
porsi kita tanpa membandingkannya dengan orang lain”
(Ria Sukma Wijaya)
v
PERSEMBAHAN
Sembah sujud serta syukur kepada Allah Subhanahu wa Ta'ala atas
limpahan cinta dan kasih sayang-Nya yang telah memberikan kekuatan dan
membekaliku ilmu sehingga saya dapat menyelesaikan tugas akhir yang
sederhana ini dengan lancar. Sholawat dan salam selalu terlimpahkan keharibaan
Rasulullah Muhammad Shallallahu 'Alaihi Wassalam.
Dengan ini saya persembahkan karya ini untuk:
Bapak Ali Purwoko dan Ibu Alimatur Rofi’ah tercinta sebagai tanda bakti,
hormat, dan rasa terima kasih yang tiada terhingga atas doa, kasih sayang,
segala dukungan baik moral dan moril sehingga saya dapat menjalani hari-
hari dengan penuh rasa kebahagiaan.
Kedua adik saya Kofifah dan Konita yang selalu membantu dan mensupport
saya dan yang selalu saya repotkan.
Dosen pembimbing Ibu Dwi Remawati, S. Kom., M. Kom., yang selalu
sabar membimbing dan membantu saya dalam pembuatan tugas akhir ini
sehingga tugas akhir ini dapat dibuat dan selesai dengan lancar.
Bapak dan Ibu Dosen STMIK Sinar Nusantara Surakarta yang memberikan
ilmu yang banyak dan sangat bermanfaat kepada saya.
Sahabat-sahabat tercinta terkasih Andar, Dafia, dan Siti yang selalu
membantu, menemani, mensupport dan tak lupa mendoakan saya sebagai
member group R3 (Reborn). Terimakasih atas bantuan doa, nasehat,
hiburan, traktiran, ejekkan, dan semangat yang telah diberikan selama
masuk kuliah sampai sekarang. Gomawo chinguya. Saranghamida.
Dan teman-teman seperjuangan TI-D3 16 A Pagi yang telah membantu dan
menemani saya di kegiatan perkuliahan.
vi
KATA PENGANTAR
Dengan memanjatkan Puji Syukur Kepada Tuhan Yang Maha Esa
sehingga tersusunlah Laporan Tugas Akhir ini dengan judul “Aplikasi Doa Harian
Untuk PAUD Berbasis Android”.
Penyusunan Proyek Akhir ini merupakan salah satu kewajiban yang
dimaksud untuk melengkapi syarat kelulusan studi di STMIK Sinar Nusantara
Surakarta.
Atas tersusunnya Laporan Proyek Akhir ini penulis tidak lupa
mengucapkan terimakasih sebesar-besarnya kepada :
1. Ibu Kumaratih Sandradewi, S. P., M. Kom. selaku Ketua STMIK Sinar
Nusantara Surakarta.
2. Ibu Dwi Remawati, S. Kom., M. Kom. selaku Ketua Program Studi Teknik
Informatika D3 dan Dosen Pembimbing.
3. Bapak dan Ibu Dosen STMIK Sinar Nusantara Surakarta.
Surakarta, Agustus 2019
Dewi Nurlaili
vii
DAFTAR ISI
PERSETUJUAN LAPORAN TUGAS AKHIR ................................................. i
RINGKASAN ..................................................................................................... ii
SUMMARY ........................................................................................................ iii
MOTTO .............................................................................................................. iv
PERSEMBAHAN ............................................................................................... v
KATA PENGANTAR ........................................................................................ vi
DAFTAR ISI ....................................................................................................... vii
DAFTAR TABEL ............................................................................................... xi
DAFTAR GAMBAR .......................................................................................... xii
BAB I PENDAHULUAN ............................................................................. 1
1.1. Latar Belakang Masalah ............................................................. 1
1.2. Perumusan Masalah .................................................................... 3
1.3. Pembatasan Masalah ................................................................... 3
1.4. Tujuan Tugas Akhir .................................................................... 4
1.5. Manfaat Tugas Akhir .................................................................. 4
1.6. Metode Penelitian ....................................................................... 5
1.7. Sistematika Penulisan ................................................................. 7
BAB II LANDASAN TEORI ......................................................................... 10
2.1. Aplikasi ....................................................................................... 10
2.2. Android ....................................................................................... 11
2.3. APP Inventor ............................................................................... 13
2.3.1. Pengertian APP Inventor ................................................. 13
2.3.2. Cara Kerja APP Inventor ................................................ 14
viii
2.3.3. Komponen APP Inventor ................................................ 14
2.4. Adobe Photoshop ........................................................................ 15
2.4.1. Pengertian Adobe Photoshop .......................................... 15
2.4.2. Fitur Adobe Photoshop ................................................... 16
2.5. Adobe Illustrator ......................................................................... 17
2.5.1. Pengertian Adobe Illustrator ........................................... 17
2.5.2. Fungsi Adobe Illustrator ................................................. 18
BAB III GAMBARAN UMUM PAUD .......................................................... 19
3.1. Obyek Penelitian ......................................................................... 19
3.2. Sejarah PAUD Khanza Kids ....................................................... 20
3.3. Visi dan Misi PAUD Khanza Kids ............................................. 20
3.4. Tujuan PAUD Khanza Kids ....................................................... 21
3.5. Struktur Kepengurusan PAUD Khanza Kids .............................. 21
3.6. Sistem Pembelajaran ................................................................... 23
BAB IV PEMBAHASAN ................................................................................ 24
4.1 Concept (Pengonsepan) ............................................................. 24
4.2 Design (Perancangan) ................................................................ 24
4.2.1 Desain Antar Muka ......................................................... 24
4.2.2 Flowchart Diagram......................................................... 29
4.2.3 Use Case Diagram .......................................................... 31
4.2.4 Activity Diagram ............................................................. 31
4.3 Material Collecting (Pengumpulan Bahan) ............................... 35
4.4 Assembly (Pembuatan) ............................................................... 37
4.4.1 Designer .......................................................................... 37
ix
4.4.1.1 Membuat Project ................................................ 37
4.4.1.2 Pembuatan Halaman Splash Screen ................... 39
4.4.1.3 Pembuatan Halaman Menu Utama ..................... 40
4.4.1.4 Pembuatan Halaman Tentang............................. 47
4.4.1.5 Pembuatan Halaman Daftar Doa ........................ 58
4.4.1.6 Pembuatan Halaman Daftar Surat Pendek ......... 64
4.4.1.7 Pembuatan Halaman Isi Doa .............................. 70
4.4.1.8 Pembuatan Halaman Isi Surat Pendek ............... 78
4.4.2 Blocks.............................................................................. 85
4.4.2.1 Pembuatan Blocks Halaman Splash Screen ....... 85
4.4.2.2 Pembuatan Blocks Halaman Menu Utama......... 88
4.4.2.3 Pembuatan Blocks Halaman Tentang ................ 95
4.4.2.4 Pembuatan Blocks Halaman Daftar Doa ............ 98
4.4.2.5 Pembuatan Blocks Halaman Daftar
Surat Pendek ....................................................... 102
4.4.2.6 Pembuatan Blocks Halaman Isi Doa .................. 106
4.4.2.7 Pembuatan Blocks Halaman Isi
Surat Pendek ....................................................... 110
4.4.3 Export Aplikasi ............................................................... 113
4.4.4 Perancangan Antar Muka ................................................ 115
4.4.5 Kode Program ................................................................. 123
4.5 Testing (Pengujian) .................................................................... 137
4.6 Distribution (Pendistribusian) .................................................... 144
BAB V PENUTUP ........................................................................................... 145
x
5.1 Kesimpulan ................................................................................. 145
5.2 Saran ........................................................................................... 145
DAFTAR PUSTAKA ...................................................................................... 147
LAMPIRAN
xi
DAFTAR TABEL
Tabel 4.1 Pengujian Black Box ........................................................................... 138
Tabel 4.2 Tabel Kuesioner .................................................................................. 141
Tabel 4.3 Tabel Data Hasil Kuesioner ................................................................ 142
xii
DAFTAR GAMBAR
Gambar 3.1 Peta PAUD Khanza Kids .................................................................. 20
Gambar 3.2 Bagan Struktur Organisasi ................................................................ 21
Gambar 4.1 Perancangan Halaman Splash Screen ............................................... 25
Gambar 4.2 Perancangan Halaman Menu Utama ................................................. 26
Gambar 4.3 Perancangan Halaman Menu Tentang Aplikasi ................................ 26
Gambar 4.4 Perancangan Halaman Daftar Doa .................................................... 27
Gambar 4.5 Perancangan Halaman Doa ............................................................... 28
Gambar 4.6 Perancangan Halaman Daftar Surat Pendek...................................... 28
Gambar 4.7 Perancangan Halaman Surat Pendek ................................................. 29
Gambar 4.8 Flowchart Diagram Aplikasi ............................................................ 30
Gambar 4.9 Use Case Diagram ............................................................................ 31
Gambar 4.10 Activity Diagram Menu Utama ....................................................... 32
Gambar 4.11 Activity Diagram Menu Tentang ..................................................... 33
Gambar 4.12 Activity Diagram Menu Daftar Doa ................................................ 33
Gambar 4.13 Activity Diagram Menu Surat Pendek ............................................. 34
Gambar 4.14 Activity Diagram Menu Keluar ....................................................... 35
Gambar 4.15 Masuk MIT App Inventor ............................................................... 37
Gambar 4.16 Sign In dengan Akun Google .......................................................... 38
Gambar 4.17 Halaman Utama MIT App Inventor ................................................ 38
Gambar 4.18 Membuat Project Baru .................................................................... 39
Gambar 4.19 Menambahkan Background pada Halaman Splash Screen ............. 39
Gambar 4.20 Menambahkan Clock pada Halaman Splash Screen ....................... 40
xiii
Gambar 4.21 Membuat Halaman MenuUtama ..................................................... 40
Gambar 4.22 Menambahkan Background pada Halaman MenuUtama................ 41
Gambar 4.23 Menambahkan Layout ..................................................................... 41
Gambar 4.24 Menambahkan Layout HorizontalArrangement.............................. 42
Gambar 4.25 Menambahkan Button ..................................................................... 43
Gambar 4.26 Menambahkan Layout HorizontalArrangement.............................. 43
Gambar 4.27 Menambahkan Label ....................................................................... 44
Gambar 4.28 Properties Player1 ........................................................................... 45
Gambar 4.29 Menambahkan Notifier ................................................................... 45
Gambar 4.30 Menambahkan Layout HorizontalArrangement.............................. 46
Gambar 4.31 Menambahkan Button Mute ............................................................ 47
Gambar 4.32 Properties Screen TentangAplikasi ................................................. 47
Gambar 4.33 Menambahkan Label ....................................................................... 48
Gambar 4.34 Menambahkan Image ...................................................................... 48
Gambar 4.35 Menambahkan Layout VerticalArrangement .................................. 49
Gambar 4.36 Menambahkan Label ....................................................................... 50
Gambar 4.37 Menambahkan Label 2 .................................................................... 50
Gambar 4.38 Menambahkan Layout VerticalArrangement .................................. 51
Gambar 4.39 Menambahkan Label ....................................................................... 52
Gambar 4.40 Menambahkan Button Kurikulum ................................................... 52
Gambar 4.41 Menambahkan Layout VerticalArrangement .................................. 53
Gambar 4.42 Menambahkan Label ....................................................................... 54
Gambar 4.43 Menginputkan Button Logo SiNus ................................................. 54
Gambar 4.44 Menambahkan Label Developer ..................................................... 55
xiv
Gambar 4.45 Menambahkan Button Home .......................................................... 56
Gambar 4.46 Menambahkan Layout HorizontalArrangement.............................. 56
Gambar 4.47 Menambahkan Button Mute ............................................................ 57
Gambar 4.48 Menambahkan Player ...................................................................... 58
Gambar 4.49 Properties Screen DaftarDoa ........................................................... 59
Gambar 4.50 Menambahkan Label ....................................................................... 59
Gambar 4.51 Menambahkan Layout VerticalArrangement .................................. 60
Gambar 4.52 Menambahkan Layout TableArrangement...................................... 61
Gambar 4.53 Menambahkan Button Doa.............................................................. 61
Gambar 4.54 Menambahkan Button Home .......................................................... 62
Gambar 4.55 Menambahkan Layout HorizontalArrangement.............................. 63
Gambar 4.56 Menambahkan Button Mute ............................................................ 63
Gambar 4.57 Menambahkan Backsound............................................................... 64
Gambar 4.58 Properties Screen DaftarSuratPendek ............................................. 65
Gambar 4.59 Menambahkan Label ....................................................................... 65
Gambar 4.60 Menambahkan Layout VerticalArrangement .................................. 66
Gambar 4.61 Menambahkan Layout TableArrangement...................................... 67
Gambar 4.62 Menambahkan Button Surat ............................................................ 67
Gambar 4.63 Menambahkan Button Back ............................................................ 68
Gambar 4.64 Menambahkan Layout HorizontalArrangment ............................... 69
Gambar 4.65 Menambahkan Button Mute ............................................................ 69
Gambar 4.66 Menambahkan Backsound............................................................... 70
Gambar 4.67 Menambahkan Layout ..................................................................... 71
Gambar 4.68 Menambahkan Label ....................................................................... 71
xv
Gambar 4.69 Menambahkan Image ...................................................................... 72
Gambar 4.70 Menambahkan Label Teks Arab Doa.............................................. 73
Gambar 4.71 Menambahkan Label Teks Latin Doa ............................................. 73
Gambar 4.72 Menambahkan Label Teks Arti Doa ............................................... 74
Gambar 4.73 Menambahkan Layout TableArrangement...................................... 75
Gambar 4.74 Menambahkan Button Audio .......................................................... 76
Gambar 4.75 Menambahkan Button List .............................................................. 76
Gambar 4.76 Menambahkan Audio Doa .............................................................. 77
Gambar 4.77 Properties Layout DoaSebelumBelajar ........................................... 78
Gambar 4.78 Menambahkan Layout VerticalArrangement .................................. 79
Gambar 4.79 Menambahkan Label ....................................................................... 79
Gambar 4.80 Menambahkan Label Teks Arab Surat Pendek ............................... 80
Gambar 4.81 Menambahkan Label Teks Latin Surat Pendek............................... 81
Gambar 4.82 Menambahkan Label Teks Arti Surat ............................................. 81
Gambar 4.83 Menambahkan TableArrangement .................................................. 82
Gambar 4.84 Menambahkan Button Audio .......................................................... 83
Gambar 4.85 Menambahkan Audio ...................................................................... 83
Gambar 4.86 Menambahkan Button List .............................................................. 84
Gambar 4.87 Properties Layout AlFatihah ........................................................... 85
Gambar 4.88 Langkah 1 Blocks Halaman Splash Screen ..................................... 86
Gambar 4.89 Langkah 2 Blocks Halaman Splash Screen ..................................... 86
Gambar 4.90 Langkah 3 Blocks Halaman Splash Screen ..................................... 87
Gambar 4.91 Langkah 4 Blocks Halaman Splash Screen ..................................... 87
Gambar 4.92 Langkah 5 Blocks Halaman Splash Screen ..................................... 88
xvi
Gambar 4.93 Langkah 1 Blocks Halaman Menu Utama ...................................... 88
Gambar 4.94 Langkah 2 Blocks Halaman Menu Utama ...................................... 88
Gambar 4.95 Langkah 3 Blocks Halaman Menu Utama ...................................... 89
Gambar 4.96 Langkah 4 Blocks Halaman Menu Utama ...................................... 89
Gambar 4.97 Langkah 5 Blocks Halaman Menu Utama ...................................... 90
Gambar 4.98 Langkah 6 Blocks Halaman Menu Utama ...................................... 90
Gambar 4.99 Langkah 7 Blocks Halaman Menu Utama ...................................... 91
Gambar 4.100 Langkah 8 Blocks Halaman Menu Utama .................................... 92
Gambar 4.101 Langkah 9 Blocks Halaman Menu Utama .................................... 92
Gambar 4.102 Langkah 10 Blocks Halaman Menu Utama .................................. 93
Gambar 4.103 Langkah 11 Blocks Halaman Menu Utama .................................. 94
Gambar 4.104 Langkah 12 Blocks Halaman Menu Utama .................................. 95
Gambar 4.105 Langkah 1 Blocks Halaman Tentang ............................................ 95
Gambar 4.106 Langkah 2 Blocks Halaman Tentang ............................................ 96
Gambar 4.107 Langkah 3 Blocks Halaman Tentang ............................................ 96
Gambar 4.108 Langkah 4 Blocks Halaman Tentang ............................................ 97
Gambar 4.109 Langkah 5 Blocks Halaman Tentang ............................................ 97
Gambar 4.110 Langkah 6 Blocks Halaman Tentang ............................................ 97
Gambar 4.111 Langkah 1 Blocks Halaman Daftar Doa ....................................... 98
Gambar 4.112 Langkah 2 Blocks Halaman Daftar Doa ....................................... 98
Gambar 4.113 Langkah 3 Blocks Halaman Daftar Doa ....................................... 99
Gambar 4.114 Langkah 4 Blocks Halaman Daftar Doa ....................................... 99
Gambar 4.115 Langkah 5 Blocks Halaman Daftar Doa ..................................... 100
Gambar 4.116 Langkah 6 Blocks Halaman Daftar Doa ..................................... 100
xvii
Gambar 4.117 Langkah 7 Blocks Halaman Daftar Doa ..................................... 101
Gambar 4.118 Langkah 8 Blocks Halaman Daftar Doa ..................................... 101
Gambar 4.119 Langkah 1 Blocks Halaman Daftar Surat Pendek ....................... 102
Gambar 4.120 Langkah 2 Blocks Halaman Daftar Surat Pendek ....................... 102
Gambar 4.121 Langkah 3 Blocks Halaman Daftar Surat Pendek ....................... 103
Gambar 4.122 Langkah 4 Blocks Halaman Daftar Surat Pendek ....................... 103
Gambar 4.123 Langkah 5 Blocks Halaman Daftar Surat Pendek ....................... 104
Gambar 4.124 Langkah 6 Blocks Halaman Daftar Surat Pendek ....................... 105
Gambar 4.125 Langkah 7 Blocks Halaman Daftar Surat Pendek ....................... 106
Gambar 4.126 Langkah 8 Blocks Halaman Daftar Surat Pendek ....................... 106
Gambar 4.127 Langkah 1 Blocks Halaman Isi Doa ............................................ 107
Gambar 4.128 Langkah 2 Blocks Halaman Isi Doa ............................................ 107
Gambar 4.129 Langkah 3 Blocks Halaman Isi Doa ............................................ 107
Gambar 4.130 Langkah 4 Blocks Halaman Isi Doa ............................................ 108
Gambar 4.131 Langkah 5 Blocks Halaman Isi Doa ............................................ 109
Gambar 4.132 Langkah 6 Blocks Halaman Isi Doa ............................................ 109
Gambar 4.133 Langkah 7 Blocks Halaman Isi Doa ............................................ 110
Gambar 4.134 Langkah 1 Blocks Halaman Isi Surat Pendek ............................. 110
Gambar 4.135 Langkah 2 Blocks Halaman Isi Surat Pendek ............................. 111
Gambar 4.136 Langkah 3 Blocks Halaman Isi Surat Pendek ............................. 111
Gambar 4.137 Langkah 4 Blocks Halaman Isi Surat Pendek ............................. 112
Gambar 4.138 Langkah 5 Blocks Halaman Isi Surat Pendek ............................. 112
Gambar 4.139 Langkah 6 Blocks Halaman Isi Surat Pendek ............................. 113
Gambar 4.140 Langkah 7 Blocks Halaman Isi Surat Pendek ............................. 113
xviii
Gambar 4.141 Menyimpan Project ..................................................................... 114
Gambar 4.142 Build Aplikasi ............................................................................. 114
Gambar 4.143 Tampilan Logo Aplikasi.............................................................. 115
Gambar 4.144 Tampilan Halaman Splash Screen............................................... 116
Gambar 4.145 Tampilan Halaman Menu Utama ................................................ 117
Gambar 4.146 Tampilan Halaman Tentang ........................................................ 118
Gambar 4.147 Tampilan Halaman Daftar Doa ................................................... 119
Gambar 4.148 Tampilan Halaman Daftar Surat Pendek ..................................... 120
Gambar 4.149 Tampilan Isi Doa ......................................................................... 121
Gambar 4.150 Tampilan Isi Surat Pendek .......................................................... 122
Gambar 4.151 Blocks Halaman Splash Screen ................................................... 123
Gambar 4.152 Blocks Halaman Menu Utama .................................................... 124
Gambar 4.153 Blocks Halaman Tentang ............................................................ 126
Gambar 4.154 Blocks Halaman Daftar Doa dan Isi Doa 1 ................................. 128
Gambar 4.155 Blocks Halaman Daftar Doa dan Isi Doa 2 ................................. 129
Gambar 4.156 Blocks Halaman Daftar Surat Pendek dan Isi Surat Pendek 1 .... 133
Gambar 4.157 Blocks Halaman Daftar Surat Pendek dan Isi Surat Pendek 2 .... 134
115
4.4.4 Perancangan Antar Muka
Perancangan antar muka adalah tahap perancangan dan
penerapan sistem yang akan dilakukan jika disetujui termasuk
program aplikasi yang telah dibuat pada tahap setelah
pengonsepan, perancangan, pengumpulan bahan, dan pembuatan
bahwa program aplikasi siap untuk dioperasikan. Berikut adalah
perancangan antar muka aplikasi Doa Harian untuk PAUD:
1. Tampilan Logo Aplikasi
Gambar 4.143 Tampilan Logo Aplikasi
Tampilan logo aplikasi ini dibuat dengan desain seorang anak
laki-laki dan seorang anak perempuan muslim dengan nama
aplikasi Doa Harian PAUD.
116
2. Halaman Splash Screen
Gambar 4.144 Tampilan Halaman Splash Screen
Tampilan Splash Screen dalam aplikasi ini adalah tampilan
awal ketika membuka apikasi dan harus melalui durasi 2,5
detik untuk pindah secara otomatis ke halaman Menu Utama.
117
3. Halaman Menu Utama
Gambar 4.145 Tampilan Halaman Menu Utama
Tampilan Menu Utama dalam aplikasi ini menampilkan 2
button untuk daftar Doa dan Daftar Surat Pendek serta terdapat
button Tentang untuk informasi aplikasi dan button Keluar.
Juga terdapat sebuah button mute audio backsound.
118
4. Halaman Tentang
Gambar 4.146 Tampilan Halaman Tentang
Tampilan Tentang dalam aplikasi ini menampilkan informasi
aplikasi yang berupa deskripsi aplikasi, link kurikulum PAUD
Khanza Kids, dan Developer aplikasi. Terdapat 2 button yaitu
button menu utama dan button mute audio backsound.
119
5. Halaman Daftar Doa
Gambar 4.147 Tampilan Halaman Daftar Doa
Tampilan Daftar Doa dalam aplikasi ini menampilkan 6 button
pilihan Doa untuk PAUD antara lain: Doa Sebelum Belajar,
Doa Kedua Orang Tua, Doa Sebelum Makan, Doa Sesudah
Makan, Doa Sebelum Tidur, dan Doa Bangun Tidur. Serta
terdapat 1 button home yang digunakan untuk tombol kembali
ke menu utama dan button mute audio backsound.
120
6. Halaman Daftar Surat Pendek
Gambar 4.148 Tampilan Halaman Daftar Surat Pendek
Tampilan Daftar Surat Pendek dalam aplikasi ini menampilkan
5 button pilihan Surat Pendek untuk PAUD antara lain: Surat
Al Fatihah, Surat An Nas, Surat Al Falaq, Surat Al Ikhlas, dan
Surat Al Ashr. Serta terdapat 1 button home yang digunakan
untuk tombol kembali ke menu utama dan button mute audio
backsound.
121
7. Halaman Isi Doa
Gambar 4.149 Tampilan Isi Doa
Tampilan Isi Doa dalam aplikasi ini menampilkan isi doa yang
telah dipilih atau yang ingin dibaca. Pada halaman ini juga
terdapat audio doa yang bisa di putar, pause, dan stop. Ada
button previous dan next untuk membuka halaman doa
sebelum atau selanjutnya. Sebuah button list untuk kembali ke
halaman daftar doa.
122
8. Halaman Isi Surat Pendek
Gambar 4.150 Tampilan Isi Surat Pendek
Tampilan Isi Surat Pendek dalam aplikasi ini menampilkan isi
surat pendek yang telah dipilih atau yang ingin dibaca. Pada
halaman ini juga terdapat audio surat pendek yang bisa di
putar, pause, dan stop. Ada button previous dan next untuk
membuka halaman surat pendek sebelum atau selanjutnya.
Sebuah button list untuk kembali ke halaman daftar surat
pendek.
