Membuat Buku Tamu (Guestbook) dengan PHP dan MySQL
Membuat Buku Tamu (Guestbook) dengan PHP dan MySQL. Pada tutorial kali ini saya akan mencoba membuat sebuah tutorial bagaimana cara Membuat Buku Tamu (Guestbook) dengan PHP dan MySQL. Pada website biasanya ada fasilitas yang namanya buku tamu atau guestbook dimana pengunjung bisa meninggalkan pesan mereka diwebsite tersebut. Tutorial membuat buku tamu ini akan dibuat dengan sesederhana mungkin agar bisa Anda pahami dengan baik.
Oke, langsung saja saya mulai…
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:
|
1 2 3 4 5 6 7 8 9 |
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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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="[email protected]" 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> <p><input type="submit" name="go" value="Kirim" /> <input type="reset" name="del" value="Hapus" /></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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<?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"); </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:
|
1 2 3 4 5 6 7 8 |
<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> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
<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"); </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="[email protected]" 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> <p><input type="submit" name="go" value="Kirim" /> <input type="reset" name="del" value="Hapus" /></p> </form> </div> </body> </html> |
Oke, silahkan dipraktekkan, dan selamat belajar. Jika ada masalah silahkan tinggalkan komentar.. 
template web-nya keren pak.. ringan, simple, kayaknya sih SEO juga..
makasih gan..
Keren mas …
mas mau tanya script ini fungsi nya apa ya ?
$nama = htmlentities(mysql_real_escape_string($_POST[‘nama’]));
satu lagi..
kalau bikin textarea kaya facebook gimana ya ?
jadi ukuran tinggi textarea nya menyesuaikan dari panjang text yang ada di dalemnya ..
tolong pencerahannya
script itu fungsinya untuk keamanan saja. htmlentities untuk mencegah inputan kode html. mysql_real_escape_string mencegah inputan mysql yg biasa untuk injeksi.
kalo textarea itu mungkin pakek jQuery.
oh, makasih mas
mantab gan,,, mksh artikelnya gan,,,
simple tp sistem’y bsa jln..
makasih om (y)
mas mau tanya, script iini if($_POST[‘go’]){ fungsinya untuk apa
kan ada tombol (input type=submit, name=go)
nah arti dari kode itu jika tombol sudah di klik maka baru bisa menjalankan kode bibawahnya
Kena kesalahan selalu pada line ini Notice: Undefined index: go in E:\xampp\htdocs\testku\form.php on line 20??Bisakah agan jelaskan?Karna ini sudah saya samakan sema identitasnya,dan data pun berhasil masuk,tetapi pemberian tanggal masih kacau. Mohon pencerahannya gan…
silahkan ganti web server anda ke appserv, karena saya membuatnya pakek itu. gak pakek xampp.
atau ganti $_POST menjadi @$_POST
pak gimana cara nya untuk membatasi penulisan email.itu harus valid dan kalok tidak valid itu tidak di terima gitu atau gagal untuk komentar .
sekian terima kasih
perhatikan kode lengkap pada line ke 31, terdapat kode
< -- kode ini digunakan untuk mengecek apakah email valid atau tidak, dan pada line ke 39 adalah pesan error jika email tidak valid. atau anda juga bisa menggunakan fitur terbaru dari html5 yaitu input type email -->
ok gan, mantap
pak saya kan lagi butuh buku tamu uda masuk sih ke data base cuman kok ada yang error kaya gini yah di website saya ,Notice: Undefined index: go in C:\xampp\htdocs\davine\bukutamu.php on line 11
tambahkan @ didepan variabel.
uda berhasil pak makasih banyak yah pak atas ilmunya …….
om mau Tanya kok keluar Gini Mulu ya Notice: Undefined index: go in D:\xampp\htdocs\FakturBeti\indexbt.php on line 20 Padahal udah sama dengan apa yang di contohkan, gimana yaa om
tambahkan @ didepan variabelnya. atau ganti webserver dengan appserv.
pak mau nanya, saya udah mengisi semua form buku tamunya, tapi kok harus mengulang lagi engga mau lanjut ya ..
mengulang gimana.? apa data sudah masuk ke database?
om makasih yaa pertanyanya sama yang diatas.
javascript:kaskusemoticonsclick(‘
’
om kok Query ke database gagal dilakukan kenapa ya
koneksi ke database udah bener blom>
om pesan yang sudah dikirm kok ga ditampilkan ya….?
muncul error gak, dan apa sudah dilihat di database sudah data sudah masuk apa blom?
mau nanya donk mas.
kan itu udh jalan buku tamunya
nah ketika kita isi buku tamu
data yang di isikan, di tampung dimana?
di database gan. bisa dilihat di phpMyAdmin
Caranya koneksinya gimana gan?
biar nggak keluar gini “Uppsss…! Query ke database gagal dilakukan!”
ubah kode ini:
Kalao misalkan pesannya di tampilkan di halaman itu juga bagaiamana ya ? jadi semacam komentar begitu ..
tinggal letakkan ada script untuk menampilkan data dari database buku tamu, bisa ditaruh di bawah nya..
gmna caranyha mas?
pngin buat kotak komentar.. kan ini langsung nyimpen k DB
bisa lihat ini gan -> http://tutorialweb.net/source-code-basic-blog-dengan-php-dan-mysql/
Bang, ane error ke database nih…
Warning: mysql_connect(): Access denied for user ‘root’@’localhost’ (using password: YES) in C:\xampp\htdocs\index.php on line 21
Uppsss…! Query ke database gagal dilakukan!
mysql_connect(“localhost”, “root”, “root”
; localhost itu user kan mas? root yg 1 & 2 itu apa ya? thanks before 
)
thanks udah solved gan
itu tandanya koneksi ke database belum tepat, silahkan dirubah dengan koneksi ke database agan sendiri
Syukron gan…
Maaf sebelumnya
gan, boleh minta fbnya agan. ane mau tanyak2…
Soalnya ini ane buat form login, masih bingung sama session nya.
lihat menu hubungi kami.
gan bagi hangout ID ada siapa tau ane nanya, karna tutorial ini mudah di gunain dan ane nyoba sendiri tapi belum begitu paham, so ane ada yang salah2, kalo ngga keberatan aja ya gan, thanks, nice tutorial
bisa add FB saya, lihat di menu Hubungi Kami
Gan Cara masukin buku tamu ini ke website berbasis word press gimana yaa..
bisa buat form lewat postingan artikel mode text (bukan visual)
trus file prosesnya diupload dihosting.
Di field tanggal yang muncul bukan tanggal mengisi malah muncul 1425886828. Gimana caranya supaya waktu mengisi buku tamu secara otomatis di database muncul tanggal pengisian buku tamu. Mohon bantuannya.
untuk tanggal di database tipe data INT, nanti untuk menampilkan bisa pakai fungsi date().
;
jika ingin merubah silahkan hanti tipe data menjadi DATE, dan sedikit merubah script pada kode lengkap baris ke 28 menjadi $tgl = date(“Y-m-d”
gan menampilkan isi dari database yang sudah diisi pengunjungnya gmna ?
Gmna cra membuat komentar dari geustbooknya dengan Simple Multiple Delete dengan PHP dan MySQL, yang ini untuk admin supaya bisa remove komentar buruk..
Mnta Source Codenya Kalau Bisa
bisa lihat ini:
-> http://tutorialweb.net/membuat-aplikasi-crud-sederhana-dengan-php-dan-mysql/
atau
-> http://tutorialweb.net/source-code-basic-blog-dengan-php-dan-mysql/
om gimana cara menghubung kan database yang sudah kita buat dari mysql ke program php nya?
untuk mengkoneksikan program web kita ke database bisa menggunakan cara ini:
om sewatu menigirim pesan dan masuk ke program php yang kedua muncul kyk gini?
Warning: mysql_connect() [function.mysql-connect]: [2002] A connection attempt failed because the connected party did not (trying to connect via tcp://localhost:3306) in C:\AppServ\www\masuk.php on line 3
Warning: mysql_connect() [function.mysql-connect]: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond. in C:\AppServ\www\masuk.php on line 3
Fatal error: Maximum execution time of 60 seconds exceeded in C:\AppServ\www\masuk.php on line 4
itu gimana om cara mengatasinya?
mau tanya, ada yang error.
Notice: Undefined index: go in C:\xampp\htdocs\guestbook\guestbook.php on line 20
tampilan buku tamu udah tampil tapi ada yang error, pada baris 20 ‘Undefined index ‘go’,
<?php
if($_POST['go']){
…………..
mana yang perlu dibenerin? saya tunggu balasannya. makasih.
saya pakek web server appserv, kalau pakek xampp muncul error gitu
solusi mudah tambahkan @ di depan $_POST
makasih gan, sangat membantu
mysql_connect(): Access denied for user ‘root’@’localhost’ (using password: YES) in C:\xampp\htdocs\PI\index2.php on line 21
Uppsss…! Query ke database gagal dilakukan! , Giman ini pak cara benerinnya
rubah detail koneksi kedatabase nya.
Keren tutorial@.
itu code heightligter pakek apa ya.soal@ bgus gan?
crayon
Kak kan aq udah nulis nama email website pesan terus aq klik kirim abis itu muncul notifikasi selamat data anda berhasil disimpan terus aq klik ok malah muncul object not found itu maksudnya apaa kak??
link nya tidak valid
gan mau tanya nih saya kalo data tamunya itu mau muncul di view yang saya buat itu gimana
ya di tampilkan ada pakai query select
Thankyou gan, membantu sekali
Kalau bikin Buku Tamu di blogspot gomana bos….?
Ilmu yang amat bermanfaat.