489
Rancang Bangun Aplikasi Permainan Untuk Pembelajaran Anak Menggunakan HTML 5
M. Rosidi Zamroni, Nizar Suryaman, Ahmad Jalaluddin
*)Program Studi Teknik Informatika Universitas Islam Lamongan
ABSTRAK
Anak-anak dengan kecenderungan alamiahnya yang selalu suka bergerak dan selalu ingin tahu akan segala hal yang ada disekitarnya, tak bisa dilepaskan dari aktivitas bermain. Bermain bagi anak-anak bukan hanya sebuah kesenangan belaka tapi juga merupakan kebutuhan penting bagi mereka. Lewat bermain anak-anak secara tak sadar bisa mengasah bakat mereka yang terpendam serta menambah pengetahuan mereka tentang lingkungan sekitarnya.
Terkadang, orangtua melakukan kesalahan dalam memilihkan mainan untuk buah hatinya. Mereka membelikan mainan bukan berdasarkan perkembangan kemampuan sang anak, tetapi lebih disebabkan oleh penampilan mainan tersebut. Padahal, pemberian mainan anak yang tepat dapat merangsang perkembangan motorik, kognitif, dan bahasa si buah hati tetapi jika kurang tepat akan menghambat perkembangan anak, baik kesehatan maupun kecerdasan anak.
Dengan perkembangan teknologi ini mainan anak dapat dibuat melalui media Komputer, sehingga akan bebas dari bahan-bahan zat berbahaya. Sebelumnya telah banyak Game pembelajaran yang telah di buat, namun masih sangat jarang menggunakan bahasa pemrograman HTML5. Berdasarkan hal tersebut perlu adanya perancangan dan pembangunan aplikasi permainan untuk pembelajaran anak dengan menggunakan bahasa pemrograman HTML5.
Kata kunci: Permainan, Belajar, Anak-Anak, HTML5
I. PENDAHULUAN 1.1. Latar Belakang
Anak-anak dengan kecenderungan alamiahnya yang selalu suka bergerak dan selalu ingin tahu akan segala hal yang ada disekitarnya, tak bisa dilepaskan dari aktivitas bermain.Lewat bermain anak-anak secara tak sadar bisa mengasah bakat mereka yang terpendam serta menambah pengetahuan mereka tentang lingkungan sekitarnya.
Perkembangan teknologi kini semakin pesat.
Bahasa pemrograman yang digunakan juga mengalami perubahan seperti HTML (Hypertext Markup Language). Dengan perkembangan teknologi ini mainan anak dapat dibuat melalui media Komputer, sehingga akan bebas dari bahan – bahan zat berbahaya.
Berdasarkan hal tersebut perlu adanya perancangan dan pembangunan aplikasi permainan untuk pembelajaran anak dengan menggunakan bahasa pemrograman HTML5 tersebut.
1.2. Tujuan
Membuat permainan pendidikan anak menggunakan HTML5.
Merancang permainan pendidikan anak yang interaktif dan menarik
Merancang permainan yang aman untuk anak
II. LANDASAN TEORI
2.1. Pengertian Permainan dan Pembelajaran Dalam subbab ini akan dijelaskan mengenai permainan dan pembelajaran yaitu:
2.1.1 Permainan
Kata Game berasal dari bahasa Inggris.
Dalam kamus bahasa Indonesia istilah “Game”
adalah permainan. Permainan merupakan bagian dari bermain dan bermain juga bagian dari permainan keduanya saling berhubungan. Permainan dalam hal ini merujuk pada pengertian kelincahan intelektual ( Intellectual Playability Game) yang juga bisa diartikan sebagai arena keputusan dan aksi pemainnya. Dalam Game, ada target - target yang ingin dicapai pemainnya. Permainan adalah kegiatan yang kompleks yang didalamnya terdapat peraturan, bermain dan budaya. Sebuah permainan adalah sebuah sistem dimana pemain terlibat dalam konflik buatan. Disini pemain berinteraksi dengan sistem dan konflik dalam permainan merupakan rekayasa atau buatan. Dalam permainan terdapat peraturan yang bertujuan untuk membatasi perilaku pemain dan menentukan permainan.
Mendefinisikan apakah yang dimaksud dengan Game, tidak cukup dengan hanya melihat kamus bahasa. Terdapat banyak makna dalam kata
„Game‟. Yang jelas Game secara naluri adalah merupakan bagian dari kehidupan manusia. Makna sekilas dari Game memberikan pengertian bahwa Game merupakan suatu aktifitas yang tidak dilakukan dengan sungguh-sungguh. Untuk mengetahui apa yang sesungguhnya disebut dengan Game, maka paling tidak kita dapat memahaminya dari adanya sejumlah pengertian Game yang biasa kita alami dalam kehidupan.
2.1.2 Pembelajaran
490 Pembelajaran adalah proses interaksi
peserta didik dengan pendidik dan sumber belajar pada suatu lingkungan belajar. Pembelajaran merupakan bantuan yang diberikan pendidik agar dapat terjadi proses perolehan ilmu dan pengetahuan, penguasaan kemahiran dan tabiat, serta pembentukan sikap dan kepercayaan pada peserta didik. Dengan kata lain, pembelajaran adalah proses untuk membantu peserta didik agar dapat belajar dengan baik.
2.2. Pengertian anak
Menurut Hurlock (1980), manusia berkembang melalui beberapa tahapan yang berlangsung secara berurutan, terus menerus dan dalam tempo perkembangan y6ang tertentu, terus menerus dan dalam tempo perkembangan yang tertentu dan bias berlaku umum. Untuk lebih jelasnya tahapan perkembangan tersebut dapat dilihat pada uraian tersebut: - Masa pra-lahir : Dimulahi sejak terjadinya konsepsi lahir - Masa jabang bayi : satu hari-dua minggu. - Masa Bayi : dua minggu-satu tahun. - Masa anak : – masa anak- anak awal : 1 tahun-6 bulan, Anak-anak lahir : 6 tahun-12/13 tahun. - Masa remaja : 12/13 tahun-21 tahun - Masa dewasa : 21 tahun-40 tahun. - Masa tengah baya : 40 tahun-60 tahun. - Masa tua : 60 tahun-meninggal .
2.3. HTML5.
Sama hal dengan sebuah software, HTML juga mempunyai berbagai versi. Versi terakhir dari HTML adalah HTML5. Meskipun belum seluruhnya browser yang dapat menginterpresentasikan tag-tag dari HTML5 namun diyakin bahwa HTML5 akan menjadi standar baru desain aplikasi. HTML sendiri merupakan suatu bahasa pemrograman yang umumnya digunakan untuk membuat sebuah halaman aplikasi, versi sebelumnya dari HTML adalah HTML 4.01 yang dirilis pada tahun 1999, pada versi HTML 5 saat ini telah mempunyai kapabilitas baru yang tidak dimiliki oleh HTML 4.01 , diantaranya tag baru yang bernama canvas yang digunakan untuk menampilkan gambar atau animasi dan mendukung elemen pengembangan untuk membuat gambar garis atau gambar dengan menggambar di atas canvas tersebut.
HTML5 merupakan kerjasama antara World Wide Aplikasi Consortium (W3C) dan Aplikasi Hypertext Application Technology Working Group (WHATWG). WHATWG bekerja bentuk aplikasi dan aplikasi, dan W3C bekerja dengan XHTML 2.0.
Pada tahun 2006, mereka memutuskan untuk bekerja sama dan menciptakan sebuah versi baru dari HTML.
III. ANALISA DAN PERANCANGAN SISTEM
3.1. Tahap Project Planning & Tahap Analisa
Dalam subbab ini akan dijelaskan tentag project planning dan tahap analisa yaitu :
3.1.1. Metode Perancangan Sistem
Metode dalam perancangan sistem menggunakan metode waterfall Metode waterfall adalah metode yang sifatnya sistematik dan sekuensial, dimana tiap tahap yang dilalui harus menanti tahap yang sebelumnya selesai dikerjakan.
Metode waterfall merupakan metode yang sesuai dengan kasus yang dibahas, yakni dalam rancang bangun aplikasi permainan untuk pembelajaran anak menggunakan HTML5.
Gambar 1 Pemodelan Waterfall
3.1.2. Kebutuhan pengguna
Kebutuhan pengguna yaitu bisa melakukan semua jenis permainan sesuai dengan tipe yang telah dipilih, serta melakukan aktivitas-aktivitas seperti klik, drag, drop untuk menyelesaikan permainan
Kebutuhan Admin yaitu dapat melakukan perubahan data yang meliputi aktivitas update, delete, create dan insert kedalam database program.
Admin mempunyai kewenangan tersendiri yang tidak dapat dilakukan oleh pengguna biasa.
Perbedaan antar pengguna dapat dijelaskan dengan tabel dibawah ini :
Tabel 1 Kebutuhan Pengguna
Level Create Update delete Select
Pengguna - - - √
Admin √ √ √ √
3.1.3. Tahap Desain (Perancangan Sistem) Perancangan sistem merupakan rancangan awal sebelum dilakukan penyelesaian suatu masalah yang ada. Pencapaian tujuan atau hasil yang diinginkan sesuai dengan kebutuhan dari permasalahan yang ada, maka suatu rancangan sistem diperlukan untuk mendapatkan gambaran secara garis besar seluruh masalah yang akan di bangun.
3.1.4. Use Case Diagram
Use case diagram menggambarkan fungsionalitas yang diharapkan dari sebuah sistem yang menjelaskan keseluruhan kerja sistem secara garis besar dengan mempresentasikan interaksi antara aktor yang dibuat, serta memberikan gambaran fungsi-fungsi pada sistem tersebut.
491 Gambar 2 Use Case Diagram Sistem
Usecase di atas memiliki tiga actor yaitu admin , pengguna dan Aplikasi. Admin memiliki fungsi lebih dibanding dengan dengan pengguna.
Admin dapat melakukan login ke dalam database yang ada, sedangkan pengguna hanya dapat melakukan proses pembelajaran saja. pengguna tidak dapat masuk ke login system. Seorang admin dapat melakukan pengolahan database hasil gambar, suara dan update data lain, pengguna disajikan dengan berbagai macam tipe permainan. Setiap tipe permainan berbeda jenisnya. Untuk dapat bermain, pemain dapat melihatnya cara bermain.
3.1.5. Activity diagram
User memilih menu yang akan ditampilkan pada halaman menu yang telah dipilih sesuai keinginan user. User dapat berinteraksi dengan halaman menu yang telah dipilih.
Gambar 3 Activity Diagram
Pemain dapat memilih jenis permainan yang disediakan. Setiap tipe permainan harus diselesaikan oleh pemain. Jika pemain dapat menyelesaikan permainan maka pemain akan mendapat tugas selanjutnya.
Pemain juga dapat melihat cara bermain aplikasi dengan memilih menu tentang. Seperti yang digambarkan pada Activity Diagram dibawah ini :
Gambar 4 Activity Diagram Menu Tentang
IV. IMPLEMENTASI DAN PEMBAHASAN 1.1. Implementasi
Setelah implementasi dilakukan, maka tahap pengujian terhadap aplikasi yang telah dibangun dilakukan guna mengetahui apakah maksud dan tujuan yang ingin dicapai telah terpenuhi sehingga dapat ditarik kesimpulan.
1.1.1. Uji Coba Sistem dan Program
Pengujian ini dilakukan secara black box yaitu pengujian dilakukan dengan hanya memperhatikan masukan ke sistem dan keluaran ke sistem. Pengujian aplikasi menggunakan data uji berdasarkan data yang telah didapat dari aplikasi.
Skenario pengujian selengkapnya dapat dilihat pada tabel berikut :
1. Rencana Pengujian Menu Mewarnai Tabel 2 Rencana Pengujian Fasilitas Mewarnai
Item Uji Detail Pengujian Jenis Uji Pilih Gambar Memilih gambar
untuk diwarnai
Black box
Pilih Warna Memilih Warna untuk alat
Black box
Pilih Alat Warna Memilih Alat warna Black box Memilih Tebal Alat
Warna
Memilih ukuran kuas alat warna
Black box
2. Rencana Pengujian Menu Puzzle
Tabel 3 Rencana Pengujian Fasilitas Puzzle
Item Uji Detail Pengujian Jenis Uji Pilih Gambar
Puzzle
Memilih gambar pahlawan untuk dimainkan
Black box
Drag and drop Menyusun Kembali potongan gambar
Black box
3. Rencana Pengujian Menu Pak Ustad Tabel 4 Rencana Pengujian Fasilitas Pak Ustad
Item Uji Detail Pengujian Jenis Uji Pilih Huruf
Hijaiyah
Memilih Huruf hijaiyah Black box
Suara Mendengarkan Suara Huruf Hijaiyah
Black box
4. Rencana Pengujian Menu teman dari inggris Tabel 5 Rencana Pengujian Fasilitas Teman
dari Inggris
Item Uji Detail Pengujian Jenis Uji
Pilih gambar Memilih Gambar Black box
492
Suara Mendengarkan Suara tentang gambar dalam bahasa inggris
Black box
Aplikasi permainan untuk pembelajaran ini memiliki fitur diantaranya :
1. Halaman index
Halaman ini berisi sambutan selamat datang pada pengguna, untuk menggunakan aplikasi pilih tombol mulai.
Gambar 5 Tampilan Index
2. Home
Dalam menu home ini terdapat pilihan menu permainan pembelajaran yang dapat dijalankan.
Gambar 6 Tampilan Home
3. Menu Pilihan menggambar
Digunakan untuk memilih gambar mana yang akan dijadikan objek menggambar.
Gambar 7 Tampilan Pilihan Menggambar
4. Menu Menggambar
Menu menggambar adalah permainan mewarnai gambar yang telah
dipilih.
Gambar 8 Tampilan Menggambar 5. Menu Teman dari inggris
Menu teman dari inggris adalah permainan mengenal kosa kata dalam bahasa inggris dengan memilih gambar yang sesuai.
Gambar 9 Tampilan Teman dari Inggris
6. Menu Pak Ustad
Menu pak ustad adalah permainan mengenal huruf hijaiyah dengan meletakkan kursor pada huruf hijaiyah yang dipilih.
Gambar 10Tampilan Pak Ustad
7. Menu Home Admin
Home admin adalah tampilan awal dipanel admininistrator saat admin berhasil login .
Gambar 11 Tampilan Home Admin
V. KESIMPULAN DAN SARAN 5.1 Kesimpulan
Berdasarkan uraian pada bab-bab sebelumnya, maka dapat diambil beberapa kesimpulan dari pembuatan aplikasi ini adalah sebagai berikut:
1. Aplikasi permainan untuk pembelajaran ini menggunakan bahasa pemrograman HTML5.
2. Aplikasi permainan untuk pembelajaran ini dapat menjadi alternatif permainan untuk anak yang menyenangkan dan membantu proses belajar.
3. Aplikasi permainan untuk pembelajaran ini dapat menjadi alternatif permainan yang bebas dari zat-zat berbahaya untuk kesehatan anak.
4. Seorang pendidik atau orang tua dapat melakukan pengaturan tentang permainan.
5.2 Saran
493 Dari beberapa kesimpulan yang telah
diambil, maka dapat dikemukakan saran-saran yang akan sangat membantu untuk pengembangan program ini selanjutnya:
1. Perlu diadakan penambahan data permainan sehingga jenis permainan akan lebih bervariasi.
2. Aplikasi ini bersifat offline, perlu adanya pengembangan program sejenis secara online dengan memperhatikan perkembangan teknologi yang ada.
3. Dilakukan pengembangan program sejenis dengan adanya pengembangan dalam hal teknologi dan jenis permainan.
DAFTAR PUSTAKA
1. Dewanti Mayasita, 2010, Pembuatan Game edukasi Pembelajaran Bahasa Inggris Untuk Siswa Tingkat Sekolah Dasar Di UPT TK dan SD Kecamatan Ponjong Kabupaten Gunungkidul, http://repository.amikom.ac.
id/index.php/add_downloader/PUBLIKASI_07 .01.2407.pdf/207, diakses tanggal 31 Maret 2013 Pukul 16.00WIB
2. F.Siskos, Leslie, 2011, Web Standards Mastering HTML5, CSS3 and XML, Apress Media LLC ,New York
3. Lubbers Peter, Albes Brian, Frank Salim, 2011. Pro HTML5 Programming Second edition, Apress Media LLC ,New York . 4. Malone William, Create a Paint Bucket Tool
in HTML5 and JavaScript, 2012, http://www.williammalone.com/projects/html5 -canvas-javascript-drawing-app-with-bucket- tool/, diakses tanggal 23 maret 2013.
5. W3Schools, HTML5 Introduction , 2012 http://www.w3schools.com/html/html5
_intro.asp, diakses tanggal 1 April 2013 Pukul 02.00
494
