Script auto Refresh div

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





<script src="jquery-latest.js"></script>

<script>

var refreshId = setInterval(function()

{

$('#responsecontainer').load('oo.php');

}, 1000);

</script>

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.


<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>

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.





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 //


?>

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.

RIKI DWI PUTRA

Minggu, 29 Januari 2017

Script auto Refresh div

0 komentar:

Posting Komentar

Contact

Get in touch with me

Adress/Street

Phone number

e-mail