Rekayasa Web Pertemuan 8

Transkripsi

1 Rekayasa Web Pertemuan 8

2 JavaScript Object Notation

3 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

4 JSON bukan.. Format dokumen Bahasa markup Bahasa pemrograman

5 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

6 JSON vs. XML

7 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

8 JSON vs. XML JSON XML

9 Tipe Data pada JSON Number integer / float String teks / unicode, dibungkus menggunakan Boolean true / false Null - null Object { key : value } Array [ value1, value2, ]

10

11

12

13 Number / Angka

14 String, Boolean, Null

15 Array

16 Latihan

17

18

19 Men-generate data JSON

20 Menggunakan PHP json_encode($data); Mengubah array associative menjadi JSON

21 Menggunakan Javascript JSON.stringify(data) Mengubah object javascript menjadi JSON

22 Bekerja dengan data JSON

23 Menggunakan PHP

24 Menggunakan Javascript (ajax)

25 Menggunakan JQuery

26 Bekerja dengan data JSON (diluar domain)

27 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

28 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

29 Latihan Bekerja dengan data JSON

30 rekweb.if-unpas.org/pertemuan8 menggunakan PHP

31 rekweb.if-unpas.org/pertemuan8/index2.php menggunakan JQuery

32 TUGAS

33 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

34 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

35 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

36 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

37 ATURAN PENGUMPULAN (1) Tugas dikumpulkan melalui 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

38 ATURAN PENGUMPULAN (2) Tugas dikirim menggunakan subject yang sama dengan nama folder Tulis pengantar tugasnya di body agar tidak masuk ke spam

39 sekian

40 terimakasih.