Membuat Buku Tamu Keren dengan PHP Mysql



Buku tamu PHP MYSQl zlearn

Membuat Bukutamu Keren dengan PHP dan MYSQL. Baik pada kesempatan ini saya akan berbagi tutorial bagaimana caranya membuat fasilitas buku tamu atau sering dinamakan Gustbook. Buku tamu dalam sebuah web atau situs bergunan sebagai saran dan feedback untuk suatu situs tersebut oleh karena itu tampilan buku tamu yang keren dan responsive merupakan suatu nilai plus bagi suatu we maupun sebuah situ.

Baik langsung saja masuk ke tutorial oke... seperti biasa bagi yang ingin mendownload source kode  buku tamu keren php mysql dapat langsung mendownloadnya di akhir tutorial ini.

Baik karena kita akan menggunakan databse dalam penyimpanannya maka terlebih dah=hulu anda buat sebua database dengan nama buku  di phpmyadmin anda  kemudian buat sebuah tabel dengan nama wisata berikut strukturnya silahkan ditiru:

buku tamu php mysql zlearn



  • Yang ertama yang harus dilakukan yaitu buat file dengan nama koneksi.php  file ini berfungsi sebagi penghubung ke server

<?php
$db="buku";
$server="localhost";
$user="root";
$sandi="";
$koneksi=mysql_connect($server,$user,$sandi);
mysql_select_db($db,$koneksi);

?>

  • kemudia jika anda sudah membuat buku tamu maka buat sebuah fike dengan nama index.php kemudian simpan.

<!DOCTYPE html>
<html>
<head>
<title>Buku Tamu Keren</title>
<style type="text/css">

body {
    background-image: url("gambar/walp.jpg");
}

h2.wisata{
text-align: center;
color: black;
}
form {
    background: #fff;
    border-radius: 6px;
    padding: 20px;
    padding-top: 30px;
    width: 70%;
    margin: 70px auto;
    box-shadow: 15px 15px 0px rgba(0,0,0,.1);
    margin-top:-5px;
}

input[type=text], select {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}

input[type=submit] {
    width: 100%;
    background-color: #4CAF50;
    color: white;
    padding: 14px 20px;
    margin: 8px 0;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

input[type=submit]:hover {
    background-color: #45a049;
}



textarea {
    width: 100%;
    height: 150px;
    padding: 12px 20px;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    background-color: #f8f8f8;
    resize: none;
}

</style>
</head>
<body>

<form action="buku_proses.php" method="POST">
<a href="lihat_tamu" title="Homepage"><center><img src="gambar/home.png" width="50px"></center></a>
<h2 class="wisata">Wisata Banjarnegara</h2>
<label>Nama Lengkap</label>
<input type="text" name="nama" placeholder="Nama Lengkap" required><br>
<label>E-mail</label>
<input type="text" name="email" placeholder="E-mail" required><br>
<label>Waktu</label>
<input type="text" name="waktu" value="<?php date_default_timezone_set("America/New_York"); echo date('Y-m-d H:i:sa') ?>"> 
<label>Nomor Telepon</label>
<input type="text" name="cp" placeholder="Nomor Telepon" required><br>
<label>Pesan Anda</label>
<textarea cols="5" name="pesan" rows="5" placeholder="Pesan Untuk Kami" required></textarea><br>
<input type="submit" name="submit" value="Kirim">
</form>
</div>

</body>
</html>

  • Kemdian buat filde dengan nama buku_proses.php dimana file ini berfungsi untuk  memproses data dan menyimpannya ke dalam database.
<script type="text/javascript">
   alert("Pesan Berhasil disimpan");
</script>
<?php
include('koneksi.php');





$nama = $_POST['nama'];
$email = $_POST['email'];
$cp =$_POST['cp'];
$waktu=$_POST['waktu'];
$pesan = $_POST['pesan'];

$q_insert="INSERT INTO wisata SET nama='$nama', email='$email', cp='$cp', pesan='$pesan', waktu='$waktu'";
mysql_query($q_insert); 






header('location:lihat_tamu.php');

?>

  • Kemudian buat fiel dengan nama lihat_tamu.php

<!DOCTYPE html>
<html>
<head>
<title>WisaTaMu</title>

<style type="text/css">
.wrap{



  border-radius: 5px;
  background-color: #f2f2f2;
    padding: 40px;
}

.pagination  li a{
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    background: #1ba2bf;;
    float: left;
}
.detail  {
    background-color: #4CAF50;;
    color: white;
    padding: 10px 20px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    border-radius: 5px;
}


.detail{
    background-color:#4CAF50;
}

</style>

<?php




//koneksi database
mysql_connect("localhost", "root", "");
mysql_select_db("buku");//fungsi pagination
$BatasAwal = 4;
if (!empty($_GET['page'])) {
$hal = $_GET['page'] - 1;
$MulaiAwal = $BatasAwal * $hal;
} else if (!empty($_GET['page']) and $_GET['page'] == 1) {
$MulaiAwal = 0;
} else if (empty($_GET['page'])) {
$MulaiAwal = 0;
}//tampil data
$query = mysql_query("SELECT * FROM wisata ORDER BY nama LIMIT $MulaiAwal , $BatasAwal ");
while ($record = mysql_fetch_array($query)) {
?>


<?php




echo '

<table>
<div class="wrap">



<b><img src="gambar/user.png" width="30px"> ' . $record['nama'] . '</b>  <br> 

<img src="gambar/pesan.png" width="30px"> Berpesan: ' . $record['pesan'] . '<br>';

?>
        <a class="detail" href="tamu_detail?no_wisata=<?php echo $record['no_wisata']; ?>" class="btn btn-danger">Detail</a>

</div><br>




<?php



?>





<?php
}

//navigasi
echo '';
$cekQuery = mysql_query("SELECT * FROM wisata");
$jumlahData = mysql_num_rows($cekQuery);
if ($jumlahData > $BatasAwal) {
echo '<ul style="background-color:#DEB218; border-radius:8px;" type="1" class="pagination" ><li class="pager"> ';
$a = explode(".", $jumlahData / $BatasAwal);
$b = $a[0];
$c = $b + 1;
for ($i = 1; $i <= $c; $i++) {
echo '<a style="text-decoration:none;';
if ($_GET['page'] == $i) {
echo '
    z-index: 3;
    color: #fff;
    cursor: default;
    background-color: #5cb85c;
    border-color: #337ab7;
';
}
echo '" href="?page=' . $i . '">' . $i . '</a> ';
}
echo '</li><ul></table>';
}

include('kaki.php');

?>

  • Setelah itu buat lagi sebuah file yang berfungsi untuk menampilkan detail dari pesan buku tamu  beri nama file tersebut tamu_detail.php


<style type="text/css">
.wrap {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 40px;
    margin-top: 10px;
}
.komeng{
border-radius: 50%;
}
</style>

<?php

include('koneksi.php');



$no=$_GET['no_wisata'];
$sql_baca="SELECT * FROM wisata WHERE no_wisata='$no'";
$data_baca=mysql_query($sql_baca);
$data_tampil=mysql_fetch_array($data_baca);

  $baca_nama= $data_tampil['nama'];
  $baca_email= $data_tampil['email'];
  $baca_cp= $data_tampil['cp'];
  $baca_waktu=$data_tampil['waktu'];
  $baca_komentar= $data_tampil['pesan'];

  $baca_no_wisata= $data_tampil['no_wisata'];
?>
<div class="wrap">
<p align="right"><a title="Edit Pesan" href="update?update_pesan=<?php echo $baca_no_wisata; ?>" "><img src="gambar/edit.png" width="30px"></a>  

 <a title="Hapus Pesan" <a href='hapus?hapus_pesan= <?php echo $baca_no_wisata;?>'><img src="gambar/hapus.png" width="30px"></a> </p>

<?php
echo'<img src="gambar/user.png" width="30px">Nama Pengirim :';
  echo $baca_nama;
  echo'<br><br>';
echo'<img src="gambar/waktu.png" width="30px">Waktu Pengirimiman :';
  echo $baca_waktu;
  echo'<br><br>';
echo'<img src="gambar/email.png" width="30px"> E-mail Pengirim :';
  echo $baca_email;

  echo'<br><br>';
echo'<img src="gambar/cp.png" width="30px">Kontak Pengirim :';
  echo $baca_cp;

  echo'<br><br>';
echo'<img src="gambar/pesan.png" width="30px">Pesan Pengirin :';
  echo $baca_komentar;

  echo'<br>';
 echo '</div>';
include('kaki.php');


?>

baik etelah itu tinggal kita run diatas adalah contoh buku tamu yang hanya menggunakan css untuk memeprcantiknya.



dan bagi yang ingin mendownload full source kode diaman tampilanny sudah saya buat seperti sitis yang responsive dan menambahkan gambar dan header anda dapt mendowloannya di tautan berikut

dengan password zlearn.id



Share this

Related Posts

Previous
Next Post »

Berita Unik

loading...