BAB III
ANALISIS DAN PERANCANGAN
Bab ini akan menjelaskan system analisis dan perancangan pada aplikasi Tajwid dan Hijaiyah, tahap pertama adalah analisis dan di lanjut dengan perancangan aplikasi. 3.1
Analisis Sistem Tahapan analisis ini adalah tahapan awal dalam pembuatan aplikasi, pada tahapan ini
penulis menganalisa kebutuhan kebutuhan aplikasi. Analisa dilakukan pada data-data yang dibutuhkan aplikasi, sehingga dapat diketahui spesifikasi kebutuhan apa saja yang dibutuhkan untuk membangun aplikasi ini. Saat kita ingin belajar membaca Al-quran mungkin ada beberapa dari kita malu atau sungkan untuk memanggil seorang guru ngaji. Entah karena tidak ada yang dekat dari rumah atau alasan lain. Dan akhirnya mereka tidak tahu bagaimana membaca Al-quran. Jangankan Al-quran, bahkan huruf hijaiyahnya saja mereka belum tahu seperti apa. Bagi anak-anak penting sekali untuk di tanamkan pentingnya nilai agama, sebagai pedoman hidupnya saat besar nanti. Karena Al-quran adalah sebagai pedoman hidup manusia. Mulai dari awal membaca iqro sampai mengenalkan tata cara membaca Al-quran yang baik itu tidak sembarangan. Butuh ahli untuk mengajarkan. Supaya pada saat membaca tidak berubah arti dalam pengucapan. Berdasarkan permasalahan itu penulis mencoba membuat aplikasi ini, sebagai acuan pembelajaran mereka dalam mengenal huruf hijaiyah dan tata cara membaca alquran (Tajwid). 3.2
Analisa Kebutuhan Dalam melakukan penelitian, dibutuhkan beberapa komponen yang mendukung terhadap
keberhasilan peneliltian ini yaitu : 1. Perangkat lunak (software)
a. Sistem operasi Windows XP SP3 b. SoftwareEclipse Indigo Build id: 20110916-0149 c. Software Rapid PHP 2011 d. Android Emulator e. Software MP3 Cut 5.5.1 free 2. Perangkat keras (hardware) a. Notebook Pribadi 3.3
Perancangan Sistem Aplikasi Tajwid dan Hijaiyah dibuat berdasarkan Framework Phonegap dan Jquery
Mobile, sedangkan untuk bahasa pemrogramannya menggunaka HTML5 dan Eclipse sebagai Aplikasi Editor. Perancangan sistem merupakan tahap awal dari perancangan perangkat lunak. Perancangan ini dilakukan untuk mengetahui kondisi sistem secara umum. Perancangan sistem meliputi Cara kerja sistem, Use case diagram, Activity Diagram. 3.3.1
Cara Kerja Sistem
Cara Kerja aplikasi Tajwid dan Hijaiyah adalah offline jadi tidak dibutuhkan koneksi internet karena semua bahan ajar sudah tersimpan di dalam aplikasi. Aplikasi ini juga tidak membutuhkan database, karena tidak adanya sesuatu yang perlu disimpan kedalam database. Aplikasi ini juga terdapat sound dan fungsi swipe page. 3.3.2
Perancangan Use Case Diagram
Use Case diagram dalah menggambarkan fungsionalitas dari sebuah system perangkat lunak yang system tersebut berinteraksi dengan dunia luar. Pada aplikasi Tajwid dan Hijiyah ini dapat diketahui bahwa actor utamanya adalah user (User). Maka di dapatkan 1 use case diagram dan beberapa scenario yang memperlihatkan interaksi interaksi use case diagram dengan actor use case diagram.
Gambar 3.1 use case aplikasi Tajwid dan Hijiayah Berikut ini adalah deskripsi dari use case diagram pada gambar 3.2 diatas: Tabel 3.1 Use case Menu tajwid Nama
Menu Tajwid
Aktor
User Aplikasi
Deskripsi
User men-tap- menu list dari tajwid yang berisi tentang penjelasan tentang tajwid dan juga ada latihan latihan soal untuk evaluasi 1. User memilih menu tajwid yang ada. 2. Pada aplikasi terdapat list divider dari tajwid, yang berisi
Skenario
Mad
Qalqala
Nun Mati dan Tanwin
Lam Jallah
Mim Mati
Latihan
3. User memilih submenu yang tersedia 4. Aplikasi akan memunculkan sub menu yang dipilih. 5. User memilih soal latihan 6. Aplikasi akan menampilkan soal-soal latihan yang berupa plilihan ganda
7. User mengerjakan soal-soal yang ada 8. Aplikasi akan mengecek apakah jawabannya benar atau salah Kondisi Awal Kondisi Akhir
3.3.4
User menerima halaman awal yang berisi list divider dari menu Tajwid 1. User mempelajari isi dari menu tajwid 2. User menjawab soal dari menu tajwid
Perancangan Activity Diagram
Diagram aktifitas menggambarkan berbagai aliran aktifitas dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan bagaimana suatu aktifitas berakhir.Setiap langkah adalah sebuah keadaan dalam melakukan sesuatu. Gambar 3.2 dan 3.3 adalah activity diagram dari aplikasi yang akan dibuat.
Gambar 3.2Activity Diagram pada halaman Hijaiyah
Pada gambar diatas user akan dibawa ke sebuah list-divider dimana berisi 2 list, yaitu yang menuju halaman game dan hijaiyah. Bila user memilih game maka akan di bawa ke halaman game, game itu berisi tentang permainan puzzle image, dimana tersedia 3 pilihan gambar, dan 3 pilihan level. Mulai dari level Mudah (9 tile), Sedang (16 tile), Sulit (25 tile). Bila user memilih page hijaiyah maka akan di direct ke halaman hijaiyah dari mulai Alif sampai dengan Huruf Ya, beserta sound dan harakaatnya. Untuk keluar dari aplikasi cukup menggunakan tombol back pada Handphone user.
Gambar 3.3Activity Diagram pada halaman Hijaiyah
Pada gambar 3.3.1 di atas menjelaskan aplikasi saaat memulai user men-tap aplikasi. Setelah itu user mendapatkan main page dari aplikasi tajwid yang berisi sub materi submateri dari tajwid. Kemudian setelah user memilih halaman submateri apa yang dipilih, aplikasi akan menampilkan halaman tajwid yang dipilih, di dalam sub materi tersebut juga ada page kuis yang bias di ikuti oleh user, kuis tersebut berisi 3 soal tentang sub materi tajwid yang sudah di pelajari oleh user. Jika user menjawab kuis salah makan akan di redirect ke halaman page salah, dan permainan terus berjalan sampai selesai. Begitu juga biala user mencawab jawaban benar. Setelah 3 soal di jawab maka akan muncul popup menandakan soal sudah habis, dan akan kembali di redirect ke halaman awal. Untuk keluar dari aplikasi cukup menggunakan tombol back pada Handphone user. 3.3.5
Perancangan Sequence Diagram
Sequence diagram di gunakan untuk menggambarkan perilaku pada sebuah skenario. Diagram ini menunjukan sejumlah contoh obyek dan message yang di letakkan di antara obyekobyek di dalam use case. Komponen utama sequence diagram terdiri dari obyek yang di tuliskan dengan kotak segi empat bernama. Message di wakili oleh garis dengan tanda panah dan waktu yang di tunjukkan dengan progress vertical. 3.3.5.1 Sequence Diagram User Membuka Halaman Tajwid Pada tahap ini aktor yang berperan adalah user itu sendiri, untuk melihat proses lebih jelasnya dapat dilihat sequence diagram dibawah ini:
Gambar 3.4 Sequence Diagram Pada Halaman Tajwid
Gambar diatas menggambarkan proses yang sedang terjadi saat user membuka halaman tajwid. Prosesnya dimulai saat user membuka halaman menu dari tajwid dan kemudian user bisa membuka halaman submenu dari tajwid dan juga membuka halaman quiz, pada proses ini user berada pada halaman tajwid yang sedang membuka halaman sub menu tajwid bisa kembali ke menu tajwid dan memilih halaman quiz. 3.3.5.2 Sequence Diagram User Membuka Halaman Hijaiyah Disini aktor yang berperan masih user aplikasi Tajwid dan Hijaiyah, berikut adalah sequence diagram pada halaman hijaiyah.
Gambar 3.5 Sequence Diagram Pada Halaman Hijaiyah
Gambar di atas menjelaskan saat user membuka halaman hijaiyah, dimana user bisa menemukan halaman belajar hijaiyah dan juga halaman games. 3.3.6
Perancangan Storyboard
Storyboard adalah deskripsi masing-masing tampilan suatu kejadian dari movie yang dimainkan dengan menampilkan semua objek atau elemen multimedia serta komponen-komponen aplikasi yang akan dibuat. Storyboard digunakan sebagai alat bantu pada tahapan perancangan multimedia. Satu kolom storyboard mewakili satu tampilan di layar handphone.
No Visual
Keterangan
1 Nama Halaman: Halaman Awal 1. Header – Bagian ini tempat dari judul aplikasi 2. Content dari tajwid - berisi list-divider dari sub materi tajwid 3. Hijaiyah – tombol menuju halaman hijaiyah 4.
Help
–
berisi
tentang
tata-cara
penggunaan aplikasi 5. About – halaman yang berisi tentang penulis dan versi aplikasi Gambar 3.4Halaman Awal
2 Nama Halaman: Content Tajwid Tombol Back – untuk kembali ke halaman awal Judul halaman – Judul dari halaman content Content - penjelasan tajwid secara rinci Gambar contoh – contoh gambar dari content tajwid Button Sound - menampilkan sound dari gambar, cara pengucapannya
Gambar 3.5Halaman Content Tajwid
3 Nama halaman: Kuis Nomor Kuis – nomor pada kuis, misal 1,2,3 Pertanyaan
kuis
–
pertanyaan
yang
munculuntuk di jawab oleh user Pilihan ganda – pilihan jawaban dari pertanyaan di atas Button cek jawaban -
tombol untuk
mengecek jawaban yang di input user Footer – Footer dari halaman
Gambar 3.6Halaman Kuis
4 Nama Halaman: Hasil Quiz Benar dan Salah Header – Benar/Salah dari jawaban kuis Content – isi keterangan jawaban Next – tombol untuk ke pertanyaan selanjutnya Footer –footer dari halaman
5 Nama Halaman: Halaman Hijaiyah Home – Button yang menuju halaman utama Hijaiyah – Header dari page Menu – judul dari list Gambar – gambar yang menerangkan tentang halaman Game/Hijaiyah – link yang akan menuju halaman tersebut
6 Nama Halaman: Halaman Hijaiyah Home – Button yang menuju halaman utama Hijaiyah – Header dari page Menu – judul dari list Gambar – gambar yang menerangkan tentang halaman Game/Hijaiyah – link yang akan menuju halaman tersebut
7 Nama Halaman: Isi Hijaiyah Hijaiyah – Judul dari halaman, misal alif, ba, ta, dst Home: button untuk kembali ke halaman hijaiyah Arrow – menunjjukan next atau back halaman Gambar hijaiyah – contoh gambar Fathah, kasrah, dhomah – menujjukan gambar dari harakat huruf hijaiyah dia tasnya Sound – contoh cara pembacaan dari harakaat tersebut
8
Nama halaman: Games Home :
untuk kembali
ke halaman
sebelumnya Games - header dari halaman Pilih gambar – judul memilih gambar Gambar 1,2,3 – pilihan gambar yang akan user mainkan Pilih level – pilihan level yang bisa di mainkan user Mulai – tombol untuk memulai permainan
9 Nama halaman : Games Start Games - head dari halaman Img – potongan gambar yang sudah di atur menurut level yang ada di halaman game. Main menu - untuk kembali ke halaman game
10 Nama halaman: Help Back – untuk kembali ke halaman utama aplikasi Help – Helader dari halaman Content
isi
dari
help
tersebut
yang
menjelaskan bagaimana cara menggunakan aplikasi
11 Nama halaman: About About – Header dari aplikasi Lambang close – button untuk keluar dari halaman, dan akan di direct ke halaman awal aplikasi Content about berisi versi dari aplikasi dan sedikit tentang penulis.