Cara menggunakan JQUERY.GETJSON pada JavaScript

Salam, bertemu kembali dalam tutorial jquery mempelajari belajar jquery, yang mudah-mudahan bermanfaat untuk Anda. Pada pertemuan sebelumnya kita telah mempelajari bagaimana menggunakan AJAX dengan JQuery, apa itu AJAX dan bagaimana menggunakan JQuery, silahkan baca kembali di artikel [link].

Kali ini kita akan menggunakan JSON yang digenerate oleh PHP. Mungkin sebelum masuk ke dalam materi, masih ada beberapa di antara Anda yang bertanya-tanya mengapa JSON? Baiklah kita mengulang dahulu pelajaran sebelumnya.

Terdapat banyak sekali format data, yang mampu mengintegrasikan antara layout HTML dengan Bahasa Pemrogaman PHP dengan konsep AJAX. Jika dahulu kala, pemrogaman PHP itu yang menggenerate halaman HTML, sekarang sudah berganti zaman menjadi HTML lah yang merequest data ke server via perantara JQuery AJAX yang dimana PHP berkomunikasi langsung menerima request lalu memprosesnya bekerja sama dengan MySQL dan menghasilkan array database lalu mengirimkan hasil requestnya itu ke halaman HTML tidak langsung menggenerate menjadi HTML namun via perantara JQuery AJAX. Yang terjadi adalah, tidak ada refresh page, atau reloading time.

Contoh pemrogaman PHP model lama yakni php berkomunikasi dengan mysql lalu menggenerate hasil ke dalam html adalah, ketika ANda melakukan komentar pada salah satu website kesayangan Anda misalkan ilmuwebsite.com, lalu Anda memberikan komentar di bawah, ada form input nama, email, website, komentar, ketika ANda mengisi semuanya, lalu mensubmitnya maka form html di kirimkan menuju halaman PHP, dan PHP memprosesnya bekerja sama dengan MySQL dan begitu seterusnya, lalu setelah selesai maka PHP akan meredirect kembali ke halaman sebelumnya, yakni pengisian komentar. Ini adalah pemrograman model lama.

Dengan JSON AJAX semuanya menjadi berbeda. Contoh implementasinya adalah, ketika Anda mengetikkan status di wall/timeline Anda. Status langsung muncul begitu saja, ataupun ketika Anda menghapus komentar seseorang dari wall Anda, komentarnya hilang begitu saja, tanpa ada reloading time, maupun refresh page, semuanya dilakukan dibelakang layar, yang Anda lihat adalah komentar di hapus secara live event. Tidak ada waktu jeda. Sebetulnya selain JSON ada beberapa jenis format data yang bisa digunakan dalam AJAX ini, yakni ada XML, dan CSV

Oke jelas ya? JSON AJAX ini sudah lama digunakan oleh Facebook, Twitter, Blogger Backendnya, lalu banyak lagi, termasuk situs-situs lokal seperti mindtalk.com dan lain-lain.

Nah pertanyaannya adalah, bagaimana kita membuat hal yang seperti itu? Atau paling tidak melakukan CRUD (Create Read Update dan Delete) menggunakan JQuery AJAX JSON. Itu akan kita bahas dalam tutorial berikutnya. Kali ini penulis akan mengenalkan dulu bagaimana penggunaan GET JSON pada JQUERY yang meminta request ke sebuah halaman PHP itu betul-betul memberikan pengalaman dalam programming yang berbeda. Tidak mustahil suatu hari Anda mengaplikasikannya ke dalam sebuah aplikasi buatan Anda sendiri. Yang kemudian Anda terkenal karenanya, dan menghasilkan keuntungan dari itu. Saya doakan untuk Anda semua, insyaAllah, Aamiin.

Sebelum kita mulai ke topik pembahasan, anggaplah kita akan membuat sebuah aplikasi yang berhubungan dengan database penjualan suatu produk. Misalkan produk kesehatan, yakni herbal. Lebih spesifik, kita akan mengurusi bagian database pembelinya/transaksi.

Kita buat terlebih dahulu databasenya, dan struktur table-tablenya. Ada 8 field yang akan digunakan, yakni : id, nama_pembeli, alamat_pembeli, kelurahan, kecamatan, kota, provinsi, kodepos.

CREATE TABLE IF NOT EXISTS `tbl_pembeli` (
`id` int(75) NOT NULL AUTO_INCREMENT,
`nama_pembeli` varchar(135) NOT NULL,
`alamat_pembeli` varchar(225) NOT NULL,
`kelurahan` varchar(75) NOT NULL,
`kecamatan` varchar(75) NOT NULL,
`kota` varchar(75) NOT NULL,
`provinsi` varchar(75) NOT NULL,
`kodepos` varchar(15) NOT NULL,
PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

Kemudian silahkan isi terlebih dahulu dengan beberapa data pembeli, isi sesuai dengan yang Anda inginkan. Di sini saya mengisikan dengan 5 data pembeli.

Selanjutnya adalah membuat sebuah halaman yang nantinya akan digunakan untuk mengambil data dari tbl_pembeli via GetJson yang merequest ke suatu URL halaman PHP. Jadi tidak langsung menggunakan PHP yang berintegrasi dengan mySQL lalu menggenerate datanya ke dalam bentuk HTML, melainkan dihandle oleh GetJson pada JQUERY. Berikut adalah scriptnya.

Silahkan klik button di bawah ini untuk melihat demonya

Lihat Demo

File index.html

<!DOCTYPE html>
<html>
<head>
<title>JSON JQUERY - PHP</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
	/* untuk letak url silahkan di sesuaikan dengan letak script di folder htdocs Anda */
	$.getJSON('http://localhost/iwlabz/jquery/json2.php', { get_param: 'value' }, function(data) {
	    $.each(data, function(index, element) {		
			/* mengisikan table dari hasil json */
			// alert(element.id);
			$('#tabledata').find('tbody')
				.append($('<tr>')
						.append(
							'<td>'+element.nama_pembeli+'</td>'+
							'<td>'+element.alamat_pembeli+'</td>'+
							'<td>'+element.kelurahan+'</td>'+
							'<td>'+element.kecamatan+'</td>'+
							'<td>'+element.kota+'</td>'+
							'<td>'+element.provinsi+'</td>'+
							'<td>'+element.kodepos+'</td>'
						)
				);
	    });
	});		
});
</script>
</head>
<body>
	<h2>Demo JQUERY GetJSON Ambil data dari JSON PHP</h2>
	<p>Halaman ini mendemokan bagaimana GetJSON JQUERY mampu mempersing data JSON yang digenerate oleh PHP JSON ENCODE</p>

	<table border="1" width="60%" id="tabledata">
		<thead>
			<tr><th>Nama</th><th>ALamat</th><th>Kelurahan</th><th>Kecamatan</th><th>Kota</th><th>Provinsi</th><th>Kodepos</th></tr>
		</thead>
		<tbody>
		</tbody>
	</table>
	<br />
	<a href="">Kembali ke tutorial</a>
</body>
</html>

Kemudian Selanjutnya adalah file konfigurasi databasenya.

File config.php

<?php
	/* 
	Script ini ditulis oleh Loka Dwiartara, 
	Website : www.ilmuwebsite.com 
	Email : 
	*/
	$host = "localhost";
	$user = "root";
	$password = "";
	$database = "penjualan";
	$connect = mysql_connect($host, $user, $password);
	mysql_select_db($database,$connect);
?>

Dan yang terakhir adalah file untuk mengambil database menggunakan PHP yang pada akhirnya digenerate menjadi format data json.

File json.php

<?php
	/* 
	Script ini ditulis oleh Loka Dwiartara, 
	Website : www.ilmuwebsite.com 
	Email : 
	*/
	require_once "config.php";
	$query = "select * from tbl_pembeli";
	$rquery = mysql_query($query);
	while($result = mysql_fetch_assoc($rquery)){
		$arrayjson[] = $result;
	}
	
	/* 	bagian ini digunakan untuk meng-encode ke dalam JSON 
		agar bisa digunakan oleh getjson maupun ajax JQUERY */
	echo json_encode($arrayjson);
	

?>

Silahkan klik button di bawah ini untuk melihat demonya

Lihat Demo

Sekian, untuk bagian pertama ini belum akan penulis jelaskan. Di bagian 2 akan dijelaskan secara detil, ditambah kasus bagaimana menginsert data menggunakan GetJSON.