BAB III ANALISIS, KONSEP, PERANCANGAN 3.1 Analisis Pada tahap ini penulis akan menganalisa apa saja yang dibutuhkan oleh sistem dalam pembuatan perangkat lunak. Karena dengan analisis penulis dapat mengetahui apa saja yang dibutuhkan oleh sistem dalam pembuatan perangkat lunak. Dizaman sekarang orang-orang lebih senang menggunakan komputer untuk segala aktivitasnya bahkan anak-anak yang masih berusia sekitar 6 sampai 8 tahun keatas sudah bisa mengoperasikan komputer. Semakin banyaknya pengguna komputer menjadi alasan utama penulis berkeinginan membuat aplikasi pembelajaran baca iqro berbasis multimedia., karena dengan adanya aplikasi tersebut bisa digunakan untuk membantu pembelajaran baca iqro. Aplikasi tersebut dibuat menggunakan Adobe Flash CS3. Aplikasi yang dibuat adalah aplikasi yang bisa digunakan untuk menambah pembelajaran secara individu atau mandiri agar siswa mudah mengerti dalam pembelajaran. Aplikasi yang dibuat hendaknya menarik dan tidak membosankan agar siswa atau anak senang memakainya. Dalam pembuatan perangkat lunak ini penulis menganalisa komponen dari sistem yang dibangun atau dibuat diantaranya adalah sebagai berikut: 1. Perangkat lunak, yaitu aplikasi pembelajaran baca iqro berbasis multimedia 2. Perangkat keras, yaitu komputer 3. Manusia, yaitu pengguna (siswa) yang mengakses sistem 32
33 4. Prosedur yaitu langkah-langkah yang mendefinisikan tentang penggunaan sistem. Dari keseluruhan komponen sistem yang dibangun, maka didapat masukan, proses dan keluaran yaitu: 1. Pada proses pembuatan huruf iqro.gambar disimpan terlebih dahulu ke dalam direktori file penyimpanan gambar sebagai masukan kemudian dalam tahap proses, terjadi pengambilan gambar tersebut dari direktori berkas penyimpanannya dan langsung tereksekusi kemudian muncul pada layar sebagai keluaran. 2. Pada proses pengambilan suara. Suara berformat.wav dan.mp3 disimpan ke dalam direktori berkas penyimpanan suara sebagai masukan kemudian dalam tahap proses terjadi pengaturan sewaktu gambar atau teks keluar lalu suara tereksekusi kemudian munculah keluaran berupa bunyi. 3. Pada proses penilaian, pertanyaan dan jawaban dibuat kemudian diproses oleh sistem, pada proses ini penulis mempunyai sepuluh pertanyaan satu pertanyaan bernilai 1, siswa (user) menjawab pertanyaan yang ada kemudian terjadi pencocokan jawaban, jika jawaban benar maka nilai 1 jika salah maka nilai 0 dan jumlah seluruh nilai dari seluruh pertanyaan sebagai keluaran. 3.2 Konsep Aplikasi pembelajaran baca iqro berbasis multimedia ini merupakan aplikasi yang dibuat untuk digunakan oleh anak 6 tahun keatas atau anak yang sudah berumur membaca dan menulis. Aplikasi ini dirancang menggunakan metode pengembangan multimedia dilakukan melalui 6 tahap yaitu konsep, perancangan, pengumpulan material, pembuatan, pengujian dan distribusi. Aplikasi ini menggunakan teks untuk pembelajaran dan penjelasan, suara sebagai pembelajaran pelafalan, gambar sebagai pembelajaran, dan animasi supaya pengguna tidak bosan.
34 Berikut penjelasan secara rinci mengenai konsep dasar dari rancang bangun aplikasi pembelajaran baca iqro 1-6 berbasis multimedia, yaitu: 1. Aplikasi ini mempunyai menu yang bisa digunakan untuk memilih menu pengenalan huruf hijiayah, menu pemilihan iqro yaitu kita dapat memilih iqro berapa yang ingin kita pelajari, dan menu ujian dalam bentuk pilihan ganda. 2. Materi digunakan untuk mengenal dan mempelajari huruf-huruf hijayah, contoh-contoh huruf yang ada didalam iqro 1 sampai 6, disertakan tulisan agar pengguna mahir dalam pengucapan. 3. Pada menu latihan berisi pengujian yang digunakan untuk mengasah pembelajaran yang ada pada halaman materi, pada halaman materi penulis membuat sebuah tombol untuk masuk ke halaman latihan, dibagian halaman latihan penulis membuat pertanyaan pilihan ganda disetiap iqro. 4. Pada menu ujian berisi test dan hasil belajar, pertanyaan yang diajukan 20 pertanyaan yang berupa pilihan ganda. Tahap ini dilakukan untuk mengetahui bagaimana hasil belajar kita ditampilkan dalam bentuk nilai atau skor. Aplikasi ini juga dimaksudkan untuk menggantikan buku iqro menjadi iqro digital yang dapat mengurangi penggunaan kertas, dan bisa dijadikan pembelajaran secara mandiri tanda memanggil seorang guru mengaji. Aplikasi ini bisa digunakan pada komputer atau laptop sehingga tidak perlu mengakses internet. 3.3 Perancangan Dalam hal ini penulis akan melakukan perancangan aplikasi yang terdiri dari perancangan use case diagram, perancangan activity diagram, dan perancangan sequence diagram.
35 3.3.1 Perancangan Aplikasi Use case mendeskripsikan interaksi tipikal antara para pengguna sistem dengan sistem itu sendiri, dengan memberi sebuah narasi tentang bagaimana sistem tersebut digunakan. Use case diagram mengambarkan fungsionaliatas yang diharapkan dari suatu sistem, yang ditekankan adalah apa yang diperbuat sistem dan bukan bagaimana sebuah use case mempresentasikan sebuah interaksi antara aktor dengan sistem. Use case mengambarkan kata kerja seperti Login ke sistem, maintenance user dan sebagainya. Dalam bahasan use case, para pengguna disebut sebagai aktor. Seorang (aktor) merupakan sebuah peran penting dalam kaitannya dengan sistem untuk melakukan pekerjaan atau aktivitas tertentu. Use case diagram dapat sangat membantu bila kita sedang menyusun requirement sebuah sistem, mengkomunikasikan rancangan dengan klien, dan merancang test case untuk semua feature yang ada pada sistem. Pada aplikasi pembelajaran baca iqro dapat diketahui bahwa aktor tersebut adalah pengguna. Maka didapatkan suatu Use case diagram dan beberapa skenario yang memperlihatkan interaksi-interaksi Use case diagram dengan aktor Use case diagram dari apliaksi pembelajaran baca iqro dapat dilihat pada Gambar 3.1 berikut: Memelih pengenalan huruf hijaiyah «extends» Memilh ujian kenaikan level iqro' «extends» Menjawab pertanyaan Memilih materi iqro' «extends» Memilih iqro' 1-6 «extends» Memilih latihan «extends» Menjawab pertanyaan Actor1 Memilih about «extends» Melihat about Gambar 3.1 use case diagram Rancang bangun aplikasi pembelajaran baca iqro
36 Gambar use case diagram diatas mempresentasikan aplikasi pembelajaran baca iqro. Berikut penjelasan gambar : 1. Karikatur manusia mangambarkan seorang aktor 2. Gambar lingkaran oval merepresentasikan use case 3. Garis-garis merepresentasikan kardinaliatas. Pada gambar 3.1 dapat dijelaskan bahawa ada seorang aktor atau pengguna adalah Anak yang sudah berumur 6 tahun ke atas atau anak yang sudah bisa membaca dan menulis. Use case tersebut adalah use case memilih menu pengenalan huruf hijaiyah, use case memilih materi iqro, use case iqro 1, use case latihan, use case latihan, use case menjawab pertanyaan pilihan ganda, use case iqro 2, use case iqro 3, use case iqro 4, use case iqro 5, use case iqro 6, use case memilih ujian, use case menjawab pertanyaan, use case memilih about. Berikut adalah table yang berisi penjelasan dari masingmasing use case, yang dapat di lihat pada tabel 3.1, tabel 3.2, tabel 3.3, tabel 3.4, tabel 3.5, tabel 3.6, tabel 3.7 Tabel 3.1 use case pengenalan huruf hijaiyah Nama Use case Deskripsi singkat Aktor Pra kondisi Pengenalan huruf hijaiyah Use case ini memungkinkan pengguna untuk mempelajari dasar dari huruf Hijaiyah. Anak yang sudah berumur 6 tahun ke atas atau anak yang sudah bisa membaca dan menulis. Disarankan terinstal perangkat lunak Adobe Flash CS3 di PC atau laptop dan mempunyai perangkat lunak dari aplikasi pembelajaran tersebut. Tindakan Utama - Sistem menampilkan menu utama - Pengguna memilih menu Hijaiyah - Tampil pembelajaran huruf Hijaiyah
37 Tabel 3.1 use case pengenalan huruf hijaiyah (lanjutan) Nama Use case Pengenalan huruf hijaiyah Tindakan Alternatif - Pasca Kondisi Pengguna dapat mengetahui bentuk huruf hijaiyah dan bagaimana cara mengucapkannya Tabel 3.2 use case memilih materi iqro Nama Use case Deskripsi singkat Aktor Latihan pengenalan huruf hijaiyah Use case ini memungkinkan pengguna untuk memilih materi iqro yang diinginkan. Anak yang sudah berumur 6 tahun ke atas atau anak yang sudah bisa membaca dan menulis. Pra kondisi Disarankan terinstal perangkat lunak Adobe Flash CS3 di PC atau laptop dan mempunyai perangkat lunak dari aplikasi pembelajaran tersebut. Tindakan Utama - sistem menampilkan menu utama - pengguna memilih menu materi iqro - sistem menampilkan menu pemilihan iqro - pengguna memilih iqro yang diinginkan Tindakan alternatif - Pasca Kondisi Menu iqro yang diinginkan
38 Tabel 3.3 use case memilh iqro 1-6 Nama Use case Deskripsi singkat Aktor Pra kondisi Menjawab pertanyaan tebak suara Use case ini memungkinkan pengguna untuk mempelajari materi. Anak yang sudah berumur 6 tahun ke atas atau anak yang sudah bisa membaca dan menulis. Disarankan terinstal perangkat lunak Adobe Flash CS3 di PC atau laptop dan mempunyai perangkat lunak dari aplikasi pembelajaran tersebut. Tindakan Utama - sistem menampilkan menu utama - pengguna memilih iqro 1-6 - sistem menampilkan materi yang ada diiqro 1-6 - pengguna mempelajari materi Tindakan alternatif - Pasca Kondisi - Pengguna akan latihan menjawab soal pilihan ganda. - Pengguna akan ujian kenaikan level iqro Tabel 3.4 use case memilih latihan Nama Use case Deskripsi singkat Aktor Pra kondisi Pengenalan kosakata bahasa Arab Use case ini memungkinkan pengguna menjawab latihan. Anak yang sudah berumur 6 tahun ke atas atau anak yang sudah bisa membaca dan menulis. Disarankan terinstal perangkat lunak Adobe Flash CS3 di PC atau laptop dan mempunyai perangkat lunak dari aplikasi pembelajaran tersebut.
39 Tabel 3.4 use case memilih latihan(lanjutan) Nama Use case Pengenalan kosakata bahasa Arab Tindakan Utama - sistem menampilkan menu utama - pengguna memilih menu latihan - sistem menampilkan soal-sool latihan - pengguna menjawab pertanyaan Tindakan alternatif - Pasca kondisi Pengguna akan menjawab pertanyaan pilihan ganda Tabel 3.5 use case menjawab pertanyaan pilihan ganda Nama Use case Deskripsi singkat Aktor Pra kondisi Latihan pengenalan kosakata bahasa Arab Use case ini memungkinkan pengguna untuk menjawab pertanyaan berupa pilihan ganda. Anak yang sudah berumur 6 tahun ke atas atau anak yang sudah bisa membaca dan menulis. Disarankan terinstal perangkat lunak Adobe Flash CS3 di PC atau laptop dan mempunyai perangkat lunak dari aplikasi pembelajaran tersebut. Tindakan Utama - sistem menampilkan menu utama - pengguna memilih menu - sistem menampilkan menu latihan - pengguna menjawab pertanyaan Tindakan alternatif - Pasca Kondisi Pengguna akan menjawab pertanyaan dari menu latihan berupa pilihan ganda dan mengetahui nilai yang didapat oleh pengguna
40 Tabel 3.6 use case memilih ujian kenaikan level iqro 1-6 Nama Use case Deskripsi singkat Aktor Pra kondisi Latihan menjawab pertanyaan tebak gambar Use case ini memungkinkan pengguna untuk menjawab pertanyaan berupa pilihan ganda. Anak yang sudah berumur 6 tahun ke atas atau anak yang sudah bisa membaca dan menulis. Disarankan terinstal perangkat lunak Adobe Flash CS3 di PC atau laptop dan mempunyai perangkat lunak dari aplikasi pembelajaran tersebut. Tindakan Utama - sistem menampilkan menu utama - pengguna memilih menu ujian - sistem menampilkan ujian - pengguna menjawab latihan soal Tindakan alternatif - Pasca Kondisi Pengguna akan menjawab pertanyaan pilihan ganda dan mendapatkan laporan kenaikan level iqro Tabel 3.7 use case memilih about Nama Use case Deskripsi singkat Aktor Pra kondisi Pengenalan angka dan nama hari bahasa Arab Use case ini memungkinkan pengguna untuk bisa melihan pembuat aplikasi Anak yang sudah berumur 6 tahun ke atas atau anak yang sudah bisa membaca dan menulis. Disarankan terinstal perangkat lunak Adobe Flash CS3 di PC atau laptop dan mempunyai perangkat lunak dari aplikasi pembelajaran tersebut. Tindakan Utama - sistem menampilkan menu utama - pengguna memilih menu about - sistem menampilkan about Tindakan alternatif -
41 Tabel 3.7 use case memilih about(lanjutan) Nama Use case Deskripsi singkat Pengenalan angka dan nama hari bahasa Arab Use case ini memungkinkan pengguna untuk bisa melihan pembuat aplikasi 3.3.2 Perancangan activity diagram Activity diagram adalah teknik untuk menggambarkan logika procedural, proses bisnis, dan jalur kerja. Dalam beberapa hal, diagram ini memainkan peran mirip sebuah diagram alir, tetapi perbedaan prinsip antar diagram ini dan notasi diagram alir adalah diagram ini mendukung behavior parallel. (Fowler, 2005) Activity diagrams menggambarkan berbagai alir aktivitas dalam sistem yang sedang dirancang, bagaimana masing-masing alir berawal, decision yang mungkin terjadi, dan bagaimana mereka berakhir. 1. Perancangan Activity Diagram Pengenalan Huruf Hijaiyah Pengguna Sistem Memilih pengenalan huruf hijaiyah Menampilkan halaman huruf hijaiyah Memilih salah satu huruf hijaiyah Menampilkan suara sesuai huruf yang dipilih Gambar 3.2 Activity diagram pengenalan huruf hijaiyah
42 Pada gambar 3.2 diatas menjelaskan bahwa aktifitas terjadi setelah pengguna menjalankan aplikasi setelah itu memilih pengenalan huruf hijaiyah, setelah itu sistem menampilkan huruf hijayah, lalu pengguna memilih salalah satu huruf hijah, dan sistem mengeluarkan suara huruf yang dipilih 2. Perancangan Activity Memilih materi iqro Pengguna Sistem Memilih materi iqro' Menampilkan menu iqro' 1 Menampilkan menu iqro' 2 Menampilkan menu iqro' 3 Menampilkan menu iqro' 4 Menampilkan menu iqro' 5 Menampilkan menu iqro' 6 Memilih salah satu menu iqro' Menampilkan menu yang dipilih Gambar 3.3 Actifity diagram Memilih materi iqro Pada gambar 3.3 diatas menjelaskan bahwa aktifitas terjadi setelah pengguna memilih menu materi iqro, lalu sistem menampilkan pilhan menu materi iqro 1 sampai 6, setelah pengguna memilih salah satu menu materi iqro sistem menampilkan menu yang telah dipilih.
43 3. Perancangan Activity Diagram Memilih Iqro Pengguna Sistem Menampilkan menu materi iqro' Memilih iqro Menampilka halaman iqro' Memilih lembar selanjutya Memilih lembar sebelumnya Memilih latihan Menampilkan yang dipilih Gambar 3.4 Actifity diagram Memilih Iqro Pada gambar 3.4 diatas menjelaskan bahwa aktifitas terjadi setelah sistem manampilkan menu materi iqro kemudian pengguna memilih dapat memilih lembar selanjutnya, memilih lembar sebelumnya atau memilih menu latihan kemudian sistem akan menampilkan menu yang dipilih oleh pengguna.
44 4. Perancangan Activity Diagram Memilih latihan Pengguna Sistem Memilih Latihan Menampilkan halaman latihan Menampilkan soal Menjawab latihan Mengecek jawaban Benar Benar/Salah Salah Tampilan notifikasi jawaban Benar Tampilan notifikasi jawab Salah Menyimpan jawaban Soal=10 Tidak Menampilkan menu utama Menampilkan nilai Memilih menu utama Menampilkan menu utama Gambar 3.5 Activity diagram memilih latihan Pada gambar 3.5 diatas menjelaskan bahwa aktifitas terjadi setelah pengguna memilih menu latihan, lalu sistem menampilkan pertanyaan pilihan ganda, setelah itu pengguna menjawab pertanyaan dari no 1 sampai 10,bila pengguna menjawab salah akan muncul notifikasi jawaban salah dan bila pengguna menjawab benar mucuk notifikasi jawaban benar setelah soal sama dengan 10 sistem menampilkan nilai atau skor yang didapatkan oleh pengguna dan
45 menampilkan menu kembali kemenu utama, lalu pengguna memilih menu utama, dan sistem menampilkan menu utama 5. Perancangan Activity Diagram Memilih ujian Pengguna Sistem Memilih Ujian Menampilkan halaman ujian Random soal Menjawab ujian Menampilkan soal Mengecek jawaban Menyimpan jawaban Iya Iya/tidak Tidak Tampilan notifikasi belum menjawab Soal=20 Tidak Ya Jawaban Tidak benar 16 Notifikasi mau ujian lagi Ya Notifikasi lulus Tidak Ya/tidak Ya Gambar 3.6 Actifity diagram Memilih ujian Pada gambar 3.6 diatas menjelaskan bahwa aktifitas terjadi setelah pengguna memilih menu ujian, lalu sistem menampilkan
46 halaman ujian setelah itu sistem mengacak soal, setelah itu sistem menampilkan soal berupa pertanyaan pilihan ganda 1-20 dan pengguna menjawab soal ujian tersebut, setelah itu sistem mengecek jawaban pengguna bila jawaban belum diisi tampil notifikasi belum menjawab jika jawaba sudah ada sistem menyimpan jawaban tersebut dan menampilkan soal selanjutnya, soal berjumlah 20, jika jawab benar lebih besar atau sama dengan 16 maka pengguna akan mendapakan notifikasi lulus jika tidak sistem menampilkan notifikasi tidak lulus dan memberi pilihan untuk ujian lagi atau tidak jika iya sistem akan menampilkan halaman soal dari awal. 6. Perancangan Activity Diagram Menjawab Pertanyaan Pengguna Sistem Menampilkan pertanyaan Memilih jawaban A Memilih jawaban B Memilih jawaban C Menyiapkan jawaban Menampilkan hasil Gambar 3.7 Actifity diagram Menjawab pertanyaan Pada gambar 3.7 diatas menjelaskan bahwa aktifitas terjadi setelah sistem manampilkan menu pertanyaan berupa pilihan ganda kemudian pengguna memilih jawaban A, jawaban B, atau jawaban C.
47 Setelah itu sistem akan mengoreksi hasil jawaban pengguna, dan sistem menampilkan hasil yang didapat oleh pengguna. 7. Perancangan Activity Diagram Menu About Pengguna Sistem Memilih About Menampilkan halaman about Menampilkan kemenu utama Memilih menu utama Menampilkan menu utama Gambar 3.8 Activity diagram Menampilkan About Pada gambar 3.8 diatas menjelaskan bahwa aktifitas terjadi setelah pengguna memilih menu about, lalu sistem menampilkan halaman about, setelah itu terdapat pula tombol kembali kemenu utama yang berfungsi untuk kembali kemenu utama, setelah pengguna memilih menu utama, sistem menampilkan menu utama
48 3.3.3 Perancangan sequence diagram Sequence diagram digunakan untuk mengambarkan perilaku pada sebuah skenario. Diagram ini menunjukan sejumlah contoh objek dan message (pesan) yang diletakan diantara obyek-obyek ini di dalam use case. Sequence diagram menggambarkan interaksi antar objek di dalam dan disekitar sistem (termasuk pengguna, display, dan sebagainya) berupa pesan yang digambarkan terhadap waktu. Sequence diagram terdiri atas dimensi waktu dan objek-objek yang terkait. Sequence diagram biasa digunakan untuk menggambarkan skenario atau rangkaian langkah-langkah yang dilakukan sebagai respons dari sebuah event untuk menghasilkan keluaran tertentu.dari bentuk use case yang telah digambarkan diatas hanya satu aktor yang akan dibuat sequence diagram sesuai dengan use case yang telah dibuat sebelumnya. Menu utama Menu Pengenalan huruf Pengguna aplikasi hidayah Huruf - huruf hijayah Menjalankan aplikasi Memilih pengenalan huruf hujayah Memilih huruf hijayah Gambar 3.9 Sequence diagram Pengenalan huruf hijaiyah Pada sequence diagram pengenalan huruf hijaiyah dapat diketahui bahwa kegiatan yang pertama kali terjadi adalah pengguna membuka aplikasi lalu memilih menu pengenalan huruf hijaiyah, di halaman pengenalan huruf hijaiyah pengguna bisa memilih huruf hijayah dari alif sampai ya
49 Pengguna aplikasi Menu iqro' Iqro' 1 Iqro' 2 Iqro' 3 Iqro' 4 Iqro' 5 Iqro' 6 Memilih menu iqro' Memilih iqro' 1 Memilih Iqro' 2 Memilih Iqro' 3 Memilih iqro' 4 Memilih iqro' 5 Memilih iqro' 6 Gambar 3.10 Sequence diagram Memilih iqro Pada sequence memilih iqro kegiatan yang pertama terjadi adalah pengguna dapat memilih menu untuk mendapatkan materi yang ada di iqro 1 sampai iqro 6 Pengguna aplikasi Menu iqro' Menu latihan Menu jawaban Menu utama Memilih menu iqro' Memilih menu latihan Loop Memilih jawaban Soal = 5 Memilih kembali kemenu utama Gambar 3.11 Sequence diagram Latihan menu iqro Pada sequence diagram latihan menu iqro pengguana sudah memilih satah satu dari menu iqro, kemudian memilih menu latihan, lalu pengguna mejawab 5 soal pilihan ganda, setelah selesai pengguna dapat melihat nilai lalu kembali kemunu utama. Berikut sequence memilih menu ujian
50 Pengguna aplikasi Menu menu ujian Menu pertanyaan Menu jawaban Menu utama Memilih menu ujian Menjawab pertannyaan Loop Memilih jawaban Soal = 10 Memilih kembali kemenu utama Gambar 3.12 Sequence diagram memilih menu ujian Pada sequence diagram memilih menu ujian pengguna sudah memilih menu ujian, kemudian pengguna menjawab soal dari no 1 sampai no 10, setelah selesai pengguna bisa melihat nilai atau skor yang mereka dapat dan kembali kemenu utama. Berikut sequence ujian Pengguna aplikasi Menu latihan Menu pertanyaan Jawaban A Jawaban B Jawaban C Memilih menu latihan Menjawab pertanyaan Jawaban A Jawaban B Jawaban C Gambar 3.13 Sequence diagram menu latihan Pada sequence diagram latihan kegiatan yang pertama terjadi adalah pengguna memilih menu latihan, setelah tampil menu pertanyaan pengguna menjawab soal dengan cara memilih jawaban A, jawaban B, atau jawaban C
51 3.3.4 Perancangan antar muka Pada bagian desain antarmuka (interface desain) ini akan digambarkan mengenai bagian-bagian yang akan ditampilkan pada aplikasi pembelajaran Baca iqro berbasis multimedia. 1. Tampilan antar muka menu utama aplikasi Keluar Pengenalan huruf hijaiyah Masuk Materti iqro Video Gambar 3.14 perancangan antarmuka Menu Utama aplikasi Pada tampilan aplikasi ini terdapat 4 buah tombol yaitu: Tombol Pengenalan huruf hijaiyah berfungsi untuk masuk kedalam halaman huruf-hurf hijaiyah Tombol masuk materi iqro berfungsi untuk masuk kehalaman menu pemilihan materi materi iqro Tombol Video berfungsi untuk masuk kedalam halaman video Tombol keluar berfungsi untuk keluar dari aplikasi
52 2. Tampilan antarmuka Pengenalan huruf Hijaiyah: ر ذ د خ ح ج ث ت ب ا ر ذ د خ ح ج ث ت ب ا Out put Menu Utama Gambar 3.15 Perancangan antarmuka Huruh hijaiyah Pada tampilan berikut ini terdapat huruf hijaiyah berupa tombol. Bila pengguna memilih salah satu huruf hijaiyah maka akan keluar out put berupa suara dan tulisan yang diletakkann di pojok kiri bawah, dan Tombol menu utama dipojok kanan yang berfungsi untuk kembali kemenu utama 3. Tampilan antarmuka Menu Memilih Iqro Home Keluar Iqro 1 Iqro 4 Iqro 2 Iqro 5 Iqro 3 Iqro 6 Gambar 3.16 Perancangan antarmuka Menu Memilih Iqro Pada tampilan Menu memilih iqro terdapat 8 buah tombol. Beriku penjelasan dan fungsi dari tombol tersebut. Tombol Home berfungsi untuk kembali kemenu utama Tombol Iqro 1 berfungsi untuk masuk kedalam materi iqro 1
53 Tombol Iqro 2 berfungsi untuk masuk kedalam materi iqro 2 Tombol Iqro 3 berfungsi untuk masuk kedalam materi iqro 3 Tombol keluar berfungsi untuk menutup aplikasi Tombol Iqro 4 berfungsi untuk masuk kedalam materi iqro 4 Tombol Iqro 5 berfungsi untuk masuk kedalam materi iqro 5 Tombol Iqro 6 berfungsi untuk masuk kedalam materi iqro 6 4. Tampilan antarmuka menu materi iqro 1-6 Out put Huruf huruf (Materi) Yang ada di iqro Kembali Next Home Latihan Ujian Gambar 3.17 Perancangan antar menu materi iqro Pada tampilan materi iqro ini sebuah buku yang terdapat ditengah halaman dan didalamnya terdapat materi materi iqro yang menjadi sebuah tombol,bila tombol tersebut ditekan maka akan keluar
54 out put berupa suara dan tulisan latin yang diletakkan diatas buku, Dimenu ini juga terdapat bermacam2 tombol. Berikut penjelasaanya: Tombol next berfungsi untuk lanjut kemateri beriku, Tombol kembali berfungsi untuk kembali kemateri sebelumnya, Tombol latihan berfungsi untuk masuk kedalam halaman latihan Tombol ujian berfungsi untuk masuk kedalam halaman ujian Tombol Hame berfungsi untuk kembali kemenu utama 5. Tampilan antarmuka Latihan Judul Soal Jawaban A Jawaban B Jawaban C Skor Materi Gambar 3.18 Perancangan antarmuka menjawab Latihan Pada tampilan halaman latihan ini terdapat soal yang terdiri dari 10 soal, pengguna menjawab pertanyaan yang berupa pilihan ganda, jawaban tersebut berupa tombol yaitu jawaban A, jawaban B, dan jawaban C. Setelah menjawab pengguna dapat melihat skor yang didapat. Di halaman ini pula terdapat satu tombol yaitu tombol materi yang berfungsi untuk kembali kehalaman materi yang telah dipelajari
55 6. Perancangan antar muka menjawab ujian Judul Soal Jawaban A Jawaban B Jawaban C Out put jawaban Lanjut soal Gambar 3.19 Perancangan antar muka menjawab ujian Pada tampilan halaman ujian ini terdapat soal yang terdiri dari 25 soal berupa pilihan ganda, tetapi hanya 20 soal yang harus dijawab oleh pengguna secara acak (random). Pengguna menjawab soal dengan cara memilih Jawaban A,Jawaban B,atau Jawaban C lalu muncul out put jawaban yang telah dipilih dipojok bawah kiri, jawaban yang telah dipilih bias diganti sebelum pengguna memilih menu lanjut soal, menu lanjut soal berfungsi untuk maju kesoal berikut,dan berfungsi juga untuk mengacak (random) soal supaya soal yang keluar selalu berbeda-beda.
56 7. Perancangan antar muka pemberitahuan lulus ujian Pemberi tahuan lulus ujian Out put nilai ujian yang didapat Halaman Utama Kembali kemateri iqro Materi iqro selanjutnya Gambar 3.20 Perancangan antar muka lulus ujian Pada tampilan halaman permberitahuan lulus ujian ini terdapat pemberi tahuan bahwa pengguna telah lulus ujian dan mendapatkan nilai lebih tinggi atau sama dengan 8, pada halaman ini juga terdapat beberapa tombul,berikut ini penjelasan dan fungsi dari tombol-tombolnya: Tombol Halaman Utama berfungsi untuk kembali kehalaman utama Tombol kembali kemateri iqro berfungsi untuk kembali kehalama materi yang sudah dipelajari Tombol materi iqro selanjutnya berfungsi untuk masuk kedalam halaman materi iqro yang levelnya lebih tinggi
57 8. Tampilan antarmuka tidak lulus ujian Pemberi tahuan Tidak lulus ujian Out put nilai ujian yang didapat Halaman Utama Kembali kemateri iqro Gambar 3.21 Perancangan antar mukan tidak lulus ujian Pada tampilan halaman permberitahuan tidak lulus ujian ini terdapat pemberi tahuan bahwa pengguna belum lulus ujian dan mendapatkan nilai lebih tinggi atau sama dengan 7,5, pada halaman ini juga terdapat beberapa tombul,berikut ini penjelasan dan fungsi dari tombol-tombolnya: Tombol halaman utama berfungsi untuk kembali kehalaman utama Tombol kembali kemateri iqro berfungsi untuk kembali mengulang pelajaran materi iqro