lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1191/1/halaman awal.pdfdengan...

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


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


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


v

RANCANG BANGUN INTELLIGENT TUTORING SYSTEM

BERBASIS WEB UNTUK PEMROGRAMAN WEBGL

DENGAN MENGGUNAKAN BAYESIAN NETWORK


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.


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.


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


viii

BAB V SIMPULAN DAN SARAN ................................................................. 1105.1 Simpulan ........................................................................................... 1105.2 Saran ................................................................................................. 110

DAFTAR PUSTAKA ........................................................................................ 112


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


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


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


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


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


lisensi ini mengizinkan setiap orang untuk menggubah ...kc.umn.ac.id/1191/1/halaman awal.pdfdengan...

Documents