No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Curso de Flask

Curso de Flask

Bernardo Cassina

Bernardo Cassina

Templates con Jinja 2

9/36
Recursos

Aportes 38

Preguntas 8

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

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)

Les comparto la manera en que logr茅 a帽adirle CSS a Flask
Creen esto al mismo nivel de su 鈥渕ain .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>

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>

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

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

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.

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>

Templates con Jinja 2

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

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

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.

  1. crear un nuevo directorio llamado templates, e importa de la clase Flask el modulo render_template

  2. En la ruta hello, donde ahora en vez de retornar una cadena, retornamos el template: hello.html

  3. tambien enviamos la user_ip, y dentro del html, coloccamos doble corchete, para indicar es una variable

Ya sali贸 mi h1 !!!

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.

  • 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.

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)

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

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(鈥榟ello.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