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 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.
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 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 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 pengucapann 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 adaa sebuah gambar tulisan bahasa arab yang merupakan materi iqro satu dan dua, button next adalah untuk melanjutkan materi iqro utama aplikasi Iqro. 3.10.6 Tampilan Menu Latihan dan button home digunakan untuk ke menu 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 susunann huruf hijaiyah bahasa arab yang ditampilkan pada gambar xx. Pada gambar xxx 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.