1
Jurnal Sistem Informasi, Vol 1 September 2012 IMPLEMENTASI MEDIA PEMBELAJARAN INTERAKTIF SEKOLAH DASAR KELAS 5 IPA DAN IPS MENGGUNAKAN HTML 5 Sunardy Iwan Sahputra Sinurat1, Wawan Yunanto 2 & Mardhiah Fadhli 3 1
Program Studi Sistem Informasi Politeknik Caltex Riau, Pekanbaru 28265, email:
[email protected] 2 Program Studi Teknik Informatika Politeknik Caltex Riau, Pekanbaru 28265, email:
[email protected] 3 Program Studi Sistem Informasi Politeknik Caltex Riau, Pekanbaru 28265, email: mardhiah @gmail.com
Abstrak Sekolah dasar (SD) adalah jenjang pendidikan paling dasar pada pendidikan formal di Indonesia. Keberhasilan proses pembelajaran disekolah sangat ditentukan oleh banyaknya faktor yang saling terkait yaitu : guru, siswa, metode, saran dan prasarana, situasi, dan lingkungan. Di sekolah-sekolah dasar proses belajar mengajar pada umumnya masih menggunakan model pembelajaran langsung seperti metode ceramah yang membuat suasana belajar menjadi monoton. Salah satu alternatif untuk mendukung meningkatkan pembelajaran pada anak sekolah dasar tersebut adalah dengan memanfaatkan peran teknologi informasi komputer yang saat ini sedang berkembang pesat. HTML5 adalah salah satu bahasa pemograman yang baru di dunia pengembangan website. Dengan kecanggihan HTML5 yang berkembang saat ini maka akan di bangun sebuah media pembelajaran interaktif untuk mendukung para siswa kelas 5 sekolah dasar belajar mata pelajaran IPA dan IPS secara mandiri baik di rumah maupun di sekolah. Output yang dihasilkan adalah media pembelajaran yang interatif dengan isi materi gambar disertai video dan evaluasi dengan menggunakan drag and drop. Berdasarkan hasil kuisioner yang diberikan kepada responden diperoleh hasil sebanyak 93% responden menyatakan sangat setuju bahwa media pembelajaran interaktif ini dapat digunakan sebagai salah satu alat bantu ajar sekolah dasar kelas 5.
Kata kunci: Sekolah Dasar, HTML5, Media Pembelajaran Interaktif Abstract Elementary school (SD) is the most basic education at formal education in Indonesia. The success of the learning process in schools is largely determined by the number of interrelated factors, namely: teachers, students, methods, suggestions and improvements, the situation, and the environment. In primary schools the teaching and learning processes in general are still using direct learning models such as the lecture method that makes learning atmosphere becomes monotonous. One alternative to support improved learning in primary school children is to utilize the role of computer information technology that is currently growing rapidly. HTML5 is a new programming language in the world of website development. With the growing sophistication of the current HTML5 it will be built an interactive learning media to support the fifth grade elementary school students learn science and social studies subjects independently both at home and at school. The resulting output is a interatif instructional media to the content of the material accompanied by video images and the evaluation by using drag and drop. Based on the results of a questionnaire given to the respondents, 93% responded stated strongly agreed that interactive learning media can be used as a tool of teaching 5th grade elementary school. Keywords: Primary School, HTML5, Media Interactive Learning
2 1
Pendahuluan
1.1
Latar Belakang
Menurut Hidayaturrahman (2010), keberhasilan proses pembelajaran sangat ditentukan oleh banyaknya faktor yang saling terkait yaitu : guru, siswa, metode, saran dan prasarana, situasi, dan lingkungan. Dalam proses pembelajaran sistem penyampaian materi apapun yang digunakan pada prinsipnya guru harus berusaha meningkatkan aktivitas belajar siswa. Di sekolah-sekolah dasar proses belajar mengajar pada umumnya masih menggunakan model pembelajaran langsung seperti metode ceramah yang membuat suasana belajar menjadi monoton Pelajaran IPA dan IPS merupakan pelajaran wajib yang masuk kedalam kurikulum ditingkat satuan pendidikan (KTSP) yang diperkenalkan oleh Pusat Kurikulum kepada sekolahsekolah pada sekitar tahun 2004. Menurut Sumaji (1998:31), IPA (sains) berupaya untuk membangkitkan minat manusia agar mau meningkatkan kecerdasan dan pemahamannya mengenai alam sekitarnya. S. Nasution, mendefinisikan IPS sebagai pelajaran yang merupakan fusi atau paduan sejumlah mata pelajaran sosial. HTML5 adalah salah satu bahasa pemograman yang baru di dunia pengembangan web site. Beberapa kecanggihan HTML5 yang berkembang saat ini adalah canvas (media corat coret langsung tanpa flash), video dan audio (tidak perlu menempelkan flash, quickplayer, atau real player untuk memutar audio video) dan sebagainya. Dari adanya permasalahan paragraf diatas penulis memutuskan untuk mengambil judul Projek akhir yang berjudul "Implementasi Media Pembelajaran Interaktif Sekolah Dasar Kelas 5 IPA dan IPS Menggunakan HTML5" yang didalamnya terdapat unsur pembelajaran dan latihan untuk materi IPA dan IPS kelas 5 Sekolah Dasar. 1.2 1. 2. 3.
1.3
Tujuan Adapun tujuan dibangunnya media pembelajaran interaktif ini adalah : Membangun media pembelajaran interaktif untuk sekolah dasar kelas 5 menggunakan teknologi HTML5. Membangun media pembelajaran interaktif yang dapat digunakan oleh para siswa sekolah dasar kelas 5 untuk belajar secara mandiri. Membangun media pembelajaran interaktif yang dapat dipahami dan menarik sesuai dengan kurikulum anak-anak sekolah dasar kelas 5. Perumusan Masalah
Adapun pembuatan proyek akhir ini mempunyai rumusan permasalahan sebagai berikut: 1. Bagaimana membangun media pembelajaran interaktif menggunakan HTML5. 2. Bagaimana membangun media pembelajaran yang dapat dipahami dan menarik untuk anak-anak sekolah dasar kelas 5. 3. Bagaimana mengimplementasikan seluruh materi pelajaran IPA dan IPS kelas 5 SEKOLAH DASAR semester 1 dan 2 ke dalam sistem ini menggunakan HTML5. 1.4
Batasan Masalah
Berhubung dengan luasnya tema, ruang lingkup masalah yang akan dibahas pada proyek ini sebagai berikut: 1. Media pembelajaran interaktif ini dibangun berbasis web menggunakan bahasa pemograman Web PHP dan HTML5. 2. Media pembelajaran interaktif ini nantinya akan di posting di internet sehingga dapat di akses secara online.
3 3. 4. 5. 6. 7.
8. 9. 1.5 1. 2. 2
Media pembelajaran interaktif ini mencakup materi belajar dan evaluasi anak sekolah dasar kelas 5 semester 1 dan semester 2 mata pelajaran IPA dan IPS. Hak akses user dibatasi yaitu Admin, member (guru, dan murid). Sistem ini hanya bisa diakses oleh browser yang telah support HTML5. (Internet Explorer 9, Firefox 3.5, Chrome 5, , Apple Safari 5, Opera 10,6). Proses upload gambar hanya mendukung gambar dengan format .jpg, .jpeg, .gif dan .png. Proses upload video hanya mendukung video yang berformat WebM, Ogg, MP4 (video pembelajaran tidak dibuat sendiri tetapi berdasarkan yang sudah ada dan disesuaikan dengan materi yang di masukan ke dalam sistem ini). Proses Evaluasi atau berlatih, selain dengan pilihan berganda ada juga drag and drop gambar untuk memilih jawaban mana yang benar. Tidak membahas mengenai sisi keamanan sistem yang dibangun. Manfaat Proyek akhir ini memiliki manfaat diantaranya sebagai berikut: Alat bantu dalam pembelajaran anak-anak sekolah dasar kelas 5. Para siswa dapat belajar secara mandiri. Tinjauan Pustaka
Pendidikan sekolah dasar (SD) adalah jenjang pendidikan formal paling dasar di Indonesia sebelum dapat melanjutkan pendidikan ke sekolah menengah pertama (SMP). Dan, secara umum pengertian sekolah dasar dapat kita katakan sebagai institusi pendidikan yang menyelenggarakan proses pendidikan dasar dan mendasari proses pendidikan selanjutnya. Sekolah dasar di tempuh selama 6 tahun, mulai dari kelas 1 sampai kelas 6. Menurut Nursidik Kurniawan, A.Ma.Pd.SD, ada beberapa karakteristik anak di usia Sekolah Dasar yang perlu diketahui para guru, agar lebih mengetahui keadaan peserta didik khususnya ditingkat Sekolah Dasar(SD). Adapun karakteristik anak menurut Nursidik Kurniawan, A.Ma.Pd.SD adalah sebagai berikut : 1. Senang bermain. 2. Senang bergerak, 3. Anak senang bekerja dalam kelompok. 4. Senang merasakan atau melakukan/memperagakan sesuatu secara langsung. HTML 5 adalah sebuah bahasa markup untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi ini dari internet yang merupakan versi kelima dari HTML. HTML 5 memberikan dukungan standar untuk beberapa fitur yang sebelumnya tidak mungkin bisa digunakan tanpa adanya plugin, misalnya ada beberapa API untuk drawing, soket dan lain sebagainya. Beberapa kelebihan yang dijanjikan HTML 5 adalah sebagai berikut : 1. Dapat ditulis dalam sintaks HTML (dengan tipe media teks/ html) dan XML 2. Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya 3. Integrasi (’inline’) MathML dan SVG dengan doctype yang lebih sederhana 4. Penulisan kode yang lebih efisien 5. Dapat dimengerti oleh peramban lawas (backwards compatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi 6. Memiliki beberapa fungsi API (Application Programming Interface) tambahan.
4 Menurut Perkasa (2011) bahwa dalam HTML5 ada beberapa teknologi terbaru yang tidak terdapat pada versi sebelumnya, yaitu : (1) offline data storage, (2)drag and drop, dan (3) geolocation. 3
Perancangan
Pada laporan proyek akhir ini dibuat beberapa model perancangan sistem yang melibatkan perancangan Use Case Diagram, flowchart, dan Entity Relationship Diagram (ERD). 3.1
Data Flow Diagram (DFD) level 0
1.
Data Flow Diagram level 0 Merupakan Context Diagram level 0 dari sistem yang akan dibuat, secara garis besar gambar tersebut menjelaskan alur dari proses yang terdapat dalam sistem yang telah dibuat.
DATA MURID MANAJEMEN MATERI MANAJEMEN MURID DATA MATERI DATA GURU MANAJEMEN MURID MANAJEMEN GURU DATA MURID
ADMIN
GURU
KONFIRMASI LOGIN USERNAME DAN PASSWORD USERNAME DAN PASSWORD KONFIRMASI LOGIN
1 MANAJEMEN KELAS
DATA SARAN
DATA KELAS
MANAJEMEN SARAN
MANAJEMEN SARAN DATA SARAN DATA SARAN MEMBERIKAN SARAN
DATA BERLATIH MANAJEMEN BERLATIH
SISTEM
DATA NILAI LATIHAN LIHAT NILAI LATIHAN MURID
+
USERNAME DAN PASSWORD KONFIRMASI LOGIN MURID PILIH PELAJARAN DATA PELAJARAN BERLATIH PELAJARAN DATA EBRLATIH
Gambar 1
Use Case Diagram admin
DATA SEMESTER TAMBAH SEMESTER
5 2.
Data Flow Diagram level 1
Merupakan Data Flow Diagram (DFD) level 1 dari sistem yang akan dibuat, secara garis besar gambar tersebut menjelaskan alur dari proses yang terdapat dalam sistem yang telah dibuat. Data Flow Diagram level 1 ini merupakan pengembangan dari Data Flow Diagram level 0.
DT SARAN DT SARAN DATA GURU DATA GURU DT BERLATIH
DATA ADMIN DT GURU 1DB ADMIN DT ADMIN DT GURU
5
DT SARAN
DT SARAN 5 DB SARAN DT SARAN MANAJEMEN SARAN DT SARAN
DB 7 BERLATIH DT BERLATIH
2DB GURU
+ USERNAME DAN PASSWORD KONFIRMASI LOGIN ADMIN 1 KONFIRMASI LOGIN GURU
DT BERLATIH 7 DT BERLATIH MANAJEMEN BERLATIH
USERNAME DAN PASSWORD LOGIN GURU
ADMIN
DATA SARAN
DT MATERI DT GURU DT GURU
+ 8
DT SARAN MANAJEMEN SARAN
DT MATERI
+ DT MURID 3DB MURID DT MURID
2
9 DB 8 LIHAT NILAI DT LATIHANLATIHAN LATIHAN MURID DT LATIHAN
DT LATIHAN
MANAJEMEN GURU
DT LATIHAN
+
KONFIRMASI LOGIN MURID USERNAME DAN PASSWORD
3 DT MURID DT MURID
6 DT MATERI DB MATA 6 MANAJEMEN PELAJARAN MATERI
DT MURID DT MURID
MANAJEMEN MURID
DT MATERI
+ DT SEMESTER DT MURID DT SEMESTER DT MURID
+
10 DB 9 DT SEMESTERSEMESTER TAMBAH DT SEMESTER SEMESTER
DATA PELAJARAN 11 DATA PELAJARAN
4 MANAJEMEN KELAS
DT KELAS DT KELAS
MURID
DATA PELAJARAN BELAJAR IPA DAN IPSDATA PELAJARAN
+
DT KELAS
12
4DB KELAS
DT KELAS
BERLATIH BERLATIHBERLATIH IPA DAN IPS DATA EBRLATIH
13 DT SARAN
MEMBERIKAN SARAN
DT SARAN DT SARAN DT SARAN
Gambar 2
Use Case Diagram guru
DT BERLATIH DT BERLATIH
6 3.2
Flowchart Flowchart atau yang sering disebut diagram alir ini digunakan untuk menggambarkan alur suatu program menjadi lebih sederhana sehingga program tersebut dapat lebih dimengerti. Pada proyek akhir ini. Berikut adalah alur proses atau diagram alir pada proyek akhir yang berjudul Implementasi Media Pembelajaran Interaktif Sekolah Dasar Kelas 5 IPA dan IPS Menggunakan HTML5 ini yang ditunjukan pada gambar 4, gambar 5, gambar 6.
1.
Flowchart admin
Gambar 3
Flowchart admin
7 2.
3.
Flowchart guru
Gambar 4
Flowchart guru
Gambar 5
Flowchart murid
Flowchart Murid
8 3.3
ERD
perancangan ERD sistem ini dapat dilihat pada Gambar 6 Username_murid
Pwd_murid
Id_murid
Nama_ murid
Sekolah_murid
Email_murid
Status_murid
foto
Keterangan _murid
Ttl_murid
murid
n
n Id_latihan
nilai
latihan
Waktu_latihan 1
Id_admin
n
username Id_berlatih pwd
berlatih Opsi_d
admin
Opsi_a
memiliki
Nama_admin
Cretaed_by
Opsi_b berlatih
Nama_latihan
Opsi_c jawawan 1 saran
Id_saran
Nama_kelas Id_kelas
saran
n
kelas
Status_kelas
n Id_pbm
pbm n Id_guru n guru
Username_guru
Pwd_guru
Nama_guru J_kelamin
Ttl_guru punya
Sekolah_guru Foto_gur u
n
1
Status_guru
Email_guru
tahun Id_mapel Nama_mapel Materi_foto
diajarkan
1
semester Id_semester
Materi_teks
Mata_pelajaran
n Nama_semester
Materi_video
Created_by
bab
Gambar 6 ERD
4
Pengujian dan Analisa
Proses kerja pada sistem ini adalah ketika di jalankan pertama kali memberikan tampilan login, jadi yang dapat mengakses sistem ini adalah khusus untuk orang-orang yang telah mendapatkan hak akses yaitu berupa username dan password. Untuk hak akses sendiri di bagi menjadi 3, yaitu admin, guru, dan murid. Berikut ini adalah hasil dari pembuatan sistem yang telah dibangun dengan menggunakan HTML5 dan PHP dengan database MySQL. 1. Halaman Admin Tampilan admin memiliki menu sebagai berikut manage guru, manage materi, manage soal, manage murid, manage pbm, manage nilai, manage saran, manage kelas, manage semester. Admin dapat memanage guru, pbm, materi, soal, murid, nilai, saran, kelas, dan semester.
9
Gambar 7 Halaman admin
2.
Halaman guru Menu guru berisi manage murid, manage materi pembelajaran, manage latihan, manage nilai, manage kelas, dan ada menu saran. Untuk menu manage murid, manage materi, manage soal, manage kelas, manage nilai pada guru, hampir sama seperti pada admin.
Gambar 8 Halaman guru 3.
Halaman murid
Menu pada halaman murid terdapat beberapa menu yaitu pelajaran yang terbagi menjadi dua kategori pelajaran, latihan juga terbagi menjadi dua kategori latihan, saran. Isi dari menu murid dapat dilihat pada Gambar 9 dan Gambar 10:
Gambar 10 Halaman pelajaran pada murid
10
Gambar 6
5
Penutup
5.1
Kesimpulan
Halaman bagi murid untuk berlatih drag and drop
Berdasarkan hasil penelitian terhadap sistem media pembelajaran interaktif ini, dapat ditarik beberapa kesimpulan : 1. Media pembelajaran interaktif ini dapat digunakan untuk belajar secara mandiri oleh siswa. 2. Media pembelajaran interaktif ini baik digunakan sebagai salah satu alat bantu ajar disekolah dasar kelas 5. 3. Media Pembelajaran Interaktif ini mudah dipahami dan menarik bagi anak sekolah dasar kelas 5. 5.2
Saran
Untuk pengembangan aplikasi ini maka ada beberapa hal yang penulis sarankan: 1. Menambahkan sistem untuk menambah level tingkat kelas ,sehingga tidak hanya untuk kelas 5 saja. 2. Menambahkan fitur import materi video yang mendukung semua format video.
Daftar Pustaka [1]
[2] [3] [4] [5]
Hidayaturrahman, Imam. Diambil pada 15 juli 2012 dari http://library.um.ac.id/freecontents/index.php/pub/detail/pemanfaatan-media-pembelajaran-interaktif-pada-matapelajaran-ilmu-pengetahuan-alam-kelas-iv-sdn-bluuran-1-sampang-imamhidayaturrahman-48897.html Nursidik Kurniawan. Diambil pada 29 juli 2012 dari http://nhowitzer.multiply.com/journal/item/3 Perkasa, M. Zulqi Sutra. (2011). Eksplorasi Html5 Canvas pada Sistem Menggambar dan Mewarnai untuk Anak Usia Dini. Pekanbaru : Politeknik Caltex Riau. sumaji (1998). Diambil pada 25 juli 2012 dari http://id.shvoong.com/socialsciences/education/2120773-pengertian-mata-pelajaran-ipa/ S. Nasution. Diambil pada 25 juli 2012 dari http://massofa.wordpress.com/2010/12/09/pengertian-ruang-lingkup-dan-tujuan-ips/
