22 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
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 yang mewadahi kebutuhan tersebut, atau 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.
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’ 1dan 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
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.
Use Case Diagram di atas dijelaskan dalam table 3.1 di bawah ini
Tabel 3.1 Use Case Diagram
Aktor Nama Use Case Deskripsi Use Case
User Tampilkan Menu 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
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.
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.
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.
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.
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.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.
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:
3.9 Flowchart Aplikasi a. Flowchart Menu
digunakan untuk awal aplikasi untuk memilih menu-menu yang di sediakan di Aplikasi IQRO’ .
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 menuyaitu pengenalan huruf hija’iyah yang terdapat di dalam Aplikasi IQRO’.
d. Flowchart Iqro’
Digunakan untuk memilih satu menu yaitu iqro satu dan dua yang terdapat di dalam Aplikasi IQRO’
Gambar 3.15Menu Iqro’ 3.9.1 Flowchart Latihan
Digunakan untuk memilih satu menu yaitu Latihan yang terdapat di dalam Aplikasi IQRO’.
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 aplikasiiqro’ yang nantinya menghantarkan ke menu pilihan yang ada di aplikasiiqro’.
3.10.3 Desain Menu Utama
Gambar 3.18 Menu Utama 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 aplikasiiqro’ yang nantinya menghantarkan ke menu pilihan yang ada di aplikasiiqro’.
3.10.3 Desain Menu Utama
Gambar 3.18 Menu Utama 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 aplikasiiqro’ yang nantinya menghantarkan ke menu pilihan yang ada di aplikasiiqro’.
3.10.3 Desain Menu Utama
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 menupengenalan huruf hija’yah, menu yang ke dua adalahiqro’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.19Huruf 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 MenuMateri Iqro’
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 menupengenalan huruf hija’yah, menu yang ke dua adalahiqro’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.19Huruf 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 MenuMateri Iqro’
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 menupengenalan huruf hija’yah, menu yang ke dua adalahiqro’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.19Huruf 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’
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.
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.
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.
3.10.7 TampilanDesain 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 TampilanDesain 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.
3.10.7 TampilanDesain 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 TampilanDesain 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.
3.10.7 TampilanDesain 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 TampilanDesain 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.
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 yaitukeluar 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 tombol-tombol 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’
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.
