1 00:00:05,410 --> 00:00:12,100 Welcome back in this lecture we're going to briefly show you how you can flash messages to a user often 2 00:00:12,100 --> 00:00:16,030 and want to send the message to the user that we don't need to save or fix permanently to the template 3 00:00:16,030 --> 00:00:18,580 page and we really need to save it toward database. 4 00:00:18,670 --> 00:00:23,680 Instead we just want to show a quick either confirmation or message display to the user that they can 5 00:00:23,680 --> 00:00:29,320 then quickly close things like saying thank you for submitting your form on the same page. 6 00:00:29,350 --> 00:00:35,110 What we can do is we can use flash from flask to actually flash a message to the user that can later 7 00:00:35,110 --> 00:00:39,260 on be close by that same user and flask actually makes that really easy. 8 00:00:39,280 --> 00:00:45,910 All you need to do is you import a flash function from flask and then you can connect it to some bootstrap 9 00:00:45,910 --> 00:00:47,920 code where you show you how to do all this. 10 00:00:47,920 --> 00:00:52,780 Keep in mind we're going to be visiting the bootstrap documentation and the link for that code is inside 11 00:00:52,840 --> 00:00:55,300 of the html file for this lecture. 12 00:00:55,390 --> 00:00:58,240 So let's head over to our browser and our text editor. 13 00:00:58,240 --> 00:00:58,500 All right. 14 00:00:58,510 --> 00:01:00,360 Here you have an empty pie script. 15 00:01:00,370 --> 00:01:03,930 We're just going to continue getting practice for our usual imports and our usual setup. 16 00:01:04,150 --> 00:01:05,110 So I'll start from scratch. 17 00:01:05,110 --> 00:01:09,860 We're going to say from flask import flask. 18 00:01:09,970 --> 00:01:16,000 We're also going to be importing rendered template flash which we haven't done before and will say session 19 00:01:16,410 --> 00:01:19,800 redirects and let's say you are l4. 20 00:01:19,870 --> 00:01:23,820 So these are going to be the common imports that you do when actually get these all of them right now. 21 00:01:23,830 --> 00:01:31,120 But just once you get the feel for importing those things often don't say from flask WTA if we're going 22 00:01:31,120 --> 00:01:36,540 to import a flask form and then from W.T. farms import. 23 00:01:36,610 --> 00:01:41,600 And we're gonna have a string field and a submit field. 24 00:01:41,630 --> 00:01:41,820 All right. 25 00:01:41,820 --> 00:01:43,290 Those are all our imports. 26 00:01:43,290 --> 00:01:47,600 We set up our flask application like always passen name. 27 00:01:48,090 --> 00:01:51,810 And then because we actually have a form we need to configure our secret key. 28 00:01:52,020 --> 00:02:00,580 So we all say secret underscore key and then set it equal to some string will say Mikey and then we 29 00:02:00,580 --> 00:02:03,320 can say class and let's just create a very simple form. 30 00:02:03,340 --> 00:02:10,240 So we will call this class simple form and it will inherit from flask form. 31 00:02:10,360 --> 00:02:17,800 And here we're just going to have it say submit equal to submit field click me. 32 00:02:18,180 --> 00:02:20,960 So we're not even going to use a Streatfeild for this very first example. 33 00:02:20,960 --> 00:02:26,100 It's just essentially one button on this form and let's connect that now to the home page will say app 34 00:02:26,110 --> 00:02:29,200 thought route connected to the home page. 35 00:02:29,200 --> 00:02:36,580 Remember when we have a form on this page when you say methods is equal to the list gets and post and 36 00:02:36,580 --> 00:02:37,990 then we'll say index. 37 00:02:38,010 --> 00:02:39,110 Make sure you spell that right. 38 00:02:40,510 --> 00:02:45,690 We're going to create an instance of the form by saying Form is equal to simple form instance of it 39 00:02:46,480 --> 00:02:52,750 and then just like we've done before we'll say if form validate on. 40 00:02:53,140 --> 00:02:59,500 Well no wonder I'm not getting the complete form validate on submit. 41 00:02:59,590 --> 00:03:05,450 I'm going to now call flash and and then be able to flash a message to the user. 42 00:03:05,450 --> 00:03:12,470 So here I imported flash from flask and then I'm going to be able to flash a message to the user upon 43 00:03:12,470 --> 00:03:23,070 submission so we can say a flash and say you just click it's the button and then I'm going to say return 44 00:03:24,040 --> 00:03:33,880 and we're going to redirect your L4 index and then I'm going to have another return and we'll say render 45 00:03:33,880 --> 00:03:43,550 a template and we'll say index the H T.M. where form is the form. 46 00:03:43,710 --> 00:03:49,480 At the very bottom of all this will say if name is Eagleson mean take her app and run it. 47 00:03:50,370 --> 00:03:54,060 I'll say de-bug a sequel to true. 48 00:03:54,070 --> 00:03:56,590 All right so let's break down what we've done here. 49 00:03:56,620 --> 00:04:02,550 I set up my imports create an application set up my secret key have a very very simple form here. 50 00:04:02,560 --> 00:04:03,750 Basically it's just one button. 51 00:04:03,990 --> 00:04:08,680 That's all the user can do that can just hit click me and then all we do is inside of our home page 52 00:04:08,710 --> 00:04:09,720 called index. 53 00:04:09,790 --> 00:04:14,460 We create a simple form and at the very first pass they haven't actually click the button. 54 00:04:14,470 --> 00:04:17,040 Meaning this if statement hasn't executed yet. 55 00:04:17,290 --> 00:04:21,390 So we just render the template for the H T.M. which I have open right here. 56 00:04:21,400 --> 00:04:22,780 There's nothing in it yet. 57 00:04:22,870 --> 00:04:24,400 And then we pass in the form. 58 00:04:24,400 --> 00:04:26,050 Again that's just one button. 59 00:04:26,140 --> 00:04:28,660 Then if the form is valid on submission. 60 00:04:28,780 --> 00:04:32,640 Basically if they click the Submit field then will flash to the user. 61 00:04:32,740 --> 00:04:38,200 Hey you just click the button and then we're going to return a redirect your L for index which basically 62 00:04:38,200 --> 00:04:41,170 means we're going to serve that same home page again. 63 00:04:42,360 --> 00:04:45,340 So now it's actually set up our index h tim L to do this. 64 00:04:45,520 --> 00:04:48,260 Now for this we're going to use a little bit of bootstrap code. 65 00:04:48,430 --> 00:04:51,270 This is the kind of code that you look up in the documentation of bootstrap. 66 00:04:51,280 --> 00:04:57,020 Instead of having to memorize it let me show you where I can find this code on the bootstrap documentation. 67 00:04:57,140 --> 00:05:01,670 So I have here the bootstrap docs right now we're looking at the version for 4.1. 68 00:05:01,850 --> 00:05:04,370 We should be able to do this for the various versions. 69 00:05:04,370 --> 00:05:10,520 Go ahead and click on the documentation and then what you're looking for is a alert component. 70 00:05:10,520 --> 00:05:15,380 So if we come here to components it's actually the very first one is called alerts and then you see 71 00:05:15,380 --> 00:05:17,110 various examples of alerts. 72 00:05:17,300 --> 00:05:22,070 Here we can see some very simple alerts that essentially when someone said hello you can see the various 73 00:05:22,070 --> 00:05:24,740 colors and the classes that are associated with them. 74 00:05:24,740 --> 00:05:29,310 So we have class alert alert primary and you also say roll alert. 75 00:05:29,420 --> 00:05:31,430 You'll notice the links on these alerts. 76 00:05:31,430 --> 00:05:35,760 So here's a secondary alert link example. 77 00:05:35,820 --> 00:05:41,340 You also see additional content so you can kind of large alerts here and then you have one that's a 78 00:05:41,340 --> 00:05:43,410 little more complicated this dismissing. 79 00:05:43,440 --> 00:05:46,630 So that's the one we're going to be using and I'm going to zoom in here. 80 00:05:46,920 --> 00:05:50,050 So it says Holywell Kamali you should check in some of these fields below. 81 00:05:50,100 --> 00:05:51,890 So that's the alert we're going to kind of show. 82 00:05:51,960 --> 00:05:54,480 And what's also nice is it has a little dismiss button. 83 00:05:54,480 --> 00:05:59,030 So we're going to be able to exit out of this and then the alert goes away. 84 00:05:59,070 --> 00:06:01,670 And this is the code we're going to be using here. 85 00:06:01,710 --> 00:06:04,260 So in case you're wondering where the heck did this code come from. 86 00:06:04,260 --> 00:06:07,200 It's coming from this bootstrap page for this missing. 87 00:06:07,290 --> 00:06:11,940 And you can either copy it directly from the documentation here and then edit it or you can copy and 88 00:06:11,940 --> 00:06:14,010 paste it from are provided notes. 89 00:06:14,070 --> 00:06:15,660 So let's get started. 90 00:06:15,660 --> 00:06:21,810 Since we're using an alert we're going to need to connect not just the stylesheet for bootstrap But 91 00:06:21,810 --> 00:06:23,790 we also need connect to Jake Query. 92 00:06:23,970 --> 00:06:27,950 And again let me just bring in the documentation real quick second show where this coat's coming from. 93 00:06:28,050 --> 00:06:32,110 If you go back to home notice we have the CSSA only. 94 00:06:32,370 --> 00:06:35,670 That's just for the styling since we actually have interactivity on the page. 95 00:06:35,700 --> 00:06:38,580 We're going to need to copy and paste these three lines as well. 96 00:06:38,730 --> 00:06:42,650 You're going to put those all in the head of your T.M.. 97 00:06:42,700 --> 00:06:48,310 So go ahead and type out HTL led auto complete and then inside this head you're going to copy and paste 98 00:06:48,400 --> 00:06:49,990 those four lines of code. 99 00:06:50,020 --> 00:06:55,650 So from the documentation inside the head I'm going to copy and paste the stylesheet that's that C Ss 100 00:06:55,960 --> 00:06:58,590 and then the three source lines for Jake Query. 101 00:06:58,600 --> 00:06:59,630 So there's our head. 102 00:06:59,950 --> 00:07:02,000 And then we have the body. 103 00:07:02,020 --> 00:07:08,130 So what we're going to do now is essentially copy and paste from that bootstrap page that described 104 00:07:08,440 --> 00:07:11,760 how to actually display the flashed messages in order to do this. 105 00:07:11,760 --> 00:07:22,200 We're going to do is the following were to say a little bit of control flow logic for mess in get flashed 106 00:07:23,740 --> 00:07:33,970 messages and then here we're going to say and for me explain what this block of code is doing right 107 00:07:34,000 --> 00:07:37,830 now you maybe wondering where is this get flash messages come from. 108 00:07:37,840 --> 00:07:39,800 Because it's actually not in the bootstrap code. 109 00:07:39,850 --> 00:07:47,500 This get flashed messages is what gets passed back when you call flash function from flask. 110 00:07:47,500 --> 00:07:54,490 So again when you call flash that you import up here what happens is flask then automatically sends 111 00:07:54,490 --> 00:07:58,050 back this object called Get Flast messages. 112 00:07:58,270 --> 00:08:02,190 And the reason we do a for loop here is because you may have multiple flashes. 113 00:08:02,290 --> 00:08:03,610 You could do something like Flash. 114 00:08:03,610 --> 00:08:06,150 You click the button and then have another flash. 115 00:08:06,310 --> 00:08:08,160 Hey how is it going. 116 00:08:08,170 --> 00:08:09,370 And so on. 117 00:08:09,370 --> 00:08:11,350 So we'll just do one single flash right now. 118 00:08:11,470 --> 00:08:15,030 But it sends back an iterator of all these flashes. 119 00:08:15,220 --> 00:08:20,440 So that way you can actually loop through it and if you only have one you can still use this for mass 120 00:08:20,530 --> 00:08:22,100 and get flash messages. 121 00:08:22,210 --> 00:08:26,600 And then we're going to do is use that code from the bootstrap. 122 00:08:26,740 --> 00:08:30,390 I'm actually going to type it up manually so I can kind of explain what's going on. 123 00:08:30,460 --> 00:08:39,500 Essentially it's a giant class called for alert and we say alerts alert warning alert and then call 124 00:08:39,590 --> 00:08:41,210 alert dismissable. 125 00:08:41,930 --> 00:08:47,870 And that actually allows the user to close it and then we'll say fade and then show the also pretty 126 00:08:47,870 --> 00:08:51,210 much defines how it goes A-Whale slowly fade away. 127 00:08:51,230 --> 00:08:56,150 Again these are all class calls and the last thing I want to say is its role is an alert 128 00:08:58,990 --> 00:09:03,910 and then we're going to do is we're going to define it as a little button at the top which is going 129 00:09:03,910 --> 00:09:05,000 to look like an X. 130 00:09:05,140 --> 00:09:12,630 So we say type as Button will say the class of this is close which gives it that shape and then we have 131 00:09:12,630 --> 00:09:20,880 a couple more parameters here will say data dash dismiss is equal to alerts. 132 00:09:21,550 --> 00:09:23,760 And we actually don't need to provide a name for this button. 133 00:09:24,640 --> 00:09:28,380 Pups will delete both on invalid and name there. 134 00:09:28,510 --> 00:09:30,020 We have to dismiss alert. 135 00:09:30,490 --> 00:09:37,550 And then we have an aria label and set that equal to close. 136 00:09:37,760 --> 00:09:46,570 And then we can set the other class equal to fade fade space close 137 00:09:50,800 --> 00:09:55,330 and actually looks like I already have a class here so let me just delete this class. 138 00:09:56,200 --> 00:10:03,280 Let's let's make sure we don't delete that and the tide is going to add fade to the sky over here at 139 00:10:03,280 --> 00:10:07,960 the top you go fake close. 140 00:10:08,160 --> 00:10:08,880 OK. 141 00:10:08,880 --> 00:10:13,230 So again this is somebody just copied and pasted this section from that bootstrap documentation that 142 00:10:13,230 --> 00:10:14,220 we just showed. 143 00:10:14,220 --> 00:10:22,630 And then the last thing we're going to do is say Spanne inside this band will say aria that hidden we'll 144 00:10:22,630 --> 00:10:33,560 say true and then hear what we can do is the following will say ampersands times semi colon we and our 145 00:10:33,580 --> 00:10:43,020 button there and then we're going to insert mass as a variable and then say and for. 146 00:10:43,030 --> 00:10:48,510 OK so that's technically all the code we need for the splaying that flash and then right below it we're 147 00:10:48,520 --> 00:10:51,410 going to set up that form which is just a single button. 148 00:10:51,490 --> 00:10:55,620 So the form we don't need to worry about class or action because that's being taken care of by flask 149 00:10:55,630 --> 00:10:57,450 for us we'll say post. 150 00:10:57,580 --> 00:11:01,900 And just to make sure we don't get any errors we'll capitalize it and then we'll do the following we'll 151 00:11:01,900 --> 00:11:09,870 create our hidden tag we'll say form thought hidden underscore tag open close print princes and then 152 00:11:09,870 --> 00:11:14,630 we'll have that form that submit button OK. 153 00:11:14,700 --> 00:11:15,750 Save that. 154 00:11:15,750 --> 00:11:19,190 Now I know there's a lot of complicated bootstrap going on here. 155 00:11:19,230 --> 00:11:20,740 So I really want to clarify. 156 00:11:20,970 --> 00:11:22,640 I would never memorize all of this. 157 00:11:22,650 --> 00:11:27,160 I would just go to the documentation and copy and paste it and then adjust as needed. 158 00:11:27,180 --> 00:11:33,580 So keep in mind that's why you're seeing so many calls of like span's classes all this giant class. 159 00:11:33,630 --> 00:11:35,340 That's not the kind of stuff you need to memorize. 160 00:11:35,430 --> 00:11:40,920 Well you do need to memorize or essentially understand is that you call get Flast messages and then 161 00:11:40,920 --> 00:11:43,620 you can do something for that and you're inserting that mess. 162 00:11:43,620 --> 00:11:45,560 So let's break down let's actually happening here. 163 00:11:46,630 --> 00:11:47,930 We have a basic that pi. 164 00:11:48,160 --> 00:11:51,070 I create a very simple form of a submit button. 165 00:11:51,070 --> 00:11:54,910 If that form is valid upon clicking submit I call flash. 166 00:11:55,180 --> 00:11:58,790 You just click the button and then I redirect them to that same index page. 167 00:11:58,960 --> 00:12:05,950 Upon calling flash what happens is an object called Get Flast messages is now available for you in the 168 00:12:05,950 --> 00:12:06,900 template. 169 00:12:07,200 --> 00:12:08,610 And that happens automatically. 170 00:12:08,680 --> 00:12:10,500 You don't need to pass it in as a parameter. 171 00:12:10,660 --> 00:12:13,840 Then you save for every message and get Flast messages. 172 00:12:13,900 --> 00:12:16,840 And typically just one be you may have multiple flash alerts. 173 00:12:16,840 --> 00:12:21,070 You can then do something using bootstrap and then insert the message there. 174 00:12:21,070 --> 00:12:24,370 If you don't use this bootstrap then it's really not going to be dismissible. 175 00:12:24,370 --> 00:12:26,790 Instead you'll just see that message suddenly pop up. 176 00:12:26,800 --> 00:12:28,440 So it's a mess. 177 00:12:28,480 --> 00:12:28,960 OK. 178 00:12:28,960 --> 00:12:32,340 So again all this code that's essentially just the bootstrap link that I showed you there. 179 00:12:32,440 --> 00:12:34,240 And you can edit it as needed. 180 00:12:34,240 --> 00:12:36,710 So let's save this and make sure all worked out for us. 181 00:12:36,800 --> 00:12:38,320 Well say Python. 182 00:12:38,560 --> 00:12:40,400 Basic thought PI enter. 183 00:12:40,510 --> 00:12:41,300 It looks like it's running. 184 00:12:41,290 --> 00:12:44,030 Let's make sure we didn't accidentally have a typo anywhere. 185 00:12:44,080 --> 00:12:47,040 We'll visit the page and your page should look something like this. 186 00:12:47,050 --> 00:12:50,270 Just a simple click the button nose starts to look like bootstrap. 187 00:12:50,280 --> 00:12:53,310 They say click me and it says you just click the button. 188 00:12:53,320 --> 00:12:54,710 Now there's a little expert in there. 189 00:12:54,910 --> 00:12:56,520 I close it and it fades away. 190 00:12:56,830 --> 00:12:57,700 And I say click me. 191 00:12:57,700 --> 00:13:00,830 You just click the button close it and it fades away. 192 00:13:00,850 --> 00:13:01,320 All right. 193 00:13:01,450 --> 00:13:03,630 That's really the basics of using flash. 194 00:13:03,700 --> 00:13:10,680 And you can expand this example to then start flashing information to the user based off what they selected. 195 00:13:10,850 --> 00:13:13,480 And we're going to show you how to do that in the very next lecture. 196 00:13:13,550 --> 00:13:20,750 Essentially we're going to do is add a new field to this form maybe a selection breed and then save 197 00:13:20,750 --> 00:13:23,650 that to a session and report Black in a flash form. 198 00:13:23,690 --> 00:13:29,060 What they just chose will be a little code along project to end this section of course on fields and 199 00:13:29,060 --> 00:13:29,910 forms. 200 00:13:29,960 --> 00:13:34,790 The idea is you should have gone from the section or just how to create a form and then how to validate 201 00:13:34,790 --> 00:13:39,890 it on submission and then do something with that information such as flushing it saving it to the session 202 00:13:40,220 --> 00:13:42,070 and then redirecting to another page. 203 00:13:42,200 --> 00:13:45,040 That's really the main concept so we're trying to hit on in this section. 204 00:13:45,050 --> 00:13:47,850 This Flash is a kind of an extra little bonus on top of that. 205 00:13:48,020 --> 00:13:52,880 And then the bootstrap is just a nice way to format those flashed messages you technically don't need 206 00:13:52,880 --> 00:13:53,970 to do that. 207 00:13:54,050 --> 00:13:54,500 All right. 208 00:13:54,620 --> 00:13:58,830 Let's finish up the section of the course by going to the next lecture and doing a little code along 209 00:13:58,850 --> 00:14:01,350 project to kind of finish and wrap everything up. 210 00:14:01,550 --> 00:14:02,060 We'll see it there.