-->
  • Jelajahi

    Copyright © Ismed Share
    Ismed Share, Blog Berbagi Ilmu Apa adanya

    Iklan

    Menu Bawah

    MEMBUAT BUKU TAMU SENDIRI DI WEBSITE

    Rabu, 25 April 2012, 11:48 WIB Last Updated 2021-04-25T12:26:54Z
     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.
    Perintahnya untuk membuat table sebagai berikut:
    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-->&nbsp;</td>
    </tr>
    <tr>
    <td width="101" height="18" valign="middle">&nbsp;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">&nbsp;Email</td>
    <td valign="middle">
    <input name="email" type="text" id="email" size="30" maxlength="30"></td>
    </tr>
    <tr>
    <td height="18" valign="middle">&nbsp;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">&nbsp;Pesan*</td>
    <td valign="top"> &nbsp; <textarea name="pesan" cols="60" rows="7"
    id="pesan"></textarea>
    </td>
    </tr>
    <tr>
    <td height="13" colspan="2" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    </tr>
    <tr>
    <td height="18"  valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td valign="top"><input name="submit" type="submit" id="submit" value="Isi Buku tamu">
    <input type="reset" name="Reset" value="Batal Isi">
    &nbsp;<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-->&nbsp;</td>
    </tr>
    <tr>
    <td height="20" valign="top">&nbsp;<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.....
    Komentar

    Tampilkan

    Tidak ada komentar:

    Terkini

    Android

    +