Include y links

Me parece excelente pedagogía. Se basa mucho más en la práctica y tenemos la documentación como soporte en caso de querer ir más allá.

Julio César Zaravia Paredes

¡Hola Comunidad!

Uno compañero de Platzi hizo la siguiente pregunta: ¿Cuál es la diferencia entre extends e include? Me parece que la respuesta que le di puede ser de utilidad para otros que tengan la misma duda. Así que la copio aquí como aporte 👇:
.
Cuando usas el keywords extends para llamar a una plantilla, esta plantilla que has llamado toma el control de tu vista. Tomemos el ejemplo con el que venimos trabajando.
.
Contenido del archivo hello.html (reducido para el ejemplo):

01. {% extends 'base.html' %}
02. 
03. {% block title %} 
04.    {{ super() }}
05.    Bienvenida 
06. {% endblock %}
07. 
08. {% block content %}
09.    {% if user_ip %}
10.        <h1>Hello World Platzi, tu IP es {{ user_ip }}</h1>
11.   {% else %}
12.        <a href="{{ url_for('index') }}">Ir a inicio</a>
13.    {% endif %}
14. {% endblock %}

Nota que llamar a base.html hace que ahora todo el contenido de hello.html gira en torno al primero. Puedes notar esto, específicamente en la línea #4, dónde necesita utilizar el método super() para traer contenido de la plantilla PADRE.
.
Adicionalmente puedes ver en la línea #8 que se crea un bloque content que contiene (dependiendo del condicional) un Título o un Enlace. Este contenido SOLO se mostrará si nombra a este bloque content en base.html. Por lo que si revisas el código de base.html podrás ver la llamada del PADRE al HIJO:
.
El código que copio de base.html ha sido adaptado para el ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
    <title> {% block title %} Flask Platzi | {% endblock %} </title>
</head>
<body>
    <!-- Aquí puedes ver la llamada del padre al hijo -->
    {% block content %}
    {% endblock %}    
</body>
</html>

Sin embargo, cuando usas el keyword import lo único que haces es enlazar una plantilla con otra y será hello.html quien tendrá el control de hacer la llamada al contenido de la otra plantilla cuando lo requiera. Puedes ver lo aquí:
.
El código que copio de hello.html ha sido adaptado para el ejemplo:

01. {% import 'macros.html' as macros %}
02. 
03. {% block content %}
04.     <ul>
05.         {% for todo in todos %}
06.             {{ macros.render_todo(todo) }}
07.         {% endfor %}
08.     </ul>
09. {% endblock %}

Como puedes ver en la línea #6 es hello.html quien decide llamar y usar el macro, inclusive podrías importar macros.html y no usarlo. Cosa que no podría pasar con extends.
.
Espero que te haya servido algo de lo explicado aquí.
.
¡Saludos!

Janer Tegue

Me gusta mucho el curso

Jaskier28

pasas de mucha teoría que si la explicaras facilitaría mucho entender y aprender mas rápido

Andres Rivera

pregunta ¿este html se renderea en el servidor o en el cliente?

Miguel Ángel Reyes Moreno

hace 2 años

Include y links

Creamos un archivo navbar.html:

<nav>
    <ul>
        <li><a href="{{ url_for('index') }}">Ir a inicio</a></li>
        <li><a href="https://midiaenunosminutos.com" target="_blank">Ir a mi blog</a></li>
    </ul>
</nav>

Y lo incluimos en base.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} Curso Flask | {% endblock %}</title>
</head>
<body>
    <header>
        {% include 'navbar.html' %}
    </header>
    {% block content %}
    {% endblock %}
</body>
</html>

Carlos Alfredo Marín Bohórquez

hace 2 años

Me gusta mucho que el curso es bastante práctico, cursos llenos de teoría hay en todos lados, pero donde te pongan a practicar verdaderamente pocos, por eso me ha gustado mucho este curso.

Felipe Orrego Soto

Como estaba de caro el Platzi en aquel entonces

Alexander Moreno Córdoba

https://j2logo.com/tutorial-flask-espanol/

para los que quieran profundizar:

Ingerman Paez

Soy docente en otra área, esto parece mas un taller que una clase. No deberían saltarse toda la teoría porque pueden confundir a muchos estudiantes… Siempre se puede ir a la documentación, pero esa no es la idea de venir a Platzi.
En serio deberían planear mejor los contenidos.

Josue Tonatiuh Echeverria Vargas

Entonces cual seria la diferencia entre el include y el block??? 😮

Marcelo Sánchez

main.py

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


app = Flask(__name__)

todos = ['Crompar Cafe', 'Entregar Informe', 'Salir a caminar']

@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():    
    
    user_ip = request.cookies.get('user_ip')
    render = render_template(
        'hello.html', 
        user_ip=user_ip, 
        todos=todos
    )

    return render

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

Andres Espejo

hace un año

- Created variables in cosole ```bash export FLASK_APP= main.py #app principal para ejecución export FLASK_DEBUG=1 #active debug flask ``` - Commands **`echo $varible`** —Ver variable `**flask run**` —Correr flask

Tatiana Delgadillo G

hace 2 años

Si les falla la carga de archivos este fix en la ruta les servira

<a href="{{url_for('index')}}">

Daniel Carmona

Excelente!

Luis Loaeza

Después de Django (y todo el trabajo que me costó) Flask me parece mucho más tranquilo y amigable 😆

Cesar Hernández Ramírez

El inlcude es lo mismo que hacer un import pero en esa misma linea llamamos a lo que incluímos(importamos)

Victor Noguera

excelente clase. Gracias.

Francisco Garcia [C6]

que buena explicacion, sencilla

Jhonatan David Ibarra Lavado

esto esta hermoso

Israel Cabello Figueroa

Si coincido con muchos acá, yo ya había probado web dev antes, pero nunca con Python siempre Js me atoraba, ahora como ya tengo nociones y todo me encanta el ritmo como se avanza acá, me encantó hacer el hello world tan pronto etc etc, pero creo que antes me hubiera frustrado muchísimo

Emmanuel Sosa Reyes

Soy de seguridad, pero siempre me ha llamado la atención el desarrollo web. Tome el curso de Bootstrap el cual amé, Javascript, etc. Ahora, Python es muy importante para nosotros los Pentesters. Quiero ver como opera Python en el entorno web, y hasta ahora muy interesante. Espero se le de más estática a la aplicación en las siguientes clases.

wilantury

https://flask.palletsprojects.com/en/1.1.x/tutorial/templates/

jesus alberto negrin guerrero

excelente clase interactiva 😄

Sebastian Castro Torres

Excelente, clase

Marcelo Sánchez

navbar.html

<nav>
    <ul>
        <li> <a href=" {{ url_for('index') }} ">Ir a inicio</a> </li>
        <li> <a href="https://platzi.com/" target=" blank">Platzi</a> </li>
    </ul>
</nav>

Marcelo Sánchez

macros.html

{% macro render_todo(todo) %}
    <li>Descripcion: {{todo}} </li>
{% endmacro %}

Marcelo Sánchez

base.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title> 
            {% block title %} 
                Flask Platzi | 
            {% endblock %}
        </title>
    </head>

    <body>
        <header>
            {% include 'navbar.html' %}
        </header>
        {% block content %}            
        {% endblock %}
    </body>
</html>

Marcelo Sánchez

hello.html

{% extends 'base.html' %}
{% import 'macros.html' as macros %}

{% block title %} 

    {{ super() }}
    Bienvenido

{% endblock %}

{% block content %}

    {% if user_ip %}
        <h1>Hola Mundo, soy la ip: {{user_ip}} </h1>
    {% else %}
        <a href=" {{ url_for('index') }} "> Ir al inicio de la pagina </a>
    {% endif %}

    <ul>
    {% for todo in todos %}
        {{macros.render_todo(todo)}}
    {% endfor %}
    </ul>    

{% endblock %}

Carlos Enrique Ramírez Flores

debo decir que jinja2 y blade en laravel, son muy similares!! y creo que eso es genial porque es facil entender como funciona cada motor!

leonardc

Gracias.

Jose Antonio Rojas Ollarves

Resumen:

Crear un archivo navbar.html (Tendra una barra de navegacion)

<nav>
    <ul>
        <li><a href="{{ url_for('index')}}"> Ir a inicio</a></li>
        <li><a href="https://google.com" target="_blank">Ir a google</a></li>
    </ul>
</nav>

Incluirlo en el archivo base.html en una etiqueta <header>

    <header>
        {% include 'navbar.html' %}
    </header>

Claudio Jesus Vázquez Villanueva

Cual es la diferencia de esto a un macro?

Luis Daniel Hernández Guevara

Si les sirve , les dejo la documentación de Flask , aqui pueden encontrar muchos ejemplos para seguir aprendiendo . Saludos https://flask.palletsprojects.com/en/1.1.x/

Pablo Aquino

Excelente clase!!

Para incluir archivos html dentro de un html usamos {% include 'archivo.html' %}

Hermes Aguilar