Kadang kala kita ingin menampilkan suatu informasi update dari database saat itu juga (real time) ke suatu halaman website. Caranya adalah dengan merefresh query ke database setiap beberapa detik secara otomatis untuk menampilkan informasi terbaru. Sebagai contoh penerapannya dalam aplikasi web/ halaman php misalnya:
- menampilkan pesan yang masuk ke dalam inbox,
- menampilkan jumlah order yang baru secara realtime dalam sebuah toko online,
- menampilkan barang yang dibeli dalam cart (kerangjang belanja),… dan sebagainya.
Untuk menerapkannya dalam halaman web, perlu adanya perintah refresh secara berkala secara otomatis. Namun jika yang merefresh tersebut adalah keseluruhan halaman web dengan loading halaman lagi, maka tentunya akan sangat mengganggu pengunjung, karena halaman yang dilihatnya akan refresh dan loading terus menerus.
Nah, supaya user tidak terganggu dengan proses reload content, maka proses reload content halaman dilakukan tanpa berganti halaman.
Ada solusi supaya halaman web tidak perlu direfresh setiap saat, yaitu dengan ajax atau dengan cara kedua yaitu dengan merefresh elemen halaman web berupa div. Jadi bagian div saja yang melakukan refresh tiap beberapa detik, tanpa menganggu bagian halaman web lainnya. Informasi maupun query ke database diletakan ke dalam div yang selalu merefresh secara otomatis.
Berikut ini script yang digunakan untuk merefresh div
[cc lang=”javascript”]
<script src=”jquery-latest.js”></script>
<script>
var refreshId = setInterval(function()
{
$(‘#responsecontainer’).load(‘oo.php’);
}, 1000);
</script>[/cc]
Penjelasan script:
- Kita menggunakan jquery yang semua scriptnya disimpan dalam jquery-latest.js .
- Kemudian pada script di atas, #responsecontainer adalah nama div yang akan refresh secara otomatis setiap beberapa detik. Anda dapat menggunakan nama lain yang anda suka.
- 00.php adalah halaman yang menyimpan informasi ataupun query ke mysql database
- 1000 adalah interval div saat merefresh. 1000 berarti div akan merefresh tiap 1 detik. Jika menginginkan refresh tiap 2 detik, maka gantilah menjadi 2000. Sesuaikan dengan keinginan Anda.
Script tersebut diletakkan di bagian head halaman php anda. Sedangkan untuk div nya sendiri diletakkan di bagian body. Berikut script lengkapnya dalam halaman php.
[cc lang=”php”]<html>
<head>
<script src=”jquery-latest.js”></script>
<script>
var refreshId = setInterval(function()
{
$(‘#responsecontainer’).load(‘oo.php’);
}, 1000);
</script>
</head>
<body>
<div id=”responsecontainer”>
</div>
</body>
</html>
[/cc]
Dari script di atas, halaman oo.php akan direfresh tiap 1 detik, jadi jika di halaman oo.php tersebut terdapat query ke database, maka akan dilakukan eksekusi ke database tiap 1 detik. Sehingga update yang terjadi pada database tersebut akan dimunculkan secara realtime.
Sedangkan untuk halaman oo.php saya memberikan contoh seperti di bawah ini. Nantinya Anda dapat memasukkan query ke halaman oo.php ini sesuai dengan kebutuhan aplikasi php Anda.
[cc lang=”php”]
isi akan berubah berdasarkan hasil update … <br/>
silahkan ganti tulisan ini beberapa kali dan lihat hasilnya di halaman index.php <br/>
tulisan akan berganti secara otomatis begitu anda ganti tulisan dan save
<?php
//jika menggunakan query
//silahkan masukan query mysql anda di sini //
?>
[/cc]
untuk lebih jelasnya bisa dilihat di video di bawah ini. Saat tulisan pada halaman oo.php diganti/dirubah , maka halaman index.php akan berubah secara otomatis, tanpa harus refresh halaman index.php. Pada video ini hanya demo perubahan secara manual pada halaman oo.php, karena memang tidak saya hubungkan ke databse mysql. Ini untuk memberikan gambaran saja tentang refresh div otomatis secara realtime. Tapi jika di halaman oo.php tersebut anda memasukan query database atau script lainnya, maka akan dieksekusi secara otomatis juga.
Silahkan download script ini untuk anda pelajari,
Download script php refresh div automatis dengan jquery
password zip : www.bayuajie.com
kasih jquery latestnya dong serching gak nemu2
udah ada di file zip nya itu, gan. download aja file zipnya, lalu extract / buka.
mantap, izin sedot gan
bang misal gunain chart js, supaya bisa auto refresh gimana?
Josss……
Terima kasih yaaaa, semoga Allah yang membalas kebaikan share ini.
Ada gak script auto masuk lagi ke halaman web. Ketika kita tutup halamn tersbut..
Soalnya saya perna buka web. Beberapa menit.
Lalu saya kembali ke branda google saya diamkan di branda google beberpa detik.. otomtis masuk lagi ke halaman yang sudah saya tutup..
terima kasih banyak gan.. sangat sangat membantu ilmunya.. moga berkah.. dan di lancarkan rezekinya…
Terima kasih, sangat bermanfaat
mantap