Made withFlaskClip

Flask Tutorial #6 - Message Flashing

T

Tech With Tim

Creator on the Flask channel

Watch on YouTube ↗

180K viewsNov 10, 20199:27 runtime

Learn how to enhance user experience in your Flask applications by implementing message flashing. This tutorial provides a step-by-step guide on displaying temporary notifications, such as "login successful" or "logged out," after a user action. Discover how to use Flask's…

Chapters

#flask#clip#backend

What is Message Flashing?

Message flashing is a way to record a message at the end of one request and access it on the next request. It's primarily used to provide feedback to a user after they perform an action, such as logging in or out.

Purpose: Give users feedback and confirmation for their actions.
Benefit: Avoids passing extra variables to a template or creating entirely new pages just to show a status message.

How to Flash Messages

To send a message, you import and use the flash() function from Flask within a view function.

Import: from flask import flash
Usage: flash(message, category)

Example: Flashing a logout message

@app.route("/logout")
def logout():
    flash("You have been logged out!", "info") # Flash the message
    session.pop("user", None) # Log the user out
    return redirect(url_for("login"))

Note
The category parameter is optional. It allows you to classify messages (e.g., "info", "warning", "error") which can be used for styling the message in the template.

Displaying Flashed Messages in Templates

To display the messages, you need to add logic to your Jinja2 templates using the get_flashed_messages() function.

This reusable code block gets all flashed messages and displays them:

{% with messages = get_flashed_messages() %}
  {% if messages %}
    {% for msg in messages %}
      <p>{{ msg }}</p>
    {% endfor %}
  {% endif %}
{% endwith %}

The with block creates a local messages variable.
The if block checks if there are any messages to prevent rendering empty elements.
The for loop iterates through and displays each message.

Common Use Cases & Logic

Flashing is useful in many parts of a web application's user flow.

Successful Login: After validating credentials, flash("Login successful!") before redirecting to the user page.
Explaining a Redirect: If a logged-in user visits the login page, you can flash("Already logged in!") and redirect them away.
Invalid Actions: If a user tries to access a protected page without logging in, flash("You are not logged in!") and redirect them to the login page.

Refining Logic

It's important to use conditional logic to ensure messages are only flashed when they make sense.

Example: Only flash a "logged out" message if a user was actually in the session.

if "user" in session:
    user = session["user"]
    flash(f"You have been logged out, {user}!", "info")
    session.pop("user", None)

Important
Be careful with data types when flashing. In the video, a bug occurred by passing a function object via an f-string instead of a string variable (flash(f"...{user}") where user was the function user() itself). This resulted in printing the function's memory address, like <function user at 0x....>. Always ensure you are flashing a string.

What is Message Flashing?

Hello everybody and welcome back. So in this last tutorial, what we're going to be doing is talking about message flashing.

Now essentially, message flashing is showing some kind of information from a previous page on the next page when something happens on the GUI. So for example, say I log in, it redirects me to another page, and then maybe on the top of that page it says "logged in successfully." Or if I log out, maybe I'm going to get redirected to another page, but I want to show on that other page that I logged out successfully. So I'll flash a message in a certain part of that page so that the user has some idea what they actually did.

So it's to give them a little bit more interaction with the page, some feedback for things that they do so they have an idea what's going on. And that rather than having to change the whole page entirely or passing through some other variables to show on the screen, you can just flash a message and it makes it really easy to do this in Flask.

Implementing a Logout Flash

So to actually flash a message, all you need to do is to import flash and then you can use this function to display or kind of like post the messages that are to be flashed. And then from the different pages, we can decide where we want to flash those and we'll do that in a second.

So a basic example of when you might want to flash a message in our kind of script here, and this is where we left off in the last tutorial, is when we log out. Because what happens when we log out is we go to this page but then it pops our session and redirects us back to the login page. So on the login page, we probably want to show "logged out successful" so that they know there wasn't an error and they didn't, you know, they're not still logged in, they know that they logged out.

To do this I'm going to say flash and then here I'll just put the message that I want to show, which is "You have been logged out" like that. And then the next actual parameter for this is the category. Now this is optional but I'm just going to put info as the category as that's one of the built-in ones. So I believe that warning, info and error, and that's just if you want to show some icons and stuff beside it, you could use the category to do that. So that is pretty much it for flashing a message.

Displaying Messages in a Template

Now we actually need to display the message from our different pages. So what I'm going to do is go to the login page and inside my block content I'm going to write a few kind of templated code here to display all of the flashed messages that come up. So to do this I'm going to say with—oops, if I could spell with correctly—messages = get_flashed_messages(), make sure you add the brackets, and then I will end my with. So do {% endwith %}.

Then what I'm going to do is an if statement inside of here. This if statement will just check if we actually have any messages to display. So, if messages like that, we will end the if statement. And then if we do have any messages to display, we will loop through them and actually display them.

So now what I'm going to do is go {% for MSG in messages %}, making sure we're spelling everything correctly, then we'll {% endfor %}. And then what I can do is display all these messages. So to do that, we'll just add a <p> tag, we'll put two of these curly braces, we'll put MSG, and then we'll end the <p> tag.

Now I kind of zipped through this because we've seen this before, but essentially the with is just another Python syntax you can use in here. We're going to say messages equals whatever these get flashed messages are. Check if there's any to display, if there is we'll loop through them, we'll display them and that will be it. Now notice that we can actually have more than one flash message, which means if we go between a few different pages maybe we'll show two or three flash messages on a specific page.

Testing and Refining the Logic

So I'm going to leave that like this for now and we'll do a quick test and then we'll talk about some issues with what we have right now and adding some different flashes and some different ways of handling it. So I'm going to run this script. So Python tutorial6.py. Open this up in my browser. You can see I had it running before. So let's refresh that. I'm on the home page. I've also modified this navbar so that I have Login and Logout as direct links here, pretty basic, you guys could probably figure out how to do that. So I'll go to login, we'll go like, you know, hello, submit. There we go, we're on the user page. Now if we go to /logout, you can see that we get the message "You have been logged out" and it still shows our name.

Now notice though, if I go to like let's say the slash, and then I go to /logout again, it says "You have been logged out" once more. Now maybe we only want to show that you have been logged out if you actually were logged in. So in that case what we could do is we could check if we have a user in the session and only if we do then we will say you've been logged out. So we could say—we'll actually just copy this—so if user in session: user = session["user"], and then maybe we actually display like whatever their name is that they've been logged out. So in this case we can say flash("You have been logged out, "), and then maybe we'll put their name. So in this case I'll actually just use an f-string like that and put user. So now this way we actually display their name and tell them they've been logged out, but only if we actually had a user in the session. Okay, so that is pretty much it for that.

Refactoring for a User Page

So now I'm going to show you how we can flash a few different messages. I also want to change the page for this because we're going to be using something different. So let's start by actually creating a new HTML file which we'll use to render the user page, because right now we just have these h1 tags and I'd like to make something that looks a little bit nicer. So I'm gonna say user.html, new file. We will simply extend that base template, so extends in quotes base.html and then we can add our blocks.

So we'll say block, in this case title. I don't really know what to call this one, so I'll just call it—oops what am I doing here—endblock, we'll just call it like user because why not. And then we'll add the blocks for content, we'll set up our message flashing and we'll be good to go. So block content and then end block.

I'm actually gonna make it so it displays like, hello, like, welcome user, whatever it is. So to do that I'll just add a P tag and I'll just say, "Welcome, " and then we'll just pass in actually like a user. So we'll say user like that. And then we can display that message flashing which all I'm going to do to do that is copy this from the login page and put that at the top of the user page like that. So now, I think I missed one of the things from here, I did. I missed this with. So let's grab that, put that back in here, tab that in, and now we'll display the message flashing and then this. So now what we need to do is simply render this from our other page here. So what I'm going to do is go back to where we have user and rather than just rendering the user's name we'll actually render the template. So we'll say render_template believe I've called this user.html and then we'll pass user equals user like that, and that should display it for us.

Now let's see where else we might want to flash a few more messages before we end here. So let's grab a flash here, actually I don't need to copy that, I'll just type it out. So for example, when they log in, we probably want to tell them that they logged in. So to do that we can flash a message in here. So we'll say flash and then "Login successful" like that. So we'll flash that one there.

We'll also flash that one... hm, you know what, what I'm gonna do here is what this is doing, right, is saying if you go to the login page but you're already logged in, it just brings you to the user page. It just redirects you there. So what I'll do is say if they go to the login page and they get redirected, "Already logged in!" So that way when they go back to the user page, they know that no, nothing went wrong, they actually just are already logged in, so that's why they got redirected there.

Okay, so I think that is pretty much good for now. When I go to this user page, I'm actually gonna flash a message too that says, "You are not logged in," because that means that if they try to go to the user page and they're not logged in, they shouldn't be able to see anything. So we'll redirect them back to the login page. Anyways, this might not be perfect but this will do for now.

Final Testing, Debugging, and Conclusion

So let's test it out and see if I made any errors, which I likely did. So let's go back to the home page. So I'll just go home like that. "You have been logged out." Okay, I think that was just the last message to show. So let's go to /login. There we go. Let's login as Tim. Submit. Login successful. Welcome Tim. Okay, looks like that's working right. Now let's go back to the home page, no messages to display. Let's go login. Already logged in. Welcome Tim. And then last we will check out Logout. And when we did that, it didn't flash the message back on this page. Let me check if this is actually correct here. What I'm gonna do is just honestly rather than checking the session here, let's just always flash that you've been logged out because regardless of what they do, they probably should be told that they were logged out. So let's just do this now. Again, login, you know, H, submit. Oh, what's going on here? Let's see here. Okay, successful login. Now, if we go to back to slash—You have been logged out. function user at blah blah. Okay that's interesting why that showed that. Um, user... Oh, oops. This is displaying a function. I need to get rid of the f-string. My apologies, guys.

Okay, but that is essentially how we flash the messages. Don't worry about that last error, just because I was passing the user function, so displayed this weird string of text. But that is message flashing. So with that if you guys enjoyed the video make sure you leave a like and subscribe. In the next video I think we're going to get into some database stuff and start getting a bit more complicated and talk about how to set up an actual scalable web server. So anyways, that has been it, and I will see you guys in the next Flask tutorial.