En el apartado anterior vimos como crear y cargar plantillas desde las vistas. En este apartado vamos a profundizar más y veremos como pasar información a las plantillas, para lo cual utilizaremos un tipo de dato de Python, como son los diccionarios dentro de los contextos.
Seguimos con el mismo ejemplo usado en el capitulo anterior donde una de la vistas se llamaba "saludo" y cargábamos un documento externo, la plantilla, desde un directorio creado al efecto.
Imaginemos que queremos pasarle un nombre de usuario a la plantilla desde la vista para que la muestre en la página web y le de la Bienvenida.
Por ejemplo que Ponga "Bienvenido Pedro" o lo que tu quieras.
Empezamos creando en las vistas, views.py, una variable "nombre" que recoja el nombre que le queramos pasar. Luego dentro del contexto y siempre a través de un diccionario usamos una clave "nombre_usuario" cuyo valor será renderizado posteriormente al mostrar la página web.
views.py: archivos de vistas.
...
# Vistas
def saludo(request):
doc_externo = open("/home/chema/Cursos/DJANGO/Proyecto1/plantillas/plantilla.html")
plantilla = Template(doc_externo.read())
doc_externo.close()
nombre = "Antonio"
# Al contexto hay que pasarle un diccionario que se usara para transferir a el valor
# a la plantilla
contexto = Context({"nombre_usuario": nombre})
documento = plantilla.render(contexto)
return HttpResponse(documento)
...Para finalizar en la plantilla, ponemos donde queramos que se renderice posteriormente esta información usando flechas dobles {{ }}. Tiene su lógica puesto que recuerda que en Python se usan las flechas sencillas para crear los diccionarios {}.
plantilla.html
<!DOCTYPE html>
<html lang="es">
<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>Fecha Servidor</title>
</head>
<body>
<h3>
¡Hola Mundo! He sido cargado desde una plantilla.
</h3>
<p>
Bienvenido {{nombre_usuario}}
</p>
</body>
</html>
Salida:
views.py: archivos de vistas.
...
# Vistas
def saludo(request):
doc_externo = open("/home/chema/Cursos/DJANGO/Proyecto1/plantillas/plantilla.html")
plantilla = Template(doc_externo.read())
doc_externo.close()
nombre = "Antonio"
fecha_actual = datetime.datetime.now()
# Al contexto hay que pasarle un diccionario que se usara para transferir a el valor
# a la plantilla
contexto = Context({"nombre_usuario": nombre, "date": fecha_actual})
documento = plantilla.render(contexto)
return HttpResponse(documento)
...plantilla.html
<!DOCTYPE html>
<html lang="es">
<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>Fecha Servidor</title>
</head>
<body>
<h3>
¡Hola Mundo! He sido cargado desde una plantilla.
</h3>
<p>
Bienvenido {{nombre_usuario}}
</p>
<p>
Hoy es {{date.day}} - {{date.month}} - {{date.year}}
</p>
</body>
</html>
views.py: archivos de vistas.
...
# Vistas
def saludo(request):
doc_externo = open("/home/chema/Cursos/DJANGO/Proyecto1/plantillas/plantilla.html")
plantilla = Template(doc_externo.read())
doc_externo.close()
nombre = "Antonio"
fecha_actual = datetime.datetime.now()
ciudades = ["Barcelona", "Madrid", "León", "Caceres"]
# Al contexto hay que pasarle un diccionario que se usara para transferir a el valor
# a la plantilla
contexto = Context({"nombre_usuario": nombre, "date": fecha_actual, "lugares":ciudades})
documento = plantilla.render(contexto)
return HttpResponse(documento)
...y modificamos la plantilla para que sean mostrados. La lista se muestra tal cual.
plantilla.html
...
<body>
<h3>
¡Hola Mundo! He sido cargado desde una plantilla.
</h3>
<p>
Bienvenido {{nombre_usuario}}
</p>
<p>
Hoy es {{date.day}} - {{date.month}} - {{date.year}}
</p>
<p> En todas estas ciudades:
<br/><br/>
{{lugares}}
</p>
</body>
...Salida:
plantilla.html
...
<body>
<h3>
¡Hola Mundo! He sido cargado desde una plantilla.
</h3>
<p>
Bienvenido {{nombre_usuario}}
</p>
<p>
Hoy es {{date.day}} - {{date.month}} - {{date.year}}
</p>
<p> En todas estas ciudades:
<br/><br/>
{{lugares.3}}
</p>
</body>
...También podríamos haberlo hecho mediante Python en el archivo de vistas y pasarle solo el elemento que nos interese.
Salida:
En los ejemplos anteriores hemos utilizado varias veces la nomenclatura del punto. Vamos a hacer un inciso para ver el orden jerárquico que usa Django cuando se encuentra con un punto. Es decir que hace Django cuando encuentra un punto en un plantilla. En este orden:
- Lo primero que hace es buscar un Diccionario. Es decir a ver si ese punto corresponde con un elemento de un diccionario.
- Si no lo encuentra mira a ver si ese mismo punto corresponde a un Atributo o Propiedad correspondiente a una clase.
- En tercer lugar pasa a mirar si se trata de un Método perteneciente a un objeto o una clase.
- Y por último mira a ver si es un elemento de una Lista (como en el ejemplo previo)
Bucles en plantillas de Django.
¿y si quisiéramos que las ciudades aparezcan una debajo de otra? Pues se puede hacer de varias formas pero para avanzar un poco vamos a usar los bucles en plantillas con Django.
Los bucles en plantillas van, NO entre dos llaves, si no entre una llave simple y utilizando el signo de porcentaje. Hay que poner una etiqueta de apertura del bucle y otra de cierre. Al igual que en Python se usa la palabra reservada "for" de la siguiente forma:
plantilla.html
...
<body>
<h3>
¡Hola Mundo! He sido cargado desde una plantilla.
</h3>
<p>
Bienvenido {{nombre_usuario}}
</p>
<p>
Hoy es {{date.day}} - {{date.month}} - {{date.year}}
</p>
<p> En todas estas ciudades:</p>
<p>
<ul>
{% for ciudad in lugares %} <!-- Llave de apertura -->
<li>{{ciudad}}</li>
{% endfor %} <!-- LLave de cierre -->
</ul>
</p>
</body>
...Salida:
Condicionales.
Al igual que cualquier lenguaje de programación también podemos usar condicionales. Se construye de la misma forma que hemos visto antes para los bucles, con una etiqueta de apertura y otra de cierre y usando una llave y la palabra reservada "if". Por ejemplo vamos a modificar la plantilla para que nos indique si estamos en la primera quincena del mes o en la segunda.
La sintaxis sería la siguiente:
plantilla.html
...
<p>
Bienvenido {{nombre_usuario}}
</p>
<p>
Hoy es {{date.day}} - {{date.month}} - {{date.year}}.
{% if date.day < 15 %}
Estamos en la primera quincena del mes.
{% else %}
Estamos en la segunda quincena del mes.
{% endif %}
</p>
<p> En todas estas ciudades:</p>
<p>
...Es casi igual que en Python salvo porque no se ponen los dos puntos al final de la sentencia a evaluar.
Salida:
Puedes encontrar más información sobre bucles, condicionales y otra multitud de etiquetas que puedes usar en Django ya construidos en la documentación en la sección "Built-in template tags and filters"
Otra diferencia con Python es a la hora de utilizar los métodos. Me explico. Imagina que en Python tenemos un string y queremos ponerlo en mayúsculas. Por ejemplo tengo la palabra "gacela" y quiero ponerla en mayúsculas:
"gacela".upper()
Sin embargo en Django para aplicar en la plantilla un método a este mismo string usaríamos el mismo método pero con una diferencia, prescindiríamos de los paréntesis finales ()
"gacela".upper
En el ejemplo en el que estamos trabajando si queremos poner el nombre del usuario en mayúsculas lo haríamos de la siguiente forma:
...
<p>
Bienvenido {{nombre_usuario.upper}}
</p>
<p>
Hoy es {{date.day}} - {{date.month}} - {{date.year}}.
...Salída:
Comentarios en Plantillas de Django:
Los comentarios de una sola línea tienen esta estructura:
{# Texto del comentario #}Los de varias líneas esta otra:
{% comment %}
texto del comentario
texto del comentario
{% endcommnent %}Filtros en Plantillas. (built-in filters reference)
Son elementos que se usan para filtrar la información o transformarla de alguna manera. Con los filtros puedes hacer muchas cosas en las plantillas y no solo modificar strings o texto, sino también sumar dos números, ordenar listas y muchas más. Lo mejor es ver la documentación pero vamos a ver un ejemplo.
El filtro se usa poniendo después de la variables que se quiere filtrar un "pipeline" que es el símbolo "|" y el filtro a utilizar.
Usaremos filtros para que todos los nombres de las ciudades se pongan en Mayúsculas y también para que nos diga si el día es un numero par o impar.
plantilla.html
<!DOCTYPE html>
<html lang="es">
<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>Fecha Servidor</title>
</head>
<body>
{# COMENTARIO EN UNA PLANTILLA DE DJANGO de una sola línea #}
{% comment %}
COMENTARIO
de varias lineas
{% endcomment %}
<h3>
¡Hola Mundo! He sido cargado desde una plantilla.
</h3>
<p>
Bienvenido {{nombre_usuario}}
</p>
<p>
Hoy es {{date.day}} - {{date.month}} - {{date.year}}.
{% if date.day < 15 %}
Estamos en la primera quincena del mes.
{% else %}
Estamos en la segunda quincena del mes.
{% endif %}
{# Filtro para mostrar si el dia es un número par o impar. #}
{% if date.day|divisibleby:"2" %}
<p>El día de hoy es un número par.</p>
{% else %}
<p>El día de hoy es un número impar.</p>
{% endif %}
</p>
<p> En todas estas ciudades:</p>
<p>
<ul>
{% for ciudad in lugares %} <!-- Llave de apertura -->
<li>{{ciudad|upper}}</li>
{% endfor %} <!-- LLave de cierre -->
</ul>
</p>
</body>
</html>Salida:
No hay comentarios:
Publicar un comentario