Beberapa saat yang lalu, aku ditanya temanku tentang apakah gerangan ajax itu. Sebuah pertanyaan yang menurutku merupakan bentuk ujian tentang pengertianku sejauh mana dengan Teknologi yang katanya masih berhubungan dengan informasi ini. Tentu sebagai anak yang masih bau ingus dan bau kencur kujawab bahwasanya ajax adalah klub sepakbola tersohor di belanda tentunya. Dan walhasil, sang penanya-pun senyum saja dan mengatakan ‘kamu perlu banyak belajar ternyata’.

Setelah agak lama bersemedi dan belajar dan berdoa, alhamdulillah akhirnya website yang walaupun belum dionlinekan sudah mengandung ajax. Ajax kok dikandung, anu mas artinya web kita ada aplikasi yang menggunakan methode ajax ini, wah susah juga neranginnya. Pas pertama baca tutorialnya ternyata methode ajax ini, punya kelemahan sukar diindeks oleh search engine, makanya yang akan coba kita buat di sini adalah aplikasi yang tidak membutuhkan diindeks oleh search engine, oke mari kita mulai, tutorial jadul ini yakni membuat bukutamu sederhana yang memerlukan sedikit kemampuan php, javascript dan juga xml.

berikan santunan untuk penampung data

buat tabel bukutamu di databes yang anda buat, caranya terlalu sangat amat dan sungguh terlalu mudah, bahkan saya saja bisa. Buka phpmyadmin anda, biasanya sih dengan alamat http://localhost/phpmyadmin, nah di situ ada tulisan buat database kalau gak salah atau create database, nah di situ anda masukkan nama kesayangan anda, misalnya apa ya? mmmm ‘lubangpembuangan’ misalnya. Setelah itu masukkan tulisan gak jelas di bawah ini, setelah anda klik tombol sql. Maka akan tersedia ruangan lebar tempat masukan text, seduah itu masukkan saja script di bawah ini

CREATE TABLE `tamuberbuku` (
`id` int(11) NOT NULL auto_increment,
`nama` varchar(50) NOT NULL,
`email` varchar(50) NOT NULL,
`website` varchar(100) NOT NULL,
`alamat` varchar(100) NOT NULL,
`isi` text NOT NULL,
`ip` varchar(50) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=64 ;

Maka akan anda lihat akan terbentuk sebuah tabel dengan nama ‘tamuberbuku’.
Cihuiiii…one progress. Sekarang tinggalkan itu, biarkan dia tetap pada tempatnya dahulu, sekarang buat interface nya , weits bahasanya itu lho.

buat javascriptnya, kirimin.js

var http_request = false;
function makePOSTRequest(url, parameters) {
http_request = false;
if (window.XMLHttpRequest) { // Mozilla, Safari,…
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
// set type accordingly to anticipated content type
//http_request.overrideMimeType(‘text/xml’);
http_request.overrideMimeType(‘text/html’);
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject(“Msxml2.XMLHTTP”);
} catch (e) {
try {
http_request = new ActiveXObject(“Microsoft.XMLHTTP”);
} catch (e) {}
}
}
if (!http_request) {
alert(‘Cannot create XMLHTTP instance’);
return false;
}

http_request.onreadystatechange = alertContents;
http_request.open(‘POST’, url, true);
http_request.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
http_request.setRequestHeader(“Content-length”, parameters.length);
http_request.setRequestHeader(“Connection”, “close”);
http_request.send(parameters);
}

function alertContents() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
//alert(http_request.responseText);
result = http_request.responseText;
document.getElementById(‘informasi’).innerHTML = result;
} else {
alert(‘There was a problem with the request.’);
}
}
if (http_request.readyState == 3) {
document.getElementById(‘informasi’).innerHTML = “loading…”;
}

}

function get(obj) {
var poststr =”idnama=” + encodeURI( document.getElementById(“idnama”).value ) +
“&idemail=” + encodeURI( document.getElementById(“idemail”).value ) +
“&idasal=” + encodeURI( document.getElementById(“idasal”).value ) +
“&idhomepage=” + encodeURI( document.getElementById(“idhomepage”).value ) +
“&idkomentar=” + encodeURI( document.getElementById(“idkomentar”).value );
makePOSTRequest(‘masukkan.php’, poststr);
}

namakan saja dengan nama kirimin.js

file tamuberbuku.php

yo yo yo, sekarang masukkan script di bawah ini pada editor kesayangan anda, kalau saya tetap gedit idola-nya.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<head>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<title>Sok Tahu Tentang Ajax :~ </title>
<script type=”text/javascript” src=”kirimin.js”></script>
</head>
<body>
<div id=”halamantengah”>
<form action=”javascript:get(document.getElementById(‘myform’));” name=”myform” id=”myform” class=”porm”>
Nama<br/>
<input type=”text” name=”nama” size=”35″ id=”idnama” /><br/>
email<br/>
<input type=”text” name=”email” size=”35″ id=”idemail” /><br/>
Asal<br/>
<input type=”text” name=”asal” size=”35″ id=”idasal”/><br/>
Homepage<br/>
<input type=”text” name=”homepage” size=”35″ value=”http://” id=”idhomepage”/><br/>
Komentar<br/>
<textarea name=”komentar” rows=”5″ cols=”45″ class=”inputx” id=”idkomentar” /></textarea>
<br>
<input type=”button” name=”button” value=”Submit”
onclick=”javascript:get(this.parentNode);” />
</form>
<span id=”informasi”></span>
</div>

<?php

$host=”localhost”;

$user=”root”;

$pass=”";

$db=”lubangpembuangan”;

$con=@mysql_connect(“$host”,”$user”,”$pass”) or die(“databasenya gak mudengan”);

//dikasih keong keong (@) biar pesen defaultnya gak keluar

@mysql_select_db($db,$con) or die(“cannot connect database”);

$query=@mysql_query(“select * from tamuberbuku order by id desc”);
while($result=mysql_fetch_array($query)){
$nama=$result['nama'];
$email=$result['email'];
$website=$result['website'];
$alamat=$result['alamat'];
$isi=$result['isi'];

echo “nama : $nama<br/>email : $email<br/>website : $website<br/>”;

echo “alamat : $alamat <br/>$isi<p></p><hr/>”;

}

?>

</body>

fyuhhh, hapus dulu keringatnya…gara-gara tadi temenku pesen taksi nggak ngomong-ngomong musti ikut nimbrung juga aku, musti berhenti beberapa saat dulu.

file masukkan.php

<?php

if(!$_POST){
echo “file ini tidak boleh diakses langsung”;
exit();
}

//konekkan lagiii

$host=”localhost”;

$user=”root”;

$pass=”";

$db=”lubangpembuangan”;

$con=@mysql_connect(“$host”,”$user”,”$pass”) or die(“databasenya gak mudengan”);

//dikasih keong keong (@) biar pesen defaultnya gak keluar

@mysql_select_db($db,$con) or die(“kagak bisa dab”);

foreach($_POST as $key => $value){
$i=$i+1;
$variabel[$i]=$value;
}

//variabel didapatkan dari array yang disimpan di variabel $_POST
$nama=$variabel['1'];
$email=$variabel['2'];
$asal=$variabel['3'];
$homepage=$variabel['4'];
$komentar=$variabel['5'];
//bersihkan dari para pemberontak

$nama=htmlspecialchars($nama);
$email=htmlspecialchars($email);
$homepage=htmlspecialchars($homepage);
$asal=htmlspecialchars($asal);
$komentar=htmlspecialchars($komentar);

$nama=wordwrap($nama,20,”\n”,1);

$email=wordwrap($email,40,”\n”,1);

$homepage=wordwrap($homepage,40,”\n”,1);
$asal=wordwrap($asal,20,”\n”,1);
$komentar=wordwrap($komentar,20,”\n”,1);

if(!$nama or !$email or !$asal or !$homepage or !$komentar){
echo “semua field wajib untuk diisi”;
return false;
}

if ($email != “”) {
if (!eregi( “^[_\.0-9a-z-]+@([0-9a-z][0-9a-z-]+\.)+[a-z]{2,3}$”, $email)) {
echo “format email yang anda masukkan tidak valid silahkan ulangi”;
return false;
}
}

$ip=getenv(‘REMOTE_ADDR’);
$query=@mysql_query(“insert into tamuberbuku(nama,email,website,alamat,isi,ip) value(‘$nama’,'$email’,'$homepage’,'$asal’,'$komentar’,'$ip’)”);

if($query){
echo “berhasil memasukkan data”;
//looks like very crowded

//menunjukkan pemasukkan terbaru gitu
$queryx=@mysql_query(“select * from tamuberbuku order by id desc limit 0,1″);
while($resultx=mysql_fetch_array($queryx)){
$nama=$resultx['nama'];
$email=$resultx['email'];
$website=$resultx['website'];
$alamat=$resultx['alamat'];
$isi=$resultx['isi'];

$nama=$resultx['nama'];
$email=$resultx['email'];
$website=$resultx['website'];
$alamat=$resultx['alamat'];
$isi=$resultx['isi'];

echo “nama : $nama<br/>email : $email<br/>website : $website<br/>”;

echo “alamat : $alamat <br/>$isi<p></p><hr/>”;
}
}else{
echo “gagal memasukkan data”;
}
?>

okeh…semoga bisa…
silahkan akses web anda

nb: anda merasa script ini tidak jalan, hal yang biasa terjadi karena masalah ‘ sama ” nya jadi silahkan lebih diperhatikan