Rancang bangun situs pembelajaran html5 dengan pendekatan gamifikasi

Hak cipta dan penggunaan kembali: Lisensi ini mengizinkan setiap orang untuk menggubah, memperbaiki, dan membuat ciptaan turunan bukan untuk kepentingan komersial, selama anda mencantumkan nama penulis dan melisensikan ciptaan turunan dengan syarat yang serupa dengan ciptaan asli. Copyright and reuse: This license lets you remix, tweak, and build upon work non-commercially, as long as you credit the origin creator and license it on your new creations under the identical terms.. Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP.

Laporan Skripsi RANCANG BANGUN SITUS PEMBELAJARAN HTML5 DENGAN PENDEKATAN GAMIFIKASI. Diajukan Oleh Willy Janitra 10110110014. PROGRAM STUDI TEKNIK INFORMATIKA FAKULTAS TEKNOLOGI INFORMASI DAN KOMUNIKASI UNIVERSITAS MULTIMEDIA NUSANTARA TANGERANG 2014.

HALAMAN PENGESAHAN RANCANG BANGUN SITUS PEMBELAJARAN HTML5 DENGAN PENDEKATAN GAMIFIKASI. Nama. : Willy Janitra. NIM. : 10110110014. Program Studi. : Teknik Informatika. Fakultas. : Teknologi Informasi dan Komunikasi. Gading Serpong, 18 Juli 2014. Dosen Penguji,. Ketua Sidang,. Adhi Kusnadi, M.Si.. Nanang Krisdianto, S.T., M.Kom.. Dosen Pembimbing,. Dodick Z. Sudirman, S. Kom., M.T.I.. Ketua Program Studi,. Maria Irmina Prasetiyowati, S.Kom., M.T.. i Rancang Bangun ..., Willy Janitra, FTI UMN, 2014.

PERNYATAAN TIDAK MELAKUKAN PLAGIAT. Dengan ini saya Nama. : Willy Janitra. NIM. : 10110110014. Program Studi. : Teknik Informatika. Fakultas. : Teknologi Informasi dan Komunikasi. Menyatakan bahwa skripsi yang berjudul “Rancang Bangun Situs Pembelajaran HTML5 Dengan Pendekatan Gamifikasi” adalah karya ilmiah pribadi saya, bukan karya ilmiah yang ditulis oleh orang atau lembaga lain. Semua karya ilmiah orang atau lembaga lain yang dirujuk dalam skripsi ini telah disebutkan sumbernya serta dicantumkan dalam daftar pustaka.. Gading Serpong, Juli 2014. Willy Janitra. ii Rancang Bangun ..., Willy Janitra, FTI UMN, 2014.

JUDUL :. RANCANG BANGUN SITUS PEMBELAJARAN HTML5 DENGAN PENDEKATAN GAMIFIKASI. ABSTRAKSI. Perkembangan teknologi di dunia sudah semakin meningkat dengan pesat, salah satunya adalah HTML. Versi terbaru dari HTML itu sendiri telah dirilis, yaitu HTML5. Dengan adanya HTML5, pembuatan aplikasi mobile menjadi lebih mudah karena HTML5 mendukung fitur cross platform. Selain mendukung aplikasi mobile, HTML5 juga dapat mempermudah pembuatan website dengan adanya tag-tag baru. Oleh sebab itu, penelitian ini bertujuan untuk meningkatkan minat orang-orang untuk menggunakan HTML5 dengan membangun sebuah situs khusus untuk mempelajari HTML5 dengan menerapkan gamifikasi. Fitur gamifikasi yang akan diterapkan adalah level, experience, achievement, leaderboards dan kunjungan berturut. Berdasarkan hasil dari penelitian, dapat disimpulkan bahwa dengan diterapkannya gamifikasi ini, minat orang-orang untuk menggunakan HTML5 cenderung meningkat. Terbukti dari hasil kuisioner yang diberikan telah mendapat respon yang positif.. Kata kunci: belajar HTML5, gamifikasi, website, game. iii Rancang Bangun ..., Willy Janitra, FTI UMN, 2014.

JUDUL: DEVELOPMENT OF GAMIFIED HTML5 EDUCATION SITE. ABSTRACT. Development of technology increase rapidly, one of them is HTML. The new version of HTML is released, named HTML5. With HTML5, creating mobile application become easier because HTML5 has cross platform feature. Beside creating mobile application, HTML5 also can help us to make website easier with its new tag. Because of that reason, this research has a goal to introduce HTML5 features and increase people interest to study HTML5 with creating website to learn HTML5 and applying gamification to the website. Gamification feature that will be used is level, experience, achievement, leaderboards and daily visit. Base on the research, implementing gamification can increase people interest to use HTML5. Prove by the questionnaire result, it gives positive respons.. Keywords: website, gamification, game, learn HTML5. iv Rancang Bangun ..., Willy Janitra, FTI UMN, 2014.

KATA PENGANTAR. Puji syukur diucapkan kepada Tuhan Yang Maha Esa atas berkah-Nya sehingga memampukan penulis untuk menyelesaikan tugas akhir ini sebagai syarat untuk memperoleh gelar strata satu pada Universitas Multimedia Nusantara. Penulis menyadari bahwa selesainya penulisan laporan tidak lepas dari dorongan berbagai pihak. Oleh karena itu izinkan penulis mengucapkan terima kasih yang tidak terhitung besarnya kepada : 1. Dr. Ninok Leksono, Selaku Rektor Universitas Multimedia Nusantara, 2. Maria Irmina Prasetiyowati, S.Kom., M.T., selaku Ketua Program Studi Teknik Informatika, 3. Dodick Z. Sudirman, S. Kom., M.T.I., selaku dosen pembimbing yang banyak membantu penulis selama proses pengerjaan skripsi, 4. Keluarga yang selalu mendukung dan memberikan semangat kepada penulis selama proses penulisan laporan skripsi ini, 5. Sahabat – sahabat yang selalu memberi dukungan. Penulis berharap penelitian ini dapat berguna bagi para pembaca, terutama mahasiswa dan mahasiswa Fakultas Teknologi Informasi dan Komunikasi di Universitas Multimedia Nusantara. Tangerang, Juli 2014. Penulis. v Rancang Bangun ..., Willy Janitra, FTI UMN, 2014.

DAFTAR ISI. HALAMAN PENGESAHAN ........................................................................................ i PERNYATAAN TIDAK MELAKUKAN PLAGIAT ................................................. ii ABSTRAKSI ............................................................................................................... iii ABSTRACT ................................................................................................................. iv DAFTAR ISI ................................................................................................................ vi DAFTAR GAMBAR ................................................................................................. viii DAFTAR TABEL ......................................................................................................... x BAB I PENDAHULUAN ........................................................................................... 1 1.1 Latar Belakang ................................................................................................... 1 1.2 Rumusan Masalah .............................................................................................. 3 1.3 Batasan Masalah ................................................................................................. 4 1.4 Tujuan Penelitian ................................................................................................ 4 1.5 Manfaat Penelitian .............................................................................................. 4 BAB II LANDASAN TEORI...................................................................................... 6 2.1 Interaksi Manusia dan Komputer ....................................................................... 6 2.2 Gamifikasi .......................................................................................................... 7 2.3 HTML5 ............................................................................................................... 9 2.4 PHP ................................................................................................................... 11 BAB III METODE DAN PERANCANGAN APLIKASI ........................................ 12 3.1 Metode Penelitian ............................................................................................. 12 3.2 Spesifikasi Sistem............................................................................................. 16 3.3 Perancangan Aplikasi ....................................................................................... 17 3.3.1 Flowchart Diagram .................................................................................... 17 3.3.2 Data Flow Diagram.................................................................................... 29 3.3.3 Entity Relationship Diagram (ERD) .......................................................... 37 3.3.4 Struktur Tabel ............................................................................................ 38 3.3.5 Desain Interface ......................................................................................... 46 BAB IV IMPLEMENTASI DAN UJI COBA .......................................................... 56 4.1 Implementasi .................................................................................................... 56 4.2 Uji Coba ........................................................................................................... 78 4.2.1 Mekanisme Uji Coba ................................................................................. 78 4.2.2 Analisa Uji Coba ........................................................................................ 84 BAB V SIMPULAN DAN SARAN ......................................................................... 93 5.1 Kesimpulan ....................................................................................................... 93 vi Rancang Bangun ..., Willy Janitra, FTI UMN, 2014.

5.2 Saran ................................................................................................................. 93 DAFTAR PUSTAKA ................................................................................................. 95. vii Rancang Bangun ..., Willy Janitra, FTI UMN, 2014.

DAFTAR GAMBAR. Gambar 1.1 Hasil survey developer KENDO UI .......................................................... 2 Gambar 1.2 Hasil survey kapan HTML5 penting bagi developer KENDO UI ............ 2 Gambar 3.1 Flowchart untuk user pada sistem yang belum tergamifikasi ................ 19 Gambar 3.2 Flowchart artikel ..................................................................................... 20 Gambar 3.3 Flowchart Elemen ................................................................................... 21 Gambar 3.4 Flowchart Evaluasi ................................................................................. 22 Gambar 3.5 Flowchart untuk User Pada Sistem yang Telah Tergamifikasi .............. 23 Gambar 3.6 Flowchart Artikel Gamifikasi ................................................................. 24 Gambar 3.7 Flowchart Elemen Gamifikasi ................................................................ 25 Gambar 3.8 Flowchart Evaluasi Gamifikasi ............................................................... 26 Gambar 3.9 Flowchart Leaderboard Gamifikasi ......................................................... 27 Gambar 3.11 Flowchart Untuk Admin Pada Sistem yang Telah Tergamifikasi ........ 28 Gambar 3.12 Flowchart Artikel Pada Admin ............................................................. 29 Gambar 3.13 Context Diagram ................................................................................... 30 Gambar 3.14 DFD Level 1 Sistem Html5trick ........................................................... 31 Gambar 3.15 DFD Level 2 Sesi Awal ........................................................................ 32 Gambar 3.16 DFD Level 2 Achievement ................................................................... 33 Gambar 3.17 DFD Level 2 Kegiatan User .................................................................. 35 Gambar 3.18 DFD Level 2 Kegiatan Admin .............................................................. 36 Gambar 3.19 Entity Relationship Diagram ................................................................. 37 Tabel 3.7 Struktur Tabel SK_ELEMENT_HISTORY ............................................... 40 Tabel 3.8 Struktur Tabel SK_ATRIBUT .................................................................... 40 Gambar 3.20 Halaman Home ...................................................................................... 47 Gambar 3.21 Halaman Login ...................................................................................... 48 Gambar 3.22 Halaman Register .................................................................................. 48 Gambar 3.23 Halaman Profil ...................................................................................... 49 Gambar 3.24 Halaman Riwayat .................................................................................. 49 Gambar 3.25 Halaman Leaderboard .......................................................................... 50 Gambar 3.26 Halaman Artikel .................................................................................... 51 Gambar 3.27 Halaman Artikel Detail ......................................................................... 51 Gambar 3.28 Halaman Elemen ................................................................................... 52 Gambar 3.29 Halaman Elemen Detail ........................................................................ 53 Gambar 3.30 Halaman Output .................................................................................... 54 Gambar 3.31 Halaman Soal ........................................................................................ 54 Gambar 3.32 Halaman Penghargaan ........................................................................... 55 Gambar 4.1 Halaman home ......................................................................................... 56 Gambar 4.2 Tampilan Saat Nama User Pada Leaderboard di Klik ........................... 57 Gambar 4.3 Tampilan Bantuan ................................................................................... 58 Gambar 4.4 Halaman Login ........................................................................................ 59 Gambar 4.5 Tampilan Peringatan Gagal Login........................................................... 59 Gambar 4.6 Halaman Register .................................................................................... 60 Gambar 4.7 Halaman Profil ........................................................................................ 61. viii Rancang Bangun ..., Willy Janitra, FTI UMN, 2014.

Gambar 4.8 Halaman Riwayat User ........................................................................... 61 Gambar 4.9 Halaman Riwayat Setelah Jumlah Angka di Klik ................................... 62 Gambar 4.10 Halaman Penghargaan ........................................................................... 62 Gambar 4.11 Halaman Penghargaan yang Telah Dibuka ........................................... 63 Gambar 4.12 Potongan Halaman Leaderboard .......................................................... 64 Gambar 4.13 Potongan Program Untuk Menampilkan Leaderboard Evaluasi .......... 64 Gambar 4.14 Halaman Edit Profil User ...................................................................... 65 Gambar 4.15 Halaman list artikel ............................................................................... 66 Gambar 4.16 Tampilan Halaman Artikel Detail ......................................................... 66 Gambar 4.17 Tampilan Arahan Baru Untuk Mengerjakan Soal Artikel .................... 67 Gambar 4.18 Tampilan Halaman Kerja Soal Artikel .................................................. 67 Gambar 4.19 Tampilan Halaman List Elemen ............................................................ 68 Gambar 4.20 Tampilan Halaman Elemen Detail ........................................................ 69 Gambar 4.21 Tampilan Kolom Atribut ....................................................................... 69 Gambar 4.22 Tampilan Halaman Output Step 1 ......................................................... 70 Gambar 4.23 Tampilan Halaman Output Step 2 ......................................................... 70 Gambar 4.25 Tampilan Halaman Output Siap ............................................................ 71 Gambar 4.26 Tampilan Output User dan Sistem Cocok............................................. 72 Gambar 4.27 Tampilan Output User dan Sistem Tidak Cocok .................................. 72 Gambar 4.28 Tampilan Halaman Awal Evaluasi ........................................................ 73 Gambar 4.29 Tampilan Soal Pada Halaman Evaluasi ................................................ 73 Gambar 4.30 Potongan Program Pada Soal Artikel Untuk Menambah EXP ............. 74 Gambar 4.31 Potongan Program Pada Soal Elemen Untuk Menambah EXP ............ 75 Gambar 4.32 Potongan Soal Pada Soal Evaluasi Untuk Menambah EXP ................. 75 Gambar 4.33 Potongan Program Perhitungan Penghargaan Perfect Score ................ 76 Gambar 4.34 Potongan Program Perhitungan Penghargaan Kali Kerja Soal Evaluasi ....................................................................................................................... 77 Gambar 4.35 Tampilan Halaman Setelah Logout ....................................................... 77 Gambar 4.36 Tampilan Home Sistem Pembanding .................................................... 78 Gambar 4.37 Tampilan Halaman Artikel Detail Sistem Pembanding ........................ 79 Gambar 4.38 Tampilan Halaman Elemen Detail Sistem Pembanding ....................... 80 Gambar 4.39 Tampilan Halaman Output Sistem Pembanding ................................... 80 Gambar 4.40 Tampilan Halaman Profil User Sistem Pembanding ............................ 81 Gambar 4.41 Kuisioner Uji Coba Bagian Pertama ..................................................... 82 Gambar 4.42 Kuisioner Uji Coba Bagian Kedua ........................................................ 83 Gambar 4.43 Diagram Pengalaman Responden.......................................................... 85 Gambar 4.44 Diagram Menambah Minat Responden................................................. 86 Gambar 4.45 Diagram Hasil Perhitungan Pengaruh Achievement.............................. 87 Gambar 4.46 Diagram Hasil Perhitungan Pengaruh Level ......................................... 88 Gambar 4.47 Diagram Hasil Perhitungan Pengaruh Leaderboard ............................. 89 Gambar 4.48 Diagram Hasil Perhitungan Pengaruh Kunjungan Berturut .................. 90. ix Rancang Bangun ..., Willy Janitra, FTI UMN, 2014.

DAFTAR TABEL. Tabel 3.1 Tabel List Achievement ............................................................................... 15 Tabel 3.2 Struktur Tabel SK_ACHIEVEMENT ........................................................ 38 Tabel 3.3 Struktur Tabel SK_ADMIN ........................................................................ 38 Tabel 3.4 Struktur tabel SK_ACHIEVEMENT_HISTORY ...................................... 39 Tabel 3.5 Struktur Tabel SK_ARTIKEL_HISTORY ................................................. 39 Tabel 3.6 Struktur Tabel SK_ARTIKEL .................................................................... 40 Tabel 3.9 Struktur Tabel SK_ELEMENT ................................................................... 41 Tabel 3.10 Struktur Tabel SK_JAWABAN ................................................................ 42 Tabel 3.11 Struktur Tabel SK_PILIHAN_JAWABAN .............................................. 42 Tabel 3.12 Struktur Tabel SK_SOAL ......................................................................... 43 Tabel 3.13 Struktur Tabel SK_SOAL_HISTORY...................................................... 43 Tabel 3.14 Struktur Tabel SK_TIPESOAL_HISTORY ............................................. 44 Tabel 3.15 Struktur Tabel SK_TIPE_SOAL .............................................................. 44 Tabel 3.16 Struktur Tabel SK_USER ......................................................................... 45 Tabel 3.17 Struktur Tabel SK_USER_HISTORY ...................................................... 45 Tabel 3.18 Struktur Tabel SK_USER ......................................................................... 46 Tabel 3.19 Struktur Tabel SK_USER_LOG ............................................................... 46. x Rancang Bangun ..., Willy Janitra, FTI UMN, 2014.