Buku tamu
merupakan salah satu fitur standar yang terdapat dalam situs-situs di Internet,
terutama situs-situs pribadi. Hampir dapat dipastikan, aplikasi buku tamu akan
menggunakan database yang fungsinya adalah menyimpan daftar tamu yang pernah
mengunjungi situs tersebut dan memberikan komentarnya. Untuk itu mula-mula kita
persiapkan sebuah database – tentu saja menggunakan MySQL – dengan struktur
sebagai berikut:
Field
|
Tipe Data
|
Nama
|
Varchar(30)
|
Email
|
Varchar(40)
|
Komentar
|
Text
|
Tabel disimpan
dengan nama guest, sedangkan databasenya disimpan dengan nama gsbook. Halaman web yang
nantinya dirancang akan memiliki 3 halaman, yaitu halaman form buku tamu,
halaman daftar tamu, dan halaman terima kasih. Halaman form buku
tamu akan berisi form untuk pengisian buku tamu. Halaman daftar
tamu akan berisi daftar tamu yang telah mengisi buku tamu. Halaman terima
kasih akan berisi ucapan terima kasih atas diisinya buku tamu. Kita mulai
perancangan kita dari halaman form buku tamu. Halaman form buku tamu berisi
form untuk pengisian buku tamu. Pada halaman ini nanti akan ditambahkan suatu
skrip yang akan melakukan verifikasi terhadap form yang belum diisi. Skrip
halaman form buku tamu selengkapnya diberikan pada listing 1.
Listing 1. Form buku tamu
<HTML>
<HEAD>
<TITLE> Form </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function pesan() {
var ceknama = document.forms[0].elements[0].value;
var cekemail = document.forms[0].elements[1].value;
var cekkom = document.forms[0].elements[2].value;
if (ceknama.length == 0) {
window.alert("Anda
belum memasukkan nama Anda");
} else {
if ((cekemail.length == 0) || (cekemail.indexOf("@",1)
== -1)) {
window.alert("Periksa
kembali alamat email Anda");
} else {
if ((cekkom.length == 0)) {
window.alert("Anda
belum berkomentar");
} else {
}
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<H1> Selamat Datang di Situs Kami </H1>
Silakan isi identitas Anda <BR>
<FORM NAME="identity" METHOD="post"
ACTION="guest.php">
<PRE>
Nama : <INPUT
TYPE="text" NAME="nama">
Email : <INPUT
TYPE="text" NAME="email">
Komentar :
<TEXTAREA NAME="komentar" ROWS=10 COLS=30>
</TEXTAREA>
<INPUT TYPE="button" VALUE="Submit"
onClick=pesan()>
</PRE>
</FORM>
</BODY>
</HTML>
|
Simpanlah file
dengan nama bukutamu.html. Halaman form buku tamu akan terlihat seperti gambar
1.
Yang perlu diingat adalah bahwa walaupun memiliki ekstensi .html, halaman
ini harus tetap dijalankan di virtual direktori dengan mengetikkan
http://localhost/direktori/namafile.html di bagian address browser. Pembahasan dari
skrip di atas adalah sebagai berikut: pada bagian head terdapat skrip
JavaScript, skrip ini digunakan untuk verifikasi terhadap form yang belum
diisi. Skrip tersebut dimulai dari bagian yang bertanda <SCRIPT> dan
diakhiri oleh tag </SCRIPT>. Mula-mula skrip
tersebut mengambil nilai dari setiap elemen form. Setelah itu nilai setiap
elemen tersebut diperiksa, jika kosong, maka akan muncul peringatan. Bagian
berikutnya merupakan form HTML biasa, tetapi pada bagian submit akan
ditambahkan sebuah event handler yang mengacu pada skrip JavaScript yang
terletak di bagian head sebagai berikut:
<INPUT TYPE="button" VALUE="Submit"
onClick=pesan()>
Halaman
berikutnya adalah halaman terima kasih. Halaman terima kasih merupakan halaman
yang akan menampilkan ucapan terima kasih sekaligus di dalamnya terdapat skrip
PHP yang digunakan untuk mengolah data yang dimasukkan pada halaman form buku
tamu. Skrip selengkapnya diberikan pada listing 2.
Listing 2. Halaman terima kasih
<HTML>
<HEAD>
<TITLE> Buku Tamu </TITLE>
</HEAD>
<BODY>
<?
$host = "localhost";
$user = "root";
$pwd = "";
$conn = @mysql_connect ($host, $user, $pwd)
or die
("Koneksi Gagal, karena " . mysql_error());
mysql_select_db("gsbook",$conn);
$strSQL = "INSERT INTO guest (nama,email,komentar)
VALUES
('$_POST[nama]','$_POST[email]','$_POST[komentar]')";
$qry = @mysql_query($strSQL,$conn)
or die
("Query salah, karena: " . mysql_error());
?>
<H2> Terima kasih atas kesediaan Anda mengisi buku tamu.
</H2>
<HR>
<A HREF="table.php"> Klik di sini </A>
untuk melihat daftar para pengisi buku tamu.
</BODY>
</HTML>
|
Simpanlah file
dengan nama guest.php. Halaman terima kasih akan terlihat seperti gambar 2.
Skrip di atas
pada prinsipnya hanyalah membuka koneksi ke mysql dan menyimpan data-data yang
telah dimasukkan ke dalam tabel. Pada bagian bawah terletak sebuah link yang merujuk
pada halaman daftar tamu.
<A
HREF=”table.php”> Klik di sini </A> untuk melihat daftar para pengisi
buku tamu.
File table.php
inilah yang nantinya menampilkan daftar para pengisi buku tamu yang disajikan
dalam bentuk tabel. Skrip selengkapnya dari file table.php diberikan pada
listing 3.
Listing 3. Halaman daftar tamu
<HTML>
<HEAD>
<TITLE> Buku Tamu </TITLE>
</HEAD>
<BODY>
<CENTER>
<?
$host = "localhost";
$user = "root";
$pswd = "rahasia";
$conn = @mysql_connect ($host, $user, $pswd)
or die
("Koneksi Gagal: " . mysql_error());
mysql_select_db("gsbook",$conn);
$strSQL = "Select * from guest";
$qry= @mysql_query($strSQL,$conn)
or die
("Query salah: " .
mysql_error());
$jml = mysql_num_rows($qry);
echo "Jumlah pengisi = $jml <BR>";
?>
<TABLE BORDER=1>
<TR>
<TD
BGCOLOR=#f32142> Nama </TD>
<TD
BGCOLOR=#f32142> Email </TD>
<TD
BGCOLOR=#f32142> Komentar </TD>
</TR>
<?
while ($row = mysql_fetch_array ($qry)) {
echo
"<TR>";
echo
"<TD BGCOLOR=#f7efde>" . $row["nama"] .
"</TD>";
echo
"<TD BGCOLOR=#f7efde>" . $row["email"] .
"</TD>";
echo
"<TD BGCOLOR=#f7efde>" . $row["komentar"] .
"</TD>";
echo
"</TR>";
}
?>
</TABLE>
</BODY>
</HTML>
|
Anggap saja buku
tamu tersebut telah diisi oleh banyak orang, sehingga jika skrip di atas
dijalankan tampilan yang didapatkan kurang lebih seperti pada gambar 3.
Nama-nama yang tertera di sana hanya fiktif saja, jadi apabila ternyata ada
yang memiliki nama dan email yang sama, itu hanya kebetulan belaka. Nah, seandainya
situs tersebut merupakan situs yang ramai oleh pengunjung dan pengisi buku
tamunya banyak, maka menampilkan daftar tamu seperti skrip di atas tentu kurang
baik karena halaman tersebut akan menjadi sangat panjang. Alternatif yang
digunakan adalah menampilkan sejumlah record tertentu per halaman dan di bagian
bawah halaman terdapat link untuk menuju ke halaman berikutnya atau sebelumnya.
Kira-kira seperti hasil search di Google itu lho. Untuk membuat bentuk halaman
seperti itu, berikut akan diberikan salah satu contoh skrip alternatifnya.
Gantilah isi skrip file table.php dengan skrip seperti pada listing 4.
Listing 4. Halaman daftar tamu alternatif
<HTML>
<HEAD>
<TITLE> Daftar Tamu </TITLE>
</HEAD>
<BODY>
<CENTER>
<?
$host = "localhost";
$user = "root";
$pswd = "rahasia";
$conn = @mysql_connect ($host,$user, $pswd)
or die
("Koneksi Gagal: " . mysql_error());
mysql_select_db("gsbook",$conn);
$hal = $_REQUEST['hal'];
$batas = ($hal - 1) * 5;
$strSQL1 = "Select * from guest limit $batas,5";
$strSQL2 = "Select * from guest";
$qry = @mysql_query($strSQL1,$conn)
or die
("Query salah: " . mysql_error());
$tot = @mysql_query($strSQL2,$conn)
or die
("Query salah: " .
mysql_error());
$jml = mysql_num_rows($tot);
$kel = $jml/5;
if ($kel==floor($jml/5)){
$page = $kel;
} else {
$page =
floor($jml/5)+1;
}
$pct = 100/($page+4);
echo "Jumlah pengisi = $jml <BR>";
echo "Jumlah halaman = $page <BR>";
echo "<HR>";
?>
<TABLE BORDER=1>
<TR>
<TD
BGCOLOR=#f32142> Nama </TD>
<TD
BGCOLOR=#f32142> Email </TD>
<TD
BGCOLOR=#f32142> Komentar </TD>
</TR>
<?
while ($row = mysql_fetch_array ($qry)) {
echo
"<TR>";
echo
"<TD BGCOLOR=#f7efde>" . $row["nama"] .
"</TD>";
echo
"<TD BGCOLOR=#f7efde>" . $row["email"] .
"</TD>";
echo
"<TD BGCOLOR=#f7efde>" . $row["komentar"] .
"</TD>";
echo
"</TR>";
}
?>
</TABLE>
<HR>
<TABLE BORDER=0>
<TR>
<?
$lebar=$pct*2;
$prev=$hal-1;
$next=$hal+1;
echo "<TD WIDTH=$lebar"."%>";
if ($hal!=1) {
echo
"<A HREF='table.php?hal=$prev'> Prev </A>";
} else {
echo
"Prev";
}
echo "</TD>";
for ($i=1;$i<=$page;$i++) {
if ($i==$hal) {
echo
"<TD WIDTH=$pct"."%>";
echo
"$i";
echo
"</TD>";
} else {
echo
"<TD WIDTH=$pct"."%>";
echo
"<A HREF='table.php?hal=$i'> $i </A>";
echo
"</TD>";
}
}
echo "<TD WIDTH=$lebar"."%>";
if ($hal!=$page) {
echo
"<A HREF='table.php?hal=$next'> Next </A>";
} else {
echo
"Next";
}
echo "</TD>";
?>
</TR>
</TABLE>
</BODY>
</HTML>
|
Contoh skrip ini
menggunakan query string di dalam menentukan halaman mana yang aktif saat itu.
Setiap link untuk menuju ke suatu halaman tertentu akan memiliki bentuk seperti
ini:
<A
HREF=”table.php?hal=$i”>
Variabel $i akan
berisi nomor halaman yang dituju. Karena skrip
table.php mengalami sedikit perubahan, maka skrip pada halaman terima kasih (listing
2) perlu dimodifikasi menjadi sebagai berikut:
<A HREF=”table.php?hal=1”> Klik di sini </A> untuk
melihat daftar para pengisi buku tamu.
Mengapa query
string “hal” diisi dengan angka 1? Tentu saja agar link tersebut menuju ke
halaman 1 dari file table.php. Nah, hasil run
dari skrip table.php yang baru dapat dilihat pada gambar 4.
Tidak ada komentar:
Posting Komentar