Ejercicio: Implementación de django-crispy-forms

  • 7 minutos

Después de ver el formulario creado, es posible que observe que el formato no es el mismo que en el resto de la página. Estamos usando Bootstrap, pero el formulario todavía no. Afortunadamente, existe una biblioteca que puede garantizar que nuestros formularios también usan Bootstrap.

La biblioteca django-crispy-forms

La biblioteca django-crispy-forms mejora el modo en que Django genera los formularios. Vamos a explorar cómo podemos usar la biblioteca para asegurarse de que los formularios usan Bootstrap.

Instalación de la biblioteca

Al igual que con cualquier biblioteca de Python, django-crispy-forms se instala con PIP.

  1. En Visual Studio Code, abra requirements.txt.

  2. En la parte inferior del archivo, agregue una nueva línea que lea lo siguiente:

    django-crispy-forms

  3. Seleccione Terminal>Nuevo terminal para abrir una ventana del terminal nueva.

  4. Instale todos los paquetes mediante la ejecución del comando siguiente:

    pip install -r requirements.txt

Registro de la aplicación en Django y configuración de la plantilla

Cualquier cosa que Django use debe estar registrada como aplicación o middleware. Dado que django-crispy-forms es una aplicación, la mostraremos en la lista INSTALLED_APPS.

  1. En Visual Studio Code, abra project/settings.py.

  2. Debajo de la línea que lee # TODO: Register crispy_forms, agregue el código siguiente para registrar django-crispy-forms.

    # TODO: Register crispy_forms
'crispy_forms',

  3. Debajo de la línea que lee # TODO: Set template_pack, agregue el código siguiente para configurar django-crispy-forms a fin de que use Bootstrap 4.

    # TODO: Set template_pack
CRISPY_TEMPLATE_PACK = 'bootstrap4'

Actualización de la plantilla para usar django-crispy-forms

La mayor parte del fabuloso trabajo que realiza django-crispy-forms lo hace con un filtro. Un filtro permite tomar una variable en una plantilla y pasarla a otro controlador o proceso. En nuestro caso, el filtro crispy convertirá el formulario en la plantilla especificada, Bootstrap 4.

  1. En Visual Studio Code, abra dog_shelters/templates/dog_form.html.

  2. Debajo de la línea que lee {# TODO: Load crispy_forms_tags #}, agregue el código siguiente para cargar el filtro o la etiqueta.

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

  3. Reemplace la línea que lee {{ form.as_p }} por el código siguiente para usar el filtro crispy.

    {{ form | crispy }}

Prueba del sitio

Una vez que todo está instalado y actualizado, vamos a probar nuestro sitio.

  1. Guarde todos los archivos; para ello, seleccione Archivo>Guardar todo.

  2. En el explorador, vaya a http://localhost:8000/dog/register.

    Verá que el formulario de la página ahora usa Bootstrap.

    Screenshot of the form that uses Bootstrap.

Ya ha actualizado la aplicación para que el formulario use Bootstrap.