Latihan - Menerapkan tampilan generik untuk menampilkan data

Selesai

Kita ingin membuat halaman detail baru untuk anjing. Kita akan menggunakan tampilan generik DetailView untuk menyederhanakan jumlah kode yang perlu kita buat.

Penting

Latihan ini mengasumsikan bahwa Anda telah menyelesaikan langkah-langkah penyiapan sebelumnya dalam modul ini.

Membuat tampilan DogDetail

Kita mulai dengan membuat kelas tampilan detail.

1. Di dalam Visual Studio Code, buka dog_shelters/views.py.

2. Di bawah baris yang bertuliskan # TODO: Import generic views, tambahkan kode berikut untuk mengimpor modul tampilan generik.

   # TODO: Import generic views
   from django.views import generic
   

3. Tambahkan kode berikut ke bagian bawah views.py untuk membuat tampilan generik untuk DogDetail dan mengatur model, templat, dan objek konteks.

   class DogDetailView(generic.DetailView):
       model = models.Dog
       template_name = 'dog_detail.html'
       context_object_name = 'dog'
   

Mendaftarkan tampilan detail

Dengan tampilan yang dibuat, kita dapat mendaftarkan jalur.

1. Buka dog_shelters/urls.py.

2. Di bawah baris yang bertuliskan # TODO: Register detail view, tambahkan kode berikut untuk mendaftarkan jalur untuk DogDetailView kita.

   # TODO: Register detail view
   path('dog/<int:pk>', views.DogDetailView.as_view(), name='dog_detail'),
   

   Penting

   Harap ingat koma berikutnya di akhir baris.

Membuat templat HTML

Kini Anda akan membuat templat HTML untuk menampilkan detail anjing tersebut. Nama objek akan berupa dog yang kita tetapkan saat membuat formulir.

1. Di dalam Visual Studio Code, buat file baru di dalam dog_shelters/templates bernama dog_detail.html.

2. Tambahkan kode berikut ke dog_detail.html untuk membuat templat guna menampilkan detail anjing tersebut.

   {% extends 'base.html' %}
   
   {% block title %}
   {{ dog.name }}
   {% endblock %}
   
   {% block content %}
   <h2>{{ dog.name }}</h2>
   <div>About {{ dog.name }} - {{ dog.description }}</div>
   {% endblock %}
   

Perbarui halaman detail tempat penampungan untuk menyertakan tautan kita

Dengan jalur kita terdaftar dan templat dibuat, kita dapat memperbarui templat detail tempat penampungan untuk menyertakan tautan ke halaman detail anjing kita.

1. Buka dog_shelters/templates/shelter_detail.html.

2. Di bawah baris yang bertuliskan {# TODO: Add link to dogs #}, tambahkan kode berikut untuk membuat tautan untuk setiap anjing ke tampilan detail.

   {# TODO: Add link to dogs #}
   <a href="{% url 'dog_detail' dog.id %}">
       {{dog.name}}
   </a>
   
   

Menguji halaman Anda

Dengan semua selesai dibuat, mari kita lihat halaman kita beraksi.

1. Simpan semua file dengan memilih File>Simpan Semua.

2. Di browser Anda, buka http://localhost:8000.

3. Dari daftar tempat penampungan, pilih Contoso.

4. Dari daftar anjing, pilih Roscoe.

   Halaman detail muncul.

   

Kita sekarang telah membuat tampilan menggunakan sistem tampilan generik di Django!

Lanjutkan