GAME PENGENALAN KONSEP PEMROGRAMAN DASAR MENGGUNAKAN BLOCKLY BERBASIS WEBSITE

i

GAME PENGENALAN KONSEP PEMROGRAMAN DASAR

MENGGUNAKAN BLOCKLY BERBASIS WEBSITE

TUGAS AKHIR

Sebagai salah satu syarat untuk memperoleh gelar Sarjana Komputer

pada program studi TEKNIK INFORMATIKA

Disusun oleh :

VINCENT PUTRA GUNAWAN 121110603

PROGRAM STUDI TEKNIK INFORMATIKA

SEKOLAH TINGGI INFORMATIKA DAN KOMPUTER INDONESIA MALANG

ii

Tugas Akhir Berjudul

GAME PENGENALAN KONSEP PEMROGRAMAN DASAR

MENGGUNAKAN BLOCKLY BERBASIS WEBSITE

Disusun Oleh :

VINCENT PUTRA GUNAWAN 121110603

Telah dipertahankan dalam sidang Tugas Akhir Pada Tanggal 17 Oktober 2016

Dan dinyatakan telah memenuhi syarat untuk diterima

Komisi Sidang,

Go Frendi Gunawan, M.Kom. Ketua Sidang/Pembimbing Umum

Komisi Penguji

Setiabudi Sakaria, M.Kom. Penguji I

Daniel Rudiaman S. S.T., M.Kom. Penguji II

Subari M.Kom. Penguji III

Malang, 20 Oktober 2016

Sekolah Tinggi Informatika dan Komputer Indonesia KETUA

iv

HALAMAN PERSEMBAHAN

Saya panjatkan puji syukur kehadirat Tuhan Yang Maha Esa karena berkat dan karunia-Nya sehingga skripsi ini dapat diselesaikan dengan baik. Saya menyadari bahwa tanpa adanya bantuan dari orang lain, pekerjaan ini tidak akan mungkin terselesaikan dengan baik. Saya persembahkan tugas akhir ini kepada : 1. Keluarga yang telah memberikan dukungan baik moril maupun materil, kasih

sayang dan doanya kepada penulis.

2. Bapak Go Frendi, M.Kom, selaku dosen pembimbing yang telah membantu memberikan arahan dan masukan kepada penulis sehingga dapat menyelesaikan skripsi ini.

3. Teman-teman terbaik penulis Isa Suarti, Farik Ariyanto, Nisrina Zein, Devi Tri Wahyuningtyas, Nining Kuworo, Ocky Ferri Indrianto, Charles Christian Wongso, Anna Cazandra Delos Reyes dan semua kerabat dekat yang telah memberikan masukan, saran, semangat dan tenanganya dalam pembuatan skripsi ini.

Malang, Oktober 2016

v

KATA PENGANTAR

Puji syukur kehadirat Tuhan Yang Maha Esa karena berkat dan karunia-Nya sehingga laporan skripsi ini dapat diselesaikan dengan baik.

Laporan skripsi dengan judul ”Game Pengenalan Konsep Pemrograman Dasar Menggunakan Blockly Berbasis Website” ini disusun untuk memenuhi salah satu syarat dalam menyelesaikan jenjang strata satu (S1) program studi Teknik Informatika di Sekolah Tinggi Informatika dan Komputer Indonesia Malang. Selama penulisan skripsi ini, penulis banyak mendapatkan masukan, bimbingan dan bantuan dari berbagai pihak yang dengan senang hati dan ikhlas membantu penulis untuk menyelesaikan laporan ini. Penulis ucapkan banyak terimakasih khususnya kepada :

1. Ibu Dr. Eva Handriyantini, S.Kom., M.MT selaku ketua STIKI Malang. 2. Bapak Go Frendi, M.Kom, selaku dosen pembimbing yang telah membantu

memberikan arahan dan masukan kepada penulis sehingga dapat menyelesaikan skripsi ini.

3. Seluruh bapak dan ibu dosen yang telah memberikan ilmu kepada penulis selama menjalani studi di STIKI Malang yang tidak mungkin penulis sebutkan satu persatu.

4. Semua teman - teman yang selama ini telah membantu penulis selama menjalani studi di STIKI Malang, memberikan dukungan dan motivasi sehingga dapat menyelesaikan skripsi ini.

vi

Dalam penulisan skripsi ini tentu saja terdapat kesalahan dan kekurangan. Oleh karena itu penulis mengharapkan saran dan kritik yang membangun sehingga skripsi ini menjadi lebih baik dan bermanfaat. Semoga skripsi ini memberikan manfaat yang baik bagi pihak-pihak yang membutuhkan. Sekian terimakasih.

Malang, Oktober 2016

vii DAFTAR ISI LEMBAR JUDUL ... i LEMBAR PENGESAHAN ... ii ABSTRAK ... iii LEMBAR PERSEMBAHAN ... iv KATA PENGANTAR ... v

DAFTAR ISI ... vii

DAFTAR TABEL ... xi

DAFTAR GAMBAR ... xii

DAFTAR SEGMEN PROGRAM ... xiv

DAFTAR LAMPIRAN ... xv BAB I PENDAHULUAN 1.1 Latar Belakang ... 1 1.2 Rumusan Masalah ... 2 1.3 Tujuan Penelitian ... 2 1.4 Batasan Masalah ... 2 1.5 Manfaat Penelitian ... 4 1.6 Metodologi Penelitian ... 4

1.7 Sistematika Penulisan Laporan ... 7

BAB II LANDASAN TEORI 2.1 Permainan ... 8

2.1.1 Pengertian Permainan ... 8

viii

2.1.3 Sejarah Permainan... 9

2.1.4 Jenis – Jenis Permainan... 10

2.2 Pembelajaran ... 13

2.2.1 Pengertian Pembelajaran ... 13

2.2.2 Media Pembelajaran ... 13

2.2.3 Konsep Pemrograman Dasar ... 14

2.3 Website ... 14

2.3.1 Pengertian Website ... 14

2.3.2 Pengertian Cascading Style Sheet ... 15

2.3.3 Pengertian Hyper Text Markup Language ... 16

2.3.4 Pengertian Javascript dan JQuery ... 16

2.3.5 Pengertian PHP ... 17

2.3.6 Pengertian MySQL ... 18

2.4 Pengertian Blockly ... 18

2.5 Perangkat Pemodelan Sistem ... 18

2.5.1 Unified Modeling Language ... 18

2.5.1.1Use Case Diagram ... 18

2.5.1.2Activity Diagram ... 20

2.5.2 Flowchart ... 21

BAB III ANALISA DAN PERANCANGAN 3.1 Analisa Masalah ... 24

3.1.1 Indentifikasi Masalah ... 24

3.1.2 Pemecahan Masalah ... 25

ix

3.2.1 Gambaran Umum Aplikasi ... 25

3.2.1.1Deskripsi... 25 3.2.1.2Objektif... 26 3.2.2 Rancangan Aplikasi ... 26 3.2.3 Rancangan Konsep ... 27 3.2.4 Rancangan Desain ... 27 3.2.4.1Storyboard ... 27 3.2.4.2Gameplay ... 32 3.2.4.3Desain Tampilan ... 33 3.2.4.4Desain Karakter ... 34 3.2.5 Flowchart ... 35 3.2.5.1Menu ... 36 3.2.5.2Pilih Stage ... 37 3.2.5.3Main ... 38 3.2.5.4Kelas ... 39

3.2.6 Data Flow Diagram ... 40

3.2.6.1DataFlow Diagram Level 0... 40

3.2.6.2Data Flow Diagram Level 1... 41

3.2.7 Entity Relationship Diagram ... 42

BAB IV IMPLEMENTASI DAN PEMBAHASAN 4.1 Spesifikasi Kebutuhan Sistem ... 46

4.1.1 Spesifikasi Hardware ... 46

4.1.2 Software ... 46

x 4.2.1 Register ... 47 4.2.2 Login ... 48 4.2.3 Level ... 49 4.2.4 Kelas... 64 4.2.5 Custom Blockly ... 68 4.2.6 Canvas HTML5 ... 74 4.2.7 Animasi ... 80 4.3 Pembahasan ... 95 4.3.1 Pengujian Program ... 95 4.3.1.1Pengujian Register ... 95 4.3.1.2Pengujian Login ... 96

4.3.1.3Pengujian Memilih Level ... 96

4.3.1.4Pengujian Memilih Kelas ... 97

4.3.1.5Pengujian Membuat Kelas ... 97

4.3.1.6Pengujian Menambahkan Kelas ... 98

4.3.1.7Pengujian Menghapus Kelas ... 99

4.3.1.8Pengujian Running Code dan Animasi ... 99

4.3.1.9Kuesioner ... 100

BAB V KESIMPULAN DAN SARAN 5.1 Kesimpulan ... 101

5.2 Saran ... 101 DAFTAR PUSTAKA

HASIL KUESIONER

xi

DAFTAR TABEL

Tabel 1.1 Jadwal Waktu Penelitian ... 4

Tabel 2.1 Simbol-simbol Use Case ... 19

Tabel 2.2 Simbol-simbol Flowchart ... 22

Tabel 3.1 Tabel User ... 43

Tabel 3.2 Tabel Score ... 44

Tabel 3.3 Tabel Class ... 44

Tabel 3.4 Tabel Member ... 45

Tabel 3.5 Tabel Score Class... 45

Tabel 4.1 Pengujian Register ... 95

Tabel 4.2 Pengujian Login ... 96

Tabel 4.3 Pengujian Memilih Level ... 96

Tabel 4.4 Pengujian Memilih Kelas ... 97

Tabel 4.5 Pengujian Membuat Kelas ... 97

Tabel 4.6 Pengujian Menambahkan Kelas ... 98

Tabel 4.7 Pengujian Menghapus Kelas ... 99

Tabel 4.8 Pengujian Running Code dan Animasi ... 99

xii

DAFTAR GAMBAR

Gambar 1.1 Diagram Alir Penelitian ... 6

Gambar 2.1 Contoh Diagram Model Use Case ... 19

Gambar 2.2 Contoh Activity Diagram ... 21

Gambar 2.3 Contoh Flowchart Program ... 23

Gambar 3.1 Tahapan Perancangan Game ... 26

Gambar 3.2 Gambar Pada Level 1 Game ... 27

Gambar 3.3 Gambar Pada Level 2 Game ... 28

Gambar 3.4 Gambar Pada Level 3 Game ... 28

Gambar 3.5 Gambar Pada Level 4 Game ... 29

Gambar 3.6 Gambar Pada Level 5 Game ... 29

Gambar 3.7 Gambar Pada Level 6 Game ... 30

Gambar 3.8 Gambar Pada Level 7 Game ... 30

Gambar 3.9 Gambar Pada Level 8 Game ... 31

Gambar 3.10 Gambar Pada Level 9 Game ... 31

Gambar 3.11 Gambar Pada Level 10 Game ... 32

Gambar 3.12 Gambar Pada Layout Menu Utama ... 33

Gambar 3.13 Gambar Pada Layout Permainan ... 34

Gambar 3.14 Desain Karakter Pemain ... 34

Gambar 3.15 Desain Makanan ... 35

Gambar 3.16 Flowchart Menu ... 36

Gambar 3.17 Flowchart Pilih Stage ... 37

xiii

Gambar 3.19 Flowchart Kelas ... 39

Gambar 3.20 DFD Level 0 ... 40

Gambar 3.21 DFD Level 1 ... 41

Gambar 3.22 Conceptual Data Model ... 42

Gambar 3.23 Physical Data Model ... 43

Gambar 4.1 Halaman Masuk... 47

Gambar 4.2 Halaman Memilih Level ... 49

Gambar 4.3 Halaman Memilih Kelas... 65

Gambar 4.4 Popup Buat Kelas dan Tambah Kelas ... 65

Gambar 4.5 Popup Memilih Kelas ... 65

Gambar 4.6 Custom Blockly ... 68

Gambar 4.7 Canvas HTML5... 74

xiv

DAFTAR SEGMEN PROGRAM

Segmen Program 4.1 Kode Untuk Menyimpan Data User Baru ... 47

Segmen Program 4.2 Kode Untuk Masuk ... 48

Segmen Program 4.3 Kode Untuk Memilih Level ... 49

Segmen Program 4.4 Kode Untuk Random Level ... 50

Segmen Program 4.5 Kode Untuk Memilih kelas ... 65

Segmen Program 4.6 Kode Untuk Membuat Kelas ... 66

Segmen Program 4.7 Kode Untuk Tambah Kelas ... 67

Segmen Program 4.8 Kode Untuk Hapus Kelas ... 67

Segmen Program 4.9 Kode Untuk Custom Blockly ... 68

Segmen Program 4.10 Kode Untuk block_custom.js ... 69

Segmen Program 4.11 Kode Untuk block_convert.js ... 72

Segmen Program 4.12 Kode Untuk Membuat Canvas HTML5 ... 75

Segmen Program 4.13 Kode Untuk Animasi ... 80

xv

DAFTAR LAMPIRAN

HASIL KUESIONER