Tolong pilih kategori sesuai, jenis posting (diskusi atau bukan) dan sertakan tag/topik yang sesuai seperti komputer, java, php, mysql, dll. Promosi atau posting tidak pada tempatnya akan kami hapus!
- Bagi Anda yang ingin mendaftar, baca link berikut:
http://diskusiweb.com/discussion/50491/how-to-registrasi-diskusiweb-com-baca-ini-terlebih-dahulu
- Cara menyisipkan kode program supaya tampil rapi dan terformat dengan baik di diskusiweb.com: http://www.diskusiweb.com/discussion/50415/cara-menyisipkan-kode-program-di-diskusiweb-com
- 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

magpiewebmagpieweb
edited December 2011 in Artikel & Tutorial Komputer
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: 

Tagged:

Comments

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

  • saefullohsaefulloh
    "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.
  • newusernewuser
    @^ saya kira malah mau ambil data pake json atau xml gitu  :D
  • saefullohsaefulloh
    @newuser bukan.. kalo itu mah pake $.get atau $.post
  • esteemjeesteemje
    edited March 2013
    @^ : Setuju. Terkecuali jika dibalik show() dan hide() disisipkan script untuk load data.
  • newusernewuser
    @newuser bukan.. kalo itu mah pake $.get atau $.post
    gw tau, yg gw maksud, coba baca judul nya :p
  • saefullohsaefulloh
    oalah... aku baru paham. haha....

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

    thanks udah sharing ilmu keren :)

  • KisniKisni
    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!
  • Ryuqi_YuRyuqi_Yu
    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.
  • andresarandresar
    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 :-)
  • andresarandresar
    "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.
  • aisyah_manisaisyah_manis
    betul sekali apa yang di bilang sama bang andresar, gak ada hubungannya itu ;;)
  • islahudinmlyislahudinmly
    <?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?..
  • lobsterlobster
    bikin tret baru di kamar tanya jawab
    bukan numpang di tret tutorial
  • brogoehbrogoeh
    jiaha salah kamar mas
Sign In or Register to comment.