Langkah 4: Menggunakan templat Project Web Django lengkap

Artikel
05/08/2023

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

Sekarang setelah Anda menjelajahi dasar-dasar Django di Visual Studio, Anda dapat dengan mudah memahami aplikasi lengkap yang diperkenalkan oleh templat "Django Web Project".

Dalam langkah ini, Anda sekarang:

Membuat aplikasi web Django yang lebih lengkap menggunakan templat "Django Web Project" dan memeriksa struktur proyek (langkah 4-1)
Memahami tampilan dan templat halaman yang dibuat oleh templat proyek, yang terdiri dari tiga halaman yang mewarisi dari templat halaman dasar dan yang menggunakan pustaka JavaScript statis seperti jQuery dan Bootstrap (langkah 4-2)
Memahami perutean URL yang disediakan oleh templat (langkah 4-3)

Templat ini juga menyediakan autentikasi dasar, yang tercakup dalam Langkah 5.

Langkah 4-1: Membuat proyek dari templat

Di Visual Studio, buka Penjelajah Solusi, klik kanan solusi LearningDjango yang dibuat sebelumnya dalam tutorial ini. Lalu, pilih Tambahkan>Project Baru. (Jika Anda ingin menggunakan solusi baru, pilih File>Baru>Proyek sebagai gantinya.)
Dalam dialog Project baru, cari dan pilih templat Project Web Django. Panggil proyek "DjangoWeb", lalu pilih Buat.
Karena templat menyertakan file requirements.txt, Visual Studio meminta lokasi untuk menginstal dependensi. Saat diminta, pilih opsi, Instal ke lingkungan virtual, dan dalam dialog Tambahkan Lingkungan Virtual pilih Buat untuk menerima default.
Ketika Visual Studio selesai menyiapkan lingkungan virtual, ikuti instruksi yang ditampilkan dalam file readme.html untuk membuat pengguna super Django (yaitu, administrator). Klik kanan proyek Visual Studio dan pilih perintah Python>Django Create Superuser, lalu ikuti perintah. Pastikan Anda merekam nama pengguna dan kata sandi saat anda menggunakannya saat menjalankan fitur autentikasi aplikasi.
Atur proyek DjangoWeb sebagai default untuk solusi Visual Studio dengan mengklik kanan proyek di Penjelajah Solusi dan memilih Atur sebagai Startup Project. Proyek startup, yang ditampilkan dalam huruf tebal, adalah apa yang berjalan ketika Anda memulai debugger.
Pilih Debug>Mulai Penelusuran Kesalahan (F5) atau gunakan tombol Server Web pada bar alat untuk menjalankan server.
Aplikasi yang dibuat oleh templat memiliki tiga halaman, Beranda, Tentang, dan Kontak. Anda dapat menavigasi antar halaman menggunakan bilah navigasi. Luangkan satu atau dua menit untuk memeriksa berbagai bagian aplikasi. Untuk mengautentikasi dengan aplikasi melalui perintah Masuk, gunakan info masuk superuser yang dibuat sebelumnya.
Aplikasi yang dibuat oleh templat "Django Web Project" menggunakan Bootstrap untuk tata letak responsif yang mengakomodasi faktor bentuk seluler. Untuk melihat responsivitas ini, ubah ukuran browser ke tampilan sempit sehingga konten dirender secara vertikal dan bilah navigasi berubah menjadi ikon menu.
Anda dapat membiarkan aplikasi berjalan untuk bagian berikut.

Jika Anda ingin menghentikan aplikasi dan menerapkan perubahan pada kontrol sumber, buka halaman Perubahan di Team Explorer, klik kanan folder untuk lingkungan virtual (mungkin env), dan pilih Abaikan item lokal ini.

Memeriksa apa yang dibuat templat

Pada tingkat terluas, templat "Django Web Project" membuat struktur berikut:

File di akar proyek:
- manage.py: Utilitas administratif Django.
- db.sqlite3: Database SQLite default.
- requirements.txt: Berisi dependensi pada Django 1.x.
- readme.html: File yang ditampilkan di Visual Studio setelah membuat proyek. Seperti yang disebutkan di bagian sebelumnya, ikuti instruksi di sini untuk membuat akun pengguna super (administrator) untuk aplikasi.
Folder app berisi semua file aplikasi, termasuk tampilan, model, pengujian, formulir, templat, dan file statis (lihat langkah 4-2). Anda biasanya mengganti nama folder ini untuk menggunakan nama aplikasi yang lebih khas.
Folder DjangoWeb (proyek Django) berisi file proyek Django yang khas: __init__.py, settings.py, urls.py, dan wsgi.py. File settings.py sudah dikonfigurasi untuk aplikasi dan file database dengan menggunakan templat proyek. File urls.py juga sudah disiapkan dengan rute ke semua halaman aplikasi, termasuk formulir masuk.

Jawaban: Ya. Akan tetapi, ketahuilah bahwa proyek yang berbeda kemungkinan menggunakan paket yang berbeda dari waktu ke waktu. Oleh karena itu, lingkungan virtual bersama harus berisi semua paket untuk semua proyek yang menggunakannya.

Meskipun demikian, untuk menggunakan lingkungan virtual yang ada, ikuti langkah-langkah di bawah ini:

Ketika diminta untuk menginstal dependensi di Visual Studio, pilih opsi Saya akan menginstalnya sendiri.
Di Penjelajah Solusi, klik kanan simpul Lingkungan Python dan pilih Tambahkan Lingkungan Virtual yang Ada.
Buka dan pilih folder yang berisi lingkungan virtual, lalu pilih OK.

Langkah 4-2: Memahami tampilan dan templat halaman yang dibuat oleh templat proyek

Saat Anda mengamati saat menjalankan proyek, aplikasi berisi tiga tampilan: Beranda, Tentang, dan Kontak. Kode untuk tampilan ini ditemukan dalam file views.py . Setiap fungsi tampilan memanggil django.shortcuts.render dengan jalur ke templat dan objek kamus sederhana. Misalnya, halaman Tentang ditangani oleh fungsi about:

def about(request):
    """Renders the about page."""
    assert isinstance(request, HttpRequest)
    return render(
        request,
        'app/about.html',
        {
            'title':'About',
            'message':'Your application description page.',
            'year':datetime.now().year,
        }
    )

Templat terletak di folder app/views aplikasi (dan Anda biasanya ingin mengganti nama app menjadi nama aplikasi Anda yang sebenarnya). Templat dasar, layout.html, adalah yang paling luas. File layout.html mengacu pada semua file statis yang diperlukan (JavaScript dan CSS). File layout.html juga mendefinisikan blok bernama "konten" yang diambil alih halaman lain dan menyediakan blok lain bernama "skrip". Kutipan anotasi berikut dari file layout.html menunjukkan area spesifik ini:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />

    <!-- Define a viewport for Bootstrap's responsive rendering -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }} - My Django Application</title>

    {% load staticfiles %}
    <link rel="stylesheet" type="text/css" href="{% static 'app/content/bootstrap.min.css' %}" />
    <link rel="stylesheet" type="text/css" href="{% static 'app/content/site.css' %}" />
    <script src="{% static 'app/scripts/modernizr-2.6.2.js' %}"></script>
</head>
<body>
    <!-- Navbar omitted -->

    <div class="container body-content">

<!-- "content" block that pages are expected to override -->
{% block content %}{% endblock %}
        <hr/>
        <footer>
            <p>&copy; {{ year }} - My Django Application</p>
        </footer>
    </div>

<!-- Additional scripts; use the "scripts" block to add page-specific scripts.  -->
    <script src="{% static 'app/scripts/jquery-1.10.2.js' %}"></script>
    <script src="{% static 'app/scripts/bootstrap.js' %}"></script>
    <script src="{% static 'app/scripts/respond.js' %}"></script>
{% block scripts %}{% endblock %}

</body>
</html>

Templat halaman individual, about.html, contact.html, dan index.html, masing-masing memperluas templat dasar layout.html. File templat about.html adalah yang paling sederhana dan menunjukkan tag {% extends %} dan {% block content %}:

{% extends "app/layout.html" %}

{% block content %}

<h2>{{ title }}.</h2>
<h3>{{ message }}</h3>

<p>Use this area to provide additional information.</p>

{% endblock %}

File templat index.html dan contact.html menggunakan struktur yang sama dan menyediakan konten yang lebih panjang di blok "konten".

Di folder templates/app juga merupakan halaman keempat login.html, bersama dengan loginpartial.html yang dibawa ke dalam layout.html menggunakan {% include %}. File templat ini dibahas di langkah 5 tentang autentikasi.

Pertanyaan: Bisakah {% blok %} dan {% endblock %} diindentasi di templat halaman Django?

Jawaban: Bisa. Templat halaman Django berfungsi dengan baik jika Anda mengindentasi tag blok, mungkin untuk menyelaraskannya dalam elemen induk yang sesuai. Untuk melihat dengan jelas di mana tag blok ditempatkan, templat halaman Visual Studio tidak mengindentasi tag blok.

Langkah 4-3: Memahami perutean URL yang dibuat oleh templat

File urls.py proyek Django seperti yang dibuat oleh templat "Django Web Project" berisi kode berikut:

from datetime import datetime
from django.urls import path
from django.contrib import admin
from django.contrib.auth.views import LoginView, LogoutView
from app import forms, views

urlpatterns = [
    path('', views.home, name='home'),
    path('contact/', views.contact, name='contact'),
    path('about/', views.about, name='about'),
    path('login/',
         LoginView.as_view
         (
             template_name='app/login.html',
             authentication_form=forms.BootstrapAuthenticationForm,
             extra_context=
             {
                 'title': 'Log in',
                 'year' : datetime.now().year,
             }
         ),
         name='login'),
    path('logout/', LogoutView.as_view(next_page='/'), name='logout'),
    path('admin/', admin.site.urls),
]

Tiga pola URL pertama dipetakan langsung ke tampilan home, contact, dan about dalam file views.py aplikasi. Selain itu, pola ^login/$ dan ^logout$, menggunakan tampilan Django bawaan alih-alih tampilan yang ditentukan aplikasi. Panggilan ke metode url juga menyertakan data tambahan untuk menyesuaikan tampilan. Langkah 5 menjelajahi panggilan ini.

Pertanyaan: Di proyek yang saya buat, mengapa pola URL "about" menggunakan '^about', bukan '^about$' seperti yang ditunjukkan di sini?

Jawaban: Kurangnya '$' di akhir ekspresi reguler adalah pengawasan sederhana di banyak versi templat proyek. Pola URL bekerja dengan baik untuk halaman bernama "about". Namun, tanpa pola URL '$' di akhir juga cocok dengan URL seperti "about=django," "about09876," "aboutoflaughter," dan sebagainya. '$' di akhir ditampilkan di sini untuk membuat pola URL yang hanya cocok dengan "about".

Langkah berikutnya

Mengautentikasi pengguna di Django

Mempelajari secara lebih mendalam

Menulis aplikasi Django pertama Anda, bagian 4 - formulir dan tampilan generik (docs.djangoproject.com)
Kode sumber tutorial tentang GitHub: Microsoft/python-sample-vs-learning-django

Bagikan melalui

Langkah 4: Menggunakan templat Project Web Django lengkap

Langkah 4-1: Membuat proyek dari templat

Memeriksa apa yang dibuat templat

Langkah 4-2: Memahami tampilan dan templat halaman yang dibuat oleh templat proyek

Pertanyaan: Bisakah {% blok %} dan {% endblock %} diindentasi di templat halaman Django?

Langkah 4-3: Memahami perutean URL yang dibuat oleh templat

Pertanyaan: Di proyek yang saya buat, mengapa pola URL "about" menggunakan '^about', bukan '^about$' seperti yang ditunjukkan di sini?

Langkah berikutnya

Mempelajari secara lebih mendalam

Saran dan Komentar

Sumber Daya Tambahan:

Bagikan melalui

Langkah 4: Menggunakan templat Project Web Django lengkap

Langkah 4-1: Membuat proyek dari templat

Memeriksa apa yang dibuat templat

Pertanyaan: Apakah mungkin untuk berbagi lingkungan virtual antara proyek Visual Studio?

Langkah 4-2: Memahami tampilan dan templat halaman yang dibuat oleh templat proyek

Pertanyaan: Bisakah {% blok %} dan {% endblock %} diindentasi di templat halaman Django?

Langkah 4-3: Memahami perutean URL yang dibuat oleh templat

Pertanyaan: Di proyek yang saya buat, mengapa pola URL "about" menggunakan '^about', bukan '^about$' seperti yang ditunjukkan di sini?

Langkah berikutnya

Mempelajari secara lebih mendalam

Saran dan Komentar

Sumber Daya Tambahan: