Předchozí

Další

Cvičení – implementace django-crispy-forms

Dokončeno

Po zobrazení vytvořeného formuláře si můžete všimnout, že formátování není stejné jako zbytek stránky. Používáme Bootstrap a formulář momentálně není. Naštěstí existuje knihovna, která může zajistit, aby naše formuláře používaly také Bootstrap.

Knihovna django-crispy-forms

Knihovna django-crispy-forms dále vylepšuje způsob generování formulářů Django. Podíváme se, jak můžeme knihovnu použít k zajištění toho, aby naše formuláře používaly Bootstrap.

Instalace knihovny

Stejně jako u jakékoli knihovny Pythonu instalujeme django-crispy-forms pomocí pipu.

1. V editoru Visual Studio Code otevřete soubor requirements.txt.

2. V dolní části souboru přidejte nový řádek , který čte:

   django-crispy-forms
   

3. Výběrem možnosti Terminálový>nový terminál otevřete nové okno terminálu.

4. Nainstalujte všechny balíčky spuštěním následujícího příkazu:

   pip install -r requirements.txt
   

Registrace aplikace v Django a konfigurace šablony

Cokoli, co Django používá, musí být registrováno jako aplikace nebo middleware. Protože django-crispy-forms je aplikace, vypíšeme ji v INSTALLED_APPS seznamu.

1. V editoru Visual Studio Code otevřete projekt/settings.py.

2. Pod řádek, který přečte # TODO: Register crispy_forms, přidejte následující kód pro registraci django-crispy-forms.

   # TODO: Register crispy_forms
   'crispy_forms',
   

3. Pod řádek, který čte # TODO: Set template_pack, přidejte následující kód pro konfiguraci django-crispy-forms pro použití Bootstrap 4.

   # TODO: Set template_pack
   CRISPY_TEMPLATE_PACK = 'bootstrap4'
   

Aktualizujte naši šablonu tak, aby používala django-crispy-forms.

Většina úžasné práce, kterou django-křupavé-formuláře dělá, je pomocí filtru. Filtr umožňuje vzít proměnnou v šabloně a předat ji do jiné obslužné rutiny nebo procesu. V našem případě crispy filtr převede náš formulář na zadanou šablonu Bootstrap 4.

1. V editoru Visual Studio Code otevřete dog_shelters/templates/dog_form.html.

2. Pod řádek, který čte {# TODO: Load crispy_forms_tags #}, přidejte následující kód pro načtení filtru nebo značky.

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

3. Nahraďte řádek přečtený {{ form.as_p }} následujícím kódem, který použije crispy filtr.

   {{ form | crispy }}
   

Testování webu

S nainstalovaným a aktualizovaným obsahem otestujeme náš web.

1. Uložte všechny soubory výběrem možnosti Uložit>vše.

2. V prohlížeči přejděte na http://localhost:8000/dog/register.

   Uvidíte, že stránka teď pro formulář používá Bootstrap.

   

Aktualizovali jste aplikaci tak, aby formulář používal Bootstrap.

Pokračovat