GAME PENGENALAN KONSEP PEMROGRAMAN DASAR MENGGUNAKAN BLOCKLY BERBASIS WEBSITE

Transkripsi

1 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 PROGRAM STUDI TEKNIK INFORMATIKA SEKOLAH TINGGI INFORMATIKA DAN KOMPUTER INDONESIA MALANG 2016 i

2 Tugas Akhir Berjudul GAME PENGENALAN KONSEP PEMROGRAMAN DASAR MENGGUNAKAN BLOCKLY BERBASIS WEBSITE Disusun Oleh : VINCENT PUTRA GUNAWAN 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

3 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

4 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

5 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

6 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 Rumusan Masalah Tujuan Penelitian Batasan Masalah Manfaat Penelitian Metodologi Penelitian Sistematika Penulisan Laporan... 7 BAB II LANDASAN TEORI 2.1 Permainan Pengertian Permainan Beberapa Pengertian Tentang Permainan... 9 vii

7 2.1.3 Sejarah Permainan Jenis Jenis Permainan Pembelajaran Pengertian Pembelajaran Media Pembelajaran Konsep Pemrograman Dasar Website Pengertian Website Pengertian Cascading Style Sheet Pengertian Hyper Text Markup Language Pengertian Javascript dan JQuery Pengertian PHP Pengertian MySQL Pengertian Blockly Perangkat Pemodelan Sistem Unified Modeling Language Use Case Diagram Activity Diagram Flowchart BAB III ANALISA DAN PERANCANGAN 3.1 Analisa Masalah Indentifikasi Masalah Pemecahan Masalah Perancangan viii

8 3.2.1 Gambaran Umum Aplikasi Deskripsi Objektif Rancangan Aplikasi Rancangan Konsep Rancangan Desain Storyboard Gameplay Desain Tampilan Desain Karakter Flowchart Menu Pilih Stage Main Kelas Data Flow Diagram Data Flow Diagram Level Data Flow Diagram Level Entity Relationship Diagram BAB IV IMPLEMENTASI DAN PEMBAHASAN 4.1 Spesifikasi Kebutuhan Sistem Spesifikasi Hardware Software Implementasi ix

9 4.2.1 Register Login Level Kelas Custom Blockly Canvas HTML Animasi Pembahasan Pengujian Program Pengujian Register Pengujian Login Pengujian Memilih Level Pengujian Memilih Kelas Pengujian Membuat Kelas Pengujian Menambahkan Kelas Pengujian Menghapus Kelas Pengujian Running Code dan Animasi Kuesioner BAB V KESIMPULAN DAN SARAN 5.1 Kesimpulan Saran DAFTAR PUSTAKA HASIL KUESIONER DAFTAR RIWAYAT PENULIS x

10 DAFTAR TABEL Tabel 1.1 Jadwal Waktu Penelitian... 4 Tabel 2.1 Simbol-simbol Use Case Tabel 2.2 Simbol-simbol Flowchart Tabel 3.1 Tabel User Tabel 3.2 Tabel Score Tabel 3.3 Tabel Class Tabel 3.4 Tabel Member Tabel 3.5 Tabel Score Class Tabel 4.1 Pengujian Register Tabel 4.2 Pengujian Login Tabel 4.3 Pengujian Memilih Level Tabel 4.4 Pengujian Memilih Kelas Tabel 4.5 Pengujian Membuat Kelas Tabel 4.6 Pengujian Menambahkan Kelas Tabel 4.7 Pengujian Menghapus Kelas Tabel 4.8 Pengujian Running Code dan Animasi Tabel 4.9 Hasil Kuesioner xi

11 DAFTAR GAMBAR Gambar 1.1 Diagram Alir Penelitian... 6 Gambar 2.1 Contoh Diagram Model Use Case Gambar 2.2 Contoh Activity Diagram Gambar 2.3 Contoh Flowchart Program Gambar 3.1 Tahapan Perancangan Game Gambar 3.2 Gambar Pada Level 1 Game Gambar 3.3 Gambar Pada Level 2 Game Gambar 3.4 Gambar Pada Level 3 Game Gambar 3.5 Gambar Pada Level 4 Game Gambar 3.6 Gambar Pada Level 5 Game Gambar 3.7 Gambar Pada Level 6 Game Gambar 3.8 Gambar Pada Level 7 Game Gambar 3.9 Gambar Pada Level 8 Game Gambar 3.10 Gambar Pada Level 9 Game Gambar 3.11 Gambar Pada Level 10 Game Gambar 3.12 Gambar Pada Layout Menu Utama Gambar 3.13 Gambar Pada Layout Permainan Gambar 3.14 Desain Karakter Pemain Gambar 3.15 Desain Makanan Gambar 3.16 Flowchart Menu Gambar 3.17 Flowchart Pilih Stage Gambar 3.18 Flowchart Main xii

12 Gambar 3.19 Flowchart Kelas Gambar 3.20 DFD Level Gambar 3.21 DFD Level Gambar 3.22 Conceptual Data Model Gambar 3.23 Physical Data Model Gambar 4.1 Halaman Masuk Gambar 4.2 Halaman Memilih Level Gambar 4.3 Halaman Memilih Kelas Gambar 4.4 Popup Buat Kelas dan Tambah Kelas Gambar 4.5 Popup Memilih Kelas Gambar 4.6 Custom Blockly Gambar 4.7 Canvas HTML Gambar 4.8 Animasi xiii

13 DAFTAR SEGMEN PROGRAM Segmen Program 4.1 Kode Untuk Menyimpan Data User Baru Segmen Program 4.2 Kode Untuk Masuk Segmen Program 4.3 Kode Untuk Memilih Level Segmen Program 4.4 Kode Untuk Random Level Segmen Program 4.5 Kode Untuk Memilih kelas Segmen Program 4.6 Kode Untuk Membuat Kelas Segmen Program 4.7 Kode Untuk Tambah Kelas Segmen Program 4.8 Kode Untuk Hapus Kelas Segmen Program 4.9 Kode Untuk Custom Blockly Segmen Program 4.10 Kode Untuk block_custom.js Segmen Program 4.11 Kode Untuk block_convert.js Segmen Program 4.12 Kode Untuk Membuat Canvas HTML Segmen Program 4.13 Kode Untuk Animasi Segmen Program 4.14 Kode Untuk Menjalankan Animasi xiv

14 DAFTAR LAMPIRAN HASIL KUESIONER DAFTAR RIWAYAT PENULIS xv