BAB IV IMPLEMENTASI DAN ANALISA

BAB IV IMPLEMENTASI DAN ANALISA 4.1 User Interface 4.1.1 Antar Muka Halaman Awal ( Splash Screen ) Tampilan pembuka ketika pertama aplikasi dibuka, Terdapat Tulisan Hijaiyah Learning. Jika ingin ke halaman berikutnya, usap layar, maka akan menuju ke halaman berikutmya, yaitu menuju halaman menu awal. Seperti pada gambar 4.1 berikut ini : Gambar 4.1 Halaman Awal Aplikasi (Splash Screen) Untuk bisa menghasilkan tampilan seperti diatas, adalah bisa dijelaskan oleh Gambar 4.2 sebagai berikut : 1. Create left button 2. lalu pada main > klik different room. 3. Setelah itu klik maka akan muncul tampilan Different Room seperti dibawah ini 4. Kemudian pada room_splashs 5. klik kearah room7_splash. 6. lalu klik OK. 39

40 1 3 2 5 6 Gambar 4.2 Proses Pembuatan halaman Splash Screen 4.1.2 Halaman Awal Tampilan halaman awal aplikasi ini ketika dari splash screen tadi adalah seperti gambar 4.3 berikut ini : Gambar 4.3 Halaman Awal Aplikasi

41 Untuk membuat halaman seperti diatas, tidak menggunakan script, hanya menggunakan gambar / object yang ditempel pada background. Ketika tombol mulai kita klik maka akan menuju ke interface menu. Untuk tombol Mulai caranya sama seperti diatas yaitu menggunakan different room seperti dibawah ini : 1. New room diisi room_menu 2 2. Sebelumnya pilih room_menu2 3. Lalu klik OK 1 2 3 Gambar 4.4 Proses Pembuatan Halaman awal aplikasi

42 4.1.3 Antar Muka Halaman Menu Halaman menu adalah halaman pilihan 3 menu yang ada dalam hijaiyah learning. Dimana menu yang terdiri menu cara tulis,latihan dan keluar. Dan ketika menu cara tulis diklik akan masuk ke cara penulisan huruf hijaiyah. Ketika menu latihan diklik akan masuk ke latihan penulisan huruf hijaiyah. Lalu keluar adalah untuk keluar dari sistem. Seperti yang ditunjukan Gambar 4.4 berikut ini. Gambar 4.5 Halaman Menu Hijaiyah Learning Halaman menu diatas membuatnya menggunakan object/gambar. Dan terdapat tombol back dan home. Dimana tombol back akan kembali ke halaman sebelumnya dan home akan selalu kembali ke menu awal. Untuk membuat menu back dan home menggunakan different room sebagai berikut : 1. New room diisi room_splash 2. Sebelumnya pilih room_splash 3. Lalu klik OK

43 1 2 3 Gambar 4.6 Proses Pembuatan Menu Hijaiyah Learning 4.1.4 Antar Muka Halaman About Halaman About adalah halaman dimana tentang aplikasi ini dibuat. Seperti yang ditunjukan oleh Gambar 4.7 berikut ini. Gambar 4.7 Halaman About

44 Halaman About merupakan halaman dari halaman awal aplikasi, cara membuat halaman about tersebut bisa dilihat pada Gambar 4.8 sebagai berikut : 1. Klik Add Event > Left Button > Lalu pada main1 klik Different Room 2. Pastikan new room sudah terisi room tentang 3. Lalu Klik OK 2 3 4 1 5 Gambar 4.8 Proses Pembuatan Halaman About

45 4.1.5 Antar Muka Halaman Menu Cara Tulis Pada halaman menu cara tulis ini terdapat cara menulis huruf hijaiyah sebanyak 30 buah. Dimana pada saat kita klik salah satu huruf tersebut maka akan muncul huruf hijaiyah dan bagaimana cara penulisannya. Seperti pada Gambar 4.9 dan 4.10 berikut ini : Gambar 4.9 Halaman Menu Cara Tulis Gambar 4.10 Halaman Cara Tulis huruf Halaman diatas pada Gambar 4.9 tadi merupakan Halaman 30 Huruf, yang mana nanti ketika diklik salah satu huruf akan muncul huruf Hijaiyah beserta cara penulisannya yang tertera pada Gambar 410. Halaman Tersebut bisa dihasilkan dari cara pada Gambar 4.11 berikut :

46 1. Klik Add Event > Left Button > Lalu pada main1 klik Different Room 2. Pastikan new room sudah terisi room_6 3. Lalu Klik OK 2 3 4 1 5 Gambar 4.11 Proses Pembuatan Halaman Cara Tulis 4.1.6 Antar Muka Halaman Menu Latihan Halaman Menu Latihan adalah halaman pilihan 4 menu yang ada dalam hijaiyah learning. Dimana menu yang terdiri menu huruf dasar, huruf sambung 2, huruf sambung 3, dan Huruf Sambung 4. Seperti pada Gambar 3.12 berikut ini :

47 Gambar 4.12 Halaman Menu Latihan Untuk Bisa menuju ke halaman seperti diatas menggunakan cara berikut dan hasilnya seperti tertera pada Gambar 4.13 sebagai berikut : 1. Klik Add Event > Left Button > Lalu pada main1 klik Different Room 2. Pastikan new room sudah terisi room_latihan 3. Lalu Klik OK 2 3 4 1 5 Gambar 4.13 Proses Pembuatan Halaman Latihan

48 4.1.6.1 Huruf Dasar Halaman Huruf Dasar adalah halaman latihan menulis huruf dasar hijaiyah / huruf belum sambung. Seperti tertera pada Gambar 4.14 berikut ini : Gambar 4.14 Halaman menu Huruf Dasar Dimana penggunaan dari latihan tersebut adalah menarik garis sesuai yang ditentukan oleh titik-titik tersebut agar membentuk suatu Huruf Hijaiyah. Lalu kita klik tombol cek, maka akan keluar jawaban benar / salah.seperti pada Gambar 4.15 dan 4.16 berikut ini : Gambar 4.15 Halaman menu Huruf Dasar latihan 1

49 Gambar 4.16 Halaman menu cek Huruf Dasar latihan 1 Dibawah ini menu lanjutan seperti menu yang telah dijelaskan diatas. Lalu kita klik tombol cek, maka akan keluar jawaban benar / salah.seperti pada Gambar 4.17 dan 4.18 berikut ini : Gambar 4.17 Halaman menu Huruf Dasar latihan 2 Gambar 4.18 Halaman menu cek Huruf Dasar latihan 2

50 Dibawah ini menu lanjutan seperti menu yang telah dijelaskan diatas. Lalu kita klik tombol cek, maka akan keluar jawaban benar / salah.seperti pada Gambar 4.19 dan 4.20 berikut ini : Gambar 4.19 Halaman menu Huruf Dasar latihan 3 Gambar 4.20 Halaman menu cek Huruf Dasar latihan 3 Dibawah ini menu lanjutan seperti menu yang telah dijelaskan diatas. Lalu kita klik tombol cek, maka akan keluar jawaban benar / salah.seperti pada Gambar 4.21 dan 4.22 berikut ini :

51 Gambar 4.21 Halaman menu Huruf Dasar latihan 4 Gambar 4.22 Halaman menu cek Huruf Dasar latihan 4 Dibawah ini menu lanjutan seperti menu yang telah dijelaskan diatas. Lalu kita klik tombol cek, maka akan keluar jawaban benar / salah.seperti pada Gambar 4.23 dan 4.24 berikut ini : Gambar 4.23 Halaman menu Huruf Dasar latihan 5

52 Gambar 4.24 Halaman menu cek Huruf Dasar latihan 5 Untuk bisa membuat gestures / paint seperti gambar diatas. Berikut cara berikut source code nya : 1. instance_create(mouse_x,mouse_y,obj_pen) Penjelasan script nomor 1 : script instance_create berfungsi untuk membuat lengkungan gestures di lengkapi dengan mouse_x, mouse_y yang merupakan variable ketika mouse diklik agar bisa ke segala arah. Dan Obj_pen merupakan objek control agar bisa menuju ke script pada room lain

53 2. alarm[0]=1 Penjelasan script nomor 2 : script alarm[0]=1 berfungsi untuk memberikan keterangan setelah objek berhasil dieksekusi. 3. x=mouse_x y=mouse_y Penjelasan script nomor 3: script diatas merupakan variable mouse yang digunakan pada Penjelasan script nomor 1. Dimana script tersebut berguna dalam bergeraknya mouse 4. draw_line(x,y,xstart,ystart) Penjelasan script nomor 4:script diatas adalah sebagai event enter code yang berfungsi untuk menggambar pada background. 4.1.6.2 Huruf Sambung 2 Huruf Sambung 2 merupakan huruf bersambung sebanyak 2 huruf seperti yang tertera pada Gambar 4.25 dan 4.26 berikut : Gambar 4.25 Halaman menu Huruf Sambung 2 latihan 1

54 Gambar 4.26 Halaman menu cek Huruf Sambung 2 latihan 1 Dibawah ini menu lanjutan seperti menu yang telah dijelaskan diatas. Lalu kita klik tombol cek, maka akan keluar jawaban benar / salah.seperti pada Gambar 4.27 dan 4.28 berikut ini : Gambar 4.27 Halaman menu Huruf Sambung 2 latihan 2 Gambar 4.28 Halaman menu cek Huruf Sambung 2 latihan 2

55 Dibawah ini menu lanjutan seperti menu yang telah dijelaskan diatas. Lalu kita klik tombol cek, maka akan keluar jawaban benar / salah.seperti pada Gambar 4.29 dan 4.30 berikut ini : Gambar 4.29 Halaman menu Huruf Sambung 2 latihan 4 Gambar 4.30 Halaman menu cek Huruf Sambung 2 latihan 4 Dibawah ini menu lanjutan seperti menu yang telah dijelaskan diatas. Lalu kita klik tombol cek, maka akan keluar jawaban benar / salah.seperti pada Gambar 4.31 dan 4.32 berikut ini :

56 Gambar 4.31 Halaman menu Huruf Sambung 2 latihan 5 Gambar 4.32 Halaman menu cek Huruf Sambung 2 latihan 5 Untuk bisa membuat gestures / paint seperti gambar diatas. Berikut cara berikut source code nya : 1. instance_create(mouse_x,mouse_y,obj_pen) Penjelasan script nomor 1 : script instance_create berfungsi untuk membuat lengkungan gestures di lengkapi dengan mouse_x, mouse_y yang merupakan variable ketika mouse diklik agar bisa ke segala arah.

57 Dan Obj_pen merupakan objek control agar bisa menuju ke script pada room lain 2. alarm[0]=1 Penjelasan script nomor 2 : script alarm[0]=1 berfungsi untuk memberikan keterangan setelah objek berhasil dieksekusi. 3. x=mouse_x y=mouse_y Penjelasan script nomor 3: script diatas merupakan variable mouse yang digunakan pada Penjelasan script nomor 1. Dimana script tersebut berguna dalam bergeraknya mouse 4. draw_line(x,y,xstart,ystart) Penjelasan script nomor 4:script diatas adalah sebagai event enter code yang berfungsi untuk menggambar pada background. 4.1.6.3 Huruf Sambung 3 Huruf Sambung 3 merupakan huruf bersambung sebanyak 3 huruf seperti yang tertera pada Gambar 4.33 dan 4.35 berikut :

58 Gambar 4.33 Halaman menu Huruf Sambung 3 latihan 1 Gambar 4.34 Halaman menu cek Huruf Sambung 3 latihan 1 Dibawah ini menu lanjutan seperti menu yang telah dijelaskan diatas. Lalu kita klik tombol cek, maka akan keluar jawaban benar / salah.seperti pada Gambar 4.35 dan 4.36 berikut ini :

59 Gambar 4.35 Halaman menu Huruf Sambung 3 latihan 2 Gambar 4.36 Halaman menu Huruf Sambung 3 latihan 2 Dibawah ini menu lanjutan seperti menu yang telah dijelaskan diatas. Lalu kita klik tombol cek, maka akan keluar jawaban benar / salah.seperti pada Gambar 4.37 dan 4.38 berikut ini :

60 Gambar 4.37 Halaman menu Huruf Sambung 3 latihan 3 Gambar 4.38 Halaman menu cek Huruf Sambung 3 latihan 3 Dibawah ini menu lanjutan seperti menu yang telah dijelaskan diatas. Lalu kita klik tombol cek, maka akan keluar jawaban benar / salah.seperti pada Gambar 4.39 dan 4.40 berikut ini :

61 Gambar 4.39 Halaman menu Huruf Sambung 3 latihan 4 Gambar 4.40 Halaman menu cek Huruf Sambung 3 latihan 4 Dibawah ini menu lanjutan seperti menu yang telah dijelaskan diatas. Lalu kita klik tombol cek, maka akan keluar jawaban benar / salah.seperti pada Gambar 4.41 dan 4.42 berikut ini :

62 Gambar 4.41 Halaman menu Huruf Sambung 3 latihan 5 Gambar 4.42 Halaman menu cek Huruf Sambung 3 latihan 5 Untuk bia membuat gestures / paint seperti gambar diatas. Berikut cara berikut source code nya : 1. instance_create(mouse_x,mouse_y,obj_pen) Penjelasan script nomor 1 : script instance_create berfungsi untuk membuat lengkungan gestures di lengkapi dengan mouse_x, mouse_y yang merupakan variable ketika mouse diklik agar bisa ke segala arah.

63 Dan Obj_pen merupakan objek control agar bisa menuju ke script pada room lain 2. alarm[0]=1 Penjelasan script nomor 2 : script alarm[0]=1 berfungsi untuk memberikan keterangan setelah objek berhasil dieksekusi. 3. x=mouse_x y=mouse_y Penjelasan script nomor 3: script diatas merupakan variable mouse yang digunakan pada Penjelasan script nomor 1. Dimana script tersebut berguna dalam bergeraknya mouse 4. draw_line(x,y,xstart,ystart) Penjelasan script nomor 4:script diatas adalah sebagai event enter code yang berfungsi untuk menggambar pada background. 4.1.6.4 Huruf Sambung 4 Huruf Sambung 4 merupakan huruf bersambung sebanyak 4 huruf seperti yang tertera pada Gambar 4.43 dan 4.44 berikut :

64 Gambar 4.43 Halaman menu Huruf Sambung 4 latihan 1 Gambar 4.44 Halaman menu cek Huruf Sambung 4 latihan 1 Dibawah ini menu lanjutan seperti menu yang telah dijelaskan diatas. Lalu kita klik tombol cek, maka akan keluar jawaban benar / salah.seperti pada Gambar 4.45 dan 4.46 berikut ini :

65 Gambar 4.45 Halaman menu cek Huruf Sambung 4 latihan 2 Gambar 4.46 Halaman menu cek Huruf Sambung 4 latihan 2 Untuk bia membuat gestures / paint seperti gambar diatas. Berikut cara berikut source code nya :

66 1. instance_create(mouse_x,mouse_y,obj_pen) Penjelasan script nomor 1 : script instance_create berfungsi untuk membuat lengkungan gestures di lengkapi dengan mouse_x, mouse_y yang merupakan variable ketika mouse diklik agar bisa ke segala arah. Dan Obj_pen merupakan objek control agar bisa menuju ke script pada room lain 2. alarm[0]=1 Penjelasan script nomor 2 : script alarm[0]=1 berfungsi untuk memberikan keterangan setelah objek berhasil dieksekusi. 3. x=mouse_x y=mouse_y Penjelasan script nomor 3: script diatas merupakan variable mouse yang digunakan pada Penjelasan script nomor 1. Dimana script tersebut berguna dalam bergeraknya mouse 4. draw_line(x,y,xstart,ystart) Penjelasan script nomor 4:script diatas adalah sebagai event enter code yang berfungsi untuk menggambar pada background.

67 4.2 Hasil Pengujian Berikut ini adalah hasil pengujian dari rncana pengujian dengan menggunakan metode BlackBox. 4.2.1 Pengujian tombol menu Pengujian tombol menu merupakan pengujian fungsionalitas dengan cara memilih menu Cara Tulis. Hasil pengujian dapat dilihat pada tabel 4.1 Tabel 4.1 Pengujian menú Cara Tulis Kasus dan Hasil Uji (data Normal) Data Masukan Yang diharapkan Pengamatan Kesimpulan Pilih menu Cara Tulis Menampilkan huruf hijaiyah pada menu Huruf Hijaiyah ditampilkan [ ] ditolak 4.2.2 Pengujian menu latihan Huruf Dasar Pengujian menu latihan Huruf Dasar merupakan pengujian fungsionalitas dengan cara memilih menu Huruf Dasar lalu memilih soal dari 1-5 kemudian akan menampilkan soal tersebut. Hasil pengujian dapat dilihat pada Tabel 4.2 Tabel 4.2 Pengujian menú latihan Huruf Dasar Kasus dan Hasil Uji (data Normal) Data Masukan Yang diharapkan Pengamatan Kesimpulan Pilih menu tampilkan latihan Huruf Dasar Menampilkan latihan Huruf Dasar Huruf Dasar ditampilkan [ ] ditolak 4.2.3 Pengujian menú latihan Huruf Sambung 2 Pengujian menu latihan Huruf Sambung 2 merupakan pengujian fungsionalitas dengan cara memilih menu Huruf Sambung 2 lalu memilih soal

68 dari 1-5 kemudian akan menampilkan soal tersebut. Hasil pengujian dapat dilihat pada Tabel 4.3 Tabel 4.3 Pengujian menú latihan Huruf Sambung 2 Kasus dan Hasil Uji (data Normal) Data Masukan Yang diharapkan Pengamatan Kesimpulan Pilih menu tampilkan latihan Huruf Sambung 2 Menampilkan latihan Huruf Sambung 2 Huruf Sambung 2 ditampilkan [ ] ditolak 4.2.4 Pengujian menu latihan Huruf Sambung 3 Pengujian menu latihan Huruf Sambung 2 merupakan pengujian fungsionalitas dengan cara memilih menu Huruf Sambung 2 lalu memilih soal dari 1-5 kemudian akan menampilkan soal tersebut. Hasil pengujian dapat dilihat pada Tabel 4.4 Tabel 4.4 Pengujian menú latihan Huruf Sambung 3 Kasus dan Hasil Uji (data Normal) Data Masukan Yang diharapkan Pengamatan Kesimpulan Pilih menu tampilkan latihan Huruf Sambung 3 Menampilkan latihan Huruf Sambung 3 Huruf Sambung 3 ditampilkan [ ] ditolak 4.2.5 Pengujian menu latihan Huruf Sambung 4 Pengujian menu latihan Huruf Sambung 2 merupakan pengujian fungsionalitas dengan cara memilih menu Huruf Sambung 2 lalu memilih soal dari 1-5 kemudian akan menampilkan soal tersebut. Hasil pengujian dapat dilihat pada Tabel 4.5 Tabel 4.5 Pengujian menú latihan Huruf Sambung 4

69 Kasus dan Hasil Uji (data Normal) Data Masukan Yang diharapkan Pengamatan Kesimpulan Pilih menu tampilkan latihan Huruf Sambung 4 Menampilkan latihan Huruf Sambung 4 Huruf Sambung 4 ditampilkan [ ] ditolak 4.2.6 Pengujian Gestures Pengujian Gestures merupakan pengujian fungsionalitas dengan cara me-record Titik-titik yang terdapat pada latihan huruf dasar sampai huruf sambung 4. Hasil pengujian dapat dilihat pada Tabel 4.6 Tabel 4.6 Pengujian Gestures Kasus dan Hasil Uji (data Normal) Data Masukan Yang diharapkan Pengamatan Kesimpulan Pilih menu tampilkan latihan Huruf Sambung 4 Menampilkan latihan Huruf Sambung 4 Huruf Sambung 4 ditampilkan [ ] ditolak 4.2.7 Pengujian Info Aplikasi Pengujian info aplikasi merupakan pengujian fungsionalitas dengan cara memilih menu info. Hasil pengujian dapat dilihat pada Tabel 4.4 Tabel 4.7 Pengujian Info Aplikasi Kasus dan Hasil Uji (data Normal) Data Masukan Yang diharapkan Pengamatan Kesimpulan Pilih menu info Menampilkan info aplikasi Info aplikasi ditampilkan [ ] ditolak