11
JUDUL WEB
Home Pembelejaran
Login Register
GAMBAR Pengantar Media Pembelajaran
Bahasa Inggris Dasar Berbasis Web
site Menggunakan HTML5
Tabel member dan tabel tes memiliki hubungan atau relasi.Relasi antara tabel member dan tabel test adalah one to many. Setiap ID dapat memiliki banyak ID
tabel test. Penghubung antara tabel member dan tabel tes adalah ID pada tabel member sebagai primary key dan ID_member pada tabel tes sebagai foraign key
Relasi dari tabel member dan tabel test dapat dilihat di Gambar 5
Gambar 3 Tampilan relasi tabel
3.3 Perancangan Antar Muka
Perancangan antar muka merupakan langkah akhir yang dilakukan dalam tahap perancangan. Perancangan antar muka ini memberi gambaran bagaimana
tampilan antar muka yang akan digunakan dalam pengembangan aplikasi media pembelajaran Bahasa Inggris berbasis website menggunakan HTML5.
Perancangan antar muka merupakan media berkomunikasi antara user dan aplikasi.
Gambar 4
Rancangan Halaman Home
Tabel Member ID
Nama Umur
Alamat Sekolah
Username Password
Tabel Member ID
..
ID_member Quiz
Tanggal Jumlah
Berhasil Nilai
12
Gambar 3 merupakan rancangan untuk halaman Home. Halaman ini memberikan tampilan berupa pengantar dari aplikasi pembelajara Bahasa Inggris
dasar dan menjelaskan apa saja yang bisa dilakukan user dalam aplikasi ini. User yang sudah memiliki password dan username, dapat melakukan login dan masuk
ke halaman pembelajaran, sedangkan user yang belum memiliki password dan username dapat melakukan proses registrasi untuk mengakses ke halaman
selanjutnya.
JUDUL WEB
Home Pembelajaran
Login Register
Form Registrasi Member Baru
Gambar 5 Rancangan Halaman Register
Gambar 4 merupakan rancangan untuk halaman Register. Halaman ini menyediakan form dimana user baru dapat mengimput data agar dapat menjadi
member dan dapat melakukan proses login ke dalam aplikasi. User telah mengisi form registrasi dapat melakukan penyimpanan data dengan menekan tombol
“daftar”.
JUDUL WEB
Home Pembelajaran
Login Register
Belajar Warna Belajar Bentuk
Belajar Huruf Belajar Angka
Gambar 6 Rancangan Halaman Login
13
Gambar 6 merupakan rancangan untuk halaman Pembelajaran. Halaman ini menampilkan jenis-jenis pembelajaran yang dapat di ikuti oleh user.
Halaman pembelajaran menampilkan 4 jenis pembelajaran yang dapat di pilih oleh user yaitu pembelajaran warna, pembelajaran bentuk, pembelajaran
huruf, dan pembelajaran angka. Setiap pembelajaran memiliki dua level berdasarkan tingkat kesuliatan. Setiap media pembelajaran yang ada di halaman
pembelajaran, sudah terhubung dengan halaman pembelajaran masing-,masing. Halaman-halaman yang digunakan untuk melakukan proses pembelajaran Bahasa
Inggris dasar berbasis website menggunakan HTML5 adalah sebagai berikut:
- Halaman Belajar Warna level 1, merupakan halaman yang digunakan oleh
user untuk belajar warna-warna dasar yaitu red, green, blueRGB. -
Halaman Belajar Warna level 2, merupakan halaman yang digunakan oleh user untuk belajar warna-warna yang lebih banyak, lebih interaktif dan lebih
nyata. -
Halaman Belajar Bentuk level 1, merupakan halaman yang digunakan oleh user untuk belajar bentuk-bentuk dasar dua dimensi seperti lingkarancircle,
persegirectangle , belah ketupatdiamond. -
Halaman Belajar Bentuk level 2, merupakan halaman yang digunakan oleh user untuk belajar bentuk-bentuk dari bangun ruang seperti kubuscube,
limaspyramid, dan tabungtube -
Halaman Belajar Huruf level 1, merupakan halaman yang digunakan oleh user untuk belajar huruf-huruf sesuai abjat.
Dari huruf “A” sampai dengan huruf “Z”
- Halaman Belajar Huruf level 2, merupakan halaman yang digunakan oleh
user untuk belajar kata yang kata depannya didasarkan sesuai dengan abjat dari abjat “A” sampai abjat “Z”.
- Halaman Belajar Angka level 1, merupakan halaman yang digunakan oleh
user untuk belajar angka sederhana, dari angka “0”zero sampai angka
“9”nine. -
Halaman Belajar Angka level 2, merupakan halaman yang digunakan oleh user untuk belajar angka yang lebih kompleks yaitu angka-angka yang
memiliki dua digit angka. 4. Hasil dan Pembahasan
4.1 Proses Sistem
Komponen yang dibutukan yaitu web server, PHP5, web browser, dan yang paling penting adalah HTML5. Proses sistem ini akan menunjukan proses dari
fitur dari HTML5 terutama canvas, serta proses-proses lain yang menunjang untuk membuat aplikasi media pembelajaran Bahasa Inggris dasar berbasis
website menggunakan HTML5.
14
Kode Program 1 Perintah mouse click
Kode Program 1 merupakan baris perintah yang digunakan untuk melakukan proses mouse click. Fungsi ini adalah fungsi saat user mengklik mouse
pada objek yang diinginkan. Sehingga sistem merespon dengan memberikan frame baru yang menunjukan objek yang di pilih beserta suara sesuai objek yang
di klik. Hasil dari proses mouse click dapat dilihat pada Gambar 8
Gambar 7 Frame Mouse Click
Gambar 7 merupakan hasil dari proses mouse click. Output yang terjadi setelah mouse click adalah gambar objek yang dipilih beserta suara dari objek
yang dipilih.
1. function MouseDowne 2. {
3. if data.showHelp == 1 {
4. data.showHelp = 0;
5. } else {
6. if data.animate_up == 1 {
7. data.global_alpha = 1.0;
8. data.animate_up = 0;
9. } else {
10. for i=0; i6; i++ {
11. if mouseX =
12. numbers[i+page6].x 13.
mouseX = 14. numbers[i+page6].x + numbers[i+page6].w
15. mouseY =
16. numbers[i+page6].y 17.
mouseY = 18. numbers[i+page6].y + numbers[i+page6].h {
19. sounds[i+page6].play;
20. imgTemp =
21. numbers[i+page6].img; 22.
data.teks = 23. numbers[i+page6].id;
24. data.global_alpha = 0.0;
25. data.animate_up = 1;
26. break;
27. }
28. }
15
Kode Program 2 Perintah Mouse Detection
Kode Program 2 merupakan baris perintah dari mouse detection. Proses mouse detection ini merupakan proses yang akan membuat objek yang berada
dalam frame pembelajaran bereaksi pada saat kursor berada di atas objek. Objek yang berada di bawah kursor akan terseleksi. Hasil interface dari mouse detection
dapat di lihat di gambar 10
1. function MouseMovee 2. {
3. var x;
4. var y;
5. if e.offsetX {
6. x = e.offsetX;
7. y = e.offsetY;
8. } else if e.layerX {
9. x = e.layerX;
10. y = e.layerY;
11. }
12. 13.
14. mouseX = x;
15. mouseY = y;
16. 17.
startQuizOver = false; 18. if mouseX = 180
19. mouseX = 180+300 20. mouseY = 395
21. mouseY = 395+73 { 22. startQuizOver = true;
23. } 24.
25. startHelpOver = false;
26. if mouseX = 580
27. mouseX = 580+50
28. mouseY = 10
29. mouseY = 10+50 {
30. startHelpOver = true;
31. }
32. 33.
anyOver = false; 34.
for i=0; i6; i++ { 35.
if mouseX = numbers[i+page6].x 36.
mouseX = numbers[i+page6].x + 37. numbers[i+page6].w
38. mouseY = numbers[i+page6].y
39. mouseY = numbers[i+page6].y +
40. numbers[i+page6].h { 41.
anyOver = true; 42.
overIndex = i; 43.
break; 44.
}
16
Gambar 8 Frame Mouse Detection
Gambar 8 merupakan hasil output dari proses mouse detection. Pada gambar 10 terlihat hasil seleksi yang terjadi di objek mobil yang berwarna merah.
Objek yang terseleksi adalah hasil ketika mouse berada di atas objek tersebut.
Kode Program 3 Perintah Load images and sounds
1. function Init { 2. load images
3. imgBgHelp.src = imghelphelp1A.jpg; 4.
imgHelp.src = imgothershelp.png; 5.
imgHelpOver.src = imgothershelp_over.png; 6. imgStartQuiz.src = imgothersstart_quiz.png;
7. imgStartQuizOver.src = imgothersstart_quiz_over.png; 8.
imgFrame.src = imgframe.png; 9. imgBg.src = imgbgbg4.png;
10. img0.src = imgcolorsred.png; 11. img0Over.src = imgcolorsred_over.png;
12. 13. snd0.src = sndcolorsred.ogg;
14. 15. obj0 = {
16. img:img0, 17. imgOver:img0Over,
18. x:20, 19. y:50,
20. w:img0.width, 21. h:img0.height,
22. }; 23.
24. colors[0] = obj0; 25.
26. sounds[0] = snd0; 27.
28. content = document.getElementByIdcontent; 29.
30. click event 31. eCanvas = document.getElementByIdcanvas;
32. 33. timer loop
34. setIntervalUpdate,60; 35. }
17
Kode Program 3 merupakan baris perintah Load images and sounds. Proses ini akan melakukan pemanggilan gambar dan suara yang sudah
dideklarasikan dalam proses variables declaration. Setelah melakukan loading, proses ini akan mengklasifikasian gambar dan suara yang sama ke dalam objek-
objek. Contoh dari proses ini dapat dilihat di baris coding 15-21. Di baris tersebut menjelaskan penggabungan image dan audio disatukan ke dalam sebuah objek.
Kode Program 4 Perintah Drawing Animation
Kode Program 4 merupakan baris perintah dari Drawing animation. Proses ini melakukan penggambaran animasi dalam website dengan menggunakan fitur
canvas HTML5. Baris 2-5 merupakan elemen dasar dari canvas HTML5.
1. function Draw { 2. eCanvas = document.getElementByIdcanvas;
3. canvasOffsetLeft = eCanvas.offsetLeft; 4. canvasOffsetTop = eCanvas.offsetTop;
5. g = eCanvas.getContext2d; 6. g.drawImageimgBg,0,0;
7.
8. if data.showHelp == 1 {
9. g.drawImageimgBgHelp,0,0;
10. } else {
11. if data.animate_up == 1 {
12. g.globalAlpha = data.global_alpha;
13. g.drawImageimgFrame,10,40;
14. g.drawImageimgTemp,320-
15. imgTemp.width2,150; 16.
g.fillStyle = black; 17.
g.font = bold 40px sans-serif; 18.
g.fillTextdata.teks,180,350; 19.
} else { 20.
if startHelpOver 21. g.drawImageimgHelpOver,580,10;
22. else g.drawImageimgHelp,580,10;
23. 24.
if startQuizOver 25. g.drawImageimgStartQuizOver,180,330;
26. else g.drawImageimgStartQuiz,180,330;
27. 28.
for i=0; i3; i++ { 29.
if anyOver overIndex == i 30. g.drawImagecolors[i].imgOver, colors[i].x, colors[i].y;
31. 32.
else g.drawImagecolors[i].img, 33. colors[i].x, colors[i].y;
34. }
35. }
36. }
37.}
18
4.1 Pengujian dengan Metode Blackbox
