1.3.4 Link - dvrg/flask-web-development GitHub Wiki

Link digunakan untuk menghubungkan antara halaman, dalam flask untuk menghubungkan antar halaman kita dapat menggunakan url_for. url_for selain menghubungkan antar halaman, juga bisa digunakan untuk mengambil file dari gambar, css, js dan lainnya dari sebuah Static Folder.

Link yang akan kamu gunakan untuk menghubungkan antar halaman contohnya seperti ini:

<a href="{{ url_for('index') }}">Index</a>

Penjelasannya: index dalam url_for adalah nama fungsi dari route. Jadi ketika kamu ingin menghubungkan antar halaman, kamu harus memanggil fungsi routenya.

Tapi, jika dalam route itu membutuhkan sebuah nilai, contoh dalam route:

@app.route('/user/<name>')
def user(name):
    return render_template('user.html', name=name)

jadi url_for menjadi seperti ini:

<a href="{{ url_for('user', name='David') }}">User David</a>

Penjelasannya: parameter name dengan nilai David akan dilempar ke dalam fungsi route yang bernama user.

Lalu bagaimana jika ingin mengambil file menggunakan url_for

<img src=”{{ url_for(‘static’, filename=’nama.jpg’) }}”/>

penjelasannya: 'static' dalam url_for adalah nama folder kamu, filename adalah nama filenya.

Dalam file app.py saat ini, terdapat 2 routes yang akan kita coba untuk saling hubungkan dengan cara seperti berikut:

Ubahlah kode yang ada pada navbar.html menjadi seperti ini:

<nav class="navbar navbar-light bg-light">
    <a class="navbar-brand" href="{{ url_for('index') }}">Navbar</a>
</nav>

Kemudian buatlah sebuah file bernama index.html didalam folder templates sehingga struktur direktori saat ini menjadi seperti ini:

├── env/
|   └── .....
├── templates/
|   └── 403.html
|   └── 404.html
|   └── 500.html
|   └── base.html
|   └── index.html
|   └── navbar.html
|   └── user.html
├── app.py

Lali isi kode index.html seperti ini:

{% extends 'base.html' %}
{% block title %}Index{% endblock %}
{% block content %}
<div class="jumbotron jumbotron-fluid">
    <div class="container">
        <a href="{{ url_for('user', name='David')}}" class="badge badge-pill badge-danger">User David</a>
    </div>
</div>
{% endblock %}

Selanjutnya ubah fungsi index pada route di app.py agar dapat melakukan render template ke file index.html

# app.py
...
@app.route('/')
def index():
    return render_template('index.html')
...

Lalu coba jalankan server kembali untuk melihat hasil perubahannya.