Press "Enter" to skip to content

Tutorial Javascript – 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. 😀

12 Comments

  1. taufik taufik Januari 25, 2013

    tidak jalan bro.

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

    • El Cicko El Cicko Post author | Januari 25, 2013

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

       mysql_connect("host","user","password");
       mysql_select_db("testrefresh");
      
  2. Jasa SEO Jasa SEO Januari 27, 2013

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

  3. hendra hendra Juli 7, 2014

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

      • hendra hendra Juli 9, 2014

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

  4. Setya Jatiarsa Setya Jatiarsa Juli 21, 2014

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

    • El Cicko El Cicko Post author | Juli 21, 2014

      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 😀

  5. galih galih Maret 13, 2016

    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 galih Maret 13, 2016

      show.php nya

      $a=1;

      $b=2;

      • El Cicko El Cicko Post author | Maret 14, 2016

        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 *