Skip to main content
Menampilkan data dengan ajax gambar1

Menampilkan Data dengan Ajax

Menampilkan data dengan Ajax – Ajax adalah singkatan dari Asynchronous JavaScript And XML, dan pada dasarnya ajax bukanlah jenis bahasa pemrograman. Ajax merupakan salah satu teknik pemrograman web, yang menggabungkan bahasa Javascript dan XML. Tujuan dari penggunaan Ajax adalah untuk menciptakan sebuah website yang interaktif, karena pertukaran data dengan server dilakukan di belakang layar. Dimana jika ada sebuah perubahan dalam sebuah website tidak perlu secara keseluruhan membaca halaman website, hanya fokus pada bagian tertentu saja. Hal ini tentunya berpengaruh pada kecepatan, interaktivitas dan usability.

BACA:

Panduan Menampilkan Data dengan Ajax

Seringkali kita menampilkan data di sebuah tabel dengan php dan mysqli, dan banyak tutorial tentang hal ini. Nah pada tutorial ini saya ingin berbagi cara untuk menampilkan data ke dalam sebuah tabel dengan php mysqli dan ajax.

Tutorial ini saya buat sesimple mungkin dengan penjelasan di dalamnya, dan tentunya diakhir pembahasan akan saya bagikan source kodenya sebagai bahan pembelajaran. Menggunakan ajax sangat menarik terlebih untuk website agar nampak canggih, karena teknologi ajax membuat website jika mengentry sebuah data tidak perlu di refresh, dan data sudah diperbaharui.

Istilah Ajax pertama kali dikemukakan oleh Jesse James Garret, presiden dan pendiri perusahaan Adaptive Path. Menurut beliau, nama Ajax diberikan untuk memudahkan dalam berkomunikasi dengan klien daripada menyebutkan “Asynchronous Javascript + CSS + DOM + XMLHttp Request“. (Sumber: Mastering Ajax dan PHP karya Abdul Kadir, bisa didapatkan di Gramedia atau toko buku terdekat).

1. Membuat Database tbuser

Langkah awal, persiapkan sebuah database dengan nama ajax, kemudian tabel dengan nama tbuser dengan data seperti pada gambar di bawah ini:

Menampilkan data dengan ajax gambar2

2. Membuat File koneksi.php

Langkah berikutnya adalah membuat file koneksi.php yang dapat anda letakkan di directory c://xampp/htdocs/ajax/ atau c://wamp/www/ajax/ , dan copas kode dibawah ini:

<?php
	$mysqli = mysqli_connect("localhost", "root", "", "ajax");
	
	$user = array ();
	$query = mysqli_query($mysqli, "SELECT * FROM tbuser");
	while($data = mysqli_fetch_array($query)){
		$user[]= $data;
	}
	echo json_encode($user);
?>

3. Membuat File index.php

Langkah terakhir anda buat file index.php dan letakkan di folder yang sama dengan file koneksi.php, dan kemudian copas kode di bawah ini:

<html>
<head>
  <title>latihan ajax</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script type="text/javascript">
    $(function(){
      $.ajax({
        url:"koneksi.php",
        type: "GET",
        dataType: "JSON",
        success: function(data){
         for(i=0; i<data.length; i++){
            $('tbody').append('<tr><td>'+data[i].nama+'</td><td>'+data[i].email+'</td><td>'+data[i].notelp+'</td></tr>');
         }
       },
       error: function(data){
       alert("tidak dapat memproses");
     }
    });
  });
</script>
</head>
<body>
<form id="myform">
  <table border="1" cellspacing="0" width="100%">
    <thead>
     <tr><th>NAMA</th>
        <th>EMAIL</th>
        <th>NO TELEPON</th>
     </tr>
    </thead>
    <tbody></tbody>
  </table>
</form>
</body>
</html>

Setelah semuanya lengkap coba anda jalankan di browser anda, disini saya menggunakan memberi nama folder saya dengan nama ajax, dan akan nampak seperti gambar di bawah ini:

Menampilkan data dengan ajax gambar3

Menampilkan data dengan ajax gambar4

Penjelasan Singkat

Agar ajax dapat digunakan anda harus memanggil file jquery terlebih dahulu dimana anda bisa akses di jquery.com untuk mendapatkan file atau linknya. Atau anda bisa gunakan baris kode dibawah ini:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

pada pemanggilan kode diatas untuk tabel html yang berada dalam tag <tbody> akan diisi file yang berasal dari database yang dipanggil dengan ajax. File ajax akan memanggil koneksi.php dengan baris kode url:”koneksi.php” dengan method: “GET” dan tipe data yang didapatkan adalah JSON. Yang kemudian data tadi disusun di dalam perulangan for seperti pada kode di bawah ini:

url:"koneksi.php",
type: "GET",
dataType: "JSON",
success: function(data){
  for(i=0; i<data.length; i++){
   $('tbody').append('<tr><td>'+data[i].nama+'</td><td>'+data[i].email+'</td><td>'+data[i].notelp+'</td></tr>');
  }
},

Catatan Penulis

Bijaklah dalam menggunakan ajax, karena ada beberapa kelemahan penggunaan ajax karena mesin pencari seperti Google bisa jadi tidak dapat mengindeks seluruh bagian dalam halaman website anda, dan terkadang tidak semua browser mendukung Ajax. Anda bisa mendownload source codenya DISINI.

Leave a Reply

Your email address will not be published. Required fields are marked *