Cara menggunakan auto refresh table javascript

Question

Home
Javascript Jquery
Membuat Auto Refresh di Website dengan Jquery

OK.. pada artikel kali ini admin akan membahas Cara membat Auto Refresh Halaman Website Dengan Jquery , “Auto Refresh Web Page With AJAX Technique” ,

Table of Contents Show

Refresh Kontent Otomatis Dengan JQuery
Membuat Refresh Halaman Web Otomtis dengan Javascript Jquery
Artikel Rekomendasi
Artikel Terkait Menampilan Pesan atau Notification ketika Refresh dan Back ButtonCara Membuat Limit Checkbox dengan JavascriptMembuat Penjumlahan otomatis di TextboxPlugin count words TinyMCE untuk menghitung Jumlah kataMengambil Lat dan Long Di Google Map Kedalam Form Input secara OtomatisMenampilkan type File dan Ukuran pada input fileCara explode di Javascript dengan Fungsi SplitSimple Responsive Jquery AccordionMenampilkan Data di Textbox Berdasarkan ComboboxMembuat Style Alert Box Javascript

Pada artikel ini kita akan membuat 2 buah tipe Refresh.

Refresh Kontent Otomatis dengan Data dari database
Refresh Otomatis Untuk mendapatkan Nilai Random / Acak

OK.. langsung saja.. untuk yang pertama

Refresh Kontent Otomatis Dengan JQuery

Di sini kita akan membuat file index.php. File ini adalah tempat kita menyimpan script dimana kita akan melakukan refresh konten otomatis dengan jQuery. Pada file ini kita akan memanggil file show.php secara realtime dengan durasi setiap 10 detik sekali tanpa harus melakukan refresh halaman, jadi hanya elemen tertentu saja yang di refresh ulang.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var auto_refresh = setInterval(
    function () {
       $('#load_content').load('show.php').fadeIn("slow");
    }, 10000); // refresh setiap 10000 milliseconds    </script>
<div id="load_content"></div>

show.php

<?php 
mysql_connect("localhost","root",""); 
mysql_select_db("db_test"); 
$sql = mysql_query("select * from content"); 
if (mysql_num_rows($sql) == 0) { 
    echo "data kosong"; 
} else { 
    while ($row = mysql_fetch_array($sql)) { 
        echo $row[['title']an>; 
    } 
} 
?>

Membuat Refresh Halaman Web Otomtis dengan Javascript Jquery

Dalam kondisi tertentu kita membutuhkan cara untuk Refresh Halaman Secara Otomatis / auto, Hal ini bisa dilakukan dengan berbagai tehnik, jik pada manual nya kita bisa menekan dengan Tombol F5 pada keyboard, namun bagaimana jika kita ingin membuat halaman website bisa ter refresh/ load secara otomatis

Pada tulisan kali ini kita akan membuat sebuah halaman web sederhana dengan menampilkan data atau nilai acak yang terus berubah secara kontiniu tanpa harus kita refresh (load) pada halaman web tersebut. Fungsi yang menampilkan nilai acak tersebut menggunakan fungsi pada PHP yaitu rand() —> get random value.

Berikut ini script yang digunakan :

<html>
<head>
<script src="jquery-1.3.2.min.js"></script>
<script>
$(document).ready(function() {
$("#responsecontainer").load("response.php");
var refreshId = setInterval(function()
{
$("#responsecontainer").load('response.php?randval='+ Math.random());
}, 1000);
});
</script>
</head>
<body>
<center><br /><br /><br />
<table border="1" bgcolor="yellow"><tr><td>
<div id="responsecontainer"></div>
</td></tr></table>
</center>
</body>
</html>

response.php

<?php echo rand(); ?>

untuk source code dapat anda download disini

Artikel Rekomendasi

Artikel Terkait Menampilan Pesan atau Notification ketika Refresh dan Back ButtonCara Membuat Limit Checkbox dengan JavascriptMembuat Penjumlahan otomatis di TextboxPlugin count words TinyMCE untuk menghitung Jumlah kataMengambil Lat dan Long Di Google Map Kedalam Form Input secara OtomatisMenampilkan type File dan Ukuran pada input fileCara explode di Javascript dengan Fungsi SplitSimple Responsive Jquery AccordionMenampilkan Data di Textbox Berdasarkan ComboboxMembuat Style Alert Box Javascript

Diskusi

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

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.