Dasar AJAX dengan jQuery,JSON dan PHP

Setelah kemarin sempet posting dasar JSON, kini saya coba buat tutor sederhana bagaimana kita mengakses data pada database menggunakan jQuery, JSON, PHP dengan kata lain AJAX. Konsep AJAX sebelumnya mesti kita pahami minimal mengerti kerja dari teknologi web satu ini yang kemungkinan masih terus berkembang. Bagi yang belum memahami, teman bisa liat gambar menariknya pada artikel ini.

Saya sendiri kalau koding di AJAX manual belum pernah karena ribet namun secara konsep ngerti dan paham,,tinggal latihan aja kali ya, tapi inget saran senior lewat chatting kiri-kanan kalau bahasa pemrograman itu hanya tool yang memudahkan kita ngedevelop program. Penguasaan salah satu tool itu mesti dimiliki,,cari tool yang mudah dan sesuai dengan program yg akan kita develop. Ya sudah,,saya belajar AJAX di jQuery sajaโ€ฆups,,malah curhat..:)

Baik sekarang kita mulai,

Awalnya saya membuat data yang berisi informasi teman dalam tipe file .json. Berikut adalah codenya :


[
	{"nama":"adiputra","hobby":"main game"},
	{"nama":"nano","hobby":"jalan-jalan"},
	{"nama":"ade","hobby":"baca buku"},
	{"nama":"husni","hobby":"denger radio"}
]

Saya simpan dengan nama data.json. sintax apa tuh ? klu belum paham dengan JSON,bisa liat diartikel saya sebelumnya.

Lalu saya buat file dengan nama json_jquery.html yang berisi code untuk nge-load file data.json. berikut adalah codenya :

<html>
<head>
 <title>json + jquery</title>
 <script type='text/javascript' src='../../../js/jquery-1.4.2.min.js'></script>
 <script type='text/javascript'>
   $(function(){
     $("#form_json").submit(function(){
		
		$.ajax({
			url:"data.json",
			dataType:"json",
			success:function(data){
				teman = "<ol>";
				$.each(data, function(i,n){
					teman = teman + "<li>" + n["nama"] + " suka : " + n["hobby"] + "</li>";
				});
				teman = teman + "</ol>";
				$(".result_json").append(teman);
			}
		});
		
		return false;
	 });
   });
 </script>
</head>
<body>
 Untuk menampilkan data json, klik tombol disamping...
 <form id='form_json'>
  <input type='submit' class='tbl_ok' value='Lihat' />
 </form>
 
 <div class='result_json'>
  
 </div>
</body>
</html>

Oke,,simpan dan kita pelan-pelan mulai pahami code sederhana itu :

$("#form_json").submit(function(){

Adalah code yang mendefinisikan bahwa bila form dengan id form_json itu di submit (event submit) maka return kan false agar tidak ngeload sehingga biar si AJAX yang bekerja nge-load data. Ini bahasa sederhana saya kalau mendefinisikan AJAX..:)

lihat, return bernilai false kan..

Lalu setelah si form di submit sebelum return-nya false, kita mendefinisikan code AJAX

$.ajax({
			url:"data.json",
			dataType:"json",
			success:function(data){
				teman = "<ol>";
				$.each(data, function(i,n){
					teman = teman + "<li>" + n["nama"] + " suka : " + n["hobby"] + "</li>";
				});
				teman = teman + "</ol>";
				$(".result_json").append(teman);
			}
		});

Secara sederhana apabila kita mendefinisikan AJAX pada jQuery seperti ini :

$.ajax({
    type: 'GET',
    url: 'getDetails.php',
    data: { id: 142 },
    success: function(data) { // code fungsi callback };
});

Sebenarnya tidak hanya empat parameter, banyak, namun yg sering digunakan seperti itu dan sesuaikan dengan program yang ingin kita buat.

  • Parameter type : mendifinisikan method HTTP request dari AJAX. Ada 2 tipe GET dan POST dan keduanya memiliki kelebihan masing-masing dan lagi-lagi kita mesti sesuaikan dengan program. Kalau tidak didefinisikan, defaultnya adalah GET.
  • Parameter URL : alamat dari data yang akan kita kirim. Kalau saya menyebutnya file query ke dbnya.
  • Parameter DATA : adalah ya data yang akan dikirim ke db, misalnya diatas disebutkan bahwa id=142. Berarti pada file getDetails.php ada perintah mendapatkan variable id ($id=$_GET[id]) .
  • Parameter SUCCESS : nah ini yang penting juga,,jadi apabila si AJAX telah selesai ngambil data di server, lakukan respons dan aksi. Biasa disebut fungsi callback. Kalau pada sampe AJAX sederhana saya hanya menampilkan data dalam bentuk tag (order list).

Parameter yang lainnya bisa dibaca di alamat ini : http://api.jquery.com/jQuery.ajax/

Untuk Demo sampe AJAX pertama ini bisa di liat disini : [ demo ]

Sample yang pertama hanya ngeload data dari file data.json. Lalu bagaiman ngeload data dari database ?

Berikut ini sample keduanya,,awalnya saya buat databasenya terlebih dahulu :

CREATE TABLE  `teman` (
 `id_teman` INT( 11 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
 `nama` VARCHAR( 50 ) NOT NULL ,
 `hobby` TEXT NOT NULL
) ENGINE = MYISAM ;

INSERT INTO 
	`blog_tes`.`teman` (
		`id_teman` ,
		`nama` ,
		`hobby`
	)
	VALUES 
	(NULL , 'adiputra', 'main game'), 
	(NULL , 'nano', 'jalan-jalan'),
	(NULL , 'ade', 'baca buku'),
	(NULL , 'husni', 'denger radio');

Setelah itu saya buat file index.php yang sama persis dengan sample pertama file json_jquery.html :

<html>
<head>
 <title>json + jquery</title>
 <script type='text/javascript' src='../../../js/jquery-1.4.2.min.js'></script>
 <script type='text/javascript'>
   $(document).ready(function(){
	 $("#loading").hide();
   });
   
   $(function(){
     $("#form_json").submit(function(){
		
		$("#loading").show();
		$("#loading").fadeIn(500).html("<img src='loading.gif' /> Loading data...");
		
		$.ajax({
			url:"proses.php",
			dataType:"json",
			success:function(data){
				teman = "<ol>";
				$.each(data, function(i,n){
					teman = teman + "<li>" + n["nama"] + " suka : " + n["hobby"] + "</li>";
				});
				teman = teman + "</ol>";
				$(".result_json").append(teman);
				
				$("#loading").hide();
			}
		});
		
		return false;
	 });
   });
 </script>
</head>
<body>
 Untuk menampilkan data json dari database, klik tombol disamping...
 <form id='form_json'>
  <input type='submit' class='tbl_ok' value='Lihat' />
 </form>
 
 <div id='loading'></div>
 <div class='result_json'>
 </div>
</body>
</html>

Lalu saya buat proses.php dimana file proses.php ini akan menjadi value dari parameter URL. Berikut codenya :

<?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());
	# akhir dari code koneksi ke db
	
	# query ke db
	$sql = "SELECT * FROM teman";
	# jalankan query
	$req_db = mysql_query($sql);
	
	# ambil hasil query, simpan dalam bentuk array.
	while ($data = mysql_fetch_array($req_db)){
		$array_data[] = array(
			"nama"=>$data['nama'],
			"hobby"=>$data['hobby']
		);
	}
	# encode menjadi bentuk data JSON
	echo(json_encode($array_data));
	
?>

Isi file proses.php hanya settingan DB dan query ke DB, lalu liat datanya diparse ke bentuk JSON dengan perintah json_encode().

Untuk melihat demonya di alamat ini : [ demo ]

download code lengkap scriptnya disini : [ download ]

Sampai ini, sederhana bukan.
AJAX jQuery banyak, jadi kita mesti sering-sering latihan kasus. Nanti kalau ada tutor lainnya saya coba share lagi.
Moga ada manfaatnya ๐Ÿ™‚

Iklan

45 thoughts on “Dasar AJAX dengan jQuery,JSON dan PHP

  1. @ neru :
    sy biasa pake notepad++ mas,,tpi klu ngedevelop yg udh berat,,sy pake eclipse ntuk php..

    selain tu bnyk..ada netbeans,,codelobster,,dll..

    di google search aja dgn keyword “editor php”..

  2. @ satriyo :
    sy masih newbie mas,,:D
    1. bikin page-nya yg ../product/?page=compare ??
    2. ato ajax saat user memilih mobil dan membandingkannya ??

    #1 : klu itu sepertinya di index.php ada kondisi apabila page=compare,,panggil page compare,,apabila page=home,,panggil page home..

    #2 : konsep Ajax dan JS-nya mesti manteb mas,,klu manteb mungkin beberapa jam jg slesai ๐Ÿ˜‰

  3. blum mas,,tp logika dpt,,

    liat pas kita “select vehicle” lalu eventnya kita gunakan onchange,,kita panggil type dari vehicle yg di-select..(bisa ke database yg tentu pake ajax,,ato main kondisi if-else aja,,tanpa ajax)

    trus pas kita select type-nya,,kondisi onchange juga,,kita suruh lagi si ajax panggil data dari type yg kita pilih (ambil data dari database)..jika ada datanya,,tinggal tampilkan aja…

    tu cuma teori mas,,sy blum coba,,tapi sepertinya logika teorinya sperti itu…dari teori itu seenggaknya kita udah bisa alur codenya..

    moga bisa memperjelas mas…

  4. o begitu, i see i see, hohohoh maklum lagi belajar, soalnya masi bingung kemaren nemu kyk gini
    success:function(response){

    nah punya mas kan gini , hohoho

    success:function(data){

  5. Menarik mas materi nya…
    Btw saya mau tanya mohon share nya…
    kalau jSon itu kan bisa di buat AJAX Cross Domain ya mas?
    Nah kira kira implementasi seperti apa yg cocok untuk auto refresh ajax cross domain menggunakan jSon seperti API Twitter (widget)..

    Saya masih bingung apakah menggunakan metode proxy atau YQL atau mungkin ada lagi?

    Thank’s, Regards

  6. kalau jSon itu kan bisa di buat AJAX Cross Domain ya mas?

    bisa mas,,biasa emang klu JSON sm XML main di Cross Domain,,ngambil data dari web service lain…

    Nah kira kira implementasi seperti apa yg cocok untuk auto refresh ajax cross domain menggunakan jSon seperti API Twitter (widget)..

    implementasinya buat apa ya ?? sy jg bingung,,:)
    kadang twitter n FB dipasang di blog ato website gunanya agar pengunjung kita bisa mengikuti status-status (yg bermanfaat dan pasti gk lebay ๐Ÿ™‚ )

    implementasi yg lebih bagus lagi,,(menurut sy) ada di seesmic.com..coba mas buka deh,,mungkin mesti pelajari juga OAuth..

    Saya masih bingung apakah menggunakan metode proxy atau YQL atau mungkin ada lagi?

    ada lagi mas pake JSONP,,
    sy baru nyoba pake metode proxy,,
    YQL baru mempelajari sebulan ini..:)
    JSONP baru tahu seminggu lalu..:)
    jd kurang tau persis kelemahan n kelebihannya..

    CMIIW

    banyak tugas kuliah mas ๐Ÿ˜ฆ
    sy konsen ke kuliah dulu,,tanggung 1 tahun lg insyAllah..

  7. Ya memang mirip sama XML cmn mungkin format nya aja yg agak sedikit berbeda, berarti implementasi dari article ini bisa saya gunakan sebagai referensi AJAX Cross Domain? sama gk mas klo untuk cross domain dgn tuts di article ini??

    implementasinya buat apa ya ?? sy jg bingung,,:)
    kadang twitter n FB dipasang di blog ato website gunanya agar pengunjung kita bisa mengikuti status-status (yg bermanfaat dan pasti gk lebay ๐Ÿ™‚ )

    implementasi yg lebih bagus lagi,,(menurut sy) ada di seesmic.com..coba mas buka deh,,mungkin mesti pelajari juga OAuth..

    Maksud implementasi kyk di Twitter nya adalah mau bikin sebuah widget yg bisa di embed di web lain (dgn beda domain) tp datanya saya ambil dari server saya, pastinya dong kalo pake ajax biasa gk bisa.
    Mungkin jSon adalah salah satu solusi.

    Waah kalo oAuth saya masih bingung, terlalu banyak referensi nya…

    Thanks atas share nya…

  8. berarti implementasi dari article ini bisa saya gunakan sebagai referensi AJAX Cross Domain? sama gk mas klo untuk cross domain dgn tuts di article ini??

    sama aja sie secara pengambilan data nya mah,,
    tp tuts ini cuma ngejelasin gemana cara ambil data server kita sendiri dengan ajax (pintu rumah kita sendiri),,kalu cross domain(pintu rumah orang lain),,ya mesti ada teknik lain (teknik membuka pintu rumah orang lain) ntuk ambil data server lain (cross domain),,,baru stelah data didapat dari server lain(bisa langsung curi barang dari rumah orang lalu langsung jual ke orang lain, atau kita simpan dulu ke rumah kita baru dijual ke orang lain),,cara pengambilannya gmn ? ya tutorial ini cara pengambilannya ๐Ÿ™‚

    owh,,embed code ke website kita maksudnya,,bisa ja mas,,sederhananya tinggal buat fungsi untuk ngambil data dari tersebut,,

    oce2,,sama2 mas,,maaf klu kurang pas jawabannya,,sy msh novice..:)

  9. Mantap gan. cara kerja facebook kan seperti itu juga. Ane lagi eksperimen dengan facebook nih. Ane salut tuh sama facebook. Dia memanfaatkan request GET dengan umpan balik berupa JSON sebagai triger Update content dan chat di facebook. Salut banget. Jadi ngk ada yang namanya pake settimeout ane rasa untuk sisi server nya ngk pake PHP deh om. Cozz request nya bisa lama banget. kalau php 60 detik request kek gitu bakalan ERROR. Dari developer nya ane liat ada pake python n perl mungkin ini ya disisi server sebagai umpan balik nya. N setelah data terbaru didapatkan koneksi ke server diputus lalu diulang melakukan request $_GET lagi. coba cek dengan firebug. liat request XHR nya disitu. Mantap dah facebook gan. hehe..

  10. mas kok pas saya coba itu ga bisa ya?
    error nya page not found 404 localhost/js/js/jquery-1.4.2.min.js
    mohon bantuanhnya mas.terima kasih

  11. mas kok pas saya coba ga keluar hasilnya ya mas?
    saya liat di firebug, error nya itu page not found 404 localhost/js/jquery-1.4.2.min.js
    terimakasih mas sebelumnya

  12. mas mau tanya kalau misalnya saya punya skrip gini

    function DataDetail(id){

    $.ajax({
    type:”POST”,
    url:”nilai_panitia/detailSAW.php”,
    data: “id=”+id,
    success: function (data){
    $(“#info”).html(data);
    $(“#info”).dialog(
    {
    height: 500,width: 500,modal:true,
    buttons: {
    Close: function() {
    $( this ).dialog(‘close’);
    }
    }
    });
    }
    });
    }

    <a href="#" value="View Detail" class="link" onclick="DataDetail()”>Detail

    nilai $b ini isinya array, caranya gmana mas?? makasih

  13. $b itu inputan –> onclik dataDetail($b disini).. Boleh dicontohin yang diinput variabel bentuk array inisialisasinya gmana?

    $b= json_encode($aa);
    echo $b;

    $b itu sebelumnya ak keluarin jadi array pake json bisa tampil tapi ketika ak jadiin inputan di jquery, jquerynya jd ga mau jalan. truss si $aa itu isi chekbox terpilih. Nah ketika si $aa nya yang ak jadiin input dia malah nampilin di dialog jquery function array(){ [native code] }

    Boleh minta ym/emailnya mas biar lebih mudah nanya2nya ๐Ÿ˜€

  14. biar gak usah di panggil di server gimana caranya ya ?
    jadi itu bukan index.php, jadinya index.html.. jadi pas buka page htmlnya di brower, keluar deh. bisa gak ya ?

  15. @sholeh : mas ambil value dari masing2 inputan, lalu buat variable object javascript saja.
    misalkan,

    var email = $('#email').val(); 
    var name = $('#name').val(); 
    var arr_data = []; 
    var obj_data = {};
    obj_data.email = email;
    obj_data.name = name;
    arr_data.push(obj_data); 
    

    kirim var arr_data ke PHP, lalu tangkap saja dengan json_decode($_POST[‘arr_data’]) agar keluaran berbentuk array kasih false di parameter kedua json_decode($_POST[‘arr_data’], false).

    kurang lebih begitu yang saya pernah kerjain mas ๐Ÿ™‚

  16. makasih mas kalo boleh tanya lagi ๐Ÿ˜€
    maunya data tadi mau disimpen di data.json gmna mas ๐Ÿ˜€
    soalnya mau manggil data.json dari inputan saya kayak tutor diatas ๐Ÿ˜€ makasih

  17. mas mau tanya semisal post data dengan parameter ID lewat selected option tampil di tabel sampai sekarang data berhasil tampil namun terdapat kendala ketika memilih data yang lain malah nambah baris alias data yang sebelumnya tampil seolah tidak ngerefresh mohon bantuannya ๐Ÿ™‚ apa yang harus saya tambahkan

Silahkan Komentar...

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s