Aún no tienes acceso a esta clase

Crea una cuenta y continúa viendo este curso

Curso de Flask

Curso de Flask

Bernardo Cassina

Bernardo Cassina

Templates con Jinja 2

9/36
Recursos

Aportes 36

Preguntas 8

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesión.

Templates con Jinja 2

Un templeate -> archivo de HTML -> renderiza informacion: Estatica o DInamica -> por variables -> luego nos muestra en el navegador

Para renderizar un template/plantilla creada con Jinja2 simplemente hay que hacer uso del método render_template.

A este método debemos pasarle el nombre de nuestra template y las variables necesarias para su renderizado como parámetros clave-valor.

Flask buscará las plantillas en el directorio templates de nuestro proyecto. En el sistema de ficheros, este directorio se debe encontrar en el mismo nivel en el que hayamos definido nuestra aplicación. En nuestro caso, la aplicación se encuentra en el fichero hello.py.

Es hora de crear este directorio y añadir las páginas hello.html, La estructura de nuestro proyecto quedaría del siguiente modo:

Flask-proyect
|_hello.py
|_ /templeate
    |__ hello.html

Ejemplo archivo hello.py

from flask import Flask, request, make_response, redirect, render_template

app = Flask(__name__)

@app.route('/')
def index():
    user_ip = request.remote_addr
    response = make_response(redirect('/hello_world'))
    response.set_cookie('user_ip', user_ip)

    return response

@app.route('/hello_world')
def hello_world():
    #creamos nueva variable de la ip que detectamos en el browser
    user_ip = request.cookies.get('user_ip')

    return render_template('hello_world.html', user_ip= user_ip)
# metodo es render_template con jinja2 y la variable es user_ip.

Para hacer que el import sea multi-linea:

from flask import (Flask,
request,
make_response,
redirect,
render_template)

La carpeta /templates debe ir dentro venv por si les da error de no encontrar el archivo.

Hola, tengo el directorio Flask y adentro tengo mi directorio de templates y venv. Al actualizar la pagina no funcionaba y aparece el error templates not found. Lo solucione con esto

app = Flask(__name__, template_folder='../templates')

Para que enviar html desde el servidor, si el front se puede hacer mucho mejor con react o angular?

Para los que les sale el siguiente error TypeError: render_template() takes 1 positional argument but 2 were given

Pueden solucionarlo pasándole exactamente el nombre de la variable al momento de renderizar el template, sería algo como lo siguiente:

return render_template("hello.html", user_ip=user_ip)

Excelente!!crei que flask era 100% solo para APIs

No se a ustedes pero me parece que Flask es similar a Django

Template: archivo de HTML que nos permite renderizar información estática y dinámica.

jinja es un lenguaje de plantillas conocido como motor de plantillas
propio de python,
que permite insertar datos procesado y predeterminados dentro de documentos de texto

actualmente la versión estable es la 2.10.1

Jinja 2 es un lenguaje de maquetación para python moderno y fácil de usar. es rápido, ampliamente usado y seguro.

Hasta el momento vamos bien. Gracias.

Es importante que la carpeta se llame templates

main.py

from flask import Flask, request, make_response, redirect, render_template


app = Flask(__name__)

@app.route('/')
def index():

    user_ip = request.remote_addr
    make = redirect('/hello')
    response = make_response(make)
    response.set_cookie('user_ip', user_ip)

    return response

@app.route('/hello')
def hello():    

    mensaje = 'Hola Mundo!!'
    user_ip = request.cookies.get('user_ip')

    return render_template('hello.html', user_ip=user_ip)

if __name__ == "__main__":
    
    app.run(debug=True)

ahora el archivo HTML, dentro de la carpeta templates

hello.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    
    <body>
        <h1>Hola Mundo, soy la ip: {{user_ip}} </h1>
    </body>
</html>
  • Los template en flask son archivos html que pueden ser dinámicos o estáticos. Estos archivos son renderizados por el navegador.
  • Flask esta configurado para buscar en una carpeta template. Para hacer uso de los template Flask usa la función render_template.

Para complementar la clase, un excelente recurso.
Aquí.

excelente

crear un nuevo directoria llamado templates y dentro un html llamada hello

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            height: 100vh;
            display: grid;
            place-content: center;
        }
        span{
            font-size: 2rem;
        }
    </style>
</head>
<body>
    <span>Hello World {{user_ip}}</span>
</body>
</html>

y en nuestro main .py

from flask import Flask, request, make_response, redirect, render_template

app = Flask(__name__)

@app.route('/')
def index():
    user_ip = request.remote_addr

    response = make_response(redirect('/hello'))
    response.set_cookie('user_ip', user_ip)

    return response

@app.route('/hello')
def hello():
    user_ip = request.cookies.get('user_ip')
    return render_template('hello.html', user_ip=user_ip)

Muy Pro. Gracias.

Incluso en los comentarios interpreta el {{}}, que interesante, no me esperaba que me marcara error por un comentario, jaja

Me gusta este curso. DIrecto y al grano.

Les comparto la manera en que logré añadirle CSS a Flask
Creen esto al mismo nivel de su “main .py” y la carpeta templates

  1. Crean primero una carpeta llamada static
  2. Dentro de la carpeta static creen la carpeta css
  3. Dentro de css crear una archivo style.css

Algo así quedaría:

Dentro de su style.css puedes agregar este código css para comprobar que todo haya funcionado:

body
{
    background-color: black;
    color: white;
    font-size: 20px;
    font-family: Helvetica;
}

y por último, agregar este link dentro del html para hacer llamado al archivo css creado anteriormente:
(Lo paso todo el código completo porque en el video no se crea el head ni el body)

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>My first flask web</title>
        <link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
    </head>

    <body>
        <!-- con la "doble llave", dentro de ella le puedes pasar variables desde main.py-->
        <h1>Hello guest, your ip is : {{ usrIP }}</h1>
    </body> 
</html>

Un template es un archivo de HTML donde se puede insertar información estática y/o dinámica mediante variables de la aplicación como la IP del ejemplo pasado.

Los templates deben ir en una carpeta con ese nombre en la raíz del proyecto, ya que ahí buscará Flask por defecto.

Renderizar template y pasar variable user_ip para que pueda ser usada en él:

return render_template('hello', user_ip=user_ip)

Por si alguien necesita el condigo del template


<!DOCTYPE html>
<html lang="en">
<head>
    <title>My Webpage</title>
</head>
<body>
    <h1>
        Hello world Flask, tu IP es {{user_ip}}
    </h1> 

</body>
</html>

Si les da error en el renderizado, me funciono remplazando:
app=Flask(__name__)
por
app=Flask(__name__,template_folder='templates')

Aquí encontraras acerca de la documentación de Jinja2
https://jinja.palletsprojects.com/en/2.10.x/templates/

LES COMPARTO MIS APUNTES HASTA EL MOMENTO, ESPERO LES PUEDA SERVIR DE ALGO

  • Create your directory
  • Initialize a git repository
git init
  • Create and activate a virtual enviroment wiht virtualenv, installing Flask.
py -m venv venv
venv/Script/Activate
python -m pip install --upgrade pip
pip install Flask
pip freeze >> requeriments.txt
  • Create an enviroment variable FLASK_APP with the name of the file which has the Flask instance, then run the server flask run
$env:FLASK_APP="main.py"
$env:FLASK_DEBUG=1
flask run

REQUEST

Request object can get the ip address with the remote_addr method

from flask import Flask, request

# Flask class instance
app = Flask(__name__)

@app.route('/')
def hello():
    user_ip = request.remote_addr

return f'Your IP address is {user_ip}'

Also we will save the IP address into a variable named user_ip. From initial dir we will redirect to another named /hello and print the IP address. The workflow es the following:

  • Into the / route we get the IP address with request.remote_addr
  • Redirect to /hello route with make_response and redirect functions
  • Save the IP into a cookie named user_id
  • return response
from flask import Flask, request, make_response, redirect, render_template

app = Flask(__name__)

@app.route('/')
def home():
    user_ip = resquest.remote_addr
    response = make_response(redirect('/hello'))
    response.set_cookie('user_ip', user_ip)

    return response

@app.route('/hello')
def hello():
		user_ip = request.cookies.get('user_ip')
		
		return render_template('hello.html', user_ip=user_ip)

Alse we add the render_template function, that allow us to use a html file to print the message with the IP address, to do that is important to create a folder named templates inside the projects, because Flask will look for this foldeto get the html file

<h1>HELLO YOU IP ADDRESS IS {{user_ip}} </h1>

OUTPUT

que bonitooo esto es hermoso

Ya salió mi h1 !!!

Siento que el curso es directo y preciso!! Muy buen curso

Apuntes de la Clase
Para esta clase se explico que un template es un archivo html que va a permitir renderizar la información ya sea estatica o dinamica. Para pasar un archivo html con templates es necesario la creación de un nuevo directorio llamado templates en la raiz del proyecto.

  1. Se creo el directorio templates.
  2. En templates se creo el archivo hello.html
  3. Importar render_template en main.py
  4. Se módifico la ruta hello de la siguiente manera
@app.route('/hello')
def hello():

    user_ip = request.cookies.get('user_ip')
    
    return render_template('hello.html', user_ip=user_ip)
  1. En hello.html en una etiqueta <h1> incluir el siguiente mensaje.
<h1>Hello World Platzi, tu IP es {{ user_ip }}</h1>

TIP La carpeta template la debes hacer en la carpeta de platzi-flask, una carpeta como tal para ella puessto que de aqui es donde se obtendran los datos necesarios.

Estoy usando python 3.8.1 cambia algo si escribo el codigo así:
return render_template(‘hello.html’, user_ip=user_ip)

La consulta es porque en la web me parece todo en blanco como si no estuviera buscando el archivo en tempates.

Una forma cómoda también en la que uno puede pasarle variables de contexto al template es mediante la ayuda del **
De ese modo podemos agregar n cantidad de elementos adicionales que nosotros queramos mostrar.

@app.route("/hello")
def hello():
    """ hello template """

    user_ip = request.cookies.get('user_ip', None)
    context = {
        'user_ip' : user_ip,
        'foo'        : bar
    }

    return render_template("hello.html", **context)

Mi pregunta es porque el profesor usa Intellij idea, cuando existe pycharm? jeje