Langkah-langkah membuat Buku Tamu Sederhana
1 Start kan apache dan mysql kalian
2. Buka browser yang ingin anda pakai,ketikkan di address bar localhost/phpmyadmin
lalu akan tampil seperti ini
3. untuk menghubungkan koneksi php ke phpmyadmin buat database terlebih dahulu dengan nama bukutamu lalu klik create
4.Buat Tabel di database yang telah kita buat,dengan mengisi tabel dengan nama user dan ketik di kolom fields nya angka 6 lalu go.
5.Setelah itu isi field sesuai dengan gambar di bawah ini
6. tabel database telah selesai di buat..
7.Selanjutnya buka notepad atau notepad++ kemudian buka system C ---> xampp --> htdocs, buat folder dengan nama bukutamu (sesuai dengan nama databasenya) dan buka folder bukutamu buat folder baru dengan nama image (untuk menyimpan foto).
8.Selanjutnya kita akan membuat koneksi ke database MYSQL. Berikut ini adalah script nya.
<?php
//host yang digunakan
//99,9% tidak perlu dirubah
$host = 'localhost';
//username untuk login ke host
//biasanya didapatkan pada email konfirmasi order hosting
$user = 'root';
//jika menggunakan PC sendiri sebagai host,
//secara default password dikosongkan
$pass = '';
//isikan nama database sesuai database
//yang dibuat pada langkah-1
$dbname = 'bukutamu';
//mengubung ke host
$connect = mysql_connect($host, $user, $pass) or die (mysql_error());
//memilih database yang akan digunakan
$dbselect = mysql_select_db($dbname);
?>
simpan di dalam folder bukutamu dengan nama confiq.php
9. Selanjutnya kita buat file index yang berisikan form input buku tamu dan view (tampilan) daftar buku tamu. File ini digunakan untuk inputan dari user. Berikut ini adalah script nya
<html>
<head>
<title>Buku Tamu</title>
<link type="text/css" rel="stylesheet" href="style.Css">
</head>
<body><div class="body"><font face="comic sans ms"><center>
<div id="clockDisplay" class="clockStyle"></div>
<script type="text/javascript" language="javascript">
function renderTime(){
var currentTime = new Date();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
if (h == 0){
h = 24;
}
if (h < 10){
h = "0" + h;
}
if (m < 10){
m = "0" + m;
}
if (s < 10){
s = "0" + s;
}
var myClock = document.getElementById('clockDisplay');
myClock.textContent = h + ":" + m + ":" + s + "";
setTimeout ('renderTime()',1000);
}
renderTime();
</script>
<div id ="header"><br>
<h1>Input Data Anda</h1><br>
<?php
if (!empty($_GET['message']) && $_GET['message'] == 'success') {
echo '<h3>Berhasil menambah data!</h3>';
}?>
<form name="input_data" action="insert.php" method="post"><center><br>
<table width="452" align="center" cellpadding="0" cellspacing="1" bgcolor="white">
<tr>
<td bgcolor="white"><table width="452" align="center" cellpadding="5" cellspacing="0">
<tr>
<td>Nama</td>
<td>:</td>
<td><input name="nama" type="text" required="required" value="<?php echo $data['nama'];?> "/></td>
</tr><tr>
<td>Email</td>
<td>:</td>
<td><input name="email" type="text" required="required" value="<?php echo $data['email'];?> "/></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><input name="alamat" type="text" required="required" value="<?php echo $data['alamat'];?> "/></td>
</tr>
<tr>
<td>Pesan</td>
<td>:</td>
<td><input name="pesan" type="text" required="required" value="<?php echo $data['pesan'];?> "/></td>
</tr>
<tr>
<td>Gambar</td>
<td>:</td>
<td><input type="file" name="gambar" id="gambar" required="required"></td>
</tr>
<tr>
<td colspan="3" align="center"><input name="fok" type="submit" id="fok" value="OK">
<input name="fulang" type="reset" id="fulang" value="Ulangi">
</tr>
</table></td>
</tr>
</table></center><br>
</form>
<div align="center"><a href="view.php">Lihat Data</a></div> </div>
</body>
</html>
simpan di dalam folder bukutamu dengan nama index.php (berwarna orange untuk menampilkan jam)
10.Selanjutnya kita buat file update sebagai action untuk memasukkan data ke dalam database MYSQL. Berikut script nya.
<?php
include('config.php');
//tangkap data dari form
$id = $_POST['user_id'];
$nama = $_POST['nama'];
$email= $_POST['email'];
$alamat = $_POST['alamat'];
$pesan = $_POST['pesan'];
$gambar = $_POST['gambar'];
//update data di database sesuai user_id
$query = mysql_query("update user set nama='$nama', email='$email', alamat='$alamat', pesan='$pesan', gambar='$_POST[gambar]' where user_id='$id'") or die(mysql_error());
if ($query) {
header('location:view.php?message=success');
}
simpan di dalam folder bukutamu dengan nama update.php
11. .Selanjutnya kita buat file insert untuk menghubung ke server Berikut script nya.
<?php
//panggil file config.php untuk menghubung ke server
include('config.php');
//tangkap data dari form
$id = $_POST['user_id'];
$nama = $_POST['nama'];
$email= $_POST['email'];
$alamat = $_POST['alamat'];
$pesan = $_POST['pesan'];
$gambar = $_POST['gambar'];
//simpan data ke database
$query = mysql_query("insert into user values('', '$nama', '$email','$alamat', '$pesan', '$_POST[gambar]')") or die(mysql_error());
if ($query) {
header('location:index.php?message=success');
}
simpan di dalam folder bukutamu dengan nama insert.php
12. Selanjutnya kita buat file view untuk menampilkan data Berikut script nya.
<?php include('config.php') ?>
<html>
<head>
<title>Buku Tamu</title>
<link type="text/css" rel="stylesheet" href="style.Css">
<div id="clockDisplay" color="white" class="clockStyle">
</div>
<script type="text/javascript" language="javascript">
function renderTime(){
var currentTime = new Date();
var h = currentTime.getHours();
var m = currentTime.getMinutes();
var s = currentTime.getSeconds();
if (h == 0){
h = 24;
}
if (h < 10){
h = "0" + h;
}
if (m < 10){
m = "0" + m;
}
if (s < 10){
s = "0" + s;
}
var myClock = document.getElementById('clockDisplay');
myClock.textContent = h + ":" + m + ":" + s + "";
setTimeout ('renderTime()',1000);
}
renderTime();
</script>
</head>
<body><div class="body"><font face="comic sans ms"><center>
<div id ="headerr"><br>
<h1>Data Anda</h1>
<?php
if (!empty($_GET['message']) && $_GET['message'] == 'success') {
echo '<h3>Berhasil meng-update data!</h3>';
}
?>
<a href="index.php">+ Tambah Data<br></a><a href="view.php">+ Lihat Data</a><p>
<center>
<table border="3" cellpadding="100" cellspacing="0" width="500" height="45" >
<thead> <center>
<tr>
<td><center>No.</td>
<td><center>Nama</td>
<td><center>Alamat Email</td>
<td><center>Alamat</td>
<td><center>Pesan</td>
<td><center>Gambar</td>
<td><center>Aksi</td>
</tr>
</thead>
<tbody>
<?php
$query = mysql_query("select * from user");
$no = 1;
while ($data = mysql_fetch_array($query)) {
?>
<tr>
<td><center><?php echo $no; ?></td>
<td><center><?php echo $data['nama']; ?></td>
<td><center><?php echo $data['email']; ?></td>
<td><center><?php echo $data['alamat']; ?></td>
<td><center><?php echo $data['pesan']; ?></td>
<td><center><img src="image/<?php echo $data['gambar']?>"width="150" height="100"></td>
<td><center> <a href="edit.php?id=<?php echo $data['user_id']; ?>">Edit</a>
<center><a href="delete.php?id=<?php echo $data['user_id']; ?>">Hapus</a>
</tr>
<?php
$no++;
}
?>
</tbody>
</table>
</body>
</html>
simpan di dalam folder bukutamu dengan nama view.php
13. Selanjutnya kita buat file delete untuk menghapus data yang ada di tabel Berikut script nya.
<?php
include('config.php');
$id = $_GET['id'];
$query = mysql_query("delete from user where user_id='$id'") or die(mysql_error());
if ($query) {
header('location:view.php?message=delete');
}
?>
simpan di dalam folder bukutamu dengan nama delete.php
14. selanjutnya kita buat file edit untuk mengubah data di tabel berikut script nya.
<?php
include('config.php');
?>
<html>
<head>
<title>Buku Tamu</title>
</head>
<body>
<h1><center>Input Data Anda</h1>
<?php
$id = $_GET['id'];
$query = mysql_query("select * from user where user_id='$id'") or die(mysql_error());
$data = mysql_fetch_array($query);
?>
<form name="update_data" action="update.php" method="post">
<input type="hidden" name="user_id" value="<?php echo $id; ?>" />
<table width="452" align="center" cellpadding="0" cellspacing="1" bgcolor="white">
<tbody>
<tr>
<td bgcolor="white"><table width="452" align="center" cellpadding="5" cellspacing="0">
<tr>
<td>Nama</td>
<td>:</td>
<td><input name="nama" type="text" required="required" value="<?php echo $data['nama'];?> "/></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input name="email" type="text" required="required" value="<?php echo $data['email'];?> "/></td>
</tr>
<tr>
<td>Alamat</td>
<td>:</td>
<td><input name="alamat" type="text" required="required" value="<?php echo $data['alamat'];?> "/></td>
</tr>
<tr>
<td>Pesan</td>
<td>:</td>
<td><input name="pesan" type="text" required="required" value="<?php echo $data['pesan'];?> "/></td>
</tr>
<tr>
<td>Gambar</td>
<td>:</td>
<td><input type="file" name="gambar" value="<img src="image/<?php echo $data['gambar']?>"></td>
</tr>
<tr>
<td align="right" ><input type="submit" name="submit" value="simpan"/></td>
</tr>
</tbody>
</table>
</form>
<a href="view.php">Lihat Data</a>
</body>
</html>
simpan di dalam folder bukutamu dengan nama edit.php
15. yang terakhir kita buat Style CSS nya untuk mempercantik tampilan, berikut script nya.
*{
margin:0;
padding:0;
}
body
{
font : 100.1% 'lucida sans', 'lucida sans unicode', 'lucida grande', 'trebuchet ms', helvetica,arial,sans-serif;
background-image:url(image/sesuaikan dengan nama gambarmu.png);
font-size:20px;
text-align:center;
margin:3;
color:black;
}
#wrapper
{
width:760px;
margin:auto;
border:1px solid #000033;
background-color:#gray;
}
#content
{
font-size:25px;
margin-bottom:0px;
height:585px;
float:left;
width:518px;
background-color:white;
display :inleni;
color:black;
}
#sidebar
{
margin : 0 0 0px 0px;
padding : 21px;
width :200px;
float : right;
display :inleni;
background-color:#000033;
color :#fff;
}
#sidebar a
{
color : #ccc;
}
#sidebar a:hover, #sidebar a:focus, #sidebar a:active
{
color :#eeccll;
}
#sidebar a:focus, #sidebar a:active
{
background-color :#003366;
}
#footer
{
clear : both;
padding : 10px;
text-align : center;
font-size : 0.9em;
width :700px;
background-color:#afeeee;
background-image :url(image/sesuaikan dengan nama gambarmu.jpg);
}
#footer p
{
color : #ddd;
margin :5px;
padding-top :10px;
}
#footer a
{
color : #ddd;
padding :0;
}
#footer a:hover, #footer a:focus, #footer a:active{
color :#eeccll;
}
#header
{
width :700px;
height :500px;
border-top :1px solid;
background-color:#afeeee;
background-image :url(image/sesuaikan dengan nama gambarmu.jpg);
}
#headerr
{
width :850px;
height :700px;
border-top :1px solid;
background-color:#afeeee;
background-image :url(image/sesuai dengan nama gambarmu.jpg);
}
a
{
color :#003366;
}
a:hover, a:focus, a:active
{
color :#000;
text-decoration :none;
}
a:focus, a:active
{
color :#fff;
background-color : #000033;
}
#header h1 a
{
display :block;
width :740px;
height :110px;
padding :10px;
color :#eeccll;
font-family :'trebuchet ms', helvetica,arial,sans-serif;
text-decoration :none;
}
#header h1 a:hover, #header h1 a:focus, #header h1 a:active{
color :#fff;
background :transparent;
}
#header h1 a:focus, #header h1 a:active{
text-decoration :underline;
}
ul#navmenu
{
margin :0;
padding :0;
list-style-type :none;
}
ul#navmenu li{
margin-bottom :5px;
}
ul#navmenu a{
display :block;
width :190px;
height :auto;
background-color : #003366;
padding :5px 5px 3px;
text-align :right;
text-decoration :none;
color : #eeccll;
cursor :pointer;
}
ul#navmenu a:hover, a:navmenu a:focus, ul#navmenu a:active, ul#navmenu a.selected, ul#navmenu a.selected:hover, ul#navmenu a.selected:focus, ul#navmenu a.selected:active
{
background-color :#386088;
color :#fff;
}
ul#navmenu a.selected
{
text-align :left;
cursor :default;
}
ul#navmenu a:hover, a:navmenu a:focus, ul#navmenu a:active
{
background-color :#333;
color :#fff;
}
h2, h3
{
color :#6b0018;
}
#sidebar bh3
{
color : #eeccll;
}
accordian {
width: 805px; height: 320px;
overflow: center;
align: center;
margin: 100px auto;
box-shadow: 0 0 25px 5px rgba(0, 0, 0, 0.35);
-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
.accordian ul {
width: 900px;
}
.accordian li {
position: relative;
display: block;
width: 70px;
float: left;
border-left: 1px solid #888;
box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.accordian ul:hover li {width: 210px;
.accordian ul li:hover {width: 210px;}
.accordian li img {
display: block;
}
.image_title {
background: rgba(0, 0, 0, 0.5);
position: absolute;
left: 0; bottom: 0;
width: 400px;
}
.image_title a {
display: block;
color: #fff;
text-decoration: none;
padding: 0px;
font-size: 16px;
}
.clockStyle{
background-color:#white;
border:#999 2px inset;
padding:6px;
color:#green;
font-family:"arial black";
font-size:30px
font-weight:bold;
letter-spacing:5px;
display:inline;
}
Simpan di dalam folder bukutamu dengan nama style.css
16. Dan yang paling terakhir,,buka NEW TAB ketikkan di alamat URL http://localhost/bukutamu/
maka hasilnya seperti ini..
hal. 1
hal. 2
