Ćwiczenie — implementowanie django-crispy-forms

7 min

Po wyświetleniu utworzonego formularza możesz zauważyć, że formatowanie nie jest takie samo jak w pozostałej części naszej strony. Używamy metody Bootstrap, a formularz obecnie nie jest. Na szczęście istnieje biblioteka, która może zapewnić, że nasze formularze również używają metody Bootstrap.

Biblioteka django-crispy-forms

Biblioteka django-crispy-forms dodatkowo zwiększa sposób generowania formularzy przez Django. Dowiesz się, jak możemy użyć biblioteki, aby upewnić się, że nasze formularze używają metody Bootstrap.

Instalowanie biblioteki

Podobnie jak w przypadku dowolnej biblioteki języka Python, instalujemy zestaw django-crispy-forms przy użyciu narzędzia .

W programie Visual Studio Code otwórz requirements.txt.
W dolnej części pliku dodaj nowy wiersz , który odczytuje:
```
django-crispy-forms
```
Otwórz nowe okno terminalu , wybierając pozycję Terminal>Nowy terminal.
Zainstaluj wszystkie pakiety, uruchamiając następujące polecenie:
```
pip install -r requirements.txt
```

Rejestrowanie aplikacji w usłudze Django i konfigurowanie szablonu

Wszystkie zastosowania platformy Django muszą być zarejestrowane jako aplikacja lub oprogramowanie pośredniczące. Ponieważ django-crispy-forms jest aplikacją, wyświetlimy ją na INSTALLED_APPS liście.

W programie Visual Studio Code otwórz projekt/settings.py.
Poniżej wiersza, który odczytuje # TODO: Register crispy_forms, dodaj następujący kod, aby zarejestrować django-crispy-forms.
```
# TODO: Register crispy_forms
'crispy_forms',
```
Poniżej wiersza, który odczytuje # TODO: Set template_pack, dodaj następujący kod, aby skonfigurować django-crispy-forms do używania bootstrap 4.
```
# TODO: Set template_pack
CRISPY_TEMPLATE_PACK = 'bootstrap4'
```

Zaktualizuj nasz szablon, aby używał django-crispy-forms

Większość niesamowitej pracy, którą robi django-crispy-forms, jest przy użyciu filtru. Filtr umożliwia użycie zmiennej w szablonie i przekazanie jej do innej procedury obsługi lub procesu. W naszym przypadku crispy filtr przekonwertuje formularz na określony szablon Bootstrap 4.

W programie Visual Studio Code otwórz dog_shelters /templates/dog_form.html.
Poniżej wiersza, który odczytuje {# TODO: Load crispy_forms_tags #}, dodaj następujący kod, aby załadować filtr lub tag.
```
{# TODO: Load crispy_forms_tags #}
{% load crispy_forms_tags %}
```
Zastąp wiersz odczytany {{ form.as_p }} następującym kodem, aby użyć filtru crispy .
```
{{ form | crispy }}
```

Testuj witrynę

Po zainstalowaniu i zaktualizowaniu wszystkich elementów przetestujmy naszą witrynę.

Zapisz wszystkie pliki, wybierając pozycję Plik>Zapisz wszystko.
W przeglądarce przejdź do adresu http://localhost:8000/dog/register.

Zobaczysz, że strona używa teraz bootstrap dla formularza.