Template Inheritance — CompileDaily Study

Penjelasan

Kebanyakan halaman web berbagi struktur yang sama — navbar, footer, meta tag. Daripada menyalin HTML itu di setiap file, Jinja2 punya template inheritance: buat satu file base.html berisi struktur umum dengan {% block nama_block %}{% endblock %} sebagai 'lubang' yang bisa diisi halaman turunan. Halaman lain tinggal {% extends "base.html" %} lalu mengisi block yang relevan. Kalau block tidak diisi ulang, isi default dari base.html tetap dipakai. Pola ini sangat mengurangi duplikasi dan memudahkan perubahan layout global — cukup edit satu file base.html.

Contoh Konsep

<!-- templates/base.html -->
<!DOCTYPE html>
<html>
<head><title>{% block title %}Toko Online{% endblock %}</title></head>
<body>
    <nav>Navbar Toko</nav>
    <main>{% block content %}{% endblock %}</main>
    <footer>© 2026 Toko Online</footer>
</body>
</html>

<!-- templates/produk.html -->
{% extends "base.html" %}
{% block title %}Daftar Produk{% endblock %}
{% block content %}
    <h1>Produk Kami</h1>
{% endblock %}

Praktikum

Buat template 'kontak.html' yang extend base.html dan mengisi block title dengan 'Kontak' serta block content dengan form sederhana.

Editor Latihan

Ketik/edit bebas di sini untuk latihan — kode ini tidak dijalankan.

Tips

Kamu bisa memanggil isi block bawaan dengan {{ super() }} di dalam block turunan kalau ingin menambah, bukan mengganti total, konten dari parent.