Latihan - Menerapkan tampilan generik untuk mengedit data

Selesai

Untuk memungkinkan pengguna mendaftarkan anjing baru di tempat penampungan, kita akan menggunakan CreateView.

Memperbarui model untuk mendukung get_absolute_url

Mari kita mulai dengan memperbarui model untuk mendukung get_absolute_url.

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

  2. Tambahkan kode berikut di bawah baris yang berbunyi # TODO: Import reverse untuk mengimpor fungsi reverse.

    # TODO: Import reverse
    from django.urls import reverse
    
  3. Tambahkan kode berikut ke kelas Dog segera, baris yang membaca # TODO: Add get_absolute_url untuk membaca jalur dog_detail dari URLconf dan meneruskan ID sebagai parameter.

        # TODO: Add get_absolute_url
        def get_absolute_url(self):
            return reverse('dog_detail', kwargs={"pk": self.pk})
    

Penting

Ingat bahwa Python mengelola penutup dengan tab daripada kurung kurawal ({ }). Karena fakta ini, get_absolute_url perlu berada di tingkat tab yang sama dengan komentar #TODO. Anda dapat merujuk ke file di direktori solusi untuk melihat proyek yang telah selesai.

Membuat DogCreateView

Mari kita buat DogCreateView untuk memungkinkan seseorang mendaftarkan anjing.

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

  2. Di akhir views.py, tambahkan kode berikut untuk membuat DogCreateView.

    class DogCreateView(generic.CreateView):
        model = models.Dog
        template_name = 'dog_form.html'
        fields = ['shelter', 'name', 'description']
    

Kita mengatur model menjadi Dog, templat kita menjadi dog_form.html, dan daftar bidang yang ingin kita edit.

Catatan

Urutan Anda mencantumkan bidang akan menjadi urutan yang akan ditampilkan dalam formulir.

Mendaftarkan rute

Dengan tampilan yang dibuat, mari daftarkan rute dalam URLconf kita.

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

  2. Di bawah baris yang berbunyi # TODO: Register create view, tambahkan kode berikut untuk mendaftarkan rute.

    # TODO: Register create view
    path('dog/register', views.DogCreateView.as_view(), name='dog_register'),
    

Membuat templat HTML

Mari kita buat templat untuk menghosting formulir kita.

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

  2. Tambahkan kode berikut ke dog_form.html untuk membuat templat guna menghosting formulir kita.

    {% extends 'base.html' %}
    
    {# TODO: Register crispy_forms_tags #}
    
    {% block title %}
    Register dog at shelter
    {% endblock %}
    
    {% block content %}
    <h2>Register dog at shelter</h2>
    <form method="POST">
        {% csrf_token %}
    
        {{ form.as_p }}
    
        <button type="submit" class="btn btn-primary">Save</button>
    </form>
    {% endblock %}
    

Catatan

Kita menambahkan catatan untuk diri kita sendiri guna menambahkan pustaka, yang akan kita lakukan di latihan berikutnya.

Mari kita buat tautan di halaman daftar penampungan, yang saat ini merupakan beranda untuk aplikasi kita, ke halaman pendaftaran yang kita buat.

  1. Di dalam Visual Studio Code, buka dog_shelters/templat/shelter_list.html.

  2. Di bawah baris yang berbunyi {# TODO: Add link to registration page #}, tambahkan kode berikut untuk membuat link.

    {# TODO: Add link to registration page #}
    <div>
        <a href="{% url 'dog_register' %}">Register a dog available for adoption</a>
    </div>
    

Menguji halaman

Mari kita lihat halaman kita bekerja.

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

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

  3. Pilih Daftarkan anjing yang tersedia untuk diadopsi.

    Anda seharusnya melihat formulirnya sekarang.

    Screenshot of the register dog page, with the drop-down list for Shelter highlighted.

    Perhatikan bagaimana hubungan kunci asing kita menjadi daftar drop-down.

  4. Pilih tempat penampungan dan tambahkan nama serta deskripsi untuk anjing.

  5. Pilih Simpan.

    Anda sekarang dialihkan ke halaman detail terkait anjing Anda!

Anda sekarang telah membuat formulir pembuatan menggunakan CreateView di Django.