Form Buku Tamu

Persiapan

Yang harus disiapkan yaitu :
1) XAMPP
2) Notepad++ atau edit plus (kalau saya menggunakan notepad++)

Tahapan
1) Aktifkan dulu aplikasi xampp di desktop,dan kemudian apache,mysql dan filezilla tercentang semua dan dalam keadaan running.


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 isi nama database,lalu klik create


4) Setelah itu,database telah berhasil dibuat,biasanya ditandai dengan peringatan kolom check list berwarna hijau


5)  Buat Tabel di database yang telah kita buat,dengan mengisi nama tabel. karena tabel inilah yang akan menerima pesan dari buku tamu yang telah kita buat ke web server(database) dan number of fieldnya,biasanya ada 4 jadi   ketik di kolom tersebut angka 4,klik Go

 

6) Setelah itu isi field sesuai dengan number of field yang telah ditentukan kali ini yang saya buat yaitu id,nama,email dan pesan,
     kemudian pilih type :
     untuk id disarankan untuk memilih int,karena int merupakan type untuk angka dan jangan lupa untuk mencentang auto_increment ,agar daftar pesan yang   dikirim angka dapat berurutan    seperti absen nama dan email disarankan untuk memilih varchar,karena varchar merupakan tipe untuk huruf pesan disarankan untuk memilih text,tapi boleh juga memilih varchar
     kemudian klik save
 

7) Tabel di database telah berhasil dibuat

 
  
dan berikut php code yang telah dibuat
    CREATE TABLE `trisna`.`trisna_tb` (
      `id` INT(5) NOT NULL AUTO_INCREMENT,
      `nama` VARCHAR(50) NOT NULL,
      `email` VARCHAR(50) NOT NULL,
      `pesan` VARCHAR(500) NOT NULL,
       PRIMARY KEY (`id`)
       ) ENGINE = MyISAM;

Dan Langkah Berikutnya,buka notepad kalian

1) Form Buku Tamu  simpan denga nama formku.php

<link rel="stylesheet" type="text/css" href="style.css"/>

<h1 style="text-align:center">Buku Tamu</h1>
<body>
<center>
<form id="form1" name="form1" method="post" action="simpan.php">
<table width="413" height="128" border="0">
<tr>
<td width="100">Nama</td>
<td width="50">:</td>
<td width="100">
<input name="nama" type="text" id="nama" size="36" /></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td>
<input name="email" type="text" id="email" size="36" />
</td>
</tr>
<tr>
<td>Pesan</td>
<td>:</td>
<td><label>
<textarea name="pesan" id="pesan"></textarea>
</label></td>
</tr>
<tr>
<td height="21" colspan="2"><label>
<div align="center">
<input name="Reset" type="reset" id="reset" value="Reset" />
</div>
</td>
<td height="21">
<input type="submit" name="Submit" value="Submit" />
</td>
</tr>
</table>
</form>
</body>
</center>



terdapat link eksternal di dalam formku.php
simpan dengan nama style.css
(ini merupakan hasil kreasi dari saya sendiri)

<style>
h1 {
 font-family:impact;
 font-size:40px;
 color: #fff;
 font-weight:bolder;
 text-shadow: 0px 5px 50px #fff;
 }
td {
 font-family:cursive;
 font-size:30px;
 color:#fff;
 }
body {
 background:#00adef;
 }
form {
 background:blue;
 width:380px;
 border:20px ridge #fff;
 margin-top:50px;
 }
input {
 background:#000;
 font-family:impact;
 color: #fff;
 margin-right:-360px;
}

textarea {
 background: #000;
 font-family:impact;
 color:#fff;
 height:100px;
 width:200px;
 margin-left:2px;
 resize:none;
}
</style>

2) membuat koneksi ke database simpan dengan nama koneksidb.php

<?php
$host='localhost';
$user='root';
$pass='';
$db='trisna';
$ok=mysql_connect($host,$user,$pass) or die ('gagal konek'.mysql_error());
mysql_select_db ($db,$ok);
?>

keterangan :
-kode inilah yang akan memanggil koneksi dari php ke server(database)
-jika pada saat anda membuat database menggunakan password,masukkan password di $pass
-$db merupakan nama database anda di phpmyadmin

3) Pemberitahuan simpan dengan nama simpan.php

<?php
include "koneksidb.php";
$nama= $_POST["nama"];
$email= $_POST["email"];
$pesan= $_POST["pesan"];
$input ="insert into trisna_tb(nama,email,pesan)values('$nama','$email','$pesan')";
$query = mysql_query($input);
if (query)
{
echo "<div><pre>Nama:$nama</pre>";
echo "<pre>Email:$email</pre>";
echo "<pre> Pesan:$pesan</pre><br>";
echo "data di atas telah disimpan<br>";
echo "<a href= 'formku.php'>back</a>";
}
else
{echo "gagal tersimpan";
echo "<a href='tampil.php'>lihat data</a></div>";
}
?>

4) Menampilkan isi buku tamu di server simpan dengan nama tampil.php

<form id="form1" name="form1" method="post" action="">
Semua data Tamu yang Masuk : <br><br>
<table width="452" border="2">
<tr align="center">
<td width="26">ID</td>
<td width="129">Nama</td>
<td width="100">Email</td>
<td width="179">Komentar</td>
</tr>
<?php
include "koneksidb.php";

$sqltampil="SELECT * FROM tb_tamu";
$qrytampil=mysql_query($sqltampil);
while ($row=mysql_fetch_array($qrytampil))
{
$ID++;
?>
<tr>
<td><?php echo $ID;?></td>
<td><?php echo $row['nama'];?></td>
<td><?php echo $row['email'];?></td>
<td><?php echo $row['Komentar'];?></td>
</tr>
<?php } ?>
</table>

</form>

Setelah itu masukkan file tersebut ke dalam XAMPP di local disk C dan ke htdocs,kemudian simpan file anda di situ atau untuk mempermudah file
buku tamu tersebut dijadikan 1 folder lalu folder tersebut simpan ke htdocs,disini saya beri nama folder dengan nama bukutamu


kita buka localhost/nama folder (localhost/bukutamu)


setelah itu buka file formku.html

  

keren bukan tampilan buku tamunya ? karena fungsi css adalah untuk membuat struktur dokumen menjadi lebih indah dan memukau

untuk percobaan,silahkan masukkan nama,email dan pesan
setelah sudah klik submit

 

proses pengiriman akan berhasil,bila terdapat konfirmasi seperti ini

 

dan terakhir,masuk kembali ke localhost/phpmyadmin
kemudian klik database kita,setelah itu klik tabel dalam database kita

 

maka id,nama,email dan pesan yang telah kita ketik telah tampil.




0 komentar:

Posting Komentar