Perancangan dan Implementasi Aplikasi Multimedia pada Tabel Periodik Unsur Kimia Menggunakan HTML5 Artikel Ilmiah

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

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

<span class="pt-na">3 <span class="pt-kode">Li <span class="pt-nama">Lithium

Kode Program 1 merupakan perintah HTML untuk menampilkan sebuah cell dari sebuah tabel HTML, dengan tag. Di dalam cell, terdapat perintah , 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