32
BAB III
ANALISIS DAN PERANCANGAN SISTEM
3.1 Analisis Masalah
Pengenalan huruf hijaiyah, pengenalan tanda baca dan angka Arab tentunya harus dipelajari agar tidak salah dalam membaca Al Qur’an seperti makhraj huruf, bacaan panjang dan pendek dan pengucapan kata setiap huruf hijaiyah bagi setiap muslim. Sistem pembelajaran dipengajian–pengajian pada umumnya hanya memberikan pembelajaran yang sederhana saja pada anak-anak seperti menerangkannya dipapan tulis. Sehingga anak-anak usia dini kurang mampu menangkap apa yang di sampaikan oleh pengajar.
Pengaplikasian pembelajaran yang interaktif ini diaplikasikan kedalam sebuah sistem yang dapat mengenalkan huruf hijaiyah dan angka Arab, memperdengarkan suara dan juga dapat memberitahu cara membaca huruf hijaiyah dan angka arab dengan benar. Dengan ditambah fitur konten multimedia seperti suara, gambar dan adanya permainan dalam aplikasi tersebut agar lebih bisa dipahami untuk anak usia dini.
3.2 Analisis Sistem
Analisis sistem dapat didefinisikan sebagai penguraian dari suatu sistem yang utuh kedalam bagian–bagian komponennnya dengan maksud untuk mengidentifikasi dan mengevaluasi permasalahan–permasalahan, hambatan-hambatan yang terjadi dan kebutuhan- kebutuhan yang diharapkan sehingga dapat diusulkan perbaikan-perbaikannya. Atau secara lebih mudahnya analisis sistem adalah penelitian atas sistem yang telah ada dengan tujuan untuk merancang sistem yang baru atau diperbarui. Dalam proses pembuatan suatu sistem mutlak dilakukan penelitian dan penganalisaan tentang sistem yang akan dibangun.
33
3.3 Analisis kebutuhan sistem
Tahap analisis sistem merupakan salah satu usaha mengidentifikasi kebutuhan dan spesifikasi sistem yang akan diciptakan. Di dalamnya akan dijabarkan apa saja entitas yang dilibatkan, proses yang dijalankan, serta output yang dihasilkan.
Berdasarkan analisis masalah yang dijabarkan diatas, maka aplikasi yang dibuat adalah Perancangan aplikasi interactive learning huruf dan angka dalam berbahasa Arab. dengan spesifikasi sistem sebagai berikut:
1. Sistem aplikasi yang akan digunakan berbasis mobile programming dengan platform android.
2. Sistem menyediakan metode interactive leraning mengenai huruf hijaiyah dan angka Arab yang akan memudahkan user untuk belajar.
3. Sistem menyediakan games interactive untuk user agar lebih memahami pembelajaran yang diberikan dalam aplikasi.
3.4 Perancangan sistem
Perancangan system yang digunakan menggunakan Flowchart dan Storyboard sebagai panduan aplikasi yang akan dibuat.
34
3.5 Flowchart Rancangan Aplikasi Interactive Learning Huruf dan Angka Dalam Berbahasa Arab Berbasisi Android.
Start
Splash screen
Tampilan menu utama
Pilih Button huruf hiajaiyah
Tampilan menu huruf
hijaiyah
Pilih salah satu button huruf hijaiyah
Tampilan huruf hijaiyah
Pilih button angka arab 1-20
Tampilan menu angka
arab 1-20
Pilih salah satu button angka arab 1-20
Tampilan angka arab
Pilih button kuis menu kuis
Pilih button about
End Pilih button exit
Tampilan about Ya
Ya
Ya
Ya
Ya
Tidak Tidak
Tidak Tidak Tidak
Pilih salah satu menu
kuis Tampilan kuis
Gambar 3. 1 Flowchart Diagram
35
3.6 Storyboard Rancangan Aplikasi Interactive Learning Huruf dan Angka Dalam Berbahasa Arab Berbasisi Android.
3.6.1 Storyboard Menu Utama Aplikasil
Image View
(Splash Screen)
Image Button
(Hijaiyah)
Image Button
(Angka)
Image Button
(Kuis)
Image Button
(About)
Image Button
( 29 Huruf Hijaiyah )
Halaman Menu Hijaiyah
Image Button (back)
Halaman Menu Hijaiyah
Halaman Menu Hijaiyah
Halaman Menu Hijaiyah Image Button
( 20 Angka Arab )
Image Button (back)
Image Button (back) Image Button
(Aritmatika)
Image Button
(Tebak Gambar)
Text (About)
Keterangan panah pada storyboard Menu Utama Aplikasi :
1. Garis yang berwarna Hitam tebal : Menghubungkan SplashScreen pada menu utama aplikasi.
2. Garis yang berwarna Merah tebal : Button hijaiyah menghubungkan halaman menu utama ke halamanmenu Hijaiyah.
3. Garis yang berwarna Orange tebal : Button angka menghubungkan halaman menu utama ke halaman menu Angka.
4. Garis yang berwarna Ungu tebal : Button kuis menghubungkan halaman menu utama ke halaman menu Kuis.
5. Garis yang berwarna Hijau tebal : Button about menghubungkan halaman menu utama ke halaman menu About.
6. Garis yang berwarna Merah tipis : Button back untuk menunjukkan kembali ke halaman menu utama aplikasi.
Halaman Menu utama
Background Image Background Image
Background Image
Background Image
Gambar 3. 2 Storyboard Menu Utama Aplikasi
36 3.6.2 Storyboard Menu Hijaiyah
Image Button (Hijaiyah)
Image Button (Angka)
Image Button (Kuis)
Image Button (About)
Image Button
( 29 Huruf Hijaiyah )
Halaman Menu Hijaiyah
Image Button (back)
Halaman Menu Hijaiyah
Halaman Menu Hijaiyah Image Button (prev)
Image Button (Alif)
Image Button (Ba)
Keterangan panah pada storyboard Menu Hijaiyah :
1. Garis yang berwarna Biru tebal : Button Hijaiyah menghubungkan menu utama aplikasi ke menu hijaiyah yg menampilkan 29 huruf hijaiyah dari Alif sampai Ya.
2. Garis yang berwarna Merah tebal : menghubungkan halaman menu hijaiyah ke tampilan hijaiyah yang berawal dari huruf Alif.
3. Garis yang berwarna Hitam tebal : button next menghubungkan halaman tampilan hijaiyah yang berwal dari huruf Alif ke halaman hijaiyah selanjutnya yaitu Ba hingga seterusnya.
4. Garis yang berwarna Hijau tebal : button prev menghubungkan halaman tampilan hijaiyah huruf Ba kembali ke huruf Alif.
Halaman Menu utama
Image Button (next)
Image Button (prev)
Image Button (next) Background Image
Background Image
Background Image Background Image
Gambar 3. 3 Storyboard Menu Hijiaiyah
37 3.6.3 Storyboard Menu Angka
Image Button (Hijaiyah)
Image Button (Angka)
Image Button (Kuis)
Image Button (About)
Image Button
( 20 Angka Arab )
Halaman Menu Angka
Image Button (back)
Halaman Menu Angka
Halaman Menu Angka Image Button (prev)
Image Button (Wahid)
Image Button (Itsnain)
Keterangan panah pada storyboard Menu Angka :
1. Garis yang berwarna Biru tebal : Button Angka menghubungkan menu utama aplikasi ke menu Angka Arab yg menampilkan 20Angka Arab dari Wahid sampai Isyruun.
2. Garis yang berwarna Merah tebal : menghubungkan halaman menu Angka ke tampilan Angka Arab yang berawal dari Wahid
3. Garis yang berwarna Hitam tebal : button next menghubungkan halaman tampilan Angka Arab yang berawal dari huruf Wahid ke halaman Angka Arab selanjutnya yaitu Itsnain hingga seterusnya.
4. Garis yang berwarna Hijau tebal : button prev menghubungkan halaman tampilan Angka Arab Itsnain kembali ke Wahid.
Halaman Menu utama
Image Button (next)
Image Button (prev)
Image Button
(next) Background Image
Background Image Background Image
Background Image
Gambar 3. 4 Storyboard Menu Angka
38 3.6.4 Storyboard Menu Kuis
Image Button (Hijaiyah)
Image Button (Angka)
Image Button (Kuis)
Image Button (About)
Image Button (back)
Halaman Menu Kuis Image Button
(Aritmatika)
Keterangan panah pada storyboard Menu Kuis :
1. Garis yang berwarna Biru tebal : Button kuis menghubungkan halaman menu utama ke halaman menu kuis yang menampilkan button kuis Aritmatika dan Tebak gambar.
2. Garis yang berwarna Orange tebal : Button aritmatika menghubungkan halaman menu kuis ke halaman menu Aritmatika yang berisi button Tambahan dan button pengurangan.
3. Garis yang berwarna Coklat tebal : Button Tambahan menghubungkan halaman menu aritmatika ke halaman menu tambahan yg berisi soal pertanyaan.
4. Garis yang berwarna Hijau tebal : Button Pengurangan menghubungkan halaman menu aritmatika ke halaman menu pengurangan yg berisi soal pertanyaan.
5. Garis yang berwarna Hitam tebal : Button Tebak gambar menghubungkan halaman menu kuis ke halaman menu tebak gambar yg berisi soal pertanyaan.
6. Garis yang berwarna Ungu tebal : menghubungkan halaman menu tambahan, pengurangan, dan tebak gambar ke halaman hasil kuis yg berisi hasil skor
7. Garis yang berwarna Merah tipis : Button back untuk menunjukkan kembali ke halaman menu utama aplikasi, menu aritmatika, menu kuis.
Halaman Menu utama
Halaman Menu Kuis Image Button
(Tambahan)
Image Button (Pengurangan)
Image Button (Tebak Gambar)
Image Button (back)
Image Button (A)
Image Button (B)
Image Button (D) Image Button
(C)
Halaman Menu Tambahan Halaman Menu Pengurangan Halaman Menu Tebak Gambar
Image Button (A)
Image Button (B)
Image Button (C)
Image Button (D)
Image Button (A)
Image Button (B)
Image Button (D) Image Button
(C)
Soal Soal Soal
Halaman Hasil kuis Hasil Skor : Image Button
(back)
Background Image Background Image
Background Image Background Image
Background Image Background Image
Background Image
Gambar 3. 5 Storyboard Menu Kuis
39 3.6.5 Storyboard Menu About
Image Button (Hijaiyah)
Image Button (Angka)
Image Button (Kuis)
Image Button (About)
Halaman Menu About
Keterangan panah pada storyboard Menu About :
1. Garis yang berwarna Hijau tebal : Button About menghubungkan menu utama aplikasi ke menu About yang menampilkan text mengenai About/tentang aplikasi yg dibuat.
Halaman Menu utama
Image Button (About)
Background Image Background Image
Gambar 3. 6 Storyboard Menu About
40 3.7 Perancangan Antar Muka
Perancangan antarmuka menjelaskan rutinitas program yang akan dijalankan oleh sebuah sistem untuk menjelaskan interaksi antara user dengan aplikasi yang akan dibuat.
3.7.1 Tampilan Splash Screen
Gambar 3. 7 Rancangan Splash Screen
3.7.2 Tampilan Membuka Halaman Utama
HIjaiyah Angka Kuis About
Gambar 3. 8 Rancangan Menu Utama Tampilan splash
screen aplikasi
41 3.7.3 Tampilan Rancangan Menu Hijaiyah
kembali
Gambar 3. 9 Rancangan Menu Hijaiyah
3.7.4 Tampilan Rancangan Menu Angka
kembali
Gambar 3. 10 Rancangan Menu Angka
42 3.7.5 Tampilan Rancangan Menu Kuis
Perhitungan
Tebak Huruf Hijaiyah
Gambar 3. 11 Rancangan Menu Kuis
3.7.6 Tampilan Rancangan Menu Level Kuis
Level 1
Level 2
Level 3
Gambar 3. 12 Rancangan Menu Level Kuis
43 3.7.7 Tampilan Rancangan Menu Soal Kuis
Soal Pilihan
Jawaban A
Pilihan jawaban B
Pilihan Jawaban D Pilihan
jawaban C
Gambar 3. 13 Rancangan Menu Soal Kuis
3.7.8 Tampilan Rancangan Hasil Nilai Kuis
Menampilkan hasil nilai
kembali
Gambar 3. 14 Rancangan Menu Hasil Nilai Kuis
44 3.7.9 Tampilan Rancangan Menu About
Tentang Pembuat Aplikasi
Gambar 3. 15 Rancangan Menu About
