Belajar Ngoprek: Belajar Flask: Template

Perhatikan kembali aplikasi web sederhana yang saya buat pada bagian sebelum ini:

from flask import Flask
app = Flask(__name__)
 
@app.route('/')
def halamanUtama():
    return """<html>
                  <head>
                      <link href="static/css/style.css"
                            rel="stylesheet"
                            type="text/css"></link>
                  </head>
                  <body>    
                      Apakabar dari Flask...
                  </body>    
              </html>"""
 
app.run(debug=True, host="127.0.0.1", port=8080)

Nah bayangkan bagaimana panjangnya dan rumitnya program ini seandainya halaman yang hendak dibangkitkan lebih rumit lagi; penuh berisikan berbagai: div, span, gambar, styles, javascript, dll. Pasti program tersebut akan akan sangat panjng dan sangat rumit untuk dibuat. Nah untuk mengurangi kerumitan inilah Template diciptakan.

Template

Dalam Bahasa Inggris arti kata Template adalah cetakan. Dalam konteks aplikasi web, Template juga diartikan sebagai cetakan tetapi disini cetakan untuk suatu halaman web yang hendak dibangkitkan oleh suatu aplikasi web. Disini daripada mengkodekan halaman yang perlu dibangkitan, seperti contoh di atas, suatu aplikasi web hanya perlu: memilih template yang sesuai, ubag beberapa informasi yang perlu ditampilkan pada template tersebut, dan kirimkan hasil perubahan ini ke browser untuk ditampilkan. Proses ini jauh lebih sederhana baik dari segi pemrograman maupun dari segi proses di aplikasi web tersebut.

Perlu diketahui Template bukan konsep yang berasal dari Flask tetapi sudah luas diterapkan pada framework-framework untuk aplikasi web sebelumnya, seperti: JSP, ASP, dan PHP.

Jinja: Template-nya Flask

Flask sendiri tidak memiliki fasilitas Template secara langsung tetapi mendayagunakan salah satu Template Engine berbasis Python yang telah luas dipergunakan, yaitu: Jinja. Untuk mengetahui siapa-siapa saja yang memakai Jinja anda bisa lihat di daftar yang ada di situsnya Jinja.

Template di Jinja tidak lebih dari halaman HTML biasa tetapi yang telah disisipkan beberapa tanda khusus (=markup) untuk memberitahukan bahwa bagian tersebut harus disesuaikan atau harus diisikan dengan informasi tertentu. Karena Template tidak ada bedanya dengan berkas HTML maka anda bisa saja meminta seseorang yang mahir membuat halaman web untuk membuat halamannya untuk anda tanpa orang tersebut perlu mengetahui sedikitpun tentang Jinja, Flask, dan Python. Berkas HTML halaman tersebut kemudian anda ubah dan sisipi dengan tanda-tanda khusus tersebut pada tempat yang perlu dilakukan penyesuaian.

Karena tidak ada perbedaan antara berkas HTML biasa dan Template, bagaimana Flask bisa membedakannya? Cukup sederhana, semua berkas Template ditempatkan didalam direktori yang diberi nama templates! :)

Mari kita lihat penerapan konsep ini melalui sebuah contoh yang sederhana.

Contoh Sederhana

Umpamanya saya mau membangkitkan halam web seperti ini:

<html>
    <head>
        <title>Halaman apakabar...</title>
    </head>
    <body>
        <h1>Apakabar Rahmad Dawood?</h1>
    </body>
</html>

Namun saya maunya nama yang muncul bukan Rahmad Dawood tetapi bisa diubah-ubah oleh program sesuai kebutuhan nantinya. Ini berarti nama tersebut harus kita tandai sebagai sesuatu yang perlu diisi saat halaman ini dibangkitkan. Caranya seperti ini:

<html>
    <head>
        <title>Halaman apakabar...</title>
    </head>
    <body>
        <h1>Apakabar {{ namaku }}?</h1>
    </body>
</html>

Perhatikan disini, saya telah menggantikan tulisan "Rahmad Dawood" dengan "{{ namaku }}" yang merupakan tanda khusus di Jinja untuk:

Mencari variable yang bernama namaku;
Mengambil nilainya;
Tampilkan nilai tersebut pada lokasi tersebut.

Jika namaku nilailnya saya tetapkan sebagai "Rahmad Dawood" maka HTML yang dibangkitkan akan sama persis dengan HTML asli saya.

Sekarang simpan HTML yang telah kita ubah ini ke dalam directory bernama templates dan berikan nama index.html. Ingat, templates merupakan subdirectory di dalam directory aplikasi kita.

Untuk membangkitkan halaman ini dari Flask bagaimana caranya? Juga cukup sederhana dan bisa dilihat pada contoh berikut:

from flask import Flask, render_template
app = Flask(__name__)

@app.route('/')
def halamanApakabar():
    return render_template("index.html", namaku="Rahmad Dawood")

app.run(debug=True, host="127.0.0.1", port=8080)

Perhatikan pada program ini, saya tidak lagi mengembalikan tulisan HTML murni (seperti halnya pada contoh di awal tulisan ini) melainkan memanggil fungsi render_template yang akan membangkitkan halaman HTML berdasarkan template yang namanya saya berikan, yaitu: index.html. Perhatikan lagi saya meminta fungsi render_template untuk membuat sebuah variable bernama namaku dan menyimpan nilai "Rahmad Dawood" di dalamnya. Fungsi ini kemudian akan mengirimkan variable ini ke proses yang akan mengolah template ini untuk dipergunakan dalam proses pembangkitan halaman HTML tersebut.

Sekarang simpan berkas ini dan berikan nama apakabar.py dan mari kita coba aplikasinya. Caranya sama seperti program sederhana kita sebelumnya, yaitu dengan mengetikan perintah berikut ke dalam terminal: