RANCANG BANGUN APLIKASI MEDIA PEMBELAJARAN UNTUK SISWA SEKOLAH DASAR MENGGUNAKAN TEKNOLOGI AUGMENT REALITY BERBASIS HTML5

Transkripsi

1 RANCANG BANGUN APLIKASI MEDIA PEMBELAJARAN UNTUK SISWA SEKOLAH DASAR MENGGUNAKAN TEKNOLOGI AUGMENT REALITY BERBASIS HTML5 TUGAS AKHIR Sebagai Persyaratan Guna Meraih Gelar Sarjana Strata 1 Teknik Informatika Universitas Muhammadiyah Malang Oleh : Angga Santoso JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH MALANG 2015

2

3 KATA PENGANTAR Senantiasa memanjatkan puji syukur kehadirat Allah SWT. atas segala limpahan rahmat dan hidayah-nya sehingga peneliti dapat penyelesaikan Tugas Akhir yang berjudul: RANCANG BANGUN APLIKASI MEDIA PEMBELAJARAN UNTUK SISWA SEKOLAH DASAR MENGGUNAKAN TEKNOLOGI AUGMENT REALITY BERBASIS HTML5. Dalam penulisan Tugas Akhir ini disajikan pokok-pokok bahasan yang meliputi perancangan dan pembuatan aplikasi media pembelajaran untuk siswa sekolah dasar menggunakan augmented reality guna terciptanya kemajuan bidang pendidikan. Saya sendiri selaku penulis menyadari sepenuhnya bahwa dalam penulisan tugas Akhir ini masih banyak kekurangan dan keterbatasan. Oleh karena itu saya mengharapkan saran yang membangun agar tulisan ini bermanfaat bagi perkembangan pengetahuan kedepan. Malang. April 2015 Penulis

4 DAFTAR ISI ABSTRAK... iii ABSTRACT... iv LEMBAR PERSEMBAHAN... v KATA PENGANTAR... vi DAFTAR ISI... vii DAFTAR GAMBAR... x DAFTAR TABEL... xi BAB I...12 PENDAHULUAN Latar Belakang Perumusan Masalah Tujuan Batasan Masalah Metodologi Penelitian Sistematika Penulisan...15 BAB II...17 TINJAUAN PUSTAKA HTML Sejarah HTML Fitur Baru HTML Bootstrap Fitur Bootstrap Komponen Bootstrap Js-ObjectDetect...19

5 2.4 OpenCV Cascade Classification Three.js LESS...21 BAB III...22 Analisa Masalah dan Penyelesaian Analisa Sistem Usecase Diagram Activity Diagram Perancangan sistem Sequence Diagram Flowchart Rancangan Interface Halaman Cara Pemakaian Local Repositories Halaman Scan...28 BAB IV...30 Implementasi dan Pengujian Implementasi Framework Bootstrap Media Stream HTML Pendeteksian Object Load Object 3D Load File XML Pengujian Sistem Pengujian Scan Tangan...34

6 4.2.2 Pengujian update konten di repositori Pengujian di perangkat yang dilengkapi GPU dan yang tidak dilengkapi GPU Hasil Quisioner...38 BAB V...39 Penutup Kesimpulan Saran...39 References...40 BIOGRAFI PENULIS...41

7 DAFTAR GAMBAR Gambar Bentuk grid system pada Bootstrap...19 Gambar Features dalam classifier...20 Gambar Usecase Admin...22 Gambar Usecase User...23 Gambar Activity diagram admin...23 Gambar Activity diagram user scan...24 Gambar Activity diagram user update...24 Gambar Sequence diagram admin...25 Gambar Sequence diagram user scan...26 Gambar Sequence diagram user update...26 Gambar Flowchart...27 Gambar Halaman requirment ARTS...27 Gambar Halaman cara penggunaan ARTS...28 Gambar Halaman Lokal Repositori...28 Gambar Hasil scan, tangan diubah menjadi bumi...29 Gambar Hasil scan, tangan diubah menjadi bulan...29 Gambar Pengujian scan pada latar yang bersih...34 Gambar Pengujian scan pada latar yang kotor Gambar Pengujian scan pada latar yang kotor Gambar Konten MARS di-ekstrak ke folder object...36 Gambar Menambahkan MARS pada file local.xml...36 Gambar Konten MARS telah muncul di Local Repositories...36

8 DAFTAR TABEL Table Perbandingan Js-ObjectDetect dengan library lain...19 Table Tabel perbandingan FPS pada dua komputer berbeda...37 Table Kuisioner Kepuasan Aplikasi ARTS untuk Siswa Sekolah Dasar...38 Table Kuisioner Kepuasan Aplikasi ARTS untuk Pendamping/Guru...38

9 References [1] Bootstrap. (2015, 08 15). Bootstrap - The world's most popular mobile-first and responsive front-end framework. Retrieved from Bootstrap: [2] Cabello, R. (2015, 08 15). three.js / documentation. Retrieved from three.js: [3] OpenCV. (2015, 08 15). Haar Feature-based Cascade Classifier for Object Detection. Retrieved from OpenCV: [4] Sellier, A. (2015, 08 15). Getting started Less.js. Retrieved from Less.JS: [5] Viola Paul, L. R. (2015, 08 15). mtschirs/js-objectdetect. Retrieved from github: [6] W3C. (2015, 08 15). Introduction - HTML5. Retrieved from w3c: