PROGRAMACIÓN WEB

CON PYTHON Y JAVASCRIPT

DJANGO TEMPLATES - PLANTILLAS

 Hasta ahora, nuestras respuestas HTTP han sido solo texto, ¡pero podemos incluir cualquier elemento
HTML que queramos! Por ejemplo, podría decidir devolver un encabezado azul en lugar de solo el
texto en nuestra función index:
DJANGO TEMPLATES - PLANTILLAS

 Sería muy tedioso escribir una página HTML completa dentro de views.py. También constituiría un
mal diseño, ya que queremos mantener partes separadas de nuestro proyecto en archivos separados
siempre que sea posible.
 Es por eso que ahora presentaremos las plantillas (templates) de Django, que nos permitirán escribir
HTML y CSS en archivos separados y renderizar esos archivos usando Django.
 La sintaxis que usaremos para renderizar una plantilla es la siguiente:
DJANGO TEMPLATES - PLANTILLAS

 Ahora, necesitaremos crear esa plantilla. Para hacer esto, crearemos una carpeta llamada templates
dentro de nuestra aplicación, luego crearemos una carpeta llamada hola (o cualquiera que sea el
nombre de nuestra aplicación) dentro de ella, y luego agregaremos un archivo llamado index.html.
DJANGO TEMPLATES - PLANTILLAS

 A continuación, agregaremos lo que queramos a ese nuevo archivo:

 Ahora, cuando visitamos la página principal de

nuestra aplicación, podemos ver que el
encabezado y el título se han actualizado.
DJANGO TEMPLATES - PLANTILLAS

 Además de escribir algunas páginas HTML estáticas, también podemos usar el lenguaje de plantillas de
Django para cambiar el contenido de nuestros archivos HTML según la URL visitada. Probémoslo
cambiando nuestra función de saludo anterior:

 Observa que pasamos un tercer argumento a la función de renderización aquí, uno que se conoce
como contexto. En este contexto, podemos proporcionar información que nos gustaría tener
disponible dentro de nuestros archivos HTML. Este contexto toma la forma de un diccionario Python.
DJANGO TEMPLATES - PLANTILLAS
 Ahora, podemos crear un archivo saludar.html:

 Notarás que usamos una nueva sintaxis: llaves dobles. Esta sintaxis nos permite acceder a las variables
que hemos proporcionado en el argumento de contexto.
DJANGO TEMPLATES - PLANTILLAS

 Ahora, hemos visto cómo podemos modificar nuestras plantillas HTML

según el contexto que proporcionamos.
 Sin embargo, el lenguaje de plantillas Django es aún más potente, así que
echemos un vistazo a algunas otras formas en que puede ser útil.
DJANGO - CONDICIONALES
 Es posible que deseemos cambiar lo que se muestra en nuestro sitio web en función de algunas
condiciones. Por ejemplo, si visitamos el sitio www.isitchristmas.com, probablemente se encontrará
con una página que se ve así:
DJANGO - CONDICIONALES
 Este sitio web cambiará el día de Navidad, cuando el sitio web dirá SÍ.
 Para hacer algo como esto para nosotros, intentemos crear una aplicación similar, en la que
verificaremos si es el día de Año Nuevo o no. Creemos una nueva aplicación para hacerlo, recordando
nuestro proceso para crear una nueva aplicación:
1. Ejecutamos python manage.py startapp anionuevo en la terminal.
2. Editamos settings.py y agregamos “anionuevo" como una de nuestras INSTALLED_APPS
3. Editamos el archivo urls.py de nuestro proyecto e incluimos una ruta similar a la que creamos para la
aplicación de saludo:
DJANGO - CONDICIONALES
 Cree otro archivo urls.py dentro del directorio de nuestra nueva aplicación y actualícelo para
incluir una ruta similar a la ruta del índice en hola:

 Cree una función de índice en views.py.

DJANGO - CONDICIONALES
 Ahora que hemos configurado nuestra nueva aplicación, descubramos cómo comprobar si es el día de
Año Nuevo o no.
 Para hacer esto, podemos importar el módulo de fecha y hora de Python. Para tener una idea de
cómo funciona este módulo, podemos mirar la documentación y luego probarlo fuera de Django
usando el intérprete de Python.
 El intérprete de Python es una herramienta que podemos usar para probar pequeños fragmentos de
código Python. Para usar esto, ejecutas python en su terminal, y luego podrás escribir y ejecutar
código Python dentro de tu terminal. Cuando hayas terminado de usar el intérprete, ejecutas exit()
para salir.
DJANGO - CONDICIONALES
 Podemos usar este conocimiento para construir una expresión booleana que se evaluará como
Verdadero si y solo si hoy es el día de Año Nuevo: now.day == 1 and now.month == 1
 Ahora que tenemos una expresión que podemos usar para evaluar si es el día de Año Nuevo o no,
podemos actualizar nuestra función de índice en views.py:
DJANGO - CONDICIONALES
 Ahora, creemos nuestra plantilla index.html. Tendremos que volver a crear una nueva carpeta
llamada templates, una carpeta dentro de la denominada anionuevo y un archivo dentro de la
denominada index.html. Dentro de ese archivo, escribiremos algo como esto:
DJANGO - CONDICIONALES
 En el código anterior, observarás que cuando deseamos incluir lógica en nuestros archivos HTML,
usamos {% y %} como etiquetas de apertura y cierre alrededor de declaraciones lógicas. También ten
en cuenta que el lenguaje de formato de Django requiere que incluyas una etiqueta final que indique
que has terminado con el bloque if-else. Ahora, podemos abrir nuestra página para ver:
DJANGO - CONDICIONALES
 Veamos lo que sucede detrás de escena, inspeccionemos el elemento de esta página:

 Ten en cuenta que el HTML que realmente se envía a tu navegador web incluye solo el encabezado
NO, lo que significa que Django está usando la plantilla HTML que escribimos para crear un nuevo
archivo HTML y luego lo envía al navegador web. Si hacemos un poco de trampa y nos aseguramos de
que nuestra condición sea siempre verdadera, vemos que se cumple el caso contrario:
DJANGO - ESTILOS
 Si queremos agregar un archivo CSS, que es un archivo estático porque no cambia, primero crearemos
una carpeta llamada estática, luego crearemos una carpeta de año nuevo dentro de esa, y luego un
archivo styles.css dentro de ella. En este archivo, podemos agregar cualquier estilo que deseemos tal
como lo hicimos en la primera lección:

 Ahora, para incluir este estilo en nuestro archivo HTML, agregamos la línea {load static} en la parte
superior de nuestra plantilla HTML, que le indica a Django que deseamos tener acceso a los archivos
en nuestra carpeta estática. Luego, en lugar de codificar el enlace a una hoja de estilo como hicimos
antes, usaremos alguna sintaxis específica de Django:

 Reiniciamos el servidor y listo!

DJANGO - LISTAS
 Ahora hagamos un mini proyecto que incluya un listado de tareas a realizar.
 Para ello creamos una nueva App como lo hicimos anteriormente.
1. Ejecutamos python manage.py startapp tareas en la terminal.
2. Editamos settings.py, agregando "tareas" como una de nuestras INSTALLED_APPS
3. Editamos el archivo urls.py de nuestro proyecto
 Cree otro archivo urls.py dentro del directorio de nuestra nueva aplicación y lo actualizamos para
incluir una ruta.
DJANGO - LISTAS
 Ahora, trabajemos en la creación de nuestro archivo HTML de plantilla:
DJANGO - LISTAS
 Observa aquí que podemos recorrer nuestras tareas usando una sintaxis similar a nuestros
condicionales de antes, y también similar a un bucle de Python que vimos clases atrás.
 Cuando vamos a la página de tareas ahora, podemos ver cómo se representa nuestra lista:
DJANGO - FORMULARIOS
 Ahora que podemos ver nuestras tareas como listas de cosas, quiza querramos añadir nuevas tareas.
Para hacer esto comenzamos utilizando formularois para actualizar un sitio web.
 Comencemos agregando otra función a views.py que generará una página con un formulario para
agregar una nueva tarea:

# Agregar una nueva tarea: def agregar(request):

return render(request, "tareas/agregar.html")

 A continuación, nos aseguramos de agregar otra ruta a urls.py:

path("agregar", views.agregar, name=“agregar")

DJANGO - FORMULARIOS

 Ahora, crearemos nuestro archivo agregar.html, que es bastante similar a index.html, excepto que en el cuerpo
incluiremos un formulario en lugar de una lista:

<!DOCTYPE html>
<html lang="es">
<head>
<title>Tareas</title>
</head>
<body>
<h1>Agregar Tarea:</h1>
<form action="">
<input type="text", name="tarea">
<input type="submit">
</form>
</body>
</html>
DJANGO - FORMULARIOS

 Sin embargo, lo que acabamos de hacer no es necesariamente el mejor diseño, ya que acabamos de repetir la
mayor parte de ese HTML en dos archivos diferentes.
 El lenguaje de plantillas de Django nos brinda una forma de eliminar este diseño deficiente: la herencia de
plantillas. Esto nos permite crear un archivo layout.html que contendrá la estructura general de nuestra página:
<!DOCTYPE html>
<html lang="es">
<head>
<title>Tareas</title>
</head>
<body>
{% block body %}
{% endblock %}
</body>
</html>
 Observe que nuevamente hemos usado {% ...%} para denotar algún tipo de lógica no HTML, y en este caso, le
estamos diciendo a Django que llene este "bloque" con texto de otro archivo.
DJANGO - FORMULARIOS

 Ahora, podemos alterar nuestros otros dos archivos HTML para que se vean así:

index.html agregar.html

{% extends "tareas/layout.html" %}
{% extends "tareas/layout.html" %}
{% block body %}
{% block body %}
<h1>Tareas:</h1>
<h1>Agregar Tarea:</h1>
<ul>
<form action="">
{% for unaTarea in tareas %}
<input type="text", name="tarea">
<li>{{ tarea }}</li>
<input type="submit">
{% endfor %}
</form>
</ul>
{% endblock %}
{% endblock %}
DJANGO - FORMULARIOS

 Sin embargo, en lugar de codificar enlaces, ahora podemos usar la variable de nombre que asignamos a cada ruta
en urls.py, y crear un enlace que se vea así:
<a href="{% url 'agregar' %}">Agregar una Nueva Tarea</a>
 donde "agregar" es el nombre de esa ruta. Podemos hacer algo similar en nuestro agregar.html:
<a href="{% url 'index' %}">Ver Tareas</a>
 Sin embargo, esto podría crear un problema, ya que tenemos algunas rutas denominadas index en nuestras
diferentes aplicaciones. Podemos resolver esto yendo a cada uno de los archivos urls.py de nuestra aplicación y
agregando una variable app_name, de modo que los archivos ahora se vean así:
from django.urls import path
from . import views

app_name = "tareas"
urlpatterns = [
path("", views.index, name="index"),
path("agregar", views.agregar, name="agregar")
]
DJANGO - FORMULARIOS

 Luego podemos cambiar nuestros enlaces de simplemente index y agregar a tareas: index y tareas:
agregar

<a href="{% url 'tareas:index' %}">Ver Tareas</a>

<a href="{% url 'tareas:agregar' %}">Agregar Nueva Tarea</a>

 Ahora, trabajemos para asegurarnos de que el formulario realmente funcione cuando el usuario lo envía. Podemos
hacer esto agregando una acción al formulario que hemos creado en agregar.htm

<form action="{% url 'tareas:agregar' %}" method="post">

 Esto significa que una vez que se envíe el formulario, seremos redirigidos a la URL para agregar. Aquí hemos
especificado que usaremos un método de publicación en lugar de un método de obtención, que normalmente es
lo que usamos cada vez que un formulario podría alterar el estado de esa página web.
PROXIMA CLASE

 Agregar seguridad a los formularios con un token CSRF

 Procesar formularios con Django Forms
 Manejo de Sesiones
 GRACIAS
programacionpolotic@gmail.com

PROGRAMACIÓN WEB
CON PYTHON Y JAVASCRIPT