Rekayasa Web sandhikagalih@unpas.ac.id Pertemuan 8
JavaScript Object Notation
JSON Format pertukaran data tekstual yang sangat ringan Digunakan untuk beragam bahasa pemrograman Tidak terpaku pada bahasa pemrograman tertentu Tiap bahasa pemrograman memiliki cara tersendiri untuk berinteraksi dengan JSON Dibuat berdasarkan format Object pada javascript Tipe file JSON memiliki ekstensi.json Format JSON dibuat dan diusulkan oleh Douglas Crockford
JSON bukan.. Format dokumen Bahasa markup Bahasa pemrograman
Kenapa 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 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
JSON vs. XML JSON XML
Tipe Data pada JSON Number integer / float String teks / unicode, dibungkus menggunakan Boolean true / false Null - null Object { key : value } Array [ value1, value2, ]
Number / Angka
String, Boolean, Null
Array
Latihan
Men-generate data JSON
Menggunakan PHP json_encode($data); Mengubah array associative menjadi JSON
Menggunakan Javascript JSON.stringify(data) Mengubah object javascript menjadi JSON
Bekerja dengan data JSON
Menggunakan PHP
Menggunakan Javascript (ajax)
Menggunakan JQuery
Bekerja dengan data JSON (diluar domain)
Same-origin policy Kebijakan browser untuk mengakses dan menampilkan data / script / document dari tempat lain diluar domain-nya Membuat kita tidak bisa mengakses data (.json) dari luar domain/website kita
CORS (Cross-Origin Resource Sharing) Mekanisme yang membuat kita dapat mengakses sebuah resource (data, document, script) dari domain lain Caranya adalah dengan membuat server memperbolehkan adanya akses data dari luar domain Modifikasi Access-Control-Allow-Origin Membuat file.htaccess
Latihan Bekerja dengan data JSON
rekweb.if-unpas.org/pertemuan8 menggunakan PHP
rekweb.if-unpas.org/pertemuan8/index2.php menggunakan JQuery
TUGAS
TUGAS 1 Membuat data JSON Cari daftar menu restoran favorit kalian (sertakan foto / screenshot) boleh cari di internet atau foto langsung menu nya Buat struktur data JSON-nya (silahkan rancang sendiri skema nya tidak perlu sama dengan latihan) Save dengan ekstensi file.json
TUGAS 2 Membuat aplikasi Buat 2 buah aplikasi yang dapat membaca data JSON yang sudah dibuat sebelumnya Aplikasi 1 membaca data JSON menggunakan PHP Aplikasi 2 membaca data JSON menggunakan javascript / JQuery dengan mekanisme AJAX Masing2 aplikasi dapat menampilkan seluruh menu pada restoran, dan juga bisa mem-filter berdasarkan kategori menu Silahkan lihat dan pelajari contoh nya melalui source yang ada di rekweb.if-unpas.org
Struktur File & Folder Tugas (1) Aplikasi disimpan pada folder yang berbeda sesuai bahasanya Simpan file.json di dalam folder terpisah Simpan gambar / screenshot / foto dari menu restoran yang dipilih ke dalam folder terpisah Contohnya lihat gambar di samping
Struktur File & Folder Tugas (2) Buat file data-diri.txt yang berisi nama, nrp dan studi kasus yang dipilih Contohnya lihat gambar di samping Seluruh folder dan file tugas disimpan ke dalam folder dengan nama : REKWEB_SHIFT_TUGAS5_NRP Lihat gambar disamping
ATURAN PENGUMPULAN (1) Tugas dikumpulkan melalui email ke asisten masingmasing kelas Batas waktu pengumpulan disesuaikan dengan aturan kelas masing-masing Seluruh file dikirim dengan terlebih dahulu meng-compress (.zip) folder tugasnya dengan nama yang sama
ATURAN PENGUMPULAN (2) Tugas dikirim menggunakan subject email yang sama dengan nama folder Tulis pengantar tugasnya di body email agar tidak masuk ke spam
sekian
terimakasih. sandhikagalih@unpas.ac.id