Teknologi HTML5 Dalam Perancangan

Media Pembelajaran Penentuan Letak Suatu

Unsur Pada Tabel Periodik Unsur Kimia

Berbasis Web

(Studi Kasus : SMA Kristen 1 Salatiga)

Laporan Penelitian

Peneliti : Riyadhi Arthesan Liantho (672010204)

Christine Dewi, S.Kom., M.Cs.

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

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

Juli 2015

i

Teknologi HTML5 Dalam Perancangan

Media Pembelajaran Penentuan Letak Suatu

Unsur Pada Tabel Periodik Unsur Kimia

Berbasis Web

(Studi Kasus : SMA Kristen 1 Salatiga)

Laporan Penelitian

Diajukan kepada

Fakultas Teknologi Informasi

untuk memperoleh gelar Sarjana Komputer

Peneliti : Riyadhi Arthesan Liantho (672010204)

Christine Dewi, S.Kom., M.Cs.

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

Program Studi Teknik Informatika

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

Juli 2015

ii

iii

iv

v

vi

Pernyataan

Yang bertandatangan di bawah ini,

Nama : Riyadhi Arthesan Liantho

NIM : 672010204

menyatakan dengan sesungguhnya bahwa tugas akhir dengan

judul:

Teknologi HTML5 Dalam Perancangan Media Pembelajaran

Penentuan Letak Suatu Unsur Pada Tabel Periodik Unsur Kimia

Berbasis Web

(Studi Kasus : SMA Kristen 1 Salatiga).

yang dibimbing oleh:

1. Christine Dewi, S.Kom., M.Cs.

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

adalah benar hasil karya saya.

Saya menyatakan tidak mengambil sebagian atau seluruhnya dari

hasil karya orang lain kecuali sebagaimana tertulis pada daftar

pustaka.

Pernyataan ini dibuat sebenar-benarnya sesuai ketentuan yang

berlaku dalam penulisan karya ilmiah.

Salatiga, Agustus 2015

Yang memberi pernyataan,

Riyadhi Arthesan Liantho

vii

Prakata

Puji syukur ke hadirat Tuhan Yesus Kristus karena atas

berkat dan rahmat-Nya penulis dapat menyelesaikan tugas akhir

yang berjudul “Teknologi HTML5 Dalam Perancangan Media

Pembelajaran Penentuan Letak Suatu Unsur Pada Tabel Periodik

Unsur Kimia Berbasis Web (Studi Kasus : SMA Kristen 1

Salatiga)”, yang diajukan sebagai persyaratan kelulusan

mahasiswa Program Studi Strata Satu Teknik Informatika pada

Fakultas Teknologi Informasi Universitas Kristen Satya Wacana

Salatiga.

Dalam penyelesaian tugas akhir ini penulis mendapatkan

banyak bantuan dan dukungan dari berbagai pihak baik secara

langsung dan tidak langsung. Oleh karena itu, pada kesempatan

ini penulis ingin mengucapkan terima kasih kepada:

1. Bapak Dr. Dharmaputra T. Palekahelu, M.Pd., selaku Dekan

Fakultas Teknologi Informasi Universitas Kristen Satya

Wacana Salatiga.

2. Bapak Suprihadi, S.Si., M.Kom, selaku Ketua Program Studi

Teknik Informatika, Fakultas Teknologi Informasi,

Universitas Kristen Satya Wacana.

3. Ibu Christine Dewi, S.Kom., M.Cs., selaku dosen

pembimbing pertama yang telah memberikan bimbingan dan

arahan sehingga penulis dapat menyelesaikan tugas akhir ini.

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

dosen pembimbing dua yang telah memberikan bimbingan

viii

dan arahan sehingga penulis dapat menyelesaikan tugas akhir

ini.

5. Seluruh staff pengajar dan karyawan Fakultas Teknologi

Informasi UKSW.

6. Keluarga tercinta untuk dukungan doa dan semangat yang

diberikan.

7. Teman-teman FTI angkatan 2010 dan juga dari berbagai

angkatan.

Salatiga, Juli 2015

Riyadhi Arthesan Liantho

ix

Daftar Isi Halaman Judul ........................................................................... i

Lembar Pengesahan .................................................................. ii

Lembar Laporan Penelitian ....................................................... iii

Pernyataan Tidak Plagiat........................................................... iv

Lembar Persetujuan Akses ........................................................ v

Lembar Pernyataan.................................................................... vi

Prakata ....................................................................................... vii

Daftar Isi.................................................................................... ix

Daftar Gambar ........................................................................... x

Daftar Tabel .............................................................................. xi

Daftar Kode Program ................................................................ xii

Abstract ..................................................................................... xiii

Bab 1 Pendahuluan

1.1 Latar Belakang .............................................................. 1

1.2 Rumusan Masalah ......................................................... 2

1.3 Tujuan dan Manfaat ...................................................... 2

1.4 Batasan Masalah............................................................ 2

Bab 2 Tinjauan Pustaka ............................................................. 3

2.1 Penelitian Terdahulu ..................................................... 3

2.2 Media Pembelajaran ...................................................... 4

2.3 Bahasa Pemrograman HTML5 ..................................... 6

Bab 3 Metode dan Perancangan Sistem .................................... 8

3.1 Metode Perancangan Sistem ......................................... 8

3.2 Perancangan Sistem ....................................................... 9

3.2.1 Use Case Diagram ............................................. 10

3.2.2 Activity Diagram ......................................................... 11

3.2.3 Class Diagram ............................................................ 13

3.2.4 Sequence Diagram ...................................................... 14

Bab 4 Hasil dan Pembahasan .................................................... 16

4.1 Implementasi .................................................................. 16

4.2 Pengujian ........................................................................ 20

Bab 5 Kesimpulan dan Saran .................................................... 24

5.1 Kesimpulan .................................................................... 24

5.2 Saran Pengembangan ..................................................... 24

Daftar Pustaka ........................................................................... 25

x

Daftar Gambar

Gambar 3.1 Tahapan Penelitian ................................................ 8

Gambar 3.2 Use Case Diagram ................................................ 10

Gambar 3.3 Activity Diagram Siswa Mengerjakan Quiz .......... 11

Gambar 3.4 Activity Diagram Admin Menambahkan Daftar Soal

............................................................................................... 12

Gambar 3.5 Class Diagram....................................................... 13

Gambar 3.6 Sequence Diagram Siswa Dalam Mengerjakan Quiz

............................................................................................... 14

Gambar 3.7 Sequence Diagram Admin Dalam Menambahkan

Daftar Soal ................................................................................ 15

Gambar 4.1 Tampilan Halaman Home...................................... 16

Gambar 4.2 Tampilan Keterangan Prinsip Aufbau dan Aturan

Hund .......................................................................................... 17

Gambar 4.3 Halaman Hasil Test ............................................... 19

Gambar 4.4 Halaman Tambah Soal Admin ............................... 19

Gambar 4.5 Analisa Item Bagian Admin................................... 20

xi

Daftar Tabel

Tabel 4.1 Hasil Blackbox Testing ............................................. 21

Tabel 4.2 Hasil Pengujian Terhadap 20 Responden ................. 22

xii

Daftar Kode Program

Kode Program 4.1 Perintah untuk Menampilkan Video pada

Detail Unsur .............................................................................. 17

Kode Program 4.2 Perintah untuk Menampilkan Test Online dan

Quiz ........................................................................................... 18

Kode Program 4.3 Perintah untuk Menyimpan Hasil Quiz/Test

Online ........................................................................................ 18

xiii

Abstract

Instructional media in Indonesia is still based on

textbooks. Information technology can be a supporter of a book

in terms of learning. This research aims to design an interactive

learning media, so as to help students to more easily understand

the learning material in it. This instructional media design using

HTML5 technology and MySQL database server with a prototype

method. Components canvas equipped with CSS3 and JavaScript,

can be used to display an interactive image. Results of this study

media design to facilitate students in understanding the material

concerning the determination of the location of an element on the

periodic table of chemical elements.

Keywords: Learning System, Determination of the Location of An

Element On The Periodic Table of Chemical Elements, HTML5