Url for pada Flask dan Menerapkan Bulma css ke Flask

sekarang kita lanjut belajar flasknya kali ini kita akan belajar tentang URL for pada flask, nah pada studi kasus kali ini kita akan belajar gimana cara integrasi Bulma css ke dalam flask project kita, ada beberapa langkah yang harus dilakukan

Membuat Route

kita akan membuat route seperti ini

from flask import Flask, render_template, request

app = Flask(__name__)

# route
@app.route("/")
def index():
    query = request.args.get("q")
    if not query:
        return render_template("index.html")
    else:
        return f"query yang dimasukan adalah {query}"


@app.route("/profile/<username>")
def profile(username: str):
    return render_template("profile.html", username=username)

Download Bulma Css

agar dapat digunakan secara offline kita download dulu css nya dari url ini https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css kemudian buat folder bernama static di project rootnya lalu simpan hasil download tadi ke folder tersebut

Tambahkan CSS ke Project Flask

cara menambahkan nya cukup mudah misal seperti ini seperti memenggil css biasa namun menggunakan url_for

<!-- tambah kan bulma css -->
<link rel="stylesheet" href="{{ url_for('static', filename='bulma.min.css') }}">

Membuat HTML Template Sederhana

okay di kasus kali ini, kita akan belajar bagaimana melakukan templating, nah disini karena kita sudah menggunakan Bulma css kita tinggal ikutin aja struktur desain dari template yang sudah ada, disini kita akan menggunakan hero

contoh hasilnya seperti ini

nah selalu gunakan url_for() untuk hal yang berhubungan dengan link karena dia selalu bergantung di fungsi yang dipanggilnya bukan pada base aplikasinya, keuntunganya gimana?

kalo kita menggunakan struktur folder yang berbeda kita ndak perlu pusing karena kita cukup panggil menggunakan fungsi aja bukan berdasarkan app routenya

Opsi Lanjutan url_for

okay kita coba membuat button untuk redirect ke halaman profile dengan parameter misalnya seperti ini

 <!-- passing parameter misal seperti ini -->
<a href="{{ url_for('profile', username='fery') }}" class="button is-danger">Profile</a>

maka hasilnya seperti ini

source code tersedia di Github

Referensi