BAB III PEMBAHASAN - repository.bsi.ac.id · berkompetensi di bidangnya dan memiliki sertifikasi...

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 :

22

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

1. Desain tampilan awal

23

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.

24

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:

25

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


Fungsi : Menampilkan credit aplikasi

Sumber : Admin

Tujuan : User

Media : Aplikasi

Jumlah : 1 Button



3. Nama Masukan : Button Materi

Nama Dokumen : activity_menu.xml

Fungsi : Memindahkan pengguna dari menu kepada

pelajaran yang dipilih

Sumber : Admin

26

Tujuan : User

Media : Aplikasi

Jumlah : 26 Button



4. Nama Masukan : Button Petunjuk


Fungsi : Menampilkan petunjuk pembelajaran

Sumber : Admin

Tujuan : User

Media : Aplikasi

Jumlah : 1 Button



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



27

6. Nama Masukan : Button Pelajaran


Fungsi : Memberikan keluaran berupa suara untuk materi

pelajaran yang dipilih.

Sumber : Admin

Tujuan : User

Media : Aplikasi

Jumlah : 1 Button



7. Nama Masukan : Button Home


Fungsi : Mengembalikan tampilan dari pembelajaran ke

menu

Sumber : Admin

Tujuan : User

Media : Aplikasi

Jumlah : 1 Button



8. Nama Masukan : Button Play


Fungsi : Memberikan keluaran berupa contoh bacaan

pada latihan

28

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



9. Nama Masukan : Button Pause


Fungsi : Menghentikan bacaan yang sedang diputar

Sumber : Admin

Tujuan : User

Media : Aplikasi

Jumlah : 1 Button – 5 Button



1. Tampilan Awal


Fungsi : Sebagai penanda aplikasi telah berjalan.

Sumber : Admin

29

Tujuan : User

Media : xml layout

Frekuensi : Setiap membuka aplikasi


2. Tampilan Credit

Nama Dokumen : credit.xml

Fungsi : Untuk memperlihatkan credit aplikasi.

Sumber : Admin

Tujuan : User

Media : xml layout

Frekuensi : Setiap menekan Button credit


3. Tampilan Menu


Fungsi : Sebagai tampilan untuk memperlihatkan pilihan

materi pembelajaran

Sumber : Admin

Tujuan : User

Media : xml layout

Frekuensi : Setiap menekan Button Menu pada tampilan

awal atau ketika menekan Button home pada

tampilan materi


4. Tampilan Petunjuk

30

Nama Dokumen : petunjuk.xml

Fungsi : Untuk memperlihatkan petunjuk pembelajaran

Sumber : Admin

Tujuan : User

Media : xml layout

Frekuensi : Setiap menekan Button info


5. Tampilan Materi


Fungsi : Sebagai tampilan untuk memperlihatkan materi

pembelajaran beserta latihan

Sumber : Admin

Tujuan : User

Media : xml layout

Frekuensi : Setiap menekan Button Materi


6. Tampilan Makhraj

Nama Dokumen : makhraj1.xml - makhraj18.xml

Fungsi : Untuk memperlihatkan petunjuk pembelajaran

Sumber : Admin

Tujuan : User

Media : xml layout

Frekuensi : Setiap menekan Button makhraj.


31

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


Frekuensi : Setiap menekan Button Pause

32

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


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.


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’

33

Nama Berkas : activity_menu.xml

Fungsi : Untuk menampilkan pilihan materi yang bisa dipelajari

pengguna.


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.


No. Nama Tipe

1 txtclose textView

2 txtJudul textView

3 txtPetunjuk textView

4 klik MediaPlayer

34

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


No. Nama Tipe


2. LinearLayout LinearLayout (vertical)


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 &

35

Fungsi : Untuk menampilkan pilihan materi yang bisa dipelajari

pengguna.


No. Nama Tipe


2. LinearLayout1 LinearLayout (vertical)


4. textView TextView

5. HorizontalScrollView HorizontalScrollView

6. LinearLayout2 LinearLayout (horizontal)




10. Pelajaran1 ImageView



13. scrollView1 ScrollView



16. menuPlay1 LinearLayout(horizontal)



19. scrollLayout1 LinearLayout(vertical)


36


22. gridLayout1 GridLayout












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.


No. Nama Tipe

1 txtclose textView

37

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

Tabel III.7, Spesifikasi berkas ‘Makhraj’

38

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


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

Fungsi : Untuk menampilkan pilihan materi yang bisa

dipelajari pengguna.

Bahasa : Java

Bentuk Tampilan : Lampiran A.2

Proses :

a. Tampilan menu muncul setelah tombol play pada tampilan awal

ditekan

39

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

40

3.2.8. Flowchart

1. Flowchart Menu

Gambar III.8, Flowchart Menu

41

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();

}

});

42

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

myDialog.getWindow().setBackgroundDrawable(new

ColorDrawable(Color.TRANSPARENT));

myDialog.show();

}

}

}

2. MenuActivity.java











public class MenuActivity extends AppCompatActivity {

Dialog myDialog;

MediaPlayer mp;

@Override



setContentView(R.layout.activity_menu);


}


TextView txtclose;

myDialog.setContentView(R.layout.petunjuk);



@Override


myDialog.dismiss();

}

});




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;

case R.id.materi2:




mp.start();

break;

43

case R.id.materi3:




mp.start();

break;

case R.id.materi4:




mp.start();

break;

case R.id.materi5:




mp.start();

break;

case R.id.materi6:




mp.start();

break;

case R.id.materi7:




mp.start();

break;

case R.id.materi8:




mp.start();

break;

case R.id.materi9:




mp.start();

break;

case R.id.materi10:




mp.start();

break;

case R.id.materi11:




mp.start();

break;

case R.id.materi12:




mp.start();

break;

case R.id.materi13:




mp.start();

break;

case R.id.materi14:

44




mp.start();

break;

case R.id.materi15:




mp.start();

break;

case R.id.materi16:




mp.start();

break;

case R.id.materi17:




mp.start();

break;

case R.id.materi18:




mp.start();

break;

case R.id.materi19:




mp.start();

break;

case R.id.materi20:




mp.start();

break;

case R.id.materi21:




mp.start();

break;

case R.id.materi22:




mp.start();

break;

case R.id.materi23:




mp.start();

break;

case R.id.materi24:




mp.start();

break;

case R.id.materi25:


45



mp.start();

break;

case R.id.materi26:




mp.start();

break;

}

}

}

3. MateriActivity.java







import android.os.Handler;




import android.widget.ImageButton;

import android.widget.SeekBar;


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;

}

}


TextView txtclose;

46

myDialog.setContentView(R.layout.makhraj1);



@Override


myDialog.dismiss();

}

});




myDialog.show();

}

}

@Override



setContentView(R.layout.activity_materi1_a);


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

47

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

Processor : Qualcomm Snapdragon 425

48

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

BAB III PEMBAHASAN - repository.bsi.ac.id · berkompetensi di bidangnya dan memiliki sertifikasi...

Documents

Transcript of BAB III PEMBAHASAN - repository.bsi.ac.id · berkompetensi di bidangnya dan memiliki sertifikasi...