Tutorial Sebelumnya:
Tutorial REST API #2: REST dan HTTP
Kali ini kita akan masuk ke topik yang cukup penting dan menjadi bagian dari REST API yaitu JSON (JavaScript Object Notation).
Pada tutorial sebelumnya kita sudah meilustrasikan sebuah REST API pada aplikasi traveloka. Sekarang kita membahas bagaimana data dipertukarkan pada API tersebut antara satu aplikasi dengan aplikasi lainnya.
Apa itu JSON?
Javascript Object Notation (JSON) adalah sebuah format standar yang menggunakan tulisan yang dapat dibaca oleh manusia untuk pertukaran data, yang di dalamnya berisi pasangan antara key dan value.
Sumber: https://en.wikipedia.org/wiki/JSON
JSON Secara Detail
- Format pertukaran data tekstual yang sangat ringan
- Sintaksnya sangat sederhana dan jelas (dibanding XML)
- Dapat digunakan pada beragam bahasa pemrograman
- Tiap bahasa pemrograman memiliki cara sendiri untuk berinteraksi dengan JSON
- JSON dibuat berdasarkan format object pada JavaScript
- JSON juga digunakan untuk file konfigurasi
- Tipe file JSON memiliki ekstensi .json
- Format JSON dibuat dan diusulkan oleh Doublas Crockford
Contoh JSON sederhana
{
"nama" : "Arie"
"umur" : 25,
"alamat" : "Payakumbuh"
}
Perhatikan contoh JSON di atas, Nama, umur dan alamat disebut sebagai key. Key pada JSON selalu dibungkus menggunakan “” (kutip dua).
Sedangkan Arie, 25 dan Payakumbuh disebut sebagai Value. Value pada JSON memiliki cara penulisan yang berbeda tergantung tipe data pada value tersebut.
Sebagai contoh pada JSON di atas terdapat tipe data string dan number, tipe data string ditulis dengan menggunkan “” (kutip dua), tipe data number ditulis dengan tidak menggunakan kutip dua.
Tipe Data pada JSON
- Boolean – true/false
- Array – [“value1”, “value2”, …]
- String – teks, dibungkus menggunkan “” (kutip dua)
- Object – { “key” : “value “}
- Number – interger/float
- Null – null
Membuat dan Mengakses JSON
Membuat JSON dengan PHP
Untuk membuat JSON di PHP maupun bahasa pemrograman lain, tidak disarankan untuk membuatnya secara manual, karena berisiko terjadi error, gunakan fungsi bawaan dari php yaitu json_encode()
.
Contoh penggunaan fungsi json_encode()
dengan mengambil data dari database sebagai berikut:
Buat file mahasiswa.php pada folder htdocs
$conn = mysqli_connect('localhost', 'root', '', 'db_belajar');
$query = mysqli_query($conn, 'SELECT * FROM mahasiswa');
while ($row = mysqli_fetch_assoc($query)) {
$mahasiswa[] = $row;
}
$mahasiswa = json_encode($mahasiswa);
echo $mahasiswa;
Buka hasilnya pada browser http://localhost/belajar/mahasiswa.php
Mengakses JSON dengan PHP
Untuk mengakses data JSON di PHP, dapat menggunakan fungsi file_get_contents
. Fungsi ini untuk mengambil suatu data dari file json bahkan dari url luar yang diberikan pada fungsi tersebut. Kemudian kita lakukan decode pada data tersebut menggunakan fungsi json_decode
untuk mengubah data JSON menjadi bentuk array agar dapat diolah disisi client.
Cara Mengambil Data JSON dengan PHP, pada kasus ini gunakan data dari file mahasiswa.php yang sudah kita buat di atas, caranya sebagai berikut:
Buat file getMahasiswa.php pada folder htdocs
$data = file_get_contents('http://localhost/belajar/mahasiswa.php');
$mahasiswa = json_decode($data, true);
echo "<table border='1' cellspacing='0' cellpadding='5'
<tr>
<td>ID</td>
<td>NIM</td>
<td>NAMA MAHASISWA</td>
<td>ALAMAT</td>
<td>TELP</td>
</tr>";
foreach ($mahasiswa as $val) {
echo "<tr>
<td>".$val['id']."</td>
<td>".$val['nim']."</td>
<td>".$val['nama']."</td>
<td>".$val['alamat']."</td>
<td>".$val['telp']."</td>
</tr>";
}
Buka hasilnya pada browser http://localhost/belajar/getMahasiswa.php
Mengakses JSON dengan JavaScript
Cara Mengambil Data JSON dengan Ajax jQuery, kita menggunakan data json dari file mahasiswa.php yang kita buat di atas:
Buat file getMahasiswaAjax.html pada folder htdocs
<!DOCTYPE html>
<html>
<head>
<title>Mengakses JSON dengan JavaScript - Ayo Ngoding</title>
</head>
<body>
<h3>Cara Mengambil Data JSON dengan Ajax jQuery</h3>
<table id="tabelMahasiswa" border="1" cellspacing="0" cellpadding="5">
<thead>
<tr>
<td>ID</td>
<td>NIM</td>
<td>NAMA</td>
<td>ALAMAT</td>
<td>TELP</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
<script src="http://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script type="text/javascript">
$.getJSON("http://localhost/belajar/mahasiswa.php", function(result){
console.log(result);
$.each(result, function(i, data){
$('#tabelMahasiswa tbody').append('<tr>\
<td>'+data.id+'</td>\
<td>'+data.nim+'</td>\
<td>'+data.nama+'</td>\
<td>'+data.alamat+'</td>\
<td>'+data.telp+'</td>\
</tr>')
})
});
</script>
</body>
</html>
Buka hasilnya pada browser http://localhost/belajar/getMahasiswaAjax.html
Mengakses JSON di Luar Domain
Bagamana jika data JSON yang kita gunakan berapa di luar domain yang kita punya. Ada aturan yang disebuat dengan Same-Origin Policy.
Same-Origin Policy
- Adalah kebijakan browser untuk mengkases dan menampilkan data/script/document dari tempat lain diluar domainnya.
- Membuat kita tidak bisa mengakses data (json) dari luar domain/website kita.
Permasalahan ini dapat diatasi dengan cara melakukan konfigurasi CORS pada server kita.
CORS (Cross Origin Resource Sharing)
- Mekanisme yang membuat kita dapat memngkases sebuah resourde (data, script, document) dari domain lain.
- Caranya adalah dengan membuat server memperbolehkan adanya akses data dari luar domain.
- Membuat perintah Accsess-Control-Allow-Origin
- Membuat file .htaccess
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "*"
</IfModule>
Sekian tutorial tentang Apa itu JSON dan cara mengakses JSON dengan PHP dan JavaScript. Pada tutorial selanjutnya kita akan coba menggunakan API dari luar yang disebut juga Public API.
Semoga tutorial ini bisa bermanfaat untuk Anda.
Tutorial Senjutnya:
Tutorial REST API #4: Apa itu Public API?
Leave a Reply