Pertemuan 7 SmartWeb

MODUL PERKULIAHAN
SMART WEB
JSON
Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh
07
Fakultas Ilmu Teknik Informatika W151700016 Wawan Gunawan, S.Kom., M.T.
Komputer
Abstract Kompetensi
Ketepatan memahami Penjelasan Ketepatan memahami Penjelasan
mengenai JSON mengenai JSON
Apa itu JSON?
JSON (JavaScript Object Notation) adalah sebuah format data yang digunakan untuk
pertukaran dan penyimpanan data. Kata kunci yang perlu diingat: “pertukaran &
penyimpanan data”. JSON merupakan bagian (subset) dari Javascript. JSON bisa dibaca
dengan berbagai macam bahasa pemrograman seperti C, C++, C#, Java, Javascript Perl,
Python, dan banyak lagi.
JSON bahkan mendominasi pendahulunya si XML (eXtensible Markup Language). Kalau

dibandingkan dengan XML, JSON lebih sederhana dan mudah dibaca.
XML
1. <?xml version="1.0"?>
2. <biodata>
3. <nama>Toni</nama>
4. <email>toni@email.com</email>
5. <alamat>Bandung</alamat>
6. <umur>35</umur>
7. <sosmed>
8. <fb>tonigunawan</fb>
9. <insta>toni_guna</insta>
10. </sosmed>
11. </biodata>
JSON
1. {
2. "biodata": {
3. "nama": "Toni",
4. "email": "toni@email.com",
5. "alamat": "Bandung",
6. "umur": 35,
7. "sosmed": {
8. "fb": "tonigunawan",
9. "insta": "toni_guna",
10. }
11. }
12. }
Kita dapat lihat bahwa JSON jauh lebih ringkas dan tidak memerlukan tag penutup seperti
halnya XML. Sebagai tambahan, XML tidak menggunakan sebuah array seperti yang tadi
kita pelajari. Jika pembaca sudah mengenal HTML, pembaca akan melihat kemiripan dari
penggunaan tag-nya. Meski JSON lebih singkat dan lebih mudah dari XML serta dapat
dipakai diberbagai situasi termasuk aplikasi AJAX, kita perlu memahami tipe proeyk yang
sedang dikerjakan sebelum memutuskan struktur data apa yang akan di pakai.
202 Pemrograman Smart Web

0 2 Wawan Gunawan, S.Kom., M.T.
Pusat Bahan Ajar dan eLearning
http://www.mercubuana.ac.id
Penerapan JSON dalam Pemrograman
JSON biasanya digunakan sebagai format standar untuk bertukar data antar aplikasi.
Berikut ini beberapa penerapan JSON yang pernah saya temui:
a. JSON sebagai format untuk bertukar data client dan server atau antar aplikasi.
Contoh: RESTful API;
b. JSON sebagai tempat menyimpan data, contoh: Database Mongodb;
c. JSON digunakan untuk menyimpan konfigurasi project, contoh: file composer.json
pada project PHP dan package.json pada Nodejs;
d. JSON digunakan untuk menyimpan konfigurasi dan penyimpanan data pada Hugo;
e. JSON digunakan untuk menyimpan konfigurasi project pada Nodejs;
f. JSON digunakan untuk menyimpan data menifest;
g. dan masih banyak lagi.
Struktur Dasar JSON

Coba perhatikan stuktur Object JSON ini.

Sebuah objek JSON terlihat seperti berikut ini:
1. {
2. "first_name" : "Wawan",
3. "last_name" : "Gunawan",
4. "location" : "Tangerang",
5. "online" : true,
6. "followers" : 987
7. }
JSON selalu dimulai dengan tanda kurung kurawal { dan ditutup dengan kurung }. Lalu di
dalam kurung kurawal, berisi data yang format key dan value. Jika terdapat lebih dari satu
data, maka dipisah dengan tanda koma dan di data terakhir tidak diberikan koma. Pasangan
key-value memiliki tanda titik dua diantara mereka "key" : "value". Setiap key-value dipisahkan
oleh sebuah koma, sehingga ditengah isi sebuah JSON terlihat seperti in: "key" : "value",
"key" : "value", "key": "value".
Key JSON berada di sebelah kiri tanda titik dua. Mereka perlu dibungkus oleh tanda petik
dua seperti ini: "key", dan dapat berupa string apapun yang valid. Di dalam setiap objek, key
haruslah unik. Key ini dapat memiliki spasi seperti di "first_name ", namun
menambahkannya akan membuat kita lebih repot saat akan mengaksesnya di proses ngoding
sehingga disarankan untuk menggunakna underscore seperti pada "first_name ".
Penggunaan value kita dapat memberikan tipe data apa pun, bahkan juga bisa kita isi dengan
array dan objek.
Berikut ini tipe data yang didukung oleh JSON.
1. Objek. Objek merupakan kumpulan pasangan key dan value yang diapit dengan kurung buka
dan kurung tutup (seperti penjelasan sebelumnya). Karena objek ini mencerminkan
associative array, maka direkomendasikan agar tidak menggunakan key dengan nilai sama
(key sebaiknya unik). Objek ini boleh bernilai kosong dan cukup ditulis {}
2. Array. Sederetan value yang diapit oleh kurung siku (seperti ilustrasi dibawah). Antara value
yang satu dengan yang lain dipisahkan tanda koma. array boleh bernilai kosong dan
cukup ditulis [] .
3. Number. Number berupa digit 0-9 dan ditulis apa adanya tanpa perlu menggunakan tanda
kutip. Number dapat berupa bilangan bulat maupun desimal. Untuk desimal, karakter yang

digunakan adalah titik bukan koma. Misal untuk menuliskan dua koma lima, bentuk angkanya
adalah 2.5 bukan 2,5
4. Boelan. Boelan berupa teks true dan false tanpa tanda kutip.
5. Null. Null berupa teks null dan ditulis langsung tanpa tanda kutip.
6. String. String berupa semua karakter Unicode yang artinya semua karakter yang ada di dunia
ini. String ini merupakan tipe data yang paling sering digunakan, dalam penulisannya, string
harus diapit dengan dua tanda kutip ( ” ) tidak boleh menggunakan satu tanda kutip ( ‘ ) atau
tidak menggunakan tanda kutip sama sekali.
Untuk array, ia dibuat dengan tanda kurung siku [...].
Contohnya Object dan Array seperti ini:
1. {
2. "name": "Dian",
3. "hobbies": ["Coding", "Blogging", "Drawing"]
4. }
Lalu untuk objek contohnya seperti ini:
1. {
2. "name": "Wawan Gunawan",
3. "url": "https://www.wawangunawan.web.id",
4. "rank": 1,
5. "socialmedia": {
6. "facebook" : "WawanGunawanNz",
7. "twitter" : "wawan_nz",
8. "instagram": "wawan_nz",
9. "youtube" : "Wawan Gunawan"
10. }
11. }
Perhatikan pada key socialmedia di sana kita memberikan nilainya dengan objek.

Contoh JSON dengan berbagai tipe data:
1. {
2. "title": "Panduan Lengkap Memahami JSON",
3. "author": {
4. "id" : 1,
5. "username" : "agusph",
6. "nama":"Agus Prawoto Hadi"
7. },
8. "date":{
9. "first_published" : "2018-01-10",
10. "revision" : ["2018-01-31", "2018-01-15"]
11. },
12. "allow_comment" : true,
13. "comment" : [
14. {
15. "id": 1,
16. "name" : "Fulan",
17. "date": "2018-02-01",
18. "comment" : "..."
19. },
20. {
21. "id": 2,
22. "name" : "Abdullah",
23. "date": "2018-02-05",
24. "comment" : "..."
25. }
26. ],
27. "pingback" : null
28. }
Pada contoh diatas, JSON berbentuk Objek, disamping itu di dalam JSON tersebut terdapat data
berbentuk objek sehingga disebut nested object (object di dalam objek) dan array, untuk lebih jelasnya
perhatikan gambar berikut:

Selanjutnya, berikut ini contoh JSON dengan struktur array
1. [
2. {
3. "title" : "Panduan Lengkap Memahami JSON",
4. "author": {
5. "id" : 1,
8. }
9. },
10. {
11. "title" : "Memahami JSON Pada PHP",
12. "author": {
13. "id" : 1,
16. }
17. }
18. ]
Karakter Khusus
Penting diperhatikan juga bahwa jika di dalam string terdapat karakter khusus, maka agar
karakter tersebut dapat terbaca perlu di-escape menggunakan back slash ( \ ). Adapun
karakter khusus tersebut adalah:
Karakter Escaped Nama Karakter
“ \” Tanda kutip dua
/ \/ Solidus (slash)
\ \\ Reverse solidus (Backslash)
r \r Cariage return
n \n Line feed
t \t Tabulation (tab)
b \b Backspace
f \f Form feed
Cara Produksi dan Konsumsi Data JSON

Setiap bahasa pemrograman memiliki cara yang berbeda-beda untuk memproduksi
(membuat) dan mengkonsumsi data JSON. Pada Javascript, kita bisa gunakan fungsi
JSON.stringify() untuk membuat JSON dari objek Javascript.
Contoh:
1. // objek javascript
2. var person = {
3. name: "Wawan Gunawan",
4. age: 23
5. }
6.
7. // string JSON
8. var jsonString = JSON.stringify(person);
9.
10. // maka akan menghasilkan:
11. // {"name":"Wawan Gunawan","age":23}
Pada bahasa pemrograman PHP, kita bisa menggunakan fungsi json_encode() untuk
menghasilkan JSON dari Array asosiatif dan fungsi json_decode() untuk mengubah JSON
menjadi Array.
Contoh:
1. <?php
2.
3. // data dengan array assosiatif
4. $person = [
5. "name" => "Wawan Gunawan",
6. "age" => 23
7. ];
8.
9. // membuat JSON dari array
10. echo json_encode($person);
11.
12. // maka akan menghasilkan:
13. // {"name":"Wawan Gunawan","age":23}
14. ?>
Intinya, setiap bahasa pemrograman memiliki fungsi, modul, dan library tersendiri untuk
membuat dan membaca data JSON.
Berikut daftar tutorial yang bisa dibaca:
1. Cara Serialisasi dan Deserialisasi data JSON di Java dengan menggunakan GSON
2. Cara Parsing data JSON di Python
3. Cara Parsing data JSON di PHP
4. Cara Parsing data JSON di Javascript.

Bekerja dengan Data Kompleks di JSON
JSON dapat menyimpan objek bersarang maupun array bersarang. Seperti data lain, objek
atau array ini dapat disimpan ke dalam sebuah key
Object Bersarang
Di dalam file users.json berikut, untuk empat pengguna ("sammy", "jesse", "drew",
"jamie") ada sebuah objek JSON didalam setiap value key keempatnya yang memiliki key-
nya sendiri ("username" dan "location") milik setiap user.
users.json
1. {
2. "sammy" : {
3. "username" : "SammyShark",
4. "location" : "Indian Ocean",
5. "online" : true,
7. },
8. "jesse" : {
9. "username" : "JesseOctopus",
10. "location" : "Pacific Ocean",
11. "online" : false,
13. },
14. "drew" : {
15. "username" : "DrewSquid",
16. "location" : "Atlantic Ocean",
17. "online" : false,
19. },
20. "jamie" : {
21. "username" : "JamieMantisShrimp",
22. "location" : "Pacific Ocean",
23. "online" : true,
25. }
26. }
Pada contoh di atas, tanda kurung kurawal digunakan untuk membuat objek JSON bersarang
di mana setiap username dan location masing-masing menjadi miliki keempat user. Seperti
data lainnya, koma dipakai untuk memisahkan antar elemen.
Array Bersarang
Data dapat dimasukkan ke dalam format JSON menggunakan array JavaScript sebagai
sebuah value. JavaScript menggunakan kurung siku [ ] di awal dan akhir sebuah array.
Array adalah sebuah koleksi terurutdan memiliki tipe data yang berbeda. Kita dapat

menggunakan array saat bekerja dengan banyak data yang dapat dikelompokkan, seperti
profil sosial media yang dimiliki oleh seorang user.
Setelah kita membahas tentang array bersarang, profil user untuk Sammy dapat terlihat
sebagai berikut:
user_profile.json
1. {
2. "first_name" : "Sammy",
3. "last_name" : "Shark",
4. "location" : "Ocean",
5. "websites" : [
6. {
7. "description" : "work",
8. "URL" : "https://www.digitalocean.com/"
9. },
10. {
11. "desciption" : "tutorials",
12. "URL" : "https://www.digitalocean.com/community/tutorials"
13. }
14. ],
15. "social_media" : [
16. {
17. "description" : "twitter",
18. "link" : "https://twitter.com/digitalocean"
19. },
20. {
21. "description" : "facebook",
22. "link" : "https://www.facebook.com/DigitalOceanCloudHosting"
23. },
24. {
25. "description" : "github",
26. "link" : "https://github.com/digitalocean"
27. }
28. ]
29. }
Key "websites" dan "social_media" dapat menggunakan array untuk menyimpan data
yang dimiliki oleh Sammy berupa 2 link website dan 3 profil sosial media. Kita tahu bahwa
data tersebut array karena ada kurung sikunya.

Parsing JSON
String ke PHP
Kita harus perhatikan:
1. jika objek JSON yang akan kita parsing ternyata dalam bentuk array: maka hasil
konversinya akan berupa array pula.
2. Sedangkan jika data JSON yang akan kita parsing ternyata dalam bentuk objek, maka
hasil konversinya (secara asal) adalah dalam bentuk objek (instan dari kelas stdClass)
Perhatikan contoh berikut:
1. <?php
2.
3. $dataJson = "[5, 3, 4, 2, 1]";
4.
5. $data = json_decode($dataJson);
6.
7. echo implode(" - ", $data);
8. ?>
Perintah di atas akan menghasilkan output seperti berikut:
Parsing JSON ke Objek PHP
Kita coba masuk ke contoh yang kedua: jika ternyata objek JSON yang akan kita parsing
datang dalam bentuk objek. Maka PHP (secara asal) akan mengkonversi data tersebut ke
dalam objek juga. Lebih tepatnya ke dalam instan dari stdClass.
Perhatikan contoh berikut:
1. <?php
2.
3. $json = '{
4. "nama": "Wawan Gunawan",
5. "domisili": "Tangerang",

6. "usia": 23,
7. "wni": true,
8. "hobi": [
9. "Berenang", "Berlari", "Bertamasya"
10. ]
11. }';
12.
13. $mahasiswa = json_decode($json);
14.
15. echo "Nama: {$mahasiswa->nama} <br>";
16. echo "Domisili: {$mahasiswa->domisili} <br>";
17.
18. echo "Hobi: " . implode(", ", $mahasiswa->hobi);
19.
20. ?>
Jika program di atas dijalankan, maka akan menghasilkan output seperti berikut:
Melakukan Perulangan JSON

Misalkan anda memiliki string JSON sebagai berikut:
1. <?php
2.
3. $listMahasiswaJSON = '[
4. { "nama": "Nurul Huda" },
5. { "nama": "Renza Ilhami Risqi" },
6. { "nama": "Taufan Aji" },
7. { "nama": "Rahmad Dwi Oktanto" }
8. ]';
9.
10. ?>
Lalu anda ingin menampilkan nama dari setiap data di atas. Caranya sangat sederhana sekali:
1. Pertama anda parsing dulu JSON tersebut ke dalam array PHP

2. Lalu lakukan perulangan dengan foreach atau metode perulangan yang lainnya

Perhatikan kode program berikut:
1. <?php
2.
3. $listMahasiswaJSON = '[
4. { "nama": "Nurul Huda" },
5. { "nama": "Renza Ilhami Risqi" },
6. { "nama": "Taufan Aji" },
7. { "nama": "Rahmad Dwi Oktanto" }
8. ]';
9.
10. $listMahasiswa = json_decode($listMahasiswaJSON);
11.
12. foreach ($listMahasiswa as $key => $mahasiswa) {
13. echo "{$key}. Nama: {$mahasiswa->nama} <br>";
14. }
15.
16. ?>
Output:
Latihan: Menampilkan Berita Dari NewsAPI.org

Telah kita singgung di atas bahwa JSON biasa digunakan sebagai standar pertukaran data
dari 2 aplikasi yang berbeda. Bahkan jika keduanya berbeda bahasa pemrograman sekalipun.
Sebagai gambaran, kita akan coba menampilkan data berita yang disediakan oleh
newsapi.org. Data yang disediakan berupa JSON. Kita akan menampilkannya dengan PHP.
Langkah-langkah: c645582f42f2405c93dac6112844552d
1. Daftar akun newsapi.org untuk mendapatkan API_KEY

2. Perhatikan struktur data JSON dari URL berikut:
3. https://newsapi.org/v2/everything?q=bitcoin}&language=en&from=2020-09-
01&sortBy=publishedAt&apiKey=API_KEY
Jangan lupa ganti API_KEY dengan api key akun anda.
4. Berikut ini adalah penampakan struktur datanya:

5. Deklarasikan variabel-variabel:
1. <?php
2.
3. $kataKunci = "bitcoin";
4. $from = "2020-09-01";
5. $sortBy = "publishedAt";
6. $apiKey = ""; /* <-- Silakan register di newsapi.org untuk mendapatkan API_KEY */
7. $language = "en";
8. $alamatAPI = "https://newsapi.org/v2/everything?
q={$kataKunci}&language={$language}&from={$from}&sortBy={$sortBy}&apiKey={$apiKey}"
;
9.
6. Ambil data dengan fungsi file_get_contents lalu parsing dengan perintah

json_decode:
1. # ambil data json dari $alamatAPI
2. $data = file_get_contents($alamatAPI);
3. # parsing variabel $data ke dalam array
4. $dataBerita = json_decode($data);
7. Tampilkan data dengan melakukan perulangan foreach:
1. if ($dataBerita->status === "ok") {
2. # tampilkan menggunakan perulangan
3. foreach ($dataBerita->articles as $berita) {
4. echo "<h3><a href='{$berita->url}'>{$berita->title}</a></h3>";
5.
6. if ($berita->urlToImage) {
7. echo "<img style='width: 10rem' src='{$berita->urlToImage}'>";
8. }
9.
10. echo "<p>{$berita->description}</p>";
11. echo "<hr>";
12. }
13. }
14. ?>

Dari langkah-langkah di atas, berikut adalah hasil yang saya dapatkan:
Dalam PHP: kita bisa mem-parsing JSON dengan perintah json_decode dan kita bisa
membuat JSON dengan perintah json_encode.

Daftar Pustaka
https://simplehtmldom.sourceforge.io/
https://simplehtmldom.sourceforge.io/manual.htm
https://simplehtmldom.sourceforge.io/manual_api.htm
https://stackoverflow.com/questions/14456621/simple-html-dom-getting-all-attributes-from-a-
tag
https://www.codementor.io/@wang90925/top-10-best-usage-examples-of-php-simple-html-
dom-parser-i8ik76e16
https://stackoverflow.com/questions/7124823/file-get-html-displays-fatal-error-call-to-
undefined-function
Diunduh pada tanggal 21 Maret 2020 jam 09.38 AM

https://www.yudana.id/membuat-dan-parsing-xml-dengan-php-dan-mysql/
https://terusbelajar.wordpress.com/2010/10/31/teknik-sederhana-parsing-xml-dengan-php-dan-
jquery/
https://www.petanikode.com/json-pemula/
https://www.json.org/json-en.html
https://jagowebdev.com/memahami-json/


Pertemuan 7 SmartWeb

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Pertemuan 7 SmartWeb

Diunggah oleh

Hak Cipta:

Format Tersedia

MODUL PERKULIAHAN

Fakultas Program Studi Tatap Muka Kode MK Disusun Oleh

JSON bahkan mendominasi pendahulunya si XML (eXtensible Markup Language). Kalau

202 Pemrograman Smart Web

Berikut ini beberapa penerapan JSON yang pernah saya temui:

Struktur Dasar JSON

202 Pemrograman Smart Web

Berikut ini tipe data yang didukung oleh JSON.

202 Pemrograman Smart Web

Untuk array, ia dibuat dengan tanda kurung siku [...].

Contohnya Object dan Array seperti ini:

Lalu untuk objek contohnya seperti ini:

202 Pemrograman Smart Web

202 Pemrograman Smart Web

Karakter Escaped Nama Karakter

“ \” Tanda kutip dua

\ \\ Reverse solidus (Backslash)

Cara Produksi dan Konsumsi Data JSON

202 Pemrograman Smart Web

Berikut daftar tutorial yang bisa dibaca:

202 Pemrograman Smart Web

202 Pemrograman Smart Web

202 Pemrograman Smart Web

Kita harus perhatikan:

Perhatikan contoh berikut:

Perintah di atas akan menghasilkan output seperti berikut:

Parsing JSON ke Objek PHP

Perhatikan contoh berikut:

202 Pemrograman Smart Web

Melakukan Perulangan JSON

1. Pertama anda parsing dulu JSON tersebut ke dalam array PHP

202 Pemrograman Smart Web

Latihan: Menampilkan Berita Dari NewsAPI.org

1. Daftar akun newsapi.org untuk mendapatkan API_KEY

Jangan lupa ganti API_KEY dengan api key akun anda.

4. Berikut ini adalah penampakan struktur datanya:

202 Pemrograman Smart Web

6. Ambil data dengan fungsi file_get_contents lalu parsing dengan perintah

7. Tampilkan data dengan melakukan perulangan foreach:

202 Pemrograman Smart Web

202 Pemrograman Smart Web

Diunduh pada tanggal 21 Maret 2020 jam 09.38 AM

202 Pemrograman Smart Web

Anda mungkin juga menyukai