Exercício – Implementar django-crispy-forms

7 minutos

Depois de ver o formulário criado, você poderá observar que a formatação não é a mesma do restante da página. Estamos usando o Bootstrap, e o formulário atualmente não é. Felizmente, há uma biblioteca que pode garantir que os formulários também usem o Bootstrap.

A biblioteca django-crispy-forms

A biblioteca django-crispy-forms aprimora ainda mais a forma como os formulários são gerados pelo Django. Vamos explorar como podemos usar a biblioteca para garantir que os formulários usem o Bootstrap.

Instalar a biblioteca

Assim como acontece com qualquer biblioteca do Python, instalamos a django-crispy-forms usando o pip.

No Visual Studio Code, abra requirements.txt.
Ao final do arquivo, adicione uma nova linha que indique:
```
django-crispy-forms
```
Abra uma nova janela do terminal selecionando Terminal>Novo Terminal.
Instale todos os pacotes executando o seguinte comando:
```
pip install -r requirements.txt
```

Registrar o aplicativo no Django e configurar o modelo

Qualquer coisa que o Django usa precisa ser registrado como um aplicativo ou um middleware. Como django-crispy-forms é um aplicativo, vamos mostrá-lo na lista INSTALLED_APPS.

No Visual Studio Code, abra project/settings.py.
Abaixo da linha que indica # TODO: Register crispy_forms, adicione o código a seguir para registrar django-crispy-forms.
```
# TODO: Register crispy_forms
'crispy_forms',
```
Abaixo da linha que indica # TODO: Set template_pack, adicione o código a seguir para configurar a django-crispy-forms para usar o Bootstrap 4.
```
# TODO: Set template_pack
CRISPY_TEMPLATE_PACK = 'bootstrap4'
```

Atualizar o modelo para usar django-crispy-forms

A grande parte do trabalho incrível que django-crispy-forms faz é usando um filtro. Um filtro permite que você use uma variável em um modelo e transmita-a para outro manipulador ou processo. Em nosso caso, o filtro crispy converterá o formulário no modelo especificado, o Bootstrap 4.

No Visual Studio Code, abra dog_shelters/templates/dog_form.html.
Abaixo da linha que indica {# TODO: Load crispy_forms_tags #}, adicione o código a seguir para carregar o filtro ou a marca.
```
{# TODO: Load crispy_forms_tags #}
{% load crispy_forms_tags %}
```
Substitua a linha que indica {{ form.as_p }} pelo código a seguir para usar o filtro crispy.
```
{{ form | crispy }}
```

Testar o site

Com tudo instalado e atualizado, vamos testar o site.

Salve todos os arquivos selecionando Arquivo>Salvar Tudo.
No navegador, acesse http://localhost:8000/dog/register.

Você verá que a página agora está usando o Bootstrap para o formulário.