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

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

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

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

Hint

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

Practice

1. What is the purpose of using categories in Flask flash messages?

easy

A. To encrypt messages for security

B. To store messages permanently in the database

C. To label messages by type like success or error for styling

D. To send messages to different users

Solution

1. Step 1: Understand flash message categories

   Categories help group messages by type, such as 'success' or 'error'.

2. Step 2: Recognize their use in styling

   These categories allow different styles or icons to show user feedback clearly.

3. Final Answer:

   To label messages by type like success or error for styling -> Option C

4. Quick Check:

   Flash message categories = Label messages by type [OK]

Hint: Categories tag messages for style and meaning [OK]

Common Mistakes:

• Thinking categories store messages permanently
• Confusing categories with encryption
• Assuming categories send messages to users

2. Which is the correct syntax to flash a message with a category in Flask?

easy

A. flash('Welcome!', 'info')

B. flash('Welcome!', cat='info')

C. flash('Welcome!', category: 'info')

D. flash('Welcome!').category('info')

Solution

1. Step 1: Recall flash function signature

   Flask's flash function takes message first, then category as second positional argument.

2. Step 2: Identify correct syntax

   Using flash('Welcome!', 'info') correctly passes the category as second argument.

3. Final Answer:

   flash('Welcome!', 'info') -> Option A

4. Quick Check:

   flash(message, category) = flash('Welcome!', 'info') [OK]

Hint: Category is second argument without keyword [OK]

Common Mistakes:

• Using misspelled keyword argument 'cat=' which is invalid
• Using colon instead of comma
• Trying to chain category as method

3. Given this Flask code snippet:

flash('Saved successfully', 'success')
flash('Invalid input', 'error')

What will be the categories of the flashed messages retrieved in the template?

medium

A. ['success', 'error']

B. ['info', 'warning']

C. ['error', 'success']

D. ['message', 'alert']

Solution

1. Step 1: Identify categories used in flash calls

   The first flash uses 'success', the second uses 'error' as categories.

2. Step 2: Understand retrieval order

   Messages are retrieved in the order flashed, so categories list is ['success', 'error'].

3. Final Answer:

   ['success', 'error'] -> Option A

4. Quick Check:

   Flashed categories = ['success', 'error'] [OK]

Hint: Categories match second argument in flash() calls [OK]

Common Mistakes:

• Mixing up category names
• Assuming default categories like 'info'
• Reversing order of categories

4. What is wrong with this Flask code snippet?

flash('Error occurred', cat='error')

medium

A. Message string must be a list, not a string

B. Using keyword argument 'cat' causes a TypeError

C. Category must be uppercase like 'ERROR'

D. flash() requires three arguments

Solution

1. Step 1: Check flash function parameters

   flash() accepts message and optional category as positional arguments, not keyword arguments.

2. Step 2: Identify error cause

   Using cat='error' keyword causes TypeError: unexpected keyword argument.

3. Final Answer:

   Using keyword argument 'cat' causes a TypeError -> Option B

4. Quick Check:

   flash() keyword 'cat' = TypeError [OK]

Hint: flash() takes category as second positional argument only [OK]

Common Mistakes:

• Using invalid keyword argument 'cat'
• Assuming category must be uppercase
• Thinking flash needs more than two arguments

5. You want to display flash messages with different colors based on their categories: 'success' in green, 'error' in red, and 'info' in blue. Which approach correctly uses categories in your Flask template?

hard

A. {% for message, category in get_flashed_messages() %} {{ message }}{% endfor %}

B. {% for message in get_flashed_messages() %} {{ message }}{% endfor %}

C. {% for message, category in get_flashed_messages(with_categories=True) %} {{ message }}{% endfor %}

D. {% for category, message in get_flashed_messages(with_categories=True) %} {{ category }}{% endfor %}

Solution

1. Step 1: Use get_flashed_messages with categories

   To access categories, call get_flashed_messages(with_categories=True) which returns (category, message) pairs.

2. Step 2: Correctly unpack and use variables in template

   Unpack as (category, message) and use category in CSS class for styling.

3. Final Answer:

   {% for category, message in get_flashed_messages(with_categories=True) %} <div class="alert alert-{{ category }}">{{ message }}</div> {% endfor %} -> Option D

4. Quick Check:

   Use with_categories=True and unpack (category, message) [OK]

Hint: Use with_categories=True and unpack (category, message) [OK]

Common Mistakes:

• Not using with_categories=True to get categories
• Swapping message and category order
• Using get_flashed_messages() without categories