In this article, we will discuss Flask – Message Flashing. As we know best Graphical User Interface which provides feedback to a user when users interact, as an example, we can know that desktop applications use the messages box or JS for an alert purpose. generating like same informative massage 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 Message Flashing
Message Flashing means when we click on any button( any website ) and the website showing immediately any massage that can be an error, alert, or any type of massage that’s call massage Flashing and when that happens in a flask or we are creating any website which shows an alert, error type massage than its call Flash-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 category parameter which is optional, it will happen “error” or “warning”.
flash(message, category)
To understand flashing message and know about more flashing messages, we start to write code for flashing massages we take an example of a login system so let’s write code for flashing massage. 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 functionapp = 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 massage 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 functionif __name__ == '__main__': app.run(debug=True) |
Templates File
index.html
In this code, we are writing some flashing (error code ) massage 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 massages%} {% for massage in massages%} <p>{{massage}}</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 massage 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 massage 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 Massage
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 Massage. 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 Massage
profile.html
