Flash message categories in Flask - Mini Project: Build & Apply

Flash message categories

📖 Scenario: You are building a simple Flask web app that shows messages to users after certain actions. These messages have different categories like 'success', 'error', and 'info' to style them differently on the page.

🎯 Goal: Create a Flask app that flashes messages with categories and displays them in the HTML template with their categories.

📋 What You'll Learn

Create a Flask app with a route that flashes messages with categories

Use the flash function with a message and a category

Pass flashed messages to the template

Display flashed messages with their categories in the HTML

💡 Why This Matters

🌍 Real World

Flash messages with categories are used in web apps to show feedback to users after actions like form submissions or errors.

💼 Career

Knowing how to use flash messages with categories is important for building user-friendly Flask web applications that communicate clearly with users.

1

Set up Flask app and secret key

Import Flask and flash from flask. Create a Flask app called app. Set app.secret_key to the string 'secret123'.

Flask

# Your code here

Need a hint?

The secret key is needed to use flash messages in Flask.

2

Create a route that flashes messages with categories

Create a route for '/' using @app.route. Inside the route function called index, flash the message 'Welcome!' with category 'success'. Then flash the message 'Error occurred' with category 'error'. Return a string 'Messages flashed'.

Flask

from flask import Flask, flash

app = Flask(__name__)
app.secret_key = 'secret123'

# Create route '/' and flash messages with categories
# Your code here

Need a hint?

Use flash(message, category) to add messages with categories.

3

Create a template to display flashed messages with categories

Create a template string called template with HTML that loops over get_flashed_messages(with_categories=true). For each category and message, display a <div> with class set to the category and the message inside. Use Jinja2 syntax for the loop and variables.

Flask

from flask import Flask, flash

app = Flask(__name__)
app.secret_key = 'secret123'

@app.route('/')
def index():
    flash('Welcome!', 'success')
    flash('Error occurred', 'error')

# Create a template string called 'template' with Jinja2 to loop over get_flashed_messages(with_categories=true)
# Your code here

Need a hint?

Use get_flashed_messages(with_categories=true) to get messages with their categories in the template.

4

Run the Flask app with debug mode

Add the code to run the Flask app with app.run(debug=true) inside the if __name__ == '__main__' block.

Flask

from flask import Flask, flash
from flask import render_template_string

app = Flask(__name__)
app.secret_key = 'secret123'

@app.route('/')
def index():
    flash('Welcome!', 'success')
    flash('Error occurred', 'error')
    template = '''
    
    
    Flash Messages
    
      {% for category, message in get_flashed_messages(with_categories=true) %}
        {{ message }}
      {% endfor %}
    
    
    '''
    return render_template_string(template)

# Add the code to run the app with debug=true
# Your code here

Need a hint?

This code starts the Flask app in debug mode so you can see changes live.