Meload data dengan juqery php
Untuk tutorial kali kita bahasa mengenai pemanggilan data menggunakan penggabungan script jquery dengan php. Untuk pemanggilan data sendiri selain menggunakan jquery, penggabungan lain yaitu dapat menggunakan javascript dengan php, ajax dengan php dan angularjs dengan php.
Untuk kasus yang terjadi pada saya ini, saya menggunakan script jquery untuk mengupdate data setiap waktu yang di tentukan. Dengan kasus ini waktu yang saya tentukan yaitu 2 detik.
Namun untuk pemanfaatannya waktu bisa di kembangkan sendiri sesuai kebutuhan, misalkan saja 0,5 detik, 1,2,3,4,5 detik dan sebagainya.
Studi kasus:
Saya sedang mengembangkan aplikasi chat yang mana tampilan chating akan di update tanpa merefresh halamannya. Caranya yaitu dengan menggunakan script jquery yang mengupdate tampilan data baris database berdasarkan waktu yang ditentukan.
Cara meload dengan otomatis dengan jquery
Untuk filenya kita bagi menjadi 2 yaitu:
1. chat.php
<div id=”chat”></dv>
<script type=”text/javascript” src=”http://code.jquery.com/jquery-latest.min.js”></script>
<script language=”javascript” type=”text/javascript”>
function loadChat(){ $(“#chat”).load(“chatJquery.php”,function () { $(this); }); }
loadChat(); // This will run on page load
setInterval(function(){
loadChat() // this will run after every 5 seconds
}, 500);//load 0,5 detik
</script>
Pada script diatas, kita memanggil library dari jquery yang fungsi-fungsinya akan di panggil dan digunakan:
http://code.jquery.com/jquery-latest.min.js
Dan untuk menampilkan dan menempatkan datanya kita letakkan di:
<div id=”chat”></dv>
Update: Untuk refresh atau load diatas saya ubah menjadi0,5 atau setengah detik.
2. chatJquery.php
<?php
session_start();
$server = “localhost”;
$server = “localhost”;
$username = “root” ;
$password = “” ;
$database = “nm_db”;
$con = new mysqli($server,$username,$password,$database);if($con->connect_error){ die(“Koneksi gagal: “.$con->connect_error);}
$result=$con->query(“SELECT * FROM chat ORDER BY idChat”);$no=0;
while($r = $result->fetch_assoc()){
$user=$con->query(“SELECT * FROM user WHERE idUser=’$r[idUser]'”)->fetch_assoc();
$n = $user[‘nama’];
if(empty($n)){
$n=$_SESSION[‘nama’]; }
$no++;
echo ‘<p><span class=”btn btn-primary btn-xs”>’.$n.’: </span> ‘.$r[chat].’ <i><sub>’.$r[waktu].'</sub></i>’;
if($_SESSION[level]==1){
echo ‘ <a href=”?m=’.$m.’&a=edit&id=’.$r[idChat].'”><i class=”glyphicon glyphicon-edit”></i> </a> <a href=”?m=’.$m.’&a=delete&id=’.$r[idChat].'”><i class=”glyphicon glyphicon-remove” onclick=”return konfirmasi()”></i></a></p>’;
}
}
?>
Pada script kedua ini merupakan script yang digunakan untuk memanggil data di database. Untuk tabel data kolom databasenya silahkan disesuaikan dengan kebutuhan masing-masing.
Jadi data akan update dan menampilkan data terbaru setiap 0,5 detik (pada contoh tersebut). Dengan demikian jika ada data baru yang masuk ke database maka tampilan akan update juga.
Untuk kelemahan yaitu, jika user mengakses halaman ini, maka halaman akan di load setiap 0,5 detik. Maka ini akan memakan resource server. JIka ada banyak user, maka ini sangat menguras bandwitch server yang kita gunakan, karena meload script di server berulang-ulang.
TIPS: Untuk mengatasi hal ini gunakan lah server online yang kuta dan tahan. namun jika hanya di pakai dilokal host script ini tidak ada masalah dan berjalan dengan lancar dan baik.