Saltar a contenido

Uso de Contextos en Plantillas de Django

1. Introducción

En Django, el contexto es un diccionario de datos que pasamos desde la vista a la plantilla para rellenar dinámicamente los valores dentro del HTML. Esto permite que nuestras plantillas sean dinámicas, ya que los datos mostrados pueden cambiar dependiendo de la solicitud del usuario, como el nombre de usuario, valores de una base de datos o cualquier otro dato relevante.

Contexto en Plantillas

El contexto es el medio por el cual Django pasa información desde la vista (backend) hasta la plantilla (frontend), permitiendo personalizar el contenido que se muestra al usuario.

2. Paso a paso para crear una plantilla dinámica

2.1 Crear una nueva ruta dinamico/

Vamos a crear una ruta que acepte un parámetro en la URL, como el nombre de usuario, y lo pase a una plantilla.

  1. Definir la nueva ruta en urls.py:
# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('dinamico/<str:nombre>/', views.dinamico, name='dinamico'),
]

Esta ruta capturará un parámetro nombre de tipo string de la URL, como http://127.0.0.1:8000/dinamico/juan/.

2.2 Crear una nueva plantilla básica

Vamos a crear la plantilla dinamico.html que inicialmente solo mostrará un mensaje de "Hola Mundo". Más tarde, modificaremos la plantilla para mostrar datos dinámicos.

  1. Crear el archivo dinamico.html en la carpeta templates:

De momento vamos a crear un template estético, luego, cuando definamos el contexto ya lo modificaremos.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!-- templates/dinamico.html -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Hola Mundo</title>
</head>
<body>
    <h1>Hola Mundo</h1>
</body>
</html>

2.3 Definir la vista y pasar un contexto

En la vista, vamos a cargar la plantilla dinamico.html y pasar un contexto que contenga el nombre del usuario.

  1. Crear la vista en views.py:

No sería necesario, pero queda más claro si definimos una variable para el contexto.

# views.py
from django.shortcuts import render

def dinamico(request, nombre):
    contexto = {'nombre': nombre}  # Creamos un contexto con el nombre
    return render(request, 'dinamico.html', contexto)  # Pasamos el contexto a la plantilla
  • En este ejemplo, estamos creando un diccionario contexto con el parámetro nombre que capturamos de la URL, y lo pasamos a la plantilla con el método render().

2.4 Modificar la plantilla para usar el contexto

Ahora que hemos pasado el contexto con el nombre del usuario, vamos a modificar la plantilla para mostrar el nombre dinámicamente.

  1. Modificar dinamico.html para usar la variable nombre del contexto:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
<!-- templates/dinamico.html -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Bienvenido</title>
</head>
<body>
    <h1>Hola {{ nombre }}!</h1>  <!-- Usamos {{ nombre }} para mostrar el valor pasado en el contexto -->
</body>
</html>
  • {{ nombre }} es donde Django insertará el valor de la variable nombre que hemos pasado desde la vista.

3. Poner en marcha el servidor y probar

  1. Levantar el servidor si aún no está activo:
python manage.py runserver
  1. Accede a http://127.0.0.1:8000/dinamico/juan/ en tu navegador, y deberías ver el mensaje "Hola Juan!".

Prueba con diferentes nombres en la URL, como http://127.0.0.1:8000/dinamico/maria/.

4. Modificar el ejemplo para que admita un array

Ahora vamos a modificar la vista para que también pase una lista de categorías, y lo mostrará en el template.

4.1 Modificar views.py para incluir categorías

Vamos a crear una lista de categorías y agregarla al contexto:

# views.py
from django.shortcuts import render

def dinamico(request, nombre):
    categorias = ['Programador', 'Diseñador', 'Ventas']
    contexto = {'nombre': nombre, 'categorias': categorias}
    return render(request, 'dinamico.html', contexto)
  • categorias es una lista con varios elementos que pasaremos al contexto.

4.2 Mostrar el array en la plantilla

En el archivo dinamico.html, inicialmente intentaremos mostrar el array completo como texto.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!-- templates/dinamico.html -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Bienvenido</title>
</head>
<body>
    <h1>Hola {{ nombre }}!</h1>
    <p>{{ categorias }}</p>  <!-- Mostramos el array completo -->
</body>
</html>
  • En este caso, veremos cómo se muestra la lista completa en el navegador, como una representación de un array en formato de texto.

5. Bucles y condiciones en las plantillas

Ahora vamos a recorrer la lista de categorías y mostrar cada una en una lista. También vamos a destacar si la categoría es "Programador".

5.1 Crear un bucle en la plantilla para recorrer las categorías

Primero vamos a mostrar las categorias en una lista:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
<!-- templates/dinamico.html -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Bienvenido</title>
</head>
<body>
    <h1>Hola {{ nombre }}!</h1>

    <h2>Categorías:</h2>
    <ul>
        {% for categoria in categorias %}
            <li>{{ categoria }}</li>
        {% endfor %}
    </ul>
</body>
</html>

Ahora que hemos aprendido a manejar la estructura for para poder manejas las listas, vamos a ver el uso de condicionales. En este caso queremos que muestre destacado (negrita) la categoria progamador.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- templates/dinamico.html -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Bienvenido</title>
</head>
<body>
    <h1>Hola {{ nombre }}!</h1>

    <h2>Categorías:</h2>
    <ul>
        {% for categoria in categorias %}
            <li>
                {% if categoria == "Programador" %}
                    <b>{{ categoria }}</b>  <!-- Destacamos la categoría Programador -->
                {% else %}
                    {{ categoria }}
                {% endif %}
            </li>
        {% endfor %}
    </ul>
</body>
</html>
  • {% for categoria in categorias %}: Este es el bucle que recorre cada elemento de la lista categorias.
  • {% if categoria == "Programador" %}: Esta condición verifica si la categoría es "Programador" y la pone en negrita (<b>).

6. Mostrar el resultado y comprobar el funcionamiento

  1. Levanta el servidor si no está en marcha:
python manage.py runserver
  1. Accede a la URL http://127.0.0.1:8000/dinamico/juan/, y deberías ver algo similar a:
Hola Juan!
Categorías:
- Programador
- Diseñador
- Ventas

Donde "Programador" aparecerá en negrita.

Perfecto, modificaremos el ejercicio para que pase al contexto un número N (el número máximo de frutas a mostrar) y un nombre de fruta que debe ser destacado si coincide con uno de los elementos de la lista. Aquí tienes el ejercicio actualizado:

7. Comentarios

Ahora veremos como podemos hacer comentarios en las plantillas, que no usan los comentarios <!-- --> por ser un lenguaje de marcado. Estos comentarios serán visibles en el código fuente HTML generado, pero no se mostrarán en el navegador. En su lugar, utilizamos el siguiente formato:

{% comment %}
Este es un comentario 
de varias líneas en la plantilla
{% endcomment %}

Si quiero hacer un comentario más corto puedo:

{# Este es un comentario corto #}

8. Filtros

Los filtros en Django son una forma de modificar el contenido que se muestra en las plantillas. Se aplican utilizando el símbolo | (pipe) y pueden ser encadenados.

Claro, aquí tienes el punto 8.1 Ejemplos de filtros modificado, siguiendo la estructura que pides: primero la explicación de la sintaxis general de los filtros y luego una tabla con los filtros, su descripción y ejemplos.

Sintaxis general de los filtros

En Django, los filtros permiten modificar el valor de una variable en las plantillas antes de mostrarlo. Los filtros se aplican con la sintaxis {{ variable|filtro }}, donde variable es el valor que queremos modificar y filtro es el tipo de modificación que queremos aplicar.

Sintaxis de Filtros

La sintaxis básica de un filtro es:

{{ variable|filtro }}
````

Además, los filtros pueden aceptar **argumentos**, los cuales se pasan después de un **colon (:)**. Por ejemplo:

```html
{{ nombre|default:"Desconocido" }}

Filtros comunes en Django

Aquí tienes una tabla con algunos de los filtros más utilizados en Django, junto con su descripción y ejemplos.

Filtro Descripción Ejemplo
length Devuelve la longitud de una lista o cadena. {{ frutas|length }}
slice Permite obtener una porción de una lista o cadena. {{ frutas|slice:":3" }}
default Muestra un valor por defecto si la variable está vacía o no definida. {{ fruta_destacada|default:"Ninguna" }}
upper Convierte una cadena a mayúsculas. {{ nombre|upper }}
lower Convierte una cadena a minúsculas. {{ nombre|lower }}
date Formatea una fecha en un formato específico. {{ fecha|date:"d M Y" }}
join Une los elementos de una lista en una cadena, utilizando un separador. {{ frutas|join:", " }}
default_if_none Muestra un valor por defecto si la variable es None. {{ descripcion|default_if_none:"No disponible" }}
escape Escapa caracteres especiales en una cadena para que se muestren como texto. {{ texto_html|escape }}
urlencode Codifica una cadena en formato URL. {{ url|urlencode }}
first Devuelve el primer elemento de una lista. {{ frutas|first }}

Ejemplos prácticos

  1. Filtro length: Devuelve la longitud de una lista o cadena.
<p>La lista de frutas tiene {{ frutas|length }} elementos.</p>
  • Si frutas es ['Manzana', 'Plátano', 'Cereza'], el resultado será: La lista de frutas tiene 3 elementos.
  1. Filtro slice: Permite obtener una porción de una lista o cadena.
<p>Las primeras 3 frutas son: {{ frutas|slice:":3" }}</p>
  • Si frutas es ['Manzana', 'Plátano', 'Cereza', 'Pera', 'Mango'], el resultado será: Las primeras 3 frutas son: Manzana, Plátano, Cereza
  1. Filtro default: Muestra un valor por defecto si la variable está vacía o no definida.
<p>Fruta destacada: {{ fruta_destacada|default:"Ninguna" }}</p>
  • Si fruta_destacada es None o no está definida, el resultado será: Fruta destacada: Ninguna
  1. Filtro upper: Convierte una cadena a mayúsculas.
<p>Nombre en mayúsculas: {{ nombre|upper }}</p>
  • Si nombre es juan, el resultado será: Nombre en mayúsculas: JUAN

Otros filtros útiles

  • lower: Convierte a minúsculas.
  • date: Formatea fechas.
  • join: Une los elementos de una lista en una cadena.

9. Ejercicios prácticos

Ejercicio para el alumno

  1. Objetivo: Crear una ruta y vista llamada frutas que reciba como parámetros un número N (el número máximo de frutas a mostrar) y un nombre de fruta. La vista debe pasar al contexto una lista de frutas y la plantilla debe mostrar solo las primeras N frutas. Además, si el nombre de la fruta en la lista coincide con el nombre pasado como parámetro, se debe destacar esa fruta.

  2. Parámetros en la URL:

  3. N: El número máximo de frutas a mostrar.
  4. fruta_destacada: El nombre de la fruta que debe ser destacada en la lista.
Ejemplo de solución 

1
2
3
4
5
6
7
# urls.py
from django.urls import path
from . import views

urlpatterns = [
    path('frutas/<int:N>/<str:fruta_destacada>/', views.frutas, name='frutas'),
]

1
2
3
4
5
6
7
# views.py
def frutas(request, N, fruta_destacada):
    lista_frutas = ['Manzana', 'Plátano', 'Cereza', 'Pera', 'Mango', 'Uva', 'Kiwi']
    # Limitar la lista a las primeras N frutas
    frutas_a_mostrar = lista_frutas[:N]
    contexto = {'frutas': frutas_a_mostrar, 'fruta_destacada': fruta_destacada}
    return render(request, 'frutas.html', contexto)

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!-- templates/frutas.html -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Frutas favoritas</title>
</head>
<body>
    <h1>Frutas favoritas</h1>
    <ul>
        {% for fruta in frutas %}
            <li>
                {% if fruta == fruta_destacada %}
                    <strong>{{ fruta }}</strong>  <!-- Destacamos la fruta -->
                {% else %}
                    {{ fruta }}
                {% endif %}
            </li>
        {% endfor %}
    </ul>
</body>
</html>

Objetivo: Crear una plantilla que muestre el nombre del usuario en mayúsculas y la cantidad de frutas que posee en una lista.

Ejercio 2

Utiliza los filtros para mostrar el nombre de usuario en mayúscula y la cantidad de frutas al final de la lista.

Solución 
# views.py
def mostrar_usuario(request, nombre):
    frutas = ['Manzana', 'Plátano', 'Cereza']
    contexto = {'nombre': nombre, 'frutas': frutas}
    return render(request, 'usuario.html', contexto)

<!-- templates/usuario.html -->
<h1>Hola {{ nombre|upper }}</h1>
<p>Tienes {{ frutas|length }} frutas en tu lista.</p>

10. Resumen

En este ejercicio, hemos aprendido a trabajar con parámetros en las rutas para pasar datos dinámicos a las plantillas. Hemos visto cómo limitar la lista de frutas usando el parámetro N y cómo destacar una fruta en la lista usando el parámetro fruta_destacada. Esto muestra cómo hacer plantillas más interactivas con Django, utilizando tanto parámetros de la URL como lógica en la plantilla.