Membuat Auto Refresh Secara Otomatis Pada Beberapa Browser

Ada banyak cara untuk membuat auto refresh, baik menggunakan codeignitier, php ajax ataupun auto refresh javascript. Bagaiman dengan browser? Saya sendiri baru mengetahui hal ini dari beberapa teman yang sudah membuatnya, biar ilmu yang gue punya tidak untuk gue sendiri jadinya gue tuliskan semuanya disini untuk kalian.

Menekan tombol refresh bertujuan untuk menampilkan perubahan terbaru yang muncul dalam sebuah situs. Baik secara otomatis, atapun kalian menekannya secara manual. Ada beberapa perangkat yang bisa membantu kalian untuk melakukan ini di halaman situs dalam rentang waktu tertentu secara otomatis. Bagaimana caranya?

Cara Membuat Auto Refresh Otomatis

1. Google Chrome. Instal ekstensi yang bernama auto refresh plus yang bisa kalian dapatkan di web store. Dengan menggunakan ekstensi ini, kalian bisa mengatur interval waktu auto refresh sesuai dengan yang kalian inginkan.
2. Mozilla Firefox. Install add-on bernama auto refresh, selanjutnya kalian cukup melakukan restart browser yang kalian gunakan dan memilih rentang refresh browser pada bagion option. Add-on ini memungkinkan untuk menjalankan fungsi auto refresh pada sebuah halaman tertentu ataupun semua tab yang dibuka.
3. Opera. Fitur yang satu ini tersedia secara default di browser ini, kalian cukup menekan klik kanan dan akan muncul pilihan Reload Every. Di situ, kita bisa memilih rentang waktu yang disediakan atau juga bisa mengaturnya sendiri pada opsi Custom.

Bagiamana jika teman-teman ingin membuatnya dalam website atau blog yang kalian desain sendiri? Tergantung dari bahasa pemrograman apa yang kalian gunakan. Gue akan kasih sedikit contoh untuk yang menggunakan berbeda bahasa program.

Auto Refresh Dengan Codeigniter

Buat sebuah controller dengan nama sync.php, kemudian isikan dengan code dibawah ini:

<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);

class Sinkron extends CI_Controller {

function __construct()
{
parent::__construct();
$this->load->helper(array(‘url’));
$this->load->database();
$this->load->model(‘sinkron_model’);
}
function index()
{
$data[‘kelas’] = $this->sinkron_model->nm_kelas();
$this->load->view(‘sinkron/depan’,$data);
}
function siswa()
{
$id = $this->input->post(‘id_kelas’);
$data[‘siswa’] = $this->sinkron_model->nm_siswa($id);
$this->load->view(‘sinkron/siswa’,$data);
}
}

Buat sebuah model dan simpan dengan naman sync_model.php, isikan dengan kode dibawah ini:

<?php if ( ! defined(‘BASEPATH’)) exit(‘No direct script access allowed’);

class sinkron_model extends CI_Model{

function __construct()
{
parent::__construct();
}
function nm_kelas()
{
$q = $this->db->query(“select * from tbl_kelas”);
return $q;
}
function nm_siswa($id)
{
$q = $this->db->query(“select * from tbl_siswa_kelas left join tbl_kelas on tbl_siswa_kelas.id_kelas=tbl_kelas.id_kelas where tbl_siswa_kelas.id_kelas=’$id'”);
return $q;
}

}

Buat file output dengan nama front.php, isikan dengan kode dibawah ini:

<title>Auto Refresh Dropdown</title>
<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js” type=”text/javascript”></script>

<style>
body{
font-family:Tahoma;
font-size:12px;
}
select{
padding:5px;
border:1px solid #666666;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
z-index: 9999 ;
}
</style>

<div id=”kelas”>
Pilih Kelas :
<select name=”id_kelas” id=”id_kelas”>
<?php
echo “<option>- Pilih Nama Kelas -</option>”;
foreach($kelas->result_array() as $k)
{
echo “<option value='”.$k[‘id_kelas’].”‘>Kelas “.$k[‘nama_kelas’].”</option>”;
}
?>
</select>
</div>

<div id=”siswa”>

</div>

<script type=”text/javascript”>
$(“#id_kelas”).change(function(){
var id_kelas = {id_kelas:$(“#id_kelas”).val()};
$.ajax({
type: “POST”,
url : “<?php echo base_url(); ?>index.php/sinkron/siswa”,
data: id_kelas,
success: function(msg){
$(‘#siswa’).html(msg);
}
});
});
</script>

Auto Refresh Dengan Php Ajax

Buat file index.php yang akan memanggil file show.php. Isikan file index.php dengan kode dibawah ini:

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

Isikan file show.php dengan kode dibawah ini:

<?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>;
}
}
?>

Auto Refresh Dengan Javascript

Masukan kode ini didalam file kalian:

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

Buat file response.php dengan kode dibawah ini:

<?php echo rand(); ?>

Gimana? Sekarang udah cukup lengkap ya untuk membuat auto refresh, baik untuk browser kalian ataupun dengan menggunakan bahasa program yang sesuai dengan kebutuhan kalian. Sedangkan kalian tidak ingin menggunakan bahasa tersebut untuk blog kalian, bisa baca artikel gue tentang auto refresh untuk blog yang sudah gue buatkan. Kalau ada referensi lain yang bisa kalian bagikan, silahkan berkomentar bagaimana kalian membuat auto refresh tersebut.