Templates con Jinja 2

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.

Milton Javier Camelo Arango

Para hacer que el import sea multi-linea:

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

Claudio_negra

hace 6 años

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

Juan Pablo Gómez García

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')

Remix Zapata

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

Crean primero una carpeta llamada static
Dentro de la carpeta static creen la carpeta css
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>

Natalia Caro Barrios

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

Sergio Alberto Morales Ortiz

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)

Marcelo Sánchez

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>

Carlos Enrique Ramírez Flores

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

Jaskier28

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

R0Y3R

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

Andrea Da Silva Pinto

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

Alexander Moreno Córdoba

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>

Juan Galindo

Documentación de render_template
https://flask.palletsprojects.com/en/1.1.x/api/#flask.render_template

Miguel Ángel Reyes Moreno

hace 2 años

Templates con Jinja 2

Los templates son archivos de HTML que hacen un render de la información.

Carlos Enrique Arrieta Fierro

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

PeluElGrande

hace 2 años

Un template es un archivo .html que permite renderiar informacion estatica y dinamica, para este caso podriamos pasar la informacion de la ip del usuario directamente al HTML, en lugar de regresarla como una cadena de texto.

crear un nuevo directorio llamado templates, e importa de la clase Flask el modulo render_template
En la ruta hello, donde ahora en vez de retornar una cadena, retornamos el template: hello.html
tambien enviamos la user_ip, y dentro del html, coloccamos doble corchete, para indicar es una variable

Daniel Carmona

Ya salió mi h1 !!!

wilantury

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

leonardc

Hasta el momento vamos bien. Gracias.

Pablo Aquino

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.

Fabián Ignacio Malpartida Negrón

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

Francisco Garcia [C6]

excelente

KEGOVC

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)

Victor Noguera

Muy Pro. Gracias.

Reinaldo Mendoza

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

Javier Hernandez

Me gusta este curso. DIrecto y al grano.

Carlos Andres Castañeda Osorio

David Campos

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)

Agustin Daguzan

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

Alexander Moreno Córdoba

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

Antonio Cerda

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

Jhonatan David Ibarra Lavado

que bonitooo esto es hermoso

Marco Moran

hace 5 meses

Se que muchos tienen dudas al momento de crear entorno virtual. Yo Aconsejo que vean el curso de Docker y empiezen a usar Docker. Es mucho mejor . ademas el 90% de las empresas lo usan

Daniel Eduardo Cruz Gonzalez

hace 9 meses

Cosas que aprendí en esta clase: 1. EL render template sirve para que pueda ejecutar un archivo HTML dentro de una ruta. 2. Si quiero citar una variable en el HTML debo de utilizar llaves dobles. 3. Es importante que para que funcione el render template debo de importarlo. XOXO comunidad de platzi.

Roger Alberto Chan Arjona

hace un año

Una forma de pasar multiples variables al HTML es desempaquetando un diccionario.

De esta forma es más entendible el acomodo de las variables:

@app.route("/hello")
def hello():
    
    user_ip = request.cookies.get("user_ip")
    
    context = {
        "user_ip": user_ip,
        "user_ip2": user_ip,
        "user_ip3": user_ip,
    }
    
    ### Se devuelve un HTML
    return render_template("hello.html", **context)```

Víctor Isaac Arias García

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.

Se creo el directorio templates.
En templates se creo el archivo hello.html
Importar render_template en main.py
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)

En hello.html en una etiqueta <h1> incluir el siguiente mensaje.

<h1>Hello World Platzi, tu IP es {{ user_ip }}</h1>

Jose Antonio Rojas Ollarves

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.

Cristhian Fuentes Leonel Fuentes Moreno

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.

Alexei Popov

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)

Santiago Herrera Velásquez