Crear y Usar Plantillas en Flask

Introducción

En este laboratorio, aprenderemos cómo crear y usar plantillas en Flask. Las plantillas son una parte crucial de las aplicaciones web. Nos permiten generar páginas HTML dinámicas que pueden mostrar diferentes datos cada vez que se cargan. Utilizaremos el motor de plantillas Jinja2 que viene empaquetado con Flask.

Nota: Debes crear el archivo de código por ti mismo y ejecutarlo en el entorno. Puedes previsualizar el estado del servicio Flask en Web 5000.

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL flask(("Flask")) -.-> flask/DataHandlingGroup(["Data Handling"]) flask(("Flask")) -.-> flask/CoreConceptsGroup(["Core Concepts"]) flask/DataHandlingGroup -.-> flask/incoming_request_data("Incoming Request Data") flask/DataHandlingGroup -.-> flask/response_objects("Response Objects") flask/CoreConceptsGroup -.-> flask/application_object("Application Object") flask/CoreConceptsGroup -.-> flask/useful_internals("Useful Internals") subgraph Lab Skills flask/incoming_request_data -.-> lab-136338{{"Creación de Plantillas en Flask"}} flask/response_objects -.-> lab-136338{{"Creación de Plantillas en Flask"}} flask/application_object -.-> lab-136338{{"Creación de Plantillas en Flask"}} flask/useful_internals -.-> lab-136338{{"Creación de Plantillas en Flask"}} end

Creando la Plantilla Base

Nuestro primer paso es crear una plantilla base que se utilizará para todas nuestras páginas. Esta plantilla base incluirá los elementos comunes de nuestra aplicación, como la barra de navegación y el título de la página.

<!-- flaskr/templates/base.html -->
<!doctype html>
<title>{% block title %}{% endblock %} - Flaskr</title>
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" />
<nav>
  <h1>Flaskr</h1>
  <ul>
    {% if g.user %}
    <li><span>{{ g.user['username'] }}</span></li>
    <li><a href="{{ url_for('auth.logout') }}">Cerrar Sesión</a> {% else %}</li>

    <li><a href="{{ url_for('auth.register') }}">Registrarse</a></li>
    <li>
      <a href="{{ url_for('auth.login') }}">Iniciar Sesión</a>
      {% endif %}
    </li>
  </ul>
</nav>
<section class="content">
  <header>{% block header %}{% endblock %}</header>
  {% for message in get_flashed_messages() %}
  <div class="flash">{{ message }}</div>
  {% endfor %} {% block content %}{% endblock %}
</section>

Plantilla de Registro

A continuación, crearemos una plantilla para la página de registro. Esta plantilla extenderá nuestra plantilla base y llenará el contenido específico de esta página.

<!-- flaskr/templates/auth/register.html -->
{% extends 'base.html' %} {% block header %}
<h1>{% block title %}Registrarse{% endblock %}</h1>
{% endblock %} {% block content %}
<form method="post">
  <label for="username">Nombre de usuario</label>
  <input name="username" id="username" required />
  <label for="password">Contraseña</label>
  <input type="password" name="password" id="password" required />
  <input type="submit" value="Registrarse" />
</form>
{% endblock %}

Plantilla de Inicio de Sesión

De manera similar, crearemos una plantilla para la página de inicio de sesión. Esta plantilla también extenderá nuestra plantilla base y llenará el contenido específico de esta página.

<!-- flaskr/templates/auth/login.html -->
{% extends 'base.html' %} {% block header %}
<h1>{% block title %}Iniciar Sesión{% endblock %}</h1>
{% endblock %} {% block content %}
<form method="post">
  <label for="username">Nombre de usuario</label>
  <input name="username" id="username" required />
  <label for="password">Contraseña</label>
  <input type="password" name="password" id="password" required />
  <input type="submit" value="Iniciar Sesión" />
</form>
{% endblock %}

Resumen

En este laboratorio, aprendimos cómo crear y usar plantillas en Flask. Creamos una plantilla base que incluye los elementos comunes de nuestra aplicación, y luego creamos plantillas específicas para las páginas de registro e inicio de sesión que extienden esta plantilla base y llenan su contenido específico. Esto nos permite mantener nuestro código DRY (No te repitas), lo que lo hace más mantenible y menos propenso a errores.