MODUL PRAKTIKUM REKAYASA WEB n Modul 6 Javascript Object Notation (JSON) Laboratorium Teknik Informatika Universitas Pasundan
Konten Modul : 1. Teori JSON 2. Latihan JSON Tujuan Praktikum : 1. Praktikan diharapkan mampu memahami JSON 2. Praktikan diharapkan mampu menggunakan JSON TIM DOSEN IF 1
Bagian 1 Teori 1. Javascript Object Notation (JSON) Format pertukaran data tekstual yang sangat ringan, mudah dibaca dan ditulis oleh manusia, serta mudah diterjemahkan dan dibuat (generate) oleh komputer. Format ini dibuat berdasarkan bagian dari Bahasa Pemprograman JavaScript, Standar ECMA-262 Edisi ke-3 - Desember 1999. JSON merupakan format teks yang tidak bergantung pada bahasa pemprograman apapun karena menggunakan gaya bahasa yang umum digunakan oleh programmer keluarga C termasuk C, C++, C#, Java, JavaScript, Perl, Python dll. Format JSON dibuat dan diusulkan oleh Douglas Crockford. Oleh karena sifat-sifat tersebut, menjadikan JSON ideal sebagai bahasa pertukaran-data. JSON terbuat dari dua struktur : a. Kumpulan pasangan nama/nilai. Pada beberapa bahasa, hal ini dinyatakan sebagai objek (object), rekaman (record), struktur (struct), kamus (dictionary), tabel hash (hash table), daftar berkunci (keyed list), atau associative array. b. Daftar nilai terurutkan (an ordered list of values). Pada kebanyakan bahasa, hal ini dinyatakan sebagai larik (array), vektor (vector), daftar (list), atau urutan (sequence). Jangan salah pengertian mengenatio JSON, karena JSON bukan : Format dokumen Bahasa markup Bahasa pemrograman 2. Alasan menggunakan JSON Struktur standar untuk pertukaran data Mudah dipahami, dimanipulasi dan di-generate Sintaksnya sangat sederhana dan jelas (dibanding XML) Didukung oleh banyak bahasa pemrograman dan teknologi JSON vs XML JSON lebih ringan dan cepat dari XML JSON menggunakan tipe Object, sedangkan XML adalah string type-less dan harus di parse saat runtime JSON Tidak terpaku sintaks JSON Dapat langsung diakses menggunakan Javascript XML tidak mendukung tipe data array TIM DOSEN IF 2
Gambar 1 JSON Gambar 2 XML 3. Tipe Data JSON Number integer / float String teks / unicode, dibungkus menggunakan Boolean true / false Null - null Object { key : value } TIM DOSEN IF 3
Array [ value1, value2, ] Gambar 3 Penulisan JSON Gambar 4 Penulisan Array Gambar 5 Tipe data pada JSON TIM DOSEN IF 4
4. Contoh Penggunaan Tipe Data JSON a. Number/Angka b. String, Boolean, null Gambar 6 Penggunaan Number 3. Array Gambar 7 Penggunaan String, Boolean, Null Gambar 8 Penggunaan Array TIM DOSEN IF 5
Bagian 2 Latihan 1. Silahkan download project yang ada di portal rekweb, lalu pindahkan ke dalam folder htdocs lalu beri nama JSON_nrp. 2. Ketikan source code dibawah ini di file index.php Pada line 5 perintah file_get_content digunakan untuk mengambil file pizza.json yang ada di direktori json. Kemudian untuk line 7 digunakan untuk memasukan file json tadi ke dalam standar encoding yaitu utf-8. Untuk line 9 adalh merubah file json kedalam array assosiative dengan menggunakan perintah json_decode. Selanjutnya mulai dari lain 12 sampai 22 itu adalah perintah untuk menampilkan data berdasarkan kategori yang dipilih dengan menggunakan foreach untuk melooping datanya. TIM DOSEN IF 6
3. Ketikan source di bawah ini di file index.php mulai line 53 File index.php diatas adalah file yang mengambil data json yang ada pada file pizza.json di folder json dengan menggunakan php. Sekarang yang kedua akan membuat latihan yang mengakses data json dengan javascript yang ada di file script.js pada folder js. 4. Silahkan ketikan source dibawah ini pada file index2.php 5. Ketikan source berikut ini di file script.js yang ada di folder js TIM DOSEN IF 7
Perintah getjson digunakan untuk mengambil file pizza.json yang ada di direktori json. Selanjutnya data json tersebut disimpan ke dalam variable menu selanjutnya di looping menggunakan perintah $.each dan data tersebut di append atau ditambahkan ke dalam tag html yang mempunyai id = daftar menu. Untuk menampilkan data berdasarkan kategori digunakan perintha $.grep yang berfungsi untuk memfilter data berdasarkan kategori yang dipilih atau diklik pada tag html yang mempunyai class = nav-link. 6. Jika sudah silahkan jalankan di browser dan pastikan tidak ada error untuk menjalankan file index.php dan index2.php. hasil yang akan di dapat adalah seperti gambar berikut ini TIM DOSEN IF 8
TIM DOSEN IF 9