Tutorial 1: Dasar-Dasar Git dan Django

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

Tujuan Pembelajaran

Setelah menyelesaikan tutorial ini, mahasiswa diharapkan untuk dapat:

Mengerti perintah-perintah dasar git yang perlu diketahui untuk mengerjakan proyek aplikasi.
Menggunakan perintah-perintah dasar git yang perlu diketahui untuk mengerjakan proyek aplikasi.
Membuat repositori git lokal dan daring (GitHub).
Menambahkan remote antara repositori git lokal dan pasangannya pada GitHub.
Memahami branching pada git dan mampu melakukan merge request/pull request.
Mengerti konfigurasi routing yang ada pada urls.py.
Memahami kaitan models, views dan template pada Django.
Memahami sintaks dasar untuk melakukan mapping data ke templat HTML.
Melakukan deployment aplikasi Django pada Railway.

Pengenalan git

Dalam kehidupanmu sebagai mahasiswa Ilmu Komputer atau Sistem Informasi, kamu mungkin pernah menggunakan sebuah version control system. Salah satu yang mungkin kamu pakai adalah fitur undo pada text editor. Ketika kamu membuat suatu kesalahan, kamu bisa mengembalikan kesalahanmu ke waktu sebelum kamu membuat kesalahan dengan fitur undo tersebut. Contoh lain adalah ketika kamu mengerjakan dokumen secara kolaboratif di Google Drive, kamu bisa melihat setiap perubahan yang dilakukan di dokumen tersebut dan kamu bisa mengembalikan ke perubahan sebelumnya.

Pada tutorial ini, kamu akan mempelajari sebuah version control system bernama git. git merupakan sebuah version control system yang umum digunakan untuk melacak perubahan pada artefak-artefak perangkat lunak seperti source code, halaman HTML, atau stylesheet. git akan mencatat perubahan-perubahan yang terjadi pada pekerjaan kamu sebagai sebuah rangkaian commit yang tersusun dari commit terlama hingga commit yang terbaru. Perubahan tersebut seperti sebuah graph yang mana node merepresentasikan sebuah commit dan directed edge(s) merepresentasikan hubungan antara suatu commit dengan commit sebelumnya.

Jangan khawatir jika kamu masih asing dengan terminologi seperti: node, edge, dan graph. Kamu akan mempelajarinya lebih lanjut dalam mata kuliah Struktur Data & Algoritma dan Matematika Diskret.

Sebelum melakukan tutorial ini dan tutorial-tutorial selanjutnya, pastikan kamu telah memasang tools berikut:

git
Python (Latest Version)
Text editor atau IDE yang baik, seperti Vim, Visual Studio Code, Sublime, atau PyCharm.

Untuk meringkas dokumen tutorial ini, cara penginstalan dan konfigurasi masing-masing perlengkapan dapat dilihat melalui tautan diatas.

Tutorial: Basic git dan GitHub

Bukalah command prompt atau shell favoritmu. Jika kamu menggunakan Windows, gunakan git Bash atau cmd (hanya berlaku jika kamu telah menambahkan path ke folder executable git ke PATH di environment variable). Jika kamu menggunakan OS berbasis Unix (Linux atau Mac OS), kamu bisa menggunakan shell yang tersedia pada OS-mu, seperti bash.

Walaupun kamu bisa menggunakan aplikasi GUI seperti built-in GUI git, gitKraken, atau SourceTree, kami merekomendasikan untuk menggunakan perintah melalui shell. Shell merupakan salah satu tools yang paling umum digunakan saat pengembangan Web, terutama saat kamu harus men-deploy aplikasi web kamu ke remote server. Akan sangat berguna jika kamu mengetahui perintah shell dan git ketika GUI tidak dapat diakses. Mengeksekusi perintah melalui shell juga lebih cepat dibandingkan menggunakan GUI.
Ubah direktori ke folder yang akan kamu gunakan untuk menyimpan pekerjaanmu. Gunakan perintah cd untuk melakukan navigasi ke direktori yang kamu inginkan.
Buat folder baru untuk menyimpan file yang berhubungan dengan tutorial ini. Cobalah untuk membuat folder bernama django_exercise dan ubah direktori (cd) ke folder tersebut.
Dalam direktori tersebut, ketik git init untuk membuat repositori git kosong.
Cobalah untuk mengeksekusi perintah git status untuk melihat status dari repositori kamu ketika perintah tersebut dijalankan.

Saat ini, kamu telah berhasil membuat respositori git lokal pertamamu. Sebelum melanjutkan tutorial, ada beberapa konfigurasi yang harus kamu lakukan ke repositori git lokalmu:

Atur username dan email yang akan diasosiasikan dengan pekerjaanmu ke repositori git ini.

git config user.name "<NAME>"
git config user.email "<EMAIL>"

Contoh:

git config user.name "P. Bepe"
git config user.email "p.bepe@ui.ac.id"

Jika kamu ada dalam sebuah proxy (contoh: menggunakan PC di lab Fasilkom), kamu harus mengatur HTTP proxy pada konfigurasi git.
```
git config http.proxy <PROXYHOST>:<PORT>
```
Contoh (Jika kamu menggunakan PC di lab Fasilkom):
```
git config http.proxy 152.118.24.10:8080
```
Jika kamu ingin mengatur konfigurasi secara global (untuk setiap repositori lokal), tambahkan flag --global pada pemanggilan git config.
Jika kamu ingin mengetahui konfigurasi yang diatur ke repositori lokalmu, kamu bisa menggunakan perintah berikut.
```
git config --list --local
```

Setelah mengatur repositori git, silakan melanjutkan ke instruksi tutorial.

Buat file baru dengan nama README.md dalam direktori yang kamu inisiasi dengan repositori git dan tulis nama, NPM, dan kelas pada baris pertama, ketiga, dan kelima pada file README.md tersebut.

Contoh:
```
Nama    : P. Bepe

NPM     : 2106123456

Kelas   : Z
```
Eksekusi perintah git status dalam bash. Perhatikan bahwa terdapat untracked file bernama README.md. Ini menandakan bahwa ada file yang belum di-track oleh git.
Beritahu git untuk men-track perubahan yang ada pada README.md.
```
git add README.md
```
Eksekusi perintah git status lagi. Pesan status akan berubah dari eksekusi sebelumnya. Sekarang file tersebut masuk pada bagian Changes to be committed. Ini menandakan file tersebut akan di-track oleh git pada commit selanjutnya.

Walaupun kamu sudah mengeksekusi perintah git add, file README.md belum sepenuhnya di-track oleh git. git add hanya memberi tahu git untuk memasukan perubahan dari file tersebut ke dalam staging area.
Untuk menyimpan perubahan secara permanen ke dalam git, eksekusi perintah git commit. Text editor akan muncul untuk mengetikkan pesan yang menggambarkan commit yang telah kamu buat dan akan disimpan pada riwayat git.

Sebuah commit dapat berarti perubahan yang kamu lakukan pada repositori lokal. Perubahan tersebut dapat berupa penambahan, perubahan dalam file, atau penghapusan satu atau lebih file.
Setelah kamu selesai menulis pesan commit, simpan dan keluar dari text editor yang kamu gunakan untuk menulis pesan. Semua perubahan akan disimpan sebagai commit dan akan disimpan dalam riwayat git.

Kamu baru saja membuat repositori git lokal dan mulai memantau perubahan dari suatu file yang ada pada repositori. Jika kamu ingin membagikan hasil pekerjaanmu dengan tutor atau dengan tim kamu, kamu harus mengatur repositori tersebut agar dapat diakses melalui Internet. Untuk melakukan ini, kamu harus menaruh salinan dari repositori lokalmu ke repositori git daring seperti GitHub.

Bukalah GitHub menggunakan web browser favoritmu.
Buatlah akun baru atau akun yang kamu punya jika kamu telah melakukan registrasi sebelum mengikuti tutorial ini.
Buat repositori baru bernama Django Tutorial dan buka laman repositori. Pastikan kamu mengatur project visibility menjadi public.
Cari dan klik tombol clone pada laman repositorimu. Perhatikan bahwa terdapat dua tipe cara untuk meng-clone repositori, yaitu dengan menggunakan HTTPS dan SSH. Salin URL yang menggunakan HTTPS.
Perbarui repositori git lokalmu agar semua commit dapat disimpan di repositori GitHub-mu. Gunakan perintah git remote add origin <URL_REPOSITORY> dan gunakan URL yang tadi kamu salin sebagai argumen dari perintah tersebut.
```
git remote add origin <URL_REPOSITORY>
```
Contoh:
```
git remote add origin https://github.com/adrianholovaty/my-first-repo.git
```
git remote add origin akan memberi tahu repositori lokal untuk menambahkan path bernama origin yang menunjuk ke URL yang diberikan. Dengan begitu, kamu dapat menyimpan semua commit yang kamu buat ke repositori daring menggunakan perintah git push.
Untuk menyimpan semua commit ke repositori daring di GitHub, eksekusi perintah git push. Kamu juga harus menambahkan nama remote dan branch yang akan diunggah (atau di-push).
```
git push -u <REMOTE_NAME> <DEFAULT_BRANCH>
```
Contoh:
```
git push -u origin main
```
git push akan memerintah git untuk mengunggah semua commit yang ada di branch lokal main ke repositori yang ditunjuk oleh remote origin. flag -u akan memastikan pemanggilan git push saat branch main aktif akan di kirim ke branch main di origin.
Perhatikan laman repositori GitHub kamu. Kamu akan melihat file kamu berhasil disimpan dan dapat diakses di GitHub.

Kamu juga bisa unduh (clone) repositori git lainnya ke komputermu. Cobalah untuk membuat salinan dari repositori di GitHub pada direktori yang berbeda dalam komputermu.

Bukalah laman repositori kamu di GitHub.
Salin URL clone dengan HTTPS.
Bukalah command prompt atau shell dan navigasi ke direktori berbeda di luar direktori repositori lokal yang telah kamu buat sebelumnya.
Eksekusi perintah git clone <URL> dengan keterangan <URL> adalah URL repositori yang akan di-clone.
Perhatikan bahwa nama direktori baru yang telah dibuat sama dengan nama dari repositorimu.

Pada tahap ini, kamu sebenarnya sudah punya 3 repositori: (1) orisinil, repositori lokal, (2) repositori daring di GitHub yang telah terkoneksi dengan repositori pertama, dan (3) repositori lainnya yang kamu clone dari repositori (2). Sekarang coba tambahkan commit baru di repositori (1), push ke repositori (2), dan unduh (istilah git: pull) ke repositori (3).

Bukalah direktori repositori lokal yang kamu insiasi sebelumnya untuk pertama kalinya.
Ubah file README.md dengan menambahkan string yang mendeskripsikan hobi kamu pada baris ketujuh.

Contoh:
```
Nama    : P. Bepe

NPM     : 2106123456

Kelas   : Z

Hobi    : Tidur
```
Simpan file tersebut dan tambahkan ke repositori git lokal.
Commit file tersebut dan push ke GitHub.
Cek laman repositori GitHub kamu. Pastikan README.md sudah ter-update. Kamu bisa membandingkannya dengan versi sebelumnya dengan mengecek diff antara commit terakhir dengan commit sebelumnya.
Bukalah direktori repositori lokal hasil clone repositori dari GitHub.
Update repositori tersebut dengan mengeksekusi perintah git pull origin main.
Cek repositori yang kamu clone. Kamu dapat melihat bahwa file README.md juga telah ter-update.

Selamat! Anda setidaknya telah mengetahui perintah git dasar yang dapat kamu gunakan untuk mengelola pekerjaanmu di git dan GitHub. Kamu mungkin bertanya mengapa kita perlu bersusah-susah melakukan skilus add-commit-push-pull ini? Mengapa kita tidak gunakan Dropbox atau Google Drive saja?

Benar bahwa Dropbox, Google Drive, atau layanan cloud storage lainnya lebih mudah digunakan. Namun, tools tersebut digunakan untuk hal yang lebih umum. Tools tersebut tidak dibuat secara spesifik untuk mengatasi perubahan terhadap artefak-artefak perangkat lunak, khususnya ketika ada perubahan yang dilakukan secara bersamaan dan melibatkan banyak pihak. git, sebagai version control system, dapat memastikan integritas dari semua perubahan ketika ada beberapa pihak yang bekerja secara bersamaan dalam satu repositori. Kamu akan belajar lebih lanjut mengenai cara menggunakan version control system di lingkup keja tim selanjutnya di mata kuliah ini dan mata kuliah selanjutnya (IK: Pemrograman Lanjut, SI: Arsitektur dan Pemrograman Aplikasi Perusahaan).

Tutorial: Branch dan Merge

Setelah mempelajari beberapa dasar dari git, kamu akan mulai mempelajari beberapa konsep lanjutan dari git. Pada pengembangan aplikasi, kita sebagai developer akan lebih banyak bekerja sama dengan orang lain sebagai tim. Beruntungnya, git memiliki fitur untuk mengakomodasi kolaborasi antar developer. Beberapa fitur yang dimaksud adalah branch dan merge.

Secara sederhana, branch adalah fitur git yang memungkinkan sebuah source code yang disimpan pada git memiliki versi lain atau biasanya cabang yang berisikan perubahan-perubahan sesuai dengan kebutuhan dan developer yang mengembangkannya. Umumnya setelah kita melakukan git push, perubahan yang kita simpan akan masuk ke dalam cabang yang dituju oleh kita. Kegunaan branch ini adalah untuk menghindari tabrakan, konflik serta race condition dalam hal melakukan perubahan ketika sedang dalam pengembangan.

Adapun merge adalah fitur git yang digunakan untuk menggabungkan suatu perubahan yang telah disimpan dalam satu branch ke dalam branch target. Pada saat melakukan git merge, kejadian merge conflict dapat terjadi. Merge conflict adalah sebuah konflik yang terjadi apabila terdapat perubahan pada file yang sama dalam dua branch berbeda atau ketika satu file telah dihapus pada branch pertama, namun berkas tersebut ada dan mengalami perubahan pada branch kedua. Untuk menyelesaikan merge conflict, biasanya developer dapat menggunakan GUI yang telah disiapkan oleh git pada GitHub. Namun apabila platform tersebut sedang tidak dapat mengakomodasi proses merge conflict, biasanya developer akan diminta untuk menyelesaikannya di repositori lokal mereka.

Sekarang kita akan mencoba untuk menerapkan konsep branch dan merge.

Pada direktori git lokal yang telah kita kerjakan pada tutorial sebelumnya, buatlah sebuah branch baru di repositori tersebut.
```
git checkout -b <NAMA_BRANCH>
```
Contoh:
```
git checkout -b second
```
Sekarang, sebuah branch baru telah dibuat. Kamu bisa melihat branch apa saja yang ada di repositori lokal dengan command git branch. Untuk melakukan switching ke branch lain, kamu dapat langsung melakukannya dengan perintah git checkout <NAMA_BRANCH>.
Buatlah sebuah perubahan pada file README.md dengan mengubah hobi kamu di baris ketujuh ke hobi lain.

Contoh:
```
Nama    : P. Bepe

NPM     : 2106123456

Kelas   : Z

Hobi    : Usil
```
Simpan file tersebut dan tambahkan ke repositori git lokal.
Commit file tersebut dan push ke GitHub.
Cek laman repositori GitHub kamu. Pada pilihan branch yang ada di repositori kamu, sekarang kamu dapat melihat terdapat branch baru yang baru saja kamu buat.
Sekarang merge atau gabungkan branch baru tersebut ke branch utama dari repositori. Kamu dapat melakukannya dengan memilih tab pull request pada halaman repositori kamu di GitHub dan memilih opsi new pull request.
Pilihlah branch main sebagai base dan branch baru kamu sebagai compare. Setelah memilih branch tersebut, kamu dapat melihat perbedaan antara dua branch yang akan digabungkan. Pilihlah create pull request untuk menggabungkan kedua branch tersebut.
Setelah itu, kamu akan masuk ke sebuah halaman form untuk mengisi informasi tentang pull request yang akan kamu lakukan. Kamu dapat mengisi deskripsi tentang pull request serta mengubah judul dari pull request. Untuk saat ini diamkan saja dulu dan langsung pilihlah create pull request.
GitHub akan secara otomatis melakukan cek dan membandingkan antara kedua branch yang ingin digabungkan. Apabila tidak ada konflik, kamu bisa langsung memilih merge pull request.
Sekarang kedua branch telah tergabung. Kamu bisa melihat perubahan yang kamu lakukan di branch baru telah tersimpan atau tergabung dalam branch main.

Tutorial: Membuat Proyek dan Aplikasi Django beserta Konfigurasi Model

Sebagai bayangan, berikut adalah struktur direktori proyek setelah kamu menyelesaikan tutorial ini.

Directory Structure

Di dalam direktori django_exercise, bukalah command prompt atau shell dan buatlah sebuah virtual environment. Virtual environment ini berguna untuk mengisolasi package serta dependencies dari aplikasi sehingga tidak bertabrakan dengan versi lain yang ada pada komputermu. Kamu dapat membuat virtual environment dengan perintah:
```
python -m venv env
```
Nyalakan virtual environment yang telah dibuat dengan perintah berikut. Pastikan saat ini kamu sedang berada pada direktori django_exercise yang telah dibuat sebelumnya. Perhatikan pula bahwa Windows dengan Unix memiliki perintah yang berbeda. Apabila virtual environment berhasil dinyalakan, kamu dapat melihat sebuah teks (env) di posisi paling kiri dari baris input shell milikmu.
- Windows
```
env\Scripts\activate.bat
```
- Unix (Linux & Mac OS)
```
source env/bin/activate
```

Buatlah file baru pada folder tersebut dengan nama requirements.txt dan tambahkan beberapa dependencies berikut ini yang dibutuhkan ke dalam file tersebut.

asgiref==3.6.0
certifi==2022.12.7
charset-normalizer==3.0.1
Django==4.1.6
gunicorn==20.1.0
idna==3.4
psycopg2-binary==2.9.5
requests==2.28.2
sqlparse==0.4.3
tzdata==2022.7
urllib3==1.26.14
whitenoise==6.3.0

Instal dependencies yang diperlukan untuk menjalankan proyek Django dengan perintah perintah pip install -r requirements.txt.
Buatlah sebuah proyek Django baru bernama django_tutorial dengan perintah django-admin startproject django_tutorial . (pakai titik di akhir perintah).
Eksekusi perintah python manage.py runserver di Windows atau ./manage.py runserver di OS berbasis Unix untuk menjalankan aplikasi Django. Pastikan bahwa file manage.py ada pada direktori yang aktif pada shell kamu saat ini.
Bukalah http://localhost:8000 menggunakan browser favoritmu untuk melihat aplikasi Django yang telah kamu buat. Kamu sekarang dapat melihat sebuah roket sedang meluncur di halaman tersebut. Selamat! Kamu telah berhasil membuat aplikasi Django dari awal.
Untuk mematikan server Django yang sedang berjalan, kamu dapat menggunakan tombol Ctrl+C pada Windows/Linux atau Command+C pada MacOS.
Selanjutnya, buatlah sebuah django-app bernama money_tracker dengan perintah python manage.py startapp money_tracker.
Buka settings.py di folder django_tutorial dan tambahkan aplikasi money_tracker ke dalam variabel INSTALLED_APPS untuk mendaftarkan django-app yang sudah kamu buat ke dalam proyek Django-mu. Contohnya adalah sebagai berikut.
```
INSTALLED_APPS = [
    ...,
    'money_tracker',
]
```

Buka file models.py yang ada di folder money_tracker dan tambahkan potongan kode berikut.

from django.db import models

class TransactionRecord(models.Model):
    name = models.CharField(max_length=50)
    type = models.CharField(max_length=20)
    amount = models.IntegerField()
    date = models.DateTimeField(auto_now_add=True)
    description = models.TextField()

Lakukan perintah python manage.py makemigrations untuk mempersiapkan migrasi skema model ke dalam database Django lokal.
Jalankan perintah python manage.py migrate untuk menerapkan skema model yang telah dibuat ke dalam database Django lokal.

Tutorial: Implementasi Views Dasar

Sebelum kita mengimplemetasikan views, kita perlu membuat suatu skeleton yang berfungsi sebagai kerangka views dari situs web kita.

Buatlah folder templates pada root folder (jika belum ada) dan buatlah sebuah file baru bernama base.html. Isilah file 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">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
{% block meta %}
{% endblock meta %}
</head>

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

</html>

Bukalah settings.py yang ada pada folder django_tutorial dan carilah baris yang mengandung TEMPLATES. Sesuaikan kode yang ada dengan potongan kode berikut agar file base.html terdeteksi sebagai file templat.

...
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': [BASE_DIR / 'templates'],
        'APP_DIRS': True,
        ...
    }
]
...

Setelah membuat kerangka dasar HTML untuk situs web, maka kita baru dapat membuat view baru tanpa perlu mendeklarasikan struktur dasar HTML dari awal.

Buka views.py yang ada pada folder money_tracker dan buatlah sebuah fungsi yang menerima parameter request dan mengembalikan render(request, "tracker.html"). Contohnya adalah sebagai berikut.
```
def show_tracker(request):
    return render(request, "tracker.html")
```

Buatlah sebuah folder bernama templates di dalam folder aplikasi money_tracker dan buatlah sebuah berkas bernama tracker.html. Isi dari tracker.html dapat kamu isi dengan template berikut.

{% extends 'base.html' %}

{% block content %}
<h5>Nama: </h5>
<p>Fill me!</p>

<table>
    <tr>
        <th>Nama</th>
        <th>Jenis</th>
        <th>Jumlah</th>
        <th>Tanggal</th>
        <th>Deskripsi</th>
    </tr>
    {% comment %} Tambahkan data di bawah baris ini {% endcomment %}
</table>

{% endblock content %}

Buatlah sebuah berkas di dalam folder aplikasi money_tracker bernama urls.py untuk melakukan routing terhadap fungsi views yang telah kamu buat sehingga nantinya halaman HTML dapat ditampilkan lewat browser-mu. Isi dari urls.py tersebut adalah sebagai berikut.
```
from django.urls import path
from money_tracker.views import show_tracker

app_name = 'money_tracker'

urlpatterns = [
    path('', show_tracker, name='show_tracker'),
]
```
Daftarkan juga aplikasi money_tracker ke dalam urls.py yang ada pada folder django_tutorial dengan menambahkan potongan kode berikut pada variabel urlpatterns.
```
...
from django.urls import path, include
...
path('tracker/', include('money_tracker.urls')),
...
```
Jalankan proyek Django-mu dengan perintah python manage.py runserver dan bukalah http://localhost:8000/tracker/ di browser favoritmu untuk melihat halaman yang sudah kamu buat.

Apabila muncul sebuah halaman yang berisikan tabel money tracker, maka selamat! Kamu telah berhasil melakukan routing sebuah fungsi views yang dapat melakukan render sebuah halaman HTML. Akan tetapi seperti yang dapat kamu lihat, tidak ada data pada tabel money tracker tersebut. Kamu juga dapat melihat tidak jelas milik siapa money tracker tersebut sehingga kamu ingin menampilkan nama kamu ke dalam money tracker tersebut. Sekarang, kamu akan mempelajari bagaimana menampilkan data ke dalam HTML dari database Django lokal maupun data atau variabel yang kamu definisikan dalam berkas views.py.

Tutorial: Menghubungkan Models dengan Views dan Template

Pada fungsi views yang telah kamu buat, impor model yang sudah kamu buat sebelumnya ke dalam file views.py. Kamu akan menggunakan class tersebut untuk melakukan pengambilan data dari database. Contohnya adalah sebagai berikut.
```
from django.shortcuts import render
from money_tracker.models import TransactionRecord
...
```
Tambahkan potongan kode di bawah ini ke dalam fungsi show_tracker yang sudah kamu buat sebelumnya. Potongan kode ini berfungsi untuk memanggil fungsi query ke model database dan menyimpan hasil query tersebut ke dalam sebuah variabel.

Sesuaikan isi variabel name dengan nama kalian, ya. 😉
```
transaction_data = TransactionRecord.objects.all()
context = {
    'list_of_transactions': transaction_data,
    'name': 'Kak Athal'
}
```

Tambahkan context sebagai parameter ketiga pada pengembalian fungsi render di fungsi yang sudah kamu buat sebelumnya. Data yang ada pada variabel context tersebut akan ikut di-render oleh Django sehingga nantinya kamu dapat memunculkan data tersebut pada halaman HTML.

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

Dengan demikian, kode show_tracker menjadi seperti berikut.

from django.shortcuts import render
from money_tracker.models import TransactionRecord

def show_tracker(request):
    transaction_data = TransactionRecord.objects.all()
    context = {
        'list_of_transactions': transaction_data,
        'name': 'Kak Athal'
    }
    return render(request, "tracker.html", context)

Sekarang, kamu akan belajar melakukan mapping terhadap data yang telah ikut di-render pada fungsi views untuk dapat memunculkannya di halaman HTML. Untuk melakukan mapping tersebut, kamu dapat menggunakan sintaks khusus template yang ada pada Django, yakni {{data}}. Apabila kamu tertarik untuk mengetahui lebih jauh tentang sintaks dari template yang ada pada Django, kamu dapat membaca dan mempelajari lebih dalam di dokumentasi template tags Django.

Bukalah file HTML yang sudah kamu buat sebelumnya pada folder templates yang ada di dalam direktori money_tracker.
Ubah Fill me! yang ada di dalam HTML tag <p> menjadi {{name}} untuk menampilkan nama kamu di halaman HTML. Contohnya adalah sebagai berikut.
```
...
<h5>Nama: </h5>
<b>{{name}}</b>
...
```
Untuk menampilkan daftar transaksi ke dalam tabel, kamu perlu melakukan iterasi terhadap variabel list_of_transactions yang telah kamu ikut render ke dalam HTML. Perhatikan bahwa kamu tidak dapat memanggil daftar transaksi tersebut secara langsung seperti yang kamu lakukan pada langkah 2 sebab variabel list_of_transactions merupakan sebuah kontainer yang berisikan objek. Kamu juga perlu memanggil nama variabel/atribut spesifik dari objek yang ada dalam kontainer tersebut untuk memanggil data dari objek tersebut. Contohnya adalah sebagai berikut.
```
...
{% for transaction in list_of_transactions %}
    <tr>
        <td>{{transaction.name}}</td>
        <td>{{transaction.type}}</td>
        <td>{{transaction.amount}}</td>
        <td>{{transaction.date}}</td>
        <td>{{transaction.description}}</td>
    </tr>
{% endfor %}
...
```

Coba lakukan runserver; seharusnya kamu dapat melihat kolom nama berubah menjadi nama yang telah kamu isi sebelumnya pada file views.py.

Tutorial: Melakukan Deploy Aplikasi Django ke Railway

Sebelum kita melakukan automated deployment, kita perlu melakukan konfigurasi tambahan agar situs web yang kita buat dapat bekerja dengan baik.

Buatlah sebuah file bernama Procfile (tanpa ada ekstensi file) pada root folder dan isilah file tersebut dengan kode berikut.
```
web: python manage.py migrate && gunicorn django_tutorial.wsgi
```

Bukalah file settings.py yang ada pada folder django_tutorial. Tambahkan baris kode berikut setelah bagian DEBUG.

ALLOWED_HOSTS = [f'{APP_NAME}.up.railway.app']
CSRF_TRUSTED_ORIGINS = [f'https://{APP_NAME}.up.railway.app']

Setelah melakukan konfigurasi, silakan push proyek kamu ke GitHub dan lakukan hal-hal berikut.

Bukalah situs web Railway, klik tombol Login di pojok kanan atas, dan pilih GitHub sebagai metode login.
Selesaikan proses registrasi sehingga kamu kembali ke halaman pembuatan proyek baru.
Klik pilihan Deploy from GitHub repo dan pilih repositori tempat kamu menaruh proyek Django kamu.
Buka proyek, klik kotak web, dan klik menu Variables. Buatlah variabel baru bernama APP_NAME dan isilah dengan nama situs web yang kamu ingin pakai.
Buka menu Settings dan ubah nama domain situs web kamu sesuai yang telah kamu buat sebelumnya.
Lakukan push ulang apabila Railway tidak melakukan deployment ulang setelah kamu mengubah pengaturan.

Voila! Seharusnya situs web kamu dapat dibuka dan menghasilkan halaman yang telah kamu buat sebelumnya.

Credits

Tutorial ini dikembangkan berdasarkan PBP Ganjil 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.

Pembaruan terakhir: 18 Februari 2023 08:17:10
Dibuat: 15 Februari 2023 12:12:10