Creando páginas HTML con Flask y Jinja.
Hasta el momento todas nuestras vistas, que eran muy sencillas, estaban devolviendo un texto cada vez que las llamabamos. ("Hola mundo", una suma, "Bienvenido" etc..). ¿Te imaginas tener que programar una página web completa como un string para ser devuelto por una vista? Imposible.
Pues bien, para hacernos la vida más fácil, Flask incorpora un motor de renderizado llamado Jinja2 que nos ayudará a crear nuestras paginas web e integrarlas en la aplicación. Para ello vamos a crear o utilizar un archivo html llamado:
plantilla_inicial.html
- Es importante que esta y las demás páginas html que creemos estén guardadas en un directorio llamado "templates" ya que por defecto Flask buscará las plantillas en este directorio -
Además este directorio debe estar al mismo nivel en el que hayamos definido nuestra aplicación. Vamos a comenzar con el archivo inicio.py con el código del primer capítulo, todo ello dentro de nuestra carpeta de trabajo. De forma visual se vería así:
Más sobre Contenido Estático.
Como normalmente en una página web también tendrás hojas de estilo CSS, ficheros javascript, imágenes, archivos pdf etc que forman parte de lo que se llama recursos estáticos, si quieres utilizarlos, en Flask estos ficheros tienen que ir dentro de un directorio llamado "static" que estará al mismo nivel que el "template" que ya hemos creado anteriormente. Este directorio estará accesible en la URL "/static/". Sin embargo para poder acceder a ellos es más recomendable utilizar también la función url_for. (Al final del capítulo pondremos un ejemplo sobre esto)
La estructura del directorio de trabajo podría quedar de las siguiente manera:
El archivo inicio.py quedaría tal que así:
Comencemos haciendo una plantilla html básica para que la vea el usuario nada más que entre en nuestro proyecto. Os recuerdo que el objetivo de este curso es aprender a utilizar Flask de una forma sencilla y que por tanto tanto la creación de paginas web, utilización de css y javascript no son objeto del mismo. Por ello todos los archivos html serán muy sencillos.
Nuestra plantilla inicial, para cuando se cargue la página de inicio quedaría tal que así:
Para hacer que tu aplicación de Flask utilice la página html que hemos creado, en vez de devolver como hasta ahora el "Hola Mundo" utilizaremos el método render_template. A este método tenemos que pasarle el nombre de nuestra plantilla, en este caso plantilla_inicial.html y las variables necesarias para su renderizado como parámetros clave-valor.
Explicación del código.
Hemos modificado las siguientes líneas:
1.- Importamos a mayores el método render_template para poder renderizar o mostrar nuestra página html en el navegador. Ya no solo retornaremos texto como nos pasaba en capítulos anteriores, sino que esto nos permitirá hacer muchas más cosas.
6.- Cambiamos el return añadiéndole el método render_template antes importado. De momento solo le decimos que nos renderice, que nos dibuje, nuestra página web en el navegador. Como esta en la vista inicial @app.route("/") nada mas que corramos el programa y entremos en la página del proyecto en nuestro navegador veremos lo siguiente:
Introducción a Variables y Propiedades en las plantillas.
Vamos a ver como utilizar variables dentro de las plantillas. Queremos crear una plantilla que cuando el usuario se conecte a nuestra pagina inicial, e introduzca su nombre como un parámetro personalice un poco la vista a través de una variable. Partimos de nuestro archivo inicio.py y modificamos el código de la vista de entrada de esta manera.
@app.route('/')
@app.route('/<nombre>/')
def inicio(nombre=None):
if nombre==None:
nombre=""
return render_template("plantilla_inicial.html", usuario=nombre)
y en "plantilla_inicial.html" modificamos la etiqueta <h2> de la siguiente forma:
<h2>Usuario/a {{usuario}}, ¡Bienvenido!</h2>
Al programa lo que le estamos diciendo es. Si el usuario se conecta directamente, sin poner ningún parámetro de entrada, entonces cambia el valor de la variable nombre por un espacio en blanco y renderiza la plantilla_inicial.html con ese valor. Por el contrario, si el usuario se nos conecta y pone su nombre como parámetro entonces este valor se pasará a través de la variable "usuario" y se renderizará en la página "plantilla_inicial.html".
En resumen en nuestra página "plantilla_inicial.html" hemos introducido una variable "usuario" que será sustituida por su valor al renderizar o generar la plantilla.
archivo inicio.py
plantilla_inicial.html
Opción 1) el usuario se conecta directamente, sin poner ningún parámetro de entrada
Opción 2) el usuario se nos conecta y pone su nombre como parámetro inicial.
LO IMPORTANTE del asunto es el haber puesto la variable que queremos renderizar entre dos {{ ... }}. Con esto le estamos diciendo a Flask que coja el valor de la variable y la renderice.
Fíjate en el archivo plantilla_inicial.html en la etiqueta <h2> donde pone {{usuario}}
Elementos de una plantilla.
En una plantilla, a parte del texto propio que formará la parte html de la misma, podemos encontrar:
- Variables, se indican con {{ .... }} como ya hemos visto.
- Instrucciones que se van a indicar {% ... %} (Bucles, condicionales, herencias de plantilllas etc)
Aquí lo que se recomienda es que se usen lo menos posible. Lo sensato es que metas la parte de python en el archivo de python y muestres lo que necesites a través de variables. Y esto ¿Por que? Porque en la vida real normalmente el diseño de un sitio web, el que hace la página, la diseña y crea el archivo html es una persona distinta al que realiza luego la programación. Y claro al que diseña la página no suele hacerle gracia que se modifique su programa, introduciendo código que puede modificar ese diseño. En nuestro caso, como luego haremos un proyecto completo veremos las dos partes y luego tu elige lo que mas te guste o más fácil te resulte.
- Comentarios, se indican con {# ... #}
Posdata - Contenido estático
Voy a explicar someramente como introducir una imagen en nuestro proyecto de Flask usando el método url_for. Aunque también se podría usando la ruta relativa del archivo pero es menos recomendable.
Lo primero, dentro de la carpeta static he creado otra carpeta llamada img y dentro he puesto el fichero con la imagen que quiero mostrar (cada uno que ponga la que más le guste). En mi caso se llama plinux.png
En este ejemplo no he importado el método url_for porque al utilizarlo en los ficheros de las plantillas Flask lo coje por defecto. Sin embargo si usas url_for en el archivo de vistas, el que contiene el código, tendrás que importarlo ya que sino te dirá que el método no está definido.
Luego en el fichero plantilla_inicial.html usaríamos la etiqueta para importar la imagen <img src=""> queda de la siguiente forma:
Nota: Cuidado con la comillas exteriores " " e interiores ' '. Deben ser distintas ya que si no nos da error. Dicho lo cual comentar que usando el método url-for con el directorio static y poniendo en filename la ruta del archivo nos dará la ruta donde se encuentra alojada la imagen.( /static/img/plinux.png )
Si lo que queremos es definir un fichero externo para nuestras hojas de estilo, se haría de una forma muy similar a esta. Lo mismo que antes he creado dentro de static un directorio llamado css y dentro he creado un archivo llamado style.css. Crearé una instrucción css para que ponga en amarillo el fondo de las etiquetas <h2>:
h2 {background: yellow;}
Después dentro de la etiqueta head del fichero plantilla_inicial.html he llamado al fichero css externo de la siguiente forma:
Exactamente la misma estructura que cuando importamos la imagen, solo que esta vez usando como filename el directorio css y cambiando el nombre del archivo.
El resultado:
- Por tanto hemos visto como usar el metodo url_for tanto para que nos de la url de una vista introduciendo la función asociada, como para obtener la url de un archivo añadiéndole la carpeta padre y con el atributo filename='ruta del archivo'.
No hay comentarios:
Publicar un comentario