NOTE This file was generated by Descript 1 00:00:00,143 --> 00:00:01,613 Hi guys and welcome back. 2 00:00:01,643 --> 00:00:04,133 In this video, we're going to learn about conditional 3 00:00:04,133 --> 00:00:05,933 statements in Jinja2 templates. 4 00:00:05,933 --> 00:00:10,103 So how can we put some things in an HTML template or something 5 00:00:10,103 --> 00:00:12,173 else, depending on a Boolean. 6 00:00:12,533 --> 00:00:15,593 These look very similar to Python's conditionals, so I'm sure you'll 7 00:00:15,593 --> 00:00:17,363 have no trouble with them at all. 8 00:00:17,573 --> 00:00:18,443 Let's get started. 9 00:00:19,546 --> 00:00:23,016 Let's say that we've got an HTML file that looks like this. 10 00:00:23,076 --> 00:00:26,925 We've got title, conditionals in Jinja2, basic comparisons, and then 11 00:00:26,925 --> 00:00:28,905 we've got Available Apple products. 12 00:00:28,935 --> 00:00:31,935 So in this example, we've got this company, Apple, and we've got a 13 00:00:31,935 --> 00:00:33,315 list of some of their products. 14 00:00:33,735 --> 00:00:38,505 Now, let's say that we also want to show available Microsoft products. 15 00:00:38,565 --> 00:00:42,075 So we're going to have essentially the exact same thing, but instead of 16 00:00:42,075 --> 00:00:43,695 Apple, we're going to have Microsoft. 17 00:00:44,505 --> 00:00:47,145 And instead of these three products, we're going to have 18 00:00:47,145 --> 00:00:48,605 three products from Microsoft. 19 00:00:48,735 --> 00:00:50,025 I'm just going to paste in there. 20 00:00:50,618 --> 00:00:54,533 So here we've got the available products from these two companies, but we want 21 00:00:54,563 --> 00:00:59,513 to be able to show either one or the other, depending on, for example, 22 00:00:59,633 --> 00:01:04,853 whether the user has followed Apple in their feed or followed Microsoft. 23 00:01:04,883 --> 00:01:07,253 I think of this as like a sort of Facebook feed type thing. 24 00:01:07,523 --> 00:01:11,453 So how do we show the Apple products or the Microsoft products depending 25 00:01:11,453 --> 00:01:12,443 on what the user has chosen? 26 00:01:12,713 --> 00:01:15,863 Well, here's where Jinja2 conditionals come into play. 27 00:01:16,356 --> 00:01:19,896 When we render this template, we're going to receive some data from 28 00:01:19,896 --> 00:01:23,536 the server, probably coming from the users part of the database. 29 00:01:23,836 --> 00:01:27,856 And we're going to say, if company is equal to Apple, then we're 30 00:01:27,856 --> 00:01:32,139 going to show this bit here, elif companies equal to Microsoft. 31 00:01:32,769 --> 00:01:34,989 Then we're going to show this bit down here. 32 00:01:35,409 --> 00:01:37,219 And at the end, we're going to put endif. 33 00:01:37,718 --> 00:01:39,368 All right, so pretty straightforward. 34 00:01:39,368 --> 00:01:41,948 I'm just going to add a little bit of spacing here to make it a bit clearer. 35 00:01:41,998 --> 00:01:45,158 But this is how we do if statements in Jinja2. 36 00:01:45,238 --> 00:01:49,038 You may notice that we're no longer using the double curly braces because 37 00:01:49,038 --> 00:01:51,828 double curly braces is for expressions 38 00:01:52,296 --> 00:01:56,436 . Anything that Jinja2 is going to evaluate to value and subsequently 39 00:01:56,436 --> 00:01:59,416 interpolate into the template. 40 00:01:59,639 --> 00:02:03,059 But the curly brace percent symbol is used for statements. 41 00:02:03,059 --> 00:02:08,459 So anything that allows Jinja2 to make decisions or do something other than 42 00:02:08,879 --> 00:02:10,679 interpreting values into the template. 43 00:02:10,799 --> 00:02:14,789 So when we look at for loops, for example, we're also going to use this notation. 44 00:02:15,286 --> 00:02:18,076 As well as if and elif, just like in Python, we can 45 00:02:18,076 --> 00:02:20,506 also have an else statement. 46 00:02:20,656 --> 00:02:24,586 And this will evaluate if neither of the previous two statements evaluate. 47 00:02:24,796 --> 00:02:26,776 You can also have more elif statements. 48 00:02:26,806 --> 00:02:29,296 If you want, you can have two or three or however many you want. 49 00:02:29,822 --> 00:02:35,170 Here we could put a paragraph that says and no company products available. 50 00:02:35,170 --> 00:02:35,860 Something like that. 51 00:02:36,250 --> 00:02:38,110 And again, I'm just going to add a little bit of spacing there. 52 00:02:38,635 --> 00:02:42,445 So how would we render this template using Flask? 53 00:02:43,135 --> 00:02:44,675 Well, let's go over to app.py. 54 00:02:44,935 --> 00:02:48,005 I've still got here, the stuff from the previous video, we're 55 00:02:48,005 --> 00:02:49,025 going to delete all of that. 56 00:02:49,055 --> 00:02:49,805 We no longer need it. 57 00:02:49,895 --> 00:02:52,205 You can keep it in a separate app.py If you want. 58 00:02:52,235 --> 00:02:53,105 That's totally up to you. 59 00:02:53,608 --> 00:02:58,545 And we're going to rename the app.route to something like conditionals -basics. 60 00:02:59,085 --> 00:03:02,655 And in here, we're going to be deciding what company we're 61 00:03:02,655 --> 00:03:04,695 going to render in the template. 62 00:03:04,725 --> 00:03:09,925 So we can say company equal Apple and then return render_template 63 00:03:10,455 --> 00:03:12,975 of conditionals_basics.html. 64 00:03:13,275 --> 00:03:14,635 And the company is going to be company. 65 00:03:15,081 --> 00:03:16,731 So let's run this. 66 00:03:16,865 --> 00:03:18,215 And this is what that looks like. 67 00:03:18,215 --> 00:03:21,005 You've got the titles and the available Apple products. 68 00:03:21,035 --> 00:03:23,435 If we change company to Microsoft. 69 00:03:24,015 --> 00:03:26,445 We saved that I'm going to restart my app because I don't 70 00:03:26,445 --> 00:03:28,155 have development mode enabled. 71 00:03:28,155 --> 00:03:30,105 If you do, that'll restart for you. 72 00:03:30,615 --> 00:03:33,855 And when we refresh, we gets the Microsoft products shown. 73 00:03:34,415 --> 00:03:37,505 Obviously, you can see how this variable here wouldn't 74 00:03:37,505 --> 00:03:39,245 be hard-coded in a larger app. 75 00:03:39,455 --> 00:03:43,925 It is the user that would some point earlier on decide what 76 00:03:43,925 --> 00:03:45,215 this variable is going to be. 77 00:03:45,788 --> 00:03:49,208 Earlier I put the example of following a company and they might do that in 78 00:03:49,208 --> 00:03:53,078 their profile or in their newsfeed or something like that and then we could 79 00:03:53,078 --> 00:03:55,208 show the company's products like that. 80 00:03:55,538 --> 00:03:58,868 Or maybe you've got one template that you want to reuse for companies. 81 00:03:58,868 --> 00:04:02,458 Let's say companies and their product, and you can do that with something like this. 82 00:04:02,618 --> 00:04:06,008 You can reuse the template and just passing the value that decides which 83 00:04:06,008 --> 00:04:11,318 company to go for, as opposed to having separate HTML files, one for each company. 84 00:04:11,841 --> 00:04:12,441 In the ebook. 85 00:04:12,441 --> 00:04:17,391 We've got another example as well on checking for truthy and falsy values. 86 00:04:17,631 --> 00:04:21,291 But essentially what you can do is let's say we don't want to show 87 00:04:21,291 --> 00:04:24,820 different companies there, but we want to do something like this. 88 00:04:25,385 --> 00:04:29,915 So if the company is given, then we will show the products and if 89 00:04:29,915 --> 00:04:33,955 the company is not given, then we will not show any products. 90 00:04:34,490 --> 00:04:37,820 We can do this because whenever we evaluate any boolean 91 00:04:37,820 --> 00:04:38,780 here in the if statement. 92 00:04:39,210 --> 00:04:43,200 That is going to use essentially Python's of way of evaluating booleans. 93 00:04:43,410 --> 00:04:47,010 So if this evaluates to a truthy value, this will run. 94 00:04:47,910 --> 00:04:52,500 So if company is any non empty string, then this will run. 95 00:04:52,860 --> 00:04:57,370 But if we pass in an empty string, then this evaluates to a falsy 96 00:04:57,390 --> 00:05:01,310 value because it's an empty string and we would run to the else. 97 00:05:01,712 --> 00:05:05,802 Jinja2 also has this truthy and falsy evaluation of 98 00:05:05,802 --> 00:05:07,502 booleans just like Python does. 99 00:05:08,042 --> 00:05:11,062 Again there's another example in the ebook with a bit of a longer code 100 00:05:11,092 --> 00:05:12,382 that you can check out if you want. 101 00:05:12,682 --> 00:05:14,872 It just says the same thing that this is something you can do in 102 00:05:14,872 --> 00:05:17,002 Jinja2, but with different code. 103 00:05:18,023 --> 00:05:18,263 All right. 104 00:05:18,263 --> 00:05:19,853 Thank you guys for joining me in this video. 105 00:05:19,943 --> 00:05:22,673 I hope you've enjoyed it and I'll see you in the next one.