Tutorial Javascript – Refresh Konten Otomatis Dengan jQuery

Dipublikasikan oleh El Cicko pada

refresh konten otomatis dengan jquery

Sesuai dengan judul diatas, kali ini saya akan membahas tentang bagaimana cara membuat script untuk untuk melakukan refresh konten secara otomatis dengan JQuery dari Database MySQL. Teknik ini sangat bermanfaat bagi kamu yang ingin menampilkan data secara real time tanpa harus memuat ulang halaman.

Pada intinya kita akan melakukan request secara berulang-ulang dengan menggunakan AJAX dalam jeda waktu tertentu. Hal ini memungkinkan kita untuk mendapatkan data atau konten terbaru dari database tanpa harus memuat ulang halaman.

Refresh Konten Otomatis Dengan jQuery # index.php

Pertama-tama kita akan membuat file index.html. File ini kita gunakan sebagai halaman utama dimana didalamnya kita akan menyimpan kode javascript dengan bantuan JQuery untuk melakukan request AJAX dan menampilkan hasilnya di browser.

Baca Juga : Tutorial Javascript – Cara Mengecek Value Pada Array di Javascript

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.

<html>
    <head>
    <title>Refresh Konten Otomatis Dengan JQuery</title>
    <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>
    </head>
    <body>
        <div id="load_content"></div>
    </body>
</html>

Refresh Konten Otomatis Dengan jQuery # show.php

Nah, setelah selesai membuat script index.html tadi, kita akan membuat script show.php. Script ini berfungsi untuk mengambil data dari database dan menampilkan outputnya kedalam browser. Output ini yang akhirnya akan diambil dan ditampilkan di file index.php.

<?php 
mysql_connect("host","user","password"); 
mysql_select_db("testrefresh"); 
$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']; 
    } 
} 
?>

Sangat sederhana bukan ?  Kamu bisa mencoba tutorial ini dan mengembangkannya sesuai dengan kebutuhan kamu.

Sekian penjelasan singkat saya tentang tutorial bagaimana cara membuat script refresh konten otomatis dengan jQuery. Silahkan dicoba dan semoga bermanfaat. 😀


El Cicko

Nama saya Riky Fahri Hasibuan, Saya yang biasa nulis di blog ini. Blog ini adalah sarana dokumentasi dari apa yang saya kerjakan dan tidak ada salahnya juga saya sebarkan. Jika artikel di blog bermanfaat, kamu bisa memberikan apresiasi pada blog ini dengan memberikan donasi pada blog ini.

12 Komentar

taufik · Januari 25, 2013 pada 12:26 am

tidak jalan bro.

pesan error : Warning: mysql_fetch_array(): supplied argument is not a valid MySQL

    El Cicko · Januari 25, 2013 pada 9:06 pm

    sudah di setting ulang databasenya ? disesuaikan sama yang punya agan..bikin databasenya dulu

     mysql_connect("host","user","password");
     mysql_select_db("testrefresh");
    

Jasa SEO · Januari 27, 2013 pada 1:25 am

ane baca banyak banget dari awal ampe akhir mulai ngerti tulisannya oke banget, trims gan keep posting ya..

hendra · Juli 7, 2014 pada 4:30 pm

gan gimana caranya klo di wordpress saya masih bingung tolong bagi ilmunya dong…
Tengkyu..

    El Cicko · Juli 8, 2014 pada 7:11 am

    maksudnya auto refresh content di wordpress ya mas? saya juga kurang tau, tapi biasanya sich bisa dibantu pake plugin…coba cek ini mas http://wordpress.org/plugins/live-blogging/

      hendra · Juli 9, 2014 pada 6:58 pm

      Makasih infonya mas nanti saya coba, mas klo ada info baru Auto Refresh Konten wordpress tolong beritau ke ane 😀

Setya Jatiarsa · Juli 21, 2014 pada 2:28 pm

makasih gan , scriptnya jalan cuma kalo di load index.php nya halaman nggak langsung muncul sperti ada delay gitu

    El Cicko · Juli 21, 2014 pada 5:46 pm

    betul, pada dasarnya load datanya akan berjalan setiap 10 detik, saya sengaja set datanya kosong terlebih dahulu…mungkin mas setya bisa tambahin lagi dengan menambahkan konten yang lain sebelum scriptnya mengambil data yang baru 😀

galih · Maret 13, 2016 pada 3:17 pm

gan.. kalo ngambil data dari show.php gimana ya.. buat digunain lagi di index.php..

misalkan di show.php

di index.php gmna cara nya dapetin nilai $a sama $b nya ya…?

tks gan

    galih · Maret 13, 2016 pada 3:17 pm

    show.php nya

    $a=1;

    $b=2;

      El Cicko · Maret 14, 2016 pada 2:34 pm

      maksudnya dari hasil javascript di konversi ke format PHP lagi ya mas ? saya kurang tahu juga

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *