1 00:00:05,360 --> 00:00:11,600 Welcome back in this lecture we're going to talk about template variables using the template function 2 00:00:11,840 --> 00:00:15,310 we can directly render an HTL file for a flask web application. 3 00:00:15,500 --> 00:00:20,000 As we just saw in the previous lecture though we haven't really leverage the power of Python at all 4 00:00:20,000 --> 00:00:20,540 yet. 5 00:00:21,540 --> 00:00:26,600 We want a way to be able to use Python code in our application changing and updating variables in logic 6 00:00:26,910 --> 00:00:31,800 and then be able to send that information and those results to the template we can use the Jinja template 7 00:00:31,800 --> 00:00:38,780 engine to do this Jinja templating will let us directly insert variables from our Python code to the 8 00:00:38,780 --> 00:00:40,120 HTL file. 9 00:00:40,160 --> 00:00:44,340 The syntax for inserting a variable is two sets of curly braces. 10 00:00:44,390 --> 00:00:47,250 And then you put in the variable name that you're passing through. 11 00:00:47,700 --> 00:00:53,600 So you see this Explain of some examples in just a little bit but to clarify we can pass in Python strings 12 00:00:53,690 --> 00:00:56,730 Lisp dictionaries and more into the templates. 13 00:00:56,750 --> 00:01:02,030 We set parameters of our choosing in the renderers template function and then use that doubles the curly 14 00:01:02,030 --> 00:01:04,840 braces syntax to insert them in the template. 15 00:01:05,090 --> 00:01:10,010 Let's head over to a text editor and show some examples of this by actually getting Python variables 16 00:01:10,100 --> 00:01:11,950 and inserting them into the template. 17 00:01:12,200 --> 00:01:17,180 Already Here here at the flask application from the previous lecture and the previous lecture we set 18 00:01:17,180 --> 00:01:21,920 it up to actually run the template where it said hello to the site and gave you a picture of a puppy. 19 00:01:22,020 --> 00:01:30,260 We're going to do now is just have this be a very simple sign that says hello let's save this and right 20 00:01:30,260 --> 00:01:33,140 now we're just rendering basic h Tomales we did last time. 21 00:01:33,140 --> 00:01:40,820 So when I run this file if I say Python they set it up by head over to my browser then I should see 22 00:01:41,330 --> 00:01:42,010 just hello. 23 00:01:42,010 --> 00:01:44,900 So we bring that over here going to zoom in just a little bit. 24 00:01:44,990 --> 00:01:45,640 So I see. 25 00:01:45,650 --> 00:01:46,650 Hello. 26 00:01:46,670 --> 00:01:51,210 Now let's see how we can actually render some variables inside of our template. 27 00:01:51,560 --> 00:01:57,320 What I'm going to do is I'm going to create a variable here instead of my index function and I'm just 28 00:01:57,320 --> 00:02:04,690 going to call it some underscore variable and I'll set it equal to any name. 29 00:02:04,710 --> 00:02:08,260 So we'll just set it to Jose silver to set it to any string you want. 30 00:02:08,520 --> 00:02:13,650 So right now I have some variable and this is in Python what I want to do is inject that into basic 31 00:02:13,950 --> 00:02:14,580 HTML. 32 00:02:14,790 --> 00:02:19,330 So the way I do that is I decide on some variable name. 33 00:02:19,470 --> 00:02:27,340 So I'm going to say my variable and then I'm going to set it equal to some variable. 34 00:02:27,370 --> 00:02:31,520 So just to zoom out a little bit so we can see the whole picture here. 35 00:02:31,600 --> 00:02:37,600 I've created some variables that are equal to Jose and then said my variable is equal to some variable. 36 00:02:37,600 --> 00:02:41,820 Then what I am going to do after I say this head back over to basic h tim. 37 00:02:42,070 --> 00:02:49,180 And I'm going to inject this by setting those two sets of curly braces and then putting in my underscore 38 00:02:49,690 --> 00:02:50,610 variable. 39 00:02:50,620 --> 00:02:52,400 So notice what's happening here. 40 00:02:52,780 --> 00:02:58,270 Whatever parameter name you choose as my underscore variable that's what you're actually going to pasan 41 00:02:59,170 --> 00:03:01,350 into this HTL through your template. 42 00:03:01,450 --> 00:03:03,910 And that's what Jinja template is doing for you. 43 00:03:03,910 --> 00:03:06,300 So then I want to refresh the page and bring it back over. 44 00:03:06,460 --> 00:03:07,360 I get to see. 45 00:03:07,450 --> 00:03:08,060 Hello. 46 00:03:08,110 --> 00:03:13,450 Jose Scotius clarify what the variable names are and how they're connected. 47 00:03:13,450 --> 00:03:13,960 Sorry. 48 00:03:13,960 --> 00:03:16,300 Here I have some variable is set equal to Jose. 49 00:03:16,300 --> 00:03:21,310 And then I get to the side whatever variable name I want to be injected into my Jinja template. 50 00:03:21,580 --> 00:03:24,340 Often this my variable and some variable. 51 00:03:24,340 --> 00:03:29,620 They're actually going to match up which makes sense because you don't want to have more confusion. 52 00:03:29,620 --> 00:03:31,300 So often it would look something like this. 53 00:03:31,300 --> 00:03:36,280 You'll say my variables equal to say than my variable my variable that we don't have to have two sets 54 00:03:36,280 --> 00:03:36,720 of names. 55 00:03:36,730 --> 00:03:41,980 Instead you have one name in the Python code which matches the same name inside of your HTL script template 56 00:03:43,040 --> 00:03:43,470 OK. 57 00:03:43,640 --> 00:03:45,970 So now let's see a more complex example. 58 00:03:46,070 --> 00:03:48,810 So far we just passed in a string. 59 00:03:48,860 --> 00:03:59,840 Let's say the letters in that string is going to be list it let's make this a little shorter will say. 60 00:03:59,840 --> 00:04:06,900 In fact let's just call this name and we're going to say this is name and saying my variables are to 61 00:04:06,900 --> 00:04:11,330 my variable I'll say name is equal to name. 62 00:04:11,670 --> 00:04:14,160 So I'm going to say that my name is equal to Jose. 63 00:04:14,160 --> 00:04:16,700 Basically Steimle I'm passing name UKL to name. 64 00:04:16,920 --> 00:04:23,510 And then what it is to do is update my variable here to then be name save that and then refresh this. 65 00:04:23,520 --> 00:04:24,530 I should still see. 66 00:04:24,540 --> 00:04:25,770 Hello Jose. 67 00:04:25,770 --> 00:04:26,940 So we're good. 68 00:04:27,060 --> 00:04:31,680 Now what I want to do is show you how we can pass on a list so we have letters here is equal to list 69 00:04:31,680 --> 00:04:32,550 name. 70 00:04:32,550 --> 00:04:41,230 So I'm going to say letters is equal to letters so I'm grabbing the letters from line 8 and then passing 71 00:04:41,230 --> 00:04:43,980 it in as a variable called letters. 72 00:04:44,260 --> 00:04:49,580 Want to save this and then back here as another hetter. 73 00:04:49,840 --> 00:04:56,050 We're going to inject letters that should be a list of all the letters in this name. 74 00:04:56,050 --> 00:04:59,620 So coming back I have Hello Jose if I refresh this. 75 00:04:59,770 --> 00:05:03,030 Now I see that actual list j o s e. 76 00:05:03,190 --> 00:05:06,260 So I have this list of the letters from Jose. 77 00:05:06,880 --> 00:05:14,050 And then we can do other things such as back in the template where I could do is index off letters so 78 00:05:14,050 --> 00:05:17,560 I can say zero here and that should an index. 79 00:05:17,590 --> 00:05:21,040 If I come back here and refresh just that first letter. 80 00:05:21,250 --> 00:05:27,070 So we're out actually able to use some small bits and pieces of Python logic from within our template. 81 00:05:27,070 --> 00:05:31,720 So for that case actually indexed letters and we can do things like slicing as well. 82 00:05:32,050 --> 00:05:38,770 So I can say from index to go all the way to the end and then bring up that file again. 83 00:05:38,950 --> 00:05:40,050 Hello Jose. 84 00:05:40,060 --> 00:05:40,830 Refresh this. 85 00:05:40,870 --> 00:05:42,200 And then I see SNB. 86 00:05:42,220 --> 00:05:44,410 So now I see that slice of the list. 87 00:05:44,530 --> 00:05:48,130 So that's logic with that list variable inside of the template. 88 00:05:48,460 --> 00:05:53,920 Then what we can also do is pass and things like dictionaries and then come back here to my basic that 89 00:05:53,920 --> 00:05:54,500 pi. 90 00:05:54,710 --> 00:06:01,580 Let's actually create a dictionary will say pup dictionary is equal to. 91 00:06:01,700 --> 00:06:10,190 And I'm going to create a dictionary that has pup name as a key and then let's say Sammy is the name 92 00:06:10,190 --> 00:06:10,910 of that puppy. 93 00:06:12,300 --> 00:06:16,120 And here underneath friend a template I'm going to now passen 94 00:06:18,600 --> 00:06:22,500 dictionary is equal to pup dictionary. 95 00:06:22,590 --> 00:06:23,420 Save that. 96 00:06:23,730 --> 00:06:28,480 And notice I can pass this in but I don't need to actually use it inside of my template. 97 00:06:28,590 --> 00:06:29,620 That's not going to cause an error. 98 00:06:29,640 --> 00:06:38,490 If you happen to pass in a variable but not use it let's go and say Pop dictionary. 99 00:06:38,900 --> 00:06:40,260 Save this. 100 00:06:40,310 --> 00:06:41,700 I bring in my file again. 101 00:06:41,720 --> 00:06:42,710 So I have. 102 00:06:42,750 --> 00:06:44,640 A slice of that list. 103 00:06:44,660 --> 00:06:49,200 And our refresh and I get to see that dictionary pup name and Sammy Blits imagine. 104 00:06:49,220 --> 00:06:57,140 I only wanted to grab Sammy what I could do here is come back to put dictionary and call that key pup 105 00:06:57,830 --> 00:07:01,370 underscore name just as you would have a normal Python dictionary. 106 00:07:01,430 --> 00:07:04,310 Save that and now to refresh this. 107 00:07:04,370 --> 00:07:06,410 And now I just see Sammy. 108 00:07:06,530 --> 00:07:12,180 So that's an example of passing in a string a list and a dictionary into our actual template. 109 00:07:12,530 --> 00:07:15,800 Again the main idea to get here is the following. 110 00:07:15,800 --> 00:07:20,060 You get to create whatever variables now you want using the Python code that you're already familiar 111 00:07:20,060 --> 00:07:20,810 with. 112 00:07:20,900 --> 00:07:27,230 Then you decide on a template variable name and you set it equal to whatever Python variable you want. 113 00:07:27,230 --> 00:07:29,440 Typically these will share the same name. 114 00:07:29,540 --> 00:07:35,390 That way when you actually come to your HTL template you can inject them using this double set of curly 115 00:07:35,390 --> 00:07:40,910 braces notation and you need this double set of curly braces notation in order for this team all document 116 00:07:40,910 --> 00:07:45,200 to understand that you're actually injecting this from your flask application. 117 00:07:45,410 --> 00:07:46,900 And that's really all there is to it. 118 00:07:47,030 --> 00:07:51,740 And then you can also see that we are able to extend the logic of Python in our template as well. 119 00:07:51,770 --> 00:07:56,840 Things like name slicing and indexing and grabbing dictionary keys later on we're going to learn the 120 00:07:56,840 --> 00:08:00,540 syntax to do things like for loops from within our templates. 121 00:08:00,560 --> 00:08:07,010 But right now the main idea we should have is you get to create in Python then send in those template 122 00:08:07,010 --> 00:08:11,860 variables to your template and inject them using this Jinja templating syntax. 123 00:08:11,870 --> 00:08:12,530 All right. 124 00:08:12,530 --> 00:08:15,130 If you have any questions feel free to post the Q&A forums. 125 00:08:15,140 --> 00:08:19,120 You can check up the example code for more examples of passing and template variables. 126 00:08:19,130 --> 00:08:20,490 We'll see you at the next lecture.