2

1. Pendahuluan

Dalam kehidupan ini manusia memerlukan pendidikan demi mendapatkan

perkembangan yang optimal sebagai manusia. Pelaksanaan proses pendidikan saat

ini pun tidak terlepas dari peran teknologi. Seiring dengan teknologi yang terus

berkembang ini membuat bidang pendidikan lebih mudah untuk dipelajari. Disadari

atau tidak dunia telah berubah, dewasa ini kita telah hidup dalam era globalisasi [1].

Dalam era globalisasi kecanggihan teknologi informasi dan komunikasi telah

memungkinkan terjadinya pertukaran informasi yang cepat tanpa terhambat oleh

batas ruang dan waktu. Termasuk untuk pendidikan anak usia dini, memperkenalkan

dunia teknologi pada anak usia dini sangat lah penting karena dapat menunjang

pendidikan yang lebih baik di masa mendatang. Seperti saat ini, dengan banyaknya

sistem aplikasi web pendidikan yang menarik dapat membuat anak dapat belajar dan

bermain.

Penelitian ini menggunakan teknologi web berbasis HTML5. Dibandingkan

dengan teknologi HTML sebelumnya, HTML5 memiliki berbagai fitur tambahan

yang tidak terdapat dalam HTML terdahulunya. Salah satu fitur yang terdapat dalam

HTML5 adalah fitur canvas. HTML5 dapat mengakhiri penggunaan Flash untuk

banyak aplikasi media, itu yang menyebabkan JavaScript bahkan menjadi lebih

populer dari sebelumnya. Selain itu, HTML5 juga memiliki fitur drag-and-drop. Ada

banyak library dan plug-in yang tersedia untuk meningkatkan dan memperluas

HTML5 dan CSS3 untuk menciptakan pengalaman interaktif yang kaya [2].

Penelitian ini diterapkan pada TK Kemala Bhayangkari 17 Banjarnegara. TK

ini didirikan pada tahun 1958 tepatnya pada tanggal 8 Agustus 1958, oleh ibu

Suprapti yang pada waktu itu bekerja sebagai polwan di Polres Banjarnegara.

Permasalahan yang terjadi di TK Kemala Bhayangkari 17 khususnya untuk

pengenalan huruf, angka dan bangun datar biasanya terdapat dalam media

pembelajaran itu sendiri yang membuat anak hanya terpaku untuk mengikuti

pelajaran dan tidak memahami pelajaran tersebut. Selama ini metode yang sering

digunakan untuk pengenalan huruf, angka dan gambar yaitu metode dot to dot.

Namun dengan adanya media pembelajaran yang kurang efektif yaitu penggunaan

media kertas dan pensil, menyebabkan anak menjadi kurang berkonsentrasi ketika

proses belajar baik di sekolah maupun di rumah. Pihak TK Kemala Bhayangkari 17

juga menginginkan sebuah sistem pembelajaran untuk anak yang dapat diakses oleh

orang tua sehingga tercipta sinkronisasi pembelajaran antara di sekolah dan di rumah

(wawancara dengan kepala TK Kemala Bhayangkari 17, 26 Mei 2013).

Oleh karena itu, berdasarkan permasalahan dan landasan teori yang ada maka

dibuat sebuah media pembelajaran yang dapat meningkatkan konsentrasi anak

melalui sebuah sistem aplikasi web untuk pengenalan huruf, angka dan bangun datar

dengan menggunakan media web yang interaktif yaitu HTML5. Dengan adanya

media yang interaktif dibandingkan media lama seperti media kertas dan pensil,

diharapkan anak lebih konsentrasi dan tidak mudah bosan dalam belajar sehingga

lebih meningkatkan daya kognitif anak dalam mengenal huruf, angka dan bangun

datar.

3

2. Tinjauan Pustaka

Penelitian terdahulu yang digunakan sebagai acuan dalam penelitian ini

berjudul Perancangan Aplikasi Perangkat Ajar Pengenalan Huruf dan Menulis Untuk

Anak Di Taman Kanak-Kanak Berbasis Multimedia. Aplikasi pembelajaran berbasis

multimedia dengan menggunakan Macromedia Flash MX yang bertujuan untuk

membantu dalam mengajarkan huruf dan juga menulis kepada anak-anak di usia

balita serta membiasakan anak dari sedini mungkin untuk terbiasa berinteraksi

dengan menggunakan komputer [3].

Penelitian yang kedua adalah Pengembangan Media Pembelajaran Aksara Jawa

Dengan Macromedia Flash MX, Universitas Negeri Semarang. Menjelaskan tentang

aplikasi pembelajaran menulis, membaca dan memahami tentang aksara jawa dengan

menggunakan Macromedia Flash MX [4].

Perbedaan penelitian sebelumnya dengan penenitian ini terletak pada teknologi

yang digunakan dan media penyampaian materi. Teknologi yang digunakan adalah

penerapan HTML5 pada konten canvas dan audio. Penyampaian materi

pembelajaran pengenalan huruf, angka dan bangun datar dapat diakses oleh murid

dari mana pun dan kapan pun.

Pendidikan Anak Usia Dini (PAUD) adalah jenjang pendidikan sebelum

jenjang pendidikan dasar yang merupakan suatu upaya pembinaan yang ditujukan

bagi anak sejak lahir sampai dengan usia enam tahun yang dilakukan melalui

pemberian rangsangan pendidikan untuk membantu pertumbuhan dan perkembangan

jasmani dan rohani agar anak memiliki kesiapan dalam memasuki pendidikan lebih

lanjut, yang diselenggarakan pada jalur formal, nonformal, dan informal. Pendidikan

anak usia dini ini merupakan salah satu bentuk penyelenggaraan pendidikan yang

menitikberatkan pada peletakan dasar ke arah pertumbuhan dan perkembangan fisik

(koordinasi motorik halus dan kasar), kecerdasan (daya pikir, daya cipta, kecerdasan

emosi, kecerdasan spiritual), sosio emosional (sikap dan perilaku serta agama),

bahasa dan komunikasi, sesuai dengan keunikan dan tahap-tahap perkembangan

yang dilalui oleh anak usia dini [5].

Dalam mengembangkan motorik halus pada anak dapat dilakukan melalui

suatu permainan. Ada banyak metode bermain anak usia dini yang digunakan untuk

mengembangan kualitas anak. Salah satunya adalah metode bermain dot to dot.

Metode bermain dot to dot merupakan sebuah metode belajar sekaligus bermain yang

biasanya digunakan anak dibawah umur (usia dini) dengan cara menggabungkan titik

dengan titik yang lain sehingga membentuk sebuah objek tertentu seperti huruf,

angka, atau gambar [6]. Melalui aktivitas ini, anak-anak tertantang untuk membuat

sebuah objek yang utuh dengan menarik garis dari titik ke titik yang ada. Selain itu,

metode ini mempunyai segi positif lain yaitu dapat mendorong pengembangan

keterampilan matematika anak serta dapat meningkatkan daya kognitif anak dalam

mengenal huruf dan angka atau objek tertentu.

HTML (Hyper Text Markup Language) adalah file teks yang berisikan

instruksi/script kepada browser untuk menampilkan suatu tampilan grafis dari

sebuah halaman web. Di dalam file HTML terdapat beberapa tag atau kode yang

dimengerti oleh web browser dan dapat ditampilkan di layar monitor. Salah satu

kelebihan dari file HTML adalah cross platform, artinya file HTML dapat

4

ditampilkan di beberapa Operating System (OS) yang berbeda dan memiliki tampilan

yang sama walaupun saat pembuatan menggunakan OS tertentu.

HTML5 adalah sebuah standar untuk menstrukturkan dan menampilkan isi

pada WWW (world wide web) standar bahasa tersebut memperkenalkan fitur baru

seperti memutar video serta drag and drop. Sebelumnya fitur tersebut tergantung

pada plugins pihak ketiga di penjelajah web seperti Adobe Flash dan Microsoft

Silverlight. Ada beberapa fitur yang dimiliki oleh HTML5 antara lain: 1) Canvas :

media corat-coret langsung tanpa Flash dan Applet Java; 2) Vidio dan audio: dalam

pemutaran audio dan video tidak perlu menempelkan Flash, Quickplayer atau

Realplayer; 3) Local storage: penyimpanan data pada web browser lokal tanpa

menggunakan cookie; 4) Web worker: dengan fitur threading, JavaScript bisa

dipakai dalam beberapa proses sekaligus tanpa menghambat proses terkait; 5)

Semantic: mempermudah designer dengan tag khusus layout.

CSS merupakan kependekan dari Cascading Style Sheet yang berfungsi untuk

mengatur tampilan dengan kemampuan jauh lebih baik dari tag maupun atribut

standar HTML. CSS adalah kumpulan dari kode-kode yang berurutan dan saling

berhubungan untuk mengatur format atau tampilan tata letak dari sebuah halaman

web. CSS memiliki 2 sifat yaitu internal dan eksternal. Yang dimaksud dengan sifat

internal adalah script CSS dimasukan secara langsung ke halaman web yang akan

didesain, dan jika ada halaman web yang lain akan didesain dengan model yang sama

maka script CSS tersebut harus dimasukan ke dalam halaman website tersebut. Sifat

eksternal adalah dimana script CSS dipisahkan dan diletakkan dalam berkas khusus.

Tampilan sebuah CSS dapat berbeda jika ditampilkan pada menu browser yang

berbeda [7].

CSS3 merupakan generasi ke-3 dari perkembangan CSS sebelumnya. Adapun

fasilitas yang dimiliki CSS3 diantara lain fasilitas untuk shadow dari suatu div, fitur

transparansi, gradient warna pada border, warna pada teks yang diseleksi, fitur skala

memperkecil atau memperbesar layout, kolom pada teks dan fitur gradient pada

background. Walaupun CSS3 merupakan standar CSS baru yang membantu dalam

mempermudah dan mempercantik desain web, tetapi tidak semua browser bisa

mensuport CSS3, misalnya MS Internet Explorer.

JavaScript adalah bahasa pemprograman yang digabungkan dengan HTML

untuk membuat halaman web yang beranimasi, interaktif, dan memiliki visual effect

yang dinamis. JavaScript merupakan bahasa pemprograman yang cukup mudah

dikuasai dan memiliki banyak fungsi yang dapat digunakan untuk meningkatkan efek

visual dari sebuah halaman web [8]. Kode dari JavaScript harus diapit oleh tag,

diawalai dengan tag <script language = “ javascript”> dan diakhiri dengan tag

</script>. Sedangkan jquery adalah JavaScript library yang dibuat untuk membantu

web designer dan web developer menulis dan memperluas interaksi JavaScript

secara cepat dan ringkas menggunakan seperangkat metode yang melibatkan fungsi-

fungsi JavaScript [9].

3. Metode dan Perancangan Sistem

Metode pengembangan sistem yang digunakan dalam pembuatan aplikasi ini

adalah model prototyping. Model prototyping merupakan suatu teknik untuk

mengumpulkan informasi mengenai kebutuhan-kebutuhan informasi pengguna

5

secara cepat. Dengan metode ini pengembang dan pengguna dapat saling berinteraksi

selama proses pembuatan sistem. Proses dari metode prototype ditunjukan pada

gambar 1.

Gambar 1 Metode Prototyping [10]

Tahapan Prototyping Model dijelaskan sebagai berikut:

1. Listen to Customer

Tahap pengumpulan kebutuhan-kebutuhan pengguna secara lengkap kemudian

melakukan analisa terhadap kebutuhan tersebut untuk mencari solusi

mengimplementasi fungsi-fungsi didalam aplikasi. Pengumpulan kebutuhan

diawali dengan melakukan wawancara kepada guru TK A (nol kecil) guna

mengetahui bagaimana proses pembelajaran dan masalah-masalah yang dihadapi

dalam proses belajar pengenalan huruf, angka dan bangun datar.

2. Build or Revise Morckup

Merancang aplikasi pembelajaran pengenalan huruf, angka, dan bangun datar

dengan menerapkan teknologi HTML5 dengan menggunakan alat bantu

perancangan sistem yaitu Unified Modelling Language (UML), perancangan

database, dan perancangan antar muka pengguna (user interface).

3. Customer Test Drives Mockup

Evaluasi Prototyping dilakukan sebanyak dua kali pengujian. Proses evaluasi

pertama dilakukan setelah rancangan awal program dibuat. Pada halaman home

untuk pengunaan login user harus memasukan nama dan nomer induk, dengan

login seperti itu menyulitkan user, mengingat user adalah anak usia dini. Pada

halaman pembelajaran dot to dot tampilan terlalu sederhana sehingga user mudah

bosan, dan tidak adanya garis tutorial (anak panah alur mengerjakan dot to dot)

membuat user tidak mengerti arah mana untuk memulai mengerjakan. Evaluasi

tahap kedua, dengan membuat login user dibuat lebih mudah. User tidak lagi

memasukan nama dan nomer induk. Melainkan user hanya mencari foto masing-

masing yang terdapat pada menu lihat murid dan melakukan klik pada foto

tersebut. Ditambahkannya tutorial garis berdekatan dengan objek dot to dot

dengan panduan angka.

Perancangan proses pada penelitian ini dilakukan menggunakan UML

(Unified Modeling Language) dengan beberapa proses, dijelaskan sebagai berikut.

Use case diagram menggambarkan fungsionalitas yang diharapkan dari sebuah

sistem, yang menjelaskan keseluruhan kerja sistem secara garis besar dengan

6

merepresentasikan interaksi antara aktor dengan sistem yang dibuat, serta

memberikan gambaran fungsi-fungsi yang diberikan sistem kepada user.

Gambar 2 Use Case Diagram Sistem

Pada Gambar 2 menunjukan use case diagram masing masing aktor, yaitu:

aktor user dibagi menjadi dua yaitu murid dan guest. Pertama untuk murid yang

sudah login maka user dapat melakukan pembelajaran dot to dot huruf, angka,

bangun datar, dan mencocokan. Dan user juga bisa melihat rapot, data guru, data

murid, skor, seputar sekolah serta berita. Kedua untuk guest memiliki fungsi yang

sama dengan murid yang membedakan adalah user ini tidak bisa melakukan

pembelajaran yang tersedia dan tidak bisa melihat rapot. Aktor admin setelah

melakukan login maka admin dapat mengelola data guru, data murid dan berita.

Mengelola data guru seperti menambah guru, hapus guru, lihat dan edit data guru.

Begitu juga dengan mengelola data murid yang memiliki fungsi sama dengan

mengelola data guru, dan mengelola berita seperti tambah berita, arsip berita, arsip

kategori serta tambah kategori.

Pada Gambar 3 merupakan alur proses untuk melakukan pembelajaran. Pada

halaman utaman jika user memilih menu lihat murid maka user akan masuk ke

halaman murid, untuk memulai pembelejaran user diharuskan login dengan

melakukan klik pada foto murid yang tersedia. Setelah melakukan klik pada foto user

akan masuk kedalam halaman pembelajaran, pada halaman pembelajaran terdapat

menu-menu pembelajaran seperti dot to dot huruf, dot to dot angka, dot to dot

bangun datar dan mencocokan gambar.

7

Gambar 3 Flowchart Pembelajaran Dot To Dot.

Pada Gambar 4 dijelaskan untuk dapat menampilkan hasil dibagi menjadi dua

kondisi. Kondisi pertama jika pengerjaan dot to dot selesai selesai sebelum waktu

120 detik dan kondisi kedua jika waktu telah sampai 120 detik tetapi pengerjaan dot

to dot belum selesai. Pada kondisi pertama dilihat lagi waktu yang diperoleh jika

waktu <=20 maka akan tampil skor yang diperoleh dan mendapat 4 bintang dan

bonus 1 bintang. Untuk waktu >=21 && <=60 maka akan tampil skor dan mendapat

4 bintang, jika waktu >61 && <=100 maka tampil skor dan mendapat 3 bintang,

untuk waktu >=101 && <=120 mendapat 2 bintang. Sedangkan untuk kondisi kedua

perolehan hasil bintang dilihat dari seberapa banyak user menyelesaikan jumlah titik,

jika user menyelesaikan 25% dari titik total user tidak mendapatkan bintang dan

tidak mendapat skor. Untuk >=26% && <=50 dari titik total user mendapatkan

setengah bintang. Jika user menyelesaikan >=51 && <=75 maka user memperoleh

bintang 1, dan untuk perolehan total titik diatas 75% maka mendapatkan 1,5 (satu

setengah) bintang.

8

Gambar 4 Flowchart Waktu dan Skor Pada Dot To Dot Huruf.

4. Hasil dan Pembahasan

Pada tahap ini aplikasi pembelajaran pengenalan huruf, angka, dan bangun

datar diimplementasikan berdasarkan pada rancangan yang telah dilakukan pada

tahapan sebelumnya. Gambar 5 merupakan tampilan halaman utama. Dalam halaman

utama terdapat dua menu yaitu menu utama yang terdiri dari lihat guru, lihat murid,

seputar sekolah, skor dan admin, dan untuk menu pembelajaran khusus buat murid

terdiri dari pembelajaran dot to dot huruf, dot to dot angka, dot to dot bangun datar

dan mencocokan gambar.

Gambar 5 Halaman Utama

Pada Gambar 6 merupakan tampilan dari halaman lihat murid. Menampilkan

daftar nama yang telah diinputkan oleh admin dapat terlihat nama disertai foto.

Untuk melihat kelengkapan dari biodata murid tersebut ada link details. Pada

9

halaman ini merupakan awal untuk masuk ke halaman pembelajaran. Tidak terdapat

menu login yang seperti biasa untuk masuk ke menu pembelajaran, melainkan menu

login yang di mudahkan mengingat user adalah anak dibawah umur. Untuk

melakukan login user hanya mencari nama dari halaman ini kemudian melakukan

klik pada foto yang nantinya foto akan berubah menjadi gambar mulai belajar.

Gambar 6 Halaman Lihat Murid

Kode Program 1 Perintah untuk menampilkan data murid dan login.

Kode Program 1 menjelaskan tentang pengkodean menampilkan data murid

dan login. Untuk baris 1-15 menampilkan enam murid setiap halamannya dari data-

data murid yang berada di database tabel datamurid. Kemudian form login yang di

buat didalam gambar dengan mengambil data dari nama dan no_is murid.

1.<?php

2.$file = "lihatmurid.html";$p = new Paging();$batas = 6;

3. $posisi = $p->cariPosisi($batas);

4.$link = koneksi_db();

5.$sql = "select * from datamurid limit $posisi,$batas";

6.$res = mysql_query($sql,$link);

7.$sql2 = "select * from datamurid";

8.$res2 = mysql_query($sql2);

9.$jmlrecord = mysql_num_rows($res2);

10.$jmlhalaman = $p->jumlahHalaman($jmlrecord,$batas);

11.while ($data = mysql_fetch_array($res)) : ?>

12.<div class="prod_box" style=" margin-left:40px;">

13.<div class="center_prod_box">

14.<?php echo $data['nama']; ?><BR>

15.<div class="product_img"><form

16.action="aksi/proses_login.html" method="post"

17.onSubmit="return validasiForm(this)"> <ul><li>

18.<input type="hidden" name="nama" size="5" class="textStyle"

19.value="<?php echo $data['nama'];?>" type="hidden">

20.<input type="hidden" name="no_is" class="textStyle"

21.value="<?php echo $data['no_is'];?>" type="hidden">

22.<input type="image" value="masuk"

23.src="admin/proses/gambar_murid/minimini_<?php echo

24.$data['filegambar']; ?>"

25.onmouseover="this.src='images/go.gif';"

26.onmouseout="this.src='admin/proses/gambar_murid/minimini_<?p

28.hp echo $data['filegambar']; ?>';"></li></ul>

29.</form> <a href="det_murid.html?id=<?php echo

30.$data['id_murid']; ?>" class="prod_details">Details</a>

</div>

10

Gambar 7 Halaman Huruf A

Gambar 7 diatas merupakan gambar halaman huruf A. Pada halaman ini

terdapat dua objek dot to dot yaitu huruf besar (kapital) dan huruf kecil. Dengan

waktu maksimal untuk menyelesaikan 2 menit atau 120 detik. Pada halaman ini user

melakukan mouseover sesuai dengan arah panah sebelum waktu habis. Setelah

selesai akan muncul bintang sebagai hasil dari pembelajaran tersebut dan terdapat

dua menu yaitu menu tampil dan menu lanjut. Menu tampil akan menampilkan huruf

demi huruf sehingga membentuk satu kata yang sesuai dengan pembelajaran yang

telah selesai dikerjakan. Sedangkan untuk menu lanjut berguna untuk melanjutkan ke

halaman selanjutnya yaitu huruf B.

Kode Program 2 Perintah Untuk Menentukan Titik Pada Canvas

.

Canvas merupakan grid dua dimensi, sudut kiri atas canvas memiliki kordinat

(0,0). Kode program 2 menjelaskan tentang pengkodean koordinat titik per titik pada

canvas yang membentuk objek yaitu huruf A besar atau kapital dan huruf A kecil.

Pada baris ke 17 sampai 24 merupakan fungsi untuk menampilkan garis-garis

horisontal pada canvas dot to dot sehingga membentuk garis seperti pada buku tulis.

1.$(function() {

2. var dots = [

3.//huruf A besar

4.10,100, 10,100, 15,90, 20,80, 25,70, 30,60, 35,50, 40,40,

5.45,30, 50,20, 55,30, 60,40, 65,50, 70,60, 75,70, 80,80,

6.85,90, 90,100, 70,60, 60,60, 50,60, 40,60, 30,60, -1,1,

7.//huruf A kecil

8.130,55, 133.5,52.5, 136,51, 139,50, 142.5,49.5, 147.5,49.5,

9.150,50, 152.5,50.5, 155,52.5, 157.5,55, 159,57.5,

10.160,60, 160,65, 160,70, 160,75, 160,80, 160,85, 160,90,

11.160,95, 160,100, 160,70, 160,70, 155,70, 150,70, 145,70,

12.140,70, 139,70, 137.5,70.5, 136,71, 135,71.5, 133,73,

13.131.5,75, 130.5,76.5, 130,78, 130,82, 130,87, 130,91,

14.130.5,93, 131.5,95, 132.5,96.5, 133.5,98, 135,99, 136,99.5,

14.137.5,100, 142.5,100, 148.5,100, 153.5,100, 155,99,

16.157,97.5, 158.5,96.5, 160,90

17.function displayGrid(ctx) {

18.var gridSize = 20, width = 900;

19.for (var ypos = 0; ypos < width; ypos += gridSize) {

21.ctx.moveTo(0, ypos);ctx.lineTo(width, ypos);}

22.for (var xpos = 0; xpos < width; xpos += gridSize) {

23. }ctx.strokeStyle = "#eee"; ctx.lineWidth = 2.7;

24.ctx.stroke();}

11

untuk menentukan besar kecilnya garis menggunakan lineWidth dan untuk warna

menggunakan strokeStyle.

Kode Program 3 Anak Panah Alur Mengerjakan Dot To Dot.

Kode Program 3 menjelaskan tentang tutorial garis (anak panah alur mengerjakan dot

to dot) pada halaman halaman dot to dot. Kode baris ke 2 dan ke 3 menjelaskan

JavaScript menggunakan id untuk menemukan elemen canvas, kemudian membuat

objek konteks 2D, kemudian menentukan ukuran font yang dipakai dengan tipe font

dan ukuran. Kombinasi moveTo dan lineTo digunakan untuk menggambar garis,

pada moveTo mendefinisikan titik awal baris sedangkan untuk lineTo mendefinisikan

titik akhir baris. Untuk kode no 8 membuat teks angka satu pada koordinat 30,200.

Menentukan besar kecilnya garis yang dibuat menggunakan lineWidth dan untuk

Untuk benar-benar menggambar garis, kita harus menggunakan salah satu metode

“ink / tinta”, seperti stroke().

Gambar 8 Halaman Angka 1

Pada Gambar 8 adalah halaman angka 1. Halaman angka 1 merupakan salah

satu halaman dari pembelajaran dot to dot angka. Pada halaman ini user melakukan

mouseover sesuai dengan arah panah sebelum waktu habis. Setelah selesai akan

muncul bintang sebagai hasil dari pembelajaran tersebut dan terdapat dua menu yaitu

menu tampil dan menu lanjut. Menu tampil akan menampilkan huruf demi huruf

sehingga membentuk satu kata yang sesuai dengan pembelajaran yang telah selesai

dikerjakan, seperti terlihat pada Gambar 9. Sedangkan untuk menu lanjut berguna

untuk melanjutkan ke halaman selanjutnya yaitu angka 2 dan skor akan tersimpan.

1.function drawLine() {

2.var canvas=document.getElementById("graph");

3.var c=canvas.getContext("2d");

4.c.font = "bold 16px Arial";

5.c.moveTo(0,300); c.lineTo(140,20);

6.c.moveTo(140,50); c.lineTo(140,20);

7.c.moveTo(110,40); c.lineTo(140,20);

8.c.fillText("1", 30, 200);

...

9.c.lineWidth = 1.7;

10.c.stroke();

12

Gambar 9 Halaman Setelah Selesai Dot To Dot Angka 1.

Gambar 10 Halaman Rapot.

Pada Gambar 10 adalah halaman rapot murid. Halaman ini berisikan nilai

atau skor yang diperoleh murid dalam melakukan pembelajaran. Berbeda dengan

halaman skor yang menampilkan tiga nilai tertinggi dari semua murid, halaman ini

menampilkan semua nilai dari masing-masing murid yang telah diperoleh dalam

pembelajaran dot to dot. Dibagi menjadi tiga bagian nilai, yaitu nilai huruf yang

bersikan nilai huruf A sampai huruf Z, nilai angka dan nilai bangun datar.

Gambar 11 Halaman Lihat Murid

13

Halaman skor merupakan halaman nilai dari kesuluruhan murid. Dari nilai-

nilai semua murid diambil tiga nilai yang paling tertinggi. Yang ditampilkan berupa

nilai, nama serta foto murid, seperti pada Gambar 11.

Gambar 12 merupakan halaman login admin. Dalam halaman ini admin harus

melakukan login terlebih dahulu dengan memasukan username dan password. Jika

login tersebut berhasil maka admin masuk kedalam halaman utama login. Pada

halaman utama login terdapat menu seperti mengelola data guru, data murid dan

mengelola berita.

Gambar 12 Login Admin.

Kode Program 4 Proses Login Admin.

Kode program 4 meruapakan kode program untuk proses login admin.

Username dan password yang telah dipost dari form login disini akan dicek. Kode

program no 4 memanggil koneksi_db(). Kemudian menampilkan data pada tabel

admin dimana username=’$usr’ dan userpws=’ps’ jika data tersebut cocok maka

akan diproses. Session digunakan untuk menyimpan suatu informasi antar proses

request, baik request dalam bentuk post atau get. Session_start(); berfungsi untuk

memulai atau mengaktifkan session, untuk session_register berfungsi untuk

mendaftarkan suatu variable ke dalam session, dalam hal ini adalah variable dari

username dan password.

Gambar 13 merupakan halaman tambah murid. Pada halaman ini data murid

TK Kemala Bhayangkari 17 diinputkan oleh admin. Data murid yang ada dimasukan

1.$usr = $_POST['user'];

2.$psw = $_POST['pass'];

3.$psw = md5($psw);

4.$link = koneksi_db();

5.$sql = "SELECT * FROM admin WHERE username='$usr' AND userpsw='$psw'";

6.$query = mysql_query($sql,$link);

7.$f = mysql_fetch_array($query);

8.$n = mysql_num_rows($query);

9.if($n == 1){

10.session_start();

11.session_register('admUser');

12.session_register('admPass');

13.$_SESSION['admUser'] = $usr;

14.$_SESSION['admPass'] = $psw;

15.echo"<script language='javascript'>window.location =

16.'../halamanindex.html'</script>";

17. }else{

18.echo"<script language='javascript'>alert('Terjadi kesalahan dalam login, silakan

19.ulangi !')</script>" echo"<script language='javascript'>window.location =

20.'../admin/index.html'</script>";}

14

seperti No induk, nama, tempat tanggal lahir, jenis kelamin, alamat, nama orang tua,

tahun ajaran, foto dan deksripsi. Data yang sudah diisi nantinya akan dipost ke proses

insert murid.

Gambar 13 Halaman Tambah Data Murid.

Pengujian sistem dilakukan dengan 2 (dua) cara, yaitu dengan alpha testing

dan beta testing. Uji alpha testing dilakukan dengan metode blackbox testing, yaitu

dengan cara menguji fungsionalitas aplikasi apakah sudah berjalan sesuai yang

dirancang atau belum. Beberapa hasil pengujian dengan blackbox testing dapat

dilihat pada Tabel 1.

Tabel 1 Hasil Pengujian Blackbox Testing

No. Poin Pengujian Data Input / Kondisi Hasil Uji Status

1 Proses Login

admin

Username: benar

Password: benar

Berhasil

Login

valid

Username: benar

Password: salah

Login gagal valid

Username: salah

Password: salah

Login gagal valid

2 Proses Tambah

Murid

Semua field diisi

dengan lengkap

Berhasil

disimpan

dalam basis

data

valid

Ada beberapa field

yang tidak diisi dengan

lengkap

Gagal

Disimpan

dalam basis

data

valid

3 Proses menu dot

to dot

Murid sudah

melakukan login pada

halaman lihat murid.

Berhasil

melakukan

pembelajaran

valid

15

dot to dot

Murid belum

melakukan login pada

halaman lihat murid.

Gagal

melakukan

pembelajaran

dot to dot.

valid

4 Mengerjakan dot

to dot.

Menggunakan browser

Mozilla Firefox

Dapat tampil

canvas dot do

to dot

valid

Menggunakan browser

IE 8

Tidak dapat

tampil canvas

dot to dot.

valid

Berdasarkan hasil pengujian blackbox pada Tabel 1, maka dapat disimpulkan

bahwa aplikasi sudah berjalan sesuai dengan yang dirancang dan bisa dilanjutkan ke

pengujian beta testing. Setelah melakukan pengujian dengan blackbox dilakukan

juga pengujian membandingankan antara pembelajaran manual dengan pembelajaran

menggunakan aplikasi pembelajaran melalui media komputer.

Pengujian beta dilakukan oleh user, dalam hal ini adalah murid kelas A (nol

kecil) TK Kemala Bhayangkari 17. Pada penelitian ini dilakukan dua pengujian,

pengujian pertama dilakukan untuk mengukur tingkat konsentrasi murid dalam

proses pembelajaran antara menggunakan media manual dengan media aplikasi web

HTML5. Pengujian ini dilakukan dua kali dalam hari yang berbeda dengan membagi

responden menjadi dua kelompok berdasarkan nomer absen anak. Untuk kelompok

pertama diberikan pembelajaran media manual dengan waktu 15 menit kemudian

untuk hari berikutnya tetap diberikan pembelajaran media manual (kertas pensil).

Dan untuk kelompok kedua diberikan pembelajaran media manual dengan waktu

yang sama yaitu 15 menit kemudian hari berikutnya murid diberikan pembelajaran

media aplikasi web HTML5.

Kemudian pengujian kedua dilakukan untuk mengetahui pemahaman murid

dalam pembelajaran mengenal huruf, angka, dan bangun datar antara menggunakan

media manual dengan media aplikasi web HTML5. Dalam pengujian ini murid

dibagi menjadi dua kelompok dengan cara acak. Kelompok pertama akan diberikan

dua kali tes yaitu dengan memberikan soal dot to dot angka pada media kertas,

kemudian responden tetap diberikan pembelajaran dot to dot dengan media manual

(kertas pensil) dan responden akan diberikan tes ke dua dengan bentuk yang sama

yaitu dengan soal dot to dot angka pada media kertas. Kelompok ke dua juga akan

diberikan dua kali tes, yaitu dengan memberikan soal dot to dot angka pada media

kertas, kemudian responden diberikan pembelajaran dot to dot dengan media aplikasi

web HTML5 dan responden akan diberikan tes kedua dengan bentuk yang sama

yaitu dengan soal dot to dot angka pada media kertas. Pengujian ini dimaksudkan

untuk mengetahui apakah aplikasi tersebut membantu pemahaman murid dalam

pembelajaran mengenal huruf, angka, dan bangun datar.

16

Gambar 12 Grafik Tingkat konsentrasi Murid

Dari Gambar 12 diatas dapat dilihat hasil tingkat konsentrasi murid antara

media manual dengan media aplikasi web HTML5. Untuk kelompok pertama dan

hari pertama diperoleh rata-rata waktu belajar murid yang menggunakan media

manual sebesar 9.24 menit sedangkan untuk hari kedua masih menggunakan media

manual diperoleh rata-rata waktu sebesar 12.37 menit. Untuk kelompok kedua dan

hari pertama diperoleh rata-rata waktu menggunakan media manual sebesar 8.25

menit dan untuk hari kedua dengan menggunakan media aplikasi web HTML5

diperoleh waktu rata-rata sebesar 15.3 menit.

Gambar 13 Grafik Waktu Rata-Rata Per Objek

Gambar 13 dapat dilihat perbandingan hasil pembelajaran dari pengujian

penggunaan media manual (kertas dan pensil) dengan media aplikasi berdasarkan

peningkatan waktu dalam menyelesaikan objek dot to dot. Dimana pada pengujian

pre test dan post test dengan media manual menghasilkan peningkatan 10.83 detik

(pre test = 65.12 detik dan post test = 59.4 detik) atau 9.08%, sedangkan pada

pengujian pre test dan post test dengan media aplikasi menghasilkan peningkatan

20.74 detik (pre test = 54.29 detik dan post test = 38.66 detik) atau 21.15%.

Dari Gambar 14 dapat dilihat perbandingan hasil pembelajaran dari pengujian

penggunaan media manual (kertas dan pensil) dengan media aplikasi berdasarkan

peningkatan objek yang telah diselesaikan murid. Dimana pada pengujian pre test

dan post test dengan media kertas menghasilkan peningkatan 10 objek atau 10.28%.

Sedangkan pada pengujian pre test dan post test dengan media aplikasi menghasilkan

peningkatan 44 objek atau 20.90%.

17

Gambar 14 Grafik Objek Yang Terselesaikan

5. Simpulan

Berdasarkan penelitian yang telah dilakukan, dapat disimpulkan bahwa

penggunaan HTML5 dapat mengakhiri penggunaan Flash. Dengan adanya fitur

canvas dan audio dapat membuat pembelajaran web lebih interaktif.

Berdasarkan pengujian tingkat konsentrasi murid terhadap media aplikasi

web HTML5 diperoleh peningkatan waktu rata-rata pembelajaran murid pada

kelompok pertama dan hari pertama sebesar 9.24 menit sedangkan untuk hari kedua

dengan media manual diperoleh waktu 12.37 menit. Untuk kelompok kedua hari

pertama diperoleh waktu rata-rata sebesar 8.25, dan untuk hari kedua menggunakan

media aplikasi web diperoleh waktu rata-rata 15.3 menit. Hal ini dapat disimpulkan

bahwa aplikasi web HTML5 lebih meningkatkan tingkat konsentrasi murid dalam

pembelajaran mengenal huruf, angka, dan bangun datar.

Berdasarkan pengujian pemahaman murid dalam pembelajaran mengenal

huruf, angka, dan bangun datar antara menggunakan media manual dengan media

aplikasi web HTML5, diperoleh hasil pengingkatan waktu dalam menyelesaikan dot

to dot sebesar 12.07% atau lebih besar 12.07% pada pembelajaran menggunakan

media HTML5 dari pada pembelajaran menggunakan media manual. Sedangkan

untuk hasil peningkatan objek yang telah diselesaikan murid sebesar 10.62% atau

lebih besar 10.62% pada pembelajaran menggunakan media web HTML5. Hal ini

dapat disimpulkan bahwa aplikasi web HTML5 lebih meningkatkan tingkat

pemahaman murid dalam pembelajaran mengenal huruf, angka, dan bangun datar.

18

6. Daftar Pustaka

[1] Dryden, Gordon dan Jeannete, 1999, “The Learning Revolution, edisi 2”,

Bandung: Kaifa.

[2] Cruse, Dale dan Jordan, Lee, 2011, “HTML5 Multimedia Development

Cookbook”, Packt Publishing: Birmingham UK.

[3] Rosalia, Elizabeth, 2010, “Perancangan Aplikasi Perangkat Ajar Pengenalan

Huruf dan Menulis untuk Anak di Taman Kanak-Kanak Berbasis

Multimedia”, Jakarta: Fakultas Teknologi Informasi Universitas

Tarumanagara.

[4] Rahman, Abdul, 2007, “Pengembangan Media Pembelajaran Aksara Jawa

Dengan Macromedia Flash MX, Semarang: Jurusan Pendidikan Teknik

Elektro Universitas Negri Semarang.

[5] Hasan, Maimunah, 2009, “Pendidikan Anak Usia Dini”, Jogjakarta: Diva

Press.

[6] Sumantri, 2005, “Model Pengembangan Keterampilan Motorik Anak Usia

Dini”, Jakarta: Depdikbud.

[7] Oktavian, Diar Puji, 2010, “Menjadi Programmer Jempolan Menggunakan

PHP”, Yogyakarta: Penerbit MediaKom.

[8] Brooks, David R, 2007, “The Bayesian Choice. Second Edition”, Springer:

London.

[9] Jake Rutter, 2011, “Smashing Jquery. Smashing Magazine Book Series”.

[10] Pressman, Roger S, 2001, “Software Engineering 5th

edition”, New York:

McGraw Hill.