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