Belajar Membuat Website dengan Flask Python Part 5 - layout di flask dengan Template Jinja
Kita masuk pada bagian selanjutnya dengan topik Membuat Website Dengan Flask Python Part 5 – layout di flask dengan Template Jinja. Kita akan membahas sedikit pada konsep layout saja pada part ini, agar rekan rekan semua tidak terlalu banyak dalam belajarnya, dan akan kami bikin step by step.
Di jinja, kita bisa membuat base layout. Yaitu layout utama, agar template lebih terstruktur. Jadi satu base layout, bisa kita panggil untuk semua template / halaman yang kita miliki. Kita tinggal bikin parent template saja untuk memanggilanya, kemudian di render templatenya kita hanya perlu memanggil child templatenya saja. Sebenarnya sudah ada dokumentasi lengkapnya terkait jinja ini. Teman teman bisa langsung menggunjungi di dokumentasinya https://jinja.palletsprojects.com/en/3.0.x/templates/#template-inheritance
Untuk penjelasan kita bisa langsung sekalian praktek. Silahkan teman teman semua membuat file bernama base.html dan isikan kode dibawah ini
<!DOCTYPE html>
<html lang="en">
<head>
{% block head %}<link rel="stylesheet" href="style.css" />{% endblock %}
<title>{% block title %}{% endblock %} - Belajar Flask</title>
</head>
<body>
<div id="content">{% block content %}{% endblock %}</div>
<div id="footer">
{% block footer %}
{% extends "footer.html" %}
{% endblock %}
</div>
</body>Setelah itu bikin file bernama child.html dan isikan kode dibawah ini
{% extends "base_layout.html" %}
{% block head %}{{ super () }}{% endblock %}
{% block title %}Title{% endblock %}
{% block footer %}{% endblock %}Kalau kita amati 2 bagian diatas, maka kita akan menemukan beberapa kode baris yang mungkin masih begitu awan jika rekan rekan baru mengenal jinja. Ok saya jelaskan maksudnya
* Bagian base.html ada kode {% block title %}{% endblock %} dan di bagian child.html ada kode {% block title %}Title{% endblock %}. Ini berarti block title yang ada pada base.html akan dirubah menjadi title baru yang ada di child.html
* Bagian base.html ada kode {% block head %}….{% endblock %} dan di bagian child.html ada kode {% block head %}{{ super () }}{% endblock %} Ini berarti block head yang ada di base.html akan dirubah menjadi head baru yang ada di child.html. Kemudian ada code {{ super () }} digunakan untuk memanggil semua kode yang ada pada block head yang ada pada base.html.
* Bagian base.html ada code {% extends “footer.html” %} . Ini adalah untuk memanggil footer.html untuk di pasang isinya pada base.html
Mungkin agak membingungkan jika kami jelaskan dalam format text seperti ini. Untuk memudahkan kami akan berikan video penjelasanya dibawah ini
Kita bisa mengubah extends menjadi include. Bedanya adalah, kalau extends ini bisa mereplace block, sedangkan include tidak bisa mereplace block. Jadi kalau di dalam base, maka baiknya gunakan extends, sedang kalau di childtheme bisa gunakan include.
