Kegiatan 28 Januari 2016

Tutorial Membuat Buku Tamu PHP Atau SQL

Seperti biasanya, karena data dari buku tamu ini nantinya akan disimpan di database MySQL, maka buat dulu sebuah database. Dalam hal ini saya membuat database dengan nama tutorial, kemudian silahkan Dumping kode SQL dibawah ini:

CREATE TABLE `bukutamu` (
 `id` int(11) NOT NULL auto_increment,
 `tanggal` int(11) NOT NULL,
 `nama` varchar(50) NOT NULL,
 `email` varchar(50) NOT NULL,
 `website` varchar(100) NOT NULL,
 `pesan` text NOT NULL,
 PRIMARY KEY  (`id`)
);

CREATE TABLE `bukutamu` (

`id` int(11) NOT NULL auto_increment,

`tanggal` int(11) NOT NULL,

`nama` varchar(50) NOT NULL,

`email` varchar(50) NOT NULL,

`website` varchar(100) NOT NULL,

`pesan` text NOT NULL,

PRIMARY KEY (`id`)

);

Selanjutnya buka teks editor Anda dan buat file baru, kemudian ketikkan kode di bawah ini:

<html>
</head>
 <title>Buku Tamu by TUTORIALWEB.NET</title>
</head>
<body>

 <div id="container">
  <h1>
Buku Tamu</h1>
<p>
Silahkan isi buku tamu di bawah ini untuk meninggalkan pesan Anda!</p>
<form action="" method="post">
   <p>
<b>Nama Lengkap :</b><br><input type="text" name="nama" placeholder="Fatoni Arif" required /></p>
<p>
<b>Email :</b><br><input type="text" name="email" placeholder="fatoni@tutorialweb.net" required /></p>
<p>
<b>Website :</b><br><input type="text" name="website" placeholder="http://www.tutorialweb.net" /></p>
<p>
<b>Pesan :</b><br><textarea name="pesan" rows="5" cols="50" placeholder="Hy, saya sangat senang bisa berkunjung" required>

<html>

</head>

<title>Buku Tamu by TUTORIALWEB.NET</title>

</head>

<body>

<p>Silahkan isi buku tamu di bawah ini untuk meninggalkan pesan Anda!</p>

<p><b>Nama Lengkap :</b><br><input type="text" name="nama" placeholder="Fatoni Arif" required /></p>

<p><b>Email :</b><br><input type="text" name="email" placeholder="fatoni@tutorialweb.net" required /></p>

<p><b>Website :</b><br><input type="text" name="website" placeholder="http://www.tutorialweb.net" /></p>

<p><b>Pesan :</b><br><textarea name="pesan" rows="5" cols="50" placeholder="Hy, saya sangat senang bisa berkunjung" required></textarea></p>

</form>

</div>

</body>

</html>

Simpan dengan nama index.php.
Kode HTML di atas digunakan untuk membuat sebuah form dengan beberapa inputan seperti inputan nama, email, website, dan pesan. Hasil dari kode HTML di atas jika dibuka di browser hasilnya seperti gambar di bawah ini:

Selanjutnya kita akan membuat kode PHP yang digunakan untuk memproses data yang sudah dimasukkan kedalam database, dan berikut ini kodenya:

<?php
if($_POST['go']){
 mysql_connect("localhost", "root", "root");
 mysql_select_db("tutorial");

 $nama = htmlentities(mysql_real_escape_string($_POST['nama']));
 $email = htmlentities(mysql_real_escape_string($_POST['email']));
 $web = htmlentities(mysql_real_escape_string($_POST['website']));
 $pesan = htmlentities(mysql_real_escape_string($_POST['pesan']));
 $tgl = time();

 if($nama && $email && $pesan){
  if(filter_var($email, FILTER_VALIDATE_EMAIL)){
   $in = mysql_query("INSERT INTO bukutamu VALUES(NULL, '$tgl', '$nama', '$email', '$web', '$pesan')");
   if($in){
    echo '<script language="javascript">alert("Terima kasih, data Anda berhasil disimpan"); document.location="index.php";</script>';
   }else{
    echo '<div id="error">
Uppsss...! Query ke database gagal dilakukan!</div>
';
   }
  }else{
   echo '<div id="error">
Uppsss...! Email Anda tidak valid!</div>
';
  }
 }else{
  echo '<div id="error">
Uppsss...! Lengkapi form!</div>
';
 }
}
?>

<?php

if($_POST['go']){

mysql_connect("localhost", "root", "root");

mysql_select_db("tutorial");

$nama = htmlentities(mysql_real_escape_string($_POST['nama']));

$email = htmlentities(mysql_real_escape_string($_POST['email']));

$web = htmlentities(mysql_real_escape_string($_POST['website']));

$pesan = htmlentities(mysql_real_escape_string($_POST['pesan']));

$tgl = time();

if($nama && $email && $pesan){

if(filter_var($email, FILTER_VALIDATE_EMAIL)){

$in = mysql_query("INSERT INTO bukutamu VALUES(NULL, '$tgl', '$nama', '$email', '$web', '$pesan')");

if($in){

echo '<script language="javascript">alert("Terima kasih, data Anda berhasil disimpan"); document.location="index.php";</script>';

}else{

echo '<div id="error">Uppsss...! Query ke database gagal dilakukan!</div>';

}

}else{

echo '<div id="error">Uppsss...! Email Anda tidak valid!</div>';

}

}else{

echo '<div id="error">Uppsss...! Lengkapi form!</div>';

}

Pada kasus ini Kode PHP di atas saya letakkan pada baris/line ke 10 (tepat di atas tag pembuka form).
Jangan lupa untuk merubah koneksi ke databasenya ya…
Nah, dari sini buku tamu sudah bisa digunakan dengan baik. Untuk sedikit mempercantik tampilan saya masukkan sedikit kode CSS seperti di bawah ini:

<style type="text/css">
 body { font-family:tahoma; font-size:12px; }
 #container { width:450px; padding:20px 40px; margin:50px auto; border:0px solid #555; box-shadow:0px 0px 2px #555; }
 input[type="text"] { width:200px; }
 input[type="text"], textarea { padding:5px; margin:2px 0px; border: 1px solid #777; }
 input[type="submit"], input[type="reset"] { padding: 5px 20px; margin:2px 0px; font-weight:bold; cursor:pointer; }
 #error { border:1px solid red; background:#ffc0c0; padding:5px; }
</style>

body { font-family:tahoma; font-size:12px; }

#container { width:450px; padding:20px 40px; margin:50px auto; border:0px solid #555; box-shadow:0px 0px 2px #555; }

input[type="text"] { width:200px; }

input[type="text"], textarea { padding:5px; margin:2px 0px; border: 1px solid #777; }

input[type="submit"], input[type="reset"] { padding: 5px 20px; margin:2px 0px; font-weight:bold; cursor:pointer; }

#error { border:1px solid red; background:#ffc0c0; padding:5px; }

</style>

Letakkan kode CSS di dalam tag head atau di bawah tag title.
Dan hasil akhirnya bisa dilihat seperti gambar di bawah ini:

Jika anda masih bingung tentang peletakan kode di atas, berikut ini adalah isi file lengkap bukutamu.

<html>
</head>
 <title>Buku Tamu by TUTORIALWEB.NET</title>
 <style type="text/css">
  body { font-family:tahoma; font-size:12px; }
  #container { width:450px; padding:20px 40px; margin:50px auto; border:0px solid #555; box-shadow:0px 0px 2px #555; }
  input[type="text"] { width:200px; }
  input[type="text"], textarea { padding:5px; margin:2px 0px; border: 1px solid #777; }
  input[type="submit"], input[type="reset"] { padding: 5px 20px; margin:2px 0px; font-weight:bold; cursor:pointer; }
  #error { border:1px solid red; background:#ffc0c0; padding:5px; }
 </style>
</head>
<body>

 <div id="container">
  <h1>
Buku Tamu</h1>
<p>
Silahkan isi buku tamu di bawah ini untuk meninggalkan pesan Anda!</p>
<?php
  if($_POST['go']){
   mysql_connect("localhost", "root", "root");
   mysql_select_db("tutorial");

   $nama = htmlentities(mysql_real_escape_string($_POST['nama']));
   $email = htmlentities(mysql_real_escape_string($_POST['email']));
   $web = htmlentities(mysql_real_escape_string($_POST['website']));
   $pesan = htmlentities(mysql_real_escape_string($_POST['pesan']));
   $tgl = time();

   if($nama && $email && $pesan){
    if(filter_var($email, FILTER_VALIDATE_EMAIL)){
     $in = mysql_query("INSERT INTO bukutamu VALUES(NULL, '$tgl', '$nama', '$email', '$web', '$pesan')");
     if($in){
      echo '<script language="javascript">alert("Terima kasih, data Anda berhasil disimpan"); document.location="index.php";</script>';
     }else{
      echo '<div id="error">
Uppsss...! Query ke database gagal dilakukan!</div>
';
     }
    }else{
     echo '<div id="error">
Uppsss...! Email Anda tidak valid!</div>
';
    }
   }else{
    echo '<div id="error">
Uppsss...! Lengkapi form!</div>
';
   }
  }
  ?>

  <form action="" method="post">
   <p>
<b>Nama Lengkap :</b><br><input type="text" name="nama" placeholder="Fatoni Arif" required /></p>
<p>
<b>Email :</b><br><input type="text" name="email" placeholder="fatoni@tutorialweb.net" required /></p>
<p>
<b>Website :</b><br><input type="text" name="website" placeholder="http://www.tutorialweb.net" /></p>
<p>
<b>Pesan :</b><br><textarea name="pesan" rows="5" cols="50" placeholder="Hy, saya sangat senang bisa berkunjung" required>

<html>

</head>

<title>Buku Tamu by TUTORIALWEB.NET</title>

body { font-family:tahoma; font-size:12px; }

#container { width:450px; padding:20px 40px; margin:50px auto; border:0px solid #555; box-shadow:0px 0px 2px #555; }

input[type="text"] { width:200px; }

input[type="text"], textarea { padding:5px; margin:2px 0px; border: 1px solid #777; }

input[type="submit"], input[type="reset"] { padding: 5px 20px; margin:2px 0px; font-weight:bold; cursor:pointer; }

#error { border:1px solid red; background:#ffc0c0; padding:5px; }

</style>

</head>

<body>

<p>Silahkan isi buku tamu di bawah ini untuk meninggalkan pesan Anda!</p>

<?php

if($_POST['go']){

mysql_connect("localhost", "root", "root");

mysql_select_db("tutorial");

$nama = htmlentities(mysql_real_escape_string($_POST['nama']));

$email = htmlentities(mysql_real_escape_string($_POST['email']));

$web = htmlentities(mysql_real_escape_string($_POST['website']));

Kegiatan 28 Januari 2016

0 Response to "Kegiatan 28 Januari 2016"

Posting Komentar

Invision

Kegiatan 28 Januari 2016

Related Posts :

0 Response to "Kegiatan 28 Januari 2016"

Posting Komentar