Bagikan melalui

Tutorial: Menggunakan templat Django Web Project lengkap di Visual Studio

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

Langkah-langkah sebelumnya dalam seri tutorial ini membuat solusi Visual Studio dan proyek Django untuk dua aplikasi. BasicProject adalah aplikasi minimal berdasarkan templat Proyek Web Django Kosong dan HelloDjangoApp menggunakan templat Aplikasi Django 1.9 untuk menyajikan file statis dengan tampilan halaman dari templat HTML.

Di Langkah 4, Anda menambahkan aplikasi Django ketiga ke solusi berdasarkan templat Django Web Project lengkap. Templat ini membantu Anda membuat aplikasi Django yang lebih lengkap dengan tiga halaman yang mewarisi dari templat halaman dasar. Aplikasi ini menggunakan pustaka JavaScript statis seperti jQuery dan Bootstrap. Kemampuan autentikasi templat dijelaskan dalam Langkah terakhir dalam seri tutorial.

Di Langkah 4 tutorial, Anda mempelajari cara:

  • Membuat aplikasi web Django yang lebih lengkap dengan menggunakan templat Proyek Web Django
  • Tinjau struktur proyek Django yang disediakan oleh templat
  • Menjelajahi tampilan dan templat halaman yang dibuat oleh templat proyek
  • Memeriksa perutean URL yang disediakan oleh templat

Prasyarat

Membuat proyek dari templat

Ikuti langkah-langkah ini untuk membuat aplikasi web Django dari templat Django Web Project lengkap:

  1. Di Visual Studio, buka Penjelajah Solusi, klik kanan solusi LearningDjango, dan pilih Tambahkan>Proyek Baru.

    Nota

    Langkah 1 dari seri tutorial membuat solusi LearningDjango Visual Studio untuk berisi semua proyek Django yang dijelaskan dalam seri ini. Dengan menjaga semua proyek Django Anda dalam solusi yang sama, Anda dapat dengan mudah beralih bolak-balik antara file yang berbeda untuk perbandingan.

    Jika Anda lebih suka menggunakan solusi Visual Studio terpisah untuk proyek Django dalam langkah tutorial ini, pilih File>Proyek>Baru sebagai gantinya.

  2. Dalam dialog Tambah proyek baru, cari "Django," pilih templat Django Web Project, dan pilih Berikutnya.

  3. Konfigurasikan proyek baru Anda:

    1. Atur Nama proyek ke DjangoWeb.

    2. Tentukan Lokasi untuk Visual Studio guna menyimpan proyek. (Defaultnya adalah lokasi saat ini untuk solusi dan proyek Django yang ada.)

  4. Pilih Buat.

Membuat lingkungan virtual

Setelah Visual Studio memulai pembuatan proyek, Anda akan melihat perintah pesan file spesifikasi paket Python "requirements.txt" terdeteksi dalam proyek "DjangoWeb".:

Cuplikan layar yang menampilkan permintaan pesan tentang deteksi file persyaratan untuk proyek web Django di Visual Studio.

Pesan menunjukkan bahwa templat yang dipilih menyertakan file requirements.txt yang dapat Anda gunakan untuk membuat lingkungan virtual untuk proyek.

Penting

Jika Anda tidak melihat permintaan pesan, Anda mungkin mengalami kesalahan saat mencoba membuat pengguna super Django di bagian berikutnya.

Konfirmasikan Visual Studio mengenali file requirements.txt untuk proyek. Di penjelajah Solusi, perluas folder proyek DjangoWeb, dan buka file requirements.txt. Visual Studio harus menampilkan perintah pesan seperti yang diharapkan.

Ikuti langkah-langkah berikut untuk menyiapkan lingkungan virtual:

  1. Pada prompt pesan, pilih tautan untuk memasang atau membuat lingkungan virtual .

  2. Dalam dialog Tambahkan Lingkungan Virtual, pilih Buat untuk menerima default.

Membuat pengguna super Django

Setelah Visual Studio membuat proyek DjangoWeb, proyek readme.html file terbuka. File ini mencakup instruksi untuk membuat pengguna super Django (yaitu administrator) untuk proyek.

Ikuti langkah-langkah berikut untuk membuat pengguna super Django:

  1. Di Solution Explorer, klik kanan proyek DjangoWeb, pilih Python, lalu pilih Django Create Superuser:

    Cuplikan layar yang menunjukkan cara memilih perintah Django create super user untuk proyek di Visual Studio.

  2. Pada perintah, masukkan detail akun untuk proyek, termasuk nama pengguna, kata sandi, dan alamat email.

    Anda tidak perlu menggunakan kredensial keamanan untuk akun yang sudah ada. Anda dapat membuat nama pengguna dan kata sandi baru untuk digunakan secara khusus dengan aplikasi web Django.

  3. Rekam kredensial untuk digunakan nanti. Anda memerlukan kredensial untuk menjalankan fitur autentikasi aplikasi web.

Menjalankan proyek web Django

Sekarang Anda siap untuk menjalankan aplikasi web Django dan melihat fitur yang disediakan oleh templat:

  1. Di Penjelajah Solusi, klik kanan proyek DjangoWeb, dan pilih Atur sebagai Proyek Startup.

    Perintah ini menetapkan proyek yang dipilih sebagai proyek startup default untuk solusi Visual Studio. Saat Anda memulai Debugger, Visual Studio menjalankan kode untuk proyek startup. Di Penjelajah Solusi, nama proyek startup untuk solusi ditampilkan dalam huruf tebal:

  2. Pilih Debug>Mulai Debugging (F5) atau gunakan tombol Server Web pada toolbar untuk menjalankan server:

    Cuplikan layar yang memperlihatkan perintah Server Web pada toolbar utama di Visual Studio.

Menjelajahi halaman aplikasi web

Aplikasi yang dibuat oleh templat memiliki tiga halaman: "Beranda," "Tentang," dan "Kontak." Ada tautan untuk setiap halaman pada bilah navigasi.

Cuplikan layar yang memperlihatkan aplikasi Django Web Project yang sedang berjalan di browser.

  1. Coba beralih antar halaman dengan menggunakan opsi pada bilah navigasi.

  2. Periksa berbagai bagian aplikasi yang sedang berjalan, termasuk konten halaman. Perhatikan bagaimana rute alamat URL berubah berdasarkan halaman saat ini.

  3. Autentikasi dengan aplikasi dengan memilih opsi Masuk pada bilah navigasi. Masukkan info masuk pengguna super yang Anda berikan di bagian sebelumnya.

  4. Aplikasi yang dibuat oleh templat Django Web Project menggunakan Bootstrap untuk tata letak responsif yang mengakomodasi perangkat seluler. Untuk melihat responsivitas ini, ubah ukuran browser ke tampilan sempit sehingga konten dirender secara vertikal, dan bilah navigasi berubah menjadi ikon menu:

    Cuplikan layar yang memperlihatkan tampilan seluler (sempit) aplikasi Django Web Project di browser tempat bilah navigasi dikonversi ke menu dropdown.

Anda dapat membiarkan aplikasi berjalan untuk latihan di bagian berikutnya.

Jika Anda ingin menyimpan pekerjaan Anda, hentikan aplikasi dan ikuti instruksi di Langkah-langkah sebelumnya dalam seri tutorial ini:

Memeriksa struktur proyek aplikasi web

Templat Django Web Project membuat proyek aplikasi web di Visual Studio dengan struktur berikut:

  • File di akar proyek Visual Studio pada DjangoWeb:

    • manage.py: Utilitas administratif Django.
    • db.sqlite3: Database bawaan SQLite.
    • requirements.txt: Mengidentifikasi paket dalam proyek yang memiliki dependensi pada Django 1.x.
    • readme.html: Berisi informasi tentang aplikasi web, termasuk persyaratan dan prosedur penggunaan penting. Visual Studio menampilkan file ini setelah pembuatan proyek. Seperti yang dijelaskan sebelumnya, file ini memiliki instruksi untuk membuat akun pengguna super (administrator) untuk aplikasi.

  • Folder DjangoWeb/app:

    Folder ini berisi semua file aplikasi, termasuk tampilan , model , pengujian, formulir . Folder ini juga memiliki subfolder dengan file, termasuk templat , migrasi, dan statis . Anda biasanya mengganti nama folder aplikasi untuk menggunakan nama yang lebih khas seperti nama aplikasi itu sendiri.

  • Folder DjangoWeb/DjangoWeb:

    Folder ini adalah folder proyek Django. Ini 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.

Berbagi lingkungan virtual antara proyek Visual Studio

Anda dapat berbagi lingkungan virtual antara proyek Visual Studio. Namun, perlu diingat bahwa proyek yang berbeda kemungkinan menggunakan paket yang berbeda dari waktu ke waktu. Lingkungan virtual bersama harus berisi semua paket untuk semua proyek yang menggunakannya.

Untuk menggunakan lingkungan virtual yang ada, ikuti langkah-langkah berikut:

  1. Ketika diminta untuk menginstal dependensi di Visual Studio, pilih saya akan menginstalnya sendiri opsi.

  2. Di Solution Explorer, klik kanan node Python Environments dan pilih Tambahkan Lingkungan Virtual yang Ada.

  3. Navigasi ke dan pilih folder yang berisi lingkungan virtual, lalu pilih OK.

Memeriksa tampilan dan templat halaman

Kode untuk tampilan halaman yang dibuat oleh Django Web Project terletak di file proyek app/views.py. Setiap fungsi tampilan memanggil fungsi pembantu django.shortcuts.render dengan jalur ke templat dan objek kamus sederhana. Fungsi about membuat tampilan untuk halaman "Tentang" di aplikasi web:

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,
      }
   )

Template halaman HTML untuk tampilan terletak di folder proyek app/templates/app (yang biasanya Anda beri nama ulang). Templat dasar, layout.html, adalah yang paling luas. File mengacu pada semua file statis yang diperlukan (JavaScript dan CSS) untuk tampilan aplikasi.

Templat ini juga menentukan dua bagian block: content dan scripts. Halaman aplikasi web lainnya mengambil alih bagian {% block content %} dalam file layout.html. Anda dapat melihat dua bagian block dalam elemen <body> dalam versi anotasi file layout.html ini:

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8" />

   <!-- Define 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>
   <!-- Navigation bar section omitted in this excerpt -->

   <div class="container body-content">

<!-- Content block - App pages override this block -->
{% block content %}
{% endblock %}

      <!-- App header and footer content -->
      <hr/>
      <footer>
         <p>&copy; {{ year }} - My Django Application</p>
      </footer>

   </div>

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

<!-- Scripts block - List page-specific scripts in this block -->
{% block scripts %}
{% endblock %}

</body>

</html>

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

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

<!-- Content block overrides "content" block in layout template -->
{% 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 memberikan lebih banyak instruksi di blok content.

Folder aplikasi/templat/aplikasi berisi dua templat halaman HTML lagi. File login.html menentukan konten halaman untuk halaman aplikasi Masuk. File loginpartial.html dibawa ke file layout.html dengan pernyataan {% include %}. Langkah terakhir (mengautentikasi pengguna) dalam seri tutorial ini menjelaskan dua file templat ini secara lebih rinci.

Inden tag {% blok %} dan {% endblock %} dalam templat

Sampel HTML memperlihatkan markup yang disediakan dalam templat halaman di Visual Studio. Perhatikan bahwa tag block tidak diindentasi dalam markup. Untuk menampilkan dengan jelas lokasi tag block, templat halaman Visual Studio tidak mengindentasi tag ini.

Namun, templat halaman Django berfungsi dengan baik jika Anda mengindentasi tag block. Beberapa pengembang lebih suka menyelaraskan tag dalam elemen HTML induk yang sesuai.

Memeriksa pola rute URL

File URL proyek Django (DjangoWeb/DjangoWeb/urls.py) yang dibuat oleh templat Django Web Project berisi kode berikut:

"""
Definition of urls for DjangoWeb
"""

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 fungsi tampilan home, contact, dan about yang ditentukan dalam file proyek aplikasi/views.py. Pola login/ dan logout/ sesuai dengan fitur autentikasi aplikasi.

Pola rute URL khusus seperti ^login/$ dan ^logout$ mengakses tampilan Django bawaan alih-alih tampilan yang ditentukan aplikasi. Panggilan ke metode url juga menyertakan data tambahan untuk menyesuaikan tampilan. Langkah terakhir (mengautentikasi pengguna) dalam seri tutorial ini menjelaskan cara bekerja dengan panggilan URL.

Menjelajahi perbedaan dalam pola URL

Dalam Langkah 3 (pewarisan templat HTML) seri tutorial ini, jalur untuk halaman "Tentang" menggunakan pola '^about$'. Pola ini berbeda dari rute URL yang disajikan dalam langkah tutorial ini. Bergantung pada versi templat Anda, kode sampel mungkin menampilkan pola URL halaman "Tentang" sebagai about/ atau ^about alih-alih ^about$.

Hilangnya tanda dolar akhir $ dalam ekspresi reguler adalah kesalahan dalam banyak versi templat proyek. Pola URL bekerja dengan sangat baik untuk halaman bernama "about" atau "About." Namun, tanpa karakter $ berikutnya, pola URL juga sesuai dengan pola URL seperti "about=django," "about09876," "about-face," dan sebagainya. Karakter $ berikutnya membuat pola URL yang memastikan kecocokan hanya untuk istilah "tentang."

Langkah berikutnya

Langkah 5: Mengautentikasi pengguna di Django