Latihan - Mengimplementasikan django-crispy-forms

Selesai

Setelah melihat formulir yang dibuat, Anda mungkin menyadari bahwa pemformatan tidak sama dengan halaman kami yang lainnya. Kami menggunakan Bootstrap, dan formulir saat ini tidak menggunakannya. Untungnya, terdapat pustaka yang dapat memastikan formulir kita menggunakan Bootstrap juga.

Pustaka django-crispy-forms

Pustaka django-crispy-forms semakin meningkatkan cara formulir dihasilkan oleh Django. Kita akan menjelajahi cara kita dapat menggunakan pustaka untuk memastikan formulir kita menggunakan Bootstrap.

Menginstal pustaka

Seperti halnya setiap pustaka Python, kita menginstal django-crispy-forms menggunakan pip.

1. Di dalam Visual Studio Code, buka requirements.txt.

2. Di bagian bawah file, tambahkan baris baru yang berbunyi:

   django-crispy-forms
   

3. Buka jendela terminal baru dengan memilih Terminal>Terminal Baru.

4. Instal semua paket dengan menjalankan perintah berikut:

   pip install -r requirements.txt
   

Mendaftarkan aplikasi di Django dan mengonfigurasikan templat

Apa pun yang digunakan Django harus terdaftar sebagai aplikasi atau middleware. Karena django-crispy-forms adalah aplikasi, kita akan mencantumkannya dalam daftar INSTALLED_APPS.

1. Di dalam Visual Studio Code, buka project/settings.py.

2. Di bawah baris yang berbunyi # TODO: Register crispy_forms, tambahkan kode berikut untuk mendaftarkan django-crispy-forms.

   # TODO: Register crispy_forms
   'crispy_forms',
   

3. Di bawah baris yang berbunyi # TODO: Set template_pack, tambahkan kode berikut untuk mengonfigurasi django-crispy-forms untuk menggunakan Bootstrap 4.

   # TODO: Set template_pack
   CRISPY_TEMPLATE_PACK = 'bootstrap4'
   

Memperbarui templat kami untuk menggunakan django-crispy-forms

Sebagian besar pekerjaan luar biasa yang dilakukan django-crispy-forms dilakukan menggunakan filter. Filter memungkinkan Anda untuk mengambil variabel dalam templat dan meneruskannya ke penangan atau proses lain. Dalam kasus kita, filter crispy akan mengonversi formulir kita menjadi templat yang ditentukan, Bootstrap 4.

1. Di dalam Visual Studio Code, buka dog_shelters/templates/dog_form.html.

2. Di bawah baris yang berbunyi {# TODO: Load crispy_forms_tags #}, tambahkan kode berikut untuk memuat filter atau tag.

   {# TODO: Load crispy_forms_tags #}
   {% load crispy_forms_tags %}
   

3. Ganti baris yang berbunyi {{ form.as_p }} dengan kode berikut untuk menggunakan filter crispy.

   {{ form | crispy }}
   

Menguji situs

Setelah semuanya terinstal dan diperbarui, mari kita uji situs kita.

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

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

   Anda akan melihat halaman tersebut sekarang menggunakan Bootstrap untuk formulir.

   

Anda sekarang telah memperbarui aplikasi Anda sehingga formulir menggunakan Bootstrap.

Lanjutkan