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

Artikel
01/27/2025

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

Langkah sebelumnya dalam seri tutorial ini membuat aplikasi Django 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 Django 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 Django
Menambahkan lebih banyak halaman ke aplikasi Django
Menggunakan pewarisan templat untuk membuat header dan navigasi di seluruh halaman

Prasyarat

Solusi Visual Studio dan proyek aplikasi Django yang dibuat di Langkah 1: Buat proyek Django dan diperbarui di Langkah 2: Buat aplikasi Django dengan tampilan dan templat halaman seri tutorial ini.
Tinjau bagian Prasyarat di Langkah 1 dari seri tutorial ini untuk detail tentang versi templat Django, proyek Visual Studio versus proyek Django, dan pengembangan Python di Mac.

Menjelajahi templat item di Visual Studio

Saat Anda mengembangkan aplikasi Django, 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 Django dapat mengirimkannya secara otomatis tanpa perlu menulis kode apa pun.

Proyek Django disiapkan secara default untuk menyajikan file statis dari folder statis aplikasi. Perilaku ini dimungkinkan oleh kode berikut 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 folder statis aplikasi dengan menggunakan struktur folder apa pun yang Anda suka, dan menggunakan jalur relatif dalam folder statis untuk merujuk ke file.

Menggunakan file CSS statis dalam templat HTML

Ikuti langkah-langkah ini untuk menambahkan file CSS ke aplikasi, lalu gunakan lembar gaya CSS di templat index.html:

Di Solution Explorer, klik kanan folder HelloDjangoApp 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 Django yang diperbarui:

Ganti isi file site.css dengan gaya berikut:

.message {
    font-weight: 600;
    color: blue;
}

Ganti konten file HelloDjangoApp/templates/index.html dengan markup berikut:
```
<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>
```
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.

Gunakan {% memuat tag %} statis

Pernyataan {% load static %} harus ada dalam file index.html sebelum referensi relatif situs ke file statis dalam elemen HTML seperti <head> dan <body>. Dalam contoh yang ditunjukkan di bagian ini, "file statis" mengacu pada kumpulan tag templat Django kustom. Kumpulan tag memungkinkan Anda menggunakan sintaks {% static %} untuk merujuk ke file statis. Tanpa tag {% load static %}, Anda akan melihat pengecualian saat aplikasi berjalan.

Menambahkan referensi tanpa tag {% load static %}

Anda juga dapat menyiapkan referensi relatif situs ke file statis dalam markup HTML tanpa menggunakan tag {% load static %}. Dalam hal ini, Anda menentukan lokasi folder statis dalam hierarki folder proyek Django:

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

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

Menambahkan halaman ke aplikasi Django

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

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

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

Di Penjelajah Solusi, klik kanan templat /folder HelloDjangoApp di proyek Anda, dan pilih Tambahkan>Item Baru.

Saran

Jika Anda tidak melihat perintah Item Baru pada menu Tambahkan, pastikan untuk menghentikan aplikasi Django 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>
      {% load static %}
      <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 HelloDjangoApp/views.py, 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."
      }
   )

Dalam file BasicProject/urls.py proyek Django, tambahkan jalur untuk halaman about sebagai item terakhir dalam array urlPatterns:

# Django processes URL patterns in the order they appear in the array
urlpatterns = [
   re_path(r'^$', HelloDjangoApp.views.index, name='index'),
   re_path(r'^home$', HelloDjangoApp.views.index, name='home'),
   re_path(r'^about$', HelloDjangoApp.views.about, name='about')
 ]

Dalam file templat /HelloDjangoApp/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 Django. 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.

Rutekan ke halaman "indeks"

Jika Anda mencoba menelusuri halaman /index untuk aplikasi yang sedang berjalan, Anda akan melihat halaman tidak ditemukan (404) kesalahan.

Meskipun file HelloDjangoApp/views.py memiliki fungsi bernama index, pola perutean URL dalam file BasicProject/urls.py proyek Django tidak berisi ekspresi reguler yang cocok dengan string index. Ekspresi saat ini untuk halaman indeks aplikasi ^$. Untuk mencocokkan string index, Anda perlu menambahkan entri URL lain untuk pola ^index$.

Bagian berikutnya menjelaskan bagaimana lebih baik menggunakan tag {% url '<pattern_name>' %} di templat halaman untuk merujuk ke nama pola. Dalam hal ini, Django membuat URL yang tepat untuk Anda. Misalnya, Anda dapat mengganti markup <div><a href="home">Home</a></div> di file templat /HelloDjangoApp/about.html dengan markup <div><a href="{% url 'index' %}">Home</a></div>. Penggunaan string 'index' sekarang berfungsi karena pola URL pertama dalam file urls.py diberi nama 'index'. Anda juga dapat menggunakan 'home' untuk merujuk ke pola kedua.

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 Django 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. Termasuk biasanya digunakan dalam bagian utama halaman untuk memasukkan templat bersama di lokasi tertentu di halaman.
Warisan menggunakan sintaks {% extends <template_path> %} di awal templat halaman untuk menentukan templat dasar bersama yang menjadi dasar bagi 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 tersebut, nilai <template_path> relatif terhadap folder templat aplikasi (../ atau ./ juga diperbolehkan).

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 folder templates/HelloDjangoApp, 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>
   {% 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; 2024</p>
      </footer>
   </div>
</body>
</html>

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

Dalam file HelloDjangoApp/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 templat /HelloDjangoApp/index.html dengan kode berikut:
```
{% extends "HelloDjangoApp/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 templat /file HelloDjangoApp/about.html dengan kode berikut, sehingga templat about juga mengacu pada templat dasar dan mengambil alih blok content:
```
{% extends "HelloDjangoApp/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.

Langkah berikutnya

Langkah 4: Gunakan templat Django Web Project lengkap

Bagikan melalui