terkadang kita membutuhkan yang namanya pengambilan data tanpa refresh, tapi bagaimana bisa? coba kita lihat proses pengambilan data status dan komentar di facebook, twitter dan beberapa situs chat seperti fb chat, mig33, dan twoo. kesemuanya mempunyai sistem yang sama, pengambilan data tanpa refresh halaman...
Sekarang kita mulai dengan membuat database status, buat database dengan nama online dan beri nama tabel dengan nama status. dan sekarang kita sudah punya database dengan nama online dan sebuah tabel dengan nama status, fieldnya no => int(11) , alias => varchar(30) , status => text , waktu => varchar(30) . ane yakin om-om udah pada bisa bikin database n tabel di server pc masing2.. hehe klo blm bisa googling aja om...
lalu buat file php sebagai penghubung php kita dengan database, silakan buka notepad / notepad++ / Dreamweaver / PHPcoder (in windows, soal'a ane msh beginner di linux om hehe), buat page baru dengan nama konekdb.php, dan isikan dengan listing di bawah ini :
<?php
$koneksi=mysql_connect("localhost","root","");
mysql_select_db("online",$koneksi);
?>
simpan dengan nama konekdb.php. localhost adalah server pc kita, namun apabila sudah masuk cPanel dalam sebuah hosting maka beri nama sesuai hosting tersebut. admin kita isi denga default yaitu "root", karena ane pake servernya wampserver yg ringan gitu deh om maka password ane kosongin, tp biasanya kan pada pake apache to triad tuh, nah isi dengan "password", nah "online" itu sesuai database yang kita buat sebelumnya...
sekarang buat halaman tulis status, dan isikan dengan listing berikut :
<?php
session_start();
if(isset($_POST['ok'])){
$alias='Saya';
include('konekdb.php');
$tabel=mysql_query("SELECT * FROM status",$koneksi);
$jumlahdata=mysql_num_rows($tabel);
$no=$jumlahdata+1;
$jam1=date("H")+7;
$jam=$jam1.':'.date("i:s");
$tgl=date("l, d-F-Y");
$waktu=$tgl." (".$jam.")";
$status=$_POST['status'];
$status=htmlspecialchars($status);
$masukan="INSERT INTO status(no,alias,waktu,status)
VALUES('$no','$alias','$waktu','$status')";
mysql_query($masukan,$koneksi);
echo"<script language='JavaScript'>parent.document.getElementById('stats').innerHTML ='';</script>";
}
?>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tulis Status</title>
</head>
<body>
<form method="post" name="form1" id="form1">
<table width="180" border="0">
<tr>
<td width="167"><strong>Tulis Status (Saya)</strong>
<pre><textarea name="status" id="status" cols="25" rows="5"></textarea>
</pre>
</td>
</tr>
<tr>
<script>function batal() {parent.document.getElementById('stats').innerHTML ='';}</script>
<td><div align="left" style="padding-right:7px">
<div align="right">
<a onclick="batal()" href="tulisstatus.php">Batal</a> <a style="color:#FFFFFF">____</a> <input type="submit" name="ok" id="ok" value="Bagikan" />
</div>
</div></td>
</tr>
</table>
</form>
</body>
</html>
simpan dengan nama tulisstatus.php. nah sekarang ane mau jelasin secara singkat fungsi penanggalan dlm php yaitu menggunakan standar GMT +7, dan kita anggap saja alias yang kita gunakan dengan nama 'Saya'. fungsi simpan ada dalam php yang merupakan gabungan bahasa mySql yaitu insert into ... values ...
dan dalam 2 perintah javascript parent.document.getElementById('stats').innerHTML =''; adalah karena kita menggunakan iFrame sebagai alat untuk menulis status agar di halaman status nanti benar-benar tidak ada refreshing halaman. kata parent digunakan untuk mengeksekusi perintah javasript ke halaman induk yang memanggil halaman ini di dalam iFrame nya.
lalu buat halaman prosesnya denga listing ini :
<?php
include('konekdb.php');
# query ke db dengan membatasi pemanggilan maksimal 30 data dengan mengurutkan data secara terbalik sesuai waktu
$sql = "SELECT * FROM status ORDER BY waktu DESC LIMIT 30";
# jalankan query
$req_db = mysql_query($sql);
# ambil hasil query, simpan dalam bentuk array.
while ($data = mysql_fetch_array($req_db)){
$array_data[] = array(
"no"=>$data['no'],
"asal"=>$data['alias'],
"waktu"=>$data['waktu'],
"isi"=>$data['status'],
"jml"=>(mysql_num_rows(mysql_query("SELECT * FROM status",$_SESSION['koneksi'])))
);}
# encode menjadi bentuk data JSON
echo(json_encode($array_data));
?>
simpan dengan nama proses.php. ini adalah fungsi pemanggilan data biasa dan fungsi aray/perulangan biasa. yang paling penting dari listing ini yaitu encode data dari database ke dalam bahasa JSON agar data dapat diambil tanpa merefresh halaman lagi...
sekarang yang paling sulit yaitu pemanggilan data tersebut dengan membuat satu halaman yang listingnya sebagai berikut :
<html>
<head>
<script>
function stats(){
var x='<iframe id="frames" width="300px" height="250px" frameborder="0" src="tulisstatus.php"></iframe>';
document.getElementById('stats').innerHTML =(x);
}
</script>
<title>status</title>
<script type='text/javascript' src='jquery-1.4.2.min.js'></script>
<script type='text/javascript'>
function dewa(){
$(function(){
$.ajax({
url:"proses.php",
dataType:"json",
success:function(data){
data = "";
$.each(data, function(i,n){
data = data + "<li>" + "<strong>" + n["alias"] + "</strong>" + "<br/><a style='color:#999999'>" + n["waktu"] + "</a><br/><br/>" + n["status"] + "<br/><hr/></li>";
});
data = data + "";
document.getElementById("json").innerHTML =data;
}
});
return false;
});
setTimeout("dewa()", 1000);
}
</script>
</head>
<body onLoad="dewa()">
<a onClick="stats()">Tulis Status</a>
<div id='stats'>
</div>
<div id='json'>
</div>
</body>
</html>
simpan dengan nama status.php.
dan terakhir buat file javascriptnya dan simpan dengan nama jquery-1.4.2.min.js buka di ...
jquery-1.4.2.min.js
biar gampang copy-paste aja om hehe jurus ampuh pelajar... hehe
sok sekarang simpan semua dalam satu folder dan beri nama folder tersebut dengan nama online di server pc om-om sekalian, kalo wamp sever kaya ane, default foldernya yaitu C:\wamp\www\online kalo apache to triad C:\apache\htdocs\online lalu buka file kita yaitu status.php
dan.... jenjreng..... dg logika algorithma om-om semua bisa gunain buat bikin forum, jejaring sosial ala om sendiri, bahkan web chatting sendiri,, hehe usaha yah om, pasti bisa deh,,, ane aja bisa, hehe... SEMANGAT OM !!!
mohon kritik n saran yah om ke ane apabila ada kesalahan, kekurangan atau kelebihan. ane juga minta maaf apabila ane nyinggung om secara gak sengaja melalui postingan ini, hehe namanya juga gak sengaja om...
okay, sekian dulu dari om Awed, sampai ketemu dalam postingan berikutnya. SALAM IBT OM-OM SEMUA...
.PNG)
Nice om Sharenya
ReplyDeletewaduh baru bales nih om... sama2 ditunggu masukannya :)
ReplyDeletegpp om kan sibuk :D
ReplyDeletetapi update terus om yang kayak gini ane suka
ane request CI dong om :)
waduh code igniter ane msh newbie om, mungkin om Abdillah Hasny lebih paham deh, hehe kpn2 ane deh yg belajar ma ente om... :)
ReplyDeleteane share lag tuh ttg inspector browser.. baca yah om, n jg kasih komentar jg yh om... trims nih udah mau komen ane :)
om kok ada yang erroy ya.. coba dong om di upload projecknya.
ReplyDeleteom maaf ni masih belajar, ane coba input dah masuk databse tp semua status kog g muncul di halaman status y... mohon pencerahannya!!
ReplyDeletesedikit aq coba2 edit dan ahirnya dah bisa om, tp muncul "[object Object],[object Object]" terus sebanyak jumlah data yang di input.. kira2 apanya y om..?? trima kasih banyak sebelumnya.
ReplyDeleteboleh dong mas dikasih tutornya kalo dimasukin ke code igniter, heheh makasih mas :D
ReplyDeleteagan2 mau tnya donk backtrack 5 bisa di install di laptop pentium 4 atau gak ya?
ReplyDeletetrus spesifikasi nya ap aja si untuk install os tersebut
Maaf om saya masih newbie, mau tnya dong :). Saya udh cbain buka file tulisstatus.php, alhmdulillah g ada error. Tpi begitu saya tekan tombol bagikan, data di halaman "status.php" ko g update ya om? :)
ReplyDelete