Berikut Tutorial Cara menampilkan data dari database mysql menggunakan PHP, AJAX & JSON
Pertama2 Buat Database & tabel,
nama database=blog_tes,
tabel=teman
tabel=teman
Anggap data pada tabel teman ini diatas 5000 row
Kemudian buat file connect.php untuk konfigurasi ke database mysql,
<?php
# koneksi ke db
$h = "localhost";
$u = "root";
$p = "";
$db = "blog_tes";
mysql_connect($h,$u,$p) or die('error : '.mysql_error());
mysql_select_db($db) or die('error : '.mysql_error());
?>
# koneksi ke db
$h = "localhost";
$u = "root";
$p = "";
$db = "blog_tes";
mysql_connect($h,$u,$p) or die('error : '.mysql_error());
mysql_select_db($db) or die('error : '.mysql_error());
?>
kemudian buat file utama nya, index.php,
<html>
<head>
<title>json + jquery</title>
<script type='text/javascript' src='jquery-1.4.js'></script>
<script type='text/javascript'>
function data_teman(no){
//alert(no);
$.ajax({
url:"proses_json.php",
type:"POST",
cache:false,
dataType:'json',
data:{n:no},
success: function(data){
$.each(data,function(key,val) {
$('#nama_'+val.id).text(val.nama);
$('#hobi_'+val.id).text(val.hoby);
}); // end each
}// end success
}); // end ajax
}
</script>
</head>
<body>
<h2>Data yang tampil dari proses JSON</h2>
<?php
include"connect.php";
$sql="select count(id_teman) from teman";
$query=mysql_query($sql) or die ($sql);
list($totdata)=mysql_fetch_row($query);
?>
<table width="200" border="1">
<tr>
<td>ID</td>
<td>Nama</td>
<td>Hobby</td>
</tr>
<?php for ($i=1;$i<=$totdata;$i++){?>
<tr>
<td><?php echo $i ?></td>
<td id="nama_<?php echo $i?>"> </td>
<td id="hobi_<?php echo $i?>"> </td>
</tr>
<script>
data_teman('<?php echo $i?>');
</script>
<?php } ?>
</table>
</body>
</html>
<head>
<title>json + jquery</title>
<script type='text/javascript' src='jquery-1.4.js'></script>
<script type='text/javascript'>
function data_teman(no){
//alert(no);
$.ajax({
url:"proses_json.php",
type:"POST",
cache:false,
dataType:'json',
data:{n:no},
success: function(data){
$.each(data,function(key,val) {
$('#nama_'+val.id).text(val.nama);
$('#hobi_'+val.id).text(val.hoby);
}); // end each
}// end success
}); // end ajax
}
</script>
</head>
<body>
<h2>Data yang tampil dari proses JSON</h2>
<?php
include"connect.php";
$sql="select count(id_teman) from teman";
$query=mysql_query($sql) or die ($sql);
list($totdata)=mysql_fetch_row($query);
?>
<table width="200" border="1">
<tr>
<td>ID</td>
<td>Nama</td>
<td>Hobby</td>
</tr>
<?php for ($i=1;$i<=$totdata;$i++){?>
<tr>
<td><?php echo $i ?></td>
<td id="nama_<?php echo $i?>"> </td>
<td id="hobi_<?php echo $i?>"> </td>
</tr>
<script>
data_teman('<?php echo $i?>');
</script>
<?php } ?>
</table>
</body>
</html>
Pada script "<script type='text/javascript' src='jquery-1.4.js'></script>",, jangan lupa sertakan file jquery-1.4.js satu folder dengan file index php.
kemudian ini yg paling penting
disini file untuk mengeksekusi query adalah file proses_json.php
bikin file proses_json.php kemudian isi kode dibawah ini :
<?php
include"connect.php";
$sql="select id_teman as id,nama as nama, hobby as hoby from teman";
$res=mysql_query($sql) or die ($sql.' # '.mysql_error());
$result = array();
while($row=mysql_fetch_object($res)){
array_push($result, $row);
}
echo json_encode($result);
?>
include"connect.php";
$sql="select id_teman as id,nama as nama, hobby as hoby from teman";
$res=mysql_query($sql) or die ($sql.' # '.mysql_error());
$result = array();
while($row=mysql_fetch_object($res)){
array_push($result, $row);
}
echo json_encode($result);
?>
save ke 3 file diatas dalam 1 folder
-index.php
-connect.php
-proses_json.php
Materi ini telah saya revisi, sebelum nya semoga bermanfaat.
0 komentar:
Posting Komentar