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.

37

Visual :

Catatan: Untuk visual pada sequence yang lainya pada menu tajwid kurang lebih sama.

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