BAB III ANALISIS DAN PERANCANGAN SISTEM
3.1. Analisis Sistem Analisi sistem adalah kegiatan untuk melihat sistem yang sudah berjalan, melihat
bagian
mana
yang
bagus
dan
tidak
bagus,
dan
kemudian
mendokumentasikan kebutuhan yang akan dipenuhi dalam sistem yang baru (Rosa, 2011). Analisis model yang dipakai pada pembuatan Aplikasi Mobile Tuntunan Shalat berbasis Android adalah menggunakan Pemrograman Berorientasi objek atau Object Oriented Programming (OOP). Pemrograman Berorientasi objek adalah sebuah pendekatan untuk pengembangan atau development suatu software dimana dalam struktur software tersebut didasarkan kepada interaksi objek dalam penyelesaian suatu proses. Interaksi tersebut mengambil form dari pesan-pesan dan
mengirimkannya
kembali
antar
objek
tersebut
(http//www.tutie-
moelyanah.blogspot.com/p/pengertian-object-oriented-programming.html).
3.1.1. Tujuan Analisis Sistem Analisis sistem dilakukan untuk mengidentifikasi kebutuhan sistem yang berupa menspesifikasikan kebutuhan yang berupa kebutuhan fungsional dan nonfungsional lalu merancang sistem seperti membuat rancangan fungsional, rancangan database dan rancangan interface.
50
51
3.1.2. Spesifikasi Kebutuhan Kebutuhan-kebutuhan sistem dalam aplikasi Mobile Tuntunan Shalat ini dibagi kedalam dua bagian yaitu kebutuhan fungsional dan kebutuhan nonfungsional. 3.1.2.1. Kebutuhan Fungsional Spesifikasi kebutuhan fungsional dalam Aplikasi Mobile Tuntunan Shalat berbasis Android ini diberi kode TA_F dan dilanjutkan dengan nomor urut masing-masing kebutuhan. Berikut pada tabel 3.1 akan dijelaskan kebutuhan fungsional pada aplikasi ini: Tabel 3.1 Kebutuhan Fungsional Aplikasi Mobile Tuntunan Shalat berbasis Android ID TA_F_01
Fitur Tampil Subuh
Layanan
Deskripsi
Menampilkan tata Layanan cara shalat subuh
diberikan tata
cara
subuh
yang berupa shalat dengan
menampilkan gambar,
bacaan
dan keterangannya. TA_F_02
Tampil Dzuhur
Menampilkan tata Layanan cara shalat dzuhur
diberikan tata
cara
yang berupa shalat
52
dzuhur
dengan
menampilkan gambar,
bacaan
dan keterangannya. TA_F_03
Tampil Ashar
Menampilkan tata Layanan cara shalat ashar
diberikan tata
cara
ashar
yang berupa shalat dengan
menampilkan gambar,
bacaan
dan keterangannya. TA_F_04
Tampil Magrib
Menampilkan tata Layanan cara shalat magrib
diberikan tata
cara
magrib
yang berupa shalat dengan
menampilkan gambar,
bacaan
dan keterangannya. TA_F_05
Tampil Isya
Menampilkan tata Layanan cara shalat isya
diberikan
yang berupa
53
tata
cara
isya
shalat dengan
menampilkan gambar,
bacaan
dan keterangannya.
3.1.2.2. Kebutuhan Software dan Hardware Spesifikasi Perangkat Lunak yang diperlukan untuk membangun Aplikasi
Mobile Tuntunan Shalat berbasis Android ini adalah : 1.
Sistem Operasi Windows XP 2 Gold
2.
J2SE SDK (Java 2 Standart Edition Software Development Kit)
3.
Eclipse versi Indigo
4.
ADT (Android Development Tools)
5.
AVD (Android Virtual Device) Program dirancang menggunakan Java Eclipse. Jadi Aplikasi Mobile
Tuntunan Shalat berbasis Android ini dapat digunakan pada smartphone berbasis android dengan versi android 2.3 atau biasa dikenal dengan gingerbread. Oleh karena itu dalam pengujian nya, program ini menggunakan emulator android. Spesifikasi perangkat keras yang meliputi netbook dan smartphone tersebut juga saling berinteraksi dengan perangkat lunak. Karena perangkat lunak
54
memberikan instruksi-instruksi kepada perangkat keras untuk melakukan suatu tugas tertentu, sehingga dapat menjalankan sistem yang ada. Perangkat keras yang digunakan dalam pengembangan aplikasi adalah sebagai berikut: 1.
Intel Pentium
2.
RAM 2GB
3.
Hard disk 160GB
4.
Mouse and Keyboard
5.
Laptop 15,4 inci
6.
Smartphone Android versi 2.3 Spesifikasi Pengguna (User), memiliki criteria:
1.
Mengerti Operasional Smartphone (Android)
2.
Dapat Mengoperasikan Aplikasi pada Smartphone (Android)
3.
Memiliki Smartphone Android 2.3
3.2. Perancangan Sistem 3.2.1. Rancangan Fungsional 1.
Diagram Use Case Use Case pada aplikasi ini adalah User dapat mengakses secara langsung Use
Case Menu Subuh, Menu Dzuhur, Menu Ashar, Menu Magrib, dan Isya . Menu Subuh merupakan Use Case yang di dalam nya terdapat Use Case tambahan, yaitu Use Case Niat Shalat Subuh, Use Case Takbirotul Ihrom, Use Case Berdiri, Use Case Ruku, Use Case I’tidal, Use Case Do’a qunut, Use Case Sujud, Use Case
55
Duduk Antara Dua Sujud, Use Case Tasyahud Awal, Use Case Tasyahud Akhir, dan Use Case Salam. Menu Use case Dzuhur merupakan Use Case yang di dalam nya terdapat Use Case tambahan, seperti Use Case Niat Shalat Dzuhur, Use Case Takbirotul Ihrom, Use Case Berdiri, Use Case Ruku, Use Case I’tidal. Use Case Sujud, Use Case Duduk Antara Dua Sujud, Use Case Tasyahud Awal, Use Case Tasyahud Akhir, dan Use Case Salam. Begitu juga dengan Use Case Ashar, Use Case Magrib dan Use Case Isya isi tambahan dari Use Casenya sama dengan Use Case Dzuhur.
Berikut pada gambar 3.1 adalah diagram Use Case dari Aplikasi Mobile Tuntunan Shalat berbasis Android: <<extend>>
MenuMagrib
<<extend>> TampilMenuMagrib
MenuAshar<<extend>> TampilMenuAshar
MenuDzuhur user
MenuIsya
MenuSubuh
TampilMenuDzuhur <<extend>>
TampilMenuIsya <<extend>>
TampilmMenuSubuh
Gambar 3.1 Use Case Aplikasi Mobile Tuntunan Shalat berbasis Android
56
2. Skenario Use Case Skenario Use Case pada Menu Subuh dijelaskan dalam tabel berikut ini: Tabel 3.2 Skenario Use Case pada Menu Subuh Nomor Use Case
1
Nama Use Case
Menu Subuh
Tujuan Use Case
Untuk masuk ke dalam menu Subuh dan mengakses semua feature yang ada di dalamnya
Status Awal
Masuk ke Menu Subuh
Definisi Use Case
Menampilkan content dari menu Subuh
Skenario Aksi Aktor
Reaksi Sistem
1. Masuk ke Menu Subuh
2. Tampil menu Subuh
3. Pilih Niat Shalat subuh
4. Tampil Niat Shalat Subuh
5. Pilih Takbirotul Ihrom
6. Tampil Takbirotul Ihrom
7. Pilih Berdiri
8. Tampil halaman Berdiri
9. Pilih Ruku
10. Tampil ruku
11. Pilih I’tidal
12. Tampil I’tidal
13. Pilih Do’a Qunut
14. Tampil Do’a Qunut
15. Pilih Sujud
16. Tampil Sujud
17. Pilih
Duduk
Antara
Dua
18. Tampil Duduk Antara Dua Sujud
Sujud 19. Pilih Tasyahud awal
20. Tampil Tasyahud awal
57
21. Pilih Tasyahud Akhir
22. Tampil Tasyahud Akhir
23. Pilih Salam
24. Tampil Salam
Kondisi Akhir
Tampil halaman hasil
Exception Flow of Event: 4a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia 6a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia 8a. Tampil menu Do’a Iftitah, 8b. Tampil menu Al-fatihah 8c. Tampil menu Surat Pendek 10a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia 12a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia 14a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia 16a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk
58
menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia 18a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia 20a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia 22a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia 24a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia
Skenario Use Case pada Menu Dzuhur dijelaskan dalam tabel berikut ini: Tabel 3.3 Skenario Use Case pada Menu Dzuhur Nomor Use Case
2
Nama Use Case
Menu Dzuhur
Tujuan Use Case
Untuk masuk ke dalam menu Subuh dan mengakses semua feature yang ada di dalamnya
Status Awal
Masuk ke Menu Dzuhur
Definisi Use Case
Menampilkan content dari menu Dzuhur
59
Skenario Aksi Aktor
Reaksi Sistem
1. Masuk ke Menu Dzuhur
2. Tampil menu Dzuhur
3. Pilih Niat Shalat Dzuhur
4. Tampil Niat Shalat Dzuhur
5. Pilih Takbirotul Ihrom
6. Tampil Takbirotul Ihrom
7. Pilih Berdiri
8. Tampil halaman Berdiri
9. Pilih Ruku
10. Tampil ruku
11. Pilih I’tidal
12. Tampil I’tidal
13. Pilih Sujud
14. Tampil Sujud
15.Pilih Duduk Antara Dua Sujud
16. Tampil Duduk Antara Dua Sujud
17. Pilih Tasyahud awal
18. Tampil Tasyahud awal
19. Pilih Tasyahud Akhir
20. Tampil Tasyahud Akhir
21. Pilih Salam
22. Tampil Salam
Kondisi Akhir
Tampil halaman hasil
Exception Flow of Event: 4a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia 6a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia 8a. Tampil menu Do’a Iftitah 8b. Tampil menu Al-fatihah
60
8c. Tampil menu Surat Pendek 10a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia 12a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia 14a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia 16a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia 18a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia 20a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia 22a. Pilih Button play untuk menjalankan suara, pilih Button Stop untuk menghentikan suara, pilih Button English untuk Translate Inggris, pilih Button Indonesia untuk Translate Indonesia
61
a.
Activity Diagram Activity Diagram menggambarkan proses keseluruhan dari Aplikasi Mobile
Tuntunan Shalat berbasis Android ini. Secara keseluruhan proses dari Aplikasi Mobile Tuntunan Shalat berbasis Android ini digambarkan secara runtun pada gambar 3.2 di bawah ini:
TampilMenu
PilihMenu TampilMenu2 TampilMenu4 TampilMenu1 TampilMenu3 TampilMenu5
Dzuhur
TampilDzuhur
Subuh
Ashar
Magrib
Isya
TampilSubuh
TampilAshar
TampilMagrib
TampilIsya
Gambar 3.2 Activity Diagram pada Aplikasi Mobile Tuntunan Shalat berbasis Android
62
1.
Activity Diagram Menu Subuh User pertama kali mengakses aplikasi dengan memilih menu Subuh pada
halaman utama aplikasi. Setelah masuk ke dalam menu subuh ini, akan diberikan beberapa pilihan yang akan dilihat pada halaman selanjutnya. Pada Menu Subuh terdapat sebeleas pilihan utama, yaitu Niat Shalat Subuh, Takbirotul Ihrom, Berdiri (Do’a Iftitah, Al-Fatihah, Surat-Surat Pendek), Ruku, I’tidal, Do’a Qunut, Sujud, Duduk antara Dua Sujud, Tasyahud Awal, Tasyahud Akhir, dan Salam. User dapat memilih apa saja yang ingin ditampilkan dari pilihan tersebut.
63
Activity Diagram Menu Subuh digambarkan pada gambar 3.3 berikut:
Masuk Menu Subuh
Tampil Menu Subuh
Ya
Tidak
Tidak Ya
Niat Shalat Subuh
Takbirotul Ihrom
Tampil Niat Shalat Subuh
Tampil Takbirotul Ihrom
Tidak
Tidak
Tidak
Tidak
Ya
Ya
Ya
Berdiri
Ruku
I'tidal
Do'a Qunut
Tampil Ruku
Tampil I'tidal
Tampil Do'a qunut
Tidak
Ya
Ya
Tidak Ya Sujud
Tampil Sujud
Tidak Ya
Duduk anatara Dua Sujud
Tampil Duduk anatar Dua Sujud
Tidak
Tampil Tasyahud Awal
Tidak
Al-fatihah
Ya
Ya Tasyahud Awal
Do'a iftitah
Ya
Tidak Ya
Ya Surat pendek
Back
Gambar 3.3 Activity Diagram Menu Subuh pada Aplikasi Mobile Tuntunan Shalat berbasis Android
Tasyahud Akhir
Tampil Tasuahud Akhir
Salam
Tampil Salam
64
2.
Activity Diagram Menu Dzuhur User pertama kali mengakses aplikasi dengan memilih menu Dzuhur pada
halaman utama aplikasi. Setelah masuk ke dalam menu dzuhur ini, akan diberikan beberapa pilihan yang akan dilihat pada halaman selanjutnya. Pada Menu Dzuhur terdapat sebeleas pilihan utama, yaitu Niat Shalat Subuh, Takbirotul Ihrom, Berdiri (Do’a Iftitah, Al-Fatihah, Surat-Surat Pendek), Ruku, I’tidal, Sujud, Duduk antara Dua Sujud, Tasyahud Awal, Tasyahud Akhir, dan Salam. User dapat memilih apa saja yang ingin ditampilkan dari pilihan tersebut.
65
Activity Diagram Menu Dzuhur digambarkan pada gambar 3.4 berikut:
Masuk Menu Dzuhur
Tampil Menu Dzuhur Ya
Tidak
Niat Shalat Dzuhur
Takbirotul Ihrom
Tampil Niat Dzuhur
Tampil Takbirotul Ihrom
Tidak
Ruku
I'tidal
Sujud
Duduk antara Dua Sujud
Tasyahud Awal
Tasyahud Akhir
Salam
Tampil Ruku
Tampil I'tidal
Tampil sujud
Tampil Duduk anatara Dua Sujud
Tampil Tasyahud Awal
Tampil Tasyahud Akhir
Tampil Salam
Berdiri
Ya
Tidak Tidak
Do'a Iftitah
Ya Al-Fatihah
Ya Surat Pendek
Back
Gambar 3.4 Activity Diagram Menu Dzuhur pada Aplikasi Mobile Tuntunan Shalat berbasis Android
66
b. Sequence Diagram 1.
Menu Subuh User membuka halaman utama aplikasi. Apabila berhasil dibuka, maka
aplikasi akan pindah dari halaman menu utama menuju ke halaman subuh setelah itu User memilih Button yang diinginkan dan kemudian ditampilkan halaman hasil.
67
Berikut dalam gambar 3.5 adalah Sequence Diagram Menu Subuh untuk Aplikasi Mobile Tuntunan Shalat berbasis Android:
Niat Shalat User Subuh 1.Memilih Niat Shalat Subuh
Takbirotul Ihrom
Berdiri
Ruku
I'tidal
Do'a qunut
Sujud
Duduk antara Dua Sujud
Tasyahud Awal
Tasyahud Akhir
Salam
Halaman Hasil
2.Dipanggil Halaman Hasil 3.Menampilkan Halaman Hasil
4.Memilih Takbirotul ihrom
5.Dipanggil Halaman Hasil 6.Menampilkan Halaman Hasil
7.Memilih Berdiri
8.Dipanggil Halaman Hasil 9.Menampilkan Halaman Hasil
10.Memilih Ruku
12.Menampilkan Halaman Hasil
13.Memilih I'tidal
15.Menampilkan Halaman Hasil
16.Memilih Do'a Qunut 18.Menampilkan Halaman Hasil
19.Memilih Sujud
21.Menampilkan Halaman Hasil
22.Memilih Dududk antara Dua Sujud 24.Menampilkan Halaman Hasil
11.Dipanggil Halaman Hasil
14.Dipanggil Halaman hasil
17.Dipanggil Halaman Hasil
20.Dipanggil Halaman Hasil
23.Dipanggil Halaman Hasil
25.Memilih Tasyahud Awal 27.Menampilkan Halaman Hasil
28.Memilih Tasyahud Akhir 30.Menampilkan Halaman Hasil 31.Memilih Salam 33.Menampilkan Halaman Hasil
Gambar 3.5 Sequence Diagram menu Subuh pada Aplikasi Mobile Tuntunan Shalat berbasis Android
26.Diapnggil Halaman Hasil
29.Dipanggil Halaman Hasil 32.Dipanggil Halaman Hasil
68
2.
Menu Dzuhur User membuka halaman utama aplikasi. Apabila berhasil dibuka, maka
aplikasi akan pindah dari halaman menu utama menuju ke halaman dzuhur setelah itu User memilih Button yang diinginkan dan kemudian ditampilkan halaman hasil.
69
Berikut dalam gambar 3.6 adalah Sequence Diagram Menu Dzuhur untuk Aplikasi Mobile Tuntunan Shalat berbasis Android:
Niat Shalat User Dzuhur 1.Memilih Niat Shalat Dzuhur
Takbirotul Ihrom
Berdiri
Ruku
I'tidal
Sujud
Duduk antara Dua Sujud
Tasyahud Awal
Tasyahud Akhir
Salam
Halaman Hasil
2.Dipanggil Halaman Hasil 3.Menampilkan Halaman Hasil
4.Memilih Takbirotul ihrom
5.Dipanggil Halaman Hasil 6.Menampilkan Halaman Hasil
7.Memilih Berdiri
8.Dipanggil Halaman Hasil 9.Menampilkan Halaman Hasil
10.Memilih Ruku
12.Menampilkan Halaman Hasil
13.Memilih I'tidal
15.Menampilkan Halaman Hasil
15.Memilih Sujud
16.Menampilkan Halaman Hasil
18.Memilih Dududk antara Dua Sujud 20.Menampilkan Halaman Hasil
21.Memilih Tasyahud Awal 23.Menampilkan Halaman Hasil
11.Dipanggil Halaman Hasil
14.Dipanggil Halaman hasil
17.Dipanggil Halaman Hasil
19.Dipanggil Halaman Hasil
22.Diapnggil Halaman Hasil
24.Memilih Tasyahud Akhir 26.Menampilkan Halaman Hasil 27.Memilih Salam 29.Menampilkan Halaman Hasil
Gambar 3.6 Sequence Diagram menu Dzuhur pada Aplikasi Mobile Tuntunan Shalat berbasis Android
25.Dipanggil Halaman Hasil 28.Dipanggil Halaman Hasil
70
3.2.2. Rancangan Interface A.
Struktur Tampilan Secara keseluruhan, tampilan pada Aplikasi Mobile Tuntunan Shalat
berbasis Android hampir sama. Pada menu Subuh, Dzuhur, Ashar, Magrib, dan Isya terdapat halaman tampil dan halaman hasil. Berikut pada gambar 3.7 merupakan struktur tampilan dari aplikasi secara keseluruhan: Menu utama
Subuh
Dzuhur
Ashar
Magrib
Isya
Tampil Subuh
Tampil Dzuhur
Tampil Ashar
Tampil Magrib
Tampil Isya
Halaman Hasil
Halan hasil
Halaman hasil
Halaman Hasil
Halaman Hasil
Gambar 3.7 Struktur Tampilan B. Rancangan Layar 1.
Halaman Pertama Aplikasi Halaman pertama aplikasi merupakan halaman pertama yang muncul saat
aplikasi di eksekusi. Halaman ini merupakan halaman tampilan sebelum menuju ke halaman menu utama. Halaman ini akan muncul selama beberapa detik.
71
Berikut pada gambar 3.8 adalah rancangan interface untuk halaman pertama aplikasi:
GAMBAR
NAMA APLIKASI
Gambar 3.8 Halaman Pertama Aplikasi 2.
Halaman Menu Utama Halaman menu utama diakses setelah halaman pertama selesai atau muncul.
Halaman ini akan berisi menu-menu utama dari aplikasi ini. Didalamnya akan terdapat menu Subuh, Dzuhur, Ashar, Magrib, dan Isya.
72
Berikut pada gambar 3.9 adalah rancangan interface untuk halaman menu utama:
Gambar
Nama Aplikasi
SUBUH
DZUHUR
ASHAR
MAGRIB
ISYA
Gambar 3.9 Halaman Menu Utama
3.
Halaman Menu Subuh Halaman menu Subuh diakses setelah halaman menu utama muncul. Halaman
ini berisi menu pilihan untuk tata cara shalat.
73
Berikut pada gambar 3.10 adalah rancangan interface untuk halaman menu subuh:
Gambar
Nama Aplikasi
Niat Shalat Subuh Takbirotul Ihrom Berdiri Ruku I’tidal Do’a Qunut Sujud Duduk antara Dua Sujud Tasyahud Awal Tasyahud Akhir Salam
Gambar 3.10 Halaman Menu Subuh
74
4.
Halaman Menu Dzuhur Halaman menu Dzuhur diakses setelah halaman menu utama muncul.
Halaman ini berisi menu pilihan untuk tata cara shalat. Berikut pada gambar 3.11 adalah rancangan interface untuk halaman menu dzuhur:
Gambar
Nama Aplikasi
Niat Shalat Dzuhur Takbiroul Ihrom Berdiri Ruku I’tidal Sujud Duduk antara Dua Sujud Tasyahud Awal Tasyahud Akhir Salam
Gambar 3.11 Halaman Menu Dzuhur
75
5.
Halaman Tampilan Secara keseluruhan halaman rancangan untuk menampilkan tampilan adalah
sama. Halaman inti terdiri dari layout dan Button. Berikut pada gambar 3.12 adalah rancangan interface untuk halaman tampil dari semua menu baik dari menu Subuh, Dzuhur, Ashar, Magrib ataupun Isya:
Nama Menu
translate
Gambar
Play
Arab
Keterangan
Gambar 3.12 Halaman Tampilan