BAB III ANALISA MASALAH DAN PERANCANGAN III.1. Analisa Sub bab ini berisikan tentang analisa sistem yang akan dibangun. Sub bab ini membahas teknik pemecahan masalah yang menguraikan sebuah sistem menjadi bagian-bagian komponen dengan tujuan mempelajari seberapa baik bagian-bagian komponen tersebut bekerja dan berinteraksi. III.1.1. Analisa Masalah Tujuan dari fase analisis adalah memahami dengan sebenar-benarnya kebutuhan dari sistem baru dan mengembangkan sebuah sistem yang mewadahi kebutuhan tersebut. Untuk mempermudah analisis sistem dalam menentukan kebutuhan secara lengkap, maka penulis membagi kebutuhan sistem kedalam dua jenis yakni, kebutuhan fungsional dan kebutuhan nonfungsional. III.1.1.1. Analisa Kebutuhan Fungsional Kebutuhan fungsional adalah jenis kebutuhan yang berisi proses-proses apa saja yang nantinya dilakukan oleh sistem. Kebutuhan fungsional juga berisi informasi-informasi apa saja yang harus ada dan dihasilkan oleh sistem. Berikut kebutuhan fungsional yang terdapat pada sistem yang dibangun : 1. Mengimplementasikan penggunaan Visual Studio 2010 dalam membuat aplikasi media pembelajaran tajwid Al-Qur an berbasis mobile. 33
34 2. Membuat aplikasi media pembelajaran tajwid Al-Qur an berbasis mobile yang interaktif dengan visualisasi yang menarik, yang bersifat sebagai media pembelajaran sehingga dapat digunakan sebagai salah satu media pendukung pembelajaran tajwid Al-Qur an. 2. Membangun aplikasi media pembelajaran tajwid Al-Qur an berbasis mobile yang user friendly sehingga diminati oleh siapa saja yang memainkannya. III.1.1.2. Analisa Kebutuhan NonFungsional Kebutuhan ini adalah tipe kebutuhan yang berisi properti perilaku yang dimiliki oleh sistem. Berikut adalah kebutuhan nonfungsional yang dimiliki sistem : 1. Operasional A. Digunakan pada sistem operasi Microsoft Windows Mobile secara stand alone. B. Aplikasi dibangun dengan menggunakan komponen sebagai berikut : i. Paket software Visual Studio 2010 untuk Visual Studio 2010, untuk aplikasi pemrograman aplikasi. C. Spesifikasi komputer standard Processor Core 2 Duo 2.00 GHz, Memori 2048 MB, Kartu Grafik 128 MB 2. Kinerja Waktu yang diperlukan dalam mengeksekusi aplikasi media pembelajaran tajwid Al-Qur an berbasis mobile yang dibangun cukup berat, sehingga eksekusi tampilannya cukup lama tergantung pada banyaknya form serta images yang gunakan.
35 III.2. Perancangan Sistem Sub bab ini berisikan tentang rancangan sistem yang akan dibangun, dalam hal ini perancangan terhadap sistem. III.2.1. Diagram Use Case Berikut ini merupakan diagram use case dari Perancangan Aplikasi Media Pembelajaran Tajwid Al-Qur an Berbasis Mobile. Terlihat pada gambar III.1 Gambar III.1. Diagram Use Case Aplikasi Pada diagram use case di atas, aktor yang didefenisikan pada aplikasi hanya 1 yakni user. User adalah orang yang menjalankan aplikasi. Ketika aplikasi dijalankan, aplikasi akan menampilkan halaman dan mengeksekusi perintah sesuai dengan event yang diberikan user pada interface aplikasi. III.2.2. Diagram Kelas Berikut ini merupakan diagram kelas dari aplikasi Perancangan Aplikasi Media Pembelajaran Tajwid Al-Qur an Berbasis Mobile. Terlihat pada gambar III.2
36 Gambar III.2. Diagram Kelas Aplikasi Pada diagram Kelas Aplikasi, Main merupakan kelas main yang juga merangkap sebagai kelas yang menangani tampilan, yaitu Lihat Petunjuk dan Langsung Ke Aplikasi. Lihat Petunjuk merupakan kelas proses yang diambil dari pendefenisian use case Lihat petunjuk yang didalamnya terdapat pemberitahuan cara penggunaan aplikasi. Langsung ke Aplikasi merupakan kelas proses yang diambil dari pendefenisian use case Langsung ke Aplikasi yang didalamnya terdapat pilihan kategori materi-materi tajwid. III.2.3. Diagram Objek Berikut ini merupakan diagram objek dari aplikasi Perancangan Aplikasi Media Pembelajaran Tajwid Al-Qur an Berbasis Mobile. Terlihat pada gambar III.3.
37 Gambar III.3 Diagram Objek Aplikasi III.2.4. Diagram Sekuen Berikut ini merupakan diagram sequence dari aplikasi Perancangan Aplikasi Media Pembelajaran Tajwid Al-Qur an Berbasis Mobile. Terlihat pada gambar III.4, dan gambar III.5. Use Case : Lihat Petunjuk Gambar III.4 Diagram Sequence Untuk Use Case Lihat Petunjuk Pada diagram Sequence untuk Use case Lihat Petunjuk, user memberi event untuk Lihat Petunjuk, lalu diproses dan program memperlihatkan tampilan Lihat Petunjuk.
38 Use Case : Langsung Ke Aplikasi Gambar III.5 Diagram Sequence Untuk Use Case Langsung Ke Aplikasi Pada diagram Sequence untuk Use case Langsung ke Aplikasi, user memberi event untuk Jalankan LangsungKeAplikasi, lalu diproses dan program memperlihatkan tampilan PilihanKategoriMateri, dan ketika diberi event untuk menjalankan pilihan KategoriPilihanMateri maka akan terproses dan menampilkan Materi. III.2.5. Diagram Status Berikut ini merupakan diagram status dari aplikasi Perancangan Aplikasi Media Pembelajaran Tajwid Al-Qur an Berbasis Mobile.
39 Objek : main dari kelas Main Gambar III.6 Diagram Status Untuk Objek : main dari kelas Main Objek : ma dari kelas LihatPetunjuk Gambar III.7 Diagram Status Untuk Objek : ma dari kelas LihatPetunjuk
40 Objek : mb dari kelas LangsungkeAplikasi Gambar III.8 Diagram Status Untuk Objek : mb dari kelas MainkanGame III.2.6. Diagram Aktivitas Berikut ini merupakan diagram aktivitas dari aplikasi Perancangan Aplikasi Media Pembelajaran Tajwid Al-Qur an Berbasis Mobile. Terlihat pada gambar III.9 Gambar III.9 Diagram Aktivitas
41 III.2.7. Diagram Komponen Berikut ini merupakan diagram komponen dari aplikasi Perancangan Aplikasi Media Pembelajaran Tajwid Al-Qur an Berbasis Mobile. Terlihat pada gambar III.10 Application Package3 User Interface Logic Processing Gambar III.10 Diagram Komponen III.2.8. Diagram Deployment Berikut ini merupakan diagram deployment dari aplikasi Perancangan Aplikasi Media Pembelajaran Tajwid Al-Qur an Berbasis Mobile. Terlihat pada gambar III.11 Gambar III.11 Diagram Deployment
42 III.3 Perancangan Tampilan III.3.1 Rancangan Tampilan Menu Aplikasi Gambar III.12 Rancangan Form Tampilan Awal Form di atas merupakan form awal yang akan ditampilkan pada saat aplikasi dijalankan. Pada saat form awal ini tampil, terdapat dua buah pilihan yang dihadapkan kepada user yakni Lihat Petunjuk untuk melihat petunjuk penggunaan aplikasi, dan Langsung ke Aplikasi untuk langsung menuju aplikasi.
43 Gambar III.13 Rancangan Form Tampilan Petunjuk Form di atas merupakan form petunjuk yang akan ditampilkan pada saat user memilih button Lihat Petunjuk. Form Petunjuk ini memberikan informasi bagai mana cara penggunaan aplikasi Media Pembelajaran Tajwid Al Qur an. Tujuannya agar user lebih mudah dalam menggunakan aplikasi tersebut.
44 Gambar III.14 Rancangan Form Menu Utama Pilihan Materi Tajwid Form menu utama pilihan materi tajwid merupakan form yang berisi materi pilihan pembelajaran yang siap untuk dipelajari oleh pengguna aplikasi, terdiri atas menu Bentuk, Makhraj, dan Sifat Huruf, menu Izhar, menu Idgham, menu iqlab, menu Ikhfa, menu Qalqalah, menu Waqf, menu Mad, dan menu Testing
45 Gambar III.15 Rancangan Form Menu Bentuk, Makhraj dan Sifat Huruf Form ini digunakan untuk mempelajari bentuk-bentuk huruf hijaiyyah, makhraj dari masing-masing huruf, serta sifat dari masing-masing huruf. Dalam kolom keterangan akan diberikan suara dan keterangan singkat tentang makhraj dan sifat dari suatu huruf yang mendapatkan focus.
46 Gambar III.16 Rancangan Form Menu Izhar Form di atas adalah form yang akan digunakan untuk mempelajari materi izhar. Dalam form akan ditampilkan keterangan singkat tentang apa itu izhar, kemudian diberikan contoh berupa rangkaian-rangkaian kata yang tertulis dalam bahasa arab didalam sebuah tombol, jika tombol mendapatkan fokus kursor maka program akan memperdengarkan suara yang membunyikan bacaan tersebut.
47 Gambar III.17 Rancangan Form Menu Idgham Form di atas adalah form yang akan digunakan untuk mempelajari materi idgham. Dalam form akan ditampilkan dua buah tombol yang berisi keterangan jenis idgham yang dapat dipilih, ada terdapat tombol idgham bighunnah dan idgham bi laa ghunnah. Jika salah satu tombol diklik, maka akan ditampilkan form yang membahas materi tentang itu.
48 Gambar III.18 Rancangan Form Menu Idgham Bi Ghunnah Form di atas adalah form yang akan digunakan untuk mempelajari materi idgham bi ghunnah. Dalam form akan ditampilkan keterangan singkat tentang apa itu idgham bighunnah, kemudian diberikan contoh berupa potongan-potongan ayat Al-qur an yang didalam sebuah tombol, jika tombol mendapatkan fokus kursor maka program akan memperdengarkan suara yang membunyikan bacaan tersebut.
49 Gambar III.19 Rancangan Form Menu Idgham Bi Laa Ghunnah Form di atas adalah form yang akan digunakan untuk mempelajari materi idgham bi laa ghunnah. Dalam form akan ditampilkan keterangan singkat tentang apa itu idgham bi laa ghunnah, kemudian diberikan contoh berupa rangkaian potongan-potongan ayat Al-qur an yang tertulis didalam sebuah tombol, jika tombol mendapatkan fokus kursor maka program akan memperdengarkan suara yang membunyikan bacaan tersebut.
50 Gambar III.20 Rancangan Form Menu Iqlab Form di atas adalah form yang akan digunakan untuk mempelajari materi iqlab. Dalam form akan ditampilkan keterangan singkat tentang apa itu iqlab, kemudian diberikan contoh berupa potongan-potongan ayat Al qur an yang tertulis didalam sebuah tombol, jika tombol mendapatkan fokus kursor maka program akan memperdengarkan suara yang membunyikan bacaan tersebut.
51 Gambar III.21 Rancangan Form Menu Ikhfa Form di atas adalah form yang akan digunakan untuk mempelajari materi ikhfa. Dalam form akan ditampilkan keterangan singkat tentang apa itu ikhfa, kemudian diberikan contoh berupa potongan-potongan ayat Al qur an yang tertulis didalam sebuah tombol, jika tombol mendapatkan fokus kursor maka program akan memperdengarkan suara yang membunyikan bacaan tersebut.
52 Gambar III.22 Rancangan Form Menu Qolqolah Form di atas adalah form yang akan digunakan untuk mempelajari materi qolqolah. Dalam form akan ditampilkan dua buah tombol yang berisi keterangan jenis qolqolah yang dapat dipilih, ada terdapat tombol qolqolah sugro dan qolqolah kubro. Jika salah satu tombol di klik, maka akan ditampilkan form yang membahas materi tentang itu.
53 Gambar.III.23 Rancangan Form Materi Qolqolah Sugra Form di atas adalah form yang akan digunakan untuk mempelajari materi Qolqolah sugra. Dalam form akan ditampilkan keterangan singkat tentang apa itu qolqolah sugra, kemudian diberikan contoh berupa potongan ayat Al-qur an yang tertulis didalam sebuah tombol, jika tombol mendapatkan fokus kursor maka program akan memperdengarkan suara yang membunyikan bacaan tersebut.
54 Gambar.III.24 Rancangan Form Materi Qolqolah Kubra Form di atas adalah form yang akan digunakan untuk mempelajari materi Qolqolah Kubra. Dalam form akan ditampilkan keterangan singkat tentang apa itu qolqolah Kubra, kemudian diberikan contoh berupa potongan ayat Al-qur an yang tertulis didalam sebuah tombol, jika tombol mendapatkan fokus kursor maka program akan memperdengarkan suara yang membunyikan bacaan tersebut.
55 III.3.2 Rancangan Tampilan Menu Test Gambar III.25 Rancangan Form Menu Test Form di atas adalah form yang akan digunakan untuk materi test (evaluasi materi yang dipelajari sebelumnya). Dalam form akan ditampilkan dua buah tombol yakni tombol bismillah dan back to menu. Jika tombol bismillah diklik, maka akan ditampilkan form testing. Jika tombol back to menu yang diklik, maka akan kembali ke halaman utama aplikasi.
56 Gambar III.26 Rancangan Form Menu Test Soal No.1 Form di atas adalah form yang akan digunakan untuk materi test (evaluasi materi yang dipelajari sebelumnya). Dalam form akan ditampilkan sebuah pertanyaan, pengguna diwajibkan memilih salah satu opsi jawaban, kemudian dilanjutkan dengan menekan tombol proses. Soal No.2 ﺻ ﯾ را ﺳ ﻣﯾ ﻌﺎ ﺑ Pada huruf yang berwarna biru di atas berlaku hukum apa? A. Iqlab C. Izhar B. Ikhfa D. Idgham PROSES Gambar III.27 Rancangan Form Menu Test Soal No.2
57 Form di atas adalah form yang akan digunakan untuk materi test (evaluasi materi yang dipelajari sebelumnya). Dalam form akan ditampilkan sebuah pertanyaan, pengguna diwajibkan memilih salah satu opsi jawaban, kemudian dilanjutkan dengan menekan tombol proses. Gambar III.28 Rancangan Form Hasil Test Benar Form di atas adalah form yang akan digunakan untuk menampilkan hasil evaluasi materi yang dipelajari sebelumnya. Dalam form akan ditampilkan daftar jawaban yang telah user pilih dalam form-form soal sebelumnya, kemudian akan diberikan informasi keterangan jika soal yang dipilih user dinyatakan Benar.
58 Gambar III.29 Rancangan Form Hasil Test Salah Form di atas adalah form yang akan digunakan untuk menampilkan hasil evaluasi materi yang dipelajari sebelumnya. Dalam form akan ditampilkan daftar jawaban yang telah user pilih dalam form-form soal sebelumnya, kemudian akan diberikan informasi keterangan jika soal yang dipilih user dinyatakan Salah.
59 III.4 Perancangan FlowChart Berikut ini merupakan flowchart aplikasi, Terlihat pada gambar III.30 Gambar III.30 Flow Chart Aplikasi