Ajax suggest,.Ajax dapat di gunakan untuk membangun aplikasi yang unteraktif. Contoh penerapanya berupa suggestion (Ajax suggestion).
pada pembahasan kali ini saya tidak menggunakan database, hanya array pada script PHP saja. bila anda ingin mengkoneksikan ke database, tinggal modif saja,.
dalam membuat Ajax suggest kali ini terdapat 3 file: Satu halaman HTML sederhana (untuk form), satu file Javasript, dan PHP (untuk Array).
lansung saja ke pokok permasalahan (Ajax suggest).
buat halaman HTML sederhana dan beri nama index.php
<html>
<head>
<script src="clienthint.js"></script>
</head>
<body>
<form>
First Name: <input type="text" onKeyUp="showHint(this.value)" />
</form>
<p>Suggestions: <span id="txtHint"></span></p>
</body>
</html>
script di atas adalah script HTML sederhana dengan inputan text. dan sebuah event onKeyUp, event onKeyUp akan bekerja saat ada masukan di masukan text,.
selanjutnya buat halaman Javascriptnya. dan simpan dengan nama clienthit.js
var xmlhttp
function showHint(str)
{
if (str.length==0)
{
document.getElementById("txtHint").innerHTML="";
return;
}
xmlhttp=GetXmlHttpObject();
if (xmlhttp==null)
{
alert ("Your browser does not support XMLHTTP!");
return;
}
var url="gethint.php";
url=url+"?q="+str;
url=url+"&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
function stateChanged()
{
if (xmlhttp.readyState==4)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
function GetXmlHttpObject()
{
if (window.XMLHttpRequest)
{
// code for IE7+, Firefox, Chrome, Opera, Safari
return new XMLHttpRequest();
}
if (window.ActiveXObject)
{
// code for IE6, IE5
return new ActiveXObject("Microsoft.XMLHTTP");
}
return null;
}
pada script javascript di atas adalah tempat fungsi javasript showHint yang di deklarasikan onKeyUp yang ada di halaman index.html, dan halaman ini juga yang menyimpan Ajax enginnya,.
script javascript diatas juga yang menjembatani antara index.html dan gethint.php, pada saat ada masukan di form maka akan merequest ke gethint.php dan hasil atau responya akan di kirim kembali ke index.html.
<?php
// Fill up array with names
$a[]="Anna";
$a[]="Bagus";
$a[]="Catment";
$a[]="ctr";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gugus";
$a[]="Heni";
$a[]="Ine";
$a[]="Johan";
$a[]="Karina";
$a[]="Linda";
$a[]="Nina";
$a[]="Prety";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sulis";
$a[]="Toni";
$a[]="Unni";
$a[]="Violet";
$a[]="Lisa";
$a[]="Emma";
$a[]="Ellen";
$a[]="Winda";
$a[]="Vicky";
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
pada script php di atas adalah nama-nama yang di cari, dan bila nama yang di cari tidak ada maka akan muncul no suggestion,.
note: bila anda ingin membuat web yang interaktif Ajax adalah pilihan yang tepat, tapi selain itu Ajax juga mempunyai kelemahan. karena ajax berbasis javascript apabila di browser javascript tidak di aktifkan/disable maka ajax tidak bekerja,.
Ajax comment,.
pada dasarnya Ajax comment hampir sama dengan chat Ajax yang pernah saya buat,.
bedanya klo chat ajax ada sript auto refresh/auto reload, sedang Ajax comment ini tidak menggunakan auto refresh,.
kenapa comment menggunakan ajax?? seperti yang kita tahu salah satu kelebihan Ajax adalah memproses tanpa harus mereload seluruh halaman,. dan dengan Ajax halaman web juga menjadi lebih menarik,.
lansung saja kita ke pokok bahasan kali ini yaitu Ajax comment,.
langkah-langkah untuk membuat Ajax comment ini adalah buat database comnent beserta tabel-tabelnya untuk menyimpan komentar-komentar dari halaman web Ajax comment,.
untuk lebih memudahkan anda bisa men-copy script di bawah ini atau bisa juga impor dari file .sql yang sudah tersedia,.
CREATE DATABASE comment;
CREATE TABLE comment (
nama varchar(25) NOT NULL,
comment varchar(150) NOT NULL,
date varchar(25) NOT NULL
);
selanjutnya kita buat index.php. file ini yang menyimpan script Ajax engine,.
<html>
<head>
<title>Ajax comment</title>
<script language="javascript">
function createRequestObject() {
var ro;
//Firfox, Opera, Safari, Chrome
if(window.XMLHttpRequest)
{
ro=new XMLHttpRequest();
}
//IE
else if(windows.ActiveXObject)
{
ro=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("browser suport ajax");
return false;
}
return ro;
}
var xmlhttp = createRequestObject();
function kirim()
{
var post = "name="+document.CommentForm.name.value;
post = post+"&comment="+document.CommentForm.comment.value;
alert(document.CommentForm.name.value);
alert(document.CommentForm.comment.value);
xmlhttp.open("post", "inputComment.php?data="+Math.random(), true);
xmlhttp.onreadystatechange = function() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
document.getElementById("proses").innerHTML= xmlhttp.responseText;
}
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(post);
}
function warning()
{
alert("data kosong");
}
</script>
<style type="text/css">
body {margin-left: 10px;margin-top: 10px;margin-right: 10px;margin-bottom: 0px;padding:0px;font-family:Arial, Helvetica, sans-serif;font-size:12px;}
p{width: 300px;clear: left;margin: 0;padding: 5px 0 8px 0; padding-left: 50px;}
.Comment {border-bottom:1px solid #3686b8;}
#CommentList {width:350px;}
.totalComment {margin-top:10px;}
.cssform p{width: 300px;clear: left;margin: 0;padding: 5px 0 8px 0; padding-left: 50px;}
.cssform label{font-weight: bold;float: left; margin-left: -50px; width: 80px;}
.cssform input[type="text"]{width: 220px; border:1px solid #3686b8;}
.cssform textarea{width: 220px;height: 120px; border:1px solid #3686b8;}
.cssform input[type="submit"]{margin-left: 30px;}
.SenderName {font:bold 14px arial; padding: 3px;}
.CommentDate {padding: 3px; color:#FF0000;}
.CommentContent {padding: 3px;}
</style>
</head>
<body>
<?php
include"config.php";
$query=mysql_query("SELECT * FROM comment ORDER BY date");
while($row=mysql_fetch_array($query))
{
echo"<p><span class='SenderName'>$row[nama]</span><span class='CommentDate'>$row[date]</span></p><p><span class='CommentContent'>$row[comment]</span></p><hr /><br />";
}
?>
<div id="proses"></div>
<form name="CommentForm" id="CommentForm" class="cssform">
<p><label for="name">Name:</label> <input type="text" name="name" /></p>
<p><label for="YourComment">Comment:</label> <textarea name="comment"></textarea></p>
<p align="center"><input type="button" value="Kirim" onClick="kirim()" /></p>
</form>
</body>
</html>
di bawah ini adalah Script Ajax engine-nya
function createRequestObject() {
var ro;
//Firfox, Opera, Safari, Chrome
if(window.XMLHttpRequest)
{
ro=new XMLHttpRequest();
}
//IE
else if(windows.ActiveXObject)
{
ro=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("browser suport ajax");
return false;
}
return ro;
}
var xmlhttp = createRequestObject();
function kirim()
{
var post = "name="+document.CommentForm.name.value;
post = post+"&comment="+document.CommentForm.comment.value;
xmlhttp.open("post", "inputComment.php?data="+Math.random(), true);
xmlhttp.onreadystatechange = function() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
document.getElementById("proses").innerHTML= xmlhttp.responseText;
}
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(post);
}
pada script ajax diatas adalah script ajax engine yang berfungsi untuk request ke file inputComment.php dan hasil proses inputComnet.php di masukan ke <div id="proses"></div> dengan perintah document.getElementById("proses").innerHTML= xmlhttp.responseText;
sekarang kita buat script php-nya untuk mengkoneksikan dengan database dan beri nama file dengan nama config.php,. isi script config.php dengan data sesuai dengan milik anda,.
sekarang membuat script php untuk yang memproses inputan dari Ajax comment, inputComment.php
script php di atas sudah sangat familiar buat kita sehingga tidak perluh saya jelaskan lagi,. intinya script php di atas asalah memasukan inputan dari Ajax comment ke database sql
script Ajax comment diatas masih sangat sederhana, untuk lebih bagusnya silahkan anda kembangkan sendiri script-script tersebut,.
View Demo@http://www.catment.co.cc/demo/ajax_comment/
saat'y posting,... :)
kali ini saya akan membahas tentang membuat miniChat/shoutbox sederhana dengan menggunakan ajax, ini nantinya bisa di terapkan di blog anda atau web anda. Dengan membuat sendiri miniChat dengan script ajax akan membuat web anda lebih ringan,.
Langsung saja ke scipt'y.....
Buat database dan tabelnya, untuk lebih mudah bisa copas text dibawah ini ke Query SQL anda,.
CREATE DATABASE chat ;
CREATE TABLE datachat (
idUser int(4) NOT NULL auto_increment,
namaUser varchar(25) NOT NULL,
isiChat varchar(250) NOT NULL,
date varchar(40) NOT NULL,
PRIMARY KEY (idUser)
);
Langkah berikutnya adalah membuat halaman Ajax, perhatikan script Ajax berikut:
index.php
<html>
<head>
<title>minichat / shoutbox </title>
<script language="javascript">
//tes browser support
function createRequestObject() {
var ro;
//Firfox, Opera, Safari, Chrome
if(window.XMLHttpRequest)
{
ro=new XMLHttpRequest();
}
//IE
else if(windows.ActiveXObject)
{
ro=new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
alert("browser suport ajax");
return false;
}
return ro;
}
var xmlhttp = createRequestObject();
function ambilData()
{
var post = "nama="+null;
xmlhttp.open("post", "dataChat.php?data="+Math.random(), true);
xmlhttp.onreadystatechange = function() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
document.getElementById("hasil").innerHTML= xmlhttp.responseText;
}
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(post);
setTimeout("ambilData()",4000);
}
function kirim()
{
var post = "nama="+document.chat.nama.value;
post=post+"&isiChat="+document.chat.isiChat.value;
xmlhttp.open("post", "inputData.php?data="+Math.random(), true);
xmlhttp.onreadystatechange = function() {
if ((xmlhttp.readyState == 4) && (xmlhttp.status == 200))
document.getElementById("hasil").innerHTML= xmlhttp.responseText;
document.getElementById("isiChat").value=null;
}
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send(post);
setTimeout("ambilData()",4000);
}
</script>
</head>
<body onLoad="setTimeout('ambilData()',1000)">
<table align="center" width="326" height="192" border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" width="326" height="250">
<div id="hasil" style="overflow:auto; height:250;"></div>
</td>
</tr>
<tr>
<td height="24">
<form name="chat" id="chating">
nama : <input type="text" name="nama" size="15" /><br />
<input id="isiChat" type="text" name="isiChat" size="30" onChange="kirim()" />
<input type="button" value="kirim" onClick="kirim()" />
</form>
</td>
</tr>
</table>
</body>
</html>
Script di atas berisi srcript Ajax, script Javascript dan HTML.
Langkah berikutnya buat koneksi ke SQL dengan script PHP, untuk yang kurang jelas bisa lihat postingan saya sebelumnya Tes koneksi ke server MySQL menggunakan script PHP.
<?php
//koneksi ke database
$hostname_conn="localhost";
$username_conn="root";
$password_conn="";
$db_conn="chat";
mysql_connect($hostname_conn,$username_conn,$password_conn,$db_conn) or die ("Koneksi gagal total");
mysql_select_db ($db_conn);
?>
Selanjutnya membuat script PHP untuk menyimpan vareabel javascript/data chating yang ada pada form minichat tadi,.
<?php
//memasukan konfigurasi
include"config.php";
//ambil vareabel
$nama=$_POST['nama'];
$isiChat=$_POST['isiChat'];
$date=date("d F Y H:i:s");
if($nama!="" and $isiChat!="" and $isiChat!=null and $isiChat!="null")
{
//masukan vareable ke database
$insert=mysql_query("INSERT INTO datachat ( idUser , namaUser , isiChat , date )VALUES ('', '$nama', '$isiChat', '$date')");
if($insert)
{
$query=mysql_query("SELECT * FROM datachat ORDER BY idUser DESC");
while($i<=30 and $row=mysql_fetch_array($query))
{
$i++;
echo"$row[namaUser] : $row[isiChat] >> $row[date] <br />";
}
}
else
{
echo"gagal";
}
}
else
{
$query=mysql_query("SELECT * FROM datachat ORDER BY idUser DESC");
while($i<=30 and $row=mysql_fetch_array($query))
{
$i++;
echo"$row[namaUser] : $row[isiChat] >> $row[date] <br />";
}
}
?>
Terakhir membuat buat untuk mempilkan data-data chat dengan script PHP, yang di panggil secara auto refresh dengan script Ajax.
dataChat.php
<?php
//include koneksi
include"config.php";
$query=mysql_query("SELECT * FROM datachat ORDER BY idUser DESC");
while($i<=30 and $row=mysql_fetch_array($query))
{
$i++;
echo"$row[namaUser] : $row[isiChat] >> $row[date] <br />";
}
?>
miniChat dengan Ajax yang tadi saya bahas masih sangat sederhana, untuk tampilan dan lain-lain anda bisa kembangkan sendiri,.
