NOTE This file was generated by Descript 1 00:00:00,181 --> 00:00:01,620 Hi guys and welcome back. 2 00:00:01,650 --> 00:00:05,130 In this video, let's learn about Jinja2 expressions. 3 00:00:05,371 --> 00:00:09,241 We'll also learn about the term expression as a whole, so let's get to it. 4 00:00:09,464 --> 00:00:14,024 A Python expression is any piece of code that evaluates down to a single value. 5 00:00:14,594 --> 00:00:17,594 For example, if you do five plus five, Python is going to take that 6 00:00:17,594 --> 00:00:19,364 and is going to evaluate it to 10. 7 00:00:19,622 --> 00:00:22,993 So whenever Python sees this term here, five plus five is going 8 00:00:22,993 --> 00:00:24,733 to give you 10 automatically. 9 00:00:24,913 --> 00:00:27,103 So we say that five plus five is an expression. 10 00:00:27,603 --> 00:00:32,406 In Jinja2, we can also use expressions and we're going to see how that works. 11 00:00:32,906 --> 00:00:35,756 You can do things like addition, subtraction and string 12 00:00:35,786 --> 00:00:38,276 concatenation with Jinja2 templates. 13 00:00:38,276 --> 00:00:41,546 So here I've got the expressions.html template. 14 00:00:41,846 --> 00:00:44,156 And I'm going to leave this linked in the resources section of this lecture. 15 00:00:44,156 --> 00:00:45,446 So you can download it and have a look at it. 16 00:00:45,970 --> 00:00:50,080 But what you're going to see in this template is that you can do 17 00:00:50,110 --> 00:00:54,670 interpolation as we've already seen and that is a type of Jinja2 expression. 18 00:00:55,170 --> 00:01:00,450 By typing this here, Jinja2 is going to evaluate that into the value 19 00:01:00,450 --> 00:01:02,100 of the variable that we pass in. 20 00:01:02,633 --> 00:01:05,693 So we're going to get whatever value that we pass in here. 21 00:01:06,293 --> 00:01:10,403 This is known as an interpolation expression because it interpolates 22 00:01:10,403 --> 00:01:12,953 the value in there and you get a different value back. 23 00:01:13,453 --> 00:01:15,463 We've got another example of interpolation here. 24 00:01:15,523 --> 00:01:20,023 Alice bought whatever amount of oranges and apples, and you can see that there are 25 00:01:20,023 --> 00:01:22,213 two interpolation expressions in there. 26 00:01:22,963 --> 00:01:26,003 But you can also do addition in Jinja2. 27 00:01:26,023 --> 00:01:31,153 So here, if orange amount and apple amount are integers or numbers, 28 00:01:31,513 --> 00:01:34,473 we're going to add them together, and we're going to interpolate to 29 00:01:34,483 --> 00:01:36,943 the result into this paragraph. 30 00:01:37,263 --> 00:01:39,693 So here are two types of expressions are happening. 31 00:01:39,873 --> 00:01:43,053 The addition expression and the interpolation expression. 32 00:01:43,553 --> 00:01:45,533 As well as addition, you can do subtraction and 33 00:01:45,533 --> 00:01:46,853 that's totally fine as well. 34 00:01:46,853 --> 00:01:48,863 And it follows the normal rules of math. 35 00:01:49,403 --> 00:01:52,813 What you can also do with Jinja2 is you can concatenate strings. 36 00:01:52,843 --> 00:01:53,713 Like we see here. 37 00:01:53,743 --> 00:01:59,143 We've added first name to the empty space and then we've added that to last name. 38 00:01:59,393 --> 00:02:03,833 This is just an example to show you that you can concatenate strings if you want. 39 00:02:03,953 --> 00:02:06,593 But obviously it would be better to just have two 40 00:02:06,593 --> 00:02:08,843 interpolation expressions in here. 41 00:02:09,413 --> 00:02:10,403 Just like that. 42 00:02:10,493 --> 00:02:12,053 And have the space in the middle. 43 00:02:12,203 --> 00:02:13,233 That's a bit clearer. 44 00:02:13,353 --> 00:02:17,763 So this is another alternative, but you can concatenate strings if you want to. 45 00:02:18,013 --> 00:02:21,343 Let's take this and actually evaluate the expressions and render 46 00:02:21,343 --> 00:02:22,723 the template and see what happens. 47 00:02:22,753 --> 00:02:24,583 So we've got app.route here. 48 00:02:24,643 --> 00:02:27,343 What we're going to do is call it expressions. 49 00:02:27,373 --> 00:02:28,303 Just like that. 50 00:02:28,743 --> 00:02:31,743 And you can put this forward slash at the end, or you can take it out. 51 00:02:31,743 --> 00:02:32,403 It's up to you. 52 00:02:32,853 --> 00:02:36,663 The forward slash at the end is a convention really in 53 00:02:36,663 --> 00:02:37,833 web application development. 54 00:02:38,043 --> 00:02:42,003 And it's pretty common to access end points of an application with 55 00:02:42,003 --> 00:02:43,323 the forward slash at the end. 56 00:02:43,820 --> 00:02:47,270 If you put the forward slash at the end, then you can access the 57 00:02:47,270 --> 00:02:51,530 endpoint with the forward slash or without it and Flask will not care. 58 00:02:51,950 --> 00:02:56,240 But if you don't put it in, then you can only access it without the forward 59 00:02:56,240 --> 00:02:57,770 slash so it's a bit more limiting. 60 00:02:58,265 --> 00:03:00,245 So normally we will put the forward slashing at the end. 61 00:03:00,455 --> 00:03:02,225 Anyway, that's just a side note there. 62 00:03:02,585 --> 00:03:05,415 We're going to do the interpolation, addition and subtraction 63 00:03:05,435 --> 00:03:06,425 and string concatenation. 64 00:03:06,425 --> 00:03:11,675 So I'm going to define some variables that we were using earlier on in the templates. 65 00:03:11,705 --> 00:03:14,975 You can see we've got these colors and animals and apple amount and donate 66 00:03:14,975 --> 00:03:17,195 amount, and the first name and last name. 67 00:03:17,695 --> 00:03:22,575 So now we want to render it the template, and here comes the instructive moment. 68 00:03:22,575 --> 00:03:22,965 I hope. 69 00:03:23,175 --> 00:03:28,575 We've got expressions.html and now, you know that we have to pass in 70 00:03:28,815 --> 00:03:33,285 all the names that we want to use in the template and the values that 71 00:03:33,285 --> 00:03:34,905 are associated with those names. 72 00:03:34,905 --> 00:03:36,885 We can start with something like this. 73 00:03:37,128 --> 00:03:39,738 We can grab the first name in here which is colour. 74 00:03:40,256 --> 00:03:43,046 And you can see I've already defined a variable called colour in here 75 00:03:43,256 --> 00:03:46,316 so you can do color equal brown. 76 00:03:46,586 --> 00:03:48,610 This is the first example that I'm going to show you. 77 00:03:48,850 --> 00:03:53,950 What this does is it tells Jinja2 the colour variable in your template, 78 00:03:54,700 --> 00:03:57,370 use the string brown for it. 79 00:03:57,613 --> 00:04:01,663 When this runs Jinja2 would grab colour and we'll say, okay, where 80 00:04:01,663 --> 00:04:02,773 does color in this template? 81 00:04:02,803 --> 00:04:03,583 Oh, it's right here. 82 00:04:03,823 --> 00:04:06,283 So I'm going to put brown there. 83 00:04:06,313 --> 00:04:09,883 I'm going to interpolate brown into this phrase. 84 00:04:10,383 --> 00:04:11,193 We've done this before. 85 00:04:11,193 --> 00:04:12,213 You already know how this goes. 86 00:04:12,543 --> 00:04:17,253 The important part of this part of the code here, is that this bit here, 87 00:04:17,763 --> 00:04:19,593 has nothing to do with this bit there. 88 00:04:20,163 --> 00:04:20,463 Okay. 89 00:04:20,463 --> 00:04:21,753 It looks identical. 90 00:04:21,843 --> 00:04:24,543 It looks very similar, but it really nothing to do. 91 00:04:24,543 --> 00:04:24,753 Okay. 92 00:04:24,753 --> 00:04:27,153 We can delete this and that will still work fine. 93 00:04:27,590 --> 00:04:28,130 Why is that? 94 00:04:28,370 --> 00:04:29,960 Because here we're defining a variable. 95 00:04:30,140 --> 00:04:34,800 Here, we're passing a keyword argument to the render template function, which Jinja2 96 00:04:34,820 --> 00:04:36,830 is then going to use to interpolate. 97 00:04:37,070 --> 00:04:38,630 So these two are completely unrelated. 98 00:04:38,900 --> 00:04:44,060 What we can do though, is we can say instead of the brown string, use the 99 00:04:44,060 --> 00:04:45,950 variable we've already defined earlier on. 100 00:04:46,100 --> 00:04:47,930 So we can say color equal color. 101 00:04:48,430 --> 00:04:51,190 Now, this looks confusing and I know a lot of my students usually 102 00:04:51,190 --> 00:04:55,150 get confused by this, but it's a really common way of doing things. 103 00:04:55,601 --> 00:04:58,271 You define your variables with the best name that you can come up with. 104 00:04:58,601 --> 00:05:01,991 And usually the best name you can come up with is also the relevant name in 105 00:05:01,991 --> 00:05:03,701 your template so you use the same one. 106 00:05:04,031 --> 00:05:07,161 And then when you want to pass a value in, you end up doing color equal color. 107 00:05:07,678 --> 00:05:08,548 This is totally fine. 108 00:05:08,848 --> 00:05:12,168 What this means is passing the color key word argument and the value 109 00:05:12,168 --> 00:05:15,648 of that keyword argument is the color variable that exists here. 110 00:05:15,623 --> 00:05:16,313 Totally acceptable. 111 00:05:16,496 --> 00:05:18,296 Just get accustomed to seeing this sort of stuff. 112 00:05:18,296 --> 00:05:20,246 I know it's confusing, but that's just how it goes. 113 00:05:20,746 --> 00:05:24,466 Then we would do the same for every other variable animal_one equal 114 00:05:24,466 --> 00:05:27,796 animal_one, animal_two equal animal_two. 115 00:05:28,036 --> 00:05:31,186 Remembering that these here are going to the template. 116 00:05:32,041 --> 00:05:34,471 And these here are the values of our variables. 117 00:05:35,011 --> 00:05:38,521 So obviously we've got a large amount of things that we want to 118 00:05:38,521 --> 00:05:39,871 interpolate into the template. 119 00:05:39,961 --> 00:05:43,081 This is probably going to take a while to type out. 120 00:05:43,171 --> 00:05:45,031 And later on, if we want to change our template, we're going to have 121 00:05:45,031 --> 00:05:46,291 to come back here, change things. 122 00:05:46,511 --> 00:05:48,221 If we want to change the variable names, we're going to have to come 123 00:05:48,221 --> 00:05:49,661 down here and change everything. 124 00:05:49,931 --> 00:05:53,501 And because this is in a function call, it just makes it a little bit more 125 00:05:53,501 --> 00:05:55,061 confusing than it probably has to be. 126 00:05:55,599 --> 00:05:59,229 So instead, what we often do is when we have to pass a large amount of 127 00:05:59,229 --> 00:06:03,279 keyword arguments to a function, we group them as a dictionary. 128 00:06:03,489 --> 00:06:08,319 So I'm going to say kwargs equal and I'm going to create a dictionary of keyword 129 00:06:08,319 --> 00:06:12,609 arguments, where the keys are going to be the variables that we're going to 130 00:06:12,609 --> 00:06:18,778 pass to Jinja2 and the values are the values that we've got here in our code. 131 00:06:19,268 --> 00:06:20,808 So this is going to Jinja2. 132 00:06:21,128 --> 00:06:23,468 This is from our values. 133 00:06:23,944 --> 00:06:26,944 And we do that for every variable in our code. 134 00:06:27,444 --> 00:06:30,384 So fortunately I can cheat and I can just edit the video and it'll 135 00:06:30,384 --> 00:06:33,264 appear immediately for you, but you're going to have to type it out. 136 00:06:33,294 --> 00:06:34,824 And that's going to take a little while. 137 00:06:35,034 --> 00:06:39,834 But later on, when we start working with user data and users are working with these 138 00:06:39,834 --> 00:06:43,224 dictionaries, it's going to be much easier for us to use dictionaries rather than 139 00:06:43,224 --> 00:06:44,874 to have to type everything out ourselves. 140 00:06:44,994 --> 00:06:50,154 Trust me, it gets better if we use this sort of notation rather than this one. 141 00:06:50,654 --> 00:06:54,224 So, how do we pass in all of these variables as keyword 142 00:06:54,224 --> 00:06:55,844 arguments to the function call. 143 00:06:56,114 --> 00:06:58,164 Well we use the double star notion there. 144 00:06:59,827 --> 00:07:05,097 Double star kwargs is going to send these keyword arguments as colour 145 00:07:05,137 --> 00:07:08,437 equal colour, animal_one equal animal_one, animal_two equal animal_two. 146 00:07:08,657 --> 00:07:13,127 This is just the Python notation to double star dictionary that does that for us. 147 00:07:13,427 --> 00:07:15,797 Also something else you might notice here as I've left this hanging 148 00:07:15,797 --> 00:07:17,087 comment at the end of my dictionary. 149 00:07:17,147 --> 00:07:18,197 You can take it out if you want. 150 00:07:18,407 --> 00:07:19,307 I normally take it out. 151 00:07:19,427 --> 00:07:21,257 But it's okay if you want to leave it in there. 152 00:07:21,297 --> 00:07:22,607 It doesn't affect Python at all. 153 00:07:22,907 --> 00:07:23,357 All right. 154 00:07:23,387 --> 00:07:26,417 Let's restart our app and see what happens. 155 00:07:26,917 --> 00:07:30,927 Now you can see that my forward slash end point doesn't exist anymore. 156 00:07:30,957 --> 00:07:34,737 We have to go to slash expressions to access it. 157 00:07:34,947 --> 00:07:38,447 Notice that as soon as I access slash expressions, Flask redirected 158 00:07:38,447 --> 00:07:40,907 me to slash expressions slash. 159 00:07:41,177 --> 00:07:43,367 That's because we included this forward slash at the end. 160 00:07:43,577 --> 00:07:47,147 We can access this with or without the forward slash and Flask doesn't care. 161 00:07:47,637 --> 00:07:50,847 But it does redirect you to the forward slash version. 162 00:07:51,257 --> 00:07:53,747 Then we've got all our things interpolated. 163 00:07:53,927 --> 00:07:56,057 A quick brown fox jumps over the lazy dog. 164 00:07:56,041 --> 00:07:57,491 Then we've got the addition and subtraction. 165 00:07:57,511 --> 00:07:58,861 You can see that works. 166 00:07:58,981 --> 00:08:03,741 And we can see that the Captain Marvel there interpretation also worked. 167 00:08:04,124 --> 00:08:07,334 I did change this into the better version I think, but we're going 168 00:08:07,334 --> 00:08:10,724 to change it back, just so you guys can see that this does work. 169 00:08:11,004 --> 00:08:13,764 I'll restart the application and you can see that nothing 170 00:08:13,764 --> 00:08:15,174 changes when we refresh the page. 171 00:08:15,627 --> 00:08:15,867 All right. 172 00:08:15,897 --> 00:08:17,037 That's everything for this video. 173 00:08:17,037 --> 00:08:20,247 I hope you have enjoyed it and I will see you in the next one.