Tutorial: Membuat aplikasi Flask dengan tampilan dan templat halaman di Visual Studio

2025-06-12

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

Visual Studio memungkinkan Anda membuat aplikasi Flask dari templat proyek yang menyediakan titik awal yang lebih luas untuk proyek Anda. Langkah 1 dalam tutorial menjelaskan cara membuat aplikasi Flask dengan satu halaman, di mana semua kode berada dalam satu file. Di Langkah 2, Anda menata ulang kode dan membuat struktur untuk templat halaman guna memungkinkan pengembangan lebih lanjut. Secara khusus, Anda ingin memisahkan kode untuk tampilan aplikasi dari aspek lain seperti kode startup.

Di Langkah 2 tutorial, Anda mempelajari cara:

Refaktor kode aplikasi untuk memisahkan tampilan dari kode startup
Merender tampilan dengan menggunakan templat halaman

Prasyarat

Solusi Visual Studio dan proyek aplikasi Flask yang dibuat di Langkah 1: Membuat solusi Visual Studio dan proyek Flask.

Refaktorisasi proyek Flask untuk pengembangan lebih lanjut

Templat Proyek Web Flask Kosong memungkinkan Anda membuat proyek dengan satu file app.py yang berisi kode startup bersama satu tampilan. Untuk memungkinkan pengembangan lebih lanjut aplikasi dengan beberapa tampilan dan templat, Anda perlu memisahkan fungsi-fungsi ini.

Ikuti langkah-langkah ini untuk menyesuaikan proyek Flask Anda untuk memungkinkan pengembangan lebih lanjut:

Di Solution Explorer, klik kanan folder proyek Flask Anda (BasicProject), dan pilih Tambahkan>Folder Baru.
Beri nama folder aplikasi baru HelloFlask.
Klik kanan folder HelloFlask, dan pilih Tambahkan>Item Baru untuk membuat file baru.
Dalam dialog Tambahkan Item Baru, pilih templat file File Python Kosong:
1. Beri nama file __init__.py. Nama file harus menyertakan dua karakter garis bawah di awal dan di akhir (_) mengelilingi kata init.
2. Pilih Tambahkan.
Tambahkan kode berikut ke file baru, yang membuat instans Flask dan memuat tampilan aplikasi:
```
from flask import Flask
app = Flask(__name__)

import HelloFlask.views
```
Di folder HelloFlask, buat file Python baru lain bernama views.py.

Penting

Pastikan untuk menentukan nama file sebagai views.py. Nama menampilkan penting karena pernyataan import HelloFlask.views dalam file __init__.py. Jika nama tampilan tidak sama di kedua instans, Visual Studio menampilkan kesalahan saat runtime.
Tambahkan kode berikut ke file views.py. Kode ini mengganti nama fungsi dan menentukan rute pengembalian ke titik akhir /home:
```
from flask import Flask
from HelloFlask import app

@app.route('/')
@app.route('/home')
def home():
    return "Hello Flask!"
```
Kode ini juga berisi kode penyajian halaman dari file app.py dan mengimpor objek app yang dideklarasikan dalam file __init__.py.
Di folder HelloFlask, buat subfolder bernama templates. Folder kosong untuk saat ini.

Di folder proyek Flask (BasicProject), ganti konten file app.py dengan kode berikut:

import os
from HelloFlask import app    # Imports the code from HelloFlask/__init__.py

if __name__ == '__main__':
    HOST = os.environ.get('SERVER_HOST', 'localhost')

    try:
        PORT = int(os.environ.get('SERVER_PORT', '5555'))
    except ValueError:
        PORT = 5555

    app.run(HOST, PORT)

Setelah Anda memperbarui kode, ganti nama file app.py menjadi runserver.py.
Pastikan struktur proyek Flask yang telah Anda refaktor terlihat seperti contoh berikut:

Jalankan program yang direfaktor dan periksa rute

Sekarang Anda siap untuk menjalankan proyek Anda di Visual Studio:

Di Visual Studio, pilih Debug>Mulai Penelusuran Kesalahan (F5) atau pilih Server Web pada toolbar utama (browser yang Anda lihat mungkin berbeda):
Saat aplikasi terbuka di browser, coba titik akhir rute / (root) dan URL /home di browser:

Jalankan program yang diperbarui di Debugger

Anda juga dapat mengatur titik henti di berbagai bagian kode dan mengikuti urutan startup aplikasi di Debugger:

Atur beberapa titik henti, seperti titik berikut:
- Baris pertama file runserver.py
- Baris pertama file __init__.py
- Baris return "Hello Flask!" dalam file views.py
Mulai aplikasi di Debugger dengan memilih Debug>Mulai Debugging atau F5.
Sementara Debugger berjalan, telusuri kode dengan F10, atau jalankan kode dari setiap titik henti dengan F5. Anda juga dapat menggunakan kontrol penelusuran kesalahan pada toolbar utama di Visual Studio, seperti opsi Lanjutkan, Hentikan, Mulai Ulang, dan Langkah:
Setelah selesai, pilih Ctrl+C diikuti oleh kunci apa pun untuk menghentikan aplikasi. Anda juga dapat menutup jendela browser yang terbuka untuk rute.

Menerapkan perubahan pada kontrol sumber

Setelah merefaktor kode dan menguji pembaruan, Anda dapat meninjau dan menerapkan perubahan pada kontrol sumber:

Simpan perubahan pada file proyek Anda, seperti dengan pintasan keyboard Ctrl+S.
Pada bilah kontrol Git, pilih perubahan yang tidak dilakukan (pensil 5) untuk membuka jendela Perubahan Git:
Di jendela Perubahan Git, masukkan pesan komit, dan pilih Komit Semua:

Saat penerapan selesai, Visual Studio menampilkan pesan Commit <hash> dibuat secara lokal.
(Opsional) Dorong perubahan yang diterapkan ke repositori jarak jauh Anda:
1. Pada bilah kontrol Git, pilih komit keluar/masuk (panah 1/0).
2. Pilih Sinkronkan (Tarik lalu Dorong) atau Dorong.
Anda juga dapat mengakumulasi beberapa komit lokal sebelum mengunggahnya ke repositori jarak jauh.

Simpan perubahan pada file proyek Anda, seperti dengan pintasan keyboard Ctrl+S.
Pilih perubahan yang tidak diterapkan (pensil 5) di kanan bawah di Visual Studio, yang membuka Team Explorer:
Di Team Explorer, masukkan pesan penerapan seperti "Kode refaktor" dan pilih Terapkan Semua.

Saat penerapan selesai, Visual Studio menampilkan pesan Commit <hash> dibuat secara lokal. Sinkronkan untuk berbagi perubahan Anda dengan server.
(Opsional) Dorong perubahan yang diterapkan ke repositori jarak jauh Anda:
1. Di Team Explorer, pilih Sync.
2. Perluas Komit Keluar dan pilih Push.
Anda juga dapat mengakumulasi beberapa commit lokal sebelum mengunggahnya ke repositori jarak jauh.

Untuk prosedur berikutnya dalam seri tutorial ini, Anda dapat merujuk ke bagian ini untuk langkah-langkah menerapkan perubahan pada kontrol sumber.

Menentukan frekuensi commit dan push

Menerapkan perubahan pada kontrol sumber membuat rekaman di log perubahan dan titik tempat Anda dapat mengembalikan repositori, sesuai kebutuhan. Anda juga dapat memeriksa setiap komit untuk meninjau perubahan tertentu.

Commit di Git tidak mahal. Lebih baik mengirimkan perubahan Anda dalam jumlah kecil dengan penerapan yang sering, daripada mengakumulasi sejumlah besar perubahan dan mengirimkannya sebagai satu penerapan.

Anda tidak perlu menerapkan setiap perubahan kecil pada file individual. Umum untuk membuat commit saat Anda menambahkan fitur, mengubah struktur seperti yang ditunjukkan dalam langkah dalam seri tutorial ini, atau merefaktor beberapa kode. Ini juga merupakan praktik yang baik untuk berdiskusi dengan kolaborator Anda guna menyetujui tingkat kehalusan komitmen yang paling cocok bagi semua orang.

Seberapa sering Anda melakukan commit dan seberapa sering Anda mendorong commit ke repositori jarak jauh adalah dua hal yang berbeda. Anda mungkin mengakumulasi beberapa commit di repositori lokal Anda sebelum mengunggahnya ke repositori jarak jauh. Frekuensi komit Anda tergantung pada bagaimana tim Anda ingin mengelola repositori.

Menggunakan templat untuk merender halaman dan tampilan

Fungsi home dalam file views.py menghasilkan respons HTTP teks biasa untuk halaman tersebut. Sebagian besar halaman web dunia nyata merespons dengan halaman HTML kaya yang sering menggabungkan data langsung. Alasan utama pengembang menentukan tampilan dengan menggunakan fungsi adalah untuk menghasilkan konten secara dinamis.

Nilai pengembalian untuk tampilan hanyalah string. Anda dapat membangun HTML apa pun dalam string dengan menggunakan konten dinamis. Karena yang terbaik adalah memisahkan markup dari data, lebih baik menempatkan markup dalam templat dan menyimpan data dalam kode.

Menyesuaikan tampilan untuk menggunakan HTML sebaris

Langkah pertama adalah mengonversi pemrosesan tampilan untuk menggunakan HTML sebaris untuk halaman dengan beberapa konten dinamis:

Ganti konten file views.py dengan kode berikut:

from datetime import datetime
from flask import render_template
from HelloFlask import app

@app.route('/')
@app.route('/home')
def home():
    now = datetime.now()
    formatted_now = now.strftime("%A, %d %B, %Y at %X")

    html_content = "<html><head><title>Hello Flask</title></head><body>"
    html_content += "<strong>Hello Flask!</strong> on " + formatted_now
    html_content += "</body></html>"

    return html_content

Simpan perubahan Anda dan jalankan aplikasi Anda lagi.
Refresh halaman beberapa kali untuk mengonfirmasi bahwa tanggal dan waktu diperbarui. Setelah selesai, hentikan aplikasi.

Membuat templat HTML

Selanjutnya, konversikan proses penyajian halaman untuk menggunakan templat HTML:

Klik kanan folder templat, dan pilih Tambahkan>Item Baru untuk membuat file baru.
Dalam dialog Tambahkan Item Baru, pilih templat file Halaman HTML. Beri nama file index.html dan pilih Tambahkan.
Ganti konten file HTML yang disediakan dengan markup berikut:
```
<html>
<head>
   <title>Hello Flask</title>
</head>

<body>
   {{ content }}
</body>
</html>
```
Dalam kode ini, pernyataan {{ content }} adalah placeholder atau token pengganti (juga disebut variabel template ) di mana Anda menyediakan nilai dalam kode.

Menyesuaikan fungsi beranda untuk memuat templat

Anda perlu mengubah fungsi home untuk menggunakan metode render_template. Metode ini memuat template HTML dan memasok nilai untuk {{ content }} dengan menggunakan argumen yang namanya cocok dengan placeholder tersebut.

Dalam file views.py, ganti definisi fungsi home dengan kode berikut:

def home():
    now = datetime.now()
    formatted_now = now.strftime("%A, %d %B, %Y at %X")

    return render_template(
        "index.html",
        content = "<strong>Hello, Flask!</strong> on " + formatted_now)

Flask secara otomatis mencari templat di folder templat, sehingga jalur ke templat relatif terhadap folder tersebut.

Simpan perubahan proyek Anda dan jalankan aplikasi lagi.

Perhatikan bahwa sintaks HTML sebaris (\<strong> ...) dalam nilai content tidak merender sebagai HTML karena mesin templat (Jinja) secara otomatis lolos dari konten HTML. Pelepasan otomatis mencegah kerentanan yang tidak disengaja terhadap serangan injeksi.

Pengembang sering mengumpulkan input dari satu halaman dan menggunakannya sebagai nilai di halaman lain dengan menggunakan placeholder templat. Pelolosan juga berfungsi sebagai pengingat bahwa yang terbaik adalah menghindari penggunaan HTML dalam kode.

Setelah selesai, hentikan aplikasi.

Gunakan tempat penampung yang berbeda

Anda dapat menggunakan tempat penampung yang berbeda untuk setiap bagian data dalam markup HTML. Kemudian, sesuaikan kembali fungsi home Anda untuk menyediakan nilai *placeholder* tertentu.

Ganti konten file index.html dengan markup berikut:

<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <strong>{{ message }}</strong>{{ content }}
  </body>
</html>

Dalam file views.py, ganti definisi fungsi home dengan kode berikut untuk memberikan nilai pada semua placeholder.

def home():
    now = datetime.now()
    formatted_now = now.strftime("%A, %d %B, %Y at %X")

    return render_template(
        "index.html",
        title = "Hello Flask",
        message = "Hello, Flask!",
        content = " on " + formatted_now)

Simpan perubahan Anda dan jalankan aplikasi Anda lagi. Kali ini Anda akan melihat output yang dirender dengan benar:
Anda dapat menerapkan perubahan pada kontrol sumber dan memperbarui repositori jarak jauh Anda. Untuk informasi selengkapnya, lihat Menerapkan perubahan pada kontrol sumber.

Memisahkan templat halaman

Templat biasanya dipertahankan dalam file HTML terpisah, tetapi Anda juga dapat menggunakan templat sebaris. File terpisah disarankan untuk mempertahankan pemisahan yang bersih antara markup dan kode.

Menggunakan ekstensi .html untuk templat

Ekstensi .html untuk file templat halaman sepenuhnya opsional. Anda selalu dapat mengidentifikasi jalur relatif yang tepat ke file dalam argumen pertama ke fungsi render_template. Namun, Visual Studio (dan editor lainnya) biasanya menyediakan fitur seperti penyelesaian kode dan warna sintaks dengan file .html, yang melebihi fakta bahwa templat halaman bukan HTML.

Saat Anda bekerja dengan proyek Flask, Visual Studio secara otomatis mendeteksi apakah file HTML yang Anda edit sebenarnya adalah templat Flask, dan menyediakan fitur lengkapi otomatis tertentu. Jika Anda mulai memasukkan komentar templat halaman Flask ({#), Visual Studio secara otomatis menambahkan karakter #} penutup. Perintah Pilihan Komentar dan Pilihan Uncomment (pada menu Edit>Tingkat Lanjut) juga menggunakan komentar templat daripada komentar HTML.

Menata templat ke dalam subfolder

Anda dapat menggunakan subfolder dan kemudian merujuk ke jalur relatif di dalam folder templat dalam panggilan ke fungsi render_template. Pendekatan ini adalah cara yang bagus untuk membuat namespace secara efektif untuk templat Anda.

Langkah berikutnya

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

Bagikan melalui