BAB IV IMPLEMENTASI DAN ANALISA

(1)

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

(2)

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 1

2

3

5

(3)

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

Gambar 4.4 Proses Pembuatan Halaman awal aplikasi 1

2

(4)

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

(5)

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 1

2

(6)

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

Gambar 4.8 Proses Pembuatan Halaman About 1

2 3

4

(7)

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 :

(8)

1. Klik Add Event > Left Button > Lalu pada main1 klik Different Room

2. Pastikan new room sudah terisi room_6 3. Lalu Klik OK

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 : 1 2 3 4 5

(9)

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

Gambar 4.13 Proses Pembuatan Halaman Latihan 1

2 3

4

(10)

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 :

(11)

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

(12)

(13)

(14)

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

(15)

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 :

(16)

Gambar 4.26 Halaman menu cek Huruf Sambung 2 latihan 1

Gambar 4.27 Halaman menu Huruf Sambung 2 latihan 2

(17)

(18)

Untuk bisa membuat gestures / paint seperti gambar diatas. Berikut cara berikut source code nya :

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.

(19)

Dan Obj_pen merupakan objek control agar bisa menuju ke script pada room lain

2. alarm[0]=1

(20)

Gambar 4.34 Halaman menu cekHuruf Sambung 3 latihan 1

(21)

(22)

Gambar 4.38 Halaman menu cekHuruf Sambung 3 latihan 3

(23)

(24)

Untuk bia membuat gestures / paint seperti gambar diatas. Berikut cara berikut source code nya :

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.

(25)

Dan Obj_pen merupakan objek control agar bisa menuju ke script pada room lain

2. alarm[0]=1

(26)

(27)

Untuk bia membuat gestures / paint seperti gambar diatas. Berikut cara berikut source code nya :

(28)

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

(29)

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.1Pengujian 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.2Pengujian menú latihan Huruf Dasar Kasus dan Hasil Uji (data Normal)

Data Masukan Yang diharapkan Pengamatan Kesimpulan Pilih menu

tampilkan latihanHuruf Dasar

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

(30)

dari 1-5 kemudian akan menampilkan soal tersebut. Hasil pengujian dapat dilihat pada Tabel 4.3

Tabel 4.3Pengujian menú latihan Huruf Sambung 2 Kasus dan Hasil Uji (data Normal)

Data Masukan Yang diharapkan Pengamatan Kesimpulan Pilih menu tampilkan latihanHuruf Sambung 2 Menampilkan latihanHuruf 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.4Pengujian menú latihan Huruf Sambung 3 Kasus dan Hasil Uji (data Normal)

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

(31)

Kasus dan Hasil Uji (data Normal)

Data Masukan Yang diharapkan Pengamatan Kesimpulan Pilih menu tampilkan latihanHuruf Sambung 4 Menampilkan latihanHuruf 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.6Pengujian Gestures Kasus dan Hasil Uji (data Normal)

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.7Pengujian Info Aplikasi Kasus dan Hasil Uji (data Normal)

Data Masukan Yang diharapkan Pengamatan Kesimpulan Pilih menu info Menampilkan info

aplikasi

Info aplikasi