1
00:00:00,300 --> 00:00:01,910
Hey, welcome to a new video.

2
00:00:01,920 --> 00:00:08,670
You learn how to display a message just below the submit button so that we tell the user that the form

3
00:00:08,670 --> 00:00:10,340
was submitted successfully.

4
00:00:10,350 --> 00:00:13,950
That makes your interface, your web app user friendly.

5
00:00:13,950 --> 00:00:17,850
So users hate programs which don't give them feedback.

6
00:00:17,850 --> 00:00:20,430
So the user wants to know what's going on.

7
00:00:20,610 --> 00:00:28,830
Therefore, let's go to our index.html file and add something just below the button.

8
00:00:28,830 --> 00:00:29,340
Right?

9
00:00:29,340 --> 00:00:33,660
So we said we want to add the message here below the submit button.

10
00:00:33,660 --> 00:00:42,450
So that submit button is located here and we want to add some div tags.

11
00:00:42,450 --> 00:00:53,820
We can start this by just putting something static like form was submitted successfully by static.

12
00:00:53,820 --> 00:01:00,640
What I mean by static is that if you load the page now, so whenever you load the page, this is displayed

13
00:01:00,640 --> 00:01:01,240
here.

14
00:01:01,240 --> 00:01:08,020
But we want this to be dynamic text, meaning that this should be displayed once the user presses the

15
00:01:08,020 --> 00:01:11,950
submit button and not being there permanently.

16
00:01:11,950 --> 00:01:13,750
So let's do that.

17
00:01:13,750 --> 00:01:15,160
Let's see how we can do that.

18
00:01:15,340 --> 00:01:23,080
To do that, we need to go outside of the div opening tag and we want to say.

19
00:01:27,050 --> 00:01:32,150
If messages with this syntax so curly brackets percentage.

20
00:01:32,240 --> 00:01:33,140
Percentage.

21
00:01:33,140 --> 00:01:34,220
Curly brackets.

22
00:01:34,220 --> 00:01:41,930
But more accurately, this is jinja2 syntax, so to say so Jinja2 is like a middleman that lets your

23
00:01:41,930 --> 00:01:45,320
python code communicate with your HTML code.

24
00:01:45,770 --> 00:01:50,140
You'll see how your python code will communicate in just a minute.

25
00:01:50,150 --> 00:01:52,220
But let's finish this syntax.

26
00:01:52,220 --> 00:01:59,420
So this is the div tag, the closing div tag, and after the closing div tag you want to close that

27
00:01:59,450 --> 00:02:03,470
if block with end if here.

28
00:02:03,470 --> 00:02:11,450
So now we are saying that if there are messages to be displayed then we will display those messages.

29
00:02:11,450 --> 00:02:12,890
So what are messages?

30
00:02:12,890 --> 00:02:15,290
Where do these come from?

31
00:02:15,290 --> 00:02:19,280
Well these should come from your code, your python code.

32
00:02:19,670 --> 00:02:28,050
To implement that, you need to import the flash function from flask import flash, and then in just

33
00:02:28,050 --> 00:02:28,410
here.

34
00:02:28,410 --> 00:02:34,740
So after you have finished with your operations, so you have submitted your data to the database,

35
00:02:34,740 --> 00:02:42,990
then you want to tell the user that your form was submitted successfully.

36
00:02:43,210 --> 00:02:44,010
Right.

37
00:02:45,570 --> 00:02:48,180
And a success category.

38
00:02:48,780 --> 00:02:53,250
So this is the message and this is like the category of the message.

39
00:02:53,250 --> 00:03:02,670
Now, this function will display this message in here, but we also need to add something else here.

40
00:03:03,800 --> 00:03:06,070
Just above the if message.

41
00:03:06,080 --> 00:03:11,600
Again, we need to perform some jinja2 coding like this.

42
00:03:11,630 --> 00:03:17,030
You say with messages equal to get.

43
00:03:18,720 --> 00:03:20,730
Flashed messages.

44
00:03:21,180 --> 00:03:22,560
So this is.

45
00:03:24,720 --> 00:03:26,570
A ginger to function.

46
00:03:26,580 --> 00:03:35,090
This will give us the messages we have defined in this function in our Python code.

47
00:03:35,100 --> 00:03:40,710
And those messages will be stored in this variable messages.

48
00:03:40,830 --> 00:03:45,300
Then we say if there are messages, so we check.

49
00:03:45,300 --> 00:03:49,170
If there are messages, then we display this.

50
00:03:49,530 --> 00:03:50,190
Right.

51
00:03:50,460 --> 00:03:54,000
And we also need to end this with block.

52
00:03:54,000 --> 00:04:02,280
So just below the end if line, we want to add an end with line.

53
00:04:03,060 --> 00:04:04,260
So this is my code.

54
00:04:04,260 --> 00:04:06,240
This is my python code.

55
00:04:06,540 --> 00:04:09,690
Let's go here, reload this.

56
00:04:09,690 --> 00:04:14,820
So you see now that the text is not displayed anymore, right?

57
00:04:14,850 --> 00:04:20,519
So even though we have this form was submitted successfully, it's not being displayed here.

58
00:04:21,089 --> 00:04:25,440
But what happens if we add some data?

59
00:04:26,890 --> 00:04:30,640
Submit we get this form was submitted successfully.

60
00:04:30,730 --> 00:04:34,840
So this is being displayed there.

61
00:04:34,990 --> 00:04:35,440
Right.

62
00:04:35,440 --> 00:04:36,910
So it's working.

63
00:04:37,150 --> 00:04:47,370
But to make this better, the best practice is to actually display this message to the index div here

64
00:04:47,380 --> 00:04:50,710
because this will give you more options later on.

65
00:04:50,710 --> 00:04:55,930
Perhaps you want to get something from the data here, like the name of the user.

66
00:04:55,930 --> 00:05:03,010
You can say you can use an F string and you can say first name.

67
00:05:04,660 --> 00:05:07,790
Your form was submitted successfully, right?

68
00:05:07,810 --> 00:05:17,650
And then in here you remove that and you write a jinja for loop with this symbols again for message

69
00:05:17,680 --> 00:05:18,700
in messages.

70
00:05:18,700 --> 00:05:22,090
So messages is a variable which has been defined in here.

71
00:05:22,090 --> 00:05:29,710
So we have access to that variable and then you want to display the message.

72
00:05:31,210 --> 00:05:38,110
Note that here to display a variable, the value of a variable, you want to use double curly brackets

73
00:05:38,110 --> 00:05:46,750
without percentage symbols, you see, and then you want to close that for loop with you guessed it.

74
00:05:46,750 --> 00:05:50,440
And for right, let's indent this.

75
00:05:50,470 --> 00:05:53,830
It's not necessary, but it makes the code more readable.

76
00:05:53,830 --> 00:05:56,890
And yeah, let's reload.

77
00:05:57,370 --> 00:05:58,210
Reload.

78
00:05:58,600 --> 00:06:00,070
Fill in the data.

79
00:06:03,090 --> 00:06:03,870
Submit.

80
00:06:04,380 --> 00:06:05,340
And there we go.

81
00:06:05,340 --> 00:06:08,990
So our dates, your form was submitted successfully.

82
00:06:09,000 --> 00:06:10,590
That's the message.

83
00:06:10,590 --> 00:06:18,720
Now, let's make this a bit more visually appealing by adding a class to the div element which contains

84
00:06:18,720 --> 00:06:19,680
the message.

85
00:06:19,680 --> 00:06:21,960
So this was displayed here, right?

86
00:06:21,960 --> 00:06:23,280
That's the message.

87
00:06:23,280 --> 00:06:34,170
And so we wrap this around with divs and we assign a class of alert alert success.

88
00:06:35,140 --> 00:06:35,530
Right.

89
00:06:35,530 --> 00:06:36,700
So let's try it again.

90
00:06:36,700 --> 00:06:40,090
Reload the page, submit the data again.

91
00:06:43,140 --> 00:06:43,940
Submit.

92
00:06:43,950 --> 00:06:45,600
So now it looks better.

93
00:06:46,840 --> 00:06:54,220
And that's how you display a message just below your form to let the user know that the form was submitted

94
00:06:54,220 --> 00:06:54,970
successfully.

95
00:06:54,970 --> 00:06:57,060
So thanks for following this.

96
00:06:57,070 --> 00:07:00,820
Next, we want to send a confirmation email to the user.

97
00:07:00,820 --> 00:07:02,080
Let's do that in the next video.

98
00:07:02,110 --> 00:07:02,380
See you.