1 00:00:05,540 --> 00:00:06,570 Welcome back. 2 00:00:06,650 --> 00:00:12,470 We just saw how we can connect our template to our flask Python script through the use of ginger templating 3 00:00:12,740 --> 00:00:18,150 by actually inserting those Python variables into our HTL. 4 00:00:18,300 --> 00:00:23,130 Now it's a template in the way we actually passed in those variables was using that double set of curly 5 00:00:23,130 --> 00:00:24,220 braces syntax. 6 00:00:24,360 --> 00:00:28,250 Read then just put the variable name inside of those double braces. 7 00:00:28,260 --> 00:00:32,970 We also have access to is control flow syntax in our templates and those can be things. 8 00:00:32,980 --> 00:00:38,390 So just for loops and if statements that actually take place in the template that is the same file. 9 00:00:38,450 --> 00:00:42,780 And for those sort of more control flow like statements that are not just variables you use a slightly 10 00:00:42,780 --> 00:00:43,750 different syntax. 11 00:00:43,770 --> 00:00:44,770 It's a curly brace. 12 00:00:44,910 --> 00:00:47,470 And then percent signs. 13 00:00:47,700 --> 00:00:50,640 Let's quickly explain things samples so it's a little more clear. 14 00:00:50,760 --> 00:00:55,800 Let's imagine that you passed an A list variable to the H team l using template variables like we just 15 00:00:55,800 --> 00:00:57,510 did in the previous lecture. 16 00:00:57,510 --> 00:01:03,390 So far we've just displayed the entire list including the commas and those square braces instead of 17 00:01:03,390 --> 00:01:05,010 displaying that entire list at once. 18 00:01:05,090 --> 00:01:11,040 We can actually do is use our knowledge table to display each item in the Python list as a bulleted 19 00:01:11,100 --> 00:01:16,590 HVM elist and the code to do that on the template side would look something like this. 20 00:01:16,800 --> 00:01:19,140 Let's walk through each of these major components. 21 00:01:19,810 --> 00:01:21,240 First notice what we're doing here. 22 00:01:21,280 --> 00:01:25,720 H T.M. we're creating an unordered list isn't that you Eltang. 23 00:01:25,890 --> 00:01:29,330 And then we have an el Itek for an actual list item. 24 00:01:29,430 --> 00:01:34,110 And what we're doing here is we're combining both the template variable syntax and the template control 25 00:01:34,110 --> 00:01:35,720 flow syntax. 26 00:01:35,910 --> 00:01:41,710 So we have a for loop at the very top and what we're doing is in the flask app that PI script or that 27 00:01:41,710 --> 00:01:49,000 view function is where passing my list variable to the actual html template and then inside of the template 28 00:01:49,300 --> 00:01:54,580 we get to create a for loop and we say for item in my list which is essentially saying for every variable 29 00:01:54,810 --> 00:02:02,530 in that my list object passed into the HTL template then you get to make a list or NHT item point with 30 00:02:02,530 --> 00:02:04,150 the item. 31 00:02:04,230 --> 00:02:08,640 And so that's what this connection is for every item or variable and you could actually choose the name 32 00:02:08,640 --> 00:02:12,860 of that variable in my list then make a bulleted point in each T.M.. 33 00:02:13,080 --> 00:02:17,520 Notice that we also have to do here we have to say and for which we didn't have to do a python. 34 00:02:17,640 --> 00:02:24,380 But in this case we do have to do this with the template control flow syntax and also keep in mind the 35 00:02:24,380 --> 00:02:29,740 differences between the actual syntax for a variable in your templates versus control flow logic and 36 00:02:29,740 --> 00:02:32,490 your templates for the control flow logic statements. 37 00:02:32,570 --> 00:02:37,770 We see that it's a Crilley brace of a percent sign for the variables we see it's two sets of curly braces 38 00:02:39,040 --> 00:02:41,250 OK let's play around this with some more examples. 39 00:02:41,270 --> 00:02:44,230 And I think this will begin to make the idea more clear to you. 40 00:02:44,260 --> 00:02:48,820 Let's hop over toward a text editor a here am my text editor. 41 00:02:48,940 --> 00:02:54,140 So far I just have a very basic Flash application connected to a very basic h m l file. 42 00:02:54,340 --> 00:02:58,840 I've said from class import flask and run the template I set up my flask application. 43 00:02:58,840 --> 00:03:04,480 I have my index or home page just saying Return basic HTL and then I run in debug mode. 44 00:03:04,480 --> 00:03:08,520 If we take a look at this basic 30 S.M. underneath a folder called templates. 45 00:03:08,560 --> 00:03:13,660 I had this HDMI file and all it really is if you ignore what's in the head here it's just a head or 46 00:03:13,660 --> 00:03:15,100 one that says Web site. 47 00:03:15,370 --> 00:03:19,080 Let's run this and make sure we see web site when we get this. 48 00:03:19,080 --> 00:03:21,070 So we'll say Python is up PI. 49 00:03:21,070 --> 00:03:22,060 Let me expand this a little bit. 50 00:03:22,060 --> 00:03:23,110 Looks like it's running. 51 00:03:23,130 --> 00:03:28,540 Let me bring that over and all you should see is this Web site in your actual browser. 52 00:03:28,630 --> 00:03:34,630 What I'm going to do now is start by sending over a template variable into my web page what I will do 53 00:03:34,630 --> 00:03:40,180 here is create a list so say my list is equal to. 54 00:03:40,210 --> 00:03:46,390 And here we're going say one two three four or five then I'm going to save that and then I will pass 55 00:03:46,390 --> 00:03:51,030 in a variable called my list and said equal to my list. 56 00:03:51,050 --> 00:03:55,300 So I have this parameter my list and getting equal to my list over here. 57 00:03:55,400 --> 00:04:00,520 And this is what you're going to do most often set this variable name same as parameter name. 58 00:04:00,740 --> 00:04:08,190 Then back in our html file We're going to say instead of web site since we're dealing with a variable 59 00:04:08,520 --> 00:04:12,910 we set two sets of curly braces there and then I pass in my list. 60 00:04:13,080 --> 00:04:16,590 So this my list needs to match the parameter. 61 00:04:16,590 --> 00:04:20,370 OK so I'm going say this and then let's go back to each HTML file. 62 00:04:20,550 --> 00:04:21,730 Or excuse me our browser. 63 00:04:21,810 --> 00:04:24,810 Once you refresh this you'd say you should see the entire list here. 64 00:04:24,810 --> 00:04:26,250 One two three four five. 65 00:04:26,280 --> 00:04:29,940 So this is returning that entire Python variable which is a python list. 66 00:04:29,970 --> 00:04:33,630 So you see that square bracket and then the commas themselves. 67 00:04:33,720 --> 00:04:39,360 What I want to do is take advantage of control flow to actually use HTL in combination with this python 68 00:04:39,360 --> 00:04:41,260 variable that I'm sending over to the template. 69 00:04:41,520 --> 00:04:43,710 So what it will do is the following. 70 00:04:43,760 --> 00:04:46,780 I actually don't need to change anything in my py file. 71 00:04:46,980 --> 00:04:50,260 Instead I want I'm going to do is come back to basic values T.M.. 72 00:04:50,820 --> 00:04:53,740 And here is where I'm going to introduce some control flow. 73 00:04:53,970 --> 00:04:55,320 So let's delete this right now. 74 00:04:55,430 --> 00:04:59,070 I have an empty body and I will do is the following. 75 00:04:59,100 --> 00:05:04,730 I'm going to create an unordered list and then I will create 4. 76 00:05:04,830 --> 00:05:10,230 And if you've downloaded that flask add on or plugin you should be able to say for and it will automatically 77 00:05:10,230 --> 00:05:13,730 create something that looks like this for you for element in collection. 78 00:05:13,860 --> 00:05:17,710 Right now I'm just going to manually type this out just so we can see it clearly. 79 00:05:18,650 --> 00:05:26,600 I'm going to set my curly braces and then two sets percent science and say for item in my list. 80 00:05:28,260 --> 00:05:30,750 I'm going to create a list item here. 81 00:05:32,250 --> 00:05:37,730 And that's a variable Selsey item and then with every four you need to also say and for. 82 00:05:37,820 --> 00:05:42,900 So that's what makes it a little different than just normal Python to declare and for. 83 00:05:42,980 --> 00:05:48,170 So what I'm going to say here is for every item in my list object that I send back member that my list 84 00:05:48,170 --> 00:05:54,200 object that's 1 2 3 4 5 then I'm going to make that into an HMO list in an unordered list. 85 00:05:54,260 --> 00:05:58,600 So if I save this and then refresh my page and I bring it over. 86 00:05:58,710 --> 00:06:00,730 Now you should see something that looks like this. 87 00:06:00,800 --> 00:06:02,290 And look at them side by side. 88 00:06:02,450 --> 00:06:08,750 I'm saying for every item in my list go ahead and create a new list item inside of the HTL an ordered 89 00:06:08,750 --> 00:06:11,080 list and then end the for loop. 90 00:06:11,090 --> 00:06:16,590 Notice also where I am ending the for loop and then the for loop inside of this an ordered list. 91 00:06:16,640 --> 00:06:20,630 And in fact all of the control flow is going inside of this unordered list. 92 00:06:20,630 --> 00:06:25,220 I want to make sure that because I don't want to terminate the unordered list before I'm done with my 93 00:06:25,220 --> 00:06:31,220 for loop I also want to point out that technically this variable name of item that can be whatever you 94 00:06:31,220 --> 00:06:33,280 want just like a normal Python for loop. 95 00:06:33,290 --> 00:06:36,090 So I could say something like jelly. 96 00:06:36,380 --> 00:06:40,060 So for jelly in my list say jelly. 97 00:06:40,160 --> 00:06:43,320 Save that and that will give you the exact same result as before. 98 00:06:43,370 --> 00:06:48,320 Usually what you want to do is choose a variable name that actually makes sense maybe number because 99 00:06:48,350 --> 00:06:50,520 I had numbers on my list. 100 00:06:50,740 --> 00:06:55,750 So it's a number in my list go ahead and create a list item of a number. 101 00:06:55,750 --> 00:06:56,350 All right. 102 00:06:56,590 --> 00:07:00,190 So we're going to do now is show you how you can add an if statement to this. 103 00:07:00,280 --> 00:07:01,740 We'll go ahead and keep right now. 104 00:07:01,900 --> 00:07:07,510 Just a basic list that we're sending back but let's make it a little more realistic. 105 00:07:07,750 --> 00:07:17,870 We'll say puppies and let's create a list of puppy names I'll say fluffy capital F Rufus of capital 106 00:07:17,920 --> 00:07:21,230 R and then Spike capital S. 107 00:07:21,350 --> 00:07:22,980 So I'm going to send back puppies. 108 00:07:22,980 --> 00:07:28,160 So we'll say puppies is equal to puppies. 109 00:07:28,200 --> 00:07:29,290 Save that. 110 00:07:29,370 --> 00:07:31,240 Come back to the basic h T.M.. 111 00:07:31,320 --> 00:07:35,540 And since my list doesn't exist anymore we'll do the following. 112 00:07:35,550 --> 00:07:41,680 We'll say for let's say pup in puppies. 113 00:07:42,610 --> 00:07:47,760 Make a list item pup and then I'm going to save that. 114 00:07:48,100 --> 00:07:50,560 Then we'll refresh my browser. 115 00:07:50,920 --> 00:07:54,760 Bring it back over and I could see Fluffy Rufus and Spike. 116 00:07:54,850 --> 00:07:57,980 So I have all the names of my actual puppies. 117 00:07:58,060 --> 00:08:02,380 Now I'll show you how you can use an if statement through template control flow. 118 00:08:02,530 --> 00:08:08,050 What I will do is now outside of an ordered list I'm going to introduce a little bit of logic. 119 00:08:08,110 --> 00:08:09,010 We're going to say 120 00:08:13,090 --> 00:08:17,330 the string Rufus is and puppies. 121 00:08:19,400 --> 00:08:29,510 All creates a paragraph element say songy rufous and notice here. 122 00:08:29,540 --> 00:08:32,060 Specifically saying string in the puppy's list. 123 00:08:32,060 --> 00:08:33,960 So this is much more pythonic. 124 00:08:34,820 --> 00:08:39,120 And then I can also have an L statement which is just. 125 00:08:39,120 --> 00:08:39,600 Else 126 00:08:42,380 --> 00:08:43,130 then I'll say 127 00:08:45,750 --> 00:08:48,700 rufous is not in this list. 128 00:08:50,060 --> 00:08:57,570 And then just like we had to say and for we need to say and if so I'll say and if. 129 00:08:57,570 --> 00:09:03,630 All right so notice the logic we have here was saying if rufous in that puppy's list say we found rufous 130 00:09:04,050 --> 00:09:08,510 else we're going to have this HTL paragraph that roof Rufus not on this list. 131 00:09:08,540 --> 00:09:14,550 And when I save this I should expect to see found your rufous because Rufus was in that list of puppy 132 00:09:14,640 --> 00:09:15,350 names. 133 00:09:15,390 --> 00:09:16,720 So going to bring back my browser. 134 00:09:16,740 --> 00:09:17,750 Let me refresh it. 135 00:09:18,240 --> 00:09:20,240 And then it says found you rufous. 136 00:09:20,280 --> 00:09:20,780 OK. 137 00:09:20,880 --> 00:09:25,940 So that's an example of an IF statement that's also taking into account that list variable that you 138 00:09:25,950 --> 00:09:27,080 passed in. 139 00:09:27,090 --> 00:09:29,490 So when will this be useful in real life. 140 00:09:29,520 --> 00:09:31,440 Well let's show you a really common example. 141 00:09:31,440 --> 00:09:37,070 When we come back to my flat out pi application and let's imagine there's a bunch of code that at the 142 00:09:37,070 --> 00:09:40,430 end of all this we have something like user 143 00:09:43,060 --> 00:09:50,050 logged in and we're going to set the sequel to true because somewhere in our code let's imagine we have 144 00:09:50,110 --> 00:09:51,390 lots of code here. 145 00:09:51,820 --> 00:09:54,430 Then we decided that the user was logged into the Web site. 146 00:09:54,430 --> 00:09:55,670 So he said true. 147 00:09:55,720 --> 00:09:59,280 So we can actually pass that in as a variable. 148 00:09:59,300 --> 00:10:05,440 So say user logged in is equal to user log then save that and then back to each HTML file. 149 00:10:05,440 --> 00:10:09,280 Let's go ahead and see all this in the body and do the following. 150 00:10:09,370 --> 00:10:14,980 And this is a really common and really realistic showing of what you would use the sexual template control 151 00:10:14,980 --> 00:10:20,010 flow will say if UPS suits me. 152 00:10:23,890 --> 00:10:33,570 If user logged in Notice I'm not saying if user logged in equal to true because he's reluctant or expected 153 00:10:33,580 --> 00:10:41,390 to be able insole say if this is true then I will say welcome back. 154 00:10:41,440 --> 00:10:49,900 You are now locked in else that means that person's not logged in. 155 00:10:49,990 --> 00:10:54,340 So I'll say something like Please log in. 156 00:10:54,430 --> 00:10:58,180 So this is a very realistic example of the kind of logic you're going to be using with your template 157 00:10:58,180 --> 00:10:59,180 flow thing. 158 00:10:59,180 --> 00:11:02,900 Always remember if you're using control flow logic you need to end it. 159 00:11:03,220 --> 00:11:09,370 So the last thing you need to put in here is and if it's always easy to forget these and ifs and fours 160 00:11:09,430 --> 00:11:13,840 because we're used to Python where we don't have to do it when you come back to Jinja templating you 161 00:11:13,840 --> 00:11:15,410 do have to say and if in and for. 162 00:11:15,430 --> 00:11:16,510 Just keep that in mind. 163 00:11:16,510 --> 00:11:20,950 It's also really easy to forget to save things that happens to me often I'll forget to hit save and 164 00:11:20,950 --> 00:11:24,930 then I go to my browser and I'm wondering why is this not updating because everything is correct here. 165 00:11:24,940 --> 00:11:28,850 So if ever in doubt just do a quick command or control ask to save it. 166 00:11:29,320 --> 00:11:33,040 Let's come back to our Web site so kind of back to our Web site. 167 00:11:33,070 --> 00:11:34,270 It should say welcome back. 168 00:11:34,270 --> 00:11:39,820 You are now logged in because remember we sent over on our Alaska application user log in is equal to 169 00:11:39,820 --> 00:11:40,660 true. 170 00:11:40,690 --> 00:11:49,920 Let's not set this to false and then say this again and now refresh the page it says Please log in. 171 00:11:50,320 --> 00:11:53,200 All right that's the very basics of using template control flow. 172 00:11:53,200 --> 00:11:57,080 The main thing to remember is you have the ability to create a for loop and you have the ability to 173 00:11:57,070 --> 00:12:01,510 do if statements and there's more complex it's happening that we're going to see later on. 174 00:12:01,510 --> 00:12:05,670 There's also things like Aliff statements just like in normal Python. 175 00:12:05,860 --> 00:12:13,120 So we can say something like Elif and maybe some other condition that we pasan and so on we can have 176 00:12:13,150 --> 00:12:14,620 more templates and more stuff. 177 00:12:14,620 --> 00:12:20,050 So we'll say something like paragraph use case number two or whatever. 178 00:12:20,050 --> 00:12:20,390 All right. 179 00:12:20,440 --> 00:12:21,870 So that's really all there is to it. 180 00:12:21,880 --> 00:12:26,800 You have this control flow logic for loops and if statements later on we'll see some more examples of 181 00:12:26,800 --> 00:12:27,120 this. 182 00:12:27,130 --> 00:12:31,870 But right now you should not feel comfortable being able to pasan not just a template variable but also 183 00:12:31,870 --> 00:12:35,220 then using basic control flow logic in your templates. 184 00:12:35,230 --> 00:12:38,610 We'll see what the next lecture where we continue our discussion on templates with flask.