Flask – Message Flashing

In this article, we will discuss Flask – Message Flashing. As we know best Graphical User Interface provides feedback to a user when users interact, as an example, we know that desktop applications use the messages box or JS for an alert purpose. generating like same informative message is easy to display in the Flask web application. The flashing message of the Flask web application makes Flask easier and more useful for users.

What is the Message Flashing

Message Flashing means when we click on any button( any website ) and the website immediately any message that can be an error, alert, or any type of message that’s call message Flashing and when that happens in a flask or we are creating any website which shows an alert, error type message than its call Flask-Message Flashing.

A Flask contains a flash()  function. which passes a request to the next user. which generally is a template we are using flash methods in the above template in which the message parameter is the real message to be flashed, and another one is the optional category parameter category, it will happen “error” or “warning”.

flash(message, category)

To understand flashing messages and know about more flashing messages, we start to write code for flashing messages we take an example of a login system so let’s write code for flashing message. Create a Virtual Environment.

app.py File

Here, we create an app.py file in which we write our main code of Flask.

In app.py first, we import flask then we initialize the flask function and create a secret key which will help us when we forgot our password then we made two functions one home() for index.html which will help us to call and display the home page when we run flask using flask run command and another one for login login.html  we joint both files by using form action and after that, we use if and else condition for flashing message (error or warning) and also for redirect on profile page by filling right password and also right Email ID  and after that in if and else condition we create password GFG we can set any password it up to you and also write error flashing message which will show when we fill the wrong password and click on submit button for login and if we fill right password and email id it will redirect us on profile page were also showing one welcome flashing message which we create using python code in app.py file.

That error message which is showing in the above images when we enter the wrong password is called a flashing message also if we fill right password and email id and click on submit button then it will redirect us to the profile page which will also show a welcome flashing message so this way we can display flashing message in our display screen. for getting the code and take help completing this flashing message click here. It will also help to know how to show flashing messages.

Python3

from flask import *

# Initialize Flask function
app = Flask(__name__)
app.secret_key = "GeeksForGeeks"


# home function for index.html
@app.route("/index")
def home():
    return render_template("index.html")


# row function for profile.html
@app.route("/profile")
def row():
    return render_template("profile.html")


# write if and else condition if we provide write password then he will redirect
# us in profile page otherwise he will redirect us on same page with
# flashing message Invalid Password
@app.route("/login", methods=['GET', 'POST'])
def login():
    error = None
    if request.method == "POST":
        if request.form['pass'] != "GFG":
            error = "Invalid Password"
        else:
            flash("You are successfully login into the Flask Application")
            return redirect(url_for('row'))

    return render_template("login.html", error=error)


# execute command with debug function
if __name__ == '__main__':
    app.run(debug=True)

Templates File

index.html

In this code, we are writing some flashing (error code ) message command and we connect this page to login by using the URL “/login” in the app.py file it means when we click on the URL ”  login “redirects us to the login page. where we can log in. and we can enter our profile by filling right password which we will set in the below code of the app.py file.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
</head>
<body>
    
{% with messages = get_flashed_messages()%}
{% if messages%}
    {% for message in messages%}
    <p>{{message}}</p>
    {%endfor%}
    {%endif%}
    {%endwith%}
    <h3>Welcome to the GeeksForGeeks</h3>
    <a href="{{url_for('login')}}">login</a>
      
</body>
</html>

When we run the following command in our terminal. 

flask run 

Output:

This will show on our display screen and it also shows our flask is successfully running.

index.html

login.html

In the login page, we create simple input for the password and email which is required to fill .and also write three lines of python code for showing a flashing message when we enter the wrong password and try to log in and also set both inputs in from tag in which we create one method post and action “/login” which means when we click on previous page login link so it will redirect us on this login form page and we write for one button in which we set the value to submit for submitting our login form after filling Email and password.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login</title>
</head>

<body>
    {% if error%}
    <p><strong>{{error}}</strong></p>
    {% endif%}

    <form method="post" action="/login">
    <table>
        <tr>
            <td>Email</td>
            <td><input type="email" name="email"></td>
        </tr>
        <tr>
            <td>Password</td>
            <td><input type="password" name="pass"></td>
        </tr>
        <tr>
            <td><input type="submit" value="Submit"></td>
        </tr>
    </table>
</form>
</body>

</html>

Output:

login.html

profile.html

In this code, we made a simple message that will show after successful login. it will also show us the welcome flashing message which we create in the app.py file by using the flask function.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Profile</title>
</head>
<body>
    <div class="container">
        <p><strong>Welcome to your GFG Profile Page</strong></p>
    </div>
</body>

</html>

Final Output of unsuccessful Flashing Message

If we write the wrong Password and press submit button so it will show a flashing message (error or warning) like the below output image Invalid Password is called Flashing Message. and if we fill right password and email it will redirect us to the profile page which will also show one flashing welcome message on our display screen.

profile.html

The output of successful Flashing Message

profile.html