Plantillas en Django¶

1. ¿Qué es una plantilla y para qué sirve?¶

Una plantilla en Django es un archivo que contiene código HTML y que puede incluir variables y lógica de presentación que se sustituyen dinámicamente en el servidor antes de enviarlo al navegador. Las plantillas nos permiten separar la lógica de negocio de la presentación visual de nuestra aplicación.

Motor de plantillas de Django

El motor de plantillas de Django facilita esta separación y permite incluir datos dinámicos, como el nombre del usuario, en las páginas HTML de manera sencilla. Django proporciona una sintaxis simple para trabajar con variables y estructuras de control como bucles y condicionales dentro de las plantillas.

En este punto vamos a centrarnos en ver como cargar una plantilla estática. Un fichero HTML. En el próximo punto ya trataremos las plantillas dinámicas. Damos un paso más en el ciclo de vida de una petición HTTP.

Ejemplo sencillo de una plantilla¶

<!-- simple.html -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Bienvenido</title>
</head>
<body>
    <h1>Bienvenido a {{ sitio_nombre }}</h1>
</body>
</html>

En este ejemplo, {{ sitio_nombre }} es una variable que se llenará con un valor desde el backend (en el servidor) y se enviará al navegador. Todo esto ya lo veremos en este punto y el siguiente.

1. Crear un nuevo proyecto Django¶

Vamos a trabajar con un nuevo proyecto. Podemos eliminar el contenido del proyecto que estábamos utilizando myproject o bien crear uno nuevo.

Primero, vamos a crear un nuevo proyecto Django para trabajar con las plantillas. Vamos a recordar los pasos. Primero será posicionarnos en la carpeta donde queramos crear el proyecto. En este caso ya no explicamos la creación del entorno virtual, se puede consultar en el Módulo 3.

Crear el proyecto:

django-admin startproject myproject
cd myproject

Realizar la migración:
```
python manage.py migrate
```
Levantar el servidor:
```
python manage.py runserver
```
Accede a http://127.0.0.1:8000/ en tu navegador. Deberías ver la página de bienvenida de Django.

2. Crear `views.py` y la vista que devuelve una plantilla¶

Crear el archivo views.py en la carpeta de la app (si no existe ya):
```
mkdir myproject
touch myproject/views.py
```
Añadir una vista simple en views.py

De momento que devuelva un mensaje de texto plano, más adelante cuando aprendamos a crear el templateya volveremos para modificar esta función.
```
# myproject/views.py
from django.http import HttpResponse

def saludo(request):
    return HttpResponse("Falta la plantilla")
```
¿Por qué es importante crear la vista primero?
```
# myproject/views.py
from django.http import HttpResponse

def saludo(request):
    return HttpResponse("Falta la plantilla")
```
¿Por qué es importante crear la vista primero?

La vista es la que procesará la solicitud del usuario y devolverá una respuesta. Inicialmente, nuestra vista solo devolverá un texto plano. La plantilla será un archivo separado que nos permitirá separar el HTML de la lógica del servidor.

Crear la URL para la vista:

Modifica el archivo urls.py para que apunte a la vista que acabamos de crear.

# myproject/urls.py
from django.urls import path
from django.contrib import admin
from . import views  # Importa las vistas desde el archivo views.py

urlpatterns = [
    path('admin/', admin.site.urls),
    path('saludo/', views.saludo, name='saludo'),  # Crea la URL para la vista
    path('simple/', views.simple, name='simple'),  # Nueva URL para la plantilla
]

3. Especificar la ubicación de las plantillas en `settings.py`¶

Definir el directorio de plantillas en el archivo settings.py:

Abre settings.py y busca la variable TEMPLATES. Modifica la opción 'DIRS' para indicar que las plantillas se encontrarán en una carpeta templates/ en la raíz del proyecto.
```
# myproject/settings.py
TEMPLATES = [
    {
        ...
        'DIRS': [BASE_DIR / 'templates'],  # Define la carpeta donde se alojarán las plantillas
        ...
    },
]
```
Ventajas de utilizar plantillas:
- Separa la lógica de presentación de la lógica de negocio.
- Permite reutilizar código HTML en diferentes partes de la aplicación.
- Hace que sea fácil modificar la apariencia de la aplicación sin afectar el código backend.
Crear la carpeta templates/ en la raíz del proyecto:
```
mkdir templates
```
Una vez creada la carpeta templates/, la estructura del proyecto debería verse así:
```
myproject/
│├── manage.py
│├── myproject/
││   ├── __init__.py
││   ├── settings.py
││   ├── urls.py
││   ├── views.py
││   └── wsgi.py
│└── templates/
```
Fijarse que la carpeta templates/ está al mismo nivel que manage.py y la carpeta del proyecto myproject/. Es importante ya que sino Django no encontrará las plantillas.

4. Crear el template `simple.html`¶

Ahora, vamos a crear el archivo simple.html dentro de la carpeta templates/ con un HTML básico que utilizaremos más adelante. Podemos utilizar en VSCode el snippet: ! que nos generará el cuerpo de la página. Luego modificamos la etiqueta <title> y añadimos un título <H1>en el <body>.

<!-- templates/simple.html -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Bienvenido</title>
</head>
<body>
    <h1>Bienvenido a mi sitio web</h1>
</body>
</html>

5. Conectar la vista con la plantilla¶

Ahora que tenemos nuestra plantilla, debemos hacer que la vista que hemos creado en views.py devuelva esta plantilla.

Usar render() en lugar de HttpResponse

Aunque podríamos devolver el contenido de una plantilla de forma manual con HttpResponse, Django incluye la función render() que facilita este proceso y nos permite pasarle variables desde la vista. Debemos usarlo.

Modificar views.py para usar render():

# mi_app/views.py
from django.shortcuts import render

def saludo(request):
    return render(request, 'simple.html', {})

Parámetros:

request es el objeto que contiene toda la información de la solicitud HTTP.

template_name: 'simple.html' es el nombre de la plantilla que Django buscará en el directorio especificado en settings.py.

context: {} es un diccionario que puede contener variables que queremos pasar a la plantilla. En este caso, está vacío porque no estamos pasando ninguna variable.

render() combina la plantilla y los datos, y devuelve una respuesta HTTP con el contenido final.

6. Verificar el servidor¶

Levanta el servidor si aún no está en marcha:
```
python manage.py runserver
```
Visita la URL correspondiente:

Accede a http://127.0.0.1:8000/ y deberías ver la página con el mensaje "Bienvenido a mi sitio web".

7. Ejercicio práctico¶

Ejercicio 1

Crea una nueva url, lenguajes/, que muestre una lista de lenguajes de programación utilizando una plantilla. Recuerda que de momento la plantilla (template) será estática.

Solución

# views.py
from django.shortcuts import render

def lenguajes(request):
    return render(request, 'lenguajes.html', {})

<!-- templates/lenguajes.html -->
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Lenguajes de programación</title>
</head>
<body>
    <h1>Lenguajes de programación</h1>
    <ul>
        <li>Python</li>
        <li>JavaScript</li>
        <li>Ruby</li>
        <li>Java</li>
        <li>C++</li>
    </ul>
</body>
</html>

8. Resumen¶

En este tema, hemos aprendido cómo utilizar las plantillas en Django para separar la lógica de presentación de la lógica de negocio. Vimos cómo crear una plantilla HTML básica, cómo conectarla a una vista utilizando render(), y cómo pasarle datos dinámicos desde el servidor. Esto nos permite crear aplicaciones web más escalables y mantenibles, donde el frontend y el backend están claramente separados.