Flask y plantillas HTML en Raspberry Pi

Publicado por Loli Diéguez en

Vamos a complicar más o mejor dicho a completar, lo que vimos en el anterior artículo sobre como montar un servidor web con Flask en la Raspberry Pi. En el artículo de hoy os cuento como usar plantillas HTML y hojas de estilo CSS, de este modo, verás como se simplifica mucho más el script Python y todo estará más estructurado.

Como usar plantillas HTML

Lo primero será crear una estructura de carpetas donde guardar los archivos html y css ya que el framework de Flask busca estos archivos en unas carpetas concretas, templates para los archivos html y static para los archivos de estilo CSS. Así que crea primero estas carpetas, navega hasta la carpeta del proyecto flask que hiciste en el anterior artículo y usa estos comandos para crear las carpetas:

mkdir templates
mkdir static

El resultado tendría que ser algo como esto:

carpetas templates y static para flask

 

Ahora vas a crear un archivo html que tendrás que guardar en la carpeta templates, usa este código ejemplo y modificalo a tu gusto:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Web para Flask</title>
</head>
<body>
<h1> LA WEB DE FLASK PARA PYTHON </h1>
<p> ESTO MOLA </p>
</body>
</html>

Ahora modificaremos el script python del anterior articulo para llamar al archivo html y así visualizarlo:

from flask import Flask, render template
app = Flask(__name__)
@app.route('/')
def index():
return render_template ("index.html")
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0')

 

Como ves, importamos el método render_template() desde el marco de Flask, este método busca la plantilla (el archivo HTML) en la carpeta de templates.

El segundo cambio que ves en el código es la llamada al método render template, al que se le pasa como argumento el nombre del archivo html: render_template(“home.html”).

Si ahora ejecutas el script python como vimos (python3 app.py) el resultado que deberás ver será como este:

plantilla HTLM Flask

 

Esto que hemos hecho ha sido una llamada a la plantilla HTML asociada a la ruta principal del script python, pero siguiendo esta forma que os explico, podemos crear otras plantillas para otras rutas que añadamos al script Python (app.py en mi ejemplo), veamos como:

Igual que antes, hagamos otro archivo html que guardarás en la carpeta templates y dale el nombre que quieras, yo lo llamaré "autor"

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Web sobre el autor</title>
</head>
<body>
<h1> EL AUTOR SOY YO MISMA </h1>
<p> SIEMPRE ADELANTE :-) </p>
</body>
</html>

Ahora tu carpeta templates debería tener como mínimo dos archivos, como yo.

segunda plantilla html flask

 

Ahora toca modificar el script python para poder llamar a esta plantilla, para lo cual añadirás una segunda ruta del mismo modo, lo hicimos en el articulo anterior sobre Flask en Rapsberry Pi

from flask import Flask, render template
app = Flask(__name__)
@app.route('/')
def index():
return render_template ("index.html")
@app.reoute('/autor')
def otraweb ():
return render_template ("autor.html")
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0')

 

Y al ejecutar el script ahora podrás dirigirte a la direccion 0.0.0.0:5000/autor y obtendrás esto como resultado:

segunda plantilla flask ejecutandose

 

Hasta ahora hemos visto como poner texto simple, algo que no es dinámico, pero vamos a arreglar esto con las siguientes lineas de código en las platillas HTML y en el script. Lo siguiente que te mostraré será como pasar argumentos a la plantillas desde el script the python, modifica tu plantilla html como indico a continuación:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>{{ title }}</title>
</head>
<body>
<h1> LA WEB DE FLASK PARA PYTHON </h1>
<h2> Fecha de hoy: {{ time }}</h2>
<p> ESTO MOLA </p>
</body>
</html>

 

Verás algo muy curioso en el código y es lo que hay entre las dobles llaves "{{}}" dentro de la plantilla HTML, esto se interpreta como una variable que se le pasaría desde el script de Python a través de la función render_template.

Ahora toca modificar el script para capturar el tiempo del reloj de la Raspberry Pi y pasarlo como parámetro cuando hagamos la llamada a la plantilla HTML:

from flask import Flask, render template
app = Flask(__name__)
@app.route('/')
def index():
now = datetime.datetime.now()
timeString = now.strftime("%Y-%m-%d %H:%M")
templateData = {
'title' : 'Flask!',
'time' : timeString
}

return render_template('index.html', **templateData)
@app.reoute('/autor')
def otraweb ():
return render_template ("autor.html")
if __name__ == '__main__':
app.run(debug=True, host='0.0.0.0')

 

Como resultado deberías ver algo así:

lectura en la web de la hora de la Raspberry Pi

 

Lo he marcado en amarillo para que lo identifiques, como ves ha sido de nuevo muy sencillo, en el siguiente articulo relacionado con flask veremos como usar hojas de estilo CSS.

Espero que te sea útil este articulo y que puedas emplearlo en tus proyectos.


Compartir esta publicación



← Publicación más antigua Publicación más reciente →