Flask – Ejemplo 1 – #CulturaLibre

Flask – Ejemplo 1

Parece que gusto la idea de Lanzar un hola mundo de python con Flask asi que vamos a mejorarla un poco poniendo un poco de contenido estático, un par de html y vamos a ver también un poquito de teoría que nos sirve para ir sumando a este tutorial Flask – Ejemplo 1 que nos va a servir para mejorar la app web etc…

Primero que nada vamos a reconocer un poquito el árbol de archivos para que no se nos empioje despues:

Tenemos el entorno virtual que es BLOG y dentro:

Archivo run.py: Es el que cuenta con la definición de la aplicación y el primero que iniciamos (por ahora)

Carpeta static: Va a tener todos los contenidos estáticos como imágenes y en este caso para este ejemplo 1 va a tener el css.

Carpeta template: Va a tener todas las plantillas html que quisiéramos tener. Podemos tener solo una o podemos tener varias que se llamen. En este caso tenemos:

archivo base_template.html va a ser justamente la base de todos los demas.

archivo index.html Es el primer template que va a levantar pero que ademas va a estar consumiendo el base_template.html

Arhivo post_view.html va mostrar el post que le pasemos también configurado con el base_template.html

Vamos a tener una carpeta admin que la vamos a usar por “seguridad” con la idea de que ahí este el formulario que nos permita crear un nuevo post. Ver que dentro tenemos un archivo post_form.html

Ahora que ya los listamos vamos con el contenido de cada uno:

run.py

"""

AUTOR: Cultura Libre

FECHA DE CREACIÓN: 26/06/22

"""

from flask import Flask, render_template

app = Flask(__name__)


posts = []


@app.route("/")
def index():
    return render_template("index.html", num_posts=len(posts))


@app.route("/p/<string:slug>/")
def show_post(slug):
    return render_template("post_view.html", slug_title=slug)


@app.route("/admin/post/")
@app.route("/admin/post/<int:post_id>/")
def post_form(post_id=None):
    return render_template("admin/post_form.html", post_id=post_id)

base.css

body {
    margin: 0;
    padding: 0;
    font-size: 100%;
    line-height: 1.5
}
h1, h2, h3, h4 {
    margin: 1em 0 .5em;
    line-height: 1.25
}
h1 {
    font-size: 2em
}
h2 {
    font-size: 1.5em
}
h3 {
    font-size: 1.2em
}
ul, ol {
    margin: 1em 0;
    padding-left: 40px
}
p, figure {
    margin: 1em 0
}
a img {
    border: none
}
sup, sub {
    line-height: 0
}

index.html

{% extends "base_template.html" %}

{% block title %}Cultura Libre{% endblock %}

{% block content %}
    {{ num_posts }} posts
{% endblock %}

post_view.html

{% extends "base_template.html" %}

{% block title %}{{ slug_title }}{% endblock %}

{% block content %}
    Mostrando el post {{ slug_title }}
{% endblock %}

base_template.html

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>{% block title %}{% endblock %}</title>
    <link rel="stylesheet" href="{{ url_for("static", filename="base.css") }}">
</head>
<body>
{% block content %}{% endblock %}
</body>
</html>

post_form.html

{% extends "base_template.html" %}

{% block title %}
    {% if post_id %}
        Modificando el post {{ post_id }}
    {% else %}
        Nuevo post
    {% endif %}
{% endblock %}

{% block content %}
    {% if post_id %}
        Modificando el post {{ post_id }}
    {% else %}
        Nuevo post
    {% endif %}
{% endblock %}

Recuerden de poner según la primer imagen cada archivo donde va de lo contrario el run.py no los va a encontrar y va a dar error.

Si habían desactivado el entorno virtual blog que hicimos en el tutorial anterior tienen que activarlo y recordar que usamos la variable de entorno:

export FLASK_APP="run.py"

El resultado de ejecutar flask run es una web que dice 0 post

Algunas cosas del archivo run.py

from flask import Flask, render_template

importamos flask y render_template

app = Flask(__name__)

Creamos una instancia que se llama app a la cual le pasamos como primer argumento el nombre del módulo o paquete de la aplicación. __name__ es una palabra reservada que justamente hace eso.Flask se encarga de hacernos transparente el cómo a partir de una petición a una URL se ejecuta finalmente nuestra rutina. Lo único que tendremos que hacer nosotros será añadir un decorador.

posts = []

posts es simplemente una variable que devuelve una lista. A esa lista la iremos completando con los post que necesitemos.

Despues vemos las funciones. Todas tienen su decorador. Por ejemplo el decorador route de la aplicación (app) es el encargado de decirle a Flask qué URL debe ejecutar su correspondiente función.

route raiz - index.html — route raiz – index.html

Como vemos en la imagen anteior tenemos una funcion que hace un render del index.html qu ademas tiene la funcion de decirnos cuantos post hay en este caso hay 0 por eso nos devuelve 0 post cuando lanzamos flask run

Un slug es como “un nombre corto” y se va a pasar a post_view.html

Por ultimo tenemos:

aca va hacer una muestra de los post por su id — post_id

Aca miremos que cuando ingresemos a /admin/post en realidad hace un render de post_form.html y busca los post_id

A medida que vayamos avanzando vamos a ver despacio como ir trabajando esto que puede quedar mas o menos lindo dependiendo de la onda que le pongamos al html que en este caso tiene bastante poca 🙂 jaajaja

Para finalizar si hiciste todo bien ejecutas flask run: