Buku tamu atau Guestbook (bahasa kerennya) ini berguna bagi pengunjung web anda agar bisa meninggalkan jejaknya yang berupa komentar yang bisa berisi saran, kritikan atau pujian tentang web anda, hal ini penting anda pasang agar ada interaksi anda anda sebagai pemilik website dengan si pengunjung web anda.


Baca juga: Peluang Pekerjaan di Bidang Web

Kali ini saya akan menerangkan cara untuk membuat buku tamu sederhana dengan menggunakan HTML, CSS, PHP, dan MySQLi.

Sedikit informasi yang perlu anda ketahui MySQLi (MySQL Improved Extension) ini merupakan pengembangan dari MySQL yang sudah berstatus usang, karena MySQL hanya berlaku untuk penggunaan PHP versi 5 kebawah. Sedangkan PHP sekarang ini sudah mencapai versi 7.0.6.

Berikut tutorialnya

Pertama yang harus anda siapkan adalah:

  1. Xampp (penting)
  2. Notepad ++ (rekomendasi di instal)
silakan diklik link diatas untuk mendownload aplikasi tersebut dari website resminya yang akan perlu untuk melakukan tutorial ini. Silakan didownload dan instal aplikasinya.

Selanjutnya

  1. Buka Xampp Control Panel, Aktifkan Modul Apache dan MySQL
    Lalu tekan tombol start pada modul apache dan mysql.

    Perlu diketahui fungsinya xampp adalah sebagai server yang berdiri sendiri (localhost), dengan mengaktifkan apache maka kita bisa menggunakan bahasa pemrogaman php, dan mengaktifkan mysql maka kita bisa membuat database.

  2. Membuat Database
    Database inilah yang berfungsi sebagai tempat menyimpan data yang di inputkan pengunjung (user yang mengisi buku tamu anda).

    Anda bisa membuatnya dengan cara membuka localhost/phpmyadmin pada web browser anda, atau di xampp contral panel tadi anda klik tombol admin pada tombol mysql.

    Selanjutnya membuat database, klik new yang ada pada pojok kiri atas layar komputer anda (dibawah logo phpMyAdmin)

    Lalu buat database baru dengan nama bukutamu dan klik create.

    Lalu langkah selanjutnya membuat tabel database dengan nama dataku lalu isi number of columns menjadi 5. Lalu klik Go.

    Lalu isi tabel databasenya seperti gambar dibawah ini, dan save.
    Klik untuk memperbesar.
    Selesai.
  3. Membuat Halaman Buku Tamunya
    Perlu anda ketahui untuk menggunakan xampp maka anda menyimpan setiap kode simpanan notepad anda di C:\xampp\htdocs anda boleh langsung menaruhnya di luar, ataupun membuat folder baru. Tapi saya sarankan membuat folder baru, jadi jika anda banyak menggunakan xampp maka file-file tidak akan tertukar, terlihat rapi dan mudah dalam pencarian file.

    Buat folder proweb di C:\xampp\htdocs lalu....
    Buka notepad++ anda, lalu buat file baru copykan kode dibawah ini


    <?php
    $host="localhost";
    $user_db="root";
    $pass_db="";
    $db="bukutamu";
    $koneksi=mysqli_connect ($host,$user_db,$pass_db) or die (mysqli_error());
    mysqli_select_db ($koneksi,$db) or die (mysqli_error());
    ?>
    simpan dengan nama koneksi.php file ini yang berguna menghubungkan php dengan database yang baru saja anda buat tadinya.

    Buat file baru lagi di notepad++, copy kode dibawah ini


    <?php
    include("koneksi.php");
    $nama=$_POST['nama'];
    $email=$_POST['email'];
    $website = $_POST['website'];
    $pesan = $_POST['pesan'];
    $tanggal = $_POST['tanggal'];
    $sql="insert into dataku(nama,email,website,pesan,tanggal) values ('$nama','$email','$website','$pesan','$tanggal')";
    mysqli_query($koneksi,$sql) or die (mysqli_error());
    header('location:buku-tamu.php');
    ?>
    lalu simpan dengan nama simpan.php file ini yang berguna memproses data yang dimasukan dari user (pengunjung).

    Buat file baru lagi di notepad++, copy kode dibawah ini


    <html>
    <head>
    <title>Buku Tamu Sederhana - Masarif.id</title>
    <style>
    body{font-family:'Arial';font-size:18px;margin:0}
    .kecil{font-size:10px}
    a{color:#3498db}
    a:hover{color:#2980b9}
    input[type=text]{margin:5px auto 15px;padding:10px;color:#444;width:300px}
    fieldset{border:1px solid #ccc;width:50%;margin-left:auto;margin-right:auto;margin-top:10px;}
    input[type=submit]{color:#FFF;padding:0 20px;margin:10px 0 5px;cursor:pointer;background-color:#333;border:0;height:30px}
    .tanggal{float:right;font-size:12px}
    input[type=submit]:hover{background-color:#444}
    input[type=submit]:active{position:relative;top:2px}
    </style>
    </head>
    <body>
    <fieldset>
    <legend>Buku Tamu</legend>
    <form action="simpan.php" method="post">
    <p>Nama Lengkap &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;:
    <input placeholder="Nama lengkap anda" type="text" name="nama" required/>
    </p>
    <p>Email (opsional) &nbsp;&nbsp;&nbsp;&nbsp;:
    <input placeholder="arifrachmanhakim3@gmail.com" type="text" name="email"/>
    </p>
    <p>Website (opsional) :
    <input type="text" placeholder="http://www.masarif.id" name="website"/>
    </p>
    <p>Pesan:
    <textarea placeholder="Ketikan suatu pesan anda" cols="90" rows="10" name="pesan" required></textarea>
    </p>
    <textarea name="tanggal" style="display:none"><?php echo date("h:i:s d/m/Y ");?></textarea>
    <p>
    <input type="submit" value="Simpan"/>
    </p>
    </form>
    <?php
    include("koneksi.php");
    $query=mysqli_query($koneksi,'select * from dataku');
    while($data=mysqli_fetch_array($query))
    {
    $nama = $data['nama'];
    $email= $data['email'];
    $website = $data['website'];
    $pesan = $data['pesan'];
    $tanggal = $data['tanggal'];
    echo "
    <b>$nama</b> said  <div class='tanggal'>$tanggal</div><br/>
    <i class='ganti'>'$pesan'</i> <br/>
    <a class='kecil' id='emoticon' href='$website' target='_blank' rel='nofollow' title='Website'>[WEB]</a> | <a class='kecil' title='Kirim Email' href='mailto:$email'>[EMAIL]</a> <br/><br/>
    ";}
    ?>
    </fieldset>
    </body>
    </html>
    lalu simpan dengan nama buku-tamu.php file ini yang akan tampil pada user, memberikan inputan data dari user untuk diproses, dikoneksikan, dan disimpan didatabase, serta ditampilkan kembali.

    Ketiga file diatas disimpan satu folder pada folder yang baru anda buat sebelumnya dengan nama proweb.

  4. Mencoba Buku Tamu
    Caranya dengan mengetikan http://localhost/PROWEB/buku-tamu.php pada browser anda, lalu silakan di enter.

    Silakan dicoba sendiri.
Itu dia tutorial untuk membuat buku tamu sederhana, semoga bisa bermanfaat. Bila anda yang masih belum berhasil, menemukan error-error bisa ditanyakan pada kolom komentar dibawah ini.

Semoga bermanfaat.