Hey, welcome to a new video.
You learn how to display a message just below the submit button so that we tell the user that the form
was submitted successfully.
That makes your interface, your web app user friendly.
So users hate programs which don't give them feedback.
So the user wants to know what's going on.
Therefore, let's go to our index.html file and add something just below the button.
Right?
So we said we want to add the message here below the submit button.
So that submit button is located here and we want to add some div tags.
We can start this by just putting something static like form was submitted successfully by static.
What I mean by static is that if you load the page now, so whenever you load the page, this is displayed
here.
But we want this to be dynamic text, meaning that this should be displayed once the user presses the
submit button and not being there permanently.
So let's do that.
Let's see how we can do that.
To do that, we need to go outside of the div opening tag and we want to say.
If messages with this syntax so curly brackets percentage.
Percentage.
Curly brackets.
But more accurately, this is jinja2 syntax, so to say so Jinja2 is like a middleman that lets your
python code communicate with your HTML code.
You'll see how your python code will communicate in just a minute.
But let's finish this syntax.
So this is the div tag, the closing div tag, and after the closing div tag you want to close that
if block with end if here.
So now we are saying that if there are messages to be displayed then we will display those messages.
So what are messages?
Where do these come from?
Well these should come from your code, your python code.
To implement that, you need to import the flash function from flask import flash, and then in just
here.
So after you have finished with your operations, so you have submitted your data to the database,
then you want to tell the user that your form was submitted successfully.
Right.
And a success category.
So this is the message and this is like the category of the message.
Now, this function will display this message in here, but we also need to add something else here.
Just above the if message.
Again, we need to perform some jinja2 coding like this.
You say with messages equal to get.
Flashed messages.
So this is.
A ginger to function.
This will give us the messages we have defined in this function in our Python code.
And those messages will be stored in this variable messages.
Then we say if there are messages, so we check.
If there are messages, then we display this.
Right.
And we also need to end this with block.
So just below the end if line, we want to add an end with line.
So this is my code.
This is my python code.
Let's go here, reload this.
So you see now that the text is not displayed anymore, right?
So even though we have this form was submitted successfully, it's not being displayed here.
But what happens if we add some data?
Submit we get this form was submitted successfully.
So this is being displayed there.
Right.
So it's working.
But to make this better, the best practice is to actually display this message to the index div here
because this will give you more options later on.
Perhaps you want to get something from the data here, like the name of the user.
You can say you can use an F string and you can say first name.
Your form was submitted successfully, right?
And then in here you remove that and you write a jinja for loop with this symbols again for message
in messages.
So messages is a variable which has been defined in here.
So we have access to that variable and then you want to display the message.
Note that here to display a variable, the value of a variable, you want to use double curly brackets
without percentage symbols, you see, and then you want to close that for loop with you guessed it.
And for right, let's indent this.
It's not necessary, but it makes the code more readable.
And yeah, let's reload.
Reload.
Fill in the data.
Submit.
And there we go.
So our dates, your form was submitted successfully.
That's the message.
Now, let's make this a bit more visually appealing by adding a class to the div element which contains
the message.
So this was displayed here, right?
That's the message.
And so we wrap this around with divs and we assign a class of alert alert success.
Right.
So let's try it again.
Reload the page, submit the data again.
Submit.
So now it looks better.
And that's how you display a message just below your form to let the user know that the form was submitted
successfully.
So thanks for following this.
Next, we want to send a confirmation email to the user.
Let's do that in the next video.
See you.