bab iii analisa dan perancangan software fileberdasarkan analisis yang telah dilakukan maka dapat...
TRANSCRIPT
21
BAB III
ANALISA DAN PERANCANGAN SOFTWARE
3.1. Analisa Kebutuhan Aplikasi
Aplikasi pembelajaran ilmu tajwid ini dikembangkan dan didesain untuk dapat
digunakan oleh berbagai kalangan usia. Aplikasi pembelajaran ilmu tajwid ini
bertujuan untuk membantu pengguna dalam proses mempelajari ilmu tawid. Aplikasi
ini disajikan dengan objek yang menarik agar memberikan kemudahan bagi pengguna
dalam mengenal dan mempelajari hukum-hukum ilmu tajwid agar terhindar dari
kesalahan saat membaca Al-Quran.
3.1.1. Identifikasi Masalah
Hal-hal yang dilakukan dalam mengidentifikasi dan menyelesaikan
permasalahan adalah sebagai berikut:
1. Merancang dan membuat konsep dasar aplikasi yang akan dibuat dimana
aplikasi tersebut dapat menarik perhatian penggunanya. Konsep dibuat
berdasarkan kreativitas yang dimiliki.
2. Mengumpulkan data yang berhubungan dengan aplikasi dimana data tersebut
akan diinputkan atau dimasukan di dalam project pembuatan aplikasi.
3. Membuat aplikasi dengan mengintegrasikan semua elemen–elemen yang
dibutuhkan seperti gambar, teks, dan suara, sehingga menghasilkan aplikasi
yang baik dan mudah dipahami.
22
4. Melakukan running aplikasi setelah pembuatan aplikasi selesai. Tahap
selanjutnya adalah menjalankan aplikasi. Hal ini berguna untuk mengoreksi
apakah terjadi kesalahan atau tidak.
5. Perbaikan aplikasi pembelajaran ilmu tajwid diperbaiki sesuai dengan koreksi
yang diperoleh dari hasil running aplikasi. Jika seluruh koreksi selesai
diperbaiki maka aplikasi di running kembali untuk melihat apakah masih terjadi
kesalahan dan kembali memperbaikinya.
6. Terakhir yaitu finishing, dalam proses ini aplikasi akan disimpan dalam server,
supaya bisa didownload para user. Tahap ini juga bisa disebut tahap evaluasi
untuk pengembangan aplikasi yang sudah jadi supaya lebih baik lagi. Hasil
evaluasi tersebut digunakan sebagai masukkan untuk tahap concept pada
aplikasi selanjutnya.
3.1.2. Analisa Kebutuhan
Analisa kebutuhan meliputi dua hal yaitu analisa kebutuhan Hardware dan
Software yang digunakan untuk pembuatan aplikasi pembelajaran ilmu tajwid berbasis
android sebagai berikut:
1. Analisa kebutuhan hardware yang digunakan adalah:
a. Laptop
- Display LED 15”
- Processor Intel Core i5-5200U, Up to 2,7GHz
- Memory 4 GB
- HDD 500 GB
23
b. Smartphone
- Android version 5.0.2 Lollipop
- Layar 5,5”
- CPU Octa-core 2,0 GHz
- RAM 3 GB
2. Analisa kebutuhan software yang digunakan adalah:
- System Operasi laptop (Linux Ubuntu LTS 16.0.0.2)
- Rancangan bagan dan story board (Microsoft Visio 2010 64-bit)
- Bahasa pemrograman pengolah aplikasi (Java)
- Tools pengolah aplikasi (Android Studio version 3.0.1)
- Tools pengolah gambar (PicsArt version 9.26.1)
3.2. Desain
Desain atau perancangan merupakan tahapan dalam pembuatan spesifikasi
mengenai arsitektur program yang akan dibuat termasuk tampilan, dan kebutuhan
bahan untuk program yang akan dibuat. Untuk spesifikasi dibuat serinci muingkin
sehingga pada tahap berikutnya yaitu pengumpulan materi (material collecting) dan
pembuatan (assembly) pengambilan keputusan baru tidak dibutuhkan lagi. Tahap ini
menggunakan storyboard (skenario) untuk menggambarkan deskripsi tiap scene dan
juga menggunakan flowchart untuk menggambarkan struktur menu.
24
3.2.1. Algoritma Pada Kasus
Algoritma On Click Listener pada kasus ini merupakan metode algoritma untuk
menampilkan output suara. Algoritma ini merupakan metode yang digunakan untuk
berbagai kejadian klik pada button, image button, list view dan lainya, agar bisa
menampilkan berbagai macam output baik itu suara, gambar, video, activity dan lainya.
Berikut adalah desain pseudecode dari algoritma dari kasus output suara pada project
pembutan aplikasi pembelajaran ilmu tajwid berbasis android:
ImageButton tblalif,tblba,tblta,tbltsa,tbljiem,tblha;
@Override
protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_harokattanwin); tblalif = (ImageButton)findViewById(R.id.aiun); final MediaPlayer mpa = MediaPlayer.create(this,R.raw.aninun); tblalif.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mpa.start(); } }); tblba = (ImageButton)findViewById(R.id.babibun); final MediaPlayer mpb = MediaPlayer.create(this,R.raw.banbinbun); tblba.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mpb.start(); } }); tblta = (ImageButton)findViewById(R.id.tatitun); final MediaPlayer mpc = MediaPlayer.create(this,R.raw.tantintun); tblta.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mpc.start(); } }); } }
25
3.2.2. Software Architecture
Berdasarkan analisis yang telah dilakukan maka dapat diketahui apa saja yang
menjadi masukan sistem, keluaran system, metode yang digunakan sistem, serta antar
muka sistem yang dibuat, sehingga aplikasi yang dibuat nantinya sesuai dengan apa
yang diharapkan.
Perancangan sistem ini dibagi menjadi beberapa sub sistem yaitu :
1. Perancangan UML
Untuk lebih menjelaskan perancangan aplikasi yang dibangun,
digunakan model diagram UML yaitu : activity diagram, use case diagram,
class digram dan sequence diagram.
a. Activity Diagram
Menggambarkan berbagai aliran aktivitas dalam sistem yang sedang
dirancang, bagaimana masing-masing aliran berawal, decision yang mengkin
terjadi dan bagaimana mereka berakhir. Activity diagram juga dapat
menggambarkan proses paralel yang mungkin terjadi pada beberapa eksekusi.
Berikut ini adalah activity diagram dari aplikasi pembelajaran ilmu
tajwid berbasis android :
26
Gambar III.1 Activity diagram aplikasi pembelajaran ilmu tajwid berbasis
android
b. Use Case Diagram
Use Case Diagram terdiri dari sebuah aktor dan interaksi yang
dilakukannya, aktor tersebut dapat berupa manusia, perangkat keras, sistem
lain, ataupun yang berinteraksi dengan sistem.
Pada aplikasi pembelajaran ilmu tajwid, use case diagram menjelaskan
tentang hubungan antara sistem dengan aktor. Hubungan ini dapat berupa input
aktor ke sistem ataupun output ke aktor. Use case diagram merupakan
dokumen naratif yang mendeskripsikan kasus-kasus atau kejadian-kejadian
Install Aplikasi
Halaman Awal Aplikasi
Kembali
Menu Utama Aplikasi
Menu Aplikasi Terpilih
Kembali
Kembali
Uraian Materi dan Contoh Tajwid
27
daripada aktor yang menggunakan sistem untuk menyelesaikan sebuah proses.
Berikut ini adalah gambar yang menjelaskan aplikasi pembelajaran ilmu tajwid
berbasis android dalam model use case digram:
Gambar III.2 Use case diagram aplikasi pembelajaran ilmu tajwid berbasis
android.
c. Class Diagram
Class diagram digunakan untuk melakukan visualisasi struktur kelas-
kelas dari suatu sistem. Class diagram juga dapat memperlihatkan hubungan
antar kelas dan penjelasan detail tiap-tiap kelas di dalam model desain (logical
view) dari suatu sistem. Selain proses desain, class diagram berperan dalam
menangkap struktur dari semua kelas yang membentuk arsitektur sistem yang
dibuat.
System
User
Install Aplikasi Menu Utama Aplikasi
Ilmu Tajwid
Iqra
Informasi Aplikasi
Halaman awal Apilkasi
Hukum Nun Sakinah dan Tanwin Hukum Mim sakinah
Hukum Mad
Harokat Huruf
hukum Qolqolah
Huruf Hijaiyah
Huruf Sambung
Makhraj Huruf
Al - Qur'an
28
Berikut ini adalah class diagram yang digunakan untuk melakukan
visualisai struktur kelas-kelas yang terdapat dalam aplikasi pembelajaran ilmu
tajwid berbasis android:
Gambar III.3 Class diagram aplikasi pembelajaran ilmu tajwid berbasis
android.
d. Sequence Diagram
Sequence diagram digunakan untuk menggambarkan interaksi antar
objek di dalam dan di sekitar sistem yang berupa message yang digambarkan
terhadap waktu. Sequence diagram terdiri antara dimensi vertikal (waktu) dan
dimensi horizontal (objek-objek yang terkait).
Berikut ini adalah sequence diagram dari aplikasi pembelajaran ilmu
tajwid berbasis android:
Menu Utama
+Hukum Tajwid+Iqra+Al - Qur'an+Informasi
+OnCreate()+OnClick()
Hukum Tajwid
+Hukum Nun Sakinah dan Tanwin+Hukum Mim Sakinah+Hukum Mad+Hukum Qolqolah+Makhraj Huruf
+OnCreate()+OnClick()
Iqra
+Huruf Hijaiyah+Harokat Huruf+Huruf Sambung
+OnCreate()+OnClick()
Al - Qur'an
+Al - Qur'an
+OnCreate()+OnClick()
Informasi
+Info Aplikasi
+OnCreate()+OnClick()
Hukum Nun Sakinah dan Tanwin
+Hukum Bacaan Idzhar+Hukum Bacaan Idgham+Hukum Bacaan Ikhfa+Hukum Bacaan Iqlab
+OnCreate()+OnClick()
Hukum Mim Sakinah
+Hukum Bacaan Idgham Mutamatsilain+Hukum Bacaan Idzhar Syafawi+Hukum Bacaan Ikhfa Syafawi
+OnCreate()+OnClick()
Hukum Mad
+Hukum Mad Thobi'i+Hukum Mad Far'i
+OnCreate()+OnClick()
Hukum Mad Far'i
+Hukum Mad Wajib Muttashil+Hukum Mad Jaiz Munfashil+Hukum Mad Aridl Lissukun+Hukum Mad Badal+Hukum Mad Iwadl+Hukum Mad Lazim Kilmi Mutsaqol
+OnCreate()+OnClick()
Hukum Qoloqolah
+Hukum Qolqolah Shugra+Hukum Qolqolah Kubra
+OnCreate()+OnClick()
Harokat Huruf
+Harokat Fatah Kasrah Dan Dhomah+Harokat Tanwin Fatah kasrah dan dhomah
+OnCreate()+OnClick()
29
Gambar III.4 Sequence diagram aplikasi pembelajaran ilmu tajwid berbasis
android.
2. Perancangan Flow Chart
Flow chart digunakan untuk memeperjelas perancangan aplikasi yang akan
dibuat. Berikut adalah flow chart dari aplikasi pembelajaran ilmu tajwid berbasis
android:
: User
Menu Utama Tajwid Hukum Nun Sakinah Dan Tanwin Hukum Bacaan Idzhar Materi Idzhar
1 : startApp()
2 : tajwidCilck()
3 : hukumnunsakinahClick()
4 : hukumidzharClick()
5 : getMateri()
6 : viewMateri
7 : clickButtonPlay()
8 : playSoundIdzhar
9 : clickButtonPause()
10 : soundPaused
30
Mulai
Tampilan Layar
Pembuka
Menu
Utama
Pilih Tajwid
Pilih kembali
Menu
Tajwid
Pilih Kembali
Menu
Qolqolah
Pilih
Qolqolah
Shugra
Pilih
Qolqolah
Kubra
Materi Qolqolah
Shugra
Materi Qolqolah
KubraSelesai
Pilih
Qolqolah
Pilih Kembali
Gambar III.5 flow chart aplikasi pembelajaran ilmu tajwid berbasis android.
3.2.3. User Interface
Antar muka aplikasi dirancang dengan tampilan sederhana agar memudahkan
pengguna dalam menggunakan layanan aplikasi yang disediakan namun tetap
disesuaikan dengan funsionalitas yang dibutuhkan serta memperhatikan karakteristik
perangkat mobile yang memiliki tampilan layar dan navigasi terbatas.
Pada tahapan ini dilakukan perancangan storyboard yang merupakan rangkaian
gambar yang dibuat secara keseluruhan sehingga menggambarkan suatu cerita dan
rangkaian cerita yang akan dibuat. Berikut ini gambaran perancangan storyboard dari
aplikasi pembelajaran ilmu tajwid:
31
Tabel III.1
Ringkasan storyboard aplikasi pembelajaran ilmu tajwid
Scene 1 Scene halaman pembuka
Scene 2 Scene halaman menu utama, yang didalamnya berisi
tampilan pilihan menu aplikasi pembelajaran ilmu
tajwid.
Scene 3, 5 frame, 17
sequence
Scene halaman menu tajwid, yang didalamnya berisi
tampilan pilihan menu hukum – hukum tajwid.
Scene 4, 3 frame, 4
sequence
Scene halaman menu iqra, yang didalamnya berisi
tampilan pilihan menu iqra.
Scene 5 Scene halaman yang menampilkan Al-qur’an
Scene 6 Scene tentang aplikasi, untuk menampilkan informasi
aplikasi dan pengembangnya
Dari ringkasan tabel di atas belum menggambarkan keseluruhan isi proyek,
maka pada tahap perancangan storyboard terdapat beberapa halaman, yaitu:
1. Halaman Pembuka
Halaman pembuka merupakan halaman yang menampilkan tema aplikasi
dimana pengguna di sajikan satu tombol untuk masuk ke menu utama. Berikut ini
merupakan storyboard halaman pembuka:
Tabel III.2
Storyboard halaman pembuka
Scene 1
Halaman Pembuka
Frame -
Audio -
32
Image Background dan button play
Durasi -
Navigasi Image button play
Deskripsi Pada halam ini menampilkan tema aplikasi, berupa image
background.
Visual :
2. Halaman Utama
Halaman utama merupakan halaman yang menampilkan menu dimana
pengguna dapat memilih menu yang akan digunakan terlebih dahulu. Berikut ini
merupakan storyboard halaman utama:
Tabel III.3
Storyboard halaman utama
Scene 2
Halaman Halaman utama
33
Frame -
Audio -
Image Background, Image button tajwid, iqra, Al-qur’an dan
tentang aplikasi
Durasi -
Navigasi Image button tajwid
Image button iqra
Image button Al-qur’an
Image button tentang aplikasi
Deskripsi Pada halam ini menampilkan navigasi berupa image
button untuk memilih menu yang ada di aplikasi dengan
menggunakan scroll view.
Visual :
34
3. Menu Tajwid
Halaman tajwid merupakan halaman yang menampilkan menu hukum-hukum
tajwid dimana pengguna dapat memilih menu yang akan digunakan terlebih dahulu.
Berikut ini merupakan storyboard halaman tajwid:
Tabel III.4
Storyboard halaman tajwid
Scene 3
Halaman Halaman tajwid
Frame 5
Sequence 17
Audio Hukum nun sakinah dan tanwin: contoh hukum idzhar,
idgham, ikhfa 1,2 dan 3, iqlab.
Hukum mim sakinah: contoh hukum idgham mutamatsilain,
idzhar syafawi, ikhfa syafawi.
Hukum mad: contoh hukum mad thobi’i, mad wajib
muttashil, mad jaiz munfashil, mad aridl lisukun, mad badal,
mad iwadl, dan mad lazim mutsaqol kalimi.
Hukum qolqolah: contoh hukum qolqolah shugra, dan contoh
hukum qolqolah kubra.
Image Menu tajwid: Background tajwid, Image button hukum nun
sakinah dan tanwin, hukum mim sakinah, hukum mad,
hukum qolqolah, makhraj huruf.
Hukum nun sakinah dan tanwin: Background nun sakinah,
Image button idzhar, idgham, ikhfa, iqlab.
Hukum idzhar: Background idzhar, Image view huruf idzhar,
contoh hukum idzhar.
35
Hukum idgham: Background idgham, Image view huruf
idgham, contoh hukum idgham.
Hukum ikhfa: Background ikhfa, Image view huruf ikhfa,
contoh hukum ikhfa 1,2 dan 3.
Hukum iqlab: Background iqlab, Image view huruf dan
contoh hukum iqlab.
Hukum mim sakinah: Background mim sakinah, Image
button idgham mutamatsilain, idzhar syafawi, ikhfasyafawi.
Hukum idgham mutamatsilain: Background idgham
mutamatsilain, Image view huruf dan contoh hukum idgham
mutamatsilain.
Hukum idzhar syafawi: Background idzhar syafawi, Image
view huruf dan contoh hukum idzhar syafawi.
Hukum ikhfa syafawi: Background ikhfa syafawi, Image
view huruf dan contoh hukum ikhfa syafawi.
Hukum mad: Background hukum mad, Image button mad
thobi’i, mad far’i, mad wajib muttashil, mad jaiz munfashil,
mad aridl lisukun, mad badal, mad iwadl, mad lazim
mutsaqol kalimi.
Hukum mad thobi’i: Background mad thobi’i, Image view
huruf dan contoh hukum mad thobi’i.
Hukum mad wajib muttashil: Background wajib muttashil,
Image view huruf dan contoh hukum mad wajib muttashil.
Hukum mad jaiz munfashil: Background jaiz munfashil,
Image view huruf dan contoh hukum mad jaiz munfashil.
Hukum mad aridl lisukun: Background aridl lisukun, Image
view huruf dan contoh hukum mad aridl lisukun.
Hukum mad badal: Background mad badal, Image view huruf
dan contoh hukum mad mad badal.
36
Hukum mad iwadl: Background mad iwadl, Image view
huruf dan contoh hukum mad mad iwadl.
Hukum mad lazim mutsaqol kalimi: Background mad lazim
mutsaqol kalimi, Image view huruf dan contoh hukum mad
mad lazim mutsaqol kalimi.
Hukum qolqolah: Background qolqolah, Image button
qolqolah shugra dan qolqolah kubra.
Hukum qolqolah shugra: Background qolqolah shugra,
Image view huruf qolqolah shugra dan qolqolah kubra,
contoh hukum qolqolah shugra.
Hukum qolqolah kubra: Background qolqolah kubra, Image
view huruf qolqolah shugra dan qolqolah kubra, contoh
hukum qolqolah kubra.
Makhraj huruf: Background makhraj huruf, Image view
makhraj huruf.
Durasi -
Navigasi Image button tajwid
Button play dan pause pada setiap sequence menu
tajwid.
Image button iqra
Button play dan pause pada setiap sequence menu iqra
Image button Al-qur’an
Image button tentang aplikasi
Deskripsi Pada halaman ini menampilkan navigasi berupa image button
untuk memilih menu tajwid yang ada di aplikasi dengan
menggunakan scroll view. Menampilkan materi dasar
pengertian hukum tajwid, dan di setiap sequence
menampilkan ouput berupa suara untuk contoh pelafalannya.
38
4. Menu Iqra
Halaman utama merupakan halaman yang menampilkan menu dimana
pengguna dapat memilih menu yang akan digunakan terlebih dahulu. Berikut ini
merupakan storyboard halaman iqra:
Tabel III.5
Storyboard halaman iqra
Scene 4
Halaman Halaman iqra
Frame 1
Sequence 3
Audio Huruf hijaiyah,
Harokat Huruf hijaiyah : Fatah, kasrah dan dhomah,
tanwin fatah, tanwin kasrah dan tanwin dhomah.
Image Background iqra, Image button huruf hijaiyah, harokat
huruf hijaiyah dan huruf sambung hijaiyah.
Menu huruf hijaiyah : Image view huruf hijaiyah1 dan
huruf hijaiyah2.
Menu harakat huruf : Image button fatah kasrah dan
dhomah, tanwin fatah kasrah dan dhomah.
Menu fatah kasrah dan dhomah : Image view contoh
fatah kasrah dan dhommah 1 sampai 6, image view
tanwin fatah kasrah dan dhomah 1 sampai 6.
Durasi -
Navigasi Image button huruf hijaiyah
Button play , pause pada sequence huruf hijaiyah
Image button harokat huruf
39
Image button fatah kasrah dan dhomah
Button play, pause pada sequence fatah kasrah dan
dhomah.
Image button tanwin fatah kasrah dan dhomah
Button play, pause pada sequence tanwin fatah
kasrah dan dhomah.
Deskripsi Pada halaman ini menampilkan navigasi berupa image
button untuk memilih menu iqra yang ada di aplikasi
dengan menggunakan scroll view. Menampilkan materi
dasar pengertian tentang huruf dan harakat hijaiyah, dan
di setiap sequence dan menampilkan ouput berupa suara
untuk contoh pelafalannya
Visual :
Catatan: Untuk visual pada sequence yang lainya pada menu iqra kurang lebih sama.
40
5. Menu Al – Qur’an
Halaman Al – qur’an merupakan halaman yang menampilkan Al –qur’an secara
keseluruhan. Berikut ini merupakan storyboard halaman Al – qur’an:
Tabel III.6
Storyboard halaman Al – qur’an
Scene 5
Halaman Halaman Al – qur’an
Frame 1
Audio -
Image Al – Qur’an dalam format pdf.
Durasi -
Navigasi Scroll view
Deskripsi Pada halam ini menampilkan Al – qur’an yang ada di
aplikasi dengan menggunakan scroll view.
Visual :
41
6. Halaman Informasi
Halaman informasi merupakan halaman yang menampilkan informasi tentang
aplikasi, dimana pengguna dapat mengetahui deskripsi aplikasi tersebut. Berikut ini
merupakan storyboard halaman informasi:
Tabel III.7
Storyboard halaman informasi
Scene 5
Halaman Halaman informasi
Frame 1
Audio -
Image -
Durasi -
Navigasi Scroll view
Deskripsi Pada halam ini menampilkan informasi tentang aplikasi
berupa teks, dengan menggunakan scroll view.
Visual :
42
3.3. Implementasi
Pada tahap ini akan dilakukan implementasi dari hasil perancangan, tahap ini
meliputi tahap pembuatan aplikasi, dimana pembuatan aplikasi ini berdasarkan pada
struktur menu, skenario atau storyboard yang berada pda tahap desain. Semua material
yang telah dikumpulkan dimasukan kedalam pengolah aplikasi resmi android (Android
Studio) untuk disusun. Pada tahapan ini juga dilengkapi dengan perintah tombol
interaktif untuk navigasi ouput suara. Hal ini bertujuan untuk membuat daya tarik dan
mempermudah pengguna dalam menggunakan aplikasi. Berikut adalah proses
penggabungan material yang akan digunakan pada aplikasi pembelajaran ilmu tajwid
berbasis android menggunakan software Android Studio:
Gambar PicsArt
Android
Studio
Teks Suara
Aplikasi
Pembelajaran
Ilmu Tajwid
Gambar III.6 Proses pembuatan aplikasi pembelajaran ilmu tajwid berbasis android.
43
1. Proses Implementasi Gambar
Berdasakan storyboard yang telah di buat pada tahap desain, file gambar akan
diproses menggunakan aplikasi pengolah gambar (PicsArt).
Gambar III.7 Proses pembuatan gambar aplikasi pembelajaran ilmu
tajwid berbasis android menggunakan PicsArt.
Kemudian file gambar yang sudah dibuat dan file gambar dari internet yang
sudah diubah, dimasukan kedalam project yang akan dibuat di dalam pengolahan
aplikasi (Android studio). Caranya terlebih dahulu copy gambar-gambar kedalam
folder project di dalam pengolah aplikasi (Android studio).
44
Gambar III.8 Gambar-gambar yang digunakan di dalam aplikasi
pembelajaran ilmu tajwid berbasis android.
Kemudian pada pengolah aplikasi (Android studio) pilih gambar yang akan
digunakan dalam aplikasi pembelajaran ilmu tajwid berbasis android.
Gambar III.9 Proses memasukan gambar ke dalam project
45
2. Proses Implementasi Teks
Teks digunakan untuk menyajikan materi mengenai hukum-hukum tajwid dan
yang lainnya. Teks tersebut langsung masukan atau diketik langsung ke dalam
pengolah aplikasi (Android studio). Berikut ini proses memasukan teks ke dalam
project:
Gambar III.10 Proses memasukan teks kedalam project.
3. Proses Implementasi Suara
File suara yang telah diubah, kemudian dimasukan ke dalam project yang telah
dibuat di dalam pengolahan aplikasi (Android studio). Caranya terlebih dahulu copy
file suara kedalam folder project.
46
Gambar III.11 File suara yang digunakan di dalam aplikasi pembelajaran ilmu
tajwid berbasis android.
Kemudian pada pengolah aplikasi (Android studio) pilih file suara yang akan
digunakan dalam aplikasi pembelajaran ilmu tajwid berbasis android.
Gambar III.12 Proses memasukan teks kedalam project.
47
3.3.1. Tampilan Antarmuka
1. Scene 1
Scene 1 merupakan halaman awal ketika aplikasi dibuka, scene 1 berfungsi
sebagai halaman pembuka yang menampilkan tombol masuk untuk memulai
aplikasi. Berikut adalah tampilan pembuka dari scene 1:
Gambar III.13 Tampilan scene 1
2. Scene 2
Scene 2 merupakan halaman yang menampilkan menu utama aplikasi yang
terdiri dari empat pilihan menu utama menggunakan scroll view. Menu yang
ditampilkan digunakan untuk berpindah ke scene lain. Pada halam utama pengguna
juga dapat memilih menu yang akan digunakan terlebih dahulu. Berikut adalah
tampilan dari scene 2:
48
Gambar III.14 Tampilan scene 2
3. Scene 3
Scene 3 merupakan halaman yang menampilkan menu hukum-hukum tajwid
dimana pengguna dapat memilih menu yang akan digunakan terlebih dahulu. Berikut
ini merupakan tampilan halaman tajwid:
Gambar III.15 Tampilan scene 3
49
a. Frame 1
Frame 1 merupakan bagian dari scene 3 yang merupakan sub meu pertama
yaitu pilihan hukum nun sakinah dan tanwin, dimana pada hukum nun sakinah dan
tanwin ini menyediakan empat jenis hukum. Berikut tampilan antarmuka dari frame
1:
Gambar III.16 Tampilan frame 1 scene 3
b. Sequence 1
Pada frame 1 terdapat pembagian pembahasan mengenai hukum-hukum
nun sakinah dan tanwin. Terdapat 4 sequence pada frame 1 ini. Salah satunya
sequence 1 yang berisi mengenai materi dan contoh pelafalan dari hukum idzhar
Berikut tampilan antarmuka dari sequence 1:
50
Gambar III.17 Tampilan sequence 1 frame 1
4. Scene 4
Scene 4 merupakan halaman yang menampilkan menu hukum-hukum
tajwid dimana pengguna dapat memilih menu yang akan digunakan terlebih dahulu.
Berikut ini merupakan tampilan halaman tajwid:
Gambar III.18 Tampilan scene 4
51
a. Sequence 3
Frame 2 pada scene 4 yang merupakan sub menu kedua yaitu pilihan iqra.
Yang menampilkan macam-macam huruf hijaiyah beserta pelafalnnya. Berikut
tampilan antarmuka dari sequence 3 pada sub menu iqra:
Gambar III.19 Tampilan sequence 3 sub menu iqra
3.4. Testing
Tahapan pengujian aplikasi bertujuan untuk uji kelayakan aplikasi dengan
melakukan instalasi pada beberapa perangkat yang berbeda dan mengecek kembali
fungsi-fungsi yang di sajikan dalam aplikasi. Apabila terdapat kesalahan, maka
kesalahan tersebut akan diperbaiki kembali kemudian dilakukan pengujian.
52
3.4.1. Blackbox Testing
Pengujian dilakukan dengan melakukan pengujian instalasi aplikasi pada
beberapa perangkat serta pengujian fungsionalitas sistem termasuk desain interface,
suara, maupun materi yang telah disampaikan. Adapun hasil dari pengujian blackbox
pada aplikasi pembelajaran ilmu tajwid berbasis android adalah sebagai berikut:
Tabel III.8 Hasil pengujian blackbox
No Kelas Uji Butir Uji Jenis
Pengujian Hasi uji
1. Instalasi Aplikasi
Pemasangan aplikasi
pada beberapa
perangkat yang
berbeda
Blackbox Berhasil
2. Pembukaan Tampil aplikasi pada
layar pembuka
Blackbox Berhasil
3. Halaman Utama
Tajwid Blackbox Berhasil
Iqra Blackbox Berhasil
Al – Qur’an
Blackbox Berhasil
Info Blackbox Berhasil
4. Tajwid
Hukum nun sakinah
dan tanwin
Blackbox Berhasil
Hukum mim sakinah Blackbox Berhasil
Hukum mad Blackbox Berhasil
Hukum qolqolah Blackbox Berhasil
Makhraj huruf Blackbox Berhasil
5. Hukum nun
sakinah dan
tanwin
Hukum Idzhar Blackbox Berhasil
Hukum Idgham Blackbox Berhasil
Hukum Ikhfa Blackbox Berhasil
53
Hukum Iqlab Blackbox Berhasil
6. Hukum mim
sakinah
Hukum Idgham
Mutamatsilain
Blackbox Berhasil
Hukum Idzhar
Syafawi
Blackbox Berhasil
Hukum Ikhfa Syafawi Blackbox Berhasil
7. Hukum Mad
Hukum Mad Thobi’i Blackbox Berhasil
Hukum Mad Hukum
Mad Far’i
Blackbox Berhasil
8.
Hukum Mad
Far’i
Mad Wajib Muttashil Blackbox Berhasil
Mad Jaiz Munfashil Blackbox Berhasil
Mad Aridl Lissukun Blackbox Berhasil
Mad Badal Blackbox Berhasil
Mad Iwadl Blackbox Berhasil
Mad Lazim Kilmi
Mutsaqol
Blackbox Berhasil
9. Hukum Qolqolah
Qolqolah Shugra Blackbox Berhasil
Qolqolah Kubra Blackbox Berhasil
10. Iqra
Huruf Hijaiyah Blackbox Berhasil
Harokat Huruf
Hijaiyah
Blackbox Berhasil
Huruf Sambung
Hijaiyah
Blackbox Berhasil
11. Harokat Huruf
Hijaiyah
Fatah, Kasrah dan
Dhomah
Blackbox Berhasil
Tanwin Fatah, Kasrah
dan Dhomah
Blackbox Berhasil