MATERI

Pengembangan Web Service

JavaScript Object Notation (JSON)

Oleh
Latifah Iriani, M. Kom, CSA
2023
Deskripsi Materi

Materi ini membahas mengenai JSON .

Capaian Pembelajaran

Setelah mempelajari materi ini, mahasiswa diharapkan:

1. Mampu memahami membuat JSON.

2. Mampu memahami bekerja dengan JSON menggunakan PHP.

3. Mampu memahami bekerja dengan JSON menggunakan Javascript.

Sub Pokok Bahasan:

1. JSON.

2. Bekerja dengan JSON menggunakan PHP.

3. Bekerja dengan JSON menggunakan Javascript.

 MATERI

1. Pendahuluan
REST API dapat digunakan untuk memudahkan koneksi antara berbagai aplikasi. REST
API memungkinkan berbagai aplikasi untuk berkomunikasi dan saling bertukar data melalui
permintaan HTTP yang terstandarisasi. REST API juga menggunakan format data standar seperti
JSON atau XML untuk memudahkan pertukaran data antara klien dan server. Dalam REST API,
data dikirimkan dalam format JSON atau XML dalam body permintaan atau respons HTTP.
Format data ini dapat dengan mudah dibaca dan dipahami oleh klien dan server yang berbeda,
bahkan jika mereka menggunakan bahasa pemrograman yang berbeda. Namun dalam pertemuan
ini kita hanya membahas format JSON.

2. JSON (JavaScript Object Notation)

JSON (JavaScript Object Notation) pertama kali dibuat dan diusulkan oleh Douglas
Crockford pada tahun 2001. Douglas Crockford adalah seorang pakar dalam bahasa pemrograman
JavaScript dan merupakan salah satu pengembang di perusahaan Yahoo! saat itu. Ia menciptakan
JSON sebagai alternatif untuk format data XML yang saat itu banyak digunakan dalam pertukaran
data di web.
JSON awalnya dibuat sebagai bagian dari JavaScript, tetapi kemudian berkembang
menjadi format data yang independen dan mendukung banyak bahasa pemrograman. JSON
didesain untuk mempermudah pengembang dalam membuat aplikasi web yang menggunakan
teknologi REST API, karena format data ini ringan, mudah dibaca dan ditulis, serta dapat
diimplementasikan pada berbagai platform dan bahasa pemrograman.
JSON sering digunakan dalam pertukaran data antara klien dan server dalam REST API.
Format JSON terdiri dari pasangan "nama-nilai" atau "key-value pairs" yang diatur dalam struktur
data yang mirip dengan objek atau array dalam bahasa pemrograman. JSON memiliki beberapa
keuntungan yang membuatnya menjadi format data yang populer di kalangan pengembang
aplikasi.
Pertama, JSON memiliki struktur data yang sederhana dan mudah dipahami oleh manusia.
Ini membuatnya lebih mudah untuk dibaca dan ditulis, bahkan tanpa menggunakan alat khusus
seperti XML. Selain itu, struktur data JSON yang mirip dengan objek dan array dalam bahasa
pemrograman membuatnya lebih mudah dipahami oleh pengembang aplikasi.
Kedua, JSON memiliki ukuran file yang lebih kecil dibandingkan dengan format data lain
seperti XML. Ini membuatnya lebih cepat dan efisien dalam mentransfer data melalui jaringan.

Gambar 1. File JSON Gambar 2. File XML

Dari gambar tersebut dapat dilihat bahwa pada file XML terdapat redudansi / pengulangan
karakter, sehingga untuk data yang sama, file XML memiliki ukuran file yang lebih besar
dibanding dengan file XML.
Ketiga, JSON mendukung banyak bahasa pemrograman dan mudah diimplementasikan
pada berbagai platform. Ini memungkinkan pengembang aplikasi untuk menggunakan format data
yang sama dalam berbagai bahasa pemrograman, memudahkan proses integrasi dan mempercepat
pengembangan aplikasi.
Oleh karena itu, JSON merupakan pilihan yang populer di kalangan pengembang aplikasi,
terutama dalam pengembangan aplikasi web yang menggunakan teknologi REST API.

3. Objek pada JavaScript

Objek pada JavaScript adalah sebuah entitas yang terdiri dari properti (atau disebut juga dengan
key) dan nilai (atau disebut juga dengan value). Properti pada objek bisa berupa tipe data apapun,
termasuk objek lain, array, atau fungsi. Setiap properti memiliki nama unik, yang disebut sebagai
kunci atau key, yang digunakan untuk mengakses nilai properti tersebut. Objek pada JavaScript
dapat didefinisikan menggunakan sintaksis objek literal, seperti contoh berikut:
 Gambar 3. Sintaksis Objek Literal

4. Penulisan JSON
JSON (JavaScript Object Notation) adalah sebuah format pertukaran data yang digunakan untuk
mengirim data antara server dan klien. JSON ditulis dalam format teks dan memiliki sintaks yang
mirip dengan objek JavaScript.

Untuk menuliskan JSON, kita dapat menggunakan format key-value pairs. Setiap key diikuti oleh
tanda titik dua (:) dan diikuti oleh nilai (value) dari key tersebut. Jika terdapat lebih dari satu key-
value pair, setiap pasangan dipisahkan oleh tanda koma (,). JSON selalu dimulai dengan kurung
kurawal ({) dan diakhiri dengan kurung kurawal (}).

Berikut adalah contoh JSON yang menunjukkan informasi tentang seorang pengguna:

Gambar 4. JSON yang menunjukkan informasi tentang seorang pengguna

Dalam contoh di atas, terdapat tiga key-value pairs: "nama", "umur", dan "pekerjaan". "nama" dan
"pekerjaan" memiliki nilai bertipe string, sedangkan "umur" memiliki nilai bertipe integer.
JSON juga dapat memiliki nested structure, yang berarti sebuah key dapat memiliki nilai dalam
bentuk objek atau array. Berikut adalah contoh JSON yang menunjukkan informasi tentang dua
pengguna :

[
{
"nama": "Latifah Iriani",
"umur": 30,
"nim": "06523111",
"lulus": true,
"hoby": [
"baca buku",
"coding"
],
"pembimbing": {
"pembimbing1": "Andi Sugandi",
"pembimbing2": "Rahmat Agung"
}
},
{
"nama": "Ridho Surya Kusuma",
"umur": 25,
"nim": "06523112",
"lulus": true,
"hoby": [
"baca buku",
"coding"
],
"pembimbing": {
"pembimbing1": "Joko Supriyanto",
"pembimbing2": "Rahmat Agung"
}
}
]
JSON di atas adalah sebuah array yang terdiri dari dua objek. Setiap objek menyimpan
informasi tentang seorang mahasiswa, yaitu nama, umur, nomor induk mahasiswa (nim), status
kelulusan, hobi, dan nama pembimbing.
Untuk membaca JSON tersebut secara detail, berikut ini adalah penjelasan untuk setiap
pasangan key-value pairs dalam setiap objek:
Objek 1:
 "nama": "Latifah Iriani" => key "nama" dengan value "Latifah Iriani"
  "umur": 30 => key "umur" dengan value 30 (berupa number)
 "nim": "06523111" => key "nim" dengan value "06523111" (berupa string)
 "lulus": true => key "lulus" dengan value true (berupa boolean)
 "hoby": ["baca buku", "coding"] => key "hoby" dengan value array yang berisi dua string:
"baca buku" dan "coding"
 "pembimbing": {"pembimbing1": "Andi Sugandi", "pembimbing2": "Rahmat Agung"} =>
key "pembimbing" dengan value objek yang berisi dua key-value pairs: "pembimbing1"
dengan value "Andi Sugandi" dan "pembimbing2" dengan value "Rahmat Agung"
Objek 2:
 "nama": "Ridho Surya Kusuma" => key "nama" dengan value "Ridho Surya Kusuma"
 "umur": 25 => key "umur" dengan value 25 (berupa number)
 "nim": "06523112" => key "nim" dengan value "06523112" (berupa string)
 "lulus": true => key "lulus" dengan value true (berupa boolean)
 "hoby": ["baca buku", "coding"] => key "hoby" dengan value array yang berisi dua string:
"baca buku" dan "coding"
 "pembimbing": {"pembimbing1": "Joko Supriyanto", "pembimbing2": "Rahmat Agung"}
=> key "pembimbing" dengan value objek yang berisi dua key-value pairs: "pembimbing1"
dengan value "Joko Supriyanto" dan "pembimbing2" dengan value "Rahmat Agung"
Dengan informasi di atas, kita dapat memproses data JSON tersebut di dalam program dengan
memanfaatkan key-value pairs yang ada dalam setiap objek. Penting untuk diingat bahwa JSON
harus ditulis dengan benar untuk dapat dibaca dan diinterpretasikan dengan benar oleh mesin. Oleh
karena itu, pastikan untuk memeriksa sintaks dan format JSON sebelum mengirim data antara
server dan klien.
JSON (JavaScript Object Notation) memiliki beberapa tipe data untuk nilai (value) yang
dapat disimpan dalam key-value pairs:
 String: nilai (value) bertipe string diapit oleh tanda kutip ("") atau tanda petik tunggal ('').
Contoh: "John", '30', "New York"
 Number: nilai (value) bertipe number dapat berupa bilangan bulat atau desimal. Contoh:
30, 3.14
 Boolean: nilai (value) bertipe boolean dapat bernilai true atau false. Contoh: true, false
 Array: nilai (value) bertipe array diapit oleh kurung siku ([]) dan dapat berisi nilai (value)
 apapun, termasuk objek dan array. Contoh: [1, 2, 3], ["John", 30, true]
 Objek: nilai (value) bertipe objek diapit oleh kurung kurawal ({}) dan terdiri dari pasangan
key-value pairs. Contoh: {"name": "John", "age": 30}
 null: nilai (value) null digunakan untuk menyatakan bahwa tidak ada nilai yang diberikan
untuk sebuah key. Contoh: null
Dalam JSON, tipe data string dan number harus ditulis tanpa tanda kutip atau tanda petik jika
digunakan sebagai nilai (value) pada key-value pairs. Sedangkan tipe data boolean dan null ditulis
seperti halnya dalam bahasa pemrograman, yaitu true, false, dan null.
Penting untuk memperhatikan tipe data dari nilai (value) dalam JSON saat memproses data di
dalam program, karena tipe data yang salah dapat menyebabkan kesalahan dalam proses parsing
dan pengolahan data.

5. Bekerja dengan JSON menggunakan PHP

Untuk bekerja dengan JSON menggunakan PHP, terdapat beberapa fungsi bawaan pada PHP
yang dapat digunakan, di antaranya:
a. json_encode()
Fungsi ini digunakan untuk mengubah data dalam bentuk array atau objek pada PHP
menjadi format JSON. Contoh penggunaan:
<?php
$mahasiswa = [
[
"nama" => "Latifah Iriani",
"nim" => "06523111",
"email" => "latifahiriani@sibermu.ac.id"
],
[
"nama" => "Ridho Surya",
"nim" => "06523112",
"email" => "ridhosurya@sibermu.ac.id"
]
];

$data = json_encode($mahasiswa);
echo $data;

Kode tersebut merupakan contoh penggunaan fungsi json_encode() pada PHP untuk
mengubah data dalam bentuk array menjadi format JSON. Dalam kode tersebut, terdapat
variabel $mahasiswa yang berisi array asosiatif multidimensi, di mana setiap elemen array
tersebut merepresentasikan data mahasiswa dengan properti nama, nim, dan email.
Kemudian, fungsi json_encode() digunakan untuk mengubah data tersebut menjadi format
JSON. Hasil dari penggunaan fungsi tersebut akan disimpan pada variabel $data. Terakhir,
hasil konversi tersebut ditampilkan pada layar menggunakan fungsi echo. Output yang
dihasilkan dari kode tersebut adalah sebagai berikut:

Gambar 5. Output penggunaan json_encode

Berikut ini merupakan contoh penggunaan json_encode pada Data Objects (PDO):
<?php
$dbh = new PDO('mysql:host=localhost;dbname=pabd', 'root', '');
$db = $dbh->prepare('SELECT * FROM mahasiswa');
$db->execute();
$mahasiswa = $db->fetchAll(PDO::FETCH_ASSOC);

$data = json_encode($mahasiswa);
echo $data;

Kode tersebut adalah contoh penggunaan PHP Data Objects (PDO) untuk
mengakses database MySQL dan mengambil data dari tabel mahasiswa. Kemudian, data
yang diambil tersebut diubah ke format JSON menggunakan fungsi json_encode() dan
ditampilkan pada layar menggunakan fungsi echo.
Pertama-tama, terdapat kode untuk membuat koneksi ke database menggunakan
PDO:
$dbh = new PDO('mysql:host=localhost;dbname=pabd', 'root', '');

Kode tersebut akan membuat koneksi ke database MySQL pada localhost dengan
nama database pabd. Parameter kedua dan ketiga pada fungsi PDO merupakan username
dan password yang digunakan untuk mengakses database.
 Selanjutnya, terdapat kode untuk mengeksekusi query SELECT dan mengambil
hasilnya:
$db = $dbh->prepare('SELECT * FROM mahasiswa');
$db->execute();
$mahasiswa = $db->fetchAll(PDO::FETCH_ASSOC);

Pada kode tersebut, fungsi prepare() digunakan untuk mempersiapkan query SQL
yang akan dieksekusi. Kemudian, fungsi execute() digunakan untuk mengeksekusi query
tersebut.
Hasil query tersebut kemudian diambil menggunakan fungsi fetchAll() dengan
mode PDO::FETCH_ASSOC, yang akan mengembalikan hasil query dalam bentuk array
asosiatif.
Terakhir, data yang diambil tersebut diubah ke format JSON menggunakan fungsi
json_encode():
$data = json_encode($mahasiswa);
Hasil konversi tersebut kemudian ditampilkan pada layar menggunakan fungsi
echo:
echo $data;
Output yang dihasilkan dari kode tersebut adalah data mahasiswa dalam format
JSON yang diambil dari database MySQL. Bentuk outputnya akan tergantung pada isi data
pada tabel mahasiswa. Berikut contoh keluaran dari database yang dimiliki oleh penulis :

Gambar 6. Output penggunaan json_encode pada PDO

b. json_decode()
Fungsi ini digunakan untuk mengubah data dalam format JSON menjadi array atau
objek pada PHP. Contoh penggunaan :
<?php
$data = file_get_contents('coba.json');
$mahasiswa = json_decode($data, true);

var_dump($mahasiswa);
 echo "<br>";
echo $mahasiswa[0]["pembimbing"]["pembimbing1"];

Kode tersebut adalah contoh penggunaan fungsi file_get_contents() dan

json_decode() pada PHP untuk membaca dan mengolah data JSON dari file eksternal.
Pertama-tama, kode tersebut membaca isi dari file coba.json menggunakan fungsi
file_get_contents():
$data = file_get_contents('coba.json');
Isi dari file tersebut kemudian diubah ke format PHP menggunakan fungsi
json_decode() dengan parameter kedua yang diatur menjadi true:
$mahasiswa = json_decode($data, true);
Parameter kedua yang diatur menjadi true pada fungsi json_decode() akan
menghasilkan array asosiatif daripada objek. Kemudian, hasil konversi tersebut
ditampilkan pada layar menggunakan fungsi var_dump():
var_dump($mahasiswa);
Fungsi tersebut akan menampilkan isi dari variabel $mahasiswa pada layar.

Gambar 7. Output penggunaan json_decode

Setelah itu, kode tersebut menampilkan salah satu nilai properti dari array asosiatif
$mahasiswa:

Gambar 8. Output nilai properti

kode akan menampilkan isi dari variabel $mahasiswa dan nilai dari properti
"pembimbing1" dari elemen pertama pada array $mahasiswa yaitu Andi Sugandi.

6. Bekerja dengan JSON menggunakan Javascript

JSON (JavaScript Object Notation) adalah format data yang banyak digunakan di aplikasi
web modern. Format ini ringan, mudah dibaca dan ditulis, serta mudah diolah dengan JavaScript.
Berikut adalah contoh penggunaan JSON dengan JavaScript:
 Parsing JSON
Anda dapat mem-parsing string JSON menjadi objek JavaScript menggunakan fungsi
JSON.parse(). Berikut adalah contoh penggunaannya:

 Mengubah Objek JavaScript menjadi JSON

Anda dapat mengubah objek JavaScript menjadi string JSON menggunakan fungsi
JSON.stringify(). Berikut adalah contoh penggunaannya:

Berikut contoh penggunaan JSON pada javascript yang diberi nama latihan3.html:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Latihan JSON</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-
nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM="
crossorigin="anonymous"></script>
<script src="https://code.jquery.com/jquery-3.6.3.js" integrity="sha256-
nQLuAZGRRcILA+6dMBOvcRh5Pe310sBpanc6+QBmyVM="
 crossorigin="anonymous"></script>
<script src="script.js"></script>
</body>
</html>

Kode HTML tersebut merupakan sebuah template halaman web sederhana yang terdiri dari
dua tag <script> dan satu tag <title>. Tag <title> digunakan untuk menampilkan judul halaman
web. Sedangkan tag <script> digunakan untuk memuat dua file JavaScript yang berasal dari server
jQuery, dan satu file JavaScript yang bernama script.js yang ada di direktori yang sama dengan
file HTML.
Kode ini menunjukkan bahwa halaman web tersebut akan memuat tiga file JavaScript, dan
file script.js akan berisi kode JavaScript yang akan dieksekusi di sisi klien.
Kemudian kita buat file script.js. adapun isi file script.js adalah sebagai berikut :
let mahasiswa = {
nama: "Latifah Iriani",
nim: "06523111",
email: "latifahiriani@sibermu.ac.id"
}

console.log(JSON.stringify(mahasiswa));

Pertama, kita membuat sebuah variabel mahasiswa yang berisi data mahasiswa seperti
nama, nim, dan email.
Kemudian, kita menggunakan method JSON.stringify() untuk mengonversi objek
mahasiswa menjadi sebuah string JSON.
JSON.stringify() adalah method pada objek global JSON yang digunakan untuk
mengonversi objek JavaScript menjadi string JSON.
Terakhir, kita mencetak hasil konversi tersebut ke konsol menggunakan console.log().

Gambar 9. Output penggunaan JSON.stringify()

Berikut ini adalah sebuah contoh lengkap dari penggunaan XMLHttpRequest (XHR) pada
JavaScript untuk mengambil data JSON dari sebuah file 'coba.json':
let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
let mahasiswa = JSON.parse(this.responseText);
console.log(mahasiswa);
}
}

Pertama-tama, Anda membuat objek XMLHttpRequest baru menggunakan sintaks new

XMLHttpRequest(). Kemudian, Anda menambahkan sebuah event listener pada objek tersebut
menggunakan xhr.onreadystatechange, seperti yang sudah dijelaskan sebelumnya.
Setelah event listener ditambahkan, Anda membuka koneksi ke file 'coba.json'
menggunakan xhr.open() dengan metode GET dan mode asinkronus. Kemudian, permintaan
dikirimkan ke server menggunakan xhr.send().
Ketika server memberikan respon, event listener yang sudah ditambahkan tadi akan
dipanggil. Kita memeriksa apakah permintaan berhasil dilakukan dan respon yang diterima sudah
dalam format JSON menggunakan xhr.readyState == 4 && xhr.status == 200.
Jika respon diterima dengan sukses, data JSON yang diterima akan diambil menggunakan
this.responseText, kemudian diubah menjadi objek JavaScript menggunakan JSON.parse(). Objek
JavaScript tersebut kemudian dicetak ke konsol menggunakan console.log().

Gambar 10. Output penggunaan JSON.parse()