Anterior

Siguientes

Ejercicio: Implementación de vistas genéricas para editar datos

Completado

Para permitir que los usuarios registren nuevos perros en un refugio, usaremos CreateView.

Actualización del modelo para admitir get_absolute_url

Comencemos por actualizar el modelo para que sea compatible con get_absolute_url.

1. En Visual Studio Code, abra dog_shelters/models.py.

2. Agregue el código siguiente debajo de la línea que lee # TODO: Import reverse para importar la función reverse.

   # TODO: Import reverse
   from django.urls import reverse
   

3. Agregue el código siguiente a la clase Dog inmediatamente en la línea que lee # TODO: Add get_absolute_url para leer la ruta dog_detail de URLconf y pasar el identificador como parámetro.

       # TODO: Add get_absolute_url
       def get_absolute_url(self):
           return reverse('dog_detail', kwargs={"pk": self.pk})
   

Importante

Recuerde que Python administra los contenedores con tabulaciones en lugar de llaves ({ }). Debido a este hecho, get_absolute_url debe estar en el mismo nivel de tabulación que el comentario #TODO. Puede hacer referencia a los archivos del directorio solution para ver el proyecto completado.

Creación de DogCreateView

Vamos a crear DogCreateView para permitir que alguien pueda registrar un perro.

1. En Visual Studio Code, abra dog_shelters/views.py.

2. Al final de views.py, agregue el código siguiente para crear DogCreateView.

   class DogCreateView(generic.CreateView):
       model = models.Dog
       template_name = 'dog_form.html'
       fields = ['shelter', 'name', 'description']
   

Establecemos el modelo para que sea Dog, nuestra plantilla para que sea adog_form.html y la lista de campos que queremos que se puedan editar.

Nota:

El orden en que se enumeran los campos será el orden en que se mostrarán en el formulario.

Registro de la ruta

Una vez creada la vista, registraremos la ruta en nuestro elemento URLconf.

1. En Visual Studio Code, abra dog_shelters/urls.py.

2. Debajo de la línea que lee # TODO: Register create view, agregue el código siguiente para registrar la ruta.

   # TODO: Register create view
   path('dog/register', views.DogCreateView.as_view(), name='dog_register'),
   

Creación de la plantilla HTML

Vamos a crear la plantilla para hospedar nuestro formulario.

1. En Visual Studio Code, cree un archivo dentro de dog_shelters/templates denominado dog_form.html.

2. Agregue el código siguiente a dog_form.html para crear la plantilla que hospedará el formulario.

   {% extends 'base.html' %}
   
   {# TODO: Register crispy_forms_tags #}
   
   {% block title %}
   Register dog at shelter
   {% endblock %}
   
   {% block content %}
   <h2>Register dog at shelter</h2>
   <form method="POST">
       {% csrf_token %}
   
       {{ form.as_p }}
   
       <button type="submit" class="btn btn-primary">Save</button>
   </form>
   {% endblock %}
   

Nota:

Vamos a agregar una nota para nosotros mismos a fin de agregar una biblioteca, que haremos en el ejercicio siguiente.

Creación de un vínculo a la página de registro

Vamos a crear un vínculo en nuestra página de lista de refugios, que actualmente es la página principal de nuestra aplicación, a la página de registro que hemos creado.

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

2. Debajo de la línea que lee {# TODO: Add link to registration page #}, agregue el código siguiente para crear el vínculo.

   {# TODO: Add link to registration page #}
   <div>
       <a href="{% url 'dog_register' %}">Register a dog available for adoption</a>
   </div>
   

Prueba de la página

Veamos la página en acción.

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

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

3. Seleccione Register a dog available for adoption (Registrar un perro disponible para su adopción).

   Ahora debería ver el formulario.

   

   Observe cómo nuestra relación de clave externa se convierte en una lista desplegable.

4. Elija un refugio y agregue un nombre y una descripción para un perro.

5. Seleccione Guardar.

   Ahora se le redirigirá a la página de detalles del perro.

Ya ha creado un formulario de creación mediante CreateView en Django.

Continuar