a

Tuesday 28 February 2012

Membuat Buku Tamu dengan PHP (bagian 1)

Pembahasan kita kali ini membahas mengenai aplikasi-aplikasi web dengan PHP. Kita mulai pembahasan kita dengan buku tamu.
Buku tamu merupakan salah satu fitur standar yang terdapat dalam situs-situs di Internet, terutama situs - situs pribadi. Hampir dapat dipastikan, aplikasi buku tamu akan menggunakan database yang fungsinya adalah menyimpan daftar tamu yang pernah mengunjungi situs tersebut dan memberikan komentarnya. Untuk itu mula-mula kita persiapkan sebuah database dengan struktur sebagai berikut:
Field Tipe
nama VARCHAR(50)
email VARCHAR(40)
komentar TEXT
waktu TIMESTAMP
Tabel disimpan dengan nama tbl_tamu, sedangkan databasenya disimpan dengan nama data_kontak. Halaman web yang nantinya di rancang akan memiliki 3 halaman, yaitu halaman form buku tamu, halaman daftar tamu, dan halaman terima kasih.
Halaman form buku tamu akan berisi form untuk pengisian buku tamu. Halaman daftar tamu akan berisi daftar tamu yang telah mengisi buku tamu. Halaman terima kasih akan berisi ucapan terima kasih atas diisinya buku tamu.
Kita mulai perancangan kita dari halaman form buku tamu. Halaman form buku tamu berisi form untuk pengisian buku tamu. Pada halaman ini nanti akan ditambahkan suatu skrip yang akan melakukan verifikasi terhadap form yang belum diisi. Skrip selengkapnya adalah sebagai berikut:
<HTML>
<HEAD>
<TITLE> Form Buku Tamu </TITLE>
<SCRIPT LANGUAGE="JavaScript">
function pesan() {
var ceknama = document.forms[0].elements[0].value;
var cekemail = document.forms[0].elements[1].value;
var cekkom = document.forms[0].elements[2].value;
if (ceknama.length == 0) {
window.alert("Anda belum memasukkan nama Anda");
} else {
if ((cekemail.length == 0) || (cekemail.indexOf("@",1) == -1)) {
window.alert("Periksa kembali alamat email Anda");
} else {
if ((cekkom.length == 0)) {
window.alert("Anda belum berkomentar");
} else {
document.forms[0].simpan();
}
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<h1> Selamat Datang di Situs Saya </h1>
Silakan isi identitas Data Diri Anda <br />
<form name="guest_from" method="post" action="proses.php">
<PRE>
Nama Anda : <input type="text" name="nama">
Email Anda : <input type="text" name="email">
Komentar    :
<textarea name="komentar" style=”width:200px; height:150px;”></textarea>
<input type="button" value="Simpan" onClick=pesan()>
</PRE>
</FORM>
</BODY>
</HTML>
Simpanlah file dengan nama buku_tamu.html.
Yang perlu diingat adalah bahwa walaupun memiliki ekstensi .html, halaman ini harus tetap dijalankan di virtual direktori dengan mengetikkan http://localhost/direktori/namafile.html di bagian address browser.
Pembahasan dari skrip di atas adalah sebagai berikut: pada bagian head terdapat skrip JavaScript, skrip ini digunakan untuk verifikasi terhadap form yang belum diisi.
<SCRIPT LANGUAGE="JavaScript">
function pesan() {

var ceknama = document.forms[0].elements[0].value;
var cekemail = document.forms[0].elements[1].value;
var cekkom = document.forms[0].elements[2].value;
if (ceknama.length == 0) {
window.alert("Anda belum memasukkan nama Anda");
} else {
if ((cekemail.length == 0) || (cekemail.indexOf("@",1) == -1)) {
window.alert("Periksa kembali alamat email Anda");
} else {
if ((cekkom.length == 0)) {
window.alert("Anda belum berkomentar");
} else {
document.forms[0].simpan();
}
}
}
}
</SCRIPT>
Mula-mula skrip tersebut mengambil nilai dari setiap elemen form. Setelah itu nilai setiap elemen tersebut diperiksa, jika kosong, maka akan muncul peringatan. Bagian berikutnya merupakan form HTML biasa, tetapi pada bagian submit akan ditambahkan sebuah event handler yang mengacu pada skrip JavaScript yang terletak di bagian head.
<input type="button" value="Simpan" onClick=pesan()>
Halaman berikutnya adalah halaman terima kasih. Halaman terima kasih merupakan halaman yang akan menampilkan ucapan terima kasih sekaligus di dalamnya terdapat skrip PHP yang digunakan untuk mengolah data yang dimasukkan pada halaman form buku tamu. Skrip selengkapnya adalah sebagai berikut:
<HTML>
<HEAD>
<TITLE> Buku Tamu </TITLE>
</HEAD>
<BODY>
<?php
$waktu=date(“Y-mm-dd H:s:i”)
$host = "localhost";
$user = "root";
$passwd = "root";
$conn = @mysql_connect ($host, $user, $passwd)
         or die ("Koneksi Gagal, karena " . mysql_error());
mysql_select_db("data_kontak",$conn);
$strSQL = "INSERT INTO tbl_tamu(nama,email,komentar,waktu)
    VALUES ('$_POST[nama]','$_POST[email]','$_POST[komentar]', '”.$waktu.”')";
$qry = @mysql_query($strSQL,$conn)
    or die ("Query salah, karena: " . mysql_error());
?>
<h2> Terima kasih atas kesediaan Anda mengisi buku tamu. </h2>
<HR>
<A href="/lihat_tamu.php? "> Klik di sini </A> untuk melihat daftar para pengisi buku tamu.
</BODY>
</HTML>
Simpanlah file dengan nama proses.php.
Skrip di atas pada prinsipnya hanyalah membuka koneksi ke mysql dan menyimpan data-data yang telah dimasukkan ke dalam tabel. Pada bagian bawah terletak sebuah link yang merujuk pada halaman daftar tamu. Mengenai link ini belum akan dibahas di halaman ini.
Nah, setidaknya walau belum jadi, aplikasi ini sudah bisa dijalankan. Mula-mula jalankan file buku_tamu.html, kemudian isikan identitas dan komentar Anda, lalu klik Simpan. Seandainya ada bagian yang belum Anda isi, browser akan memberikan peringatan.
Untuk sementara jika Anda ingin melihat daftar dari para pengunjung, Anda dapat melihatnya dari MySQL langsung sebagai berikut:
mysql> use data_kontak;
mysql> select * from tbl_tamu;

Dengan query ini, MySQL akan menampilkan seluruh daftar tamu yang telah memberikan identitas dan komentarnya, Selamat mencoba ;D.
Post di

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)