Tolong pilih kategori sesuai, jenis posting (pertanyaan atau bukan) dan sertakan tag/topik yang sesuai misal komputer, php, mysql, dll.
Promosi atau posting tidak pada tempatnya akan kami hapus.
Mencantumkan kode program di posting Anda, tolong ikuti aturan yang sesuai, baca http://diskusiweb.com/discussion/39204/aturan-cara-menyisipkan-kode-program-di-diskusiweb

Baca cara posting gambar/image di post Anda: http://www.diskusiweb.com/discussion/47345/cara-menyisipkan-menyertakan-image-pada-posting/p1

Mengambil data dari server menggunakan .load() Jquery

Kali ini kita akan belajar metode paling sederhana dengan bantuan library jquery untuk mengambil data dari server. Jquery menyediakan sebuah method .load() yang akan kita pakai nanti untuk memanggil data dari file berbeda tanpa harus me-load page (refresh) kita. Kenapa tidak menggunakan show() dan hide()  ?
Apabila kita menggunakan show() dan hide() jelas ini akan mengkonsumsi banyak waktu dan bandwidth user karena data akan diload semua terlebih dahulu. Bisa dibayangkan bukan ?
Tampilan akhir untuk tutorial kali ini akan seperti pada gambar di bawah ini :
tutorial load() jquery
Buat sebuah file index.php dan tuliskan script dibawah ini :
<pre lang="html">
<!DOCTYPE html>
<html>
<head>
  <style>
 body{ font-size: 12px; font-family: Arial; }
 </style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  
    <div>Latihan : </div>
<div style="width:300px; float:left;">
    <ul>
        <li id="movie">Movie</li>
        <li id="music">Music</li>
        <li id="game">Game</li>
    </ul>
</div>
<div id="konten" style="width:300px; float:left;">
    
</div>

<div style="clear:both"></div>
<script>
 $("#konten").load("movie.php"); /* Load movie.php secara default pada saat file index.php dibuka */
 $('#movie').click(function() {   
   $("#konten").load("movie.php");
  });
   $('#music').click(function() {   
   $("#konten").load("music.php");
  });
   $('#game').click(function() {   
   $("#konten").load("game.php");
  });
</script>

</body>
</html>
</pre>

Pada saat pertama kali file index.php di-load, secara default kita memanggil file movie untuk pertama
kali ditampilkan.
.click merupakan method dari jquery untuk membaca apakah div id kita di-click atau tidak. Apabila di-click
maka trigger selanjutnya adalah memanggil data yang sudah kita tentukan dengan menggunakan .load(“namafile.php”);

Selamat mencoba !

Nb: 

Tanggapan

  • wah ilmu yg berguna tuh....
    tp bang @magpieweb gmn cara mengkoneksikan langsung dari server dan cara liat database'y ap gmn ?

  • "Apabila kita menggunakan show() dan hide() jelas ini akan mengkonsumsi
    banyak waktu dan bandwidth user karena data akan diload semua terlebih
    dahulu. Bisa dibayangkan bukan ?"

    apa iya ta ? bukanya itu cuma untuk hidden atau tidak. show/hide kan ga ada hubunganya sama load data atau refresh page.

    setau saya sii seperti itu.
  • @^ saya kira malah mau ambil data pake json atau xml gitu  :D
  • @newuser bukan.. kalo itu mah pake $.get atau $.post
  • edited March 2013
    @^ : Setuju. Terkecuali jika dibalik show() dan hide() disisipkan script untuk load data.
  • @newuser bukan.. kalo itu mah pake $.get atau $.post
    gw tau, yg gw maksud, coba baca judul nya :p
  • oalah... aku baru paham. haha....

    aku slah paham berarti. :D
  • edited May 2013
    Wah susah ya. tapi jadi dapet ilmu baru nih. nanti ane pelajari lagi gan.

    thanks udah sharing ilmu keren :)

  • Kalo membuat pagination dg jQuery gimana ya gan? Tapi masalahnya script tersebut nantinya akan dipasang di situs HTML seperti XtGem, wen.ru atau yang lainnya.
    Saya nyoba gagal mulu, mohon pencerahannya!
  • klo mau jquery kya gtu mungkin klo user yg loadnya sedikit akan ringan tapi klo usernya banyak malah bikin load. editing lagi code nya bikin ringan.
  • edited September 2014
    Salah judul tu mas. Tuh bukan load data dari server. Kalau dari server biasanya kan pake method, url, dan response. Nh kayag menu navigasei deh...hihihihiks :-)
  • "Apabila kita menggunakan show() dan hide() jelas ini akan mengkonsumsi
    banyak waktu dan bandwidth user karena data akan diload semua terlebih
    dahulu. Bisa dibayangkan bukan ?"

    apa iya ta ? bukanya itu cuma untuk hidden atau tidak. show/hide kan ga ada hubunganya sama load data atau refresh page.

    setau saya sii seperti itu.
    Betul ga da hubungannya kayknya. Gean loadnya khan ga dari server.
  • betul sekali apa yang di bilang sama bang andresar, gak ada hubungannya itu ;;)
  • <?php
    $server = 'localhost' ;
    $username = 'root' ;
    $password = '' ;
    $database = 'slideshowku' ;
    // Koneksi dan memilih database di
    server
    mysql_connect ( $server , $username ,
    $password ) or die ( 'Koneksi gagal' ) ;
    mysql_select_db ( $database ) or die
    ( 'Database tidak bisa dibuka' ) ;
    $hasilQuery = mysql_query ( "select *
    from slider" ) ;
    // kalau hasil query error
    if ( ! $hasilQuery )
    {
    die ( 'Invalid query: ' . mysql_error
    ()) ;
    }
    // masukkan hasil query ke $gambarArray
    $i = 0 ;
    while ( $row = mysql_fetch_assoc
    ( $hasilQuery )) {
    $gambarArray [ $i ] = $row ;
    $i ++;
    }
    $jumlahGambar = count ( $gambarArray ) ;
    mysql_free_result ( $hasilQuery ) ;
    ?>
    <!doctype html>



    slide






    <?php for ( $i = 0 ; $i <
    $jumlahGambar ; $i ++ ) { >
    < div class = "ud_slide" >
    < img src = " img/<?php echo
    $gambarArray [ $i ][ 'gambar' ] ; ?> " >
    < h4 > Ke : <?php echo ( $i +
    1 ) ; ?>

    <?php } ?>





    Nah yg saya tanyakan bagaimana cara mereload tag
    pake ajax setelah menampilkan gambar terakhir dari database. Sehingga apabila ada insert gambar baru makan akan langsung di tampilkan tanpa harus merefres secara manual?..
  • bikin tret baru di kamar tanya jawab
    bukan numpang di tret tutorial
  • jiaha salah kamar mas
Sign In or Register to comment.