Programación Back-End

Unidad 1: Tecnologías del lado del Servidor

Contextos de templates

Redactado por Criz
Publicado el 2 de junio de 2024 a las 13:08
Última actualización el 2 de junio de 2024 a las 13:08

Acciones rapidas
Editar
Siguiente
Previo

Contextos y su recepción

El contexto tiene un precio.
Podemos pasar variables estructurados en un diccionario Python a nuestra template, de forma que podemos usarla dentro del HTML para mostrar y modificar el comportamiento del sitio. Son muy útiles y fáciles de aplicar.

En este capítulo usaremos estos tags para darle vida a nuestro sitio de películas.

Los tópicos de este capítulo son:

Whats the big idea?

Una sección de nuestro sitio de películas mostrará una galería de películas, esto lo lograremos definiendo un diccionario Python el cual contendrá nuestras películas.
Luego, para mostrarlas en el sitio, pasaremos este diccionario a la función render, de esta forma podremos acceder a este diccionario desde la template, y luego podremos hacer un ciclo for para listar las películas.
Primero definimos un diccionario: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
PELICULAS = [
    {
        "nombre": "Interstellar",
        "director": "Christopher Nolan",
        "año": 2014,
        "generos": ["Ciencia ficción", "Aventura"],
        "calificacion": 8.7,
        "poster": "https://m.media-amazon.com/images/I/71GTnYW5ejL._AC_SX679_.jpg"
    },
    {
        "nombre": "Django Unchained",
        "director": "Quentin Tarantino",
        "año": 2012,
        "generos": ["Wéstern", "Acción"],
        "calificacion": 8.5,
        "poster": "https://m.media-amazon.com/images/I/912vL7muRwL._AC_SY879_.jpg"
    },
    {
        "nombre": "Whiplash",
        "director": "Damien Chazelle",
        "año": 2014,
        "generos": ["Drama", "Cine independiente"],
        "calificacion": 8.5,
        "poster": "https://es.web.img3.acsta.net/r_1280_720/pictures/14/09/26/17/53/345974.jpg"
    }
]

Si lo sé, no es un diccionario...

Ahora, debemos pasar esta lista a nuestro render.
En nuestro views.py dentro de peliculas/: 

1
2
3
4
5
def index(request):
    PELICULAS = [
        ...
    ]
    return render(request, "peliculas/index.html", {"peliculas":PELICULAS})

Ahora, si, note que se pasa un diccionario Python a render, aquí se contendrán las variables mediante llave-valor. Para que dentro de la template podemos acceder a estas según su llave.

Recibiendo el contexto

Ahora, dentro de la template templates/peliculas/index.html estaríamos recibiendo un diccionario que contiene una llave peliculas la cual contiene una lista de películas.
Nos dirigimos a templates/peliculas/index.html para comenzar a recibir este contexto, esto lo haremos dentro del bloque content que hemos definido en la template base.html: 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
...
<!-- primero verificamos que en nuetro contexto exista la llave 'peliculas' -->
{% if peliculas %}
<!-- si NO existe, peliculas es None, lo que por logica es False ... -->
<!-- si existe, contiene valores, continuamos... -->
<div class="row">
    <!-- usamos un ciclo For de Python de toda la vida -->
    {% for pelicula in peliculas %}
    <!-- por cada pelicula dentro de peliculas -->
    <div class="col">
        <div class="card" style="width: 18rem;">
            <!-- mostramos las variables mediante el uso de dobe llaves, que es para evaluar una variable -->
            <img src="{{ pelicula.poster }}" class="card-img-top" alt="Poster">
            <div class="card-body">
                <h5 class="card-title">{{ pelicula.nombre }}</h5>
                <p class="card-text">
                    <strong>Director</strong> {{ pelicula.director }}
                    <br>
                    <strong>Año</strong> {{ pelicula.año }}
                    <br>
                    <strong>Calificacion</strong> {{ pelicula.calificacion }}
                    <br>
                </p>
                <!-- tambien podemos poner un For dentro de un For para los generos -->
                {% for genero in pelicula.generos %}
                <a href="#" class="btn btn-primary">{{ genero }}</a>
                {% endfor %}
            </div>
        </div>
    </div>
    <!-- siempre tenemos que terminar los tags -->
    {% endfor %}
</div>
{% endif %}
...

Es importante notar que no se evalúan las llaves de peliculas como una lista dentro de una template, ejemplo: 

1
2
<!-- INCORRECTO -->
<p>{{ pelicula["nombre"] }}</p>

Si no que se evalúan como notación JSON de MongoDB: 

1
2
<!-- CORRECTO -->
<p>{{ pelicula.nombre }}</p>

Así que si, cada vez que intentas usar {{ peliculas["nombre"] }} en una template, un perrito muere.

TEST TIME

Tu sitio web D E B E R I A verse algo asi:

Si no es así, entonces aquí tienes el Proyecto completo. Para que lo revises...

Has terminado la Unidad 1 de Back-End!

Aquí termina nuestro viaje de la primera Unidad.
Lo que vimos fue:

Con estos ya entendidos, podemos adentrarnos en la horrible implementación con bases de datos.


Siguiente
Previo