BAB 4 IMPLEMENTASI Bab ini akan menjabarkan tentang rencana implementasi dari aplikasi yang telah dirancang, spesifikasi perangkat lunak (software) dan perangkat keras (hardware) yang diperlukan untuk menjalankan aplikasi dengan baik, tampilan antar muka (interface) aplikasi pada saat dijalankan. Aplikasi web ini sendiri direncanakan akan menggunakan alamat website www.goxiangqi.com. 4.1. Spesifikasi Sistem 4.1.1. Spesifikasi Perangkat Keras 4.1.1.1. Spesifikasi Perangkat Keras Server Kebutuhan spesifikasi perangkat keras pada server untuk menjalankan aplikasi permainan catur china ini adalah sebagai berikut: 1. Prosesor Intel (r) DualXeon Server 3.0GHz. 2. Memori 2 GB. 3. VGA Card 16 MB. 4. Hard Disk 250 GB. 99
100 4.1.1.2. Spesifikasi Perangkat Keras Client Kebutuhan spesifikasi perangkat keras yang digunakan pada komputer client agar dapat menjalankan aplikasi adalah sebagai berikut: 1. Prosesor Intel Pentium (R) Dual-Core T4200 2 GHz. 2. Memori 2 GB. 3. Monitor 13 inch. 4. VGA Card Nvidia GeForce 9300M GS. 5. Keyboard dan mouse 6. Hard Disk 150 GB 7. Modem 4.1.2. Spesifikasi Perangkat Lunak 4.1.2.1. Spesifikasi Perangkat Lunak Server Kebutuhan spesifikasi perangkat lunak yang digunakan pada server untuk menjalankan aplikasi permainan catur china ini adalah sebagai berikut: 1. Sistem Operasi Windows Server. 2. Web Server Apache versi 6.0. 3. DBMS MySQL versi 5.
101 4.1.2.2. Spesifikasi Perangkat Lunak Client Kebutuhan spesifikasi perangkat lunak yang digunakan pada komputer client untuk menjalankan aplikasi permainan catur china adalah sebagai berikut: 1. Sistem Operasi Windows 7 2. Web Browser Mozilla Firefox versi 3.6.13. 4.2. Tampilan Layar Tampilan layar dibagi berdasarkan akses yang dimiliki oleh user. Aplikasi permainan catur cina berbasis web membagi akses ke dalam dua (2) bagian, yaitu nonmember dan member. Para non-member hanya dapat mengakses bagian pertama dari website yaitu halaman index, dimana mereka dapat melakukan registrasi langsung dari halaman tersebut. Para member dapat mengakses semua halaman, antara lain bermain catur cina, chatting dengan semua friend dan juga player di website chinese chess, menampilkan dan melakukan edit pada profile mereka. 4.2.1. Tampilan Layar Sebelum Login Halaman pertama yang akan ditemui oleh user adalah halaman index. Halaman ini dapat diakses oleh semua jenis user, non-member dan member. Halaman index memiliki fungsi login registrasi, forgot password. Jika login belum dilakukan, maka hanya halaman index yang dapat diakses oleh user.
102 Gambar 4.1. Interface Halaman Index Login Halaman Index pada saat pertama kali diakses akan tampak seperti pada Gambar 4.1. Di bagian header akan terdapat nama website, GoXiangQi, dalam ukuran yang besar. Di bagian tengah kiri terdapat panel gambar-gambar yang dapat digunakan sebagai tempat pengumuman atau hanya sekedar sebagai gambar yang memperindah halaman ini. Di sebelah kanan terdapat login form untuk member yang terdiri dari username dan password. Terdapat dua button di bagian paling bawah dari login form, yaitu button login dan register. Di bagian bawah password, terdapat fasilitas untuk membantu member yang lupa dengan password-nya. Klik pada Remind M e akan membawa user ke halaman index dengan form restore password, seperti pada Gambar 4.2. Panel bagian kanan akan memunculkan sebuah textbox yang dapat diisi e-mail oleh user, yang nantinya akan dijadikan alamat tujuan pengiriman informasi password user. E-mail akan segera dikirim setelah
103 user melakukan klik pada button Retrieve yang terdapat di sebelah kiri bawah panel kanan, dan user juga dapat membatalkan transaksi ini dengan melakukan klik pada button Back yang terdapat di sebelah kanan button Retrieve. Gambar 4.2. Interface Halaman Index Forgot Password
104 Gambar 4.3. Interface Halaman Index Register Halaman Index seperti yang tampak pada Gambar 4.3. akan muncul apabila user melakukan klik pada button Register di halaman index awal, seperti pada Gambar 4.1. Di sebelah kanan halaman ini akan terdapat member registration form yang terdiri dari username, password, confirm password dan e-mail. User dapat mengkonfirmasi pendaftarannya dengan melakukan klik pada button Submit yang terdapat di sebelah kiri bawah form, atau user juga dapat kembali ke halaman index awal dengan menekan button Back yang berada tepat di sebelah kanan button Submit.
105 4.2.2. Tampilan Layar Setelah Login Semua halaman dapat diakses oleh user yang telah melakukan proses login. Proses login sendiri dapat dilakukan oleh user pada halaman index, dengan mengis i username dan password user. Halaman-halaman yang dapat diakses oleh user setelah proses login antara lain adalah halaman home, profile, edit profile, server, news, play, dan lobby. Berikut adalah tampilan dari halaman-halaman tersebut. Gambar 4.4. Interface Halaman Home Halaman Home merupakan halaman website yang akan muncul setelah member sukses melakukan login di halaman index. Halaman ini bertujuan untuk memberikan overview kepada member mengenai update terbaru permainan dan
106 pesan pribadi yang member dapatkan, seperti yang tampak pada Gambar 4.4. Di bagian atas terdapat header yang sedikit berbeda dengan yang ada di halaman index. Header pada halaman Home terdiri dari logo website di sebelah kiri, kemudian nama website di bagian tengah, dan tab Home, Profile, Play dan Logout di sebelah kanan. Di bagian bawah terdapat footer yang berisi informasi mengenai copyright dan juga informasi best viewed. Di antara header dan footer terdapat tiga (3) bagian yang dibatasi oleh garisgaris vertikal. Bagian pertama adalah bagian informasi umum member, yang terletak di sebelah kiri. Informasi umum yang ditampilkan antara lain adalah foto member dan nama lengkap member. Terdapat juga button edit profile yang terletak tepat di bawah nama lengkap member. Di bawah panel informasi umum tersebut, terdapat panel message, yang memiliki dua tab, yaitu inbox dan sent. Di bawah panel message, terdapat tab Send Message, yang memungkinkan member langsung membuat dan mengirimkan pesan dari halaman Home, dan button Quick Play yang berfungsi untuk membawa member ke ruangan permainan yang kosong. Bagian kedua adalah bagian informasi yang berisi top champion, player of the day, dan daftar top ten player, yang terdapat di tengah-tengah halaman home. Panel top champion terdapat di bagian kiri atas, panel player of the day terdapat di bagian kanan atas dan panel daftar top ten player terdapat di bagian tengah bawah. Bagian ketiga adalah bagian commercial space yang dapat diisi dengan banner, yang terletak di bagian paling kanan halaman home.
107 Gambar 4.5. Interface Halaman Home Inbox Bagian tengah dari halaman home akan berubah menjadi daftar pesan pribadi yang diterima oleh member apabila member melakukan klik pada tab inbox yang terdapat pada panel message di sebelah kiri halaman home. Daftar pesan pribadi ditampilkan berurutan sesuai dengan waktu penerimaannya, seperti yang tampak pada Gambar 4.5. Setiap baris pesan pribadi memiliki foto pengirim pesan, username pengirim pesan, judul pesan, isi baris pertama pesan, dan juga waktu pengiriman pesan pribadi.
108 Gambar 4.6. Interface Halaman Home View Message Member dapat melihat isi lengkap pesan pribadi dengan melakukan klik pada pesan yang ingin ditampilkan. Tampilan akan berubah di bagian tengah, dimana bagian tengah akan menampilkan isi lengkap pesan pribadi yang disertai dengan foto dan username pengirim pesan, waktu pengiriman pesan. Di bawah isi pesan terdapat beserta dengan button Reply, Forward dan Delete, seperti yang tampak pada Gambar 4.6.
109 Gambar 4.7. Interface Halaman Home Reply Message Member dapat langsung membalas pesan pribadi yang dikirimkan oleh member lain dengan melakukan klik pada button Reply di tampilan isi pesan seperti pada Gambar 4.6. Tampilan bagian tengah halaman Home akan menampilkan isi lengkap pesan pribadi yang ingin dibalas dan juga text area untuk tempat mengetik pesan yang ingin dikirimkan. Button Send yang berguna untuk mengirimkan pesan balasan terdapat di bawah text box, dan di sampingnya terdapat button Cancel yang berfungsi untuk membatalkan pengiriman pesan balasan.
110 Gambar 4.8. Interface Halaman Home Forward Message Member dapat langsung mengirimkan pesan pribadi kepada teman yang lain dengan fasilitas forward message yang ada di halaman home, bagian message. Bagian tengah halaman home akan menampilkan tiga (3) bagian yaitu nama teman tujuan pengiriman pesan, judul pesan, dan isi pesan yang dikirimkan. Button Send dan Cancel terdapat di sudut kanan bawah panel tengah, yang masing-masing berfungsi untuk mengirimkan pesan dan membatalkan pengiriman pesan.
111 Gambar 4.9. Interface Halaman Home Sent Halaman Home dapat menampilkan juga pesan-pesan pribadi yang telah kita kirimkan kepada member yang lain. Daftar pesan yang telah kita kirimkan akan ditampilkan di bagian tengah halaman home apabila member memilih tab Sent yang terdapat di panel message yang ada di sebelah kiri halaman home. Daftar ini diurutkan berdasarkan waktu pengiriman pesan, dan setiap baris pesan menampilkan foto penerima pesan pribadi, username penerima pesan pribadi, judul pesan dan baris pertama pesan pribadi, serta waktu pengirimannya.
112 Gambar 4.10. Interface Halaman Home View Sent Message Member dapat melihat isi keseluruhan dari pesan yang pernah dikirimkan dengan melakukan klik pada pesan yang ingin dilihat. Bagian tengah halaman home akan menampilkan isi lengkap pesan, foto dan username member pengirim tersebut, serta button Forward dan Delete di bagian kanan bawah.
113 Gambar 4.11. Interface Halaman Profile Halaman profile merupakan halaman yang berisi informasi lengkap mengenai member. Halaman ini menampilkan foto member yang berada di sebelah kiri, dan informasi lengkap member serta catatan permainannya di sebelah kanan atas halaman profile. Daftar teman yang dimiliki member berada di bawah foto dan informasi umum member, seperti yang terlihat pada Gambar 4.10. Terdapat button Edit yang berada di sudut kanan bawah bagian informasi umum dan catatan permainan, dan terdapat button Send Message dan Delete di sebelah kanan setiap foto teman member. Catatan permainan user (record) memiliki informasi jumlah game yang telah dimainkan (game played), jumlah game yang dimenangkan (win), jumlah game dimana user kalah (lose), dan jumlah skor yang telah dikumpulkan user (score). User telah diberikan skor awal 2000 pada saat mereka mendaftarkan diri
114 sebagai member. Pemberian skor awal 2000 ditujukan untuk menghindari skor mencapai angka di bawah nol (0), dan agar permainan lebih menarik, memberi kesan baik pada setiap pemain. Setiap game dapat memiliki tiga (3) macam hasil: a. Win (menang): skor bertambah satu (1) poin b.draw (seri): skor bertambah nol (0) poin c. Lose (kalah): skor berkurang satu (1) poin Gambar 4.12. Interface Halaman Profile Edit Tampilan seperti pada Gambar 4.11 muncul apabila member melakukan klik pada button Edit yang ada di halaman Profile. Form edit profile dan edit account terletak di bagian sebelah kanan atas halaman ini. Bagian informasi umum yang dapat di-edit antara lain full name, gender, birth date dan location. Bagian edit
115 account digunakan untuk mengganti password member. Terdapat button Save dan Cancel di sudut kanan bawah bagian edit account. Gambar 4.13. Interface Halaman Profile Edit Profile Picture Member dapat mengganti profile picture mereka dengan melakukan klik pada profile picture mereka di halaman profile. Bagian foto member akan berubah menjadi bagian upload profile picture, yang terdiri dari satu textbox yang dapat diisi alamat foto yang ingin digunakan sebagai profile picture. Button Browse terletak di sebelah kanan textbox, dan button Save dan Cancel terletak tepat di bawah textbox dan button Browse, seperti yang tampak pada Gambar 4.13.
116 Gambar 4.14. Interface Halaman Server Halaman Server muncul apabila member melakukan klik pada tombol play. Halaman ini sangat sederhana, hanya terdiri dari header dan footer yang sama dengan header dan footer yang ada di halaman lain, dan sebuah daftar server yang aktif di bagian tengah halaman, seperti yang tampak pada Gambar 4.14. Daftar ini berisi nama server dan jumlah user yang sedang menggunakan server tersebut. Terdapat button Connect di bawah daftar server.
117 Gambar 4.15. Interface Halaman Lobby Halaman Lobby ditampilkan setelah member memilih server di halaman Server seperti pada Gambar 4.14. Halaman Lobby terdiri dari 5 bagian utama. Bagian pertama adalah room list yang berada di sebelah kiri atas halaman. Room list menampilkan ruangan-ruangan permainan yang sedang aktif. Di bagian bawah room list terdapat tiga (3) buah button, yaitu button Create, Join dan Exit. Bagian kedua adalah chat room, yang terletak tepat di bawah room list. Chat room menampilkan chat yang melibatkan semua player yang online di server tersebut. Bagian ketiga adalah bagian informasi catatan permainan player. Bagian ini memiliki foto player, username player, jumlah game yang sudah dimainkan player
118 dan rekor menang-kalah yang dimiliki oleh player. Bagian keempat adalah bagian daftar teman yang sedang online, dimana di dalamnya terdapat kotak pencari (search box) untuk mencari teman yang diinginkan. Bagian kelima merupakan bagian yang disewakan untuk iklan-iklan komersial. Gambar 4.16. Interface Halaman Lobby Create Room Pop-up window yang berfungsi untuk membuat ruangan permainan akan muncul di bagian tengah halaman ketika member melakukan klik pada button Create. Pop-up window tersebut terdiri textbox untuk mengisi nama ruangan yang diinginkan dan button Create dan Cancel seperti yang terlihat pada Gambar 4.16.
119 Gambar 4.17. Interface Halaman Room Halaman room merupakan halaman tempat pemain bermain catur china. Papan permainan catur china ditampilkan pada bagian kiri, dengan bidak warna hitam berada di bagian atas dan bidak warna merah berada di bagian bawah. Di sebelah kanan terdapat beberapa bagian, yang paling atas adalah bagian informasi ruangan, tepat di bawahnya terdapat informasi pemain yang ada di ruangan tersebut. Informasi waktu dan giliran terdapat tepat di bawah bagian informasi pemain. Pemain dan penonton dapat melakukan aktivitas chatting di chat box yang terdapat di bawah bagian waktu dan giliran. Tombol exit terdapat di bawah chat box dan kemudian paling bawah adalah bagian commercial space.
120 4.3. Evaluasi Sistem 4.3.1. Evaluasi dari Pengembang 4.3.1.1. Evaluasi Berdasarkan Delapan Aturan Emas 1. Konsistensi: konsistensi warna, peletakan logo, pemberian gambar dan peletakan menu dilakukan pada halaman web. Hal ini dilakukan dengan tujuan untuk mempermudah pengguna di dalam mengingat jenis-jenis halaman dan menu. 2. Memungkinkan pengguna untuk menggunakan shortcut: beberapa fitur yang sangat sering digunakan oleh pengguna memiliki shortcut. Shortcut yang ada antara lain halaman home, profile, play, logout, dan fitur message dan quickplay. 3. Menawarkan umpan balik yang informatif: aplikasi berbasis web ini cukup interaktif dengan memberikan umpan balik berupa fitur pencarian yang memungkinkan pengguna untuk melakukan pencarian berdasarkan kata kunci tertentu, terutama pada pencarian pengguna lain. 4. Desain kotak dialog: aplikasi berbasis web ini memberikan pesan akhir pada beberapa proses yang dijalankan oleh pengguna, untuk memberikan rasa accomplishment pada pengguna. 5. Pencegahan kesalahan dan penanganan error: aplikasi berbasis web ini memiliki validasi di setiap halaman sehingga pencegahan kesalahan dapat dilakukan. Salah satu contoh adalah validasi username yang dilakukan pada saat pengguna melakukan proses registrasi anggota.
121 6. Pembatalan aksi yang mudah: pengguna dapat melakukan pembatalan aksi dengan melakukan klik pada tombol back pada web browser atau tombol kendali pada aplikasi. 7. Mendukung pusat kendali internal: pengguna memiliki kontrol penuh dalam pengoperasian aplikasi serta aplikasi web dapat merespon permintaan pengguna. 8. Mengurangi beban ingatan jangka pendek: pengoperasian aplikasi yang mudah dan tata letak halaman web yang konsisten mempermudah pengguna untuk mengingat halaman-halaman pada aplikasi web ini. Pengguna juga dapat melakukan replay untuk melihat histori langkahlangkah dalam suatu game.