Mendapatkan Materi Evaluasi Belajar Guru...

30
56 BAB IV ANALISIS DAN PERANCANGAN SISTEM 4.1 Analisis Sistem Yang Sedang Berjalan Untuk merancang sebuah aplikasi pembelajaran Ilmu Tajwid berbasis Android, maka terlebih dahulu perlu dilakukan analisis sebuah system pembelajaran mengenai materi Tajwid dasar tersebut yang sedang berjalan. 4.1.1 Analisis Prosedur Yang Sedang Berjalan Penulis menggunakan metodologi berorientasi objek, dengan demikian sebelum membuat sebuah aplikasi hendaknya melakukan analisis terlebih dahulu terhadap kebutuhan-kebutuhan apa saja yang diperlukan dengan menggunakan metode-metode yang telah ada. 4.1.1.1 Use Case Diagram yang Sedang Berjalan Diagram ini memperlihatkan himpunan Use Case dan Aktor. Diagram ini penting untuk mengorganisir dan memodelkan perilaku dari suatu system yang dibutuhkan serta diharapkan pengguna. Gambar 4.1 Use Case Diagram Belajar Ilmu Tajwid yang Sedang Berjalan siswa Mendapatkan Materi Evaluasi Belajar Guru

Transcript of Mendapatkan Materi Evaluasi Belajar Guru...

Page 1: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

56

BAB IV

ANALISIS DAN PERANCANGAN SISTEM

4.1 Analisis Sistem Yang Sedang Berjalan

Untuk merancang sebuah aplikasi pembelajaran Ilmu Tajwid berbasis Android,

maka terlebih dahulu perlu dilakukan analisis sebuah system pembelajaran mengenai

materi Tajwid dasar tersebut yang sedang berjalan.

4.1.1 Analisis Prosedur Yang Sedang Berjalan

Penulis menggunakan metodologi berorientasi objek, dengan demikian sebelum

membuat sebuah aplikasi hendaknya melakukan analisis terlebih dahulu terhadap

kebutuhan-kebutuhan apa saja yang diperlukan dengan menggunakan metode-metode

yang telah ada.

4.1.1.1 Use Case Diagram yang Sedang Berjalan

Diagram ini memperlihatkan himpunan Use Case dan Aktor. Diagram ini

penting untuk mengorganisir dan memodelkan perilaku dari suatu system yang

dibutuhkan serta diharapkan pengguna.

Gambar 4.1 Use Case Diagram Belajar Ilmu Tajwid yang Sedang Berjalan

siswa

Mendapatkan Materi

Evaluasi BelajarGuru

Page 2: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

57

Gambar diatas merupakan Use Case Diagram Sistem Pembelajaran yang sedang

berjalan, dimana dalam gambar tersebut siswa mendapat materi dan mengerjakan

evaluasi belajar yang diberikan oleh gurunya sebagai uji kompetensi di tengah dan

diakhir setiap semester yang biasa disebut dengan UTS (Ujian Tengah Semester) dan

UAS (Ujian Akhir Semester).

4.1.1.2 Skenario Use Case yang Sedang Berjalan

Skenario use case digunakan untuk memudahkan dalam menganalisa skenario

yang akan kita gunakan pada fase-fase selanjutnya dengan melakukan penilaian

terhadap skenario tersebut. Adapun tahapan-tahapan skenario use case Belajar Ilmu

Tajwid yang sedang berjalan adalah sebagai berikut :

Tabel 4.1 Skenario Use Case Belajar Ilmu Tajwid

Nama Use Case Belajar Ilmu Tajwid

Tujuan Mendapatkan materi Ilmu Tajwid

Deskripsi

Aktor Siswa dan Guru

Skenario Utama

Aksi Siswa Aksi Guru

1. Guru memberikan materi Tajwid

seperti izhar, idgham, ikhfa, iqlab,

qalqalah, waqaf dan madd.

2. Siswa mendapatkan materi Tajwid

Tabel 4.2 Skenario Use Case Evaluasi Belajar Ilmu Tajwid

Nama Use Case Evaluasi Belajar Ilmu Tajwid

Tujuan Menguji kemampuan siswa

Deksripsi

Aktor Siswa dan Guru

Skenario Utama

Aksi Siswa Aksi Guru

Page 3: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

58

1. Guru memberikan soal ujian

2. Siswa mengerjakan soal ujian

3. Guru mengoreksi jawaban siswa

4. Siswa mendapatkan nilai ujian

4.2 Perancangan Sistem

Perencanaan system merupakan syarat untuk melakukan pengembangan system.

Perencanaan system ini menyangkut estimasi dari kebutuhan-kebutuhan fisik, tenaga

kerja dan dana yang dibutuhkan untuk mendukung pengembangan system serta untuk

mendukung operasinya setelah diterapkan.

4.2.1 Tujuan Perancangan Sistem

Perancangan system yang akan diaplikasikan ini bertujuan untuk memberikan

gambaran secara umum kepada pengguna tentang system yang akan dibangun dan

mengidentifikasikan komponen-komponen system informasi yang akan didesain secara

rinci. Tujuan perancangan Aplikasi Pembelajaran Ilmu Tajwid Berbasis Android ini

akan diuraikan sebagai berikut :

a. Menghasilkan rancangan system mobile learning Ilmu Tajwid untuk kalangan

anak-anak hingga orang dewasa.

b. Menguji system mobile learning Ilmu Tajwid dasar untuk anak-anak dan

orang dewasa yang memiliki validasi yang baik berdasarkan hasil pengujian.

c. Menghasilkan perangkat lunak system aplikasi mobile learning Ilmu Tajwid

dasar untuk anak-anak dan orang dewasa dengan nama Aplikasi Pembelajaran

Ilmu Tajwid berbasis Android.

Page 4: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

59

4.2.2 Gambaran Umum Sistem yang Diusulkan

Gambaran umum dari system yang diusulkan adalah untuk memberikan gambaran

secara umum kepada pengguna (user) mengenai sistem aplikasi berbasis Android,

perancangan sistem secara umum juga sudah dapat mengenai komponen sistem aplikasi

yang akan didesain. Penentuan persyaratan sistem dilakukan agar arah perancangan

sistem dapat terarah pada sasaran, oleh sebab itu sistem yang dirancang harus

memenuhi batasan sistem dimana perancangan sistem aplikasi ini merupakan kebutuhan

fungsional.

Implementasi menggambarkan bagaimana suatu sistem di bentuk. Pada tahap

perancangan aplikasi mobile dirancang dengan tujuan sebagai alat komunikasi antara

pemakai (user) dengan pembuat program guna mendapatkan sistem aplikasi yang sesuai

dengan apa yang dibutuhkan.

4.2.3 Perancangan Prosedur Yang Diusulkan

Perancangan ini mencakup use case diagram, activity diagram, class diagram,

sequence diagram, component diagram, deployment diagram yang menghasilkan sistem

lebih baik. Proses yang dirancang diuraikan menjadi beberapa bagian yang dapat

membentuk sistem tersebut menjadi satu kesatuan komponen.

4.2.3.1 Use Case Diagram yang Diusulkan

Use case diagram adalah diagram yang menyajikan interaksi antara use case dan actor.

Dimana actor dapat berupa orang, peralatan atau sistem lain yang berinteraksi dengan sistem

yang sedang dibangun. Use case menggambarkan fungsionalitas sistem atau persyaratan-

persyaratan yang harus dipenuhi sistem dari pandangan pemakai. Actor adalah sebuah entitas

Page 5: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

60

manusia atau mesin yang berinteraksi dengan sistem untuk melakukan pekerjaan – pekerjaan

tertentu. Berikut ini adalah use case diagram yang diusulkan:

Gambar 4.2 Use Case Diagram Belajar Tajwid yang diusulkan

4.2.3.2 Skenario Use Case

Dokumen ini merupakan definisi apa yang harus dilakukan sistem ketika actor

mengaktifkan use case. Dengan adanya Skenario Use case Diagram Usulan ini akan

mempermudah jalanya alur proses yang di usulkan.

Tabel 4.3 Skenario Use Case Belajar Tajwid

Nama Belajar Tajwid

Tujuan Memilih dan mempelajari materi-materi Tajwid

Deskripsi

Aktor User dan Sistem

Skenario Utama

Aksi Aktor Reaksi Sistem

1. User membuka aplikasi mobile

belajar tajwid dan memilih

menu Tajwid

System

user

Materi Tajwid

latihan soal

petunjuk penggunaan

profil

Page 6: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

61

2. Aplikasi menampilkan halaman

dengan pilihan-pilihan menu seperti

menu Hijaiyyah, izhar, idgham,

ikhfa,iqlab, qalqalah, waqaf, dan

madd.

3. User memilih salah satu menu

materi yang ditampilkan oleh

aplikasi.

4. Aplikasi menampilkan penjelasan

mengenai hukum tajwid yang dipilih

beserta contoh gambar bacaannya

5. User mengklik tombol play

pada form materi tersebut.

6. Aplikasi memberikan contoh

pengucapan bacaan lafadz yang

benar untuk hukum tajwid yang

dipilih berbentuk suara.

7. User memilih dan mengklik

tombol selanjutnya.

8. Aplikasi menampilkan halaman

materi selanjutnya dari materi yang

sudah ditampilkan

9. User memilih dan mengklik

tombol kembali.

10. Aplikasi menampilkan halaman

depan menu aplikasi

Tabel 4.4 Skenario Use Case Latihan Soal

Nama Latihan Soal

Tujuan Menjawab latihan soal sebagai uji kompetensi user

Deskripsi

Aktor User dan sistem

Skenario Utama

Aksi Aktor Reaksi sistem

1. User membuka aplikasi mobile

belajar tajwid dan memilih menu

Latihan Soal

2. Aplikasi menampilkan halaman

dengan 10 soal Tajwid di level

pertama

3. User menjawab soal yang tersedia

Page 7: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

62

4. Aplikasi memvalidasi soal yang

terisi

5. User mendapatkan nilai dari

latihan soal yang diisi

6. Aplikasi memvalidasi nilai lebih

dari 79

7. User memilih dan mengklik menu

soal level selanjutnya

8. Aplikasi menampilkan latihan

soal level selanjutnya

9. User memilih dan mengklik

tombol beranda

10. Aplikasi menampilkan halaman

depan menu aplikasi

Tabel 4.5 Skenario Use Case Petunjuk Penggunaan

Nama Petunjuk Penggunaan

Tujuan Mengetahui cara penggunaan aplikasi pembelajaran ilmu tajwid

ini.

Deskripsi

Aktor User dan sistem

Skenario Utama

Aksi Aktor Reaksi Sistem

1. User membuka aplikasi mobile

belajar tajwid dan memilih menu

Petunjuk Penggunaan

2. Aplikasi menampilkan cara

penggunaan aplikasi yang benar.

3. User memilih dan mengklik

tombol kembali

4. Kembali ke halaman depan menu

aplikasi

Page 8: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

63

Tabel 4.6 Skenario Use Case Profil

Nama Profil

Tujuan Untuk mengetahui pembuat aplikasi pembelajaran ilmu tajwid

ini.

Deskripsi

Aktor User dan sistem.

Skenario Utama

Aksi Aktor Reaksi Sistem

1. User membuka aplikasi mobile

belajar tajwid dan memilih menu

Profil

2. Aplikasi menampilkan halaman

berisi Profil pembuat aplikasi ini

3. User memilih dan mengklik

tombol kembali

4. Aplikasi menampilkan halaman

menu depan aplikasi

4.2.3.3 Activity Diagram

Diagram ini adalah tipe khusus dari diagram state yang memperlihatkan aliran

dari suatu aktivitas ke aktivitas lainnya dalam suatu sistem. Diagram ini terutama

penting dalam pemodelan fungsi-fungsi dalam suatu sistem dan member tekanan pada

aliran kendali antar objek.

a. Activity Diagram Belajar Tajwid

Deskripsi : user membuka aplikasi mobile pembelajaran Tajwid kemudian

membuka list materi tajwid. Di dalam list materi tajwid tersebut terdapat beberapa

pilihan materi seperti hijaiyyah, izh-haar, idgham, ikhfaa, iqlab, qalqalah, waqaf dan

mad. User memilih salah satu materi yang ada, kemudian bisa memilih untuk

mendengarkan suara contoh lafadz atau tidak dengan menekan lafadz. Ketika pilih

Page 9: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

64

tombol kembali maka akan kembali ke halaman depan menu aplikasi dan tombol

selanjutnya untuk lanjut ke menu berikutnya.

Gambar 4.3 Activity Diagram Belajar Tajwid

user aplikasi

buka menu tajwid

pilih salah satu materi tajwid tampil materi tajwid yang dipilih

ya

pilih kembali

tidak

play untuk mendengarkan suaracontoh lafadz

ya

tidak

Page 10: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

65

b. Activity Diagram Latihan Soal

Deskripsi : User membuka aplikasi mobile pembelajaran Ilmu Tajwid kemudian

membuka menu latihan soal. Latihan soal terdiri dari 5 level. Di setiap level latihan soal

tersebut terdapat 10 pertanyaan mengenai huruf hijaiyyah, izh-haar, idghaam, ikhfaa,

iqlab, qalqalah, waqaf dan madd. Jika user bisa menjawab benar lebih dari atau sama

dengan 8 soal, maka user bisa lanjut ke level berikutnya. Jika user hanya bisa menjawab

benar kurang dari 8 soal, maka user tidak bisa lanjut ke level selanjutnya dan bisa coba

lagi untuk mengisi latihan soal tersebut dengan mengklik tombol coba lagi. User bisa

mengklik tombol beranda untuk kembali ke halaman depan menu aplikasi.

Page 11: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

66

Gambar 4.4 Activity Diagram Latihan Soal

user sistem

memilih menulatihan soal

tampil soal di levelpertama

menjawab latihansoal

melihat nilai tampil nilai

validasi nilai lebihdari tujuh puluh

sembilan

lanjut ke latihansoal levelberikutnya

ya

coba lagi

tidak

latihan soal levelselanjutnya

ya

tidak

memilih menuberanda

kembali kehalaman depanmenu aplikasi

yatidak

Page 12: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

67

c. Activity Diagram Petunjuk Penggunaan

Deskripsi : User membuka aplikasi dan memilih menu petunjuk penggunaan.

Aplikasi menampilkan cara penggunaan aplikasi pembelajaran ilmu tajwid ini. User

memilih tombol kembali. Aplikasi kembali ke halaman menu depan aplikasi.

Gambar 4.5 Activity Diagram Petunjuk Penggunaan

user sistem

memilih menupetunjuk

penggunaan

menampilkan halamancara penggunaan

aplikasi

memilih menu kembali

ya

tidak

tampil halamandepan menu

aplikasi

Page 13: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

68

d. Activity Diagram Profil

Deskripsi : User membuka aplikasi dan memilih menu profil. Aplikasi menampilkan

profil pembuat aplikasi pembelajaran ilmu tajwid ini. User memilih kembali.

Aplikasi menampilkan halaman depan menu aplikasi.

Gambar 4.6 Activity Diagram Profil

user sistem

memilih menu profil

menampilkan profilpembuat aplikasi

memilih menu kembali

kembali ke halamandepan menu aplikasi

Page 14: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

69

4.2.3.4 Class Diagram

Diagram ini memperlihatkan himpunan kelas-kelas, antarmuka-antarmuka,

kolaborasi-kolaborasi, dan relasi-relasi. Diagram ini umum ditemui pada pemodelan

sistem berorientasi objek. Meski sifatnya statis, sering pula memuat kelas-kelas aktif.

Berikut Class Diagram Aplikasi Pembelajaran Imu Tajwid Berbasis Android.

Page 15: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

70

Gambar 4.7 Class Diagram Aplikasi Pembelajaran Ilmu Tajwid

4.2.3.5 Sequence Diagram

Diagram sequence (urutan) adalah diagram interaksi yang menekankan pada

pengiriman pesan (message) dalam suatu waktu tertentu. Kegunaannya untuk

menunjukkan rangkaian pesan yang dikirim antara object juga interaksi antara object,

MainActivity

+onCreate(Bundle)+onCreateOptionsMenu(Menu)+tajwidClick(View)

Hijaiyyah

+hijaiyyahClick(View)+onCreate(Bundle)+onCreateOptionsMenu(Menu)

Izhar

+onCreate(Bundle)+onCreateOptionsMenu(Menu)+safawiClick(View)

Safawi

+onCreate(Bundle)+onCreateOptionsMenu(Menu)+safawiClick(View)

TajwidActivity

+hijaiyyahClick(View)+izharClick(View)+onCreate(Bundle)+onCreateOptionsMenu(Menu)

AkhirQuis

+onClick(View)+onCreate(Bundle)+onKeyDown(int, KeyEvent)

GetQuestion

+GetQuestion()+getQuestionSetSoal(Context)

JawabanActivity

+onClick(View)+onCreate(Bundle)+onKeyDown(int, KeyEvent)

KategoriActivity

+_bab+_categoriBab+_matPel+_pelajaran+_progress+adapter+bab+mataPelajaran+userName

PertanyaanActivity

+currentGame+currentQ+mCountDown+time+timer

+checkAnswer()+getSelectedAnswer()+onClick(View)+onCreate(Bundle)+onKeyDown(int, KeyEvent)+setQuestions()+timeUp(Context)

Page 16: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

71

sesuatu yang terjadi pada titik tertentu dalam eksekusi sistem. Komponen utama

sequence diagram terdiri atas objek yang dituliskan dengan kotak segiempat bernama

pesan diwakili oleh garis dengan tanda panah dan waktu ditunjukkan dengan proses

vertikal.

Berikut adalah sequence diagram yang ada pada aplikasi mobile belajar Tajwid,

yaitu :

a. Sequence Diagram Belajar Tajwid

Gambar 4.8 Sequence Diagram Belajar Tajwid

: user

TajwidActivity Hijaiyyah materi

1 : startApp()

2 : hijaiyyahClick()

3 : getMateri()

4 : viewMateri

5 : clickHuruf()

6 : playSound

Page 17: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

72

b. Sequence Diagram Latihan Soal

Gambar 4.9 Sequence Diagram Latihan Soal

: user

menu utama latihan soal hasil latihan soal

1 : startApp()

2 : viewSoalLatihan()

3 : viewSoal

4 : inputJawaban()

5 : cekJawaban()

6 : getHasilJawaban()

7 : viewNilai

Page 18: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

73

c. Sequence Diagram Petunjuk Penggunaan

Gambar 4.10 Sequence Diagram Petunjuk Penggunaan

: user

menu utama petunjuk penggunaan

1 : startApp()

2 : viewPetunjukPenggunaan()

3 : viewPetunjuk

Page 19: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

74

d. Sequence Diagram Profil

Gambar 4.11 Sequence Diagram Profil

4.2.3.6 Component Diagram

Component diagram menggambarkan struktur dan hubungan antar komponen

piranti lunak, termasuk ketergantungan (dependency) di antaranya. Komponen

piranti lunak adalah modul berisi code, baik berisi source code maupun binary code,

baik library maupun executable, baik yang muncul pada compile time, link time,

maupun run time.

Umumnya komponen terbentuk dari beberapa class dan/atau package, tapi

dapat juga dari komponen-komponen yang lebih kecil. Komponen dapat juga berupa

: user

menu utama profil

1 : startApp()

2 : viewProfil()

3 : viewProfil

Page 20: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

75

interface, yaitu kumpulan layanan yang disediakan sebuah komponen untuk

komponen lain.

Gambar 4.12 Component Diagram Aplikasi Pembelajaran Ilmu Tajwid

4.2.3.7 Deployment Diagram

Asumsi yang digunakan pada perangkat lunak ini memakai sistem yang stand

alone, artinya tidak ada satu komponen pun yang akan dibagi pakai (sharing) dengan

aplikasi yang lain, oleh karena itu tidak perlu application server terpisah.

class sqlite

resource

xml

Page 21: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

76

Gambar 4.13 Deployment Diagram Aplikasi Pembelajaran Ilmu Tajwid

4.2.4 Perancangan Antar Muka

Perancangan antar muka ini adalah desain utama yang akan digunakan oleh

Aplikasi, perancangan antar muka ini berfungsi untuk merancang tampilan form aplikasi

dan desain layout dirancang secara sederhana.

Android App

PocketTajwid.apk

OS Android

Sqlite

Resource

Page 22: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

77

1. Tampilan Menu Utama

Gambar 4.14 Tampilan awal Aplikasi Pembelajaran Ilmu Tajwid

Form ini dirancang untuk menampilkan tampilan awal ketika program aplikasi

dijalankan, dan terdapat 4 menu yaitu Tajwid, Latihan Soal, Petunjuk, dan Profil.

Tajwid

Latihan Soal

Petunjuk

Profil

Page 23: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

78

2. Tampilan List Menu Tajwid

Gambar 4.15 Tampilan List Menu Aplikasi Pembelajaran Ilmu Tajwid

Form ini dirancang untuk menampilkan list menu materi yang ada di aplikasi

tersebut yaitu menu hijaiyyah, menu izhar, menu idgham, menu ikhfa, menu iqlab,

menu qalqalah, menu waqaf dan menu madd.

Hijaiyyah

Izhar

Idgham

ikhfa

Iqlab

Qalqalah

Waqaf

Madd

Page 24: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

79

3. Tampilan Menu Latihan Soal

Gambar 4.16 Tampilan Menu Latihan Soal

Form ini dirancang untuk menampilkan soal-soal latihan yang berhubungan

dengan materi tajwid yang terdapat di aplikasi ini. User harus mengisi 10 soal yang

tersedia jika ingin melihat nilai nya. Terdapat dua tombol yaitu Lihat Nilai untuk

melihat nilai dan tombol kembali untuk ke halaman depan menu aplikasi.

LATIHAN SOAL

LEVEL 1

1.

2.

3.

4.

5.

6.

7.

8.

9.

10.

Nilai

Page 25: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

80

4. Tampilan Menu Petunjuk Penggunaan

Gambar 4.17 Tampilan Menu Petunjuk

Form ini dirancang untuk menampilkan cara menggunakan aplikasi ini untuk

para pengguna baru. Terdapat dua tombol yaitu Kembali untuk kembali ke halaman

depan menu aplikasi dan tombol keluar untuk keluar dari aplikasi.

Petunjuk Penggunaan

…………………………………

…………………………………

…………………………………

…………………………………

…………………………………

…………………………………

…………………………………

…………………………………

…………………………………

…………………………………

…………………………………

……………

Page 26: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

81

5. Tampilan Menu Profil

Gambar 4.18 Tampilan Menu Profil

Form ini dirancang untuk menampilkan profil pembuat aplikasi pembelajaran

ilmu tajwid berbasis android mobile ini. Terdapat dua tombol yaitu Kembali untuk

kembali ke halaman depan menu aplikasi.

4.2.4.1 Struktur Menu

Struktur menu didesain untuk merancang semua menu-menu yang akan

digunakan oleh aplikasi. Berikut struktur menu dari Aplikasi Pembelajaran Ilmu

Tajwid:

PROFIL

---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Kembali Keluar

Page 27: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

82

Gambar 4.19 Struktur Menu Aplikasi Pembelajaran Ilmu Tajwid

4.2.4.2 Perancangan Input

Perancangan input pada aplikasi mobile ini diperlukan untuk proses interaksi

antara user dengan aplikasi, yang bertujuan memberikan kemudahan bagi user sehingga

dapat dimengerti oleh user yang bersangkutan. Dalam aplikasi ini form yang

menggunakan perancangan input terdiri dari 1 form, yaitu perancangan input untuk

latihan soal-soal.

Tampilan Awal

Tajwid

Izhar - Halqi

- Syafawi

Idgham - Bi Ghunnah

- Bila Ghunnah

- Mutamatsilain

- Mutajanisain

- Mutaqoribain

Ikhfa - Aqrab

- Ausath

- Ab’ad

- Syafawi

Iqlab Iqlab

Qalqalah - Sugra

- Kubra

Waqaf Waqaf

Madd Madd

Latihan Soal

Level 1 Level 1

Level 2 Level 2

Level 3 Level 3

Level 4 Level 4

Level 5 Level 5

Petunjuk Profil

Page 28: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

83

1. Latihan Soal

Gambar 4.20 Tampilan Form Input Latihan Soal

Form ini dirancang untuk menampilkan form input latihan soal, form tersebut

yaitu berisi soal atau pertanyaan yang harus dijawab oleh user dan terdapat list opsi

jawaban untuk menginput jawaban yang benar, kemudian terdapat 2 tombol lain yaitu

LATIHAN SOAL

LEVEL 1

1. Teks Soal a. opsi b. opsi c. opsi d. opsi

2. Teks Soal a. opsi b. opsi c. opsi d. opsi

3. Teks Soal a. opsi b. opsi c. opsi d. opsi

4. Teks Soal a. opsi b. opsi c. opsi d. opsi

5. Teks Soal a. opsi b. opsi c. opsi d. opsi

6. Teks Soal a. opsi b. opsi c. opsi d. opsi

7. Teks Soal a. opsi b. opsi c. opsi d. opsi

8. Teks Soal a. opsi b. opsi c. opsi d. opsi

9. Teks Soal a. opsi b. opsi c. opsi d. opsi

10. Teks Soal a. opsi b. opsi c. opsi d. opsi

Nilai

Page 29: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

84

[lihat nilai] yang berfungsi untuk melihat nilai jika soal sudah terisi semua dan

[kembali] untuk kembali ke menu depan halaman aplikasi.

4.2.4.3 Perancangan Output

Perancangan output diperlukan untuk menghasilkan informasi dan memberikan

kemudahan bagi user sehingga dapat dimengerti oleh user yang bersangkutan. Dengan

demikian user mendapatkan informasi yang sesuai dengan tujuan yang diharapkan.

Untuk tampilan dari soal izh-haar sampai soal waqaf memiliki bentuk output yang

sama.

1. Perancangan Output Hasil Latihan Soal Benar Semua

Gambar 4.21 Tampilan form output hasil evaluasi benar

Form ini dirancang untuk menampilkan hasil output dari menu latihan soal yang

dikerjakan. Apabila user menjawab semua soal dengan benar maka akan muncul pesan

seperti gambar diatas dan akan tampil skor yang diraih oleh user. Kemudian terdapat

SCORE ANDA ADALAH

100

LEVEL ATAS

Jawaban salah Jawaban benar

0 10

Beranda Coba Lagi Level 2

Page 30: Mendapatkan Materi Evaluasi Belajar Guru siswaelib.unikom.ac.id/files/disk1/641/jbptunikompp-gdl-rossalinda... · Siswa mendapatkan materi Tajwid Tabel 4.2 Skenario Use Case ... soal

85

tombol [kembali] untuk kembali ke halaman depan menu aplikasi, tombol [coba lagi]

untuk mengerjakan kembali latihan soal yang baru dikerjakan dan tombol [level

selanjutnya] untuk dapat melanjutkan latihan soal ke level lebih tinggi.

2. Perancangan Output Hasil Latihan Soal Tidak Benar Semua

Gambar 4.22 Tampilan form output hasil latihan soal tidak benar semua

Form ini dirancang untuk menampilkan hasil output dari menu latihan soal yang

dikerjakan. Apabila user menjawab soal tetapi dengan jawaban yang ada salah nya

maka akan muncul pesan seperti diatas dan akan tampil kunci jawaban yang benar.

Kemudian terdapat tombol [Beranda] untuk menuju ke halaman depan menu aplikasi

dan tombol [Coba Lagi] untuk mengulang menjawab soal di level yang tadi dikerjakan.

SCORE ANDA ADALAH

10

LEVEL ATAS

Jawaban salah Jawaban benar

9 1

Kunci jawaban

Beranda Coba Lagi