Kali ini Blog Tempat Berbagi Ilmu akan membagikan ilmunya tentang bagaimana kita membuat buku tamu di web dengan ala sendiri,, ea walaupun munkin bagi sebagian banyak sobat yang sudah bisa membuatnya , tapi kan tidak ada masalahnya kita sharing... JANGAN MENGAMALKAN ILMU JIKA HANYA UNTUK MENYIMPAN ILMU BUAT DIRI SENDIRI SAJA, TAPI ILMU HARUS DIBAGIKAN KEPADA YANG LAIN YANG MEMBUTUHKAN NYA.
Langsung saja ketahap pembuatannya untuk <h2>membuat buku tamu sendiri di website</h2>
1. Petama2 kita harus membuat databasenya terlebih dahulu tentunya Disini kita sekarang akan mencoba memanfaatkan database MySQL sebagai media penyimpanan databasenya.
CREATE TABLE bukutamu (
id INT (10) UNSIGNED NOT NULL AUTO_INCREMENT,
nama VARCHAR (15) NOT NULL,
situs VARCHAR (30) NOT NULL,
email VARCHAR (30) NOT NULL,
pesan TEXT NOT NULL,
waktu DATETIME NOT NULL,
PRIMARY KEY(id), UNIQUE(id), INDEX(id)
);
Sobat juga bisa kopas script di atas untuk di paste kedalam MySql
1. Lalu kita membuat koneksi, Kawan-kawan tentu harus memiliki terleih dahulu applikasi Appserver/apache / Xampp.MySql/Dreamwaver
2. Buka program tersebut (salah satu) lalu ketik script di bawah ini atau copas saja
<?php
//file koneksi untuk menghubungkan dengan database
$_HOST = "localhost"; //hostname MySQL
$_USER = "user_kamu"; //user mysql
$_PASS = "pass_kamu"; //password mysql
$_DBNM = "db_kamu"; //nama database
//koneksi
$konek = mysql_connect($_HOST, $_USER, $_PASS);
if($konek) {
$sele = mysql_select_db($_DBNM);
if(!$sele) {
echo mysql_error();
}
}
?>
3. Simpan file diatas dengan nama koneksi.php
4. Lalu kita membuat halaman untuk mengisi buku tamu, kode di bawah ini
<?php
include "koneksi.php";
//jika ditekan tombol submit
if(isset($_POST['submit'])) {
$nama = addslashes($_POST['nama']);
$email = addslashes($_POST['email']);
$situs = addslashes($_POST['situs']);
$pesan = addslashes(strip_tags($_POST['pesan']));
//jika nama dan pesan tidak kosong
if(!empty($nama) && !empty($pesan)) {
$sql = mysql_query("INSERT INTO bukutamu
VALUES('','$nama','$situs','$email','$pesan',now())");
if($sql) {
?>
<script language="JavaScript">
alert('Terima kasih. Anda telah mengisi buku tamu');
document.location='lihat.php';
</script>
<?
} else {
echo mysql_error();
}
} else {
?>
<script language="JavaScript">alert('Nama dan pesan harus diisi');</script>
<?
}
}
?>
<html>
<head>
<title>Buku Tamu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body onLoad="document.frmguest.nama.focus()">
<div align="center">
<table width="481" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<form action="" method="post" name="frmguest">
<tr>
<td height="21" colspan="2" align="center" valign="middle" class="header">ISI
BUKU TAMU</td>
</tr>
<tr>
<td height="15" colspan="2" valign="top"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td width="101" height="18" valign="middle"> Nama*</td>
<td width="378" valign="middle">
<input name="nama" type="text" id="nama" size="20" maxlength="20"> </td>
</tr>
<tr>
<td height="18" valign="middle"> Email</td>
<td valign="middle">
<input name="email" type="text" id="email" size="30" maxlength="30"></td>
</tr>
<tr>
<td height="18" valign="middle"> Situs</td>
<td valign="middle">
<input name="situs" type="text" id="situs" value="http://" size="30"
maxlength="30"></td>
</tr>
<tr>
<td height="101" valign="top"> Pesan*</td>
<td valign="top"> <textarea name="pesan" cols="60" rows="7"
id="pesan"></textarea>
</td>
</tr>
<tr>
<td height="13" colspan="2" valign="top"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="18" valign="top"><!--DWLayoutEmptyCell--> </td>
<td valign="top"><input name="submit" type="submit" id="submit" value="Isi Buku tamu">
<input type="reset" name="Reset" value="Batal Isi">
<a href="lihat.php"><u><i>Lihat Bukutamu</u></i></a></td>
</tr>
<tr>
<td height="14"></td>
<td></td>
</tr>
</form>
</table>
</div>
</body>
</html>
5. Lalu save file di atas kedalam htdocs jiika sobat menggunakan xampp dan kedalam apps jika sobat menggunakani apache, dengan filenamenya “index.php” tanpa tanda petik.
Cara melihat nyaseperti biasa; Buka internet Explorer / Mozilla => ketik “localhost/folder tempat penyimpanan anda => index.php” tanpa tanda petik
6. Setelh itu kita membuat halaman untuk menampilkan hasil pengisian buku tamu ,kode di bawah ini
<?php
include "koneksi.php";
?>
<html>
<head>
<title>Lihat bukutamu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div align="center">
<table width="594" border="0" cellpadding="0" cellspacing="0">
<!--DWLayoutTable-->
<tr>
<td width="592" height="20" align="center" valign="middle" class="header">LIHAT
BUKUTAMU</td>
</tr>
<tr>
<td height="13" valign="top"><!--DWLayoutEmptyCell--> </td>
</tr>
<tr>
<td height="20" valign="top"> <a href="index.php">ISI BUKU TAMU</a></td>
</tr>
<tr>
<td height="110" valign="top"> <p>
<ol>
<?
$sql = mysql_query("SELECT * FROM bukutamu ORDER BY id DESC");
while($hasil = mysql_fetch_array($sql)) {
$nama = stripslashes($hasil['nama']);
$email = stripslashes($hasil['email']);
$situs = stripslashes($hasil['situs']);
$pesan = stripslashes($hasil['pesan']);
$time = $hasil['waktu'];
?>
<li> <strong><font color="#FF0000"><? echo $nama;?></font></strong>
- <strong>email</strong>:<a href="mailto:<? echo $email ?>"><? echo $email?>
</a>
- <strong>situs</strong>:<a href="<? echo $situs ?>" target="_blank"><? echo
$situs ?> </a>
- <? echo $time ?><br>
<? echo nl2br($pesan); ?> <br>
<br>
<? } ?>
</ol></p>
</td>
</tr>
<tr>
<td height="15" align="center" valign="middle">created by <a
href="http://webfti/achma">achma</a></td>
</tr>
<tr>
<td height="6"></td>
</tr>
</table>
</div>
</body>
</html>
7. Setelah itu kita membuat pewarna untuk sitiap font dan tabel yang ada ata disebut Cascade Style Sheet, Pemanis Buku Tamu script nya sebagai berikut:
a:link,a:visited,a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #000000;
text-decoration: none;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
text-decoration: underline;
}
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
}
table {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
border: 1px solid #8BB2D9;
}
.header {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #FFFFFF;
background-color: #8BB2D9;
font-weight: bold;
}
input {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
height: 18px;
border: 1px solid #8BB2D9;
}
textarea {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #FF0000;
border: 1px solid #8BB2D9;
}
8. Simpan file diatas dengan format style.css
Akhirnya selesai juga....
SELAMAT MENCOBA DAN TERIMAKASIH BANYAK ..
Jika sobat mengikuti langkah di atas benar Alhamdulillah berhasil.....
