Sebelumnya kita sudah mempelajari cara instalasi micro-framework flask dan membuat 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 menunjukkan 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 menggunakan dictionary diatas kedalam aplikasi flask yang telah kita buat, sebenarnya aplikasi yang menampilkan nama orang haruslah dinamis, akan tetapi materi kita belum sampai pada tahap proses registrasi dan database. Jadi nanti setiap pengunjung akan melihat namanya sendiri, Untuk sekarang 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 kode yang kita buat dalam sebuah file, akan Panjang sekali kode 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 saat kita install flask, sehingga kita tidak perlu lagi melakukan konfigurasi /modifikasi apapun di terminal. Memang flask mengizinkan kita untuk menggunakan template engine lainnya akan tetapi yang paling popular digunakan pada flask adalah jinja2.
Sekarang mari kita modifikasi file yang kita buat sebelumnya. Buat folder didalam folder blogger templates, silahkan menggunakan cara manual seperti membuat folder biasa atau melalu cmd dengan perintah:
C:\blogger>mkdir templates
Kemudian buat file didalam templates dengan nama index.html isikan kode 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 kode yang perlu anda ketahui mengenai jinja adalah kode 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 menggunakan template jinja untuk pengulangan for. Untuk mencobanya kita perlu membuat data berupa list dan directory pada routes (basic.py), data yang kita buat sederhana saja agar memahami looping saja, pada akhirnya nanti data yang akan diolah diambil dari database.
Akan tetapi jika contoh ini saja kita tidak memahami, akan sulit untuk memahami mengambil data dari database untuk ditampilkan ke pengguna.
Buka kembali file basic.py modifikasi seperti 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 seperti 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 menggunakan template sangat membantu kita dan juga mempercepat pekerjaan kita, cobalah untuk menambah data pada file basic.py agar looping lebih banyak lagi dan agar Anda memahami cara kerja template jinja.
Membuat Template Inheritence
Tujuannya adalah untuk lebih menyederhakan template lagi, jadi kita dapat memecah template menjadi beberapa bagian, misalnya layout.html berisi header, navbar, footer kenapa harus Membuat layout.html? umumnya header, navbar, footer akan selalu diload dalam setiap halaman, Jadi kita tidak perlu menulis kode header, navbar, footer lagi untuk halaman lain cukup include saja dan jika kita ingin memodifikasi navbar atau footer kita cukup edit pada bagian layout.html saja.
Buat file layout.html didalam folder templates dan isikan kode 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%}
kode extends diatas adalah inheritance, dengan cara ini kita dapat membuat file-file aplikasi kita lebih rapi dan terstruktur, dan jika semakin kompleks kita akan menggunakan blueprint.
