BAB III PEMBAHASAN. mengajarkan bahwa membaca Alquran merupakan satu bentuk ibadah, dalam salat

(1)

21

BAB III

PEMBAHASAN

3.1. Tinjauan Kasus

Salah satu rukun iman dalam agama Islam adalah iman kepada Kitab Suci. Kitab suci yang diturunkan kepada Nabi Muhammad adalah Alquran. Agama Islam juga mengajarkan bahwa membaca Alquran merupakan satu bentuk ibadah, dalam salat juga umat Islam membaca bacaan yang diambil dari Alquran, maka dari itu kemampuan membaca Alquran menjadi kewajiban bagi setiap umat Islam.

Dengan adanya teknologi yang berkembang saat ini, pembelajaran Alquran sudah semakin berkembang dan mencakup lebih banyak kalangan dibandingkan dengan zaman dulu. Adanya program aplikasi belajar membaca Alquran ini bisa menjadi salah satu pilihan pembelajaran bagi pemula yang ingin mempelajari Alquran akan tetapi terhalang waktu untuk berguru secara rutin dengan seorang guru. Aplikasi ini juga dilengkapi suara untuk memudahkan pengguna untuk mengenal dan mendalami bacaan Alquran.

3.2. Spesifikasi Rancangan Program 3.2.1 Analisa Kebutuhan Sistem

Media pembelajaran berbasis Android merupakan media penunjang yang bertujuan memudahkan pengguna untuk belajar. Berikut spesifikasi kebutuhan sistem dari Aplikasi Pembelajaran Membaca Alquran Menggunakan Metode Mafaza :

(2)

1. Pada aplikasi ini terdapat 3 jenis menu yaitu menu awal, menu pilihan, dan menu materi.

2. Pada menu pilihan, terdapat 26 materi yang bisa dipilih pengguna untuk dipelajari.

3. Pada menu materi, terdapat tiga bagian yaitu materi pelajaran yang akan mengeluarkan suara ketika ditekan, latihan bacaan dan pemutar suara untuk mencontohkan bacaan yang ada di latihan.

4. Untuk menjamin kualitas aplikasi, pengisi suara diambil dari orang yang berkompetensi di bidangnya dan memiliki sertifikasi tahsin dari lembaga yang kredibel. Pada aplikasi ini, suara diambil dari suara penulis sendiri yang mana penulis sudah memiliki sertifikasi tahsin dari “Lembaga Tahfidz dan Tilawah (LTTQ) Institut PTIQ Jakarta”

3.2.2 Desain Sistem

(3)

Gambar III.1 & III.2, Tampilan awal program & Tampilan Credit

Halaman ini merupakan halaman awal yang akan dilihat pengguna ketika mulai membuka aplikasi. Di sini terdapat dua tombol yaitu tombol play untuk berpindah ke menu materi dan tombol credit untuk melihat credit aplikasi.

2. Desain Tampilan menu

Gambar III.3 & III.4, Tampilan Menu & Petunjuk Pembelajaran.

Halaman ini muncul ketika kita menekan tombol play pada halaman awal. Pada halaman ini pengguna bisa memilih materi yang ingin dipelajari dan memunculkan petunjuk pembelajaran dengan menekan tombol pada sudut kanan atas.

(4)

3. Tampilan Materi

Gambar III.5 & III.6, Tampilan Materi & Petunjuk Makhraj.

Halaman ini muncul sesuai dengan tombol materi yang ditekan pada halaman menu. Pada halaman ini terdapat tombol materi yang bisa mengeluarkan suara, latihan materi yang bisa di scroll ke atas dan ke bawah, tombol di bawah berfungsi untuk mengeluarkan suara dari contoh latihan materi yang ada, tombol di pojok kanan atas berfungsi untuk menampilkan petunjuk makhraj sesuai dengan materi yang dipilih. 3.2.3. Spesifikasi Bentuk Masukan

Spesifikasi Bentuk Masukan adalah dokumen yang digunakan pengguna untuk memberikan suatu proses untuk ditanggapi oleh aplikasi. Adapun Spesifikasi Bentuk Masukan dari aplikasi ini adalah sebagai berikut:

(5)

1. Nama Masukan : Button Menu Nama Dokumen : activity_main.xml

Fungsi : Memindahkan pengguna dari tampilan awal ke tampilan menu

Sumber : Admin

Tujuan : User

Media : Aplikasi

Jumlah : 1 Button

Frekuensi : Setiap Button di klik Bentuk : Lihat Lampiran A.1 2. Nama Masukan : Button Credit

Nama Dokumen : activity_main.xml

Fungsi : Menampilkan credit aplikasi

Sumber : Admin

Tujuan : User

Media : Aplikasi

Jumlah : 1 Button

Frekuensi : Setiap Button di klik Bentuk : Lihat Lampiran A.1 3. Nama Masukan : Button Materi

Nama Dokumen : activity_menu.xml

Fungsi : Memindahkan pengguna dari menu kepada pelajaran yang dipilih

(6)

Tujuan : User

Media : Aplikasi

Jumlah : 26 Button

Frekuensi : Setiap Button di klik Bentuk : Lihat Lampiran A.2 4. Nama Masukan : Button Petunjuk

Fungsi : Menampilkan petunjuk pembelajaran

Sumber : Admin

Tujuan : User

Media : Aplikasi

Jumlah : 1 Button

Frekuensi : Setiap Button di klik Bentuk : Lihat Lampiran A.2 5. Nama Masukan : Button Makhraj

Nama Dokumen : activity_materi1_a.xml - activity_materi18_a.xml

Fungsi : Menampilkan petunjuk posisi bacaan pada mulut

Sumber : Admin

Tujuan : User

Media : Aplikasi

Jumlah : 1 Button

Frekuensi : Setiap Button di klik Bentuk : Lihat Lampiran A.3

(7)

6. Nama Masukan : Button Pelajaran

Fungsi : Memberikan keluaran berupa suara untuk materi pelajaran yang dipilih.

Sumber : Admin

Tujuan : User

Media : Aplikasi

Jumlah : 1 Button

Frekuensi : Setiap Button di klik Bentuk : Lihat Lampiran A.3 7. Nama Masukan : Button Home

Fungsi : Mengembalikan tampilan dari pembelajaran ke menu

Sumber : Admin

Tujuan : User

Media : Aplikasi

Jumlah : 1 Button

Frekuensi : Setiap Button di klik Bentuk : Lihat Lampiran A.3 8. Nama Masukan : Button Play

Fungsi : Memberikan keluaran berupa contoh bacaan pada latihan

(8)

3.2.4. Spesifikasi Bentuk Keluaran

Data keluaran merupakan dokumen yang dihasilkan dari masukan yang diterima oleh aplikasi. Adapun bentuk spesifikasi bentuk keluaran pada aplikasi ini adalah sebagai berikut:

Sumber : Admin

Tujuan : User

Media : Aplikasi

Jumlah : 1 Button

Frekuensi : Setiap Button di klik Bentuk : Lihat Lampiran A.3 9. Nama Masukan : Button Pause

Fungsi : Menghentikan bacaan yang sedang diputar

Sumber : Admin

Tujuan : User

Media : Aplikasi

Jumlah : 1 Button – 5 Button Frekuensi : Setiap Button di klik Bentuk : Lihat Lampiran A.3

1. Tampilan Awal

Nama Dokumen : activity_main.xml

Fungsi : Sebagai penanda aplikasi telah berjalan.

(9)

Tujuan : User Media : xml layout

Frekuensi : Setiap membuka aplikasi Bentuk : Lihat Lampiran A.1 2. Tampilan Credit

Nama Dokumen : credit.xml

Fungsi : Untuk memperlihatkan credit aplikasi.

Sumber : Admin

Tujuan : User

Media : xml layout

Frekuensi : Setiap menekan Button credit Bentuk : Lihat Lampiran A.1

3. Tampilan Menu

Fungsi : Sebagai tampilan untuk memperlihatkan pilihan materi pembelajaran

Sumber : Admin

Tujuan : User

Frekuensi : Setiap menekan Button Menu pada tampilan awal atau ketika menekan Button home pada tampilan materi

Bentuk : Lihat Lampiran A.2 4. Tampilan Petunjuk

(10)

Nama Dokumen : petunjuk.xml

Fungsi : Untuk memperlihatkan petunjuk pembelajaran

Sumber : Admin

Tujuan : User

Frekuensi : Setiap menekan Button info Bentuk : Lihat Lampiran A.2

5. Tampilan Materi

Fungsi : Sebagai tampilan untuk memperlihatkan materi pembelajaran beserta latihan

Sumber : Admin

Tujuan : User

Frekuensi : Setiap menekan Button Materi Bentuk : Lihat Lampiran A.3

6. Tampilan Makhraj

Nama Dokumen : makhraj1.xml - makhraj18.xml

Fungsi : Untuk memperlihatkan petunjuk pembelajaran

Sumber : Admin

Tujuan : User

Frekuensi : Setiap menekan Button makhraj. Bentuk : Lihat Lampiran A.3

(11)

3.2.5. Spesifikasi file 7. Pelajaran

Fungsi : Sebagai ilustrasi untuk materi pelajaran

Sumber : Admin

Tujuan : User

Media : Media Player

Frekuensi : Setiap menekan Button Pelajaran

Bentuk : Suara

8. Mainkan latihan

Sumber : Admin

Tujuan : User

Frekuensi : Setiap menekan Button Play

Bentuk : Suara

9. Hentikan latihan

Sumber : Admin

Tujuan : User

(12)

Pada aplikasi ini terdapat beberapa berkas. Penjelasan rinci mengenai berkas-berkas tersebut adalah sebagai berikut:

1. Spesifikasi berkas ‘Tampilan Awal’ Nama Berkas : activity_main.xml

Fungsi : Sebagai penanda aplikasi telah berjalan. Software : Android Studio

No. Nama Tipe

1 mainLayout ConstraintLayout

2 creditButton imageView

3 menuButton imageButton

4 klik MediaPlayer

Tabel III.1, Spesifikasi berkas ‘Tampilan Awal’ 2. Spesifikasi berkas ‘credit’

Nama Berkas : credit.xml

Fungsi : Untuk menampilkan credit aplikasi. Software : Android Studio

No. Nama Tipe

1 txtclose textView

2 ubsiLogo imageView

3 txtCredit textView

4 klik MediaPlayer

Tabel III.2, Spesifikasi berkas ‘credit’ 3. Spesifikasi berkas ‘Menu’

(13)

Nama Berkas : activity_menu.xml

Fungsi : Untuk menampilkan pilihan materi yang bisa dipelajari pengguna.

Software : Android Studio

No. Nama Tipe

1. ConstraintLayout ConstraintLayout 2. LinearLayout LinearLayout (vertical) 3. RelativeLayout RelativeLayout

4. TextView textView

5. ScrollView scrollView

6. GridLayout gridLayout

7. materi1 – materi26 imageView

8. klik MediaPlayer

Tabel III.3, Spesifikasi berkas ‘Menu’ 4. Spesifikasi berkas ‘Petunjuk’

Nama Berkas : petunjuk.xml

Fungsi : Untuk menampilkan petunjuk pembelajaran. Software : Android Studio

No. Nama Tipe

1 txtclose textView

2 txtJudul textView

3 txtPetunjuk textView

(14)

Tabel III.4, Spesifikasi berkas ‘Petunjuk’ 5. Spesifikasi berkas ‘Materi 1-18, Materi 22, & Materi 23’

Nama Berkas : activity_materi1_a.xml – activity_materi18_a.xml, activity_materi22_a.xml & activity_materi23_a.xml Fungsi : Untuk menampilkan tampilan pembelajaran Software : Android Studio

No. Nama Tipe

1. ConstraintLayout ConstraintLayout 2. LinearLayout LinearLayout (vertical) 3. RelativeLayout RelativeLayout 4. textView TextView 5. scrollView ScrollView 6. scrollLayout LinearLayout(vertical) 7. gridLayout GridLayout 8. menuPlay LinearLayout(horizontal) 9. playButton ImageButton 10. progressBar SeekBar 11. homeButton Button 12. pelajaran ImageView 13. klik MediaPlayer

Tabel III.5, Spesifikasi berkas ‘Materi 1-18, Materi 22, & Materi 23’ 6. Spesifikasi berkas ‘Materi 19-21 & Materi 24-26 ”

Nama Berkas : activity_materi19_a.xml – activity_materi21_a.xml & activity_materi24_a.xml – activity_materi26_a.xml &

(15)

Software : Android Studio

No. Nama Tipe

1. ConstraintLayout ConstraintLayout 2. LinearLayout1 LinearLayout (vertical) 3. RelativeLayout RelativeLayout

4. textView TextView

5. HorizontalScrollView HorizontalScrollView 6. LinearLayout2 LinearLayout (horizontal) 7. LinearLayout3 LinearLayout (vertical) 8. LinearLayout4 LinearLayout (vertical) 9. LinearLayout5 LinearLayout (vertical)

10. Pelajaran1 ImageView 11. Pelajaran2 ImageView 12. Pelajaran3 ImageView 13. scrollView1 ScrollView 14. scrollView2 ScrollView 15. scrollView3 ScrollView 16. menuPlay1 LinearLayout(horizontal) 17. menuPlay2 LinearLayout(horizontal) 18. menuPlay3 LinearLayout(horizontal) 19. scrollLayout1 LinearLayout(vertical) 20. scrollLayout2 LinearLayout(vertical)

(16)

21. scrollLayout3 LinearLayout(vertical) 22. gridLayout1 GridLayout 23. gridLayout2 GridLayout 24. gridLayout3 GridLayout 25. gridLayout4 GridLayout 26. gridLayout5 GridLayout 27. gridLayout6 GridLayout 28. playButton ImageButton 29. playButton ImageButton 30. playButton ImageButton 31. progressBar SeekBar 32. progressBar SeekBar 33. progressBar SeekBar 34. homeButton Button 35. klik MediaPlayer 36. materi MediaPlayer 37 latihan MediaPlayer

Tabel III.6, Spesifikasi berkas “Materi 19-21 & Materi 24-26 “ 7. Spesifikasi berkas Makhraj.

Nama Berkas : makhraj1.xml – makhraj18.xml

Fungsi : Untuk menampilkan petunjuk pembelajaran. Software : Android Studio

No. Nama Tipe

(17)

3.2.6. HIPO

Gambar III.7, Diagram HIPO Program

2 txtJudul textView 3 textA textView 4 textB textView 5 imageA imageView 6 imageB imageView 7 klik MediaPlayer

(18)

3.2.7. Spesifikasi Program

Spesifikasi program ini menjelaskan nama program dan fungsi masing – masing program yang sebelumnya telah digambarkan dalam bentuk HIPO.

1. Spesifikasi program ‘Tampilan Awal’ Nama Berkas : MainActivity.java

Fungsi : Sebagai penanda aplikasi telah berjalan.

Bahasa : Java

Bentuk Tampilan : Lampiran A.1 Proses :

a. Tekan tombol credit untuk menampilkan credit aplikasi dalam bentuk pop up

b. Tekan tombol play untuk berpindah ke menu

2. Spesifikasi program ‘Menu’

Nama Berkas : MenuActivity.java

Bahasa : Java

Bentuk Tampilan : Lampiran A.2 Proses :

a. Tampilan menu muncul setelah tombol play pada tampilan awal ditekan

(19)

b. Tekan tombol petunjuk untuk menampilkan petunjuk pembelajaran dalam bentuk pop up

c. Tekan tombol materi untuk berpindah ke tampilan materi yang diinginkan

3. Spesifikasi program “Materi 1 – 26”

Nama Berkas : Materi1Activity_a.java -Materi26Activity_a.java

Fungsi : Untuk menampilkan melihat dan mendengarkan materi pelajaran beserta contohnya

Bahasa : Java

Bentuk Tampilan : Lampiran A.3 & A.4 Proses :

a. Tampilan pelajaran muncul setelah dipilih dari menu

b. Ketika materi pelajaran ditekan, akan keluar suara contoh dari materi tersebut.

c. Gambar catatan di bagian atas akan menampilkan petunjuk makhraj ketika ditekan.

d. Tombol play di bagian bawah bisa ditekan untuk mendengarkan contoh bacaan dari latihan.

e. Ketika contoh latihan diputar, tombol play akan berubah menjadi tombol pause, dan ketika ditekan maka suara akan berhenti

(20)

3.2.8. Flowchart

1. Flowchart Menu

(21)

2. Flowchart Materi

Gambar III.9, Flowchart Materi 3.2.9. Implementasi Sistem (Listing Program)

1. MainActivity.java package com.example.mafaza01; import android.app.Dialog; import android.content.Intent; import android.graphics.Color; import android.graphics.drawable.ColorDrawable; import android.media.MediaPlayer; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.TextView;

public class MainActivity extends AppCompatActivity { Dialog myDialog;

MediaPlayer mp;

public void buttonMulai(View view) { mp.start();

Intent intent = new Intent(MainActivity.this, MenuActivity.class); startActivity(intent);

}

@Override

protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main); myDialog = new Dialog(this);

mp = MediaPlayer.create(this, R.raw.klik); }

public void ShowPopup(View v) { mp.start();

TextView txtclose;

myDialog.setContentView(R.layout.credit);

txtclose = myDialog.findViewById(R.id.txtclose);

txtclose.setOnClickListener(new View.OnClickListener() { @Override

public void onClick(View v) { mp.start();

myDialog.dismiss(); }

(22)

if (myDialog.getWindow() != null){

myDialog.getWindow().setBackgroundDrawable(new

ColorDrawable(Color.TRANSPARENT)); myDialog.show(); } } } 2. MenuActivity.java package com.example.mafaza01; import android.app.Dialog; import android.content.Intent; import android.graphics.Color; import android.graphics.drawable.ColorDrawable; import android.media.MediaPlayer; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.TextView;

public class MenuActivity extends AppCompatActivity { Dialog myDialog;

MediaPlayer mp; @Override

setContentView(R.layout.activity_menu); myDialog = new Dialog(this);

}

public void ShowPopup(View v) { TextView txtclose;

myDialog.setContentView(R.layout.petunjuk); txtclose = myDialog.findViewById(R.id.txtclose);

public void onClick(View v) { myDialog.dismiss(); }

});

ColorDrawable(Color.TRANSPARENT)); myDialog.show(); }

}

public void masukMateri(View view){

mp = MediaPlayer.create(this, R.raw.klik); switch (view.getId()){

case R.id.materi1:

Intent intent1 = new Intent(MenuActivity.this, Materi1Activity_a.class);

startActivity(intent1); mp.start();

break;

(23)

break;

(24)

break;

(25)

Materi25Activity_a.class);

break;

Intent intent26 = new Intent(MenuActivity.this, Materi26Activity_a.class); startActivity(intent26); mp.start(); break; } } } 3. MateriActivity.java package com.example.mafaza01; import android.app.Dialog; import android.content.Intent; import android.graphics.Color; import android.graphics.drawable.ColorDrawable; import android.media.MediaPlayer; import android.os.Handler; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.ImageButton; import android.widget.SeekBar; import android.widget.TextView;

public class Materi1Activity_a extends AppCompatActivity { Dialog myDialog;

ImageButton playButton; SeekBar seekBar;

MediaPlayer latihan , materi; Runnable runnable;

Handler handler;

public void tombol(View v) { switch (v.getId()){ case R.id.playButton:

if(latihan.isPlaying()){ latihan.pause();

playButton.setImageResource(R.drawable.playbutton); } else {

latihan.start();

playButton.setImageResource(R.drawable.pausebutton); changeSeekbar();

} break;

case R.id.pelajaran: materi.start(); break;

case R.id.homeButton:

Intent intent = new Intent(Materi1Activity_a.this, MenuActivity.class);

startActivity(intent); break;

} }

public void ShowPopup(View v) { TextView txtclose;

(26)

myDialog.setContentView(R.layout.makhraj1); txtclose = myDialog.findViewById(R.id.txtclose);

public void onClick(View v) { myDialog.dismiss(); }

});

ColorDrawable(Color.TRANSPARENT)); myDialog.show(); }

}

@Override

setContentView(R.layout.activity_materi1_a); myDialog = new Dialog(this);

playButton = findViewById(R.id.playButton); handler = new Handler();

seekBar = findViewById(R.id.progressBar);

latihan = MediaPlayer.create(this,R.raw.latihan1); materi = MediaPlayer.create(this,R.raw.mat1);

latihan.setOnPreparedListener(new MediaPlayer.OnPreparedListener() { @Override

public void onPrepared(MediaPlayer mp) { seekBar.setMax(latihan.getDuration()); changeSeekbar();

} });

seekBar.setOnSeekBarChangeListener(new

SeekBar.OnSeekBarChangeListener() { @Override

public void onProgressChanged(SeekBar seekBar, int progress,

boolean fromUser) { if(fromUser){ latihan.seekTo(progress); } } @Override

public void onStartTrackingTouch(SeekBar seekBar) { }

@Override

public void onStopTrackingTouch(SeekBar seekBar) { }

}); }

private void changeSeekbar() {

seekBar.setProgress(latihan.getCurrentPosition()); if (latihan.isPlaying()){

runnable = new Runnable() { @Override

(27)

public void run() { changeSeekbar(); }

};

handler.postDelayed(runnable,1000); }

}

@Override

protected void onPause() { super.onPause(); if (latihan != null) { latihan.pause(); if (isFinishing()) { latihan.stop(); } } } }

3.3 Sarana Pendukung Program 3.3.1. Perangkat Keras

Perangkat keras merupakan alat yang memiliki bentuk fisik dan diperlukan untuk pemrosesan aplikasi yang dibuat. Adapun perangkat keras yang digunakan dalam pembuatan aplikasi ini adalah :

1. Laptop Merk : HP Processor : AMD A8 6410 RAM : 8 GB DDR3L Storage : 240GB SSD OS : Windows 10 Pro 2. SmartPhone Merk : ASUS

Seri : Zenfone Live L1

(28)

RAM : 2GB

OS : Android 8.0 Oreo

3.3.2. Perangkat Lunak

Perangkat lunak merupakan program yang memberi perintah pada perangkat keras untuk melakukan pemrosesan tertentu. Adapun perangkat lunak yang digunakan dalam pembuatan aplikasi ini adalah :

1. Windows 10 Pro

2. Android Studio Versi 3.4 3. Adobe Photoshop CC 2019 4. Adobe Audition CC 2019