Python Academy · Pelajaran

Template dengan Jinja2

Render HTML dinamis

Template dengan Jinja2 adalah pelajaran Python Academy gratis di CoddyKit. Ini adalah pelajaran 2 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Python Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Python Academy mencakup 4 pelajaran total.

Mengapa Menggunakan Templat?

Mengembalikan HTML dari string Python akan cepat menjadi rumit. Templat menyimpan HTML Anda dalam file terpisah dan mengisi data saat ditampilkan. Flask menggunakan mesin Jinja2.

from flask import Flask, render_template
app = Flask(__name__)
# render_template loads a file from the templates/ folder
print('Jinja2 powers Flask templates')

Folder templates

Flask mencari templat dalam folder bernama templates/ yang berada di samping app Anda. File biasanya diakhiri dengan .html.

# project/
#   app.py
#   templates/
#     index.html
print('Templates live in templates/')

render_template

render_template('index.html') memuat templat dan mengembalikan HTML yang telah ditampilkan sebagai respons.

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html')
print('home renders index.html')

Meneruskan Data

Teruskan variabel sebagai argumen kata kunci. Setelah itu, templat dapat menampilkannya.

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def home():
    return render_template('index.html', name='Alice')
print('name=Alice is sent to the template')

Menampilkan Variabel

Di dalam templat, {{ name }} mencetak sebuah variabel. Kurung kurawal ganda tersebut adalah sintaks ekspresi Jinja2.

# index.html
# <h1>Hello, {{ name }}!</h1>
print('Double braces output a value')

Pernyataan If

Pernyataan kendali Jinja2 menggunakan {% %}. Blok if menampilkan isi berdasarkan kondisi.

# {% if user %}
#   <p>Welcome back!</p>
# {% else %}
#   <p>Please log in.</p>
# {% endif %}
print('{% if %} branches the markup')

Perulangan For

Ulangi isi sebuah daftar dengan {% for item in items %} untuk menampilkan markup berulang, seperti daftar produk.

# <ul>
# {% for item in items %}
#   <li>{{ item }}</li>
# {% endfor %}
# </ul>
print('{% for %} repeats markup per item')

Filter

Filter mengubah nilai menggunakan pipa: {{ name|upper }} mengubahnya menjadi huruf besar. Filter bawaan mencakup length, default, dan title.

# {{ name|upper }}        -> ALICE
# {{ items|length }}      -> count
# {{ bio|default('N/A') }}
print('Filters transform values with |')

Pewarisan Templat

Templat dasar mendefinisikan kerangka halaman dengan tempat penampung {% block %}. Templat anak menggunakan {% extends %} untuk mewarisinya dan mengisi blok-blok tersebut.

# base.html
# <body>{% block content %}{% endblock %}</body>
#
# page.html
# {% extends 'base.html' %}
# {% block content %}<p>Hi</p>{% endblock %}
print('extends + block share a layout')

Pelolosan Otomatis

Jinja2 secara otomatis melakukan pelolosan HTML dalam variabel untuk melindungi dari skrip lintas situs. Nilai seperti <script> ditampilkan sebagai teks, bukan dijalankan.

# If name = '<b>x</b>', {{ name }} renders the literal text
# Auto-escaping is on by default for safety
print('Auto-escaping prevents XSS')

Menghubungkan dengan url_for

Di dalam templat, Anda tetap dapat memanggil url_for, sering kali untuk file statis: {{ url_for('static', filename='style.css') }}.

# <link rel='stylesheet'
#   href="{{ url_for('static', filename='style.css') }}">
print('url_for works inside templates too')

Pemeriksaan Singkat

Uji pengetahuan Anda tentang Jinja2.

Rangkuman

Anda telah mempelajari penggunaan templat Jinja2.

render_template() menampilkan file dari templates/
{{ }} menampilkan nilai; {% %} menjalankan if/for
Filter seperti |upper mengubah nilai
extends + block memungkinkan pewarisan tata letak
Pelolosan otomatis melindungi dari XSS

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Template dengan Jinja2” gratis?

Ya — teks lengkap “Template dengan Jinja2” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Python Academy, upgrade ke CoddyKit PRO. Kursus Python Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Template dengan Jinja2”?

Render HTML dinamis Kamu berlatih Python Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Python Academy?

Tidak diperlukan pengalaman sebelumnya. Python Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 2 dari 4.

Berapa lama pelajaran “Template dengan Jinja2” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Python Academy ini?

Ya. Setiap pelajaran Python Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

← Kembali ke Python Academy