BAB III ANALISIS DAN PERANCANGAN

Transkripsi

1 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)

2 a. Sistem operasi Windows XP SP3 b. SoftwareEclipse Indigo Build id: c. Software Rapid PHP 2011 d. Android Emulator e. Software MP3 Cut 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 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 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.

3 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 Mad Qalqala Nun Mati dan Tanwin Lam Jallah Skenario 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

4 Kondisi Awal Kondisi Akhir 7. User mengerjakan soal-soal yang ada 8. Aplikasi akan mengecek apakah jawabannya benar atau salah 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

5 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

6 Pada gambar 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 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 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

7 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 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 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.

8 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

9 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

10 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

11 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

12 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

13 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.