Langkah 2: Membuat aplikasi Flask dengan tampilan dan template halaman

Artikel
09/08/2023

Langkah sebelumnya: Membuat proyek dan solusi Visual Studio

Pada langkah 1 tutorial ini, Anda membuat aplikasi Flask dengan satu halaman dan semua kode dalam satu file. Untuk memungkinkan pengembangan di masa mendatang, yang terbaik adalah merefaktor kode dan membuat struktur untuk template halaman. Secara khusus, Anda ingin memisahkan kode untuk tampilan aplikasi dari aspek lain seperti kode startup.

Dalam langkah ini Anda sekarang mempelajari cara:

Refaktor kode aplikasi untuk memisahkan tampilan dari kode startup (langkah 2-1)
Merender tampilan menggunakan template halaman (langkah 2-2)

Langkah 2-1: Refaktor proyek untuk mendukung pengembangan lebih lanjut

Dalam kode yang dibuat oleh template "Blank Flask Web Project", Anda memiliki satu file app.py yang berisi kode startup bersama satu tampilan. Untuk memungkinkan pengembangan lebih lanjut aplikasi dengan beberapa tampilan dan template, yang terbaik adalah memisahkan masalah ini.

Di folder proyek Anda, buat folder aplikasi bernama HelloFlask (klik kanan proyek di Penjelajah Solusi dan pilih Tambahkan>Folder Baru.)
Di folder HelloFlask, buat file bernama __init__.py dengan konten berikut yang membuat instans Flask dan memuat tampilan aplikasi (dibuat pada langkah berikutnya):
```
from flask import Flask
app = Flask(__name__)

import HelloFlask.views
```
Di folder HelloFlask, buat file bernama views.py dengan konten berikut. Nama views.py penting karena Anda menggunakan import HelloFlask.viewsdalam __init__.py; Anda akan melihat kesalahan saat runtime bahasa umum jika nama tidak cocok.
```
from flask import Flask
from HelloFlask import app

@app.route('/')
@app.route('/home')
def home():
    return "Hello Flask!"
```
Selain mengganti nama fungsi dan merutekan ke home, kode ini berisi kode perenderan halaman dari app.py dan mengimpor app objek yang dideklarasikan dalam __init__.py.
Buat subfolder di HelloFlask bernama template, yang tetap kosong untuk saat ini.

Di folder akar proyek, ganti nama app.py menjadi runserver.py, dan buat konten cocok 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)

Pengaturan Anda akan terlihat seperti gambar berikut:
Pilih Debug>Mulai Penelusuran Kesalahan (F5) atau gunakan tombol Server Web pada toolbar (browser yang Anda lihat mungkin bervariasi) untuk memulai aplikasi dan membuka browser. Coba rute URL / dan /home.
Anda juga dapat mengatur titik henti di berbagai bagian kode dan memulai ulang aplikasi untuk mengikuti urutan startup. Misalnya, atur titik henti pada baris pertama runserver.py dan *HelloFlask_*init_.py, dan pada return "Hello Flask!" baris di views.py. Kemudian, mulai ulang aplikasi (Debug>Hidupkan Ulang, Ctrl+Shift+F5, atau tombol toolbar yang ditunjukkan di bawah) dan tembus (F10) kode, atau jalankan dari setiap titik henti menggunakan F5.
Setelah selesai, hentikan aplikasi.

Menerapkan ke kontrol sumber

Setelah berhasil membuat perubahan pada kode dan pengujian, Anda dapat meninjau dan menerapkan perubahan pada kontrol sumber. Di langkah selanjutnya, ketika tutorial ini mengingatkan Anda untuk berkomitmen pada kontrol sumber lagi, Anda dapat merujuk ke bagian ini.

Pilih tombol perubahan di sepanjang bagian bawah Visual Studio (dilingkari di bawah), untuk membuka Team Explorer.
Di Team Explorer, masukkan pesan penerapan seperti "Kode refaktor" dan pilih Terapkan Semua. Saat penerapan selesai, Anda akan melihat pesan Terapkan <hash> yang dibuat secara lokal. Sinkronkan untuk berbagi perubahan Anda dengan server. Jika Anda ingin mendorong perubahan ke repositori jarak jauh Anda, pilih Sinkronkan, lalu pilih Dorong di bawah Penerapan Keluar. Anda juga dapat mengakumulasi beberapa penerapan lokal sebelum mendorong ke jarak jauh.

Pertanyaan: Seberapa sering seseorang harus berkomitmen pada kontrol sumber?

Jawaban: Menerapkan perubahan pada kontrol sumber membuat rekaman di log perubahan dan titik tempat Anda dapat mengembalikan repositori jika perlu. Setiap penerapan juga dapat diperiksa untuk perubahan spesifiknya. Karena penerapan di Git murah, lebih baik melakukan penerapan yang sering daripada mengakumulasi sejumlah besar perubahan menjadi satu penerapan. Anda tidak perlu melakukan setiap perubahan kecil pada file individual. Biasanya, Anda membuat penerapan saat menambahkan fitur, mengubah struktur seperti yang telah Anda lakukan dalam langkah ini, atau merefaktor beberapa kode. Periksa juga dengan orang lain di tim Anda untuk granularitas penerapan yang paling sesuai untuk semua orang.

Seberapa sering Anda berkomitmen dan seberapa sering Anda mendorong penerapan ke repositori jarak jauh adalah dua kekhawatiran yang berbeda. Anda mungkin mengumpulkan beberapa penerapan di repositori lokal Anda sebelum mendorongnya ke repositori jarak jauh. Frekuensi penerapan Anda tergantung pada bagaimana tim Anda ingin mengelola repositori.

Langkah 2-2: Gunakan template untuk merender halaman

Fungsi home yang Anda miliki sejauh ini di views.py menghasilkan tidak lebih dari respons HTTP teks biasa untuk halaman. Namun, sebagian besar halaman web dunia nyata, merespons dengan halaman HTML kaya yang sering menggabungkan data langsung. Alasan utama untuk menentukan tampilan menggunakan fungsi adalah untuk menghasilkan konten secara dinamis.

Karena nilai yang ditampilkan untuk tampilan hanyalah string, Anda dapat menyusun HTML apa pun yang Anda suka dalam string, menggunakan konten dinamis. Namun, karena yang terbaik adalah memisahkan markup dari data, lebih baik menempatkan markup dalam template dan menyimpan data dalam kode.

Sebagai permulaan, edit views.py agar berisi kode berikut yang menggunakan HTML sebaris untuk halaman dengan beberapa konten dinamis:

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

Jalankan aplikasi dan refresh halaman beberapa kali untuk melihat bahwa tanggal/waktu diperbarui. Setelah selesai, hentikan aplikasi.
Untuk mengonversi perenderan halaman untuk menggunakan template, buat file bernama index.html di folder template dengan konten berikut, di mana {{ content }} adalah tempat penampung atau token pengganti (juga disebut variabel template) yang Anda berikan nilai dalam kode:
```
<html>
  <head>
    <title>Hello Flask</title>
  </head>

  <body>
    {{ content }}
  </body>
</html>
```
Ubah fungsi yang home akan digunakan render_template untuk memuat template dan berikan nilai untuk "konten", yang dilakukan menggunakan argumen bernama yang cocok dengan nama tempat penampung. Flask secara otomatis mencari template di folder template, sehingga jalur ke template relatif terhadap folder tersebut:
```
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)
```
Jalankan aplikasi dan lihat hasilnya. Amati bahwa HTML sebaris dalam content nilai tidak merender sebagai HTML karena mesin template (Jinja) secara otomatis keluar 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 tempat penampung templat lainnya. Pelepasan juga berfungsi sebagai pengingat bahwa yang terbaik adalah menjaga HTML dari kode.

Oleh karena itu, tinjau templates\index.html untuk berisi tempat penampung yang berbeda untuk setiap bagian data dalam markup:
```
<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <strong>{{ message }}</strong>{{ content }}
  </body>
</html>
```
Kemudian perbarui fungsi home untuk menyediakan nilai untuk semua tempat penampung:
```
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)
```
Jalankan aplikasi lagi dan lihat output yang dirender dengan benar.
Anda dapat menerapkan perubahan pada kontrol sumber dan memperbarui repositori jarak jauh Anda. Untuk informasi selengkapnya, lihat langkah 2-1.

Pertanyaan: Apakah templat halaman harus berada dalam file terpisah?

Jawaban: Meskipun template biasanya dipertahankan dalam file HTML terpisah, Anda juga dapat menggunakan template sebaris. File terpisah disarankan untuk mempertahankan pemisahan yang bersih antara markup dan kode.

Pertanyaan: Haruskah template menggunakan ekstensi file .html?

Jawaban: Ekstensi .html untuk file template halaman sepenuhnya opsional karena Anda selalu dapat mengidentifikasi jalur relatif yang tepat ke file dalam argumen pertama ke fungsi render_template. Namun, Visual Studio (dan editor lainnya) biasanya memberi Anda fitur seperti penyelesaian kode dan pewarnaan sintaks dengan file .html, yang lebih besar daripada fakta bahwa template halaman bukan HTML.

Saat Anda bekerja dengan proyek Flask, Visual Studio secara otomatis mendeteksi kapan file HTML yang Anda edit sebenarnya adalah template Flask, dan menyediakan fitur lengkapi otomatis tertentu. Misalnya, saat Anda muai mengetik komentar template halaman Flask, {#, Visual Studio otomatis memberi Anda karakter penutup #}. Perintah Pilihan Komentar dan Batalkan Pemilihan Komentar (pada menu Edit>Tingkat Lanjut dan pada toolbar) juga menggunakan komentar template, dan bukan komentar HTML.

Pertanyaan: Bisakah template diatur ke dalam subfolder lebih lanjut?

Jawaban: Ya, Anda dapat menggunakan subfolder lalu merujuk ke jalur relatif di bawah template dalam panggilan ke render_template. Melakukannya adalah cara yang bagus untuk membuat namespace layanan secara efektif untuk template Anda.

Langkah berikutnya

Menyajikan file statis, menambahkan halaman, dan menggunakan pewarisan templat

Mempelajari secara lebih mendalam

Mulai Cepat Flask - Template Perenderan (flask.pocoo.org)
Kode sumber tutorial di GitHub: Microsoft/python-sample-vs-learning-flask

Bagikan melalui