BAB III PEMBAHASAN MASALAH

BAB III PEMBAHASAN MASALAH Pada bab ini, penulis akan menjelaskan tentang masalah pokok, yaitu bagaimana cara membuat situs Sylphid Cyber Games dengan menggunakan teknologi PHP. Situs ini terdiri dari halaman-halaman yang dibuat dengan menggunakan pemrogaman HTML untuk membuat tampilan, dan kode-kode PHP pada halaman request, response, password dan view. Sehingga situs ini menjadi lebih dinamis dan interaktif. Pembahasan ini penulis pisahkan menjadi beberapa bagian, bagian pertama akan menjelaskan tentang struktur navigasi situs, bagian kedua akan menjelaskan tentang rancangan tampilan situs, bagian ketiga akan menjelaskan tentang database, dan bagian keempat akan menjelaskan bagaimana cara menyimpan halaman situs. Selain itu, penulis juga akan menjelaskan bagaimana cara menghubungkan situs kedalam database, dan cara menampilkan situs yang telah dibuat kedalam browser. 3.1 Struktur Navigasi Struktur navigasi digunakan untuk menggambarkan secara garis besar isi dari keseluruhan situs tersebut, dan untuk menggambarkan bagaimana hubungan dari halaman-halaman situs tersebut. Untuk situs ini, penulis menggunakan struktur navigasi komposit (campuran) yang bisa dilihat pada gambar berikut : 31

Gambar 3.1 Struktur navigasi situs Sylphid Cyber Games 32

33 3.2 Rancangan Tampilan Situs Situs ini memiliki beberapa halaman yang dapat memberikan informasi bagi para pengunjung. Dalam rancangan situs Sylphid Cyber Games ini, penulis memberikan gambaran dan penjelasan dari tiap-tiap halaman situs. Berikut ini merupakan rancangan tampilan situs Sylphid Cyber Games. 3.2.1 Rancangan Halaman Indeks Halaman indeks adalah halaman depan dari situs ini, halaman ini juga disebut sebagai halaman pembuka, karena pada saat pertama kali situs ini dibuka maka halaman inilah yang akan tampil pertama kali sebelum halaman yang lainnya. Pada halaman ini terdapat navigasi dan keterangan singkat tentang halaman-halaman selanjutnya yang dapat dikunjungi. Gambar 3.2 Rancangan halaman index.php 3.2.2 Rancangan Halaman Artikel Halaman ini memiliki link-link yang dapat di klik dan berisikan tentang berita, tips-tips dan strategi dalam bermain game online.

34 Gambar 3.3 Rancangan halaman artikel.php Apabila salah satu dari link artikel tersebut di klik, maka akan muncul sebuah halaman yang berisikan tentang detil dari artikel tersebut, yang bisa dilihat seperti pada gambar berikut : Gambar 3.4 Rancangan halaman detil artikel

35 3.2.3 Rancangan Halaman Event Pada halaman ini, penulis menjelaskan tentang event yang diadakan oleh Sylphid Cyber Games, dimana pada halaman ini pengunjung dapat mengetahui event apa yang diadakan oleh Sylphid Cyber Games. Selain itu, pengunjung juga dapat melakukan pendaftaran untuk mengikuti event yang diadakan. Gambar 3.5 Rancangan halaman event.php Apabila link Daftar di klik, maka akan muncul sebuah halaman baru yang penulis beri nama event_daftar.php, dimana halaman ini terdapat form yang dapat diisi oleh para pengunjung untuk mendaftarkan diri pada event tersebut, yang bisa dilihat seperti pada gambar berikut ini :

36 Gambar 3.6 Rancangan halaman event_daftar.php Setelah pengunjung selesai mengisi form dan meng-klik tombol Daftar, selanjutnya akan muncul sebuah halaman baru yang penulis beri nama event_konfirmasi.php yang berisikan tentang konfirmasi pendaftaran. Gambar 3.7 Rancangan halaman event_konfirmasi.php

37 Dan apabila link Lihat Peserta di klik, maka akan muncul halaman yang penulis beri nama event_peserta.php yang berisikan data-data para peserta yang sudah mendaftarkan diri untuk mengikuti event tersebut. Gambar 3.8 Rancangan halaman event_peserta.php 3.2.4 Rancangan Halaman Guest Book Halaman ini merupakan halaman yang berisikan komentar-komentar dari para pengunjung yang mengunjungi situs ini. Halaman ini juga berfungsi sebagai sarana interaksi bagi para pengunjung. Selain itu, para pengunjung juga dapat mengisi guest book dan memberikan komentarnya tentang situs ini.

38 Gambar 3.9 Rancangan halaman gbook.php Pengunjung dapat mengisi guest book dengan meng-klik link Isi Guest Book, selanjutnya akan muncul halaman baru yang penulis beri nama gbook_isi.php, halaman ini berisikan form yang dapat diisi oleh pengunjung. Gambar 3.10 Rancangan halaman gbook_isi.php

39 3.2.5 Rancangan Halaman Lokasi Halaman ini dapat disebut juga sebagai halaman Contact Us atau About Us, karena pada halaman ini terdapat penjelasan tentang rental game online Sylphid Cyber Games, berupa alamat, peta lokasi, e-mail, dan nomor telepon yang dapat dihubungi. Gambar 3.11 Rancangan halaman lokasi.php 3.2.6 Rancangan Halaman Admin Selain halaman-halaman diatas, penulis juga membuat beberapa halaman khusus yang hanya dapat diakses oleh seorang administrator. Untuk dapat mengakses halaman ini, seorang administrator diharuskan mengisi username dan password yang telah terdaftar didalam database. Jika username dan password benar, maka administrator tersebut dapat mengubah isi / konten dari situs ini.

40 Gambar 3.12 Rancangan halaman login administrator Setelah berhasil login, selanjutnya akan muncul halaman baru yang penulis beri nama admin_index.php, halaman ini merupakan halaman selamat datang bagi administrator yang bisa dilihat seperti pada gambar berikut ini : Gambar 3.13 Rancangan halaman admin_index.php

41 3.2.7 Rancangan Halaman Admin Artikel Pada halaman ini, administrator dapat menambah, mengubah dan menghapus artikel yang terdapat pada situs ini. Gambar 3.14 Rancangan halaman admin_artikel.php 3.2.8 Rancangan Halaman Admin Event Pada halaman ini, administrator dapat mengubah event yang diadakan oleh Sylphid Cyber Games. Gambar 3.15 Rancangan halaman admin_event.php

42 3.2.9 Rancangan Halaman Admin Peserta Pada halaman ini, administrator dapat mengubah atau menghapus data peserta yang mengikuti event yang diadakan oleh Sylphid Cyber Games. Gambar 3.16 Rancangan halaman admin_psrta.php 3.2.10 Rancangan Halaman Admin Guest Book Pada halaman ini, administrator dapat menghapus guest book yang terdapat didalam situs ini. Gambar 3.17 Rancangan halaman admin_gbook.php

43 3.3 Spesifikasi Rancangan Database Hubungan antara objek PHP dengan MySQL harus sesuai dengan data yang terdapat didalam database, karena jika tidak sesuai, hal ini akan mengakibatkan tidak tampilnya hasil yang diinginkan pada output dan hanya akan keluar pesan mysql_error. Oleh karena itu, dalam pembuatan database harus dipisahkan antara satu tabel dengan tabel yang lainnya. Hal ini bertujuan agar tidak terjadi salah pembacaan record database pada browser. Untuk situs ini penulis membuat database dengan nama sylphid, yang didalamnya berisikan lima tabel yaitu tabel administrator, tabel artikel, tabel event, tabel guest book dan tabel peserta event. Langkah-langkah untuk membuat database situs ini adalah sebagai berikut : 1. Jalankan MySQL dan ketikkan query seperti dibawah ini : CREATE DATABASE sylphid; 2. Setelah database dibuat, selanjutnya adalah memilih database sylphid tersebut dengan mengetikkan query : USE sylphid; 3. Langkah selanjutnya adalah membuat tabel-tabelnya, untuk tabel yang pertama, penulis membuat tabel administrator, ketikkan query berikut untuk membuat tabel administrator : CREATE TABLE `administrator` ( `id` tinyint(3) NOT NULL auto_increment, `usr` varchar(20) NOT NULL, `pwd` varchar(50) NOT NULL, PRIMARY KEY (`id`) );

44 Tampilannya akan terlihat seperti gambar berikut : Gambar 3.18 Rancangan tabel administrator 4. Selanjutnya membuat tabel artikel, ketikkan query berikut untuk membuat tabel artikel : CREATE TABLE `artikel` ( `id` tinyint(4) NOT NULL auto_increment, `judul` blob NOT NULL, `isi` blob NOT NULL, PRIMARY KEY (`id`) ); Tampilannya akan terlihat seperti gambar berikut : Gambar 3.19 Rancangan tabel artikel 5. Setelah itu buat tabel event, ketikkan query berikut untuk membuat tabel event : CREATE TABLE `event` ( `id` tinyint(4) NOT NULL auto_increment, `tanggal` varchar(25) NOT NULL, `event` varchar(50) NOT NULL, `byk_agg` int(15) NOT NULL default '0', `juara1` varchar(20) NOT NULL default '0', `juara2` varchar(20) NOT NULL default '0', `juara3` varchar(20) NOT NULL default '0',

45 `htm` int(20) NOT NULL default '0', PRIMARY KEY (`id`)); Tampilannya akan terlihat seperti gambar berikut : Gambar 3.20 Rancangan tabel event 6. Lalu buat tabel guest book, ketikkan query berikut untuk membuat tabel guest book : CREATE TABLE `gbook` ( `id` tinyint(3) NOT NULL auto_increment, `tgl` date NOT NULL default '0000-00-00', `nama` varchar(30) NOT NULL, `alamat` text NOT NULL, `email` tinytext NOT NULL, `komen` text NOT NULL, PRIMARY KEY (`id`) ); Tampilannya akan terlihat seperti gambar berikut : Gambar 3.21 Rancangan tabel guest book

46 7. Dan untuk yang terakhir, buat tabel peserta event, ketikkan query berikut untuk membuat tabel peserta event : CREATE TABLE `psrta_event` ( `id` int(3) NOT NULL auto_increment, `nama_tim` varchar(20) NOT NULL, `alamat` varchar(50) NOT NULL, `nama_agg` varchar(50) NOT NULL, `no_tlp` varchar(13) NOT NULL, PRIMARY KEY (`id`) ); Tampilannya akan terlihat seperti gambar berikut : Gambar 3.22 Rancangan tabel peserta event 3.4 Pembuatan Letak Direktori Penyimpanan Sebelum membuat halaman-halaman situs Sylphid Cyber Games ini, penulis membuat sebuah direktori dengan nama scg didalam direktori htdocs (atau direktori www jika direktori htdocs tidak ada) didalam direktori Apache untuk menyimpan seluruh halaman-halaman situs yang telah dibuat. Kemudian buatlah tiga buah direktori lagi didalam direktori scg dengan nama direktori admin untuk menyimpan seluruh halaman administrator, direktori deco untuk menyimpan gambar-gambar pendukung, dan direktori scripts untuk menyimpan script-script pendukung. Untuk lebih jelasnya, perhatikan gambar 3.25 dan 3.26 berikut ini :

47 Gambar 3.25 Lokasi direktori scg Gambar 3.26 Lokasi direktori admin, deco, dan scripts

48 3.5 Cara Mengkoneksikan Halaman Situs Kedalam Database Berikut ini penulis akan menjelaskan bagaimana cara mengkoneksikan halaman situs yang telah dibuat kedalam database : 1. Jalankan Adobe Dreamweaver CS3 2. Pilih PHP pada dialog Create New Document 3. Lalu pilih Code pada Document Bar, kemudian ketikkan script berikut : <?php //koneksi kedalam database, pilih host, username dan password. $connect=mysql_connect("localhost","root","permisi"); //pilih databse $db=mysql_select_db("sylphid",$connect) or die("koneksi kedalam database gagal dilakukan :".mysql_error());?> 4. Lalu simpan dengan nama dbconnector.php didalam direktori scripts yang berada didalam direktori scg yang telah dibuat sebelumnya. Gambar 3.27 Lokasi penyimpanan script dbconnector.php

49 3.6 Cara Menampilkan Halaman Situs Kedalam Browser Untuk menampilkan halaman situs yang telah dibuat kedalam browser, lakukan langkah-langkah berikut : 1. Pastikan Apache dan MySQL telah berjalan 2. Buka internet browser seperti Windows Internet Explorer atau Mozilla Firefox 3. Ketikkan alamat berikut pada address bar : http://localhost/scg/ Tampilannya akan terlihat seperti pada gambar berikut ini : Gambar 3.28 Tampilan situs Sylphid Cyber Games pada browser

50 3.7 Spesifikasi Perangkat Keras Dan Perangkat Lunak Yang Digunakan Perangkat keras yang digunakan sangat menentukan jalannya perangkat lunak dan aplikasi yang dijalankan, bila perangkat keras yang digunakan kurang memadai, maka hasil yang diperoleh menjadi kurang baik. Oleh karena itu, penulis menampilkan konfigurasi sistem yang penulis gunakan : - Prosesor AMD Phenom II X4 810, 2.6GHz, soket AM3 - Motherboard GIGABYTE GA-MA790FXT-UD5P - Memori G Skill F3-1440CL9D-4GBGT1 DDR3 PC16000 Dual-Channel, 4Gb - VGA ATi Radeon Revolution 700 Deluxe 2Gb 512Bit DDR5 - Harddisk Western Digital Caviar 320Gb SATA-II - DVD-RW Philips 20x SATA, (Untuk instalasi Adobe Dreamweaver CS3) - Monitor LCD BenQ 17" G700AD - Keyboard Razer Lycosa dan Mouse laser Razer Copperhead Dan perangkat lunak yang penulis gunakan adalah : - Microsoft Windows XP SP3 - Adobe Dreamweaver CS3 - Apache 2.2.11 - MySQL 5.1.30 Community