Langkah 2: Membuat aplikasi Django dengan tampilan dan templat halaman

Artikel
09/08/2023

Langkah sebelumnya: Membuat proyek dan solusi Visual Studio

Dalam proyek Visual Studio, Anda hanya memiliki komponen tingkat situs dari proyek Django sekarang, yang dapat menjalankan satu atau beberapa aplikasi Django. Langkah berikutnya adalah membuat aplikasi pertama Anda dengan satu halaman.

Dalam langkah ini, Anda mempelajari cara:

Membuat aplikasi Django dengan satu halaman (langkah 2-1)
Jalankan aplikasi dari proyek Django (langkah 2-2)
Merender tampilan menggunakan HTML (langkah 2-3)
Merender tampilan menggunakan templat halaman Django (langkah 2-4)

Langkah 2-1: Membuat aplikasi dengan struktur default

Aplikasi Django adalah paket Python terpisah yang berisi sekumpulan file terkait untuk tujuan tertentu. Proyek Django dapat berisi banyak aplikasi, yang membantu host web melayani banyak titik masuk terpisah dari satu nama domain. Misalnya, proyek Django untuk domain seperti contoso.com mungkin berisi satu aplikasi untuk www.contoso.com, aplikasi kedua untuk support.contoso.com, dan aplikasi ketiga untuk docs.contoso.com. Dalam hal ini, proyek Django menangani perutean dan pengaturan URL tingkat situs (dalam file urls.py dan settings.py ). Setiap aplikasi memiliki gaya dan perilakunya sendiri yang berbeda melalui perutean internal, tampilan, model, file statis, dan antarmuka administratifnya.

Aplikasi Django biasanya dimulai dengan sekumpulan file standar. Visual Studio menyediakan templat untuk menginisialisasi aplikasi Django dalam proyek Django, bersama dengan perintah menu terintegrasi yang melayani tujuan yang sama:

Templat: Di Penjelajah Solusi, klik kanan proyek dan pilih Tambahkan>Item baru. Dalam dialog Tambahkan Item Baru, pilih templat Aplikasi Django 1.9, tentukan nama aplikasi di bidang Nama, dan pilih Tambahkan.

Screenshot of Solution Explorer.

Screenshot of Add New Item window.

Perintah terintegrasi: Di Penjelajah Solusi, klik kanan proyek dan pilih Tambahkan>aplikasi Django. Perintah ini meminta nama Anda. Tentukan nama aplikasi di bidang Nama Aplikasi Baru, dan pilih OK.

Dengan menggunakan salah satu metode, buat aplikasi dengan nama "HelloDjangoApp". Sekarang, folder "HelloDjangoApp" dibuat di proyek Anda. Folder berisi item berikut:

Django app files in Solution Explorer.

Item	Deskripsi
migrasi	Folder tempat Django menyimpan skrip yang memperbarui database agar selaras dengan perubahan pada model. Alat migrasi Django kemudian menerapkan perubahan yang diperlukan ke versi database sebelumnya agar sesuai dengan model saat ini. Dengan menggunakan migrasi, Anda tetap fokus pada model Anda dan biarkan Django menangani skema database yang mendasar. Migrasi dibahas dalam dokumentasi Django. Untuk saat ini, folder berisi file __init__.py (menunjukkan bahwa folder menentukan paket Python sendiri).
__init__.py	File yang mengidentifikasi aplikasi sebagai paket.
templat	Folder untuk templat halaman Django yang berisi satu file index.html. File index.html ditempatkan di folder bernama sama dengan nama aplikasi. (Pada Visual Studio 2017 15.7 dan yang lebih lama, file ditempatkan langsung di bawah templat dan langkah 2-4 menginstruksikan Anda untuk membuat subfolder.) Templat adalah blok HTML tempat tampilan dapat menambahkan informasi untuk merender halaman secara dinamis. Templat halaman "variabel," seperti `{{ content }}` di index.html, adalah tempat penampung untuk nilai dinamis seperti yang dijelaskan nanti dalam artikel ini (langkah 2). Biasanya, aplikasi Django membuat namespace untuk templat mereka dengan menempatkannya di subfolder yang cocok dengan nama aplikasi.
admin.py	File Python tempat Anda memperluas antarmuka administratif aplikasi, yang digunakan untuk melihat dan mengedit data dalam database. Awalnya, file ini hanya berisi pernyataan, `from django.contrib import admin`. Secara default, Django menyertakan antarmuka administratif standar melalui entri dalam file settings.py proyek Django. Untuk mengaktifkan antarmuka, Anda dapat membatalkan komentar entri yang ada dalam file urls.py.
apps.py	File Python yang menentukan kelas konfigurasi untuk aplikasi (lihat di bawah ini, setelah tabel ini).
models.py	Model adalah objek data, yang diidentifikasi oleh fungsi, di mana tampilan berinteraksi dengan database yang mendasar aplikasi. Django menyediakan lapisan koneksi database sehingga aplikasi tidak peduli dengan detail model. File models.py adalah tempat default tempat Anda membuat model. Awalnya, file models.py hanya berisi pernyataan, `from django.db import models`.
tests.py	File Python yang berisi struktur dasar pengujian unit.
views.py	Tampilan mirip dengan halaman web, yang mengambil permintaan HTTP dan mengembalikan respons HTTP. Biasanya, tampilan dirender sebagai HTML dan browser web tahu cara menampilkannya, tetapi tampilan tidak harus terlihat (seperti bentuk perantara). Tampilan didefinisikan oleh fungsi Python yang tanggung jawabnya adalah merender HTML ke browser. File views.py adalah tempat default tempat Anda membuat tampilan. Awalnya, file views.py hanya berisi pernyataan, `from django.shortcuts import render`.

Ketika Anda menggunakan nama "HelloDjangoApp," konten file apps.py muncul sebagai:

from django.apps import AppConfig

class HelloDjangoAppConfig(AppConfig):
    name = 'HelloDjango'

Pertanyaan: Apakah membuat aplikasi Django di Visual Studio berbeda dari membuat aplikasi di baris perintah?

Jawaban: Menjalankan perintah Tambahkan>aplikasi Django atau menggunakan Tambahkan>Item Baru dengan templat aplikasi Django menghasilkan file yang sama dengan perintah Django manage.py startapp <app_name>. Manfaat membuat aplikasi di Visual Studio adalah folder aplikasi dan semua filenya secara otomatis terintegrasi dalam proyek. Anda dapat menggunakan perintah Visual Studio yang sama untuk membuat sejumlah aplikasi di proyek Anda.

Langkah 2-2: Jalankan aplikasi dari proyek Django

Pada titik ini, jika Anda menjalankan proyek lagi di Visual Studio (menggunakan tombol bilah alat atau Debug>Mulai Penelusuran Kesalahan), Anda masih akan melihat halaman default. Tidak ada konten aplikasi yang muncul karena Anda perlu menentukan halaman khusus aplikasi dan menambahkan aplikasi ke proyek Django:

Di folder HelloDjangoApp, ubah file views.py untuk menentukan tampilan bernama "indeks":

from django.shortcuts import render
from django.http import HttpResponse

def index(request):
    return HttpResponse("Hello, Django!")

Di folder BasicProject (dibuat di langkah 1), ubah file urls.py agar sesuai dengan kode berikut (Anda dapat menyimpan komentar instruksi, jika Anda mau):
```
from django.urls import include, re_path
import HelloDjangoApp.views

# 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')
]
```
Setiap pola URL menjelaskan tampilan di mana Django merutekan URL relatif situs tertentu (yaitu, bagian berikut https://www.domain.com/). Entri pertama dalam urlPatterns yang dimulai dengan ekspresi reguler ^$ adalah perutean untuk akar situs, "/". Entri kedua, ^home$ khususnya merutekan "/home". Anda dapat memiliki beberapa perutean ke tampilan yang sama.
Jalankan proyek lagi untuk melihat pesan Halo, Django! seperti yang didefinisikan oleh tampilan. Setelah selesai, hentikan server.

Menerapkan ke kontrol sumber

Setelah berhasil membuat perubahan pada kode dan pengujian, Anda dapat meninjau dan menerapkan 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 "Buat aplikasi Django awal" 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: Untuk apa awalan 'r' sebelum string perutean?

Jawaban: Awalan 'r' pada string di Python berarti "mentah," yang menginstruksikan Python untuk tidak lolos dari karakter apa pun dalam string. Ekspresi reguler menggunakan banyak karakter khusus. Menggunakan awalan 'r' membuat string jauh lebih mudah dibaca daripada karakter escape '\'.

Pertanyaan: Apa arti karakter ^ dan $ dalam entri perutean URL?

Jawaban: Dalam ekspresi reguler yang menentukan pola URL, ^ berarti "awal baris" dan $ berarti "akhir baris," di mana URL relatif terhadap akar situs (bagian yang mengikuti https://www.domain.com/). Ekspresi ^$ reguler secara efektif berarti "kosong" dan cocok dengan URL https://www.domain.com/ lengkap (tidak ada yang ditambahkan ke akar situs). Pola ^home$ sama persis dengan https://www.domain.com/home/. (Django tidak menggunakan pencocokan pola trailing/in.)

Jika Anda tidak menggunakan $ berikutnya dalam ekspresi reguler, seperti ^homehalnya, maka pola URL cocok dengan URL apa pun yang dimulai dengan "home" seperti "home", "homework", "homestead", dan "home192837".

Untuk bereksperimen dengan ekspresi reguler yang berbeda, coba alat online seperti regex101.com di pythex.org.

Langkah 2-3: Merender tampilan menggunakan HTML

Fungsi index yang Anda miliki 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. Memang, alasan utama untuk menentukan tampilan menggunakan fungsi adalah untuk menghasilkan konten secara dinamis.

Karena argumen HttpResponse hanyalah string, Anda dapat membangun HTML apa pun yang Anda suka dalam string. Sebagai contoh sederhana, ganti fungsi index dengan kode berikut (pertahankan pernyataan from yang ada). Fungsi index ini kemudian akan menghasilkan respons HTML menggunakan konten dinamis yang diperbarui setiap kali Anda merefresh halaman.

from datetime import datetime

def index(request):
    now = datetime.now()

    html_content = "<html><head><title>Hello, Django</title></head><body>"
    html_content += "<strong>Hello Django!</strong> on " + now.strftime("%A, %d %B, %Y at %X")
    html_content += "</body></html>"

    return HttpResponse(html_content)

Sekarang, jalankan proyek lagi untuk melihat pesan seperti "Halo Django! pada hari Senin 16 April 2018 pukul 16:28:10". Refresh halaman untuk memperbarui waktu dan mengonfirmasi bahwa konten sedang dibuat dengan setiap permintaan. Setelah selesai, hentikan server.

Tip

Pintasan untuk menghentikan dan memulai ulang proyek adalah dengan menggunakan perintah menuMulai Ulang>Debug (Ctrl+Shift+F5) atau tombol Mulai Ulang pada toolbar penelusuran kesalahan:

Langkah 2-4: Merender tampilan menggunakan templat halaman

Membuat HTML dalam kode berfungsi dengan baik untuk halaman kecil. Namun, karena halaman menjadi lebih canggih, Anda perlu mempertahankan bagian HTML statis halaman Anda (bersama dengan referensi ke file CSS dan JavaScript) sebagai "templat halaman." Anda kemudian dapat menyisipkan konten dinamis yang dihasilkan kode ke templat halaman. Di bagian sebelumnya, hanya tanggal dan waktu dari panggilan now.strftime yang dinamis, yang berarti semua konten lain dapat ditempatkan dalam templat halaman.

Templat halaman Django adalah blok HTML yang berisi beberapa token pengganti yang disebut "variabel." Variabel diurai oleh {{ dan }}, misalnya, {{ content }}. Modul templat Django kemudian mengganti variabel dengan konten dinamis yang Anda berikan dalam kode.

Langkah-langkah berikut menunjukkan penggunaan templat halaman:

Di bawah folder BasicProject, yang berisi proyek Django, buka file settings.py. Tambahkan nama aplikasi, "HelloDjangoApp," ke daftar INSTALLED_APPS. Menambahkan aplikasi ke daftar memberi tahu proyek Django bahwa ada folder nama "HelloDjangoApp" yang berisi aplikasi:
```
INSTALLED_APPS = [
    'HelloDjangoApp',
    # Other entries...
]
```
Dalam file settings.py, pastikan bahwa objek TEMPLATES berisi baris berikut (disertakan secara default). Kode berikut menginstruksikan Django untuk mencari templat di folder templat aplikasi yang diinstal:
```
'APP_DIRS': True,
```
Di folder HelloDjangoApp, buka file templat halaman template/HelloDjangoApp/index.html (atau template/index.html di VS 2017 15.7 dan yang lebih lama), untuk mengamati bahwa file tersebut berisi satu variabel, {{ content }}:
```
<html>
  <head>
    <title></title>
  </head>

  <body>
    {{ content }}
  </body>
</html>
```
Di folder HelloDjangoApp, buka file views.py dan ganti index fungsi dengan kode berikut yang menggunakan fungsi pembantu django.shortcuts.render. Pembantu render menyediakan antarmuka yang disederhanakan untuk bekerja dengan templat halaman. Pastikan Anda menyimpan semua pernyataan yang ada from.
```
from django.shortcuts import render   # Added for this step

def index(request):
    now = datetime.now()

    return render(
        request,
        "HelloDjangoApp/index.html",  # Relative path from the 'templates' folder to the template file
        # "index.html", # Use this code for VS 2017 15.7 and earlier
        {
            'content': "<strong>Hello Django!</strong> on " + now.strftime("%A, %d %B, %Y at %X")
        }
    )
```
Argumen pertama untuk render, adalah objek permintaan, diikuti dengan jalur relatif ke file templat dalam folder templat aplikasi. File templat dinamai untuk tampilan yang didukungnya, jika sesuai. Argumen render ketiga untuk kemudian adalah kamus variabel yang dirujuk oleh templat. Anda dapat menyertakan objek dalam kamus, dalam hal ini variabel dalam templat dapat merujuk ke {{ object.property }}.
Jalankan proyek dan amati output. Anda akan melihat pesan serupa seperti pada langkah 2-2, yang menunjukkan bahwa templat berfungsi.

Amati, bahwa HTML yang Anda gunakan dalam properti content hanya merender sebagai teks biasa karena fungsi render secara otomatis lolos dari HTML. Pelarian 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 menyimpan HTML di templat halaman dan keluar dari kode. Selain itu, mudah untuk membuat lebih banyak variabel jika diperlukan. Misalnya, ubah file index.html dengan templat agar sesuai dengan markup berikut. Markup berikut menambahkan judul halaman dan menyimpan semua pemformatan dalam templat halaman:
```
<html>
  <head>
    <title>{{ title }}</title>
  </head>
  <body>
    <strong>{{ message }}</strong>{{ content }}
  </body>
</html>
```
Kemudian, untuk menyediakan nilai untuk semua variabel dalam templat halaman, tulis fungsi tampilan index seperti yang ditentukan di sini:
```
def index(request):
    now = datetime.now()

    return render(
        request,
        "HelloDjangoApp/index.html",  # Relative path from the 'templates' folder to the template file
        # "index.html", # Use this code for VS 2017 15.7 and earlier
        {
            'title' : "Hello Django",
            'message' : "Hello Django!",
            'content' : " on " + now.strftime("%A, %d %B, %Y at %X")
        }
    )
```
Hentikan server dan mulai ulang proyek. Pastikan halaman dirender dengan benar:
Visual Studio 2017 versi 15.7 dan yang lebih lama: Sebagai langkah terakhir, pindahkan templat Anda ke subfolder bernama sama dengan aplikasi Anda. Subfolder membuat namespace dan menghindari potensi konflik dengan aplikasi lain yang mungkin Anda tambahkan ke proyek. (Templat di VS 2017 15.8+ melakukan ini untuk Anda secara otomatis.) Artinya, buat subfolder dalam templat bernama HelloDjangoApp, pindahkan file index.html ke subfolder index tersebut, dan ubah fungsi tampilan. Fungsi tampilan index akan merujuk ke jalur baru templat, HelloDjangoApp/index.html. Kemudian jalankan proyek, verifikasi bahwa halaman dirender dengan benar, dan hentikan server.
Terapkan perubahan Anda pada kontrol sumber dan perbarui repositori jarak jauh Anda, jika diperlukan, seperti yang dijelaskan di bawah langkah 2-2.

Pertanyaan: Apakah templat halaman harus berada dalam file terpisah?

Jawaban: Biasanya, templat dipertahankan dalam file HTML terpisah. Anda juga dapat menggunakan templat sebaris. Untuk mempertahankan pemisahan yang bersih antara markup dan kode, disarankan menggunakan file terpisah.

Pertanyaan: Templat harus menggunakan ekstensi file .html?

Jawaban: Ekstensi .html untuk file templat halaman sepenuhnya opsional, karena Anda mengidentifikasi jalur relatif yang tepat ke file dalam argumen kedua ke fungsi render. Namun, Visual Studio (dan editor lainnya) menyediakan fitur seperti penyelesaian kode dan warna sintaks dengan file .html, yang melebihi fakta bahwa templat halaman tidak benar-benar HTML.

Bahkan, ketika Anda bekerja dengan proyek Django, Visual Studio secara otomatis mendeteksi file HTML yang memiliki templat Django dan menyediakan fitur pelengkapan otomatis tertentu. Misalnya, ketika Anda mulai mengetik komentar templat halaman Django, {#, Visual Studio secara otomatis memberi Anda karakter penutup#}. Perintah Pilihan Komentar dan Pemilihan Uncomment (pada menu Edit>Tingkat Lanjut dan pada toolbar) juga menggunakan komentar templat alih-alih komentar HTML.

Pertanyaan: Saat saya menjalankan proyek, saya melihat kesalahan bahwa templat tidak dapat ditemukan. Apa yang salah?

Jawaban: Jika Anda melihat kesalahan bahwa templat tidak dapat ditemukan, pastikan Anda telah menambahkan aplikasi ke settings.py proyek Django dalam daftar INSTALLED_APPS. Tanpa entri itu, Django tidak akan tahu apa yang harus dilihat di folder templat aplikasi.

Pertanyaan: Mengapa melakukan namespace templat penting?

Jawaban: Ketika Django mencari templat yang dimaksud dalam fungsi render, Django menggunakan file pertama yang cocok dengan jalur relatif. Jika Anda memiliki beberapa aplikasi Django dalam proyek yang sama dengan struktur folder yang sama untuk templat, kemungkinan satu aplikasi secara tidak sengaja akan menggunakan templat dari aplikasi lain. Untuk menghindari kesalahan tersebut, selalu buat subfolder di bawah folder templat aplikasi yang cocok dengan nama aplikasi untuk menghindari duplikasi apa pun.

Langkah berikutnya

Menyajikan file statis, menambahkan halaman, dan menggunakan pewarisan templat

Mempelajari secara lebih mendalam

Menulis aplikasi Django pertama Anda, bagian 1 - tampilan (docs.djangoproject.com)
Untuk kemampuan templat Django lainnya, seperti termasuk dan warisan, lihat Bahasa templat Django (docs.djangoproject.com)
Pelatihan ekspresi reguler di inLearning (LinkedIn)
Kode sumber tutorial tentang GitHub: Microsoft/python-sample-vs-learning-django

Bagikan melalui