Langkah 3: Menyajikan file statis, menambahkan halaman, dan menggunakan pewarisan templat dengan aplikasi Flask

Artikel
06/19/2023

Langkah sebelumnya: Membuat aplikasi Flask dengan tampilan dan templat halaman

Dalam langkah-langkah sebelumnya dari tutorial ini, Anda telah mempelajari cara membuat aplikasi Flask minimal dengan satu halaman HTML mandiri. Aplikasi web modern biasanya terdiri dari banyak halaman, dan menggunakan sumber daya bersama seperti file CSS dan JavaScript untuk menyediakan gaya dan perilaku yang konsisten.

Dalam langkah ini, Anda mempelajari cara:

Gunakan templat item Visual Studio untuk menambahkan file baru dengan cepat dari berbagai jenis dengan kode boilerplate yang nyaman (langkah 3-1)
Menyajikan file statis dari kode (langkah 3-2, opsional)
Menambahkan halaman tambahan ke aplikasi (langkah 3-3)
Gunakan pewarisan templat untuk membuat header dan bilah navigasi yang digunakan di seluruh halaman (langkah 3-4)

Langkah 3-1: Membiasakan diri dengan templat item

Saat mengembangkan aplikasi Flask, Anda biasanya menambahkan lebih banyak file Python, HTML, CSS, dan JavaScript. Untuk setiap jenis file (dan file lain seperti web.config yang mungkin Anda butuhkan untuk penyebaran), Visual Studio menyediakan templat item yang nyaman untuk membantu Anda memulai.

Untuk melihat templat yang tersedia, buka Penjelajah Solusi, klik kanan folder tempat Anda ingin membuat item, pilih Tambahkan>Item Baru:

Add new item dialog in Visual Studio

Untuk menggunakan templat, pilih templat yang diinginkan, tentukan nama untuk file, dan pilih OK. Menambahkan item dengan cara ini secara otomatis menambahkan file ke proyek Visual Studio Anda dan menandai perubahan untuk kontrol sumber.

Pertanyaan: Bagaimana Visual Studio mengetahui templat item mana yang akan ditawarkan?

Jawaban: File proyek Visual Studio (.pyproj) berisi pengidentifikasi jenis proyek yang menandainya sebagai proyek Python. Visual Studio menggunakan pengidentifikasi jenis ini untuk memperlihatkan hanya templat item yang cocok untuk jenis proyek. Dengan cara ini, Visual Studio dapat menyediakan serangkaian templat item yang kaya untuk banyak jenis proyek tanpa meminta Anda untuk mengurutkannya setiap saat.

Langkah 3-2: Menyajikan file statis dari aplikasi Anda

Di aplikasi web yang dibangun dengan Python (menggunakan kerangka kerja apa pun), file Python Anda selalu berjalan di server web host dan tidak pernah dikirimkan ke komputer pengguna. File lain seperti CSS dan JavaScript, hanya digunakan oleh browser, sehingga server host hanya mengirimkannya apa adanya setiap kali diminta. File tersebut disebut sebagai file "statis", dan Flask dapat mengirimkannya secara otomatis tanpa Anda perlu menulis kode apa pun. Dalam file HTML, misalnya, Anda dapat merujuk ke file statis menggunakan jalur relatif dalam proyek. Bagian pertama dalam langkah ini menambahkan file CSS ke templat halaman Anda yang sudah ada.

Ketika Anda perlu mengirimkan file statis dari kode, seperti melalui implementasi titik akhir API, Flask menyediakan metode mudah yang memungkinkan Anda merujuk ke file menggunakan jalur relatif dalam folder bernama statis (di akar proyek). Bagian kedua dalam langkah ini menunjukkan metode tersebut menggunakan file data statis sederhana.

Dalam kedua kasus, Anda dapat mengatur file di bawah statis sesuka Anda.

Menggunakan file statis dalam templat

Di Penjelajah Solusi, klik kanan folder HelloFlask di proyek Visual Studio, pilih Tambahkan>Folder baru, dan beri nama folder static.
Klik kanan folder statis dan pilih Tambahkan>Item baru. Dalam dialog yang muncul, pilih templat Lembar Gaya, beri nama file site.css, dan pilih OK. File site.css muncul dalam proyek dan dibuka di editor. Struktur folder Anda akan tampak mirip dengan gambar berikut:
Ganti konten index.js dengan kode berikut, lalu simpan file:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Ganti konten file templates/index.html aplikasi dengan kode berikut, yang menggantikan <strong> elemen yang digunakan di langkah 2 dengan <span> yang mereferensikan message kelas gaya. Menggunakan kelas gaya dengan cara ini memberi Anda lebih banyak fleksibilitas dalam menata elemen.
```
<html>
    <head>
        <title>{{ title }}</title>
        <link rel="stylesheet" type="text/css" href="/static/site.css" />
    </head>
    <body>
        <span class="message">{{ message }}</span>{{ content }}
    </body>
</html>
```
Jalankan proyek untuk mengamati hasilnya. Setelah selesai, hentikan aplikasi dan Anda dapat menerapkan perubahan pada kontrol sumber (seperti yang dijelaskan di langkah 2).

Menyajikan file statis dari kode

Flask menyediakan fungsi yang disebut serve_static_file yang dapat Anda panggil dari kode untuk merujuk ke file apa pun dalam folder statis proyek. Proses berikut membuat titik akhir API sederhana yang mengembalikan file data statis.

Jika Anda belum melakukannya, buat folder statis: di Penjelajah Solusi, klik kanan folder HelloFlask di proyek Visual Studio, pilih Tambahkan>Folder baru, dan beri nama folder static.
Di folder statis, buat file data JSON statis bernama data.json dengan konten berikut (yang merupakan data sampel yang tidak berarti):
```
{
    "01": {
        "note" : "Data is very simple because we're demonstrating only the mechanism."
    }
}
```
Di views.py, tambahkan fungsi dengan rute /api/data yang mengembalikan file data statis menggunakan metode send_static_file:
```
@app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')
```
Jalankan aplikasi dan navigasikan ke titik akhir /api/data untuk melihat bahwa file statis dikembalikan. Setelah selesai, hentikan aplikasi.

Pertanyaan: Apakah ada konvensi untuk mengatur file statis?

Jawaban: Anda dapat menambahkan file CSS, JavaScript, dan HTML lainnya di folder statis sesuai keinginan. Cara umum untuk mengatur file statis adalah dengan membuat subfolder bernama font, skrip, dan konten (untuk lembar gaya dan file lainnya).

Pertanyaan: Bagaimana cara menangani variabel URL dan parameter kueri dalam API?

Jawaban: Lihat jawaban di langkah 1-4 untuk Pertanyaan: Bagaimana Flask bekerja dengan rute URL variabel dan parameter kueri?

Langkah 3-3: Menambahkan halaman ke aplikasi

Menambahkan halaman lain ke aplikasi berarti sebagai berikut:

Tambahkan fungsi Python yang menentukan tampilan.
Tambahkan templat untuk markup halaman.
Tambahkan perutean yang diperlukan ke file urls.py proyek Flask.

Langkah-langkah berikut menambahkan halaman "Tentang" ke proyek "HelloFlask", dan tautan ke halaman tersebut dari halaman beranda:

Di Penjelajah Solusi, klik kanan folder templat, pilih Tambahkan>Item baru, pilih templat item Halaman HTML, beri nama file about.html, dan pilih OK.

Tip

Jika perintah Item Baru tidak muncul di menu Tambahkan, pastikan Anda telah menghentikan aplikasi sehingga Visual Studio keluar dari mode penelusuran kesalahan.

Ganti konten about.html dengan markup berikut (Anda mengganti tautan eksplisit ke halaman beranda dengan bilah navigasi sederhana di langkah 3-4):

<html>
    <head>
        <title>{{ title }}</title>
        <link rel="stylesheet" type="text/css" href="/static/site.css" />
    </head>
    <body>
        <div><a href="home">Home</a></div>
        {{ content }}
    </body>
</html>

Buka file views.py aplikasi dan tambahkan fungsi bernama about yang menggunakan templat:

@app.route('/about')
def about():
    return render_template(
        "about.html",
        title = "About HelloFlask",
        content = "Example app page for Flask.")

Buka file templates/index.html dan tambahkan baris berikut segera dalam elemen <body> untuk ditautkan ke halaman Tentang (sekali lagi, Anda mengganti tautan ini dengan bilah navigasi di langkah 3-4):
```
<div><a href="about">About</a></div>
```
Simpan semua file menggunakan perintah menu File>Simpan Semua, atau tekan Ctrl+Shift+S. (Langkah ini tidak diperlukan, karena menjalankan proyek di Visual Studio menyimpan file secara otomatis. Namun demikian, ini adalah perintah yang baik untuk diketahui!)
Jalankan proyek untuk mengamati hasilnya dan periksa navigasi antar halaman. Hentikan aplikasi setelah selesai.

Pertanyaan: Apakah nama fungsi halaman penting bagi Flask?

Jawaban: Tidak, karena dekorator @app.route yang menentukan URL dengan Flask memanggil fungsi untuk menghasilkan respons. Pengembang biasanya mencocokkan nama fungsi dengan rute, tetapi pencocokan tersebut tidak diperlukan.

Langkah 3-4: Gunakan pewarisan templat untuk membuat header dan bilah navigasi

Alih-alih memiliki tautan navigasi eksplisit di setiap halaman, aplikasi web modern biasanya menggunakan header branding dan bilah navigasi yang menyediakan tautan halaman terpenting, menu popup, dan sebagainya. Untuk memastikan aplikasi konsisten, bilah header dan navigasi harus sama di semua halaman, selain itu tidak mengulangi kode yang sama di setiap templat halaman. Sebagai gantinya, Anda ingin menentukan bagian umum dari semua halaman Anda di satu tempat.

Sistem templat Flask (Jinja secara default) menyediakan dua cara untuk menggunakan kembali elemen tertentu di beberapa templat: termasuk dan pewarisan.

Termasuk templat halaman lain yang Anda sisipkan di tempat tertentu di templat referensi menggunakan sintaks {% include <template_path> %}. Anda juga dapat menggunakan variabel jika Ingin mengubah jalur secara dinamis dalam kode. Termasuk biasanya digunakan dalam isi halaman untuk menarik templat bersama di lokasi tertentu di halaman.
Pewarisan menggunakan {% extends <template_path> %} di awal templat halaman untuk menentukan templat dasar bersama yang kemudian dibangun templat referensi. Pewarisan umumnya digunakan untuk menentukan tata letak bersama, bilah navigasi, dan struktur lain untuk halaman aplikasi, sehingga templat referensi hanya perlu menambahkan atau memodifikasi area tertentu dari templat dasar yang disebut blok.

Dalam kedua kasus, <template_path> relatif terhadap folder templat aplikasi (../ atau ./ juga diizinkan).

Templat dasar menguraikan blok menggunakan tag {% block <block_name> %} dan {% endblock %}. Jika templat yang merujuk kemudian menggunakan tag dengan nama blok yang sama, konten bloknya mengambil alih templat dasar.

Langkah-langkah berikut menunjukkan pewarisan:

Di folder templat aplikasi, buat file HTML baru (menggunakan menu konteks Tambahkan>item Baru atau Tambahkan>Halaman HTML) yang disebut layout.html, dan ganti kontennya dengan markup di bawah ini. Anda dapat melihat bahwa templat ini berisi blok bernama "konten" yang perlu diganti oleh halaman referensi:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>{{ title }}</title>
    <link rel="stylesheet" type="text/css" href="/static/site.css" />
</head>

<body>
    <div class="navbar">
        <a href="/" class="navbar-brand">Hello Flask</a>
        <a href="{{ url_for('home') }}" class="navbar-item">Home</a>
        <a href="{{ url_for('about') }}" class="navbar-item">About</a>
    </div>

    <div class="body-content">
        {% block content %}
        {% endblock %}
        <hr/>
        <footer>
            <p>&copy; 2018</p>
        </footer>
    </div>
</body>
</html>

Tambahkan gaya berikut ke file static/site.css aplikasi (panduan ini tidak menunjukkan desain responsif. Namun, gaya ini hanya menghasilkan hasil yang menarik):

.navbar {
    background-color: lightslategray;
    font-size: 1em;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: white;
    padding: 8px 5px 8px 5px;
}

.navbar a {
    text-decoration: none;
    color: inherit;
}

.navbar-brand {
    font-size: 1.2em;
    font-weight: 600;
}

.navbar-item {
    font-variant: small-caps;
    margin-left: 30px;
}

.body-content {
    padding: 5px;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

Ubah templates/index.html untuk merujuk ke templat dasar dan mengambil alih blok konten. Anda dapat melihat bahwa dengan menggunakan pewarisan, templat ini menjadi sederhana:
```
{% extends "layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Ubah templates/index.html untuk merujuk ke templat dasar dan mengambil alih blok konten:
```
{% extends "layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Jalankan server untuk mengamati hasilnya. Setelah selesai, tutup server.
Karena Anda membuat perubahan substansial pada aplikasi, sekali lagi saat yang tepat untuk menerapkan perubahan Anda pada kontrol sumber.

Langkah berikutnya

Anda dapat masuk lebih dalam dengan sumber daya ini:

Untuk kemampuan templat Jinja lainnya, seperti alur kontrol, lihat Dokumentasi Perancang Templat Jinja (jinja.pocoo.org)
Untuk detail tentang menggunakan url_for, lihat url_for dalam dokumentasi objek Aplikasi Flask (flask.pocoo.org)
Kode sumber tutorial di GitHub: Microsoft/python-sample-vs-learning-flask

Bagikan melalui