Lewati ke isi

Tutorial 2: Form dan Data Delivery

Pemrograman Berbasis Platform (CSGE602022) — diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Genap 2023/2024

Tujuan Pembelajaran​

Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:

  • Mengetahui XML dan JSON sebagai salah satu metode data delivery
  • Memahami cara kerja submisi data yang diberikan oleh pengguna menggunakan elemen form
  • Memahami cara mengirimkan data menggunakan format XML dan JSON
  • Memahami cara mengambil data spesifik berdasarkan ID

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 hanya berisi 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"?>
<person>
    <name>Alice Johnson</name>
    <age>25</age>
    <address>
        <street>123 Main St</street>
        <city>Los Angeles</city>
        <zip>90001</zip>
    </address>
</person>

XML di atas sangatlah self-descriptive:

  • Ada informasi nama (name)
  • Ada informasi umur (age)
  • Ada informasi alamat (address)
  • Ada informasi jalan (street)
  • Ada informasi kota (city)
  • Ada informasi kode pos (zip)

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, <person> adalah root element.

Baris <?xml version="1.0" encoding="UTF-8"?> biasanya 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 <person> dianggap berbeda dengan tag <Person>.

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:

{
  "name": "Alice Johnson",
  "age": 25,
  "address": {
    "street": "123 Main St",
    "city": "Los Angeles",
    "zip": "90001"
  }
}

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

Pre-Tutorial Notes

Sebelum kamu memulai, serta untuk membantumu mengikuti tutorial 2 dengan baik, kami mengharapkan beberapa hasil berikut dari tutorial 1:

  • Struktur direktori book-tracker secara lokal adalah sebagai berikut.

Struktur direktori lokal

  • Struktur repository book-tracker pada GitHub adalah sebagai berikut.

Struktur Repositori Github

Tutorial: Implementasi Skeleton sebagai Kerangka Views

Sebelum kita membuat form registrasi, kita perlu membuat suatu skeleton yang berfungsi sebagai kerangka views dari situs web kita. Dengan kerangka views ini, kita dapat memastikan adanya konsistensi dalam desain situs web kita serta memperkecil kemungkinan terjadinya redundansi kode. Pada tutorial ini, kita akan membuat skeleton untuk situs web yang akan kita buat pada tutorial selanjutnya.

  1. Buat folder templates pada root folder (direktori utama) dan buatlah sebuah berkas HTML baru bernama base.html. Berkas base.html berfungsi sebagai template dasar yang dapat digunakan sebagai kerangka umum untuk halaman web lainnya di dalam proyek. Isilah berkas base.html tersebut dengan kode berikut:
{% load static %}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    {% block meta %} {% endblock meta %}
  </head>

  <body>
    {% block content %} {% endblock content %}
  </body>
</html>

Baris-baris yang dikurung dalam {% ... %} disebut dengan template tags Django. Baris-baris inilah yang akan berfungsi untuk memuat data secara dinamis dari Django ke HTML.

  1. Buka settings.py yang ada pada direktori proyek (book_tracker) dan carilah baris yang mengandung variabel TEMPLATES. Sesuaikan kode yang ada dengan potongan kode berikut agar berkas base.html terdeteksi sebagai berkas template.
...
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'], # Tambahkan konten baris ini
        'APP_DIRS': True,
        ...
    }
]
...
  1. Pada subdirektori templates yang ada pada direktori main (main/templates/), ubahlah kode berkas main.html yang telah dibuat di tutorial sebelumnya menjadi sebagai berikut.
{% extends 'base.html' %} {% block content %}
<h1>Book Tracker Page</h1>

<h5>Name:</h5>
<p>{{name}}</p>

<h5>Class:</h5>
<p>{{class}}</p>
{% endblock content %}

Perhatikan bahwa kode diatas merupakan kode yang sama dengan kode pada main.html pada tutorial sebelumnya. Perbedaannya adalah pada kode diatas, kita menggunakan base.html sebagai template utama.

Tutorial: Membuat Form Input Data dan Menampilkan Data Buku Pada HTML

Sampai saat ini, belum ada data yang ditambahkan dan dimunculkan ke dalam aplikasi. Sekarang, kita akan membuat sebuah form sederhana untuk menginput data buku pada aplikasi sehingga nantinya kamu dapat menambahkan data baru untuk ditampilkan pada halaman utama.

  1. Buat berkas baru pada direktori main dengan nama forms.py untuk membuat struktur form yang dapat menerima data buku baru. Tambahkan kode berikut ke dalam berkas forms.py.
from django.forms import ModelForm
from main.models import Book

class BookForm(ModelForm):
    class Meta:
        model = Book
        fields = ["name", "page", "description"]

Penjelasan Kode:

  • model = Book untuk menunjukkan model yang akan digunakan untuk form. Ketika data dari form disimpan, isi dari form akan disimpan menjadi sebuah objek Book.

  • fields = ["name", "page", "description"] untuk menunjukkan field dari model Book yang digunakan untuk form. Field date_added tidak dimasukkan ke list fields karena tanggal ditambahkan secara otomatis.

  • Buka berkas views.py yang ada pada folder main dan tambahkan beberapa import berikut pada bagian paling atas.

from django.shortcuts import render, redirect   # Tambahkan import redirect di baris ini
from main.forms import BookForm
from main.models import Book
  1. Masih di berkas yang sama, buat fungsi baru dengan nama create_book yang menerima parameter request. Tambahkan potongan kode di bawah ini untuk menghasilkan formulir yang dapat menambahkan data buku secara otomatis ketika data di-submit dari form.
def create_book(request):
    form = BookForm(request.POST or None)

    if form.is_valid() and request.method == "POST":
        form.save()
        return redirect('main:show_main')

    context = {'form': form}
    return render(request, "create_book.html", context)

Penjelasan Kode:

  • form = BookForm(request.POST or None) digunakan untuk membuat BookForm baru dengan memasukkan QueryDict berdasarkan input dari user pada request.POST.
  • form.is_valid() digunakan untuk memvalidasi isi input dari form tersebut.
  • form.save() digunakan untuk membuat dan menyimpan data dari form tersebut.

  • return redirect('main:show_main') digunakan untuk melakukan redirect ke fungsi show_main pada views aplikasi main setelah data form berhasil disimpan.

  • Ubahlah fungsi show_main yang sudah ada pada berkas views.py menjadi seperti berikut.

def show_main(request):
    books = Book.objects.all()

    context = {
        'name': 'Pak Bepe',
        'class': 'PBP A',
        'books': books
    }

    return render(request, "main.html", context)

Penjelasan Kode:

Fungsi Book.objects.all() digunakan untuk mengambil seluruh objek Book yang tersimpan pada database.

  1. Buka urls.py yang ada pada direktori main dan import fungsi create_book yang sudah kamu buat tadi.
from main.views import show_main, create_book
  1. Tambahkan path URL ke dalam variabel urlpatterns pada urls.py di main untuk mengakses fungsi yang sudah di-import pada poin sebelumnya.
urlpatterns = [
   ...
   path('create-book', create_book, name='create_book'),
]
  1. Buat berkas HTML baru dengan nama create_book.html pada direktori main/templates. Isi create_book.html dengan kode berikut.
{% extends 'base.html' %} {% block content %}
<h1>Add New Book</h1>

<form method="POST">
  {% csrf_token %}
  <table>
    {{ form.as_table }}
    <tr>
      <td></td>
      <td>
        <input type="submit" value="Add Book" />
      </td>
    </tr>
  </table>
</form>

{% endblock %}

Penjelasan Kode:

  • <form method="POST"> digunakan untuk menandakan block untuk form dengan metode POST.
  • {% csrf_token %} adalah token yang berfungsi sebagai security. Token ini di-generate secara otomatis oleh Django untuk mencegah serangan berbahaya.
  • {{ form.as_table }} adalah template tag yang digunakan untuk menampilkan fields form yang sudah dibuat pada forms.py sebagai table.

  • <input type="submit" value="Add Book"/> digunakan sebagai tombol submit untuk mengirimkan request ke view create_book(request).

  • Buka main.html dan tambahkan kode berikut di dalam {% block content %} untuk menampilkan data produk dalam bentuk table serta tombol "Add New Book" yang akan redirect ke halaman form.

...
<table>
  <tr>
    <th>Name</th>
    <th>Page</th>
    <th>Description</th>
    <th>Date Added</th>
  </tr>

  {% comment %} Berikut cara memperlihatkan data produk di bawah baris ini
  {%endcomment %} {% for book in books %}
  <tr>
    <td>{{book.name}}</td>
    <td>{{book.page}}</td>
    <td>{{book.description}}</td>
    <td>{{book.date_added}}</td>
  </tr>
  {% endfor %}
</table>

<br />

<a href="{% url 'main:create_book' %}">
  <button>Add New Book</button>
</a>
{% endblock content %}
  1. Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu. Coba tambahkan beberapa data produk baru dan seharusnya kamu dapat melihat data yang ditambahkan pada halaman utama aplikasi.

Tutorial Mengembalikan Data dalam Bentuk XML

  1. Buka views.py yang ada pada folder main dan tambahkan import HttpResponse dan Serializer pada bagian paling atas.
from django.http import HttpResponse
from django.core import serializers
  1. Buatlah sebuah fungsi baru yang menerima parameter request dengan nama show_xml dan buatlah sebuah variabel di dalam fungsi tersebut yang menyimpan hasil query dari seluruh data yang ada pada Book.
def show_xml(request):
    data = Book.objects.all()
  1. Tambahkan return function berupa HttpResponse yang berisi parameter data hasil query yang sudah diserialisasi menjadi XML dan parameter content_type="application/xml".
def show_xml(request):
    data = Book.objects.all()
    return HttpResponse(serializers.serialize("xml", data), content_type="application/xml")

Penjelasan Kode:

serializers digunakan untuk translate objek model menjadi format lain seperti dalam fungsi ini adalah XML.

  1. Buka urls.py yang ada pada folder main dan import fungsi yang sudah kamu buat tadi.
from main.views import show_main, create_book, show_xml
  1. Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.
...
path('xml/', show_xml, name='show_xml'),
...
  1. Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/xml/ di browser favoritmu untuk melihat hasilnya.

Tutorial: Mengembalikan Data dalam Bentuk JSON

  1. Buka views.py yang ada pada folder main dan buatlah sebuah fungsi baru yang menerima parameter request dengan nama show_json dengan sebuah variabel di dalamnya yang menyimpan hasil query dari seluruh data yang ada pada Book.
def show_json(request):
    data = Book.objects.all()
  1. Tambahkan return function berupa HttpResponse yang berisi parameter data hasil query yang sudah diserialisasi menjadi JSON dan parameter content_type="application/json".
def show_json(request):
    data = Book.objects.all()
    return HttpResponse(serializers.serialize("json", data), content_type="application/json")
  1. Buka urls.py yang ada pada folder main dan import fungsi yang sudah kamu buat tadi.
from main.views import show_main, create_book, show_xml, show_json
  1. Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.
...
path('json/', show_json, name='show_json'),
...
  1. Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/json/ (sesuaikan dengan path url yang dibuat) di browser favoritmu untuk melihat hasilnya.

Tutorial: Mengembalikan Data Berdasarkan ID dalam Bentuk XML dan JSON

  1. Buka views.py yang ada pada folder main dan buatlah dua fungsi baru yang menerima parameter _request_ dan id dengan nama show_xml_by_id dan show_json_by_id.

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

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

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

  2. XML

    def show_xml_by_id(request, id):
    data = Book.objects.filter(pk=id)
    return HttpResponse(serializers.serialize("xml", data), content_type="application/xml")

  3. JSON

    def show_json_by_id(request, id):
    data = Book.objects.filter(pk=id)
    return HttpResponse(serializers.serialize("json", data), content_type="application/json")

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

from main.views import show_main, create_book, show_xml, show_json, show_xml_by_id, show_json_by_id
  1. Tambahkan path URL ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.
...
path('xml/<int:id>/', show_xml_by_id, name='show_xml_by_id'),
path('json/<int:id>/', show_json_by_id, name='show_json_by_id'),
...
  1. Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/xml/[id]/ atau http://localhost:8000/json/[id]/ di browser favoritmu untuk melihat hasilnya.

Catatan: Sesuaikan [id] pada URL di atas dengan id objek yang ingin dilihat.

Tutorial: Penggunaan Postman Sebagai Data Viewer

  1. Pastikan server kamu sudah berjalan dengan perintah python manage.py runserver.

  2. Buka Postman dan buatlah sebuah request baru dengan method GET dan url http://localhost:8000/xml/ atau http://localhost:8000/json/ untuk mengetes apakah data terkirimkan dengan baik.

Panduan Instalasi Postman dapat dilihat pada Laman Resmi Postman.

Contoh: Tampilan Halaman Postman

  1. Klik tombol Send untuk mengirimkan request tersebut.

  2. Kamu akan melihat hasil response dari request tersebut pada bagian bawah Postman.

Sent

  1. Kamu juga dapat mengubah url menjadi http://localhost:8000/xml/[id] atau http://localhost:8000/json/[id] untuk mengetes fungsi pengambilan data produk berdasarkan ID.

Json By ID

Penutup

  1. Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.

Tampilan Halaman Web

  1. Pada akhir tutorial ini, struktur direktori lokalmu akan terlihat seperti ini.

Struktur Direktori Lokal

  1. Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjutnya, lakukan add, commit dan push untuk memperbarui repositori GitHub.

  2. Jalankan perintah berikut untuk melakukan add, commit dan push.

git add .
git commit -m "<pesan_commit>"
git push -u origin <branch_utama>
  • Ubah <pesan_commit> sesuai dengan keinginan. Contoh: git commit -m "tutorial 2 selesai".
  • Ubah <branch_utama> sesuai dengan nama branch utamamu. Contoh: git push -u origin main atau git push -u origin master.

Referensi Tambahan

Kontributor

  • Muhammad Nabil Mu'afa
  • Muhammad Iqbal Dwitama

Credits

Tutorial ini dikembangkan berdasarkan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar Pemrograman Berbasis Platform 2024. Segala tutorial serta instruksi yang dicantumkan pada repositori ini dirancang sedemikian rupa sehingga mahasiswa yang sedang mengambil mata kuliah Pemrograman Berbasis Platform dapat menyelesaikan tutorial saat sesi lab berlangsung.