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

Artikel
05/08/2023

Langkah sebelumnya: Buat aplikasi Django dengan tampilan dan templat halaman

Dalam langkah-langkah tutorial sebelumnya, Anda telah mempelajari cara membuat aplikasi Django minimal dengan satu halaman HTML. Namun, aplikasi web modern berisi banyak halaman. Halaman web modern 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)
Siapkan proyek Django untuk menyajikan file statis (langkah 3-2)
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 Django, Anda biasanya menambahkan 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 selanjutnya pilih Tambahkan. 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 host web. File Python juga tidak pernah ditransmisikan ke komputer pengguna. Namun, file lain, seperti CSS dan JavaScript, digunakan secara eksklusif oleh browser. Jadi, server host hanya mengirimkannya apa adanya setiap kali diminta. File tersebut disebut sebagai file "statis", dan Django dapat mengirimkannya secara otomatis tanpa Anda perlu menulis kode apa pun.

Proyek Django disiapkan secara default untuk menyajikan file statis dari folder statis aplikasi, berkat baris dalam file settings.py proyek Django:

# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.9/howto/static-files/

STATIC_URL = '/static/'

STATIC_ROOT = posixpath.join(*(BASE_DIR.split(os.path.sep) + ['static']))

Anda dapat mengatur file dalam statis menggunakan struktur folder apa pun yang Anda suka, lalu menggunakan jalur relatif dalam folder tersebut untuk merujuk ke file. Untuk menunjukkan prosesnya, ikuti langkah-langkah di bawah ini untuk menambahkan file CSS ke aplikasi, lalu gunakan lembar gaya tersebut di templat index.html:

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

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 templat/HelloDjangoApp/index.html aplikasi dengan kode berikut. Kode menggantikan elemen yang <strong> digunakan di langkah 2 dengan yang mereferensikan <span>message kelas gaya. Menggunakan kelas gaya dengan cara ini memberi Anda lebih banyak fleksibilitas dalam menata elemen. (Jika Anda belum memindahkan file index.html ke subfolder dalam templat saat menggunakan VS 2017 15.7 dan yang lebih lama, lihat namespacing templat di langkah 2-4.)
```
<html>
    <head>
        <title>{{ title }}</title>
        {% load static %} 
        <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).

Pertanyaan: Apa tujuan dari tag {% statis beban %}?

Jawaban: Baris {% load static %} diperlukan sebelum merujuk ke file statis dalam elemen seperti <head> dan<body>. Dalam contoh yang ditunjukkan di bagian ini, "file statis" mengacu pada kumpulan tag templat Django kustom, yang memungkinkan Anda menggunakan {% static %} sintaks untuk merujuk ke file statis. Tanpa {% load static %}, Anda akan melihat pengecualian saat aplikasi berjalan.

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). Dalam setiap kasus, ingatlah untuk menyertakan folder tersebut dalam jalur file relatif dalam {% static %} referensi.

Pertanyaan: Bisakah saya menyelesaikan tugas yang sama tanpa menggunakan tag {% load static %}?

Jawaban: Ya, Anda bisa.

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

Langkah 3-3: Menambahkan halaman ke aplikasi

Menambahkan halaman lain ke aplikasi akan:

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 "HelloDjangoApp", dan tautan ke halaman tersebut dari halaman beranda:

Di Penjelajah Solusi, klik kanan folder templates/HelloDjangoApp. PilihTambahkan>item Baru dan pilih templat item Halaman HTML. Beri nama file about.html dan pilih Tambahkan.

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>
        {% load static %}
        <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:

def about(request):
    return render(
        request,
        "HelloDjangoApp/about.html",
        {
            'title' : "About HelloDjangoApp",
            'content' : "Example app page for Django."
        }
    )

Buka file urls.py proyek Django dan tambahkan baris berikut ke urlPatterns array:
```
re_path(r'^about$', HelloDjangoApp.views.about, name='about'),
```
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. Setelah selesai, tutup server.

Pertanyaan: Saya mencoba menggunakan "indeks" untuk tautan ke halaman beranda, tetapi tidak berfungsi. Mengapa?

Jawaban: Meskipun fungsi tampilan dalam file views.py diberi nama index, pola perutean URL dalam file urls.py proyek Django tidak berisi ekspresi reguler yang cocok dengan string "indeks". Untuk mencocokkan string, Anda perlu menambahkan entri lain untuk pola ^index$.

Seperti yang ditunjukkan di bagian berikutnya, lebih baik menggunakan {% url '<pattern_name>' %} tag di templat halaman untuk merujuk ke nama pola. Dalam hal ini, Django membuat URL yang tepat untuk Anda. Misalnya, ganti <div><a href="home">Home</a></div> di about.html dengan <div><a href="{% url 'index' %}">Home</a></div>. Penggunaan 'indeks' berfungsi di sini karena pola URL pertama dalam urls.py, pada kenyataannya, bernama 'indeks' (berdasarkan name='index'argumen). Anda juga dapat menggunakan 'home' untuk merujuk ke pola kedua.

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

Alih-alih memiliki tautan navigasi eksplisit di setiap halaman, aplikasi web modern menggunakan header branding dan bilah navigasi. Bilah navigasi menyediakan tautan halaman yang paling penting, menu popup, dan sebagainya. Untuk memastikan bahwa bilah header dan navigasi sama di semua halaman, jangan ulangi kode yang sama di setiap templat halaman. Sebagai gantinya, Anda ingin menentukan bagian umum dari semua halaman Anda di satu tempat.

Sistem templat Django (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 {% block <block_name> %}menggunakan{% endblock %}tag. 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 template/HelloDjangoApp aplikasi, buat file HTML baru. Klik kanan folder templat/HelloDjangoApp, pilih Tambahkan>Item baru lalu pilih templat item Halaman HTML. Beri nama file layout.html dan pilih Tambahkan.

Ganti konten file layout.html 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>
    {% load static %}
    <link rel="stylesheet" type="text/css" href="{% static 'site.css' %}" />
</head>

<body>
    <div class="navbar">
       <a href="/" class="navbar-brand">Hello Django</a>
       <a href="{% url 'home' %}" class="navbar-item">Home</a>
       <a href="{% url '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 file templates/HelloDjangoApp/index.html untuk merujuk ke templat dasar dan membuatnya dapat digunakan dalam halaman. Tambahkan baris berikut sebagai baris 1 di halaman HTML (di atas tag html):
```
{% extends "HelloDjangoApp/layout.html" %}
```
Anda dapat melihat bahwa dengan menggunakan pewarisan, templat ini menjadi mudah diterapkan dalam tag isi untuk mengambil alih blok konten:
```
{% block content %}
<span class="message">{{ message }}</span>{{ content }}
{% endblock %}
```
Ubah file templates/HelloDjangoApp/about.html dengan cara yang sama untuk membuat templat tata letak tersedia. Tambahkan baris yang sama dari langkah 1 di halaman HTML (di atas tag html):
```
{% extends "HelloDjangoApp/layout.html" %}
```
Kemudian, menggunakan pewarisan, terapkan templat dalam tag isi untuk mengambil alih blok konten:
```
{% 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

Gunakan templat lengkap Django Web Project

Mempelajari secara lebih mendalam

Menulis aplikasi Django pertama Anda, bagian 3 - formulir dan tampilan generik (docs.djangoproject.com)
Untuk kemampuan templat Django lainnya, seperti alur kontrol, lihat Bahasa templat Django (docs.djangoproject.com)
Untuk detail lengkap tentang menggunakan {% url %} tag, lihat url dalam tag templat bawaan dan filter untuk referensi templat Django (docs.djangoproject.com)
Kode sumber tutorial tentang GitHub: Microsoft/python-sample-vs-learning-django

Bagikan melalui