Ejercicio: Creación de plantillas
Vamos a crear dos plantillas para mostrar una lista de los refugios y una página de detalles para cada refugio. También crearemos una plantilla base para garantizar la coherencia en toda la aplicación.
Creación de la plantilla base
Una plantilla base es común para todos los proyectos de Django. Para empezar, crearemos una.
En Visual Studio Code, cree una nueva carpeta dentro de dog_shelters denominada templates.
Cree un nuevo archivo dentro de templates con el nombre base.html.
Agregue el código HTML siguiente a base.html.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>{% block title %}Dog shelter site{% endblock %}</title> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> </head> <body> <article class="container"> <section class="jumbotron"> <h3>Dog shelter application</h3> </section> {% block content %} {% endblock %} </article> </body> </html>Nota:
Estamos usando Bootstrap versión 4.6 para nuestro sitio. Sin embargo, en esta ocasión no necesitamos conocimientos de Bootstrap. Estamos usando solo una clase, jumbotron. De lo contrario, utilizamos HTML básico.
Observe las dos instrucciones {% block %}, una para el título y la siguiente para el contenido que proporcionarán las páginas secundarias. Estamos proporcionando un valor predeterminado para title, lo que garantiza que siempre habrá un título si una página secundaria no lo establece.
Creación de la plantilla de lista de refugios
Ahora crearemos otra plantilla para enumerar todos los refugios. Repasaremos la lista de refugios y crearemos vínculos a los detalles de cada uno de ellos.
En dog_shelters/templates, cree un nuevo archivo denominado shelter_list.html.
Agregue el código siguiente para crear la plantilla para nuestra lista de refugios:
{% extends 'base.html' %} {% block title %} Shelter list {% endblock %} {% block content %} <h2>Shelter list</h2> <div>Here is the list of registered shelters</div> {% for shelter in shelters %} <div> <a href="{% url 'shelter_detail' shelter.id %}"> {{shelter.name}} </a> </div> {% endfor %} </div> {% endblock %}
Usamos las etiquetas block para indicar dónde queremos que se coloque la información. Especificamos un valor title de Shelter list y los elementos content serán la lista de todos los refugios.
También usamos una nueva etiqueta, url. La etiqueta url genera dinámicamente una dirección URL. Nuestras direcciones URL se registran en nuestro URLconf, por lo que pueden cambiar. Mediante la etiqueta url, podemos indicar a Django que recupere la dirección URL adecuada de URLconf en lugar de codificarla de forma rígida en una ruta de acceso.
La etiqueta url busca el nombre de la ruta de acceso, shelter_detail en nuestro caso, y, después, la lista de los parámetros esperados. shelter_detail tiene un parámetro, pk. Esta es la clave principal, o identificador, del refugio. Especificamos el identificador mediante shelter.id.
Creación de la plantilla de detalles del refugio
Una vez creada la plantilla de lista, ahora podemos crear la plantilla de detalles.
En dog_shelters/templates, cree un nuevo archivo denominado shelter_detail.html.
Agregue el siguiente código para crear la plantilla:
{% extends 'base.html' %} {% block title %} Shelter list {% endblock %} {% block content %} <h2>{{ shelter.name }}</h2> <div>Located in {{ shelter.location }}</div> {% if shelter.dog_set.all %} <div>Here is the list of available dogs</div> {% for dog in shelter.dog_set.all %} <div> <a href=""> {{dog.name}} </a> </div> {% endfor %} </div> {% else %} <div>This shelter has no dogs available for adoption</div> {% endif %} {% endblock %}
Observe que, en el cuerpo, comprobamos si hay perros en el refugio mediante if shelter.dog_set.all. Si hay perros, mostramos la lista con for para recorrer todos los perros. De lo contrario, mostramos un mensaje que indica que no hay perros disponibles. Actualizaremos el vínculo en una unidad posterior.
Nota:
Es posible que haya observado que estamos realizando dos llamadas a shelter.dog_set.all. Si tiene experiencia con las bases de datos y los ORM, es posible que le preocupe que estemos realizando dos llamadas a la base de datos. Normalmente, dos llamadas provocarían una disminución del rendimiento. Django tiene almacenamiento en caché integrado, lo que garantiza que solo se realice una llamada a la base de datos.
Prueba del sitio
Una vez que hemos creado las plantillas, podemos ver nuestro sitio web en acción.
Guarde todos los archivos.
Abra el explorador y vaya a http://localhost:8000.
Ahora debe aparecer la lista de refugios.
Seleccione Contoso.
Ahora se muestra la lista de los perros del refugio Contoso.
