Team project ©2017 Dony Pratidana S. Hum | Bima Agus Setyawan S. IIP
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.
RANCANG BANGUN INTELLIGENT TUTORING SYSTEM
BERBASIS WEB UNTUK PEMROGRAMAN WEBGL
DENGAN MENGGUNAKAN BAYESIAN NETWORK
(STUDI KASUS: UNIVERSITAS MULTIMEDIA NUSANTARA)
SKRIPSI
Diajukan sebagai salah satu syarat untuk memperoleh gelar
Sarjana Komputer (S.Kom.)
Kharis Simon
12110110025
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNIK INFORMASI DAN KOMUNIKASI
UNIVERSITAS MULTIMEDIA NUSANTARA
TANGERANG
2016
ii
LEMBAR PENGESAHAN SKRIPSI
RANCANG BANGUN INTELLIGENT TUTORING SYSTEM BERBASIS
WEB UNTUK PEMROGRAMAN WEBGL DENGAN MENGGUNAKAN
BAYESIAN NETWORK
(STUDI KASUS: UNIVERSITAS MULTIMEDIA NUSANTARA)
Oleh
Nama : Kharis Simon
NIM : 12110110025
Program Studi : Teknik Informatika
Fakultas : Teknologi Informasi dan Komunikasi
Tangerang, 8 Agustus 2016
Ketua Sidang
Maria Irmina Prasetiyowati, S.Kom., M.T.
Dosen Penguji
Dennis Gunawan, S.Kom., M.Sc.
Dosen Pembimbing I
Yustinus W. Wiratama, S.Kom., M.Sc.
Dosen Pembimbing II
Marcel B. Kristanda, S.Kom., M.Sc.
Mengetahui,
Ketua Program Studi Teknik Informatika
Maria Irmina Prasetiyowati, S.Kom., M.T.
Rancang bangun..., Kharis Simon, FTI UMN, 2016
iii
PERNYATAAN TIDAK MELAKUKAN PLAGIAT
Dengan ini saya,
Nama : Kharis Simon
NIM : 12110110025
Program Studi : Teknik Informatika
Fakultas : Teknik Informasi dan Komunikasi
menyatakan bahwa skripsi yang berjudul “Rancang Bangun Intelligent Tutoring
System Berbasis Web Untuk Pemrograman WebGL Dengan Menggunakan
Bayesian Netwrok” adalah karya ilmiah pribadi saya, bukan karya ilmiah yang
ditulis oleh orang atau lembaga lain, dan semua karya ilmiah orang lain yang
dirujuk dalam skripsi ini telah disebutkan sumber kutipannya serta dicantumkan di
Daftar Pustaka. Jika kemudian hari terbukti ditemukan
kecurangan/penyimpangan, baik dalam pelaksanaan skripsi maupun dalam
penulisan laporan skripsi, saya bersedia menerima konsekuensi dinyatakan
TIDAK LULUS untuk mata kuliah Skripsi yang telah saya tempuh.
Tangerang, 8 Agustus 2016,
Kharis Simon
Rancang bangun..., Kharis Simon, FTI UMN, 2016
iv
KATA PENGANTAR
Puji syukur kepada Tuhan Yang Maha Esa, atas berkat-Nya sehingga
penulis dapat menyelesaikan skripsi.
Penulis ingin mengucapkan terima kasih kepada:
1. Maria Irmina Prasetiyowati, S.Kom., M.T., Ketua Program Studi Teknik
Informatika Universitas Multimedia Nusantara,
2. Yustinus Widya Wiratama, S.Kom., M.Sc. dan Marcel Bonar Kristanda,
S.Kom., M.Sc., yang memberikan bimbingan untuk pembuatan skripsi dan
tata cara penulisan karya ilmiah dengan benar,
3. Keluarga, yang telah mendidik, menemani, dan memberikan semangat
selama skripsi,
4. Uncle Andrew dan Aunty Violet, yang telah memberikan semangat dan
meminjamkan komputer untuk digunakan selama masa perkuliahan,
5. Jason Anggada, Samuel Christopher Santo, David Domarco, Alvin
Hanjaya Tandrian, Ferdinand, dan teman-teman angkatan 2012, yang
menjadi rekan selama masa skripsi dan perkuliahan,
Semoga skripsi ini dapat bermanfaat, baik sebagai sumber informasi maupun
sumber inspirasi bagi Anda yang membaca.
Tangerang, 8 Agustus 2016,
Kharis Simon
Rancang bangun..., Kharis Simon, FTI UMN, 2016
v
RANCANG BANGUN INTELLIGENT TUTORING SYSTEM
BERBASIS WEB UNTUK PEMROGRAMAN WEBGL
DENGAN MENGGUNAKAN BAYESIAN NETWORK
(STUDI KASUS: UNIVERSITAS MULTIMEDIA NUSANTARA)
ABSTRAK
Sejak diperkenalkan, WebGL telah memiliki banyak tutorial yang disediakan dalam bentuk pembelajaran jarak jauh. Beberapa tutorial memiliki kemampuan untuk menjalankan program. Namun, tutorial tersebut tidak memiliki kemampuan untuk menyarankan pelajaran yang sesuai dengan kebutuhan personal peserta didik. Kemampuan ini telah dicapai oleh tutorial matematika dan pemrograman lain. Oleh karena itu, dibuatlah sistem pembelajaran pemrograman untuk WebGL yang menyediakan jasa tutor untuk menyarankan pelajaran. Bayesian Network diterapkan dalam sistem untuk merepresentasikan pengetahuan tutor terhadap peserta didik sehingga sistem dapat menyarankan pelajaran secara cerdas kepada peserta didik. Setelah sistem digunakan oleh beberapa calon peserta didik, sistem terbukti dapat digunakan sebagai pembelajaran jarak jauh dan menyarankan pelajaran secara personal.
Kata kunci: Sistem Tutor Cerdas, Pembelajaran Personal, Pembelajaran Jarak Jauh, Layanan Web.
Rancang bangun..., Kharis Simon, FTI UMN, 2016
vi
DESIGN AND DEVELOPMENT OF WEB-BASED
INTELLIGENT TUTORING SYSTEM FOR WEBGL
PROGRAMMING USING BAYESIAN NETWORK
(CASE STUDY: UNIVERSITAS MULTIMEDIA NUSANTARA)
ABSTRACT
A lot of distance education-based tutorial has been made since WebGL is introduced. Some tutorial has the capability of running WebGL program simulating practical class. However, those tutorials do not have the capability to suggest lesson for personal needs although the capability was apparent in other mathematics and programming tutorials. Therefore, tutoring system for WebGL with lesson recommendation service is made. Bayesian Network is implemented to represent systems' knowledge on learner's knowledge and intelligently guess recommended lesson. The system was proven capable as a distance learning tool and personalized lesson recommendation according to learners that have used the system.
Keywords: Distance Education, Intelligent Tutoring System, Personalized Learning, Web Service.
Rancang bangun..., Kharis Simon, FTI UMN, 2016
vii
DAFTAR ISI
LEMBAR PENGESAHAN SKRIPSI .................................................................... ii PERNYATAAN TIDAK MELAKUKAN PLAGIAT ......................................... iii KATA PENGANTAR .......................................................................................... iv ABSTRAK ............................................................................................................. v ABSTRACT .......................................................................................................... vi DAFTAR ISI ........................................................................................................ vii DAFTAR GAMBAR ............................................................................................ ix DAFTAR RUMUS ................................................................................................ xi DAFTAR TABEL ................................................................................................ xii DAFTAR LAMPIRAN ....................................................................................... xiii BAB I PENDAHULUAN ...................................................................................... 1
1.1 Latar Belakang Masalah ....................................................................... 11.2 Rumusan Masalah ................................................................................. 31.3 Batasan Masalah ................................................................................... 31.4 Tujuan Penelitian .................................................................................. 41.5 Manfaat Penelitian ................................................................................ 41.6 Sistematika Penulisan ........................................................................... 4
BAB II LANDASAN TEORI ................................................................................ 62.1 Distance Education ............................................................................... 62.2 Intelligent Tutoring System .................................................................. 62.3 Personalized Learning dan Personalized Learning Path ....................... 72.4 Bayesian Network ................................................................................. 82.5 Metode Penelitian Kuantitatif dan Metode Survei ............................. 112.6 Likert Scale ......................................................................................... 122.7 Cronbach's Alpha ................................................................................ 132.8 Codecademy ....................................................................................... 152.9 WebGL ............................................................................................... 15
BAB III METODOLOGI DAN PERANCANGAN SISTEM ............................. 163.1 Metode Penelitian ............................................................................... 16
3.1.1 Variabel Penelitian ................................................................. 173.1.2 Teknik Pengumpulan Data ..................................................... 173.1.3 Teknik Pengambilan Sampel .................................................. 18
3.2 Arsitektur Sistem ................................................................................ 183.3 Arsitektur Bayesian Network ............................................................. 223.4 Data Flow Diagram ............................................................................. 243.5 Flowchart ............................................................................................ 343.6 Entity Relationship Diagram .............................................................. 463.7 Rancangan Antarmuka ........................................................................ 58
BAB IV IMPLEMENTASI DAN UJI COBA ..................................................... 664.1 Spesifikasi Perangkat .......................................................................... 66
4.1.1 Perangkat keras ...................................................................... 664.1.2 Perangkat lunak ...................................................................... 66
4.2 Implementasi ....................................................................................... 674.3 Hasil Implementasi ............................................................................. 874.4 Pengujian ............................................................................................ 98
Rancang bangun..., Kharis Simon, FTI UMN, 2016
viii
BAB V SIMPULAN DAN SARAN ................................................................. 1105.1 Simpulan ........................................................................................... 1105.2 Saran ................................................................................................. 110
DAFTAR PUSTAKA ........................................................................................ 112
Rancang bangun..., Kharis Simon, FTI UMN, 2016
ix
DAFTAR GAMBAR
Gambar 2.1 Water Sprinkler Network Sumber: Murphy, 1998 ............................ 10Gambar 2.2 Alarm Network Sumber: Russel dan Norvig, 2010 ........................... 11Gambar 3.1 Arsitektur Sistem ............................................................................... 19Gambar 3.2 Model Bayesian Network WebGL .................................................... 23Gambar 3.3 Context Diagram ............................................................................... 25Gambar 3.4 Diagram Level 1 ................................................................................ 29Gambar 3.5 Diagram Level 2 Proses 1 ................................................................. 30Gambar 3.6 Diagram Level 2 Proses 2 ................................................................. 32Gambar 3.7 Diagram Level 2 Proses 3 ................................................................. 34Gambar 3.8 Flowchart Sistem ............................................................................... 35Gambar 3.9 Flowchart Pendaftaran dan Authentication ....................................... 37Gambar 3.10 Flowchart Sesi Digunakan .............................................................. 39Gambar 3.11 Flowchart Menggunakan Sesi Pengguna ........................................ 40Gambar 3.12 Flowchart Menampilkan Pelajaran .................................................. 41Gambar 3.13 Flowchart Belajar ............................................................................ 42Gambar 3.14 Flowchart Mengatur Pelajaran ........................................................ 44Gambar 3.15 Flowchart Inferensi Bayesian Network ........................................... 45Gambar 3.16 Flowchart Subprogram Enumeration .............................................. 46Gambar 3.17 ERD Sistem ..................................................................................... 47Gambar 3.18 Rancangan Antarmuka Sistem Utama ............................................. 59Gambar 3.19 Rancang Antarmuka Untuk Masuk Sistem dan Pendaftaran .......... 60Gambar 3.20 Rancangan Antarmuka Untuk Editor dan Viewer ........................... 61Gambar 3.21 Rancangan Antarmuka Penanda Kemudahan Pelajaran ................. 62Gambar 3.22 Rancangan Antarmuka Mengurus Pelajaran ................................... 63Gambar 3.23 Rancangan Antarmuka Mengurus Relasi Antar Pelajaran .............. 64Gambar 3.24 Rancangan Antarmuka Mengurus Source Sode .............................. 65Gambar 4.1 Potongan Isi File package.json .......................................................... 68Gambar 4.2 Struktur Proyek ................................................................................. 69Gambar 4.3 Potongan Isi File server.js ................................................................. 70Gambar 4.4 Potongan Kode Untuk Routing ......................................................... 71Gambar 4.5 Potongan Kode Untuk Request Handler ........................................... 72Gambar 4.6 Contoh Penggunaan ORM Untuk Pelajaran ...................................... 73Gambar 4.7 Potongan Kode Function resolveFile ................................................ 74Gambar 4.8 Potongan File webpack.config.js ...................................................... 76Gambar 4.9 Struktur Code Base frontend ............................................................. 77Gambar 4.10 Potongan File main.js dan index.html ............................................. 77Gambar 4.11 Potongan Kode App.vue ................................................................. 78Gambar 4.12 Function login ................................................................................. 79Gambar 4.13 Function logout ............................................................................... 80Gambar 4.14 Function Untuk Menampilkan Pelajaran ........................................ 81Gambar 4.15 Function Untuk Menampilkan Rekomendasi ................................. 82Gambar 4.16 Function Untuk Membuat Bayesian Network ................................. 83Gambar 4.17 Function Untuk Menjalankan source code ..................................... 84Gambar 4.18 Potongan Kode Library Bayesian Network ..................................... 85Gambar 4.19 Function ask .................................................................................... 85
Rancang bangun..., Kharis Simon, FTI UMN, 2016
x
Gambar 4.20 Function enuma ............................................................................... 86Gambar 4.21 Isi File Dockerfile ........................................................................... 87Gambar 4.22 Screenshot Halaman Masuk dan Pendaftaran ................................. 88Gambar 4.23 Screenshot Validasi Pendaftaran ..................................................... 88Gambar 4.24 Screenshot Masuk Sistem Sebagai Pengurus .................................. 89Gambar 4.25 Screenshot Halaman Utama ............................................................ 90Gambar 4.26 Screenshot Pemilihan Pelajaran ...................................................... 90Gambar 4.27 Screenshot Tampilan Untuk Belajar ............................................... 91Gambar 4.28 Screenshot Eksekusi Source Code .................................................. 92Gambar 4.29 Screenshot Tampilan Penyelesaian Pelajaran ................................. 92Gambar 4.30 Screenshot Tampilan Pelajaran WebGL ......................................... 93Gambar 4.31 Screenshot Tampilan Sejarah Pelajaran .......................................... 94Gambar 4.32 Screenshot Navigasi Pengurus ........................................................ 94Gambar 4.33 Screenshot Halaman Utama Pengurus ............................................ 95Gambar 4.34 Screenshot Mengatur Bab ............................................................... 96Gambar 4.35 Screenshot Mengatur Pelajaran dan Langkah ................................. 96Gambar 4.36 Screenshot Mengatur Source Code ................................................. 97Gambar 4.37 Screenshot Mengatur Relasi Antar Pelajaran .................................. 98Gambar 4.38 Screenshot Tampilan Navigasi Pengguna ....................................... 98Gambar 4.39 Skenario Testing .............................................................................. 99Gambar 4.40 Potongan Kode Skenario Uji Bayesian Network ........................... 100Gambar 4.41 Hasil Unit Testing Menggunakan Mocha ...................................... 104Gambar 4.42 Screenshot Hasil Uji Web Server .................................................. 105
Rancang bangun..., Kharis Simon, FTI UMN, 2016
xi
DAFTAR RUMUS
Rumus 2.1 Fulljoint Probability ............................................................................. 9Rumus 2.2 Fulljoint Probability dengan Conditional Independence ..................... 9Rumus 2.3 Inferensi Bayesian Network ................................................................ 10Rumus 2.4 Cronbach's Alpha ................................................................................ 14
Rancang bangun..., Kharis Simon, FTI UMN, 2016
xii
DAFTAR TABEL
Tabel 2.1 Dukungan Web Browser Modern Untuk WebGL ................................. 15Tabel 3.1 Resource Chapter .................................................................................. 20Tabel 3.2 Resource CPD ....................................................................................... 20Tabel 3.3 Resource Lessons .................................................................................. 21Tabel 3.4 Resource Logins .................................................................................... 21Tabel 3.5 Resource Users ...................................................................................... 21Tabel 3.6 Resource Sources .................................................................................. 22Tabel 3.7 Resource Steps ...................................................................................... 22Tabel 3.8 Entitas Tutorial WebGL ........................................................................ 25Tabel 3.9 Deskripsi Entitas Pengurus ................................................................... 26Tabel 3.10 Deskripsi Entitas Pengguna ................................................................ 28Tabel 3.11 Definisi Tabel Chapter ........................................................................ 49Tabel 3.12 Definisi Tabel Lesson ......................................................................... 50Tabel 3.13 Definisi Tabel Step .............................................................................. 51Tabel 3.14 Definisi Tabel Source .......................................................................... 52Tabel 3.15 Definisi Tabel User ............................................................................. 53Tabel 3.16 Definisi Tabel Lesson History ............................................................ 54Tabel 3.17 Definisi Tabel CPD Header ................................................................ 54Tabel 3.18 Definisi Tabel CPD Detail .................................................................. 55Tabel 3.19 Unormalized CPD ............................................................................... 56Tabel 3.20 First Normalized Form CPD ............................................................... 57Tabel 3.21 Second Normalized Form Induk CPD ................................................ 58Tabel 3.22 Second Normalized Form Detil CPD .................................................. 58Tabel 4.1 Hasil Rekapitulasi Survei .................................................................... 106
Rancang bangun..., Kharis Simon, FTI UMN, 2016
xiii
DAFTAR LAMPIRAN
LAMPIRAN 1 FORMULIR KE-1 KONSULTASI SKRIPSI ........................... 115 LAMPIRAN 2 FORMULIR KE-2 KONSULTASI SKRIPSI ........................... 116 LAMPIRAN 3 BIOGRAFI PENULIS ............................................................... 117 LAMPIRAN 4 PERTANYAAN DAN HASIL SURVEI .................................. 119 LAMPIRAN 5 HASIL PERHITUNGAN CRONBACH ALPHA .................... 125
Rancang bangun..., Kharis Simon, FTI UMN, 2016