¿Cómo pintar mensajes flash con HTML?

Seguro conoces qué es message flashing y para qué funciona, pero ¿sabes cómo pintar mensajes flash con HTML? Si aun no lo sabes pero quieres saber cómo puedes hacerlo para interactuar con los usuarios de tu programa, te recomendamos seguir leyendo este artículo. A continuación, te explicaremos cómo pintar mensajes flash con HTML.

¿Cómo pintar mensajes flash con HTML?

Ahora que recuerdas la opción de message flashing, puedes empezar a pintar el mensaje que hayas generado en el fichero de HTML de tu programa de código. En este caso, vamos a establecer dos extractos de HTML para dos mensajes. El primero tendrá un resultado de error, mientras que el segundo evidenciará el éxito de la acción del usuario de la aplicación.

Mensaje de error

En el primer caso para pintar mensajes flash con HTML, vamos a pintar el mensaje de error que hemos establecido en un paso anterior. Para ello, tendrás que utilizar las estructuras de control para la herencia de plantillas o inheritance templates. Este extracto deberemos establecerlo como un if, ya que no es un elemento persistente de nuestro programa, sino que solo aparece cuando en el fichero de Python está el comando de get_flashed_messages().

Como es un mensaje de error, tendrá un warning y un icono que represente el error. Para eso, deberás emplear el método de error. Después de esto, podrás crear la clase para el mensaje de error.

A continuación, te presentamos cómo luciría el proceso para pintar el error en el fichero de HTML:

<main>

#primer mensaje

{%with messages = get_flashed_messages() %}

{% if messages %}

<div class = «errores – flash»>

<ion – icon name = «warning» class = «icono – error»> </ion – icon>

<div class = «mensajes – error»>

{% for message in messages %}

</p> {{message}} </p>

</div>

{% endif %}

Mensaje de éxito

Ahora, en esta forma de pintar mensajes flash con HTML vamos a pintar un mensaje de éxito, donde el proceso es casi el mismo. Solo deberás instanciar una serie de variables para diferenciarlo del mensaje anterior. Una de estas es la variable category filter, que tendrá la etiqueta de éxito. Asimismo, la clase deberá tener el mensaje de éxito flash.

Para el icono, deberás utilizar el mismo proceso. Sin embargo, aquí puedes configurar su tamaño, si así lo deseas. Esta configuración debe ir dentro de la instauración de la clase. Después, tendrás que indicar todas las estructuras de control y comandos para cerrar el extracto de código de los mensajes.

A continuación, te traemos una representación, en forma de HTML, para que puedas reproducirlo en tu programa y generar los mensajes que desees:
#nuevo mensaje: éxito

{% with messages = get_flashed_messages (category_filter = [“exito”]) %}

{% if messages %}

<div class = “exito – flash”>

<p>

<ion – icon name = “checkmark – done – outline” size = “large” class = “icono-error”> </ion – icon>

</p>

<div class = “mensajes – exito”>

{% for message in messages %}

<p> {{message }} </p>

{ % endfor %}

</div>

</div>

{% endif %}

{% endwith %}

</main>

De esta manera y reproduciendo este mismo código en tus ficheros, ya sabes cómo pintar mensajes flash con HTML para interactuar con el usuario de tu programa.

¿Qué puedes hacer ahora?

Ahora que sabes cómo pintar mensajes flash con HTML, tus programas de código serán mucho más versátiles y los usuarios podrán interactuar con el programa y sus funcionalidades a partir de los mensajes flash.

Si quieres conocer más acerca de las bases de la programación y del desarrollo web, te recomendamos echarle un vistazo al programa de nuestro Aprende a Programar desde Cero Full Stack Jr. Bootcamp. Al matricularte en esta formación íntegra e intensiva de alta calidad, podrás afianzar tus habilidades en código y aprender desde cero para convertirte en un programador profesional en menos de un año. ¿A qué estás esperando? ¡Apúntate ahora!