Metode dan Perancangan Sistem

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.

2

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

3

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

4

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 masingmasing 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

5

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.

6

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.

7

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

8

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