Selasa, 02 Juli 2013

Cara Terbaru Menampilkan Database Mysql Menggunakan PHP, AJAX & JSON

PHP & AJAX, Menampilkan Data Mysql menggunakan AJAX &JSON

Sebagian dari anda programmer PHP mungkin sudah biasa menampilkan data dari database mysql di website menggunakan fungsi2 bawaan php, tetapi bagaimana jika database yang akan di tampilkan tersebut berasal dari query-query berat yang membutuhkan loading tinggi, tentu nya harus ada aplikasi atau metode yang bekerja di belakang layar, sehingga pekerjaan tidak langsung dieksekusi disisi client

Berikut Tutorial Cara menampilkan data dari database mysql menggunakan PHP, AJAX & JSON
Bagi yang belum paham apa itu AjaxJSON silahkan baca di sendiri  disini (maklum ane praktisi bukan dosen,, hehe)

Pertama2 Buat Database & tabel,
pada kasus ini
nama database=blog_tes,
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());
?>

kemudian buat file utama nya, index.php,,

isi cooding dibawah pada 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?>">&nbsp;</td>
    <td id="hobi_<?php echo $i?>">&nbsp;</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);
?>

save ke 3 file diatas dalam 1 folder
-index.php
-connect.php
-proses_json.php

Materi ini telah saya revisi, sebelum nya semoga bermanfaat, thanks for visit my blog : )

5 komentar:

  1. jangan lupa di include jquery nya

    BalasHapus
  2. ada gan
    script type='text/javascript' src='jquery-1.4.js'
    sama script dibawahnya kn jquery+ajax

    BalasHapus
  3. mybettingbettings.com: YouTube - Videoodl.cc
    Videoslots.com. All sites. No downloads. youtube to mp3 downloader Play Now. Live Chat. Mobile App. Android. Live Chat. Mobile App. Android. Live Chat. Mobile App.

    BalasHapus