Jurnal Teknika Vol. 5 No.2 September 2013
ISSN No. 2085 - 0859
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. 1.1.
PENDAHULUAN 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.
II. 2.1.
Tujuan Membuat permainan pendidikan anak menggunakan HTML5. Merancang permainan pendidikan anak yang interaktif dan menarik Merancang permainan yang aman untuk anak
LANDASAN TEORI 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
489
Jurnal Teknika Vol. 5 No.2 September 2013
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 anakanak 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. 3.1.
ISSN No. 2085 - 0859
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 Pengguna Admin
Create √
Update √
delete √
Select √ √
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.
ANALISA DAN PERANCANGAN SISTEM Tahap Project Planning & Tahap Analisa
490
Jurnal Teknika Vol. 5 No.2 September 2013
ISSN No. 2085 - 0859
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
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.
IV. 1.1.
IMPLEMENTASI DAN PEMBAHASAN 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 Pilih Gambar Pilih Warna Pilih Alat Warna Memilih Tebal Alat Warna
2.
Detail Pengujian Memilih gambar untuk diwarnai Memilih Warna untuk alat Memilih Alat warna Memilih ukuran kuas alat warna
Jenis Uji Black box Black box Black box Black box
Rencana Pengujian Menu Puzzle Tabel 3 Rencana Pengujian Fasilitas Puzzle
Item Uji Pilih Gambar Puzzle Drag and drop
Detail Pengujian Memilih gambar pahlawan untuk dimainkan Menyusun Kembali potongan gambar
Jenis Uji Black box Black box
3. Rencana Pengujian Menu Pak Ustad Tabel 4 Rencana Pengujian Fasilitas Pak Ustad 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.
Item Uji Pilih Huruf Hijaiyah Suara
4.
Detail Pengujian Memilih Huruf hijaiyah
Jenis Uji Black box
Mendengarkan Suara Huruf Hijaiyah
Black box
Rencana Pengujian Menu teman dari inggris Tabel 5 Rencana Pengujian Fasilitas Teman dari Inggris
Item Uji Pilih gambar
Detail Pengujian Memilih Gambar
Jenis Uji Black box
491
Jurnal Teknika Vol. 5 No.2 September 2013
Suara
Mendengarkan Suara tentang gambar dalam bahasa inggris
ISSN No. 2085 - 0859
Menu teman dari inggris adalah permainan mengenal kosa kata dalam bahasa inggris dengan memilih gambar yang sesuai.
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 9 Tampilan Teman dari Inggris 6. Gambar 5 Tampilan Index 2.
Home Dalam menu home ini terdapat pilihan menu permainan pembelajaran yang dapat dijalankan.
Menu Pak Ustad Menu pak ustad adalah permainan mengenal huruf hijaiyah dengan meletakkan kursor pada huruf hijaiyah yang dipilih.
Gambar 10Tampilan Pak Ustad 7. Gambar 6 Tampilan Home 3.
Menu Home Admin Home admin adalah tampilan awal dipanel admininistrator saat admin berhasil login .
Menu Pilihan menggambar Digunakan untuk memilih gambar mana yang akan dijadikan objek menggambar.
Gambar 11 Tampilan Home Admin V. 5.1 Gambar 7 Tampilan Pilihan Menggambar 4.
5.
Menu Menggambar Menu menggambar adalah permainan mewarnai gambar yang telah
dipilih. Gambar 8 Tampilan Menggambar Menu Teman dari inggris
KESIMPULAN DAN SARAN 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
492
Jurnal Teknika Vol. 5 No.2 September 2013
ISSN No. 2085 - 0859
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.
2.
3.
4.
5.
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 F.Siskos, Leslie, 2011, Web Standards Mastering HTML5, CSS3 and XML, Apress Media LLC ,New York Lubbers Peter, Albes Brian, Frank Salim, 2011. Pro HTML5 Programming Second edition, Apress Media LLC ,New York . Malone William, Create a Paint Bucket Tool in HTML5 and JavaScript, 2012, http://www.williammalone.com/projects/html5 -canvas-javascript-drawing-app-with-buckettool/, diakses tanggal 23 maret 2013. W3Schools, HTML5 Introduction , 2012 http://www.w3schools.com/html/html5 _intro.asp, diakses tanggal 1 April 2013 Pukul 02.00
493
Jurnal Teknika Vol. 5 No.2 September 2013
ISSN No. 2085 - 0859
Halaman ini sengaja dikosongkan
494
