Skip to main content

Lab 2: Data Delivery

Pemrograman Berbasis Platform (CSGE602022) - diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Ganjil 2022/2023

Tujuan Pembelajaran​​

Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:

  • Mengetahui XML dan JSON sebagai salah satu metode Data Delivery
  • Mengerti cara mengirimkan data menggunakan format XML dan JSON
  • Mengerti cara mengambil data spesifik berdasarkan IDx

Pengenalan Data Delivery​

Dalam mengembangkan suatu platform, ada kalanya kita perlu mengirimkan data dari satu stack ke stack lainnya. Data yang dikirimkan bisa bermacam-macam bentuknya. Beberapa contoh format data yang umum digunakan antara lain HTML, XML, dan JSON. Implementasi data delivery dalam bentuk HTML sudah kamu pelajari pada tutorial sebelumnya. Pada tutorial ini akan diajarkan terkait XML dan JSON.

XML (Extensible Markup Language)​

XML adalah singkatan dari eXtensible Markup Language. XML didesain menjadi self-descriptive, jadi dengan membaca XML tersebut kita bisa mengerti informasi apa yang ingin disampaikan dari data yang tertulis. XML digunakan pada banyak aplikasi web maupun mobile, yaitu untuk menyimpan dan mengirimkan data. XML hanyalah informasi yang dibungkus di dalam tag. Kita perlu menulis program untuk mengirim, menerima, menyimpan, atau menampilkan informasi tersebut.

Contoh Format XML:

<?xml version="1.0" encoding="UTF-8"?>
<phone>
  <brand>Apple</brand>
  <type>iPhone 14 plus</type>
  <color>Red</color>
  <memory>256</memory>
</phone>

XML di atas sangatlah self-descriptive:

  • Ada informasi merk (brand)
  • Ada informasi tipe (type)
  • Ada informasi warna (color)
  • Ada informasi besaran memori (memory)

Dokumen XML membentuk struktur seperti tree yang dimulai dari root, lalu branch, hingga berakhir pada leaves. Dokumen XML harus mengandung sebuah root element yang merupakan parent dari elemen lainnya. Pada contoh di atas, <phone> adalah root element.

Untuk baris <?xml version="1.0" encoding="UTF-8"?> biasa disebut sebagai XML Prolog. XML Prolog bersifat opsional, akan tetapi jika ada maka posisinya harus berada di awal dokumen XML. Pada dokumen XML semua elemen wajib memiliki closing tag. Tag pada XML sifatnya case sensitive, sehingga tag <phone> berbeda dengan tag <Phone>.

JSON (JavaScript Object Notation)​

JSON adalah singkatan dari JavaScript Object Notation. JSON didesain menjadi self-describing, sehingga JSON sangat mudah untuk dimengerti. JSON digunakan pada banyak aplikasi web maupun mobile, yaitu untuk menyimpan dan mengirimkan data. Sintaks JSON merupakan turunan dari Object JavaScript. Akan tetapi format JSON berbentuk text, sehingga kode untuk membaca dan membuat JSON banyak terdapat dibanyak bahasa pemrograman.

Contoh format JSON:

{
    "brand": "Samsung",
    "type": "S22 Ultra",
    "color": "Black",
    "memory": "256",
}

Data pada JSON disimpan dalam bentuk key dan value. Pada contoh di atas yang menjadi key adalah brand, type, color, dan memory. Value dapat berupa tipe data primitif (string, number, boolean) ataupun berupa objek.

Tutorial Mengembalikan Data dalam Bentuk XML​

Catatan: Pada tutorial ini, kamu akan menggunakan proyek yang sudah kamu buat pada tutorial sebelumnya.

  1. Buka views.py yang ada pada folder wishlist dan buatlah sebuah fungsi yang menerima parameter request.

  2. Tambahkan import HttpResponse dan Serializer pada bagian paling atas.

    from django.http import HttpResponse
    from django.core import serializers

  3. Buatlah sebuah variabel di dalam fungsi tersebut yang menyimpan hasil query dari seluruh data yang ada pada BarangWishlist.

    data = BarangWishlist.objects.all()

  4. Tambahkan return function berupa HttpResponse yang berisi parameter data hasil query yang sudah diserialisasi menjadi XML dan parameter content_type="application/xml".

    return HttpResponse(serializers.serialize("xml", data), content_type="application/xml")

  5. Buka urls.py yang ada pada folder wishlist dan import fungsi yang sudah kamu buat tadi.

    from wishlist.views import show_xml #sesuaikan dengan nama fungsi yang dibuat

  6. Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.

    ...
    path('xml/', show_xml, name=’show_xml’), #sesuaikan dengan nama fungsi yang dibuat
    ...

  7. Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/wishlist/xml/ (sesuaikan dengan path url yang dibuat) di browser favoritmu untuk melihat hasilnya.

Tutorial Mengembalikan Data dalam Bentuk JSON​

  1. Buka views.py yang ada pada folder wishlist dan buatlah sebuah fungsi baru yang menerima parameter request.

  2. Buatlah sebuah variabel di dalam fungsi tersebut yang menyimpan hasil query dari seluruh data yang ada pada BarangWishlist.

    data = BarangWishlist.objects.all()

  3. Tambahkan return function berupa HttpResponse yang berisi parameter data hasil query yang sudah diserialisasi menjadi JSON dan parameter content_type="application/json".

    return HttpResponse(serializers.serialize("json", data), content_type="application/json")

  4. Buka urls.py yang ada pada folder wishlist dan import fungsi yang sudah kamu buat tadi.

    from wishlist.views import show_json #sesuaikan dengan nama fungsi yang dibuat

  5. Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.

    ...
    path('json/', show_json, name=’show_json’), #sesuaikan dengan nama fungsi yang dibuat
    ...

  6. Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/wishlist/json/ (sesuaikan dengan path url yang dibuat) di browser favoritmu untuk melihat hasilnya.

Tutorial Mengembalikan Data Berdasarkan ID dalam Bentuk JSON/XML​

  1. Buka views.py yang ada pada folder wishlist dan buatlah sebuah fungsi baru yang menerima parameter request dan id.

  2. Buatlah sebuah variabel di dalam fungsi tersebut yang menyimpan hasil query dari data dengan id tertentu yang ada pada BarangWishlist.

    data = BarangWishlist.objects.filter(pk=id)

  3. Tambahkan return function berupa HttpResponse yang berisi parameter data hasil query yang sudah diserialisasi menjadi JSON/XML dan parameter content_type dengan value "application/xml" (jika format XML) atau "application/json" (jika format JSON).

    // Jika JSON
    return HttpResponse(serializers.serialize("json", data), content_type="application/json")

    // Jika XML
    return HttpResponse(serializers.serialize("xml", data), content_type="application/xml")

  4. Buka urls.py yang ada pada folder wishlist dan impor fungsi yang sudah kamu buat tadi.

    from wishlist.views import show_json_by_id #sesuaikan dengan nama fungsi yang dibuat

  5. Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.

    ...
    path('json/<int:id>', show_json_by_id, name=’show_json_by_id’), #sesuaikan dengan nama fungsi yang dibuat
    ...

  6. Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/wishlist/json/<id> (sesuaikan dengan path url yang dibuat dan id yang diinginkan) di browser favoritmu untuk melihat hasilnya.