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 🙂
Terus Belajar 
anu, mas, json bisa di pasang di wap gak? 😐
@ tiko :
sepertinya bisa,,karna JSON itu gk lain gk bukan javascript juga..:)
Nulis coding nya pake apa y mas biar bagus?
@ 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”..
terima kasih untuk artikelnya mas.
saya mau tanya ni mas.
klo bikin page seperti ini, kira2 gimana caranya ya…?? butuh waktu berapa lama kira2??
http://www.toyota.co.id/product/?page=compare
Trims sebelumnya
@ 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 😉
yang kedua. yg menampilkan data2 perbandingan tiap mobil. pernah bikin mas??
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…
wah pas nemu blog ini,lagi belajar jquery ni .
hmm mo tanya,, kalo misal hasil yg pengen dikirim berupa “response” gimana tu mas
@ def :
berupa “response” ? ya emang konsep ajax itu ada yg “request” juga pasti ada yg “response” mas…
cuma mungkin tipe “response” yg berbeda seperti pake JSON, XML, ato yg lainya mas bisa baca di artikel ini
http://docs.jquery.com/Specifying_the_Data_Type_for_AJAX_Requests
moga bisa ngebantu 🙂
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){
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
bisa mas,,biasa emang klu JSON sm XML main di Cross Domain,,ngambil data dari web service lain…
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..
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..
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??
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…
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..:)
Hehehe… oke sip
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..
@n3f0 :
wew,,trims alur nya mas 🙂
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
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
@djibond :
jquery.min.js nya taru dmn emang nya ??
samaain letak folder nya mas..
@I Nyoman Martin adiputra : terima kasih banyak mas,sudah bisa.ternyata cuma salah naro doang.
sekali lagi terima kasih ya mas
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
@tyas : nilai $b drmn ya ?? inputan atau keluaran ? Kalau inputan, pastiin di input variable udah bentuk array, pas di ajax and request file php nya, lakuin si $b seperti handle array biasa.
$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 😀
@tyas : bisa kirim email aja ke email gmail saya di tuts+dot+adiputra+et+gmail+dot+com
tutorial yang benar2 mantap!!!
Mantap tutorialnya, ane izin coba gan
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 ?
@bhapetz : mas bisa kok pake index.html nya. Tapi kalau proses.php nya itu mesti bahasa server mas. Mas bisa pakai JSP, ASP, atau mungkin bahasa server lainnya.
mas,semisal bikin inputan trs datanya masuk dijson gimana caranya ya mas?maturnuwun
@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 🙂
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
Terima Kasih..
Tuts nya berguna bgd..
ada yang tau judul buku yang membahas tentang json gak??? share dsini donk??? bantu ya???
wah demo hilang 😦
oh ilang ya, wah sorry gw gak ada backup om. Liat kode nye aja.
ijin download project Dasar AJAX dengan jQuery,JSON dan PHP nya mas..
salam programer, ari 🙂
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
coba kodenya masukin di jsfiddle biar enak liatnya bro
mas gmna caranya isi textfield dari database dengan ajax jquery? ntar ada nama alamat jadi ke isi otomatis
mas gmna caranya isi textfield dari database dengan ajax jquery? ntar ada nama dan alamat ke isi otomatis
kalau index.php nya sya ganti ama index.html bisa gx ?
cara buat table yang di repeater gimana ya mas saya masih nyoba tapi agak susah kalo nambah indexnya
pake handlebars js coba
Mas… link downloadnya koq udah ga aktif lagi ya… Bisa minta link alternatif untuk download scriptnya…
Terima kasih artikelnya, terutama soal empat parameter yg sering digunakan yaitu Parameter type, Parameter URL, Parameter DATA, dan Parameter SUCCESS.
Kunjungi web kampus saya : Atma Luhur
Kunjungi web saya : Rismawati
mohon maaf sudah tidak di update lagi