Tema 3: Visualización de los datos en los Modelos de Django

02/07/2022

Generic selectors
Exact matches only
Search in title
Search in content
Post Type Selectors

En el tema anterior del curso te explicaba lo que eran los modelos en Django y como crearlos. En este tema te voy a hablar de como visualizar los datos de estos modelos dentro de nuestras aplicaciones web.

Si no has visto ningún otro tema del curso te animo a que lo veas desde el principio. Lo tienes disponible en este link.

En este tema vas a aprender lo siguiente:

  • Hacer consultas a la base de datos para extraer la información
  • Pasar variables desde view.py a los templates html
  • Utilizar los operadores de Python en los templates html mediante Django
Índice
  1. Visualizar modelo en html en Django
  2. Hacer Consultas a la Base de Datos de los Modelos en Django
  3. Pasar Variables a los Templates HTML desde views.py
  4. Visualización de las variables en los HTML y operadores disponibles

Visualizar modelo en html en Django

Para visualizar los datos del modelo en nuestro html, y por tanto en el navegador, lo primero que tienes que saber hacer es acceder a los datos almacenados y después pasarle estos datos al template HTML.

Cuando tienes los datos en el template, debes saber como mostrarlos e iterar sobre la lista de datos, en caso de ser necesario. A continuación te dejo un pequeño esquema de los pasos a seguir para que lo veas más claro.

flujo de datos en django

Hacer Consultas a la Base de Datos de los Modelos en Django

Cada modelo que tenemos especificado en Django es una base de datos a la que podemos hacer consultas usando diferentes métodos específicos de la clase modelo. Los más utilizados son los siguientes:

  • Canciones.objects.all(). Esta función devuelve todos los elementos de la clase Canciones.
  • Canciones.objects.filter(atr=valor). Con la función filter podemos aplicar diferentes filtros a los atributos de nuestro modelo. Por ejemplo, teniendo en mente el ejemplo de canciones que especifiqué en el tema anterior de este curso, si queremos hacer una consulta a la base de datos para que nos devuelva todas las canciones del año 2022, pondríamos el filtro:
Canciones.objects.filter(fechaLanzamiento__year=2022)

En el ejemplo usamos el filtro con el atributo fechaLanzamiento, que está creado como un DateField, de forma que almacena año, mes y día. Como nos interesa saber el año, accedemos a este valor usando doble barra baja y el atributo year.

Pasar Variables a los Templates HTML desde views.py

Una vez tenemos extraída la información que queremos visualizar en la página web de nuestra base de datos, tenemos que pasarle esas variables a los templates html.

Para esto, primero tenemos que crear una vista que herede de alguna de las vistas de Django. Hay muchas opciones y te las explicaré en futuros temas del curso, pero de momento podemos usar TemplateView como ejemplo, ya que es la más genérica:

from django.views.generic import TemplateView

class CancionesView(TemplateView):
    template_name = "canciones.html"

Template_name es un atributo de la clase TemplateView y es donde debemos especificar el nombre del template que vamos a usar. Este template tiene que existir dentro de nuestra carpeta de Templates previamente configurada.

De esta manera asociamos la vista al template. En la clase CancionesView usaremos una función predeterminada para extraer los datos de la base de datos (tal y como viste en el punto anterior) y automáticamente pasarle esa información al template especificado en la variable template_name.

Para pasar la información al template, debemos usar la función get_context_data de la siguiente manera:

def get_context_data(self, **kwargs):
        context = super().get_context_data(**kwargs)
        data = Canciones.objects.all() / o filter
        context['canciones'] = data
        return context

Es importante que respetes la estructura de la función, así como que la función debe ir incluida dentro de la clase que hemos creado anteriormente. En esta función puedes usar todo el código en Python que quieras para filtrar los datos, puedes crear variables nuevas que añadas a la variable context, y realmente hacer lo que se te ocurra.

Lo importante que tienes que saber de esas breves líneas de código es:

  • Extraer la información de la base de datos usando los filtros que te enseñé antes.
  • Añadir al diccionario context la información que queramos que esté accesible en la plantilla de html. Tienes que operar con la variable context como un diccionario, así que cada valor que le añadas debe ir asociado a un nombre.

Visualización de las variables en los HTML y operadores disponibles

Una vez hemos guardado la información en la variable context, vayamos al fichero canciones.html y comencemos a mostrar datos.

Siguiendo el ejemplo hasta ahora, y sabiendo que tanto objects.all() como objects.filter() devuelven una lista de datos, lo primero que tenemos que saber es iterar estos datos.

Para ellos, vamos a aprovechar la funcionalidad de los operadores de los templates de Django. Si ponemos en el template las etiquetas {% %}, en el interior podremos añadir código en python, aunque con ciertas limitaciones, claro.

En este ejemplo queremos añadir un for que itere los datos que se le ha pasado a la variable context. En primer lugar, para acceder a los datos de las canciones podremos hacerlo desde la variable canciones dentro del html, ya que se especificó así anteriormente: context['canciones'] = data.

Dicho esto, para iterar entre las canciones haríamos:

{% for cancion in canciones %}
        
{% endfor %}

Ahora bien, para acceder a los valores dentro de cada elemento canción, lo haremos como si de un diccionario se tratase y es importante acceder con dobles corchetes si es desde una etiqueta html. Por ejemplo, para visualizar de una manera muy simplificada los datos tendríamos algo tal que así:

{% for cancion in canciones %}
        <p>Título de la canción {{cancion.titulo}} </p>
        <p>Fecha de lanzamiento de la canción {{cancion.fechaLanzamiento}} </p>
        <p>Cantante {{cancion.cantante}} </p>
        <p>Álbum al que pertenece {{cancion.album}} </p>
        <p>Género de la canción {{cancion.genero}} </p>
        <p>Duración de la canción {{cancion.duracion}} </p>
{% endfor %}

Y con esto concluye este tema de programación web en Django.

Como siempre, te animo a que revises los temas anteriores si no los has visto y tienes disponibles todos los temas en la página del curso gratis de Django.

Pionera del caos

Ingeniera Informática con Máster en Bioinformática, casi doctora y freelancer. Todo lo que te cuento en este blog son aprendizajes que yo misma he tenido ya sea durante mis estudios o en otros proyectos!

Otras Entradas Relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *



Para continuar es necesario que confirmes la política de privacidad de la web.

Subir