ANALISA DAN PERANCANGAN PERMAINAN CATUR CHI NA
BERBASIS WEB
SKRIPSI
Oleh
Hengky Frans 1100048052
Winardi Cristian 1100047900
Universitas Bina Nusantara
Jakarta
ii
ANALISA DAN PERANCANGAN PERMAINAN CATUR CHI NA
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
vi
PERN YATAAN
Dengan ini kami, Nama : Hengky Frans NIM : 1100048052 Nama : Winardi Cristian NIM : 1100047900
Judul skripsi : Analisa dan Perancangan Permainan Catur China Berbasis Web
M emberikan 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.
M enyatakan 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 M aret 2011
viii
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 Perma inan Catur China Berbasis Web” ini disusun sebagai salah satu syarat untuk me mperoleh 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.Co m.Sc., selaku Dekan Fakultas Ilmu Komputer Universitas Bina Nusantara.
4. Bapak Fredy Purnomo, S.Kom, M.Ko m., 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 me mberikan bimbingan, pengarahan, dan masukan dari awal sampai selesainya skripsi ini sehingga skripsi ini dapat terselesaikan dengan baik.
ix
7. Bapak dan Ibu dosen yang telah membagikan ilmunya mela lui kuliah sejak semester pertama hingga semester ketujuh ini.
8. Bapak Anderes Gui selaku mitra peneliti yang telah membantu dan me mberikan 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 me mbantu 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. Se moga penelitian ini juga dapat menjadi inspirasi orang-orang yang terkait secara langsung atau tidak langsung melalu i aplikasi ataupun penulisannya.
Jakarta, Januari 2011
x
DAFTAR ISI
Halaman Judul Luar ... i
Halaman Judul Dalam ... ii
Halaman Persetujuan Hard Cover ... iii
Halaman Pernyataan Dewan Penguji ... iv
Halaman Pemberian Hak Cipta Non Eksklusif dari M ahasiswa ke Universitas Bina Nusantara... vi
Abstrak ... vii
Prakata ... viii
Daftar Isi ... x
Daftar Tabel ... xiv
Daftar Gambar ... xv
Daftar Lampiran ... xviii
BAB 1 PENDAHULUAN ... 1
1.1. Latar Belakang ... 1
1.2. Ruang Lingkup ... 3
1.3. Tujuan dan M anfaat ... 3
1.4. M etodologi ... 4
1.5. Sistematika Penulisan ... 6
BAB 2 LANDAS AN 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
xi
2.1.5.1. Client-side Scripting... 10
2.1.5.2. Server-side Scripting ... 11
2.1.6. IMK (Interaksi M anusia dan Komputer) ... 12
2.1.6.1. Pengertian IM K ... 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 ANALIS A 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
xii
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. M engidentifikasi candidate key dan primary key ... 85
3.4.2.2.3. M enentukan 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 IMPLEMENTAS I... 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
xiii
4.3 Evaluasi Sistem ... 120
4.3.1 Evaluasi dari Pengembang... 120
4.3.1.1 Evaluasi Berdasarkan Delapan Aturan Emas ... 120
BAB 5 S IMPULAN DAN S ARAN ... 122
5.1 Simpulan ... 122
5.2 Saran ... 122
Daftar Pustaka ... 123
Riwayat Hidup ... 125 Lampiran ... L1
xiv
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
xv
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 – windowmode……….. 48
Gambar 3.6. Halaman login Xiang Qi online – fullscreenmode………... 49
Gambar 3.7. Halaman permainan Xiang Qi online – windowmode……….…. 50
Gambar 3.8. Halaman permainan Xiang Qi online – fullscreenmode……….. 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
xvi
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. EntityRelationshipDiagram………..……… 91
Gambar 3.30. StateTransitionDiagram – Index……….……….. 93
Gambar 3.31. StateTransitionDiagram – Home……….. 94
Gambar 3.32. StateTransitionDiagram – Server……….……… 95
Gambar 3.33. StateTransitionDiagram – Lobby….……… 96
Gambar 3.34. StateTransitionDiagram – Room.………. 97
Gambar 3.35. StateTransitionDiagram – Profile………. 98
Gambar 4.1. Interface Halaman Index – Login…………..……….. 102
Gambar 4.2. Interface Halaman Index – ForgotPassword……….. 103
Gambar 4.3. Interface Halaman Index – Register………. 104
Gambar 4.4. Interface Halaman Home……….. 105
xvii
Gambar 4.6. Interface Halaman Home – ViewMessage……… 108
Gambar 4.7. Interface Halaman Home – ReplyMessage……….. 109
Gambar 4.8. Interface Halaman Home – ForwardMessage………. 110
Gambar 4.9. Interface Halaman Home – Sent……….. 111
Gambar 4.10. Interface Halaman Home – ViewSentMessage……….. 112
Gambar 4.11. Interface Halaman Profile……… 113
Gambar 4.12. Interface Halaman Profile – Edit……….. 114
Gambar 4.13. Interface Halaman Profile – EditProfilePicture………. 115
Gambar 4.14. Interface Halaman Server………. 116
Gambar 4.15. Interface Halaman Lobby………. 117
Gambar 4.16. Interface Halaman Lobby – Create Room……… 118
xviii
