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

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:
tutorial lengkap bisa dilihat di http://www.magpieweb.com/2011/12/mengambil-data-dari-server-menggunakan-load-jquery/
Tagged:
Comments
tp bang @magpieweb gmn cara mengkoneksikan langsung dari server dan cara liat database'y ap gmn ?
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.
aku slah paham berarti.
Saya nyoba gagal mulu, mohon pencerahannya!
$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
bukan numpang di tret tutorial