Contoh Implementasi Template Engine Jinja2 - Flask

Sebelumnya kita sudah mempelajari cara instalasi micro-framework flask dan menciptakan aplikasi sederhana. Secara umum framework menyediakan template engine bawaan, dalam hal ini flask dengan jinja2. Sebelum kita lebih jauh mendalami apa itu template jinja2 mari kita lihat struktur proyek aplikasi sebelumnya yang telah kita buat.
Struktur aplikasi flask di windows

Untuk menjalankannya baca artikel sebelumnya instalasi flask

Apa itu Template ?

Untuk memahami konsep dan cara kerja template saya akan menyampaikan sebuah aplikasi sederhana dengan tag html dan tipe data python dictionary pada sebuah route flask yang sudah kita kerjakan pada artikel sebelumnya.

Jika anda belum paham dengan Tag HTML pelajari di w3school.com

Berikut dictionary yang akan kita gunakan

orang = {'nama': 'albardani', 'umur': '21thn'}

kita akan memakai dictionary diatas kedalam aplikasi flask yang telah kita buat, sebetulnya aplikasi yang menampilkan nama orang haruslah dinamis, akan tetapi bahan kita belum hingga pada tahap proses pendaftaran dan database. Makara nanti setiap pengunjung akan melihat namanya sendiri, Untuk kini kita buat statis hanya untuk memhami cara kerja template.
Buka file basic.py yang telah kita buat sebelumnya:

from flask import Flask  app = Flask(__name__)   @app.route('/')  def hello_world():   orang = {'nama': 'albardani', 'umur':'21thn'}   return '''  <html>      <head>          <title>Beranda - Flask Blog</title>      </head>      <body>          <h1>Hello, ''' + orang['nama'] + ''' Umur Anda, ''' + orang['umur'] + '''!</h1>      </body>  </html>'''

Sekarang bayangkan aplikasi yang akan dikerjakan selanjutnya dengan cara diatas betapa rumitnya/repotnya instruksi yang kita buat dalam sebuah file, akan Panjang sekali instruksi dalam sebuah file dengan cara diatas.
Setiap fungsi diatas (diatas hanya hello_world) mungkin untuk mengerjakan aplikasi web kita membutuhkan beberapa halaman (beranda, kategori, detail), Jika 1 halaman 1 fungsi maka halaman file routes akan sangat panjang sekali, sehingga untuk mengembangkannya kedepan akan sulit dan merepotkan.

Menggunakan Template Jinja2

Jinja2 sudah include pada ketika kita install flask, sehingga kita tidak perlu lagi melaksanakan konfigurasi /modifikasi apapun di terminal. Memang flask mengizinkan kita untuk memakai template engine lainnya akan tetapi yang paling popular dipakai pada flask ialah jinja2.

Sekarang mari kita modifikasi file yang kita buat sebelumnya. Buat folder didalam folder blogger templates, silahkan memakai cara manual ibarat menciptakan folder biasa atau melalu cmd dengan perintah:

C:\blogger>mkdir templates

Kemudian buat file didalam templates dengan nama index.html isikan instruksi berikut:

<html>     <head>         <title>{{ title }} - Flask Blog</title>     </head>     <body>         <h1>Hello {{ orang.nama}}, Umur Anda {{ orang.umur }}!</h1>     </body> </html>

Kode html diatas sangat standar satu-satunya instruksi yang perlu anda ketahui mengenai jinja ialah instruksi yang diapit kurung keriting (curly brackets) {{ … }} didalam tanda tersebut kita letakkan variabel python.
Buka kembali file basic.py kita dan modifikasi sebagai berikut:

from flask import Flask, render_template  app = Flask(__name__)   @app.route('/')  def hello_world():   orang = {'nama': 'albardani', 'umur':'21thn'}   return render_template('index.html', title='Beranda', orang=orang)

Kondisi If Else Statement Pada Jinja2

Jika di template index.html ingin meletakkan variabel maka kita harus meletakkan didalam {{ … }}, akan tetapi untuk pengkondisian statement if else hanya satu curly braket dan persen {% … %}, berlaku juga untuk pengulangan (loop).

<html>      <head>          {% if title %}          <title>{{ title }} - Flask Blog</title>          {% else %}          <title>Selamat Datang - Flask Blog</title>          {% endif %}      </head>      <body>          <h1>Hello {{ orang.nama }}, Umur Anda {{ orang.umur }}!</h1>      </body>  </html>

Pengulangan Pada Template Jinja2

kali ini kita akan coba memakai template jinja untuk pengulangan for. Untuk mencobanya kita perlu menciptakan data berupa list dan directory pada routes (basic.py), data yang kita buat sederhana saja semoga memahami looping saja, pada akibatnya nanti data yang akan diolah diambil dari database.

Akan tetapi bila tumpuan ini saja kita tidak memahami, akan sulit untuk memahami mengambil data dari database untuk ditampilkan ke pengguna.

Buka kembali file basic.py modifikasi ibarat berikut:

from flask import Flask, render_template  app = Flask(__name__)   @app.route('/')  def hello_world():   orang = {'nama': 'albardani', 'umur':'21thn'}   komentar = [    {     'penulis': {'nama': 'Khalid'},     'ucapan': 'hai albardani, artikel yang bagus'    },    {     'penulis': {'nama': 'Ariqa'},     'ucapan': 'artikel ini cukup membantu saya'    }   ]   return render_template('index.html', title='Beranda', orang=orang, komentar=komentar)

kemudian buka file index.html didalam folder templates buat ibarat berikut:

<html>      <head>    {% if title %}          <title>{{ title }} - Flask Blog</title>    {% else %}    <title>Selamat Datang - Flask Blog</title>    {% endif %}      </head>      <body>          <h1>Hello {{ orang.nama }}, Umur Anda {{ orang.umur }}!</h1>    {% for x in komentar %}    <p>{{ x.penulis.nama }} mengatakan: {{ x.ucapan }}</p>    {% endfor %}      </body>  </html>

Dengan memakai template sangat membantu kita dan juga mempercepat pekerjaan kita, cobalah untuk menambah data pada file basic.py semoga looping lebih banyak lagi dan semoga Anda memahami cara kerja template jinja.

Membuat Template Inheritence

Tujuannya ialah untuk lebih menyederhakan template lagi, jadi kita sanggup memecah template menjadi beberapa bagian, contohnya layout.html berisi header, navbar, footer kenapa harus Membuat layout.html? umumnya header, navbar, footer akan selalu diload dalam setiap halaman, Makara kita tidak perlu menulis instruksi header, navbar, footer lagi untuk halaman lain cukup include saja dan bila kita ingin memodifikasi navbar atau footer kita cukup edit pada bab layout.html saja.
Buat file layout.html didalam folder templates dan isikan instruksi dibawah ini:

<html>      <head>    {% if title %}          <title>{{ title }} - Flask Blog</title>    {% else %}    <title>Selamat Datang - Flask Blog</title>    {% endif %}      </head>      <body>          <h1>Hello {{ orang.nama }}, Umur Anda {{ orang.umur }}!</h1>    {% block content %}{% endblock %}      </body>  </html>

Kemudian buka file index.html dan isi sebagai berikut:

{% extends "layout.html" %}   {% block content%}     {% for x in komentar %}    <p>{{ x.penulis.nama }} mengatakan: {{ x.ucapan }}</p>    {% endfor %}   {% endblock%}

instruksi extends diatas ialah inheritance, dengan cara ini kita sanggup menciptakan file-file aplikasi kita lebih rapi dan terstruktur, dan bila semakin kompleks kita akan memakai blueprint.