Cómo heredar plantillas en una app de ingresos y gastos

| Última modificación: 24 de octubre de 2024 | Tiempo de Lectura: 3 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

¿Quieres saber cómo heredar plantillas en una app de ingresos y gastos? ¿Te animas a realizar un ejercicio práctico? En este artículo te acompañaremos en este proceso para que no solo ejercites tus habilidades, sino que puedas reproducir este mismo proceso en un proyecto de código diferente. Queremos que te conviertas en un gran programador y, por eso, te traemos un ejercicio práctico sobre cómo heredar plantillas en una app de ingresos y gastos

Herencia de plantillas

El proceso con el que se heredan plantillas a partir de la utilización de Flask es uno de los procesos más funcionales e importantes para el desarrollo de programas, cuyo objetivo sea crear aplicaciones o plataformas web. Para realizar el proceso de template inheritance deberás tener en cuenta dos objetos: en primer lugar, la plantilla base o base template y, después, la plantilla hija o child template.

La plantilla base es el esqueleto de todos los métodos, clases u elementos que podrán ser copiados y transformados en otras plantillas, que serán plantillas hijas o child template. Para enlazar ambas plantillas, deberás utilizar estructuras de control, tal como {% extends «base.html» %}, siendo base el nombre del fichero HTML donde encuentras la plantilla principal o base.

Cómo heredar plantillas en una app de ingresos y gastos

Para entender el funcionamiento de un proceso que involucre la escritura de código, ¿qué mejor forma que hacerlo que con una representación, en código, del proceso? Por eso, a continuación, te presentamos de qué forma se heredan plantillas en una app de ingresos y gastos con la representación de los ficheros: base.html, inicio.html y nuevo.html, siendo la primera la plantilla base y las demás plantillas hijas o child template.

Este ejercicio práctico forma parte de varios artículos que hemos realizado anteriormente, tal como estilos para un formulario de una app de ingresos y gastos y controlar errores para la misma app.

Elementos para heredar plantillas en una app de ingresos y gastos

A continuación, te listaremos algunos de los elementos o métodos que encontrarás en los ficheros de texto HTML para heredar plantillas en una app de ingresos y gastos. Ahora, como contexto, en esta app se necesitan tres pestañas que contengan distintos elementos y permitan diferentes acciones. Estas son: base.html como plantilla base del programa, inicio.html para generar la lista de movimientos de la app y nuevo.html donde se encuentra la sección para agregar movimientos.

  • {% extends «base.html» %}: es el método principal para vincular las plantillas. Este está construido con la estructura de control extends, que se encarga de extender una plantilla en otra.
  • {%block head_title %} {% endblock head_title %}: es el método que se encarga de generar bloques de texto, que serán gestionados con el título de cada una de las plantillas.
  • {%block contenido %} {% endblock contenido %}: es el método que se encarga de generar textos o bloques de contenido dentro de la plantilla que sea hijo o child de la plantilla base o base template.

🔴 ¿Quieres Aprender a Programar con Python? 🔴

Descubre el Full Stack Jr. Bootcamp - Aprende a Programar desde Cero de KeepCoding. La formación más completa del mercado y con empleabilidad garantizada

👉 Prueba gratis el Bootcamp Aprende a Programar desde Cero por una semana

A continuación, te presentamos una representación de las tres plantillas que se utilizan para generar las tres pestañas de la plataforma o app web que estás desarrollando. La base.html, es decir, la que está en el lateral izquierdo de la imagen, tiene todos los contenidos principales. Después, estos se modifican en las dos plantillas del centro y la derecha, que se extienden de la principal. El primer bloque de head_title tiene el nombre de BZ9 balance, de inicio.html, y la plantilla nuevo.html tiene el título BZ9 Crear Movimiento.
Cada uno tiene un contenido en específico en el bloque de contenido. Mientras que inicio.html almacena la lista de movimientos, el fichero nuevo.html almacena la acción de agregar movimiento.

Cómo heredar plantillas en una app de ingresos y gastos
Representación de heredar plantillas en una app de ingresos y gastos

De esta manera, ya sabes cuáles es el proceso para heredar plantillas en una app de ingresos y gastos y puedes reproducirlo en otros programas de código.

Sigue desarrollando con Flask

Ahora ya sabes que la herencia de plantillas es uno de los procesos más poderosos que construye la dependencia de Python, Jinja, que se encarga de generar templates o plantillas para la escritura de código con el lenguaje de programación más utilizado actualmente.

Si quieres seguir realizando ejercicios prácticos, como el de heredar plantillas en una app de ingresos y gastos, con la guía de un programador profesional, te recomendamos apuntarte al Aprende a Programar desde Cero Full Stack Jr. Bootcamp. ¡Anímate a seguir programando!

Ramón Maldonado

Full Stack Developer y Responsable de Formación base en KeepCoding.

Posts más leídos

¡CONVOCATORIA ABIERTA!

Aprende a Programar desde Cero

Full Stack Jr. Bootcamp

Apúntate y consigue uno de los perfiles más demandados con Python en solo 4 meses.