Flask Template Jinja: Layout, Variable, dan Loop
Mengembalikan string dari route cukup untuk memastikan aplikasi hidup. Namun begitu halaman membutuhkan judul, navigasi, daftar data, dan styling, menulis HTML langsung di dalam function akan cepat merepotkan. Flask memakai Jinja untuk memisahkan data Python dari tampilan HTML.
Route tetap bertugas mengambil dan menyiapkan data. Template menerima data tersebut, lalu menentukan bagaimana data ditampilkan. Pembagian ini sederhana, tetapi efeknya besar: kode Python tidak tenggelam di antara tag HTML, dan tampilan bisa diubah tanpa mengutak-atik alur aplikasi.
Kenapa Flask Mencari Folder templates?
Secara default, render_template("tasks.html") mencari file di folder templates/ yang berada di sebelah file aplikasi. Untuk contoh ini, susun project seperti berikut:
# File: folder-structure.txt
flask-first-route/
├── app.py
└── templates/
├── base.html
└── tasks.htmlNama foldernya penting. Kalau tasks.html diletakkan di luar templates/, Flask akan menampilkan error TemplateNotFound.
Kirim Data dari Route
Route /tasks menyiapkan list berisi beberapa dictionary. Bentuk ini memberi Jinja lebih banyak informasi daripada list string karena setiap task punya judul dan status selesai.
# File: app.py
from flask import Flask, render_template
app = Flask(__name__)
@app.get("/tasks")
def tasks():
items = [
{"title": "Write outline", "done": True},
{"title": "Record demo", "done": False},
{"title": "Publish post", "done": False},
]
return render_template("tasks.html", tasks=items)Argumen tasks=items membuat variable bernama tasks tersedia di template. Nama di kiri dipakai oleh Jinja, sedangkan nilai di kanan berasal dari Python. Namanya boleh sama, tetapi membedakannya di contoh ini membantu melihat perpindahan datanya.
Buat Layout yang Bisa Dipakai Ulang
base.html menyimpan kerangka yang dibutuhkan semua halaman. Bagian {% block content %} menjadi tempat bagi template lain untuk menyisipkan kontennya.
<!-- File: templates/base.html -->
<!doctype html>
<html lang="id">
<head>
<meta charset="utf-8">
<title>{% block title %}Flask Tasks{% endblock %}</title>
</head>
<body>
<nav><a href="/tasks">Tasks</a></nav>
<main>
{% block content %}{% endblock %}
</main>
</body>
</html>Sekarang tasks.html cukup mewarisi layout tersebut. Ia tidak perlu menulis ulang doctype, <head>, navigasi, dan tag <main>.
<!-- File: templates/tasks.html -->
{% extends "base.html" %}
{% block title %}Daftar Task{% endblock %}
{% block content %}
<h1>Tasks</h1>
{% if tasks %}
<ul>
{% for task in tasks %}
<li>
{{ task.title }}
{% if task.done %}<strong>Selesai</strong>{% endif %}
</li>
{% endfor %}
</ul>
{% else %}
<p>Belum ada task.</p>
{% endif %}
{% endblock %}Mengenali Sintaks Jinja
Ada dua bentuk penanda yang paling sering dipakai:
{{ ... }}menampilkan sebuah nilai, misalnya{{ task.title }}.{% ... %}menjalankan logic tampilan sepertiif,for,extends, ataublock.
Saat loop berjalan, setiap dictionary dari list tasks masuk ke variable task. Jinja mengizinkan field dictionary dibaca dengan gaya titik, sehingga task.title setara dengan mengambil key "title".
Conditional {% if tasks %} menangani keadaan ketika list kosong. Tanpa bagian else, halaman hanya menampilkan judul dan user bisa mengira aplikasinya rusak. Pesan kosong yang singkat membuat keadaan halaman lebih jelas.
Jinja juga melakukan HTML escaping pada variable secara default. Jika judul task berisi tag seperti <script>, tag itu ditampilkan sebagai teks alih-alih langsung dijalankan browser. Hindari memakai filter safe pada input user kecuali isinya memang sudah dibersihkan.
Jaga Logic Tetap di Tempatnya
Template boleh memutuskan apakah label perlu tampil atau bagaimana list diulang. Namun query database, perhitungan harga, dan aturan bisnis sebaiknya tetap berada di Python. Patokan sederhananya: kalau logic itu juga dibutuhkan API atau proses lain, jangan simpan hanya di template.
Untuk menguji pemahamanmu, coba kosongkan items, tambahkan field priority, lalu tampilkan label prioritas pada setiap task. Setelah itu buat about.html yang juga mewarisi base.html. Kalau perubahan navigasi cukup dilakukan sekali di base.html, berarti layout bersama sudah bekerja seperti yang diharapkan.
Artikel Terkait
Lanjutkan membaca topik yang masih satu konteks.
Flask Routing: URL, Request, dan Response
Pelajari Flask routing lewat URL, path parameter, query string, HTTP method, dan status code untuk membuat request serta response yang jelas.
Flask Tutorial: Setup dan Route Pertama
Pelajari setup Flask dengan virtual environment, install package, buat app.py, dan pahami alur request sampai route pertama tampil di browser.
CRUD Flask dan MySQL: Auth, Testing, dan Caching
Bangun aplikasi CRUD Flask dengan MySQL, authentication, testing, caching, setup environment, dan struktur project siap deploy.
Tutorial Membuat Website Menggunakan Framework Flask
Tutorial untuk membuat aplikasi web menggunakan Flask, sebuah framework web berbasis bahasa Python yang cukup ringan dan mudah digunakan. Flask sangat cocok untuk para pemula yang ingin belajar membuat sebuah aplikasi web.