NOTE This file was generated by Descript 1 00:00:00,408 --> 00:00:01,908 Hi guys and welcome back. 2 00:00:01,938 --> 00:00:04,768 In this video, let me tell you about Jinja2. 3 00:00:05,048 --> 00:00:09,528 Jinja2 is another Python library that comes installed with Flask. 4 00:00:09,768 --> 00:00:13,128 And it allows us to essentially interpolate or 5 00:00:13,248 --> 00:00:16,128 put stuff into other strings. 6 00:00:16,338 --> 00:00:18,408 And those other strings that we're going to be putting stuff into 7 00:00:18,408 --> 00:00:21,198 throughout the course are HTML strings. 8 00:00:21,288 --> 00:00:25,578 So Jinja two is very important and it works very well with Flask because they're 9 00:00:25,598 --> 00:00:27,768 actually developed by the same person. 10 00:00:27,838 --> 00:00:28,818 Let's get started. 11 00:00:29,566 --> 00:00:35,956 A template is any string of text that contains placeholders for the template 12 00:00:35,956 --> 00:00:39,796 language, to be able to replace those placeholders by something else. 13 00:00:40,296 --> 00:00:44,886 The syntax used for the placeholders and the whole syntax of the template as a 14 00:00:44,886 --> 00:00:49,686 whole is known as a template language and the underlying code that evaluates the 15 00:00:49,686 --> 00:00:54,466 template and puts the new values in is called a template engine Flask comes with 16 00:00:54,486 --> 00:00:57,066 the powerful Jinja2 template language. 17 00:00:57,246 --> 00:00:59,916 So let me show you a little bit about how that works. 18 00:01:00,416 --> 00:01:04,076 What I'm going to do is I'm going to do from Jinja2 import template. 19 00:01:04,496 --> 00:01:07,736 And notice that here I'm running in the Python REPL, or 20 00:01:07,736 --> 00:01:09,566 the interactive interpreter. 21 00:01:09,866 --> 00:01:13,226 And that's totally fine for the purposes of this video, but 22 00:01:13,226 --> 00:01:17,126 normally we're going to be using Jinja2 in our Flask app as normal. 23 00:01:17,226 --> 00:01:19,796 Here, I'm just going to give you a quick overview of how it works, and 24 00:01:19,796 --> 00:01:23,306 then we're going to go into our Flask app and include Jinja2 in there. 25 00:01:23,806 --> 00:01:26,326 So let's define Jinja2 template. 26 00:01:26,356 --> 00:01:32,116 For example, I can do something in like a template equal Template, and this 27 00:01:32,116 --> 00:01:36,736 is going to create an object of the Template class and I'm going to do hello. 28 00:01:37,381 --> 00:01:41,431 And then double curly braces name, double curly braces, again. 29 00:01:41,611 --> 00:01:46,291 This creates a template object and the template string is hello. 30 00:01:46,351 --> 00:01:49,021 And then the double curly brace name, double curly brace. 31 00:01:49,461 --> 00:01:54,121 The double curly brace notation is the Jinja2 notation for interpolation, which 32 00:01:54,121 --> 00:02:00,781 means we can now pass in a variable that will replace this by some other value. 33 00:02:01,321 --> 00:02:02,801 For example template. 34 00:02:02,801 --> 00:02:03,281 render. 35 00:02:03,981 --> 00:02:06,331 I'm going to say name equal John Doe. 36 00:02:06,831 --> 00:02:12,621 And noticed that Jinja2 takes a template, interpolates this variable into it and 37 00:02:12,621 --> 00:02:14,841 gives us back the resultant string. 38 00:02:15,328 --> 00:02:19,378 We can do the same thing, but instead of John Doe, we can do template.render. 39 00:02:19,378 --> 00:02:23,278 name equals Bob Smith, for example and now we get Bob Smith. 40 00:02:23,551 --> 00:02:27,211 Notice that template.render is always giving us new strings and leaving 41 00:02:27,211 --> 00:02:30,661 the template unchanged so that we can come back and use a different 42 00:02:30,661 --> 00:02:32,791 name on the same template if we want. 43 00:02:33,291 --> 00:02:37,851 Now that we've seen this, let's go into Flask and use Jinja2, to do the exact 44 00:02:37,851 --> 00:02:43,521 same thing, but inside one of our HTML files, instead of here in the console. 45 00:02:44,021 --> 00:02:47,051 So I'm here in the Flask app, and now you can probably start 46 00:02:47,051 --> 00:02:52,151 to see why this function render template is called render template. 47 00:02:52,871 --> 00:02:57,071 What this is going to do is not only take the HTML file and send it to the user. 48 00:02:57,381 --> 00:03:02,181 But it's first going to pass this entire file through the Jinja2 engine. 49 00:03:02,391 --> 00:03:07,371 So that if there's any Jinja2 code, any variable interpolation, or things like 50 00:03:07,371 --> 00:03:11,541 that, that we can do in this file, it's going to do them first and then it's 51 00:03:11,541 --> 00:03:13,611 going to send the result to the user. 52 00:03:14,138 --> 00:03:18,043 Note that as soon as we start interpolating values into a template. 53 00:03:18,193 --> 00:03:20,435 This is no longer static content. 54 00:03:20,882 --> 00:03:25,232 I'm going to delete the second file here and I'm going to delete it over 55 00:03:25,232 --> 00:03:27,152 in the templates folder as well. 56 00:03:27,632 --> 00:03:30,572 Then we're going to come here and instead of first page, 57 00:03:30,572 --> 00:03:33,152 we're going to do jinja intro. 58 00:03:33,332 --> 00:03:35,672 So we're going to use this name for the file. 59 00:03:35,952 --> 00:03:38,742 We're going to rename this and we're going to come in here and we're 60 00:03:38,742 --> 00:03:40,532 going to make a small change here. 61 00:03:40,542 --> 00:03:43,752 We're going to say hello, and then passing a name. 62 00:03:44,202 --> 00:03:47,502 Notice that we're using the double curly brace notation here, because 63 00:03:47,502 --> 00:03:52,722 this is going to come from Jinja2 or Jinja2 is going to interpolate the name 64 00:03:52,752 --> 00:03:58,572 variable into this spot here And here, we're going to type: "This is your 65 00:03:58,572 --> 00:04:02,562 introduction to template_name }} language. 66 00:04:02,622 --> 00:04:03,072 Let's say. 67 00:04:03,476 --> 00:04:06,566 Then we're going to interpolate a new variable into that as well. 68 00:04:06,656 --> 00:04:10,376 So we have two placeholders name and template underscore name. 69 00:04:10,946 --> 00:04:14,786 Now in Python, when we render the template, we have to give it the 70 00:04:14,786 --> 00:04:16,676 values that we want to interpolate. 71 00:04:17,126 --> 00:04:20,516 So we'll do render template and I'm going to split this into two lines, 72 00:04:20,516 --> 00:04:22,286 just so it's a little bit easier to see. 73 00:04:22,726 --> 00:04:27,616 And we're going to do name equal Bob Smith and the template 74 00:04:27,646 --> 00:04:30,066 name is going to be Jinja2. 75 00:04:30,546 --> 00:04:32,316 Now let's run this. 76 00:04:32,816 --> 00:04:35,816 And you can see that when we load the page, we get: Hello, Bob Smith. 77 00:04:36,056 --> 00:04:38,906 And this is your introduction to Jinja2 language. 78 00:04:38,996 --> 00:04:43,246 Obviously this here is not that great, but we can make this better. 79 00:04:44,086 --> 00:04:45,766 To the Jinja2 templating language. 80 00:04:45,796 --> 00:04:46,186 Let's say. 81 00:04:46,686 --> 00:04:49,836 If we were using the Django templating language, which is another one that 82 00:04:49,836 --> 00:04:51,606 exists, we can just replace that there. 83 00:04:51,606 --> 00:04:55,592 And, we do need to restart the app when we do that. 84 00:04:56,092 --> 00:04:59,062 But when we restart the app, you can see that this changes. 85 00:04:59,562 --> 00:05:04,932 We don't need to restart the app though, if this variable was dynamic. 86 00:05:04,932 --> 00:05:09,732 So if the user had somehow told us what value they want in here. 87 00:05:10,092 --> 00:05:11,562 We wouldn't need to restart the app then. 88 00:05:11,562 --> 00:05:14,212 That is really the whole point of using Jinja2. 89 00:05:14,212 --> 00:05:15,832 We'll come to that later on. 90 00:05:16,082 --> 00:05:16,562 But don't worry. 91 00:05:16,562 --> 00:05:18,902 Every time you make a change to the data in the template. 92 00:05:18,902 --> 00:05:20,042 You don't have to restart the app. 93 00:05:20,222 --> 00:05:23,942 But every time you make a change to the template itself, then you do 94 00:05:23,942 --> 00:05:26,682 have to restart the app because Flask doesn't see that this change has 95 00:05:26,682 --> 00:05:28,962 happened and it can't refresh for you. 96 00:05:29,342 --> 00:05:30,552 That's everything for this video. 97 00:05:30,552 --> 00:05:33,132 Thank you guys for watching and joining me in this one. 98 00:05:33,192 --> 00:05:35,832 I hope you've enjoyed it and I'll see you in the next one.