Tutorial 2: Form dan Data Delivery

Pemrograman Berbasis Platform (CSGE602022) — diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Ganjil 2025/2026

Terakhir diperbarui: 27 Agustus 2025, 12:00 WIB

Tujuan Pembelajaran

Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:

Memahami tujuan dan cara implementasi skeleton sebagai kerangka views
Mengetahui XML dan JSON sebagai salah satu metode data delivery
Memahami cara kerja submisi data yang diberikan oleh pengguna menggunakan elemen form pada HTML
Memahami cara mengirimkan data menggunakan format XML dan JSON
Memahami cara mengambil data spesifik berdasarkan ID
Memahami penggunaan postman sebagai data viewer

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, atau eXtensible Markup Language, adalah sebuah format yang dirancang agar mudah dimengerti hanya dengan membacanya, karena setiap elemen dalam XML mendeskripsikan dirinya sendiri. XML banyak digunakan dalam berbagai aplikasi web dan mobile untuk tujuan penyimpanan dan pertukaran data. File XML hanya berisi data yang dikemas dalam tag tertentu, dan untuk dapat mengirim, menerima, menyimpan, atau menampilkan informasi dari file tersebut, kita perlu membuat program yang dapat memprosesnya.

Contoh Format XML:

<?xml version="1.0" encoding="UTF-8"?>
<person>
    <name>Burhan</name>
    <age>25</age>
    <address>
        <street>Jl. PeBePe No.1</street>
        <city>Depok</city>
        <province>Jawa Barat</province>
        <zip>16424</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 provinsi (province)
- 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, atau JavaScript Object Notation, adalah sebuah format yang dirancang agar mudah dimengerti karena setiap elemennya mendeskripsikan dirinya sendiri atau self describing. JSON banyak digunakan dalam berbagai aplikasi web dan mobile untuk menyimpan dan mentransfer data. Meskipun sintaks JSON berasal dari objek JavaScript, JSON sebenarnya adalah format text. Oleh karena itu, banyak bahasa pemrograman yang memiliki dukungan untuk membaca dan membuat JSON.

Contoh format JSON:

{
  "name": "Burhan",
  "age": 25,
  "address": {
    "street": "Jl. PeBePe No.1",
    "city": "Depok",
    "province": "Jawa Barat",
    "zip": "16424"
  }
}

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 football-news secara lokal adalah sebagai berikut.

Struktur Direktori Lokal

Struktur repository football-news pada GitHub adalah sebagai berikut.

Struktur Direktori Repo

Tutorial: Implementasi Skeleton sebagai Kerangka Views

Sebelum kita membuat form, 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.

Buat direktori templates pada direktori utama (root folder) 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.

Pada contoh diatas, tag {% block %} di Django digunakan untuk mendefinisikan area dalam template yang dapat diganti oleh template turunan. Template turunan akan me-extend template dasar (pada contoh ini base.html) dan mengganti konten di dalam block ini sesuai kebutuhan.
Buka settings.py yang ada pada direktori proyek (football_news) 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,
        ...
    }
]
...
```
info
Dalam beberapa kasus, APP_DIRS pada konfigurasi TEMPLATES kamu dapat bernilai False. Apabila nilainya False, ubah menjadi True. APP_DIRS harus bernilai True. Hal ini dilakukan agar templates milik app (contohnya main) diprioritaskan daripada admin/base_site.html milik django.contrib.admin. Untuk informasi lebih lanjut, kamu dapat mengakses halaman ini.
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>Football News</h1>

 <h5>NPM: </h5>
 <p>{{ npm }}<p>

 <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 Football News 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 Football News pada aplikasi sehingga nantinya kamu dapat menambahkan data baru untuk ditampilkan pada halaman utama.

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

class NewsForm(ModelForm):
    class Meta:
        model = News
        fields = ["title", "content", "category", "thumbnail", "is_featured"]
```
Penjelasan Kode:
- model = News untuk menunjukkan model yang akan digunakan untuk form. Ketika data dari form disimpan, isi dari form akan disimpan menjadi sebuah objek News.
- fields = ["title", "content", "category", "thumbnail", "is_featured"] untuk menunjukkan field dari model News yang digunakan untuk form. Field created_at dan news_views tidak dimasukkan ke list fields karena ditambahkan secara otomatis.

Buka berkas views.py yang ada pada direktori main dan tambahkan beberapa import berikut pada bagian paling atas, kemudian perbarui dan tambahkan fungsi-fungsi berikut:

from django.shortcuts import render, redirect, get_object_or_404
from main.forms import NewsForm
from main.models import News

def show_main(request):
    news_list = News.objects.all()

    context = {
        'npm' : '240123456',
        'name': 'Haru Urara',
        'class': 'PBP A',
        'news_list': news_list
    }

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

def create_news(request):
    form = NewsForm(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_news.html", context)

def show_news(request, id):
    news = get_object_or_404(News, pk=id)
    news.increment_views()

    context = {
        'news': news
    }

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

Penjelasan Kode:

Fungsi show_main diperbarui dengan menambahkan News.objects.all() untuk mengambil seluruh objek News yang tersimpan pada database.
Fungsi create_news digunakan untuk menghasilkan form yang dapat menambahkan data News secara otomatis ketika data di-submit dari form.
Fungsi show_news menggunakan get_object_or_404(News, pk=id) untuk mengambil objek News berdasarkan primary key (id). Jika objek tidak ditemukan, akan mengembalikan halaman 404.
news.increment_views() digunakan untuk menambah jumlah views pada berita tersebut.

Buka urls.py yang ada pada direktori main dan import fungsi-fungsi yang sudah kamu buat tadi, kemudian tambahkan path URL ke dalam variabel urlpatterns:

from django.urls import path
from main.views import show_main, create_news, show_news

app_name = 'main'

urlpatterns = [
    path('', show_main, name='show_main'),
    path('create-news/', create_news, name='create_news'),
    path('news/<str:id>/', show_news, name='show_news'),
]

Buka main.htmlpada direktori main/templates dan update kode di dalam blok content untuk menampilkan data news serta tombol "Add News" yang akan redirect ke halaman form:

<h1>Football News</h1>

<h5>NPM: </h5>
<p>{{ npm }}</p>

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

<h5>Class:</h5>
<p>{{ class }}</p>

<a href="{% url 'main:create_news' %}">
  <button>+ Add News</button>
</a>

<hr>

{% if not news_list %}
<p>Belum ada data berita pada football news.</p>
{% else %}

{% for news in news_list %}
<div>
  <h2><a href="{% url 'main:show_news' news.id %}">{{ news.title }}</a></h2>

  <p><b>{{ news.get_category_display }}</b>{% if news.is_featured %} | 
    <b>Featured</b>{% endif %}{% if news.is_news_hot %} | 
    <b>Hot</b>{% endif %} | <i>{{ news.created_at|date:"d M Y H:i" }}</i> 
    | Views: {{ news.news_views }}</p>

  {% if news.thumbnail %}
  <img src="{{ news.thumbnail }}" alt="thumbnail" width="150" height="100">
  <br />
  {% endif %}

  <p>{{ news.content|truncatewords:25 }}...</p>

  <p><a href="{% url 'main:show_news' news.id %}"><button>Read More</button></a></p>
</div>

<hr>
{% endfor %}

{% endif %}

Buat dua berkas HTML baru pada direktori main/templates untuk halaman form input dan detail berita:

create_news.html:

{% extends 'base.html' %} 
{% block content %}
<h1>Add News</h1>

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

{% endblock %}

Penjelasan Kode:

{% 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.

news_detail.html:

{% extends 'base.html' %}
{% block content %}
<p><a href="{% url 'main:show_main' %}"><button>← Back to News List</button></a></p>

<h1>{{ news.title }}</h1>
<p><b>{{ news.get_category_display }}</b>{% if news.is_featured %} | 
    <b>Featured</b>{% endif %}{% if news.is_news_hot %} | 
    <b>Hot</b>{% endif %} | <i>{{ news.created_at|date:"d M Y, H:i" }}</i> 
    | Views: {{ news.news_views }}</p>

{% if news.thumbnail %}
<img src="{{ news.thumbnail }}" alt="News thumbnail" width="300">
<br /><br />
{% endif %}

<p>{{ news.content }}</p>

{% endblock content %}

Buka settings.py pada direktori root project dan kemudian tambahkan entri url proyek pws kamu pada CSRF_TRUSTED_ORIGINS tepat setelah ALLOWED_HOSTS:
```
...
CSRF_TRUSTED_ORIGINS = [
    "<url-deployment-pws-kamu>"
]
...
```
Perlu diingat bahwa url deployment untuk CSRF_TRUSTED_ORIGINS harus mengandung protokol, sehingga urlnya akan dimulai dengan https:// contohnya https://isa-citra-footballnews.pbp.cs.ui.ac.id.
Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu. Coba tambahkan beberapa data news baru dan klik link judul atau tombol "Read More" untuk melihat detail berita. Seharusnya kamu dapat melihat data yang ditambahkan pada halaman utama aplikasi serta dapat mengakses halaman detail untuk setiap berita.

Tutorial Mengembalikan Data dalam Bentuk XML

Buka views.py yang ada pada direktori main dan tambahkan import HttpResponse dan Serializer pada bagian paling atas.
```
from django.http import HttpResponse
from django.core import serializers
```
info
HttpResponse merupakan class yang digunakan untuk menyusun respon yang ingin dikembalikan oleh server ke user. Kamu dapat mengakses materi lebih dalam terkait HttpRequest dan HttpResponse pada halaman berikut ini.
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 News.
```
def show_xml(request):
    news_list = News.objects.all()
```
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):
     news_list = News.objects.all()
     xml_data = serializers.serialize("xml", news_list)
     return HttpResponse(xml_data, content_type="application/xml")
```
Penjelasan Kode:

serializers digunakan untuk translate objek model menjadi format lain seperti dalam fungsi ini adalah XML.
Buka urls.py yang ada pada direktori main dan import fungsi yang sudah kamu buat tadi.
```
from main.views import show_main, create_news, show_news, show_xml
```
Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.
```
...
path('xml/', show_xml, name='show_xml'),
...
```
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

Buka views.py yang ada pada direktori 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 News.
```
def show_json(request):
    news_list = News.objects.all()
```

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):
    news_list = News.objects.all()
    json_data = serializers.serialize("json", news_list)
    return HttpResponse(json_data, content_type="application/json")

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

from main.views import show_main, create_news, show_news, show_xml, show_json

Tambahkan path url ke dalam urlpatterns untuk mengakses fungsi yang sudah diimpor tadi.
```
...
path('json/', show_json, name='show_json'),
...
```
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

Buka views.py yang ada pada direktori main dan buatlah dua fungsi baru yang menerima parameter request dan news_id dengan nama show_xml_by_id dan show_json_by_id.
Buatlah sebuah variabel di dalam fungsi tersebut yang menyimpan hasil query dari data dengan id tertentu yang ada pada News.
```
news_item = News.objects.filter(pk=news_id)
```
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).
- XML
```
def show_xml_by_id(request, news_id):
   news_item = News.objects.filter(pk=news_id)
   xml_data = serializers.serialize("xml", news_item)
   return HttpResponse(xml_data, content_type="application/xml")
```
- JSON
```
def show_json_by_id(request, news_id):
   news_item = News.objects.get(pk=news_id)
   json_data = serializers.serialize("json", [news_item])
   return HttpResponse(json_data, content_type="application/json")
```
info
Untuk mendapatkan data berdasarkan ID, kita dapat menggunakan berbagai jenis method milik Django, dua di antaranya adalah filter() dan get(). Namun, kedua method ini memiliki perbedaan yang cukup signifikan. filter() dapat digunakan untuk mengambil data satu objek atau berbagai objek yang memenuhi kondisi yang ditetapkan, sedangkan get() dapat digunakan untuk mengambil data satu objek saja. Kamu dapat membaca lebih lanjut terkait hal ini pada halaman berikut ini.

Tambahkan blok try except pada fungsi untuk mengantisipasi kondisi ketika data dengan news_id tertentu tidak ditemukan dalam basis data. Jika data tidak ditemukan, kembalikan HttpResponse dengan status 404 sebagai tanda data tidak ada.

XML

def show_xml_by_id(request, news_id):
   try:
       news_item = News.objects.filter(pk=news_id)
       xml_data = serializers.serialize("xml", news_item)
       return HttpResponse(xml_data, content_type="application/xml")
   except News.DoesNotExist:
       return HttpResponse(status=404)

JSON

def show_json_by_id(request, news_id):
   try:
       news_item = News.objects.get(pk=news_id)
       json_data = serializers.serialize("json", [news_item])
       return HttpResponse(json_data, content_type="application/json")
   except News.DoesNotExist:
       return HttpResponse(status=404)

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

from main.views import show_main, create_news, show_news, show_xml, show_json, show_xml_by_id, show_json_by_id

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

...
 path('xml/<str:news_id>/', show_xml_by_id, name='show_xml_by_id'),
 path('json/<str:news_id>/', show_json_by_id, name='show_json_by_id'),
...

Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/xml/[news_id]/ atau http://localhost:8000/json/[news_id]/ di browser favoritmu untuk melihat hasilnya.

peringatan
Sesuaikan [news_id] pada URL di atas dengan id objek yang ingin dilihat. Kamu dapat mengambil salah satu ID objek yang ditampilkan ketika mengakses endpoint /xml/ dan /json/.

Tutorial: Penggunaan Postman Sebagai Data Viewer

Pastikan server kamu sudah berjalan dengan perintah python manage.py runserver.
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:
- XML
- JSON
Klik tombol Send untuk mengirimkan request tersebut.
Kamu akan melihat hasil response dari request tersebut pada bagian bawah Postman.
- XML
- JSON
Kamu juga dapat mengubah url menjadi http://localhost:8000/xml/[news_id] atau http://localhost:8000/json/[news_id] untuk mengetes fungsi pengambilan data News berdasarkan ID.
- XML
- JSON

Penutup

Setelah menyelesaikan tutorial ini, tampilan halaman web kamu seharusnya terlihat seperti ini.
Pada akhir tutorial ini, struktur direktori lokalmu akan terlihat seperti ini.
Sebelum melakukan langkah ini, pastikan struktur direktori lokal sudah benar. Selanjutnya, lakukan add, commit dan push untuk memperbarui repositori GitHub.
Jalankan perintah berikut untuk melakukan add, commit dan push ke GitHub dan PWS.
```
git add .
git commit -m "<pesan_commit>"
git push origin master
git push pws master
```
- Ubah <pesan_commit> sesuai dengan keinginan. Contoh: git commit -m "tutorial 2 selesai".

Referensi Tambahan

Kontributor

Fiona Ratu Maheswari (FIO)
Anthony Edbert Feriyanto (ANT)
Meutia Fajriyah (MEW)
Yeshua Marco Gracia (ACO)

Credits

Tutorial ini dikembangkan berdasarkan PBP Ganjil 2025 dan PBP Ganjil 2024 yang ditulis oleh Tim Pengajar dan Asisten Dosen Pemrograman Berbasis Platform 2025 dan 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.

Tujuan Pembelajaran​​

Pengenalan Data Delivery​

XML (Extensible Markup Language)​

JSON (JavaScript Object Notation)​

Pre-Tutorial Notes​

Tutorial: Implementasi Skeleton sebagai Kerangka Views​

Tutorial: Membuat Form Input Data dan Menampilkan Data Football News Pada HTML​

Tutorial Mengembalikan Data dalam Bentuk XML​

Tutorial: Mengembalikan Data dalam Bentuk JSON​

Tutorial: Mengembalikan Data Berdasarkan ID dalam Bentuk XML dan JSON​

Tutorial: Penggunaan Postman Sebagai Data Viewer​

Penutup​

Referensi Tambahan​

Kontributor​

Credits​