Tutorial 2: Form dan Data Delivery

Pemrograman Berbasis Platform (CSGE602022) — diselenggarakan oleh Fakultas Ilmu Komputer Universitas Indonesia, Semester Ganjil 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.

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 <person> 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.

Tutorial: Panduan Mengatur Routing dari `main/` ke `/`

Sebelum kita masuk ke pembahasan mengenai form, kita akan mengubah routing main/ menjadi / agar lebih sesuai dengan konvensi yang ada dan kami harap dapat menjawab pertanyaan kalian mengenai hal ini.

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

Jalankan virtual environment terlebih dahulu.
- Windows:
```
env\Scripts\activate.bat
```
- Unix (Mac/Linux):
```
source env/bin/activate
```
Buka urls.py yang ada pada folder shopping_list dan ubahlah path main/ menjadi '' pada urlpatterns seperti berikut.
```
urlpatterns = [
    path('', include('main.urls')),
    path('admin/', admin.site.urls),
]
```
Jalankan server dengan perintah python manage.py runserver dan bukalah http://localhost:8000/ di browser favoritmu untuk melihat hasilnya.

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.

Buat folder templates pada 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>

Buka settings.py yang ada pada subdirektori shopping_list dan carilah baris yang mengandung 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 kode ini
        'APP_DIRS': True,
        ...
    }
]
...

Pada subdirektori templates yang ada pada direktori main, ubahlah kode berkas main.html yang telah dibuat di tutorial sebelumnya menjadi sebagai berikut.
```
{% extends 'base.html' %}

{% block content %}
    <h1>Shopping List 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 Produk Pada HTML

Sampai saat ini, belum ada data yang ditambahkan ke dalam aplikasi. Sekarang, kita akan membuat sebuah form sederhana untuk menginput data barang 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 produk baru. Tambahkan kode berikut ke dalam berkas forms.py.
```
from django.forms import ModelForm
from main.models import Product

class ProductForm(ModelForm):
    class Meta:
        model = Product
        fields = ["name", "price", "description"]
```
Penjelasan Kode:
- model = Product untuk menunjukkan model yang digunakan untuk form. Ketika data dari form disimpan, isi dari form akan disimpan menjadi sebuah objek Product.
- fields = ["name", "price", "description"] untuk menunjukkan field dari model Product 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.http import HttpResponseRedirect
from main.forms import ProductForm
from django.urls import reverse

Buat fungsi baru dengan nama create_product pada berkas tersebut yang menerima parameter request dan tambahkan potongan kode di bawah ini untuk menghasilkan formulir yang dapat menambahkan data produk secara otomatis ketika data di-submit dari form.
```
def create_product(request):
    form = ProductForm(request.POST or None)

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

    context = {'form': form}
    return render(request, "create_product.html", context)
```
Penjelasan Kode:
- form = ProductForm(request.POST or None) digunakan untuk membuat ProductForm 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 HttpResponseRedirect(reverse('main:show_main')) digunakan untuk melakukan redirect setelah data form berhasil disimpan.

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

def show_main(request):
    products = Product.objects.all()

    context = {
        'name': 'Pak Bepe', # Nama kamu
        'class': 'PBP A', # Kelas PBP kamu
        'products': products
    }

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

Penjelasan Kode:

Fungsi Product.objects.all() digunakan untuk mengambil seluruh object Product yang tersimpan pada database.

Buka urls.py yang ada pada folder main dan import fungsi create_product yang sudah kamu buat tadi.
```
from main.views import show_main, create_product
```
Tambahkan path url ke dalam urlpatterns pada urls.py di main untuk mengakses fungsi yang sudah di-import pada poin sebelumnya.
```
path('create-product', create_product, name='create_product'),
```
Buat berkas HTML baru dengan nama create_product.html pada direktori main/templates. Isi create_product.html dengan kode berikut.
```
{% extends 'base.html' %} 

{% block content %}
<h1>Add New Product</h1>

<form method="POST">
    {% csrf_token %}
    <table>
        {{ form.as_table }}
        <tr>
            <td></td>
            <td>
                <input type="submit" value="Add Product"/>
            </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 }} digunakan untuk menampilkan fields form yang sudah dibuat pada forms.py sebagai table.
- <input type="submit" value="Add Product"/> digunakan sebagai tombol submit untuk mengirimkan request ke view create_product(request).

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

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

    {% comment %} Berikut cara memperlihatkan data produk di bawah baris ini {% endcomment %}

    {% for product in products %}
        <tr>
            <td>{{product.name}}</td>
            <td>{{product.price}}</td>
            <td>{{product.description}}</td>
            <td>{{product.date_added}}</td>
        </tr>
    {% endfor %}
</table>

<br />

<a href="{% url 'main:create_product' %}">
    <button>
        Add New Product
    </button>
</a>

{% endblock content %}

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

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
```
Buatlah sebuah fungsi 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 Product.
```
def show_xml(request):
    data = Product.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):
    data = Product.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.
Buka urls.py yang ada pada folder main dan import fungsi yang sudah kamu buat tadi.
```
from main.views import show_main, create_product, 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 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 Product.
```
def show_json(request):
    data = Product.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):
    data = Product.objects.all()
    return HttpResponse(serializers.serialize("json", data), content_type="application/json")

Buka urls.py yang ada pada folder main dan import fungsi yang sudah kamu buat tadi.
```
from main.views import show_main, create_product, 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 folder main dan buatlah sebuah fungsi baru yang menerima parameter request dan 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 Product.
```
data = Product.objects.filter(pk=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, id):
    data = Product.objects.filter(pk=id)
    return HttpResponse(serializers.serialize("xml", data), content_type="application/xml")

JSON

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

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

from main.views import show_main, create_product, 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/<int:id>/', show_xml_by_id, name='show_xml_by_id'),
path('json/<int: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/[id] atau http://localhost:8000/json/[id] di browser favoritmu untuk melihat hasilnya.

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:
Klik tombol Send untuk mengirimkan request tersebut.
Kamu akan melihat hasil response dari request tersebut pada bagian bawah Postman.
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.

Tutorial: Menambahkan Konfigurasi Deployment ke PaaS PBP Fasilkom UI

Pada tutorial ini, kita akan mencoba untuk mengonfirgurasi aplikasi Django yang sudah dibuat untuk deployment ke PaaS (Platform-as-a-Service) yang sudah disediakan khusus untuk keperluan PBP Fasilkom UI. Namun migrasi ke PaaS tersebut dilakukan secara bertahap, sehingga kita juga tetap melakukan deployment ke Adaptable sambil melakukan deployment ke PaaS PBP Fasilkom UI.

Pastikan kamu sudah mengisi form pendataan data deployment yang telah disediakan sebelumnya, karena PaaS PBP Fasilkom UI masih membutuhkan konfigurasi di sisi administrator.

Buka berkas requirements.txt pada root folder dan tambahkan django-environ di baris terakhir berkas. Jangan lupa untuk menyimpan berkas setelah kamu memodifikasinya.
Jalankan perintah pip install -r requirements.txt untuk menginstal perubahan pada berkas requirements.txt.
Buat berkas baru bernama Procfile (tanpa format ekstensi file) pada root folder dan isi berkas tersebut dengan kode berikut.
```
release: django-admin migrate --noinput
web: gunicorn project_name.wsgi
```
Sesuaikan project_name dengan nama proyek Django (shopping_list).
Buat folder baru bernama .github (dengan tanda titik di awal nama folder) pada root folder dan buat folder baru di dalam folder .github dengan nama workflows.

Buat berkas baru bernama pbp-deploy.yml di dalam folder workflows dan isi berkas tersebut dengan kode berikut.

name: Deploy

on:
  push:
    branches:
      - main
      - master

jobs:
  Deployment:
    if: github.ref == 'refs/heads/main'
    runs-on: ubuntu-latest
    steps:
    - name: Cloning repo
      uses: actions/checkout@v4
      with:
        fetch-depth: 0

    - name: Push to Dokku server
      uses: dokku/github-action@master
      with:
        branch: 'main'
        git_remote_url: ssh://dokku@${{ secrets.DOKKU_SERVER_IP }}/${{ secrets.DOKKU_APP_NAME }}
        ssh_private_key: ${{ secrets.DOKKU_SSH_PRIVATE_KEY }}

Buat berkas baru bernama .dockerignore (tanpa format ekstensi file dan tanda titik di awal) pada root folder dan isi berkas tersebut dengan kode berikut.

**/*.pyc
**/*.pyo
**/*.mo
**/*.db
**/*.css.map
**/*.egg-info
**/*.sql.gz
**/__pycache__/
.cache
.project
.idea
.pydevproject
.idea/workspace.xml
.DS_Store
.git/
.sass-cache
.vagrant/
dist
docs
env
logs
src/{{ project_name }}/settings/local.py
src/node_modules
web/media
web/static/CACHE
stats
Dockerfile
.gitignore
Dockerfile
db.sqlite3
**/*.md
logs/

Buat berkas baru bernama Dockerfile (tanpa format ekstensi file) pada root folder dan isi berkas tersebut dengan kode berikut.

FROM python:3.10-slim-buster

WORKDIR /app

ENV PYTHONUNBUFFERED=1 \
    PYTHONPATH=/app \
    DJANGO_SETTINGS_MODULE=shopping_list.settings \
    PORT=8000 \
    WEB_CONCURRENCY=2

# Install system packages required Django.
RUN apt-get update --yes --quiet && apt-get install --yes --quiet --no-install-recommends \
&& rm -rf /var/lib/apt/lists/*

RUN addgroup --system django \
    && adduser --system --ingroup django django

# Requirements are installed here to ensure they will be cached.
COPY ./requirements.txt /requirements.txt
RUN pip install -r /requirements.txt

# Copy project code
COPY . .

RUN python manage.py collectstatic --noinput --clear

# Run as non-root user
RUN chown -R django:django /app
USER django

# Run application
# CMD gunicorn shopping_list.wsgi:application

Buka berkas settings.py yang ada di dalam folder shopping_list.

Tambahkan kode import environ dan import os setelah baris kode from pathlib import Path.

from pathlib import Path
import environ # Tambahkan kode berikut
import os # Tambahkan kode berikut

Tambahkan kode env = environ.Env() setelah baris kode BASE_DIR.

BASE_DIR = Path(__file__).resolve().parent.parent

env = environ.Env() # Tambahkan kode berikut

Tambahkan kode berikut setelah baris kode SECRET_KEY.

# Automatically determine environment by detecting if DATABASE_URL variable.
# DATABASE_URL is provided by Heroku if a database add-on is added (e.g. Heroku Postgres).
PRODUCTION = env.bool('PRODUCTION', False)

Tambahkan kode berikut setelah bagian kode DATABASES.

# Set database settings automatically using DATABASE_URL.
if PRODUCTION:
    DATABASES = {
        'default': env.db('DATABASE_URL')
    }
    DATABASES["default"]["ATOMIC_REQUESTS"] = True

Tambahkan kode berikut setelah bagian kode STATIC_URL.

STATIC_URL = 'static/'

STATIC_ROOT = os.path.join(BASE_DIR, 'static')

Saat ini, kita sudah mengonfigurasi aplikasi Django kita untuk deployment ke PaaS PBP Fasilkom UI. Selanjutnya, kita akan mengonfigurasi repositori GitHub aplikasi kita agar deployment dapat dilakukan secara otomatis.

Buka repositori GitHub dari aplikasi kamu dan buka menu Settings yang ada di bagian paling kanan.
Buka menu Secrets and variables dan pilih submenu Actions.
Klik tombol New repository secret yang ada di bagian kanan untuk menambahkan variabel rahasia baru.
Buat tiga variabel rahasia baru dengan spesifikasi sebagai berikut.
Name Secret
DOKKU_SERVER_IP pbp.cs.ui.ac.id
DOKKU_APP_NAME UsernameSIAK-tutorial
DOKKU_SSH_PRIVATE_KEY [Isi dari SSH private key]
Sesuaikan UsernameSIAK-tutorial dengan data kalian, ya. Ubah juga tanda titik menjadi tanda strip. Contoh: muhammad-iqbal111-tutorial.
(13 September 2023) Untuk sekarang, jangan isi DOKKU_SERVER_IP dengan value yang diberikan. Isi variabel DOKKU_APP_NAME dan DOKKU_SSH_PRIVATE_KEY saja karena masih ada isu di server untuk saat ini.
Buka tutorial berikut untuk menyalin private key kamu.
Contoh hasil akan tampak seperti berikut.

Name	Secret
DOKKU_SERVER_IP	pbp.cs.ui.ac.id
DOKKU_APP_NAME	UsernameSIAK-tutorial
DOKKU_SSH_PRIVATE_KEY	[Isi dari SSH private key]

Kita telah mengonfigurasi repositori GitHub untuk deployment secara otomatis. Selamat, kamu telah mengonfigurasi proyek aplikasimu untuk deployment ke PaaS PBP Fasilkom UI!

Untuk mengakses deployment proyek aplikasimu di PaaS PBP Fasilkom UI, gunakan protokol HTTP dan UsernameSIAK-tutorial sebagai URL. Contohnya adalah http://muhammad-athallah01-tutorial.pbp.cs.ui.ac.id.

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. Selanjunya, lakukan add, commit dan push untuk memperbarui repositori GitHub. Ketika repositori GitHub diperbarui, Adaptable secara otomatis akan melakukan deploy kembali. Bila berhasil, fitur yang kamu buat pada tutorial ini sudah bisa diakses secara umum.
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

How to install Postman

Kontributor

Rayhan Putra Randi
Anindya Lokeswara
Kade Satrya Noto Sadharma
Alfredo Austin
Alya Azhar Agharid

Credits

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

Tutorial 2: Form dan Data Delivery

Tujuan Pembelajaran​​

Pengenalan Data Delivery​

XML (Extensible Markup Language)​

JSON (JavaScript Object Notation)​

Tutorial: Panduan Mengatur Routing dari main/ ke /​

Tutorial: Implementasi Skeleton sebagai Kerangka Views​

Tutorial: Membuat Form Input Data dan Menampilkan Data Produk 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​

Tutorial: Menambahkan Konfigurasi Deployment ke PaaS PBP Fasilkom UI​

Penutup​

Referensi Tambahan​

Kontributor​

Credits​