31
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 :
32
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 :
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.
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.
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 :
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”.
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.
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',
`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 :
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.
Gambar 3.25 Lokasi direktori “scg”
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.
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 :
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
