i

Aplikasi Pembelajaran IPA Berbasis Multimedia Interaktif Menggunakan HTML5

(Studi Kasus: SD Negeri 06 Salatiga)

TUGAS AKHIR

Diajukan kepada Fakultas Teknologi Informasi

Untuk memperoleh Gelar Sarjana Komputer

Peneliti : Wuri Pujayanti 672007146

Michael Bezaleel Wenas, S.Kom., M.Cs. Adriyanto Juliastomo Gundo, S.Si., M.Pd.

Program Studi Teknik Informatika Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana Salatiga

Maret 2012

ii

iii

Pernyataan

Tugas akhir yang berikut ini :

Judul : Aplikasi Pembelajaran IPA Berbasis

Multimedia Interaktif Menggunakan HTML5

(Studi Kasus SDN 06 Salatiga).

Pembimbing : 1. Michael Bezaleel Wenas, S.Kom., M.Cs.

2. Adriyanto Juliastomo Gundo, S.Si., M.Pd.

Adalah benar hasil karya saya :

Nama : Wuri Pujayanti

Nim : 672007146

Saya menyatakan tidak mengambil sebagian atau seluruhnya dari

hasil karya orang lain kecuali sebagaimana yang tertulis pada daftar

pustaka.

Pernyataan ini dibuat dengan sebenarnya sesuai dengan ketentuan

yang berlaku dalam penulisan karya ilmiah.

Salatiga, Maret 2012

Wuri Pujayanti

iv

Prakata

Puja dan puji syukur penulis panjatkan kepada Allah SWT

atas Rahmat dan Hidayah-Nya, penulis dapat menyelesaikan tugas

akhir yang berjudul “Aplikasi Pembelajaran IPA Berbasis

Multimedia Interaktif Menggunakan HTML5” ini. Tugas akhir

ini disusun untuk memenuhi persyaratan dalam memperoleh gelar

Sarjana Komputer pada Program Studi Teknik Informatika, Fakultas

Teknologi Informasi Universitas Kristen Stya Wacana Salatiga.

Tugas akhir ini dapat selesai berkat bantuan dari berbagai

pihak yang telah memberikan bimbingan, ide, dan berbagai

dukungan lainnya kepada penulis. Pada kesempatan ini penulis

mengucapkan terima kasih kepada :

1. Bapak Andeka Rocky Tanamaah, S.E., M.Cs., selaku Dekan

Fakultas Teknologi Informasi Universitas Kristen Satya

Wacana Salatiga.

2. Bapak Dian W. Chandra, S.Kom., M.Cs., selaku Ketua

Program Studi Teknik Informatika Fakultas Teknologi

Informasi Universitas Satya Wacana Salatiga.

3. Bapak Michael Bezaleel Wenas, S.Kom., M.Cs., selaku

dosen pembimbing pertama yang selalu memberikan arahan

dan dukungan dalam penyelesaian laporan penelitian ini.

Terimakasih telah membimbing penulis dengan baik

sehingga laporan penelitian ini bisa selesai dengan baik.

4. Bapak Adriyanto Juliastomo Gundo, S.Si., M.Pd., selaku

dosen pembimbing kedua dan selaku Koordinator KP/TA

Fakultas Teknologi Informasi, Universitas Kristen Satya

v

Wacana, Salatiga. Terima kasih atas kesabarannya dalam

membimbing penulis, masukan-masukan yang sangat berarti

untuk penulis, serta kata-kata positif yang selalu

membangkitkan semangat penulis.

5. Dosen-dosen pengajar dan asisten-asisten di FTI yang baik

secara langsung maupun tidak langsung telah bersama-sama

membagikan pengetahuannya kepada penulis.

6. Petugas TU FTI yang selama ini telah banyak berjasa dalam

pelayanannya kepada mahasiswa.

7. Pak Joko dan Pak Wagimin, terima kasih sudah membantu

sehingga laporan penelitian ini bisa selesai.

8. Teman-teman di FTI angkatan 2007, angkatan sebelumnya

dan sesudahnya yang tidak dapat penulis sebutkan satu per

satu.

9. Teman-teman seperjuangan sekaligus sahabat-sahabat

terdekat, Novia, Etna, Rani, Danang, Anjas, Arya, Angga,

Rosa dan yang lain. Terima kasih atas semangat dan bantuan

yang selalu diberikan. “Luv u all ^^”.

10. Kakak-kakakq koh Mike, kak Rici Lozano, kak abet, kak

Dian. Terima kasih semua bantuan dan semangat yang

diberikan sehingga laporan penelitian cepat selesai dan

mendapatkan hasil yang terbaik.

11. Seseorang yang selalu membuat saya tersenyum dan bahagia,

semangat dan doanya juga.

12. Yang tersayang Bapak, Ibuk, Dawis, dan semua keluarga

yang selalu memberikan doa dan dukungan. Semoga Allah

vi

senantiasa memberikan kesehatan dan umur panjang, betapa

besar pengorbanan dan usaha yang diberikan kepada penulis.

Penulis menyadari pembuatan tugas akhir ini masih belum

sempurna. Oleh karena itu, kritik dan saran yang membangun sangat

penulis harapkan dalam pengembangan laporan penelitian

khususnya, dan dalam pengembangan ilmu pengetahuan ke

depannya.

Salatiga, Maret 2012

Wuri Pujayanti

vii

Daftar Isi

Halaman Judul ............................................................................. i Lembar Pengesahan .................................................................... ii Halaman Pernyataan ................................................................... iii Prakata .......................................................................................... iv Daftar Isi ....................................................................................... viii Daftar Tabel ................................................................................. x Daftar Gambar ............................................................................ xi Kode Program .............................................................................. xiii Lampiran ...................................................................................... xiv Abstract .......................................................................................... xv Bab 1 Pendahuluan ...................................................................... 1

1.1 Latar Belakang ............................................................. 1 1.2 Rumusan Masalah ........................................................ 3 1.3 Tujuan dan Manfaat ..................................................... 3 1.4 Batasan Masalah .......................................................... 4 1.5 Sistematika Penulisan................................................... 4

Bab 2 Tinjauan Pustaka .............................................................. 7 2.1 Penelitian Terdahulu .................................................... 7 2.2 Multimedia.................................................................... 8

2.2.1 Multimedia Pembelajaran .................................. 9 2.2.2 Multimedia Interaktif ......................................... 9 2.2.3 Unsur-unsur Pendukung dalam Multimedia ...... 10 2.2.4 Manfaat Multimedia Pembelajaran .................... 11

2.3 HTML5......................................................................... 11 2.4 Pengertian Tata Surya................................................... 12

2.4.1 Matahari sebagai Pusat Tata Surya .................... 12 2.4.2 Planet-planet....................................................... 12 2.4.3 Orbit Tata Surya ................................................. 13 2.4.4 Gerhana Matahari ............................................... 13 2.4.5 Gerhana Bulan.................................................... 13 2.4.6 Meteor dan Meteoroid ....................................... 14 2.4.7 Sistem Penanggalan ........................................... 14

2.5 Profil SD Negeri Salatiga 06 ........................................ 14

viii

Bab 3 Metode Perancangan Sistem ........................................... 17 3.1 Metode Perancangan Sistem ........................................ 17

3.1.1 Kebutuhan Sistem .............................................. 19 3.2 Perancangan Sistem...................................................... 19

3.2.1 Use Case Diagram ............................................. 20 3.2.2 Activity Diagram ................................................ 21 3.2.3 Sequence Diagram.............................................. 22 3.2.4 Class Diagram.................................................... 27

3.3 Desain Antarmuka ........................................................ 28 3.3.1 Rancangan Antarmuka Halaman Utama ............ 28 3.3.2 Rancangan Antarmuka Halaman Pengenalan

Planet ................................................................. 29 3.3.3 Rancangan Antarmuka Halaman Orbit Tata

Surya .................................................................. 30 3.3.4 Rancangan Antarmuka Halaman Gerhana ......... 31 3.3.5 Rancangan Antarmuka Halaman Meteor ........... 32 3.3.6 Rancangan Antarmuka Halaman Sistem

Penanggalan ....................................................... 33 3.3.7 Rancangan Antarmuka Halaman Bantuan ......... 34

Bab 4 Hasil dan Pembahasan...................................................... 37

4.1 Prototype ...................................................................... 37 4.2 Implementasi Sistem .................................................... 52

4.2.1 Implementasi Halaman Utama ........................... 52 4.2.2 Implementasi Halaman Pengenalan Planet ........ 55 4.2.3 Implementasi Halaman Orbit Tata Surya........... 57 4.2.4 Implementasi Halaman Gerhana ........................ 58 4.2.5 Implementasi Halaman Meteor .......................... 59 4.2.6 Implementasi Halaman sistem Penanggalan ...... 59

4.3 Pengujian ...................................................................... 60 4.3.1 Pengujian pada User............................................ 60

Bab 5 Kesimpulan dan Saran ..................................................... 65 5.1 Kesimpulan................................................................... 65 5.2 Saran ............................................................................. 65

Daftar Pustaka ............................................................................. xvi

ix

Daftar Tabel

Tabel 4.1 Tabel Perbandingan Nilai Kelas VI A ........................ 61 Tabel 4.2 Tabel Perbandingan Nilai Kelas VI B......................... 63

x

Daftar Gambar

Gambar 3.1 Metode Perancangan Sistem ................................ 17 Gambar 3.2 Use Case Diagram Sistem ................................... 20 Gambar 3.3 Activity Diagram User.......................................... 22 Gambar 3.4 Sequence Diagram Pengenalan Planet................. 23 Gambar 3.5 Sequence Diagram Orbit Tata Surya.................... 24 Gambar 3.6 Sequence Diagram Gerhana................................. 25 Gambar 3.7 Sequence Diagram Meteor .................................. 26 Gambar 3.8 Sequence Diagram Sistem Penanggalan............... 27 Gambar 3.9 Class Diagram Aplikasi........................................ 27 Gambar 3.10 Rancangan Antarmuka Halaman Utama .............. 28 Gambar 3.11 Rancangan Antarmuka Halaman Pengenalan

Planet.................................................................... 30 Gambar 3.12 Rancangan Antarmuka Halaman Orbit Tata

Surya..................................................................... 31 Gambar 3.13 Rancangan Antarmuka Halaman Gerhana ........... 32 Gambar 3.14 Rancangan Antarmuka Halaman Meteor ............. 33 Gambar 3.15 Rancangan Antarmuka Halaman Sistem

Penanggalan.......................................................... 34 Gambar 3.16 Rancangan Antarmuka Halaman Bantuan............ 35 Gambar 4.1 Prototype 1 Halaman Utama ................................ 37 Gambar 4.2 Prototype 1 Halaman Pengenalan Planet ............. 38 Gambar 4.3 Prototype 1 Halaman Orbit Tata Surya................ 38 Gambar 4.4 Prototype 1 Halaman Gerhana ............................. 39 Gambar 4.5 Prototype 1 Halaman Meteor ............................... 39 Gambar 4.6 Prototype 1 Halaman Sistem Penanggalan .......... 40 Gambar 4.7 Prototype 2 Halaman Utama ................................ 41 Gambar 4.8 Prototype 2 Halaman Pengenalan Planet.............. 41 Gambar 4.9 Prototype 2 Halaman Orbit Tata Surya................ 42 Gambar 4.10 Prototype 3 Halaman Utama ................................ 43 Gambar 4.11 Prototype 3 Halaman Pengenalan Planet.............. 44 Gambar 4.12 Prototype 4 Halaman Utama ................................ 45 Gambar 4.13 Prototype 4 Halaman Pengenalan Planet ............. 46 Gambar 4.14 Prototype 4 Halaman Orbit Tata Surya................ 47 Gambar 4.15 Prototype 4 Halaman Gerhana ............................. 47 Gambar 4.16 Prototype 5 Halaman Utama ................................ 48 Gambar 4.17 Prototype 5 Halaman Pengenalan Planet ............. 49 Gambar 4.18 Prototype 5 Halaman Orbit Tata Surya................ 49

xi

Gambar 4.19 Prototype 5 Halaman Gerhana ............................. 50 Gambar 4.20 Prototype 5 Halaman Meteor ............................... 51 Gambar 4.21 Prototype 5 Halaman Sistem Penanggalan .......... 51 Gambar 4.22 Tampilan Halaman Utama ................................... 53 Gambar 4.23 Tampilan Halaman Pengenalan Planet................. 55 Gambar 4.24 Tampilan Halaman Orbit Tata Surya ................... 57 Gambar 4.25 Tampilan Halaman Gerhana................................. 58 Gambar 4.26 Tampilan Halaman Meteor................................... 59 Gambar 4.27 Tampilan Halaman Sistem Penanggalan.............. 60

xii

Kode Program

Kode Program 4.1 Pembuatan Canvas ........................................ 53 Kode Program 4.2 Halaman Utama............................................. 54 Kode Program 4.3 Tampilan Pengenalan Planet ......................... 56 Kode Program 4.4 Halaman Orbit Tata Surya ............................ 57

xiii

Lampiran

Lampiran 1 Surat Keterangan SDN Salatiga 06.................. xviii Lampiran 2 Angket Wanwancara Guru SDN 06 Salatiga .. xix Lampiran 3 Surat Pernyataan Guru SDN 06 Salatiga......... xx Lampiran 4 Wanwancara Kebutuhan Aplikasi kepada

Guru Kelas VI SDN 06 Salatiga......................` xxi Lampiran 5 Wawancara Aplikasi Revisi 1 kepada Guru

Kelas VI SDN 06 Salatiga ............................... xxii Lampiran 6 Wawancara Aplikasi Revisi 2 kepada Guru

Kelas VI SDN 06 Salatiga ............................... xxiii Lampiran 7 Wawancara Aplikasi Revisi 3 kepada Guru

Kelas VI SDN 06 Salatiga ............................... xxiv Lampiran 8 Wawancara Aplikasi Revisi 4 kepada Guru

Kelas VI SDN 06 Salatiga ............................... xxv Lampiran 9 Wawancara Aplikasi Revisi 5 kepada Guru

Kelas VI SDN 06 Salatiga ............................... xxvi Lampiran 10 Wawancara Aplikasi Revisi 6 kepada Guru

Kelas VI SDN 06 Salatiga ............................... xxvii

xiv

Abstract

Technology facilities such as computer, LCD and Wi-Fi are available in SDN 6 Salatiga. Based on the research, the teaching process of solar system is still conventional. Students understanding then become less maximum hence influence the learning result in the classroom. The aim of this study is to build an interactive multimedia-based learning application. The solar system learning application of planets introduction as well as its details is built using HTML5 technology an implemented in the web application. This application design uses prototyping and developed according to the result and evaluation in order to provide benefits for the users. This application helps teachers in delivering subject about solar system, especially the planets introduction and details information about each planet. The implementation of interactive multimedia-based applications using HTML5 can increase the learning value outcomes of student class VI at SDN 6 Salatiga. Keywords: HTML5, Multimedia, Solar system