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 2016 i
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, Komisi Penguji Go Frendi Gunawan, M.Kom. Ketua Sidang/Pembimbing Umum 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 Dr. Eva Handriyantini, S.Kom., M.MT. ii
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 Vincent Putra Gunawan iv
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. v
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 Penulis vi
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 2.1.2 Beberapa Pengertian Tentang Permainan... 9 vii
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.1 Use Case Diagram... 18 2.5.1.2 Activity 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 3.2 Perancangan... 25 viii
3.2.1 Gambaran Umum Aplikasi... 25 3.2.1.1 Deskripsi... 25 3.2.1.2 Objektif... 26 3.2.2 Rancangan Aplikasi... 26 3.2.3 Rancangan Konsep... 27 3.2.4 Rancangan Desain... 27 3.2.4.1 Storyboard... 27 3.2.4.2 Gameplay... 32 3.2.4.3 Desain Tampilan... 33 3.2.4.4 Desain Karakter... 34 3.2.5 Flowchart... 35 3.2.5.1 Menu... 36 3.2.5.2 Pilih Stage... 37 3.2.5.3 Main... 38 3.2.5.4 Kelas... 39 3.2.6 Data Flow Diagram... 40 3.2.6.1 Data Flow Diagram Level 0... 40 3.2.6.2 Data 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 4.2 Implementasi... 47 ix
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.1 Pengujian Register... 95 4.3.1.2 Pengujian Login... 96 4.3.1.3 Pengujian Memilih Level... 96 4.3.1.4 Pengujian Memilih Kelas... 97 4.3.1.5 Pengujian Membuat Kelas... 97 4.3.1.6 Pengujian Menambahkan Kelas... 98 4.3.1.7 Pengujian Menghapus Kelas... 99 4.3.1.8 Pengujian Running Code dan Animasi... 99 4.3.1.9 Kuesioner... 100 BAB V KESIMPULAN DAN SARAN 5.1 Kesimpulan... 101 5.2 Saran... 101 DAFTAR PUSTAKA HASIL KUESIONER DAFTAR RIWAYAT PENULIS x
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 Tabel 4.9 Hasil Kuesioner... 100 xi
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 Gambar 3.18 Flowchart Main... 38 xii
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 Gambar 4.8 Animasi... 80 xiii
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 Segmen Program 4.14 Kode Untuk Menjalankan Animasi... 88 xiv
DAFTAR LAMPIRAN HASIL KUESIONER DAFTAR RIWAYAT PENULIS xv