Perancangan dan Implementasi Aplikasi Multimedia pada Tabel

Perancangan dan Implementasi Aplikasi Multimedia
pada Tabel Periodik Unsur Kimia
Menggunakan HTML5
Artikel Ilmiah
Peneliti :
Nurani (672007261)
Michael Bezaleel, S.Kom., M.Cs
Mila Chrismawati Paseleng, S.Si., M.Pd
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
2014
Perancangan dan Implementasi Aplikasi Multimedia
pada Tabel Periodik Unsur Kimia Menggunakan HTML5
Artikel Ilmiah
Diajukan kepada
Fakultas Teknologi Informasi
untuk memperoleh gelar Sarjana Komputer
Peneliti :
Nurani (672007261)
Michael Bezaleel, S.Kom., M.Cs
Mila Chrismawati Paseleng, S.Si., M.Pd
Program Studi Teknik Informatika
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Salatiga
2014
i
Perancangan dan Implementasi Aplikasi Multimedia pada
Tabel Periodik Unsur Kimia Menggunakan HTML5
Oleh,
Nurani
NIM : 672007261
Artikel Ilmiah
Diajukan Kepada Program Studi Teknik Informatika, Fakultas Teknologi
Informasi guna memenuhi sebagian dari persyaratan untuk mencapai gelar Sarjana
Komputer
Disetujui oleh,
Mila Chrismawati Paseleng, S.Si., M.Pd
Pembimbing 2
Michael Bezaleel, S.Kom., M.Cs
Pembimbing 1
Diketahui oleh,
Dr. Sri Yulianto J. P., S.Si., M.Kom.
Ketua Program Studi
Dr. Dharmaputra T. Palekahelu, M.Pd.
Dekan
FAKULTAS TEKNOLOGI INFORMASI
UNIVERSITAS KRISTEN SATYA WACANA
SALATIGA
2014
ii
Lembar Pengesahan
Judul Tugas Akhir : Perancangan dan Implementasi Aplikasi Multimedia
InteraktifPembelajaran Tabel Periodik Unsur Kimia Menggunakan HTML5
Nama Mahasiswa : Nurani
NIM
: 672007261
Program Studi
: Teknik Informatika
Fakultas
: Teknologi Informasi
Menyetujui,
Mila Chrismawati Paseleng, S.Si., M.Pd
Pembimbing 2
Michael Bezaleel, S.Kom., M.Cs
Pembimbing 1
Mengesahkan,
Dr. Sri Yulianto J. P., S.Si., M.Kom.
Ketua Program Studi
Dr. Dharmaputra T. Palekahelu, M.Pd.
Dekan
Dinyatakan Lulus Ujian tanggal:
Penguji:
1.
2.
iii
Pernyataan
Artikel Ilmiah berikut ini :
Judul
:
Pembimbing :
Perancangan dan Implementasi Aplikasi Multimedia pada
Tabel Periodik Unsur Kimia Menggunakan HTML5
Michael Bezaleel, S.Kom., M.Cs
Mila Chrismawati Paseleng, S.Si., M.Pd
adalah benar hasil karya saya :
Nama
NIM
: Nurani
: 672007261
Saya menyatakan tidak mengambil sebagian atau seluruhnya dari hasil karya
orang lain kecuali sebagaimana yang tertulis pada daftar pustaka.
Pernyataan ini dibuat dengan sebenar-benarnya sesuai dengan ketentuan yang
berlaku dalam penulisan karya ilmiah.
Salatiga, 2014
Nurani
iv
v
vi
vii
viii
Perancangan dan Implementasi Aplikasi Multimedia pada Tabel
Periodik Unsur Kimia Menggunakan HTML5
1)
Nurani,2)Michael Bezaleel,3)Mila Paseleng
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Jl. Diponegoro 52-60, Salatiga 50711, Indonesia
1)
Email: [email protected], 2)[email protected],
3)
[email protected]
Abstract
Learning information in the world of education in Indonesia is still dotted heavily
on books. Multimedia can be a complement to the book in terms of belajar.Melalui
multimedia, educational information can be presented in an interesting and interactive
display, thus spurring students to understand the information in it. HTML5 is the
technology to display a web page. Components canvas equipped with CSS3 and
JavaScript, can be used to display an interactive image. In this study developed an
interactive learning application of chemical elements, web-based HTML5. The test
results showed that students more easily learn about the chemical elements. The
conclusion of this study is an interactive learning media can be developed using HTML5
technology.
Keywords: Learning System,Periodic Table, HTML5
Abstrak
Informasi pembelajaran di dunia pendidikan di Indonesia saat ini masih bertitik
berat pada buku. Multimedia dapat menjadi pelengkap suatu buku dalam hal
belajar.Melalui multimedia, informasi pendidikan dapat disajikan dalam tampilan yang
menarik dan interaktif, sehingga memacu siswa untuk memahami informasi di dalamnya.
HTML5 merupakan teknologi untuk menampilkan suatu halaman web. Komponen
canvas dilengkapi dengan CSS3 dan JavaScript, dapat digunakan untuk menampilkan
suatu gambar interaktif. Pada penelitian ini dikembangkan sebuah aplikasi pembelajaran
interaktif tentang unsur Kimia, berbasis web HTML5. Hasil pengujian menunjukkan
bahwa siswa lebih mudah mempelajari tentang unsur-unsur Kimia. Kesimpulan dari
penelitian ini adalah media pembelajaran interaktif dapat dikembangkan menggunakan
teknologi HTML5.
Kata Kunci: Sistem Pembelajaran,Tabel Periodik Unsur Kimia, HTML5
1)
Mahasiswa Program Studi Teknik Informatika, Fakultas Teknologi Informasi,
Universitas Kristen Satya Wacana.
2)
Staf Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana.
3)
Staf Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana.
1
1.
Pendahuluan
Sebagian besar proses pembelajaran pada saat ini, menempatkan peserta
didik sebagai obyek belajar, dan pengajar sebagai subyek atau centrallearning
sehingga interaksi cenderung berjalan searah dan keaktifan peserta didik kurang.
Siswa jarang diberikan kesempatan bereksplorasi dan melakukan sendiri apa yang
mereka minati. Proses pembelajaran yang satu arah tersebut mengakibatkan siswa
kurang aktif dalam memproses informasi. Effendy meneliti bahwa hal ini
menyebabkan para siswa menjadi bosan dan pada akhirnya mengalami kesulitan
dalam memahami setiap materi yang diajarkan [1]. Siswa tidak menjadi
pembelajar yang aktif untuk menemukan sendiri pemaknaan pengetahuan. Siswa
lebih banyak melihat dan mendengar (secara mental mereka pasif). Kondisi
tersebut tentunya kurang mendukung perkembangan kognitif siswa. Hal ini
dikarenakan siswa kurang diberi kesempatan untuk berperan aktif menggunakan
kemampuannya dalam mengeksplorasi lingkungan belajar guna memperoleh
pengetahuan baru. Permasalahan tersebut diatas dapat diatasi dengan memberikan
kesempatan pada siswa untuk belajar secara aktif (active learning) di kelas.
Pembelajaran aktif memerlukan media belajar yang langsung dapat digunakan
siswa sebagai sumber belajar [2].
Fasilitas pembelajaran yang bermutu, yakni SDM dan sumber materi
pembelajaran berpengaruh pada kualitas siswa [3]. Salah satu mata pelajaran
dalam bidang ilmu pengetahuan alam adalah Kimia. Mata pelajaran Kimia tidak
bisa lepas dari tabel periodik unsur kimia. Untuk mempelajarinya perlu usaha
memahami dan menghafal. Penyampaian materi pelajaran seperti contohnya tabel
periodik unsur masih bertitik berat pada buku. Buku yang hanya berisikan tulisan
akan membuat seorang siswa kurang tertarik. Hal ini dapat menyebabkan seorang
siswa akan cepat merasa jenuh dan minat belajar pun akhirnya dapat berkurang
[4].
Multimedia dapat menjadi pelengkap selain buku dalam proses belajar.
Melalui multimedia, informasi pendidikan dapat disajikan dalam tampilan yang
menarik dan interaktif, sehingga membantu siswa untuk memahami informasi di
dalamnya. Web dapat dikembangkan menjadi sebuah multimedia pembelajaran,
yaitu dengan menampilkan informasi pendidikan dilengkapi dengan gambar,
audio, dan video[5].
Aplikasi pembelajaran berbasis multimedia interaktif dapat
dikembangkan dalam bentuk web[6], sehingga mudah untuk diakses melalui
internet atau jaringan komputer tanpa perlu melakukan instalasi, selain daripada
browser internet yang digunakan untuk mengakses.Untuk membuat halaman web
menjadi interaktif, dapat digunakan teknologi HTML5[6]. Dengan menggunakan
teknologi HTML5, file audio dan video dapat ditampilkan tanpa perlu
menggunakan plug-in pada browser. Komponen canvas dilengkapi dengan CSS3
dan JavaScript, dapat digunakan untuk menampilkan suatu gambar interaktif[7].
Berdasarkan latar belakang masalah perlunya media pembelajaran
interaktif tentang unsur kimia, maka dalam penelitian ini dikembangkan sebuah
2
aplikasi pembelajaran berbasis web, yang dikembangkan menggunakan teknologi
HTML5.
2.
Tinjauan Pustaka
Penelitian sebelumnya terkait dengan topik penelitian ini yaitu penelitian
dengan judul “Penerapan HTML5 pada Sistem Pembelajaran Bahasa Mandarin
untuk Pemula (Studi Kasus: SD Xaverius 3 Bandar Lampung)”. Pada penelitian
tersebut dikemukakan masalah yaitu proses pembelajaran bahasa Mandarin yang
terjadi di SD Xaverius 3. Proses pembelajaran bahasa Mandarin yang terjadi di
SD Xaverius 3 adalah para siswa dituntut untuk membaca buku atau materi dalam
bentuk cetak yang diberikan oleh guru sehingga hanya terjadi komunikasi 1 (satu)
arah tanpa melibatkan interaksi langsung dengan para siswa. Hal ini menyebabkan
para siswa menjadi bosan dan pada akhirnya mengalami kesulitan dalam
memahami setiap materi yang diajarkan. Pada penelitian tersebut, dibangun suatu
sistem pembelajaran bahasa Mandarin interaktif, dengan tujuan membantu proses
belajar siswa agar dapat lebih meningkatkan minat belajar bahasa
Mandarin.Aplikasi ini berisi gambar dan suara untuk mendukung materi dasar
bahasa Mandarin yang berupa pelafalan bopomofo, nada dan huruf hanzi. Dalam
pembangunan aplikasi pembelajaran ini menerapkan teknologi HTML5. HTML5
memiliki keunggulan dalam penyediaan modul animasi, kanvas maupun videoaudio yang dapat membantu aplikasi dalam menyediakan gambar dan suara[1].
Penelitian yang berjudul "Efektivitas Pembelajaran Modul Untuk
Meningkatkan Prestasi Siswa Di Ajaran Struktur Atom dan Tabel Periodik Untuk
SMA (SHS) Siswa Kelas X", menjelaskan tentang perlunya media pendukung
pembelajaran selain buku pelajaran. Pada penelitian tersebut diuji dan dihasilkan
bahwa dengan menggunakan modul pendukung pembelajaran, pemahaman siswa
semakin meningkat. Penelitian tersebut juga menyarankan kepada guru untuk
menggunakan modul pembelajaran kimia untuk mengajarkan tentang struktur
atom dan tabel periodik [8].
Salah satunya dalam penelitian yang membahas tentang penggunaan
HTML adalah “Pencitraan 3 Dimensi Berbasis JavaScript Object Notation
(JSON) pada Hyper Text Markup Language 5 (HTML5)”. Pada penelitian
tersebut ditekankan bahwa HTML5 membuat mekanisme yang lebih mudah
dalam pencitraan, baik itu audio, video 2 dimensi hingga 3 dimensi sekalipun.
Kesimpulan dari penelitian tersebut adalah penggunaan HTML5 dapat
menghindari penggunaan plug-in Adobe Flash atau Microsoft Silverlight [9].
Berdasarkan penelitian-penelitian terkait sistem pembelajaran dan
HTML5, maka dilakukan penelitian tentang pemanfaatan teknologi HTML5
dalam pengembangan sistem pembelajaran tabel periodik unsur kimia untuk siswa
SMA.Pada penelitian ini, sistem yang dikembangkan memiliki karakteristik yang
membedakan dengan penelitian-penelitian sebelumnya, yaitu: (1) Sistem yang
dihasilkan adalah berbasis web; (2) Sistem diperuntukan bagi siswa SMA, sesuai
dengan Kompetensi Dasar SMA/MA 2013 Kementerian Pendidikan dan
Kebudayaan Indonesia, tentang kompetensi dasar mata pelajaran Kimia, salah
satunya adalah penguasaan tabel periodik[10]; (3)Untuk menampilkan multimedia
3
pada web digunakan plug-in Flash Player, pada penelitian ini digunakan HTML5
untuk membuat tampilan lebih interaktif dan menghindari penggunaan plug-in.
Penelitian yang dilakukan dibangun dengan menggunakan teknologi
HTML5. Fitur HTML5 yang digunakan pada penelitian ini adalah elemen canvas
dan video. Elemen canvas digunakan untuk menggambar grafik secara pada
halaman web, dengan menggunakan kode perintah JavaScript. Contoh tag canvas
adalah sebagai berikut: <canvas id="myCanvas" width="200" height="100"></canvas> .
Pada penelitian ini, elemen canvas dimanfaatkan untuk menampilkan grafik line
chart, yang berfungsi untuk menampilkan perkembangan nilai pengguna, sebagai
hasil mengerjakan quiz. Elemen video digunakan untuk menampilkan video. Pada
penelitian ini, digunakan video untuk melengkapi penjelasan suatu unsur kimia.
[11]. Contoh penggunaan tag video: <video width="320" height="240"
controls><source src="movie.mp4" type="video/mp4"></video>.
Secara etimologis, multimedia berasal dari kata multi (Bahasa Latin, nouns)
yang berarti banyak, bermacam – macam, dan medium(Bahasa Latin) yang berarti
sesuatu yang dipakai untuk menyampaikan atau membawa sesuatu. Sedangkan
multimedia sendiri merupakan suatu konten yang mengkombinasikan berbagai
konten yang berbeda, yaitu teks, audio, gambar, gambar animasi, dan video[12].
Kata medium dalam American Heritage Electronic Dictionary [13] juga diartikan
sebagai alat untuk mendistribusikan dan mempresentasikan informasi [14].
Multimedia interaktif berarti sebuah sistem multimedia yang informasi
didalamnya saling terhubung dan dapat disajikan bersamaan, sehingga pengguna
dapat berinteraksi, berkarya, melakukan navigasi, berkreasi dan berkomunikasi
[12].
Media pembelajaran, yaitu alat-alat yang membantu untuk mempermudah
guru dalam menyampaikan isi/materi pelajaran. Media dapat dibagi tiga
kelompok, yaitu media audio, media visual, dan media audio-visual. Kriteria yang
digunakan, antara lain: kesesuaiannya dengan kompetensi dasar dan hasil belajar,
kesesuaiannya dengan kondisi kelas/sekolah, kesesuaiannya dengan tingkat
perkembangan peserta didik, kemampuan guru dalam menggunakan metode,
waktu, dan sebagainya[15]. Musfiqon menjelaskan fungsi dari media
pembelajaran yaitu merupakan alat bantu yang berfungsi untuk menjelaskan
sebagian dari keseluruhan program pembelajaran yang sulit dijelaskan secara
verbal. Adapun ciri-ciri dari media pembelajaran antara lain: (a) Semua jenis alat
yang dimanfaatkan sebagai alat bantu pembelajaran, (b) Menumbuhkan minat
belajar siswa, (c) Meningkatkan kualitas pembelajaran, dan (d) Memudahkan
komunikasi antara guru dan siswa dalam pembelajaran.[16]
Tabel periodik unsur-unsur kimia adalah tampilan unsur-unsur kimia
dalam bentuk tabel. Unsur-unsur tersebut diatur berdasarkan struktur elektronnya
sehingga sifat kimia unsur-unsur tersebut berubah-ubah secara teratur sepanjang
tabel. Setiap unsur didaftarkan berdasarkan nomor atom dan lambang unsurnya.
Tabel periodik standar memberikan informasi dasar mengenai suatu unsur. Tabel
periodic unsur-unsur kimia dapat dilihat pada Gambar 1[17]. Berdasarkan
kompentensi inti dan dasar Kimia untuk SMA [10], siswa SMA harus mampu
mendeskripsikan struktur atom berdasarkan teori atom, sifat-sifat unsur, massa
atom relatif, dan sifat-sifat periodik unsur dalam tabel periodik serta menyadari
4
keteraturannya, melalui pemahaman konfigurasi elektron. Hal ini berarti harus
melalui proses memahami dan menghafal. Media pembelajaran yang menarik
dapat meningkatkan minta belajar siswa, dengan demikian dapat membantu siswa
untuk memahami dan menghafal tabel periodik unsur kimia.
Gambar 1 Tabel Periodik Unsur Kimia[17]
3.
Metode Penelitian
Metode yang digunakan pada penelitian ini adalah metode kualitatif, yaitu
dengan memperhatikan proses dan peristiwa [11]. Penelitian yang dilakukan,
diselesaikan melalui tahapan penelitian yang terbagi dalam empat tahapan, yaitu:
(1) Analisis kebutuhan dan pengumpulan data. Analisa dan pengumpulan data
dilakukan dengan teknik wawancara. (2) Perancangan sistem, (3) Implementasi
sistem, (4) Pengujian sistem dan analisis hasil pengujian.
Analisis Kebutuhan, dan Pengumpulan Data
Perancangan Sistem meliputi Perancangan Proses (UML)
Pengembangan dan Implementasi Sistem
Pengujian Sistem dan Analisis Hasil Pengujian
Gambar 2 Tahapan Penelitian [18]
Tahapan penelitian pada Gambar2, dapat dijelaskan sebagai berikut.
Tahap pertama: pengumpulan kebutuhan dilakukan untuk mengumpulkan data
dengan memperhatikan proses pembelajaran dilakukan, dan materi pembelajaran
yang digunakan, dalam hal ini adalah unsur-unsur kimia. Data diperoleh dengan
melakukan wawancara kepada Bpk. Dimas Gigih G selaku pengajar pelajaran
kimia di Ganesa Operation, dan berberapa siswa SMA di Salatiga. Wawancara
dilakukan dengan tujuan untuk mengetahui proses belajar tabel periodic yang ada
dan kesulitan-kesulitan yang dialami dalam memperlajari tabel periodik unsur
5
kimia;Tahap kedua:perancangan sistem, yaitu setelah mendapatkan data,
dilakukan perancangan sistem yang meliputi perancangan proses menggunakan
diagram Unified Modelling Language (UML) yang bertujuan untuk
menggambarkan secara jelas alur yang ada pada aplikasi yang akan dibangun.
Perancangan proses menggunakan UML (unified Modeling Language) meliputi
use case diagram, activity diagram dan class diagram.Perancangan database
termasuk didalamnya yaitu perancangan tabel, field dalam tabel, tipe data tiap
field dan perancangan relasi antar tabel. Perancangan proses dilakukan dengan
melihat proses bisnis manual kemudian dari proses tersebut dirancangan alur
proses pada sistem; Tahap ketiga: implementasi sistem, membuat aplikasi sesuai
perancangan proses pada tahap kedua. Database server yang digunakan adalah
MySQL database server. Antarmuka dibuat dengan menggunakan teknologi
HTML5 yang didukung dengan teknologi client-side scripting yaitu JavaScript
dan server-side scripting yaitu PHP. Semua teknologi yang digunakan pada
perancangan program ini merupakan teknologi opensource. Kemudian
menempatkan sistem yang telah dibuat secara online, dan melakukan pengujian
terhadap sistem; dan Tahap keempat:pengujiansistem, yaitu dilakukan pengujian
untuk melihat apakah aplikasi yang telah dibuat sudah sesuai dengan yang
diharapkan dan tidak ada error, jika belum sesuai maka akan dilakukan perbaikan.
Hasil pengumpulan data adalah informasi mengenai perlunya aplikasi
pembelajaran interaktif tentang unsur kimia, untuk mendukung proses belajar
selain buku pelajaran itu sendiri. Pada proses wawancara diketahui bahwa dengan
adanya aplikasi pembelajaran interaktif, dapat memudahkan siswa untuk
mempelajari materi tabel periodik, dan juga dapat meningkatkan minta belajar
siswa. Data yang lain adalah data-data materi pelajaran Kimia terutama mengenai
tabel periodik unsur dan struktur atom.
Gambar 3 menunjukkan tentang proses pembelajaran. User menggunakan
halaman Home sebagai referensi tentang unsur-unsur kimia dalam tabel periodik.
Untuk menguji hasil belajar, user dapat mengerjakan soal-soal latihan di halaman
Quiz. Nilai dari soal latihan akan ditampilkan pada halaman Score Board, bersama
dengan nilai dari user yang lain.
Gambar 3Flowchart Proses Penggunaan Sistem Pembelajaran
6
Gambar 4Use case Diagram Sistem
Sistem pembelajaran digunakan oleh 3 kategori pengguna, berlaku sebagai
aktor, seperti ditampilkan Gambar 4. Guest merupakan aktor yang hanya memiliki
hak untuk melihat informasi di halaman Home dan About.Member merupakan
aktor yang telah melakukan registrasi untuk menjadi member, kemudian memiliki
hak untuk mengakses halaman Quiz dan Score Board. Administrator merupakan
aktor yang berperan untuk mengatur data dan informasi yang ditampilkan pada
sistem, yaitu data unsur kimia dan data member.
Gambar 5 Activity Diagram Penggunaan Sistem Pembelajaran
Gambar 5 menunjukkan langkah yang dilakukan oleh Guest untuk menjadi
Member, kemudian mengerjakan soal-soal latihan, dan pada akhirnya melihat nilai
hasil pengerjaan. Nilai tersebut dibandingkan dengan Member yang lain dalam
bentuk peringkat, nilai tertinggi ditampilkan pada bagian paling atas.
7
Gambar 6 Class Diagram
Gambar 6 menunjukkan beberapa class yang digunakan dalam sistem.
Class-class ini merupakan representasi dari tabel pada database. Rancangan tabel
ditunjukkan pada Gambar 7.
Gambar 7 Relasi Tabel
Tabel yang digunakan pada sistem ditunjukkan pada Gambar 6.Tabel
unsur memiliki referensi ke tabel golongan, blok, periode, kategori dan
unsur_media. Tabel unsur_media menyimpan data multimedia seperti nama file
gambar atau video. Tabel member menyimpan data member, dan berelasi dengan
data test yang dikerjakan oleh member.
8
Gambar 8 Rancangan Home
Gambar 9 Rancangan Halaman Quiz
Gambar 8 menunjukkan rancangan tampilan halaman utama (home), pada
halaman ini dirancang untuk menampilkan unsur-unsur kimia dalam bentuk tabel
periodik standar. Tiap kotak pada tabel mewakili satu simbol unsur kimia.
Gambar 9 menunjukkan rancangan tampilan halaman quiz.
4.
Hasil dan Pembahasan
Hasil implementasi sistem berdasarkan perancangan yang telah dibuat,
dijelaskan sebagai berikut.
Gambar 10Tampilan Halaman Home
9
Pada Gambar 10, ditunjukkan tampilan halaman Home, halaman awal dari
sistem. Sesuai dengan rancangan tampilan (Gambar 8), pada halaman Home
ditampilkan tabel periodik unsur kimia.
Kode Program 1 Perintah untuk Menampilkan Tabel Periodik
1
2
3
4
5
6
<td class="pt-elm">
<a href="#" class="pt-elm-fill pt-logam-alkali" data-na="3">
<span class="pt-na">3</span>
<span class="pt-kode">Li</span>
<span class="pt-nama">Lithium</span>
</a>
</td>
Kode Program 1 merupakan perintah HTML untuk menampilkan sebuah
cell dari sebuah tabel HTML, dengan tag<td>. Di dalam cell, terdapat perintah <a
href>, yang berfungsi untuk menampilkan informasi tentang unsur Kimia, dalam
kode program diatas, yaitu Lithium.
Gambar 11 Tampilan Halaman Registrasi
Pada Gambar 11, ditunjukkan tampilan halaman Login dan Registrasi.
Nomor Induk Siswa (NIS) digunakan sebagai username, namun siswa tetap harus
melakukan registrasi sebagai member untuk dapat mengakses halaman quiz dan
scoreboard.
Gambar 12 Tampilan Halaman Quiz
Pada Gambar 12, ditunjukkan tampilan halaman Quiz. Setiap pertanyaan
disediakan 5 pilihan jawaban. Pada setiap halaman soal, ditampilkan nomornomor soal, dimaksudkan untuk mempermudah akses dari satu soal ke soal yang
lain. Untuk transisi antar soal, digunakan JavaScript untuk update soal dan pilihan
jawaban, sehingga tidak perlu dilakukan reload/refresh keseluruhan halaman web.
Perintah untuk proses transisi ditunjukkan pada Kode Program 2.
10
Kode Program 2 Perintah untuk Menampilkan Soal dan Pilihan Jawaban
1
2
3
4
5
6
7
8
9
10
$('#next').click(function(e) {
$('.soal.show').addClass('hide').hide().removeClass('show');
$('.soal.' + (soal_show + 1)).addClass('show').show();
soal_show++;
});
$('#prev').click(function(e) {
$('.soal.show').addClass('hide').hide().removeClass('show');
$('.soal.' + (soal_show - 1)).addClass('show').show();
soal_show--;
});
Kode Program 2 merupakan perintah JavaScript untuk tombol navigasi
"Selanjutnya" dan "Sebelumnya", seperti ditunjukkan pada Gambar 12. Ketika
tombol "Selanjutnya " ditekan, maka perintah pada baris 7-11 akan dijalankan.
Proses yang dilakukan adalah menampilkan soal dengan nomor yang sama dengan
nilai variable soal_show + 1, pada baris 2 dan 3. Kemudian menaikkan nilai
variabel soal_show sebesar 1 (incremental), pada baris 4. Perintah untuk tombol
navigasi "Sebelumnya", adalah melakukan proses sebaliknya, yaitu menampilkan
soal dengan nomor soal_show-1, pada baris 8 dan 9. Kemudian menurunkan nilai
dari variabel soal_show tersebut, pada baris 10.
Gambar 13 Tampilan Halaman Skor Nilai
Pada Gambar 13, ditunjukkan halaman yang digunakan untuk
menampilkan nilai dari masing-masing Member, dengan nilai tertinggi berada
diposisi paling atas.
Pengujian sistem dilakukan untuk menguji fungsi-fungsi aplikasi hasil
implementasi. Blackbox Testing, dilakukan untuk mengetahui bahwa semua
fungsi dan fitur pada sistem bekerja dengan tepat. Pengujian dilakukan dengan
cara melihat fungsi-fungsi pada sistem, kemudian membandingkan hasil
pengujian dengan hasil yang diharapkan. Hasil dari blackbox testing ditampilkan
pada Tabel 1.
Test
ID
Deskripsi
Tabel 1 Hasil Blackbox Testing
Hasil yang Diharapkan
Hasil yang Diberikan
Sistem
1. Siswa melakukan Data registrasi tersimpan Sesuai yang diharapkan.
registrasi
sebagai member.
11
2. Siswa
Sistem memberikan pesan Sesuai yang diharapkan.
kesalahan bahwa nomor
induk
tidak
dapat
digunakan.
3.
Sistem memberikan pesan Sesuai yang diharapkan.
kesalahan bahwa password
harus diisi.
4.
5.
6.
7.
8.
melakukan
registrasi dengan
menggunakan
nomor induk yang
telah ada di sistem.
Siswa melakukan
registrasi dengan
menggunakan
password kosong.
Siswa melakukan
login
dengan
nomor induk dan
password
yang
telah terdaftar
Siswa melakukan
login
dengan
nomor induk atau
password
yang
salah
Siswa mengisi kuis
dan
mengumpulkan
jawaban
Siswa
melihat
halaman
scoreboard
Siswa
melihat
detail
informasi
unsur kimia.
Login berhasil.
Sesuai yang diharapkan.
Sistem memberikan pesan Sesuai yang diharapkan.
kesalahan login.
Sistem menampilkan score Sesuai yang diharapkan.
berdasarkan jawaban yang
benar.
Sistem menampilkan nilai- Sesuai yang diharapkan.
nilai dari siswa yang lain.
Sistem
menampilkan Sesuai yang diharapkan.
halaman detail unsur.
9. Siswa
menekan Sistem memainkan video.
tombol 'play' video
tentang
unsur
kimia.
Sesuai yang diharapkan.
Berdasarkan hasil blackbox testing pada Tabel 1, disimpulkan bahwa
fungsi-fungsi pada sistem bekerja sesuai dengan yang diharapkan. Fungsi-fungsi
untuk registrasi member (nomor pengujian 1-3) berjalan dengan yang diharapkan.
Fungsi-fungsi untuk login (nomor pengujian 4-5) berjalan sesuai dengan hasil
yang diharapkan. Fungsi-fungsi untuk kuis (nomor pengujian 6-7) berjalan sesuai
dengan hasil yang diharapkan. Serta fungsi untuk menampilkan informasi unsur
kimia berupa teks dan video (nomor pengujian 8-9) juga berjalan sesuai dengan
hasil yang diharapkan.
Pada sistem yang telah dikembangkan, dilakukan pengujian terhadap 30
responden. Karakteristik responden adalah: (1) siswa kelas XII dari berbagai SMA
di Salatiga; (2) dari hasil wawancara awal, seluruh responden mengalami
kesulitan dalam belajar Tabel Periodik; (3) 20 siswa memiliki akses ke komputer
dan internet, namun keseluruhan siswa sudah pernah menggunakan browser
internet sebelumnya. Hasil pengujian ditunjukkan pada Tabel 2. Pengujian
12
dilakukan untuk mengetahui apakah sistem telah memenuhi ciri-ciri media
pembelajaran terutama media pembelajaran tabel periodik unsur kimia.
Tabel 2 Hasil Pengujian Terhadap 30 Responden
Nomor
1
2
3
4
5
Pertanyaan
Tabel periodik yang ditampilkan pada sistem
memiliki susunan yang familiar (sesuai dengan
buku pelajaran), sehingga mudah digunakan.
Sistem memberikan informasi yang jelas tentang
tabel periodik kimia dan unsur-unsur kimia yang
ada di dalamnya.
Sistem memberikan informasi yang lengkap
tentang tabel periodik kimia dan unsur-unsur
kimia yang ada di dalamnya.
Tampilan menarik, sehingga menumbuhkan
minta belajar/rasa ingin tahu lebih.
Sistem dapat membantu belajar tabel periodik
Ya
30
Tidak
0
28
2
28
2
29
1
28
2
Berdasarkan pertanyaan nomor 1 semua responden setuju bahwa tabel
periodik yang ditampilkan memiliki susunan yang familiar sehingga mudah untuk
dipahami, hal ini dikarenakan susunan tabel periodik yang digunakan merupakan
tabel periodik yang sesuai pada buku pelajaran Kimia. Untuk pertanyaan nomor 2,
28 siswa setuju bahwa informasi yang diberikan tentang unsur-unsur kimia sudah
jelas dan dapat mendukung siswa dalam belajar tentang unsur kimia. Berdasarkan
hasil pertanyaan nomor 3, dapat dikatakan bahwa sistem memberikan informasi
yang lengkap mengenai tabel periodik kimia dan unsur-unsur kimia, hal ini
didukung oleh jawaban dari 28 responden dari 30 siswa. Aplikasi ini juga dapat
dikatakan memiliki tampilan yang menarik sehingga menumbuhkan minat belajar
dan rasa ingin tahu lebih, hal ini didukung oleh 29 orang dari 30 responden yang
ada. Selain itu sistem juga dapat membantu belajar tentang tabel periodik
berdasarkan jawaban yang ditunjukan dari 28 responden. Dari 30 responden yang
ada, sekitar 1 sampai 2 responden memberikan respon yang negatif, hal ini
dikarenakan mereka tidak terbiasa menggunakan komputer, sehingga mengalami
kesulitan untuk menggunakan aplikasi.
5.
Simpulan
Berdasarkan penelitian, pengujian dan analisis terhadap sistem, maka
dapat diambil kesimpulan sebagai berikut: (1) Sebuah sistem pembelajaran tabel
periodik unsur kimiadapat dirancang dengan menggunakan teknologi HTML5; (2)
Sistem pembelajaran yang dikembangkan dapat membantu siswa untuk
memahami materi tabel periodik; Saran pengembangan yang dapat diberikan
untuk penelitian lebih lanjut adalah sebagai berikut: (1) Sistem perlu dilengkapi
dengan halaman bantuan penggunaan, atau video tutorial penggunaan sistem.
13
6.
[1].
[2].
[3].
[4].
[5].
[6].
[7].
[8].
[9].
[10].
[11].
[12].
[13].
[14].
[15].
[16].
[17].
[18].
Daftar Pustaka
Effendy, L. 2012. Penerapan HTML5 pada Sistem Pembelajaran Bahasa
Mandarin untuk Pemula (Studi Kasus: SD Xaverius 3 Bandar Lampung).
Turiono, Purwanto, Y. & Soeleman, A. 2009. E-Learning Bahasa Inggris
Berbasis Web. Jurnal Teknologi Informasi 5, 726–739.
Suhartanto, H. 2003. Strategi Implementasi Sistem E-learning untuk
Peningkatan Mutu Pendidikan Sekolah Indonesia. Fakultas Ilmu Komputer
Universitas Indonesia , 1–12.
Anori, S. & Putra, A. 2013. Pengaruh Penggunaan Buku Ajar Elektronik
Dalam Model Pembelajaran Langsung Terhadap Hasil Belajar Siswa
Kelas X SMAN 1 Lubuk Alung. Pillar of Physics Education 1, 104–111.
Nafiati, D. A. 2013. Meningkatkan Efektivitas Pembelajaran Melalui
Penggunaan Multimedia. Cakrawala 6.
Jobe, W. 2011. The future of e-learning: interaction, collaboration and
individualization with HTML5. World Conference on E-Learning in
Corporate, Government, Healthcare, and Higher Education , 1963–1971.
Tamaela, J. 2012. Analisis dan Perbandingan HTML4. 01 dan HTML5
(Studi Kasus: Web Online Music Store). Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana
Emiliya, R. 2012. Efektivitas Pembelajaran Modul Untuk Meningkatkan
Prestasi Siswa di Ajaran Struktur Atom dan Tabel Periodik Untuk SMA
(SHS) Siswa Kelas X. UNIMED Digital Repository
Thabit, N. A. 2011. Pencitraan 3 Dimensi Berbasis JavaScript Object
Notation (JSON) pada Hyper Text Markup Language 5 (HTML5). Program
Studi Ilmu Komputer, Universitas Pendidikan Indonesia
Kemendiknas 2013. Kompetensi Dasar SMA/MA.
Somantri, G. R. 2005. Memahami Metode Kualitatif. Makara, Sosial
Humaniora 9, 57–65.
Vaughan, T. 2006. Multimedia: Making it work. Tata McGraw-Hill
Education.
Pickett, J. P. 2006. The American heritage dictionary of the English
language. Houghton Mifflin.
Rachmat, A. & Roswanto, A. 2006. Pengantar Multimedia. Fakultas
Teknik Informatika Universitas Kristen Duta Wacana
Arifin, Z. 2012. Evaluasi Pembelajaran. Bandung: Remaja Rosdakarya.
Musfiqon 2012. Pengembangan Media Dan Sumber Belajar. Jakarta: PT.
Prestasi Pusta Karya
Carpi, A. 2002. The Periodic Table of Elements. Visionlearning
Hasibuan, Z. A. 2007. Metodologi Penelitian Pada Bidang Ilmu Komputer
dan Teknologi Informasi. Jakarta: Fakultas Ilmu Komputer Universitas
Indonesia
14