Loading penambahan data dengan menggunakan JSON, JQuery, dan PHP

sekedar berbagi: ada pertanyaan dari teman disini yang pengen mengupdate table data di browser apabila ada posting data yang disimpan di database. misalnya seorang admin blog akan melihat apabila ada user memposting topik baru di milist tanpa harus merefresh browsernya. saya tidak tahu apakah sudah ada atau belum postingnya disini. baiklah saya akan bagi tekniknya dengan menggunakan jquery (anda bisa download jquery.js dari www.jquery.com) dengan dataType dalam JSON (maaf bagi yang tidak berkenan yah, yah codingnya baru ala kadarnya dan masih acak2 an karena ini juga dibikinnya gak sungguhan).

asumsi tabel yang digunakan adalah tabel1 dengan kolom id1, pages dan word.

pertama-tama bikin dulu tampilan awal, saya bikin disini filenya notifikasi.php
<html>

<head>

<script type=”text/javascript” src=”jquery.js”></script>

<script type=”text/javascript”>

function notif(){

var last_id = 0;

if($(‘#notifikasi>tbody>tr’).length >= 1){

var num = $(‘#notifikasi>tbody>tr’).length – 1;

last_id = $(‘#notifikasi>tbody>tr:eq(‘+num+’)>td:eq(0)’).text();

};

/* script diatas untuk mendapatkan last_id yang sudah ditampilkan di browser jika row didalam tbody >= 1  sengaja saya tidak menyertakan last_id di variabel khusus kiriman dari server, kalau ada yang mau begitu ya silakan */

$.ajax({

url: ‘getdata.php’,

type: ‘POST’,

dataType: ‘json’,

data: ‘last_id=’+last_id,

success: function(msg){

if(msg.total > $(‘#notifikasi>tbody>tr’).length){

$(“.new”).addClass(“old”).removeClass(“new”);

$(“#notifikasi>tfoot>tr>td:eq(1)”).text(msg.total);

$.each(msg.rows,function(i,val){

$(‘#notifikasi>tbody’).append(‘<tr></tr>’);

$.each(val,function(j,v){

$(‘#notifikasi>tbody>tr’).last().append(“<td class=’new’>”+v+”</td>”);

})

})

}

/* jika json total dari server lebih > dari jumlah row di browser baru dijalankan updatenya */

}

});

}

$(document).ready(function(){

TimerId = setTimeout(“notif()”, 5000);

$(“#notifikasi”).ajaxStart(function(){clearTimeout(TimerId)}).ajaxStop(function(){TimerId = setTimeout(“notif()”, 5000)})

})

/* pas diawal load, kita jalankan setTimeout untuk mendapatkan data dengan ajax ( dalam 1 menit), untuk mencegah adanya penumpukan akses yang menyebabkan looping mysql_connect (jika yang posting data banyak bisa berabe, karena belum selesai PHP menjalankan request pertama sudah disusul dengan request berikutnya) maka pas ajax dijalankan, kita clear dulu TimerId nya, baru kalau sudah selesai ajax diload, kita set lagi TimerId nya */

</script>

<style>

.new {

background: #ccddee;

}

.old{

background: #eeddcc;

}

</style>

</head>

<body>

<table id=”notifikasi”>

<thead>

<tr>

<th>id</th>

<th>User</th>

<th>Notifikasi</th>

</tr>

</thead>

<tbody>

<?php

$handle = mysql_connect(“localhost”, “root”, “”);

mysql_select_db(“test”, $handle);

$query = mysql_query(“SELECT * FROM table1”);

$total = mysql_num_rows($query);

while($rows = mysql_fetch_assoc($query)){

echo “<tr class=’new’>”;

echo “<td>”. $rows[“id1”] . “</td>”;

echo “<td>”. $rows[“pages”] . “</td>”;

echo “<td>”. $rows[“word”] . “</td>”;

echo “</tr>”;

}

?>

</tbody>

<tfoot>

<tr><td>Total</td><td colspan=”2″><?php echo $total ?></td></tr>

</tfoot>

</table>

</body>

</html>

Yang kedua bikin file getdata.php untuk mensuplay datanya:

<?php

header(“Pragma: no-cache”);

header(“Cache-Control: no-store, no-cache, max-age=0, must-revalidate”);

header(‘Content-Type: text/x-json’);

$handle = mysql_connect(“localhost”, “root”, “”);

mysql_select_db(“test”);

if(isset($_POST[‘last_id’])){

$query = mysql_query(“SELECT * FROM table1”);

$numrows = mysql_num_rows($query);

mysql_free_result($query);

$query = mysql_query(“SELECT * FROM table1 WHERE id1 > “.$_POST[‘last_id’]);

$data = array();

$data1 = array();

$data2 = array();

while($rows = mysql_fetch_assoc($query)){

$data[] = $rows[‘id1’];

$data[] = $rows[‘pages’];

$data[] = $rows[‘word’];

$data1[] = $data;

unset($data);

}

$data2[‘total’] = $numrows;

$data2[‘rows’] = $data1;

echo json_encode($data2);

/* parsing array dalam bentuk JSON */

}

?>
sekian dulu yah, maaf kalau codingnya masih berantakan (hehehe silakan kalau mau ada yang merapikan lagi…:ngeles.com:). Sekedar info, script sudah diujicoba dan jalan.

(diambil dari group Facebook PHP Indonesia)

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s