Membuat Buku Tamu Dengan PHP
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 {
document.forms[0].submit();
}
}
}
}
</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.
Senin, 08 November 2010
My Facebook
total pengunjung
0 komentar:
Posting Komentar