Django DTL(Django Template Language)

Los templates de Django nos permiten renderizar el código HTML que será enviado al navegador del cliente, mediante DTL podremos conformar la estructura de la página web mostrando los datos recibidos de las vistas del modo que mas nos convenga, además DTL permise extender e incluir otros templates por lo que podremos reutilizar código entre plantillas.

Antes de comenzar es recomendable leer los artículos anteriores sobre Django ya que son los pasos previos a este artículo:

Mediante la App admin hemos insertado varios ejercicios y una rutina para poder seguir desarrollando el código y poder realizar pruebas reales.
En esta ocasión vamos a mostrar las rutinas utilizando un template muy sencillo en el que utilizaremos un bucle for para iterarlas.

Activamos el venv del proyecto:

cd rxWod
source bin/activate
cd rxWodProject/

Creamos el directorio de templates en la app rxWod:

mkdir -p rxWod/templates/rxWod

Creamos el template que iterará las rutinas:

vi rxWod/templates/rxWod/index.html

{% if routines %}
    <ul>
    {% for routine in routines %}
        <li><a>{{ routine.date }}</a></li>
    {% endfor %}
    </ul>
{% else %}
    <p>No routines available.</p>
{% endif %}

Modificamos la vista index para que consulte las rutinas de la base de datos y los envíe al template vía contexto:

vi rxWod/views.py

from django.shortcuts import render
from django.http import HttpResponse
from .models import Routine

def index(request):
    routines = Routine.objects.order_by('id')
    context = {
        'routines': routines,
    }
    return render(request, 'rxWod/index.html', context)

El flujo es el siguiente:

URL -> Vista -> Ejecución código -> Contexto -> Renderizado mediante template -> Respuesta*

El renderizado del template muestra el siguiente contenido:

En los templates debemos evitar hardcodear paths, en este ejemplo mostramos un action de un formulario hardcodeado:

<form action="/show_routine" method="post">
{% csrf_token %}
    <input name="routine_id" value={{ routine.id }} type="hidden"></input>
    <button type="submit" class="btn-link">{{ routine.date }}</button>
</form>

Por otro lado podemos indicarlo del siguiente modo utilizando NameSpaces, este método tiene la ventaja de que cuando hagamos cambios en las URLs automáticamente se verán reflejados en nuestros templates.

<form action="{% url 'rxWod:show_routine' %}" method="post">
{% csrf_token %}
    <input name="routine_id" value={{ routine.id }} type="hidden"></input>
    <button type="submit" class="btn-link">{{ routine.date }}</button>
</form>

Una buena forma de organizar el código de los templates es mediante includes, un ejemplo muy sencillo puede ser el siguiente:

vi rxWod/templates/rxWod/minimal.html

<!doctype html>
<html lang="en">
    <head>
        <!-- Required meta tags for BootStrap -->
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <title>rxWod</title>
        {% block minimal_head %}
        {% endblock %}
    </head>
    <body>
        <p>Minimal Template</p>
        {% block minimal_body %}
        {% endblock %}
    </body>
</html>

vi rxWod/templates/rxWod/base.html

{% extends 'rxWod/minimal.html' %}

{% block minimal_head %}
    {% block base_head %}
    {% endblock %}
{% endblock %}

{% block minimal_body %}
    <p>Base template</p>
    {% block base_body %}
    {% endblock %}
{% endblock %}

vi rxWod/templates/rxWod/index.html

{% extends 'rxWod/base.html' %}

{% block base_body %}
        {% if routines %}
            <ul>
            {% for routine in routines %}
                <li><a>{{ routine.date }}</a></li>
            {% endfor %}
            </ul>
        {% else %}
            <p>No routines available.</p>
        {% endif %}
{% endblock %}

Si accedemos al index podremos ver el contenido de cada include:

Ahora que ya sabemos como utilizar las vistas y los templates el resto de la app ya es simplemente programación de las funcionalidades restantes.