Poprzednie

Następne

Ćwiczenie — implementowanie django-crispy-forms

Ukończone

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

1. W programie Visual Studio Code otwórz plik requirements.txt.

2. W dolnej części pliku dodaj nowy wiersz , który odczytuje:

   django-crispy-forms
   

3. Otwórz nowe okno terminalu , wybierając pozycję Terminal>Nowy terminal.

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

1. W programie Visual Studio Code otwórz plik project/settings.py.

2. 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',
   

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

1. W programie Visual Studio Code otwórz plik dog_shelters/templates/dog_form.html.

2. 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 %}
   

3. 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ę.

1. Zapisz wszystkie pliki, wybierając pozycję Plik>Zapisz wszystko.

2. W przeglądarce przejdź do adresu http://localhost:8000/dog/register.

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

   

Aplikacja została zaktualizowana tak, aby formularz używał metody Bootstrap.

Kontynuuj