Flask Templating Dengan Jinja2

pada materi kali ini kita akan belajar tentang bagaimana cara templating flask.

Sekilas Tentang Templating Flask

ketika kita membuat sebuah rute (route) pada flask kita pasti mengembalikan atau mereturn sesuatu pada postingan sebelumnya kita sudah belajar bagaimana return sebuah “string”, lalu bagaimana jika kita ingin mendesain tampilan web kita..?

Mengapa Butuh Template

misalnya kita membuat sebuah rute pada aplikasi kita kemudian kita mau menambah tag HTML jika di-return menggunakan string seperti ini misalnya

from flask import Flask
 
app = Flask(__name__)
 
@app.route('/')
def index():
    user = user or 'Shalabh'
    return '''
    <html>
        <head>
            <title>Templating in Flask</title>
        </head>
        <body>
            <h1>Hello %s!</h1>
            <p>Welcome to the world of Flask!</p>
        </body>
    </html>''' % user
        
if __name__ == '__main__':
    app.run()

hasilnya seperti ini

jika banyak pasti akan repot makanya kita butuh template.

Render HTML File

microframework Flask menyediakan fungsi untuk me-render sebuah file HTML yang nantinya digunakan untuk menampilkan data spesifik contohnya halaman home, user, Flask menggunakan library bernama jinja2 untuk rendering templates, cek dokumentasi

Contoh Templating dengan jinja2

file ini biasa dibuat dengan format .html yang disimpan dalam directory templates contohnya

flaskr/templates/base.html

<!doctype html>
<title>{% block title %}{% endblock %} - Flaskr</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
<nav>
  <h1>Flaskr</h1>
  <ul>
    {% if g.user %}
      <li><span>{{ g.user['username'] }}</span>
      <li><a href="{{ url_for('auth.logout') }}">Log Out</a>
    {% else %}
      <li><a href="{{ url_for('auth.register') }}">Register</a>
      <li><a href="{{ url_for('auth.login') }}">Log In</a>
    {% endif %}
  </ul>
</nav>
<section class="content">
  <header>
    {% block header %}{% endblock %}
  </header>
  {% for message in get_flashed_messages() %}
    <div class="flash">{{ message }}</div>
  {% endfor %}
  {% block content %}{% endblock %}
</section>

nah file html itu tersimpan dalam direktori bernama template hingga struktur project kita seperti ini

├── app.py
├── __pycache__
│   └── app.cpython-37.pyc
└── templates

lalu misalnya kita membuat base template bernama base.html yang akan menjadi core project kita berikut isinya

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- Optional JavaScript -->
    <!-- Popper.js first, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
  </body>
</html>

lalu kita ubah file base.html menjadi seperti ini

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

    <title>
      {% block title %}
      
    {% endblock %}
    </title>
  </head>
  <body>
    {% block contents %}
      
    {% endblock %}

    <!-- Optional JavaScript -->
    <!-- Popper.js first, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
  </body>
</html>

selanjutnya buat file index.html untuk di tampilkan di app flask kita

{% extends "base.html" %}

{% block title %}
	mengenal render templates
{% endblock %}

{% block contents %}
	<h1>Flask dengan render Templates</h1>
{% endblock %}

lalu import render_template() function flask

from flask import Flask, render_template

lalu gunakan fungsi render_template() untuk merender file html

return render_template('index.html')

hingga struktur project menjadi seperti ini

├── app.py
├── __pycache__
│   └── app.cpython-37.pyc
└── templates
    ├── base.html
    └── index.html

hasil dari nya adalah

Final Code

final code materi kali ini

from flask import Flask, render_template
 
app = Flask(__name__)
 
@app.route('/')
def hello_world():
    return render_template('index.html')
        
if __name__ == '__main__':
    app.run()

Sekilas Tentang Templating Flask

Mengapa Butuh Template

Render HTML File

Contoh Templating dengan jinja2

Final Code

Referensi