Untuk kalian yang belum tau apa itu ajax, silakan bukan halaman wikipedia tentang AJAX.
Saya anjurkan anda telah menginstall webserver pada komputer anda, untuk webserver yang gunakan adalah paket XAMPP.
untuk membuat sebuah buku tamu, kita memerlukan database untuk menyimpan pesan, untuk itu kita buat dulu sebuah database dengan nama : ‘belajar’ (tanpa tanda petik).
CREATE DATABASE `belajar`;
setelah itu buat sebuah table di dalam database belajar dengan nama ‘bukutamu’, dengan format kolom seperti berikut :
CREATE TABLE `bukutamu` (
`id` INTEGER(11) NOT NULL AUTO_INCREMENT,
`nama` VARCHAR(255) DEFAULT NULL,
`email` VARCHAR(255) DEFAULT NULL,
`pesan` TEXT,
`tanggal` DATETIME DEFAULT NULL,
PRIMARY KEY (`id`)
)
pada tahap ini, kita telah selesai membuat database + table, untuk selanjutnya kita akan membuat file sebagai berikut :
- ajax.js
- index.htm
- config.php
- input.php
- view.php
Ok, kita langsung ke tahap pembuatan file ajax.js, ketikan kode di dalam editor anda seperti berikut, dan simpan dengan nama ajax.js :
function request(){
var ajaxRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
return ajaxRequest;
}
function save()
{
var nama;
var email;
var pesan;
var params;
nama = document.getElementById("nama").value;
email = document.getElementById("email").value;
pesan = document.getElementById("pesan").value;
params = "nama="+nama+"&email="+email+"&pesan="+pesan;
if(nama.length<1 || pesan.length<1)
{
alert('Nama & Pesan tidak boleh kosong');
}else{
ajaxSave = new request();
ajaxSave.open("POST", "input.php", true);
ajaxSave.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajaxSave.setRequestHeader("Content-length", params.length);
ajaxSave.setRequestHeader("Connection", "close");
ajaxSave.onreadystatechange = function(){
if(ajaxSave.readyState == 4){
document.getElementById("input").innerHTML=ajaxSave.responseText;
show();
}
}
ajaxSave.send(params);
}
}
function show(){
ajaxShow = new request();
ajaxShow.open("GET", "view.php", true);
ajaxShow.onreadystatechange = function(){
if(ajaxShow.readyState == 4){
document.getElementById("view").innerHTML=ajaxShow.responseText;
}
}
ajaxShow.send(null);
}
function form(){
ajaxForm = new request();
ajaxForm.open("GET", "input.php", true);
ajaxForm.onreadystatechange = function(){
if(ajaxForm.readyState == 4){
document.getElementById("input").innerHTML=ajaxForm.responseText;
}
}
ajaxForm.send(null);
}setelah itu buat file index.html dengan script seperti berikut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Buku Tamu Dengan PHP + AJAX + MySQL</title>
<script type="text/javascript" src="ajax.js"> </script>
<script type="text/javascript"> show(); form(); </script>
</head>
<body>
<div id="input"></div>
<div id="view"></div>
</body>
</html>
file config.php :
$dbhost = "localhost";
$dbuser = "root";
$dbpass = "mypassword";
$dbname = "belajar";
$connect = mysql_connect($dhhost, $dbuser, $dbpass)or die(mysql_error());
if($connect)
{
mysql_select_db($dbname);
}
?>
file input.php :
include "config.php";
$nama = $_POST["nama"];
$pesan = $_POST["pesan"];
$email = $_POST["email"];
if($_POST["nama"] && $_POST["pesan"])
{
$query = mysql_query("INSERT INTO bukutamu VALUES(null, '$nama', '$email', '$pesan', NOW(''))");
if($query)
{
echo "Pesan Anda telah terkirim! terima kasih telah berpartisipasi!";
}else{
echo "Pesan Anda Gagal terkirim!";
}
}
?>
<h2>Input Buku Tamu </h2>
<form id="bukutamu" name="bukutamu" method="post" action="">
<table width="500" border="0" cellspacing="2" cellpadding="2">
<tr>
<td width="62">Nama</td>
<td width="8">:</td>
<td width="410"><input type="text" name="nama" id="nama" /></td>
</tr>
<tr>
<td>Email</td>
<td>:</td>
<td><input type="text" name="email" id="email" /></td>
</tr>
<tr>
<td>Pesan</td>
<td>:</td>
<td><textarea name="pesan" id="pesan" cols="45" rows="5"></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><input type="button" name="button" id="button" value="Kirim" onclick="save();" /></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
</form>
file view.php :
<h2>Tampil Buku Tamu </h2>
include "config.php";
$query = mysql_query("SELECT * FROM bukutamu ORDER BY id DESC");
while($array = mysql_fetch_array($query))
{
$nama = $array[nama];
$email = $array[email];
$pesan = $array[pesan];
$tanggal = $array[tanggal];
$id = $array[id];
echo "$nama
";
if(!empty($email))
{
echo "$email
";
}
echo "\"color:#333\">$tanggal
";
echo "$pesan
";
echo "
";
}
?>
Ok, sampai di sini sudah selesai bukutamu ajax kita, silakan mencobanya dengan mengakses http://localhost/belajar/ pada web browser anda, jika ada pertanyaan silakan comment atau kirim ke email saya.
Download : BukuAjax.rar
![[image005.png]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgBgXPBbbjWmhcp72bc6DEX1xJGqLf9FY1YIkN3uMTi_I9jc3irKuyhIqeXKWyJ2A17NFJdYYhD1hxVb8mYo-FsQEEj97v_rvYNUlKIBz3ErL32XCW8QgwBum1u7SUfUjXlqkBvjfHsHbw/s1600/image005.png)
![[image003.png]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaUV8WNTEiPrjB6JxY2Zu_B2z2CFNR_gWHqDS03xmH_RTrgQ66TeWPf1QskW37jcFvkue_39dLXcWGvQUZ3fJ3RmfUFLSJMYWa1yf4JUN9lbqwXr6O1iR2B8Yw5XIoDfDlcx_sChMuKA4/s1600/image003.png)
