Belajar Membuat Buku Tamu Sendiri dengan PHP

Semua blogger pasti mengenal yang namanya buku tamu atau guest book. Yang merupakan widget yang paling populer digunakan untuk pesan-pesan yang ditinggalkan pengunjung. Dan hampir banyak pengunjung menulis pesan atau komentar di buku tamu daripada komentar postingan.

Penyedia buku tamu yang populer saat ini mungkin shoutmix, cbox, dll. Tapi kebayang gak kalau buku tamu itu bikinan sendiri. Lebih menarik dan kreatif bukan? Dan nantinya kita bisa memodifikasinya sendiri.

Sekarang kita akan membuat buku tamu sederhana. Buku tamu ini menggunakan bahasa PHP, jadi bagi kamu yang sudah punya web hosting tak masalah lagi. Kalau yang belum numpang nebeng web hosting temen juga boleh. 😀 Nantinya buku tamu ini juga akan menggunakan database. Jika kamu pakai wordpress. bikin saja table baru di database wordpress kamu

CREATE TABLE `buktam` (
  `id` int(11) NOT NULL auto_increment,
  `nama` varchar(40) NOT NULL,
  `website` varchar(40) NOT NULL,
  `pesan` text NOT NULL,
  `waktu` datetime NOT NULL,
  PRIMARY KEY  (`id`)

Kalau sudah bikin table untuk buku tamunya maka kita lanjut ke tahap berikutnya. Yaitu mendesain tampilan buku tamunya. Cara mendesainnya bisa dari Dreamweaver. Filenya harus bertipe PHP, bukan HTML

Contoh desainnya seperti ini.

Scriptnya, pertama klik dulu tab code. kemudian kopas dibawah tag body

<div class="shoutbox">
MyShoutbox
<div class="container"><? include("showdata.php");?></div>
<div class="formdata">
<form method="post" action="input.php" id="form">
<div class="formname">Nama</div>
<div class="inputform"><input name="nama" type="text" id="nama" /></div> 

<div class="formname">Website</div>
<div class="inputform"><input name="website" type="text" id="website" /></div> 

<div class="formname">Pesan</div>
<div class="inputform"><input name="pesan" type="text" id="pesan" /></div> 

<div align="right">
<input type="submit" value="Shout!" id="submit" class="submit"/>
</div> 

</form>
</div>
</div>
</div>

untuk tulisan bewarna biru jangan dihapus. karena itu adalah tag input. untuk tempat menuliskan nama, website, pesan tombol submit dan untuk menampilkan pesan yang sudah diinput.

dan Stylenya disimpan di atas tag head

<style type="text/css">
body {font-family: Arial, Helvetica, sans-serif; font-size: 12px;}
a {color: #FFF;}
input {width: 96px;    margin: 0px;}
.container {height: 275px; width: 150px; margin-top: 5px; background-color: #CCC; border: 1px solid #CCC; margin-right: auto; margin-left: auto; overflow: auto;}
.submit {padding: 1px; border: 1px solid #CCC; background-color: #FFF; right: 0px; width: 90px; margin-top: 3px;}
.tanggal {text-align: right; font-size: 10px; color: #666;}
.shoutbox {padding: 5px; background-color: #03F; width: 160px;}
.formname {width: 45px; float: left; margin-top: 5px;}
.inputform {float: right;}
.formdata {margin-top: 4px; margin-right: auto;    margin-left: auto; width: 150px;}
.datacontainer {padding: 2px; background-color: #09F; margin-top: 2px; word-wrap: break-word; text-align: justify;}
</style>

Simpan dengan nama shoutbox dengan jenis file PHP

Kemudian kita akan membuat file untuk menyambung ke database. Buat file baru pindah ke tab code. Hapus semua script yang ada di situ.

Kemudian kopi pastekan script dibawah ini.

<?

//user, password, dan server mysql
$username = "usrname mysql disini";
$password = "password mysql disini";
$server = "server mysql disini"; 

//mengkoneksi ke database
$login = mysql_connect($server,$username,$password); 

//masuk ke database bukutamu
$database = "nama database disini";
$database = mysql_select_db($database); 

?>

Ubah tulisan bewarna merah tsb dengan keterangan yang ditulis.

Dan simpan dengan nama connect dengan jenis file PHP.

Kemudian buat baru lagi, pindah ke tab code. Hapus semua script yang ada di situ, dan kopas script ini:

<?
require("connect.php");

//pendefinisan nama input
$nama = $_POST['nama'];
$website = $_POST['website'];
$pesan = $_POST['pesan'];

//memasukkan data yang telah diisi di form jika nama dan pesan diisi
if ($nama != '' && $pesan != '') {
$input = "INSERT INTO buktam (nama,website,pesan,waktu) VALUES ('$nama','$website','$pesan',NOW())";
$perintah = mysql_query($input);
}

//kembali ke depan jika data sudah di input
if($perintah) {
    header("location:shoutbox.php");
}

?>

Dan save dengan nama input dengan jenis file PHP

Kemudian buat kembali file php untuk menampilkan data dari database. Hapus dulu script yang ada di tab code sebelum mengkopas script ini.

<?
require("connect.php");

//memilih data yang akan ditampilkan
$select = "SELECT * FROM buktam ORDER BY id DESC";
$query = mysql_query($select);

//mengkelompokkan secara row lalu menampilannya
while($array = mysql_fetch_array($query)) {
?>

<!--desain tampilan buku tamu di bawah ini. Jangan dihapus kode php yang bertulisan echo....... tsb. Karena itu script untuk menampikan data.-->

<div class="datacontainer">
<div><span><a href="<? echo("$array[website]");?>"><? echo("$array[nama]");?></a></span> : <span><? echo("$array[pesan]");?></span></div>
<div class="tanggal"><? echo("$array[waktu]");?></div>
</div>
<? }?>

dan save dengan nama showdata dengan Jenis file PHP.

Jadi jumlah file yang kita buat berjumlah 4. Upload ke 4 file tersebut ke web hosting. Pastikan ke-4 file tersebut sama-sama satu folder. Jangan terpisah.

Untuk mengapplikasikannya. kita akan menggunakan tag iframe.

<iframe src="alamat shoutbox.php disimpan" width="160" frameborder="0" scrolling="auto">