Tutorial: Menyajikan file statis dan menggunakan pewarisan templat dengan Flask di Visual Studio

Artikel
01/27/2025

Artikel ini menyajikan Langkah 3 dalam seri tutorial Bekerja dengan kerangka kerja web Flask di Visual Studio.

Langkah-langkah sebelumnya dalam seri tutorial ini 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 memberikan gaya dan perilaku yang konsisten. Di Langkah 3, Anda bekerja dengan templat item Visual Studio untuk menambahkan konten ke proyek Flask Anda dan memperluas kemampuan aplikasi.

Di Langkah 3 tutorial, Anda mempelajari cara:

Menggunakan templat item Visual Studio untuk menambahkan file baru dengan cepat dengan kode boilerplate
Menyajikan file statis dari kode Flask
Menambahkan lebih banyak halaman ke aplikasi Flask
Menggunakan pewarisan templat untuk membuat header dan navigasi di seluruh halaman

Prasyarat

Solusi Visual Studio dan proyek aplikasi Flask yang dibuat di Langkah 1: Membuat proyek Flask dan diperbarui di Langkah 2: Merefaktor proyek Flask.

Menjelajahi templat item di Visual Studio

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. Anda dapat menggunakan templat ini untuk menambahkan file baru dengan cepat dari berbagai jenis dengan kode boilerplate.

Untuk melihat templat yang tersedia, buka Penjelajah Solusi di Visual Studio dan buka struktur proyek Anda.
Klik kanan folder tempat Anda ingin membuat file baru dan pilih Tambahkan>Item Baru. Dialog Tambahkan Item Baru dibuka:
Untuk menggunakan templat, pilih templat yang diinginkan, masukkan nama untuk file, dan pilih Tambahkan.

Visual Studio menambahkan file ke proyek Anda saat ini dan menandai perubahan untuk kontrol sumber.

Memahami cara Visual Studio mengidentifikasi templat item

File proyek Visual Studio (.pyproj) berisi pengidentifikasi jenis proyek yang menandai file sebagai proyek Python. Visual Studio menggunakan pengidentifikasi jenis ini untuk mengenali dan hanya menampilkan templat item yang cocok untuk jenis proyek. Visual Studio mengikuti pendekatan ini untuk menyediakan serangkaian templat item yang kaya untuk banyak jenis proyek tanpa meminta Anda untuk mengurutkannya setiap saat.

Menyajikan file statis dari aplikasi Anda

Di aplikasi web yang dibangun dengan Python (dengan menggunakan kerangka kerja apa pun), file Python Anda selalu berjalan di server host web dan tidak pernah ditransmisikan ke komputer pengguna. File lain seperti CSS dan JavaScript hanya digunakan oleh browser, sehingga server host hanya mengirimkannya as-is saat diminta. Jenis file ini 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 dengan menggunakan jalur relatif dalam proyek. Prosedur pertama di bagian ini memperlihatkan cara menggunakan file CSS statis dengan templat halaman yang sudah ada.

Saat Anda perlu mengirimkan file statis dari kode, seperti melalui implementasi titik akhir API, Flask menyediakan metode yang nyaman. Anda dapat merujuk ke file dengan menggunakan jalur relatif dalam folder bernama statis di akar proyek. Prosedur kedua di bagian ini menunjukkan cara bekerja dengan file data statis sederhana dari kode.

Dalam kedua prosedur, Anda dapat mengatur file di bawah folder statis sesuai dengan preferensi Anda.

Menggunakan file CSS statis dalam templat

Ikuti langkah-langkah ini untuk menggunakan file statis dalam templat:

Di Solution Explorer, klik kanan folder HelloFlask di proyek Anda, pilih Tambahkan>Folder baru, dan beri nama folder statis .
Klik kanan folder statis dan pilih Tambahkan>Item Baru.
Dalam dialog Tambahkan Item Baru, pilih templat Lembar Gaya, beri nama file site.cs, lalu pilih Tambahkan.

Visual Studio menambahkan file site.css ke proyek dan membuka file di editor. Berikut adalah contoh struktur proyek Flask yang diperbarui:
Gantilah konten dari file site.css dengan gaya-gaya berikut ini:
```
.message {
    font-weight: 600;
    color: blue;
}
```
Ganti konten file HelloFlask/templates/index.html dengan markup berikut:
```
<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>
```
Kode ini menggantikan elemen HTML <strong> dari Langkah 2 dalam seri tutorial dengan elemen <span> yang mereferensikan kelas gaya message. Menggunakan kelas gaya dengan cara ini memberi Anda lebih banyak fleksibilitas dalam menata elemen HTML.
Simpan perubahan proyek Anda dengan memilih File>Simpan Semua atau gunakan pintasan keyboard Ctrl+Shift+S. (Langkah ini tidak diperlukan karena saat Anda mengembangkan proyek, Visual Studio menyimpan file Anda secara otomatis.)
Jalankan proyek dan amati hasilnya. Setelah selesai, hentikan aplikasi.
(Opsional) Anda dapat menerapkan perubahan pada kontrol sumber dan memperbarui repositori jarak jauh Anda. Untuk informasi selengkapnya, lihat Menerapkan perubahan pada kontrol sumber di Langkah 2 dari seri tutorial ini.

Menyajikan file statis dari kode

Flask menyediakan fungsi bernama send_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:

Di folder statis, buat file data JSON statis bernama data.json. Anda dapat menggunakan templat file Text sebagai dasar untuk file tersebut.
Ganti konten file JSON dengan kode berikut yang menyediakan beberapa data sampel untuk menunjukkan mekanisme:
```
{
   "01": {
      "note" : "Sample data to demonstrate the mechanism."
   }
}
```
Dalam file HelloFlask/views.py, tambahkan fungsi dengan titik akhir /api/data rute yang mengembalikan file data statis dengan menggunakan metode send_static_file:
```
@app.route('/api/data')
def get_data():
  return app.send_static_file('data.json')
```
Simpan perubahan proyek Anda, dan jalankan proyek lagi. Telusuri ke titik akhir rute /api/data dan konfirmasikan aplikasi mengembalikan file statis:
Setelah selesai, hentikan aplikasi.

Mengatur file dan folder statis

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

Gunakan rute URL dan parameter kueri dari API

Anda dapat menangani variabel URL dan parameter kueri dengan API saat Anda bekerja dengan Flask. Untuk informasi selengkapnya, lihat Menggunakan rute URL variabel dan parameter kueri di Langkah 1 dari seri tutorial ini.

Menambahkan halaman ke aplikasi Flask

Menambahkan halaman lain ke aplikasi Flask melibatkan tugas-tugas berikut:

Menambahkan fungsi Python yang menentukan tampilan
Menambahkan templat untuk markup HTML halaman
Memperbarui rute URL dalam file views.py proyek Flask

Ikuti langkah-langkah ini untuk menambahkan halaman Tentang (/about) ke proyek Flask BasicProject, dan tautan ke halaman tersebut dari halaman beranda:

Di Solution Explorer, klik kanan folder HelloFlask/templates di proyek Anda, dan pilih Tambahkan>Item Baru.

Tips

Jika Anda tidak melihat perintah Item Baru pada menu Tambahkan, pastikan untuk menghentikan aplikasi Flask Anda sehingga Visual Studio keluar dari mode debugging, sesuai kebutuhan.
Dalam dialog Tambahkan Item Baru, pilih templat Halaman HTML, beri nama file about.html, lalu pilih Tambahkan.

Ganti konten file about.html dengan markup HTML berikut:

<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>

Pada langkah berikutnya, Anda mengganti tautan eksplisit ke halaman beranda dengan bilah navigasi.

Dalam file HelloFlask/views.py, 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.")

Dalam file HelloFlask/templates/index.html, tambahkan markup berikut sebagai pernyataan pertama dalam elemen <body>:
```
<div><a href="about">About</a></div>
```
Markup ini menambahkan tautan ke halaman /about untuk aplikasi Flask. Di langkah selanjutnya, Anda mengganti tautan ini dengan bilah navigasi.
Simpan perubahan proyek Anda, dan jalankan proyek lagi. Telusuri ke halaman /about dan periksa navigasi antara berbagai halaman aplikasi.
Setelah selesai, hentikan aplikasi.

Beri nama fungsi halaman Anda

Flask tidak memberlakukan batasan atau persyaratan apa pun pada nama untuk fungsi halaman Anda. Dekorator @app.route menentukan URL tempat Flask memanggil fungsi untuk menghasilkan respons. Pengembang biasanya mencocokkan nama fungsi halaman dengan rute, tetapi jenis pencocokan ini tidak diperlukan.

Menggunakan pewarisan templat untuk header dan navigasi

Alih-alih tautan navigasi eksplisit di setiap halaman, banyak aplikasi web memiliki header merek dan bilah navigasi yang menyediakan tautan halaman terpenting, menu popup, dan sebagainya. Untuk memastikan konsistensi dalam aplikasi, header dan bilah navigasi harus sama di semua halaman, tetapi Anda tidak perlu mengulangi kode yang sama di setiap templat halaman. Anda dapat menentukan bagian umum dari semua halaman Anda dalam satu file.

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

Menyertakan adalah templat halaman lain yang Anda sisipkan di tempat tertentu di templat referensi dengan sintaks {% include <template_path> %}. Anda juga dapat menggunakan variabel jika Anda ingin mengubah jalur secara dinamis dalam kode. Tindakan 'Termasuk' biasanya digunakan dalam isi halaman untuk mengintegrasikan templat bersama di lokasi tertentu pada halaman.
Warisan menggunakan sintaks {% extends <template_path> %} di awal templat halaman untuk menentukan templat dasar bersama yang dibangun templat referensi. Pewarisan umumnya digunakan untuk menentukan tata letak bersama, bilah navigasi, dan struktur lainnya untuk halaman aplikasi. Pendekatan ini mengharuskan templat referensi untuk menambahkan atau memodifikasi hanya area tertentu dari templat dasar yang disebut blok .

Untuk kedua pendekatan, nilai <template_path> relatif terhadap templat aplikasi folder (.. / atau ./ juga diizinkan).

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

Langkah-langkah berikut menunjukkan pewarisan templat:

Di Solution Explorer, klik kanan pada folder HelloFlask/templates, dan buat file baru dari templat Halaman HTML dengan nama layout.html.

Ganti konten file layout.html dengan markup HTML berikut:

<!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; 2024</p>
      </footer>
   </div>
</body>
</html>

Templat ini berisi blok bernama content, yang mengidentifikasi semua konten yang perlu diganti oleh halaman referensi.

Dalam file HelloFlask/static/site.css, tambahkan gaya berikut ke akhir file:

.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;
}

Definisi gaya ini menghasilkan hasil yang menarik untuk latihan ini. Panduan ini tidak menunjukkan desain responsif.

Ganti konten file HelloFlask/templates/index.html dengan markup berikut:
```
{% extends "layout.html" %}
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Templat index sekarang mengacu pada templat dasar dan mengambil alih blok content. Anda dapat melihat bahwa dengan menggunakan pewarisan, templat ini disederhanakan.
Ganti konten file HelloFlask/templates/about.html dengan markup berikut, sehingga templat about juga mengacu pada templat dasar dan mengambil alih blok content:
```
{% extends "layout.html" %}
{% block content %}
{{ content }}
{% endblock %}
```
Jalankan aplikasi lagi dan amati hasilnya. Gunakan tautan bilah navigasi untuk beralih antar halaman aplikasi.
Setelah selesai, hentikan aplikasi dan simpan perubahan proyek Anda.
Karena Anda membuat perubahan besar pada aplikasi, ini adalah saat yang tepat untuk menyimpan perubahan Anda ke repositori Git. Untuk informasi selengkapnya, lihat Menerapkan perubahan pada kontrol sumber di Langkah 2 dari seri tutorial ini.

Ulasan tutorial

Selamat atas penyelesaian tutorial ini tentang Flask di Visual Studio.

Dalam tutorial ini, Anda belajar cara:

Membuat proyek Flask dengan beberapa halaman
Menggunakan templat untuk membuat tampilan halaman yang berbeda
Menyajikan file statis, menambahkan halaman, dan menggunakan pewarisan templat

Dokumentasi Perancang Templat Jinja (jinja.pocoo.org)
url_for dalam dokumentasi objek Aplikasi Flask (flask.pocoo.org)
Kode sumber Tutorial di GitHub (Microsoft/python-sample-vs-learning-flask)

Bagikan melalui

Tutorial: Menyajikan file statis dan menggunakan pewarisan templat dengan Flask di Visual Studio

Prasyarat

Menjelajahi templat item di Visual Studio

Memahami cara Visual Studio mengidentifikasi templat item

Menyajikan file statis dari aplikasi Anda

Menggunakan file CSS statis dalam templat

Menyajikan file statis dari kode

Mengatur file dan folder statis

Gunakan rute URL dan parameter kueri dari API

Menambahkan halaman ke aplikasi Flask

Beri nama fungsi halaman Anda

Menggunakan pewarisan templat untuk header dan navigasi

Ulasan tutorial

Saran dan Komentar

Sumber Daya Tambahan:

Bagikan melalui

Tutorial: Menyajikan file statis dan menggunakan pewarisan templat dengan Flask di Visual Studio

Prasyarat

Menjelajahi templat item di Visual Studio

Memahami cara Visual Studio mengidentifikasi templat item

Menyajikan file statis dari aplikasi Anda

Menggunakan file CSS statis dalam templat

Menyajikan file statis dari kode

Mengatur file dan folder statis

Gunakan rute URL dan parameter kueri dari API

Menambahkan halaman ke aplikasi Flask

Beri nama fungsi halaman Anda

Menggunakan pewarisan templat untuk header dan navigasi

Ulasan tutorial

Konten terkait

Saran dan Komentar

Sumber Daya Tambahan: