ANALISA DAN PERANCANGAN PERMAINAN CATUR CHINA BERBASIS WEB SKRIPSI Oleh Hengky Frans 1100048052 Winardi Cristian 1100047900 Universitas Bina Nusantara Jakarta 2011
ANALISA DAN PERANCANGAN PERMAINAN CATUR CHINA BERBASIS WEB SKRIPSI diajukan sebagai salah satu syarat untuk gelar kesarjanaan pada Jurusan Teknik Informatika Jenjang Pendidikan Strata-1 Oleh Hengky Frans 1100048052 Winardi Cristian 1100047900 Universitas Bina Nusantara Jakarta 2011 ii
PERNYATAAN Dengan ini kami, Nama : Hengky Frans NIM : 1100048052 Nama : Winardi Cristian NIM : 1100047900 Judul skripsi : Analisa dan Perancangan Permainan Catur China Berbasis Web Memberikan kepada Universitas Bina Nusantara hak non-eksklusif untuk menyimpan, memperbanyak, dan menyebarluaskan skripsi karya kami, secara keseluruhan atau hanya sebagian atau hanya ringkasannya saja, dalam bentuk format tercetak dan atau elektronik. Menyatakan bahwa kami, akan mempertahankan hak exclusive kami, untuk menggunakan seluruh atau sebagian isi skripsi kami, guna pengembangan karya di masa depan, misalnya bentuk artikel, buku, perangkat lunak, ataupun sistem informasi. Jakarta, 15 Maret 2011 Hengky Frans Winardi Cristian vi
PRAKATA Puji dan syukur tim peneliti ucapkan kepada Tuhan Yang Maha Esa atas segala berkat dan karunia yang telah diberikan sehingga penelitian ini dapat diselesaikan tepat pada waktunya. Skripsi berjudul Analisa dan Perancangan Permainan Catur China Berbasis Web ini disusun sebagai salah satu syarat untuk memperoleh gelar kesarjanaan pada jenjang pendidikan Strata-1 pada Universitas Bina Nusantara Jakarta. Pada kesempatan ini tim peneliti juga ingin mengucapkan banyak terima kasih kepada semua pihak yang telah memberikan bantuan dan dukungan baik dengan doa, moril, maupun materiil sehingga tim peneliti dapat menyelesaikan skripsi ini. Hormat dan terima kasih tim peneliti berikan kepada : 1. Orang tua tercinta dari tim peneliti atas doa, semangat, biaya dan dukungan-dukungan lainnya yang telah diberikan kepada tim peneliti dalam proses penelitian ini. 2. Bapak Prof. Dr. Ir. Harjanto Prabowo, M.M., selaku Rektor Universitas Bina Nusantara. 3. Bapak Ir. Sablin Yusuf, M.Sc, M.Com.Sc., selaku Dekan Fakultas Ilmu Komputer Universitas Bina Nusantara. 4. Bapak Fredy Purnomo, S.Kom, M.Kom., selaku Ketua Jurusan Teknik Informatika Universitas Bina Nusantara 5. Ibu Yen Lina Prasetio, S.Kom., M.CompSc., selaku Sekretaris Jurusan Teknik Informatika Universitas Bina Nusantara. 6. Bapak Jaka Hartanto, S.Kom., MM., selaku Dosen Pembimbing yang telah meluangkan waktunya untuk memberikan bimbingan, pengarahan, dan masukan dari awal sampai selesainya skripsi ini sehingga skripsi ini dapat terselesaikan dengan baik. viii
7. Bapak dan Ibu dosen yang telah membagikan ilmunya melalui kuliah sejak semester pertama hingga semester ketujuh ini. 8. Bapak Anderes Gui selaku mitra peneliti yang telah membantu dan memberikan pengetahuannya mengenai catur china kepada tim peneliti. 9. Teman-teman dan kerabat dekat tim peneliti yang telah memberikan dukungan moril berupa semangat dan doa kepada tim peneliti. 10. Semua pihak yang tidak dapat disebutkan satu per satu, yang telah membantu tim peneliti menyelesaikan skripsi ini baik secara langsung maupun tidak langsung. Sebagai manusia yang penuh keterbatasan, tim peneliti menyadari bahwa penelitian yang telah dilakukan masih memiliki kekurangan. Oleh karena itu, saran dan kritik yang membangun sangat diharapkan sebagai bahan pembelajaran untuk perkembangan dan perbaikan pada masa yang akan datang. Semoga Tuhan senantiasa melimpahkan karunia-nya kepada semua pihak. Akhir kata, tim peneliti berharap penelitian ini dapat berguna bagi berbagai pihak yang secara langsung ataupun tidak langsung berhubungan dengan penelitian ini. Semoga penelitian ini juga dapat menjadi inspirasi orang-orang yang terkait secara langsung atau tidak langsung melalui aplikasi ataupun penulisannya. Jakarta, Januari 2011 Tim Penelit i ix
DAFTAR ISI Halaman Judul Luar... Halaman Judul Dalam... Halaman Persetujuan Hard Cover... Halaman Pernyataan Dewan Penguji... Halaman Pemberian Hak Cipta Non Eksklusif dari Mahasiswa ke Universitas Bina Nusantara... Abstrak... i ii iii iv vi vii Prakata... viii Daftar Isi... Daftar Tabel... Daftar Gambar... x xiv xv Daftar Lampiran... xviii BAB 1 PENDAHULUAN... 1 1.1. Latar Belakang... 1 1.2. Ruang Lingkup... 3 1.3. Tujuan dan Manfaat... 3 1.4. Metodologi... 4 1.5. Sistematika Penulisan... 6 BAB 2 LANDASAN TEORI... 8 2.1. Teori Umum... 8 2.1.1. Analisis... 8 2.1.2. Perancangan... 8 2.1.3. Engine... 9 2.1.4. Web Browser... 9 2.1.5. Bahasa Pemrograman Internet... 10 x
2.1.5.1. Client-side Scripting... 10 2.1.5.2. Server-side Scripting... 11 2.1.6. IMK (Interaksi Manusia dan Komputer)... 12 2.1.6.1. Pengertian IMK... 12 2.1.6.2. Tujuan IMK... 12 2.1.7. Database... 17 2.1.8. Unified Modelling Language (UML)... 20 2.1.9. Internet... 22 2.2. Teori Khusus... 26 2.2.1. Game... 26 2.2.2. Java... 27 2.2.3. Java Server Pages... 27 2.2.4. Servlet... 29 2.2.5. AJAX (Asynchronous JavaScript and XML)... 30 2.2.6. JQuery... 34 2.2.7. MySQL... 36 BAB 3 ANALISA DAN PERANCANGAN... 37 3.1 Peraturan Catur China... 37 3.1.1. Peraturan Dasar Catur China CXQ... 39 3.1.2. Aturan Lanjutan Catur China CXQ... 40 3.2 Analisa Game Sejenis... 42 3.2.1. Xiang Qi Training... 43 3.2.2. Xiang Qi Online... 48 3.2.3. Analisa Perbandingan Game Sejenis... 54 3.3 Analisa Kuesioner... 55 3.4 Rancangan Aplikasi... 65 3.4.1. Rancangan Layar... 66 xi
3.4.1.1. Sebelum Login... 66 3.4.1.2. Setelah Login... 68 3.4.2. Rancangan Database... 74 3.4.2.1. Perancangan Data Konseptual... 74 3.4.2.2. Perancangan Data Logikal... 80 3.4.2.2.1. Kamus Data Atribut... 82 3.4.2.2.2. Mengidentifikasi candidate key dan primary key... 85 3.4.2.2.3. Menentukan hubungan relasional antar entiti... 88 3.4.2.3. Perancangan Data Fisikal... 91 3.4.3. Aliran Aplikasi (Application Flow)... 93 3.4.3.1. State Transition Diagram Index... 93 3.4.3.2. State Transition Diagram Home... 94 3.4.3.3. State Transition Diagram Server... 95 3.4.3.4. State Transition Diagram Lobby... 96 3.4.3.5. State Transition Diagram Room... 97 3.4.3.6. State Transition Diagram Profile... 98 BAB 4 IMPLEMENTASI... 99 4.1 Spesifikasi Sistem... 99 4.1.1 Spesifikasi Perangkat Keras... 99 4.1.1.1. Spesifikasi Perangkat Keras Server... 99 4.1.1.2. Spesifikasi Perangkat Keras Client... 100 4.1.2. Spesifikasi Perangkat Lunak... 100 4.1.2.1. Spesifikasi Perangkat Lunak Server... 100 4.1.2.2. Spesifikasi Perangkat Lunak Client... 101 4.2 Tampilan Layar... 101 4.2.1 Tampilan Layar Sebelum Login... 101 4.2.2 Tampilan Layar Setelah Login... 105 xii
4.3 Evaluasi Sistem... 120 4.3.1 Evaluasi dari Pengembang... 120 4.3.1.1 Evaluasi Berdasarkan Delapan Aturan Emas... 120 BAB 5 SIMPULAN DAN SARAN... 122 5.1 Simpulan... 122 5.2 Saran... 122 Daftar Pustaka... 123 Riwayat Hidup... 125 Lampiran... L1 xiii
DAFTAR TABEL Tabel 3.1. Tabel Perbandingan Xiang Qi Training dengan Xiang Qi Online... 55 Tabel 3.2. Tabel Hasil Kuesioner Pertanyaan No. 1.... 56 Tabel 3.3. Tabel Hasil Kuesioner Pertanyaan No. 2.... 57 Tabel 3.4. Tabel Hasil Kuesioner Pertanyaan No. 3.... 59 Tabel 3.5. Tabel Hasil Kuesioner Pertanyaan No. 4.... 60 Tabel 3.6. Tabel Hasil Kuesioner Pertanyaan No. 5.... 61 Tabel 3.7. Tabel Prioritas Elemen Permainan Catur China.. 63 Tabel 3.8. Tabel Penghitungan Bobot Prioritas Elemen Permainan Catur China 64 Tabel 3.9. Tabel Kamus Data Atribut.. 82 Tabel 3.10. Tabel Candidate Key dan Primary Key.. 86 Tabel 3.11. Tabel Hubungan Relasional Antar Entiti... 89 xiv
DAFTAR GAMBAR Gambar 3.1. Papan Catur China 37 Gambar 3.2. Tampilan Awal Xiang Qi Training. 43 Gambar 3.3. Tampilan ketika melakukan move Xiang Qi Training... 44 Gambar 3.4. Tampilan setelah menyerang Xiang Qi Training... 45 Gambar 3.5. Halaman login Xiang Qi online window mode.. 48 Gambar 3.6. Halaman login Xiang Qi online full screen mode... 49 Gambar 3.7. Halaman permainan Xiang Qi online window mode.. 50 Gambar 3.8. Halaman permainan Xiang Qi online full screen mode.. 50 Gambar 3.9. Halaman permainan Xiang Qi online pada saat memindahkan bidak... 51 Gambar 3.10. Halaman permainan Xiang Qi online setelah melakukan move (1).. 52 Gambar 3.11. Halaman permainan Xiang Qi online setelah melakukan move (2).. 52 Gambar 3.12. Tampilan bidak menyerang Xiang Qi online. 53 Gambar 3.13. Tampilan keadaan skak (check) Xiang Qi online.. 54 Gambar 3.14. Grafik Hasil Kuesioner Pertanyaan No. 1. 56 Gambar 3.15. Grafik Hasil Kuesioner Pertanyaan No. 2. 58 Gambar 3.16. Grafik Hasil Kuesioner Pertanyaan No. 3.... 59 Gambar 3.17. Grafik Hasil Kuesioner Pertanyaan No. 4 60 Gambar 3.18. Grafik Hasil Kuesioner Pertanyaan No. 5. 62 Gambar 3.19. Grafik Hasil Penghitungan Tabel Prioritas Elemen Game... 64 xv
Gambar 3.20. Rancangan Layar Halaman Index.. 66 Gambar 3.21. Rancangan Layar Halaman Index Register.... 67 Gambar 3.22. Rancangan Layar Halaman Home.... 68 Gambar 3.23. Rancangan Layar Halaman Server... 69 Gambar 3.24. Rancangan Layar Halaman Lobby... 70 Gambar 3.25. Rancangan Layar Halaman Room... 72 Gambar 3.26. Rancangan Layar Halaman Profile.. 73 Gambar 3.27. Diagram Konseptual Hubungan Relasional antar Entiti. 79 Gambar 3.28. Diagram Database Logikal.. 90 Gambar 3.29. Entity Relationship Diagram.. 91 Gambar 3.30. State Transition Diagram Index... 93 Gambar 3.31. State Transition Diagram Home.. 94 Gambar 3.32. State Transition Diagram Server. 95 Gambar 3.33. State Transition Diagram Lobby. 96 Gambar 3.34. State Transition Diagram Room.. 97 Gambar 3.35. State Transition Diagram Profile. 98 Gambar 4.1. Interface Halaman Index Login.... 102 Gambar 4.2. Interface Halaman Index Forgot Password.. 103 Gambar 4.3. Interface Halaman Index Register. 104 Gambar 4.4. Interface Halaman Home.. 105 Gambar 4.5. Interface Halaman Home Inbox 107 xvi
Gambar 4.6. Interface Halaman Home View Message 108 Gambar 4.7. Interface Halaman Home Reply Message.. 109 Gambar 4.8. Interface Halaman Home Forward Message. 110 Gambar 4.9. Interface Halaman Home Sent.. 111 Gambar 4.10. Interface Halaman Home View Sent Message.. 112 Gambar 4.11. Interface Halaman Profile 113 Gambar 4.12. Interface Halaman Profile Edit.. 114 Gambar 4.13. Interface Halaman Profile Edit Profile Picture. 115 Gambar 4.14. Interface Halaman Server. 116 Gambar 4.15. Interface Halaman Lobby. 117 Gambar 4.16. Interface Halaman Lobby Create Room 118 Gambar 4.17. Interface Halaman Room.. 119 xvii
DAFTAR LAMPIRAN Lampiran 1 Kuesioner Penelitian. L1 xviii