BAB III ANALISIS, KONSEP, PERANCANGAN

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 Memilh ujian kenaikan level iqro'

«extends» Menjawab pertanyaan

«extends»

Memilih materi iqro'

«extends»

«extends»

«extends» Memilih iqro' 1-6

Memilih latihan

Menjawab pertanyaan

Actor1

«extends» Memilih about

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

Pengenalan huruf hijaiyah

Deskripsi singkat

Use case ini memungkinkan pengguna untuk mempelajari dasar dari huruf Hijaiyah.

Aktor

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

Latihan pengenalan huruf hijaiyah

Deskripsi singkat

Use case ini memungkinkan pengguna untuk memilih materi iqro’ yang diinginkan.

Aktor


Pra kondisi


Tindakan Utama

-

Tindakan alternatif

-

Pasca Kondisi

sistem menampilkan menu utama pengguna memilih menu materi iqro’ sistem menampilkan menu pemilihan iqro’ pengguna memilih iqro’ yang diinginkan

Menu iqro’ yang diinginkan

38

Tabel 3.3 use case memilh iqro’ 1 - 6 Nama Use case

Menjawab pertanyaan tebak suara

Deskripsi singkat

Use case ini memungkinkan pengguna untuk mempelajari materi.

Aktor


Pra kondisi


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

Pengenalan kosakata bahasa Arab

Deskripsi singkat

Use case ini memungkinkan pengguna menjawab latihan.

Aktor


Pra kondisi


39

Tabel 3.4 use case memilih latihan(lanjutan) Nama Use case Tindakan Utama

Tindakan alternatif Pasca kondisi

Pengenalan kosakata bahasa Arab -

sistem menampilkan menu utama pengguna memilih menu latihan sistem menampilkan soal-sool latihan pengguna menjawab pertanyaan

Pengguna akan menjawab pertanyaan pilihan ganda

Tabel 3.5 use case menjawab pertanyaan pilihan ganda Nama Use case

Latihan pengenalan kosakata bahasa Arab

Deskripsi singkat

Use case ini memungkinkan pengguna untuk menjawab pertanyaan berupa pilihan ganda.

Aktor


Pra kondisi


Tindakan Utama

Tindakan alternatif Pasca Kondisi

-

sistem menampilkan menu utama pengguna memilih menu sistem menampilkan menu latihan pengguna menjawab pertanyaan

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

Latihan menjawab pertanyaan tebak gambar

Deskripsi singkat

Use case ini memungkinkan pengguna untuk menjawab pertanyaan berupa pilihan ganda.

Aktor


Pra kondisi


Tindakan Utama

-

Tindakan alternatif

-

Pasca Kondisi

sistem menampilkan menu utama pengguna memilih menu ujian sistem menampilkan ujian pengguna menjawab latihan soal

Pengguna akan menjawab pertanyaan pilihan ganda dan mendapatkan laporan kenaikan level iqro’

Tabel 3.7 use case memilih about Nama Use case

Pengenalan angka dan nama hari bahasa Arab

Deskripsi singkat

Use case ini memungkinkan pengguna untuk bisa melihan pembuat aplikasi

Aktor


Pra kondisi


Tindakan Utama

Tindakan alternatif

-

sistem menampilkan menu utama pengguna memilih menu about sistem menampilkan about

41

Tabel 3.7 use case memilih about(lanjutan) Nama Use case

Pengenalan angka dan nama hari bahasa Arab

Deskripsi singkat

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





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

Salah

Benar Benar/Salah

Tampilan notifikasi jawab Salah

Tampilan notifikasi jawaban Benar

Menyimpan jawaban

Tidak Soal=10

Menampilkan menu utama

Menampilkan nilai

Memilih 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


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.

Pengguna aplikasi

Menu utama

Menu Pengenalan huruf 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' 2

Iqro' 1

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'

Memilih menu iqro'

Menu latihan

Menu jawaban

Menu utama

Loop Memilih menu latihan 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

Menu menu ujian

Pengguna aplikasi

Menu jawaban

Menu pertanyaan

Memilih menu ujian

Menu utama

Loop Menjawab pertannyaan 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

Masuk Materti iqro’ Pengenalan huruf hijaiyah

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’ Keluar

Home

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 keluar berfungsi untuk menutup aplikasi










4.

Tampilan antarmuka menu materi iqro’1-6 Out put Huruf huruf (Materi) Yang ada di iqro

Kembali

Next Latihan

Home 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 A Skor

Jawaban B

Jawaban C

A

A

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

A

A

A

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’

BAB III ANALISIS, KONSEP, PERANCANGAN

Recommend Documents