BAB 3 ANALISIS DAN PERANCANGAN SISTEM
3.1 Gambaran Umum Objek Penelitian Di dorong oleh kegiatan luhur untuk mencerdaskan kehidupan bangsa dan demi tanggungjawab Masa depan bangsa terutama generasi muda islam untuk selalu mencintai baca tulis Al-qur’an serta dorongan dari tokoh-tokoh masyarakat khususnya yang ada di wilayah Lingkungan Suko Kelurahan Gombengsari Kecamatan Kalipuro Banyuwangi untuk mendirikan pendidikan baca tulis Alqur’an atau lebih dikenal dengan nama Taman Pendidikan Qur’an ( TPQ ) . Hal ini didasarkan atas realita belum adanya lembaga pendidikan Alqur’an yang dapat menampung anak-anak dalam belajar membaca dan menulis Alqur’an khususnya di lingkungan Suko Kel Gombengsari Kecamatan Kalipuro Kabupaten Banyuwangi. Pada tanggal 20 Juli 1987 bertempat di Lingkungan Suko Kelurahan Gombengsari Kecamatan Kalipuro Kabupaten Banyuwangi didirikan pendidikan baca tulis Alqur;an Dengan nama TPQ NURUL HIDAYAH Dibawah pengasuh Ustad Musahnan. Demikianlah sejarah singkat berdirinya Taman Pendidikan Qu’an Nurul Hidayah di lingkungan Suko Kelurahan Gombengsari Kecamatan Kalipuro Kabupaten Banyuwangi. Semoga Allah Swt senantiasa melimpahkan Taufiq, Hidayah dan InayahNya sehingga TPQ NURUL HIDAYAH Menjadi TPQ yang terus berkembang Bersama ridhohNya serta membawah keharuman bagi agama serta masyarakat di Lingkungan Suko Kelurahan Gombengsari Kecamatan Kalipuro Kabupaten Banyuwangi. 3.2 Konsep Perancangan 3.2.1 Identifikasi dan analisis Kebutuhan Sistem Pada bagian identifikasi dan analisis kebutuhan sistem terdiri dari identifikasi kebutuhan sistem. dan analisis sistem. Dalam identifikasi sistem yaitu
22
23
untuk mengidentifikasi permasalahan yang akan dikaji, sedangkan dalam analisis sistem adalah menganalisa permasalahan yang sudah dikaji. 3.2.1.1 Analisis Kelemahan Pembelajaran Didalam proses belajarar mengajar di TPQ Nurul Hidayah masih menerapkan metode manual, dimana proses pembelajaran masih di bantu oleh guru, ustad/ustadzah didalam menyampaikan materi pelajaran. Hal ini merupakan kewajiban dan ketetapan di dalam proses pembelajaran yang ada di TPQ Nurul Hidayah sebagai pembimbing para murid untuk bisa mencapai segala materi yang disampaikan oleh guru,ustad/ustadzah. Namun dalam segi media ajar diperlukan sebuah media penunjang yaitu media pemebalajaran berbasis mobile agar tidak terpaku pada buku atau materi saja terlihat monoton didalam melaksanakan proses belajar mengajar yang menarik dan menyenangkan di dalam ruang belajar. 3.2.1.2 Analisis Kebutuhan Sistem Tujuan dari fase ini adalah memahami dengan benar kebutuhan dari sistem ini dan mengembangkan sebuah sistem tersebut, atau
yang mewadahi kebutuhan
memutuskan bahwa sebenarnya pengembangan sistem baru
dibutuhkan. 1. Analisis Perangkat Keras (Hardware) 2. Analisis Perangkat Lunak (Software) 3. Analisis Sumber Daya Manusia (Brainware) 3.2.1.3 Analisis Kelayakan Teknologi Kelayakan teknologi merupakan kelayakan untuk mengembangkan aplikasi media pembelajaran, dilihat dari sisi hardware dan software yang digunakan untuk membuatnya. 3.2.2 Perancangan Splash Scene Splas merupakan tampilan awal dari aplikasi media pembelajaran ini dengan adanya scene spalash dapat mengantarkan kepada menu utama. Pada scene ini terdapat judul media pembelajaran guna memperkenalkan isi dari pokok pembelajaran.
24
3.2.3 Perancangan Menu Utama Pada scene ini terdapat beberapa pilihan menu navigasi yang tersimpan di setiap tombol yang ada. Pembahasannya akan divisualisasikan dengan bersamaan gambar pada scene selanjutnya. Dalam menu utama ini akan membawa pengguna terhadapa apa yang dipilih dan digunakan sesuai keinginannya. Menu tersebut Pengenalan Huruf hija’iyah , Materi Iqro’ 1 dan 2 serta evaluasi. 3.2.4 Perancangan Materi Pada scene materi terdapat tampilan-tampilan dari beberapa menu dari aplikasi iqro’. Materi pembelajaran iqro’ nantinya akan di visualisasikan pada layar pembahasan setelah menekan salah menu materi antara iqro; 1 dan 2. Setelah menekan salah satu menu materi juga terdapat tombol untuk kembali ke menu awal yaitu scene menu utama. 3.2.5 Perancangan Kuis/ Evaluasi Pada scene evaluasi aplikasi iqro’ ini akan muncul setelah menekan tombol evaluasi yang ada di menu utama. Di dalam sub evaluasi akan terlihat bank soal yang terdiri dari soal-soal yang sudah dipelajari sebelumnya. Didalam soal iqro’ nantinya pengguna akan menjawab soal-soal yang ada. Setelah selesai menjawab sampai akhir akan terdapat jumlah nilai akhir yang diperoleh dari hasil menjawab. 3.3 Stuktur Navigasi Aplikasi
Gambar 3.1 Struktur Navigasi
25
3.4 Diagram Alir Program/ Flowchart 3.5 Use Case Diagram Untuk mengenal proses dari suatu sistem digunakan diagram use case. Dengan diagram use case ini dapat diketahui proses yang terjadi pada aplikasi. Gambar use case bisa dilihat pada gambar di bawah ini.
Gambar 3.2 Use Case Diagram Current Sistem
26
Use Case Diagram di atas dijelaskan dalam table 3.1 di bawah ini Tabel 3.1 Use Case Diagram Aktor User
Nama Use Case Tampilkan Menu
Deskripsi Use Case Use Case ini digunakan untuk menampilkan menu sesuai yang di inginkan
User
Tampilkan Hijaiyah
Use Case ini digunakan untuk menampilkan hijaiyah sesuai yang di inginkan
User
Tampilkan Iqra
Use Case ini digunakan untuk menampilkan iqra satu dan dua yang di inginkan
User
Tampilkan Latihan Soal
Use Case ini digunakan untuk menampilkan soal – soal yang
User
Tampilkan About Me
Use Case ini digunakan untuk Menampilkan Profil Pembuat
User
Tampilkan Keluar
Use Case ini digunakan untuk keluar dari aplikasi
27
3.6 Activity Diagram 3.6.1
Activity Diagram dari Use Case Tampilkan Menu Aplikasi
Activity Diagram ini digunakan untuk melihat menu aplikasi . User dapat melihat menu yang di inginkan.
Gambar 3.3 Activity Diagram Menu Aplikasi 3.6.2
Activity Diagram dari Use Case Tampilkan Hijaiyah
Activity Diagram ini digunakan untuk melihat huruf hijaiyah. User dapat melihat huruf hijaiyah yang di inginkan.
Gambar 3.4 Activity Diagram Hijaiyah
28
3.6.3
Activity Diagram dari Use Case Tampilkan Iqro’
Activity Diagram ini digunakan untuk melihat Iqra. User dapat melihat iqra yang di inginkan.
Gambar 3.5 Activity Diagram Tampilkan Iqro’ 3.6.4 Activity Diagram dari Use Case Tampilkan Latihan Activity Diagram ini digunakan untuk menampilkan latihan soal. User menjawab soal untuk mengukur pengetahuannya.
Gambar 3.6 Activity Diagram Tampilkan Latihan
29
3.6.5 Activity Diagram dari Use Case Menu About Me Activity Diagram ini digunakan untuk menampilkan menu bantuan. Digunakan untuk membantu user dalam menjalankan aplikasi ini.
Gambar 3.7 Activity Diagram Tampilkan Profil Pengguna
30
3.7
Sequence Diagram
3.7.1 Sequence Diagram dari Use Case Tampilkan Hijaiyah
Gambar 3.8 Sequence Diagram Melihat Huruf Hijaiyah Diagram ini menangani proses untuk menampilkan gambar huruf hijaiyah yang telah dipilih dari listing hijaiyah. Proses untuk gambar diatas yaitu: 1) User memilih menu hijaiyah dari menu utama. 2) User memilih kategori hijaiyah yang ada. 3) Sistem menampilkan huruf hijaiyah.
31
3.7.1
Sequence Diagram dari Use Case Tampilkan Iqra
Gambar 3.9 Sequence Diagram Melihat Iqra Diagram ini menangani proses untuk menampilkan gambar iqra yang telah dipilih dari menu atau listing iqra. Proses untuk gambar diatas yaitu: 1) User memilih menu iqra dari menu utama. 2) User memilih iqra dari listing iqra yang ada. 3) Sistem menampilkan gambar iqra-iqra dari listing iqra yang telah dipilih.
32
3.7.2
Sequence Diagram dari Use Case Tampilkan Latihan Soal
Gambar 3.10 Sequence Diagram Menampilkan Latihan Soal Diagram ini menangani proses untuk menampilkan dan menjawab latihan soal yang ada. Proses untuk gambar diatas yaitu: 1. User memilih menu latihan soal dari menu utama. 2. Sistem menampilkan soal yang tersedia 3. User menjawab pertanyaan yang keluar pada menu latihan soal. 4. Sistem menampilkan hasil skor dari pertanyaan yang benar di jawab oleh user.
33
3.8
Class diagram Class diagram membantu kita dalam visualisasi struktur kelas-kelas
dari suatu sistem dan merupakan tipe diagram yang paling banyak dipakai. Class diagram memperlihatkan
hubungan antar kelas dan penjelasan detail
tiap-tiap kelas didalam model desain dari suatu sistem, seperti Gambar berikut ini:
Gambar 3.11 Class Diagram Aplikasi Iqro’
34
3.9
Flowchart Aplikasi a. Flowchart Menu digunakan untuk awal aplikasi untuk memilih menu-menu yang di sediakan di Aplikasi IQRO’ .
Gambar 3.12 struktur menu utama
35
b. Flowchart Home Flowchart home merupakan awal untuk mengetahui alur tampilan dengan ditampilkannya pilihan menu aplikasi.
Gambar 3.13 Flowchart Home c. Flowchart Hijai’yah Digunakan untuk memilih satu menu yaitu pengenalan huruf hija’iyah yang terdapat di dalam Aplikasi IQRO’.
Gambar 3.14 Menu Pengenalan Huruf Hija’iyah
36
d. Flowchart Iqro’ Digunakan untuk memilih satu menu yaitu iqro satu dan dua yang terdapat di dalam Aplikasi IQRO’
Gambar 3.15 Menu Iqro’ 3.9.1 Flowchart Latihan Digunakan untuk memilih satu menu yaitu Latihan yang terdapat di dalam Aplikasi IQRO’.
Gambar 3.16 Menu Latihan
37
3.10
Desain Interface
3.10.1 Desain Splash Desain adalah proses yang cukup vital dalam implementasi analisis sistem kedalam sebuah perangkat lunak. Hal ini bertujuan agar dalam pemograman tidak terjadi pelencengan logika dari hasil analisa yang telah ada. Dengan demikian terjadi link dan match pada realitas dan hasil program. Adapun beberapa desain antar muka pada aplikasi ini yaitu desain antar muka splash screen, home atau tampilan depan, menu utama, pengenalan huruf hija’iyah, iqro’1, iqro; 2, latihan, dan profil. 3.10.2 Desain Home
Gambar 3.17 Desain Home Tampilan home ini nantinya adalah tampilan awal ketika kita pertama kali membuka aplikasi iqro’ yang nantinya menghantarkan ke menu pilihan yang ada di aplikasi iqro’. 3.10.3 Desain Menu Utama
Gambar 3.18 Menu Utama
38
Menu utama ini adalah tampilan setelah Home atau splash pada gambar didalam menu utama ini nantinya kita akan di sajikan dengan 6 menu, menu yang ke satu adalah menu pengenalan huruf hija’yah, menu yang ke dua adalah iqro’1, menu yang ke tiga adalah iqro’ 2, menu yang ke empat adalah latihan, menu yang ke lima adalah abut me atau profil, menu yang keenam adalah keluar. 3.10.4 Desain Menu Pengenalan Huruf Hija’iyah
Gambar 3.19 Huruf Hija’iyah Menu Huruf Pengenalan Hija’iyah didalam menu ini nantinya kita akan belajar cara mengenal huruf hija’iyah sebelum beranjak ke materi iqro’. Pada gambar diatas ada kotak image dimana pada image tersebut nantinya ada sebuah gambar dan nama gambar dari salah satu materi yang sudah di sebutkan, yang sebelumnya ada list pengenalan huruf hija’iyah , button play adalah untuk memulai pengucapan atau pelafalan huruf hija’iyah gambar yang ditampilkan. 3.10.5 Tampilan Menu Materi Iqro’
Gambar 3.20 Menu Materi Iqro’
39
Menu Materi Iqro’, didalam menu ini nantinya kita akan belajar cara belajar iqro’ satu dan dua setelah belajar mengenal huruf hija’iyah . Pada gambar diatas ada kotak image dimana pada image tersebut nantinya ada sebuah gambar tulisan bahasa arab yang merupakan materi iqro’ satu dan dua, button next adalah untuk melanjutkan materi iqro’ dan button home digunakan untuk ke menu utama aplikasi Iqro’. 3.10.6 Tampilan Menu Latihan
Gambar 3.21 Menu Latihan Pembalajaran
Menu latihan pada menu ini nantinya kita akan diajak untuk mengingat pada
materi
Pengenalah huruf hija’iyah , materi iqro’ 1 dan 2 yang akan
dijadikan satu dalam satu evaluasi, dimana pada menu latihan ini kita dituntut untuk mengingat akan nama huruf ejaan Indonesia dan susunan huruf hijaiyah bahasa arab yang ditampilkan pada gambar xx. Pada gambar xx ada petanyaan dan jawaban yang harus di jawab.
40
3.10.7 Tampilan Desain Menu Hasil Jawaban
Gambar 3.22 Menu Hasil Latihan Menu Hasil
pada menu ini nantinya ada sebuah dialog yang
menginformasikan tentang hasil nilai dari latihan yang dijawab dengan bentuk pilihan ganda. 3.10.8 Tampilan Desain Menu Profil (About Me)
Gambar 3.23 Desain About Me Menu profil pada menu ini nantinya ada sebuah dialog yang menginformasikan nama pembuat aplikasi ini dan beberapa informasi lain tentang profil pembuat.
41
3.10.9 Tampilan Desain Keluar Aplikasi
Gambar 3.24 Keluar Aplikasi Menu Keluar adalah menu terakhir dari aplikasi ini, setelah membuka aplikasi Media Pembelajaran Iqro’ pada menu terakhir yaitu keluar dari aplikasi. 3.11
Teknik Pembuatan Teknik pembuatan Aplikasi Media Pembelajaran Iqro’ ini menggunakan
software Eclips, Java Development Kit, Android Software Development Kit, Android Development Tool yang memanfaatkan fungsi dan menu-menu yang terdapat didalamnya. 3.12
Pembuatan Intro/Splash Tampilan pada Intro ini digunakan untuk pertama kali sebelum masuk
aplikasi Media Pembelajaran Iqro’, kemudian barulah setelah splash nantinya akan di tampilkan menu-menu pada aplikasi ini. 3.13
Teknik Pembuatan Menu Utama Pada aplikasi media pembelajaran iqro’ pada pembuatan menu
menggunakan gambar sebagai halaman , sekaligus button pada setiap tomboltombol yang menu yang tersedia di aplikasi media pembelajaran iqro’. Dan untuk membuat menu utama digunakan file Menu.java untuk coding java dan Menu.xml untuk coding tampilan layout dari menu utama. 3.14
Teknik Pembuatan Materi Materi pada pembelajaran iqro’ nantinya akan di tampilkan materi
pengenalan huruf hija’iyah terlebih dahulu kemudian di lanjutkan ke materi iqro’
42
satu dan dua . dimana pada Materi ini terdiri dari 28 gambar dari masing-masing materi huruf hijai’iyah nantinya yang di lengkapi dengan tombol play dan audio untuk pelafalan huruf hija’iyah. 3.15
Teknik pembuatan Evaluasi Evaluasi merupakan tahap dimana suatu hal yang telah dilakukan bersama
diteliti dan dinilai kelayakannya. Evaluasi pelatihan adalah proses untuk mengetahui, menilai dan mencari informasi apakah peserta pelatihan bisa mencerna dan mengikuti pelatihan dengan baik atau tidak. Untuk di aplikasi media pembelajaran. Pada evaluasi iqro’ menggunakan button sebagai pemilihan dari jawaban.
