Tutorial básico de Django. Parte 10. Las templates

Antes de empezar, para facilitar la tarea deberíamos tener instaladas en Visual Studio Code la extensión de Django.

Para ello vayamos a nuestro editor, al apartado extension y busquemos por Django. Le daremos a install a la primera que nos sale que tiene millones de descargas:

Con esta extensión podemos utilizar más fácilmente Django Templates Systems, es un “nuevo lenguaje de programación” de Django para poder crear el frontend de una aplicación. Se crea a partir de los símbolos de llaves y de porcentajes {%%}. La extensión nos ayuda a autocompletar el código.

Al haber instalado esta extensión es posible que no nos permita colocar shortcuts (atajos) de html. Lo solucionamos:

Ctrl shift p buscamos, settings.js

Abrimos el settings.json y le añadimos la línea de emmet:

Es posible que tengas que recargar la extensión de Django para que puedas aplicar los cambios.

Ahora sí, podemos empezar:

Cada una de las vistas que creamos en la pasada clase (backend) se puede ligar a un template, es decir a un frontend.

Para explorar el concepto del frontend (templates), empecemos creando en la aplicación en la que estamos trabajando (en este caso, nuestra aplicación polls), la carpeta templates y dentro de esta otra carpeta llamada polls.

Será en esta última carpeta dónde vamos a crear nuestra templates, nuestros archivos html.

Te estarás preguntando por qué tanta redundancia. La carpeta de nuestra aplicación se llama polls y dentro tengo una carpeta template con otra carpeta polls. Podría haberte tentado empezar a crear las templates directamente dentro de templates sin necesidad de crear dentro una subcarpeta polls. Esto no sería correcto debido al funcionamiento de Django; Django cuando trabaja las templates lee toda la estructura de nuestro proyecto, toma todas las carpetas templates y las combina en una sola para poder leer todos los archivos de dentro. Por lo tanto, si tengo otra aplicación con otra carpeta templates y dentro archivos llamados iguales no va a saber cuál ejecutar.

Por eso es una buena práctica crear un subdirectorio con la aplicación que estamos trabajando en la carpeta templates.

Para cada vista, vamos a crear una templates con el mismo nombre de la función que nosotros creamos en el archivo views. Le damos a new file y lo llamamos index, detail y result, con extensión html.

Ahora vayamos a trabajar el index.html

{% if latest_question_list %}
        <ul>
        {% for question in  latest_question_list %}
            <li> <a href="/polls/{{ question.id }}">{{question.question_text }}</a></li>
        {% endfor %}
        </ul>
{% else %}
<p>No polls are available.</p>
{% endif %}

Si existe la variable latest_question_list vamos a mostrar una unorder list o lista desordenada. Cuyos elementos van a ser unos list item y mediante un ciclo for, se va a ir creando la estructura de los elementos de la lista. Cada elemento contendrá el link: el href va a ser “/polls/{{question.id }} y nos va a mostrar el texto de la pregunta.

La variable latest_question_list es el conjunto que aún no ha sido creado pero en el que va a contener todas nuestras preguntas.

Si no existe la variable nos mostrará el mensaje no polls are available

Para hacer que se vean este archivo html tenemos que modificar el archivo views en el lugar donde desarrollamos la función index.

def index(request):
  latest_question_list = Question.objects.all()
  return render(request, "polls/index.html, {
  "latest_question_list": latest_question_list
})

Con Question.objects.all tenemos un objeto de tipo query set con todas las preguntas de nuestra aplicación y se van a guardar en latest_question_list

En lugar de retornar a la respuesta http con un texto como teniamos en un principio(“Estas en la página principal de premios”), retornaremos a nuestra template index.html mediante render (función que Django importó con nosotros al crear los archivos views).

Render lleva 3 parámetros:

• request
• La template que queremos que se muestre, nosotros lo encontramos en “polls/intex.html” (como ya te conté Django toma todos las carpetas templates de nuestro proyecto, las combina en una sola y a partir de ahi empieza a contar las templates).
• Un contexto, un diccionario de python en el que nosotros vamos a colocar variables que pueden ser usadas por esta templates en este caso sólo usaremos “latest_question_list”: latest_question_list. De esta manera esta variable estará disponible en el archivo index.html para poder ser usada por el lenguaje que utiliza Django para poder programar en el mismo archivo html.

Una vez tengamos esto podemos irnos al home de nuestra aplicación.

127.0.0.1:8000/polls/

Te aparecerá una lista con tus preguntas.

Ya tenemos la primera versión de nuestra aplicación. En la siguiente clase veremos como acceder al detalle de cada pregunta, es decir a la pregunta y todas las respuestas que la componen.