1 00:00:05,500 --> 00:00:09,430 Welcome everyone to this lecture on rendering templates and context variables. 2 00:00:10,360 --> 00:00:15,880 Now we've already seen a little bit of how to actually render a template by connecting a render function 3 00:00:15,880 --> 00:00:19,000 call to an actual template or HTML file. 4 00:00:19,330 --> 00:00:25,360 Well, we still haven't explored yet is how to send information from the Python object to view over 5 00:00:25,360 --> 00:00:26,110 to the template. 6 00:00:26,110 --> 00:00:27,330 And that's for that context. 7 00:00:27,340 --> 00:00:32,920 Variable comes into play with the Django template language or the Djindjic template language, depending 8 00:00:32,920 --> 00:00:34,180 on which you prefer to use. 9 00:00:34,450 --> 00:00:38,890 But right now, we're going to show here it's going to work in both situations with either template 10 00:00:38,890 --> 00:00:39,760 markup language. 11 00:00:40,030 --> 00:00:42,910 So let's go ahead and check out this in visual studio code. 12 00:00:43,390 --> 00:00:43,690 OK. 13 00:00:43,720 --> 00:00:46,150 Here I am back at Visual Studio Code. 14 00:00:46,510 --> 00:00:52,150 What I'm going to do to get a little bit of practice with connecting to a template is quickly create 15 00:00:52,150 --> 00:00:54,430 a new template and then connect a view to it. 16 00:00:54,820 --> 00:01:00,400 So how do we do this as a review if this template will be associated, if my app, then underneath my 17 00:01:00,400 --> 00:01:08,230 app templates my app, I'll simply create a new file and I'm going to call this variable HTML since 18 00:01:08,230 --> 00:01:10,420 variables is we're going to be talking about right now. 19 00:01:10,870 --> 00:01:15,970 Then I should be able to simply type doc, enter, get the autocomplete and let's just have a quick 20 00:01:15,970 --> 00:01:21,820 heading here in order to know that we're looking at the variable each time else, I'll say variable 21 00:01:22,390 --> 00:01:24,790 the HTML save that. 22 00:01:25,120 --> 00:01:26,360 So I have this ready to go. 23 00:01:26,380 --> 00:01:28,660 Later on, we're going to keep adding to this template file. 24 00:01:29,170 --> 00:01:34,780 Then I'll come back to views inside of app, and let's create a new view for this. 25 00:01:34,780 --> 00:01:35,410 So we'll call it. 26 00:01:36,690 --> 00:01:37,560 Variable view. 27 00:01:38,720 --> 00:01:40,100 Take sent a request. 28 00:01:41,600 --> 00:01:46,190 And it's going to return render from that request. 29 00:01:47,580 --> 00:01:48,930 Underneath my app. 30 00:01:50,260 --> 00:01:57,670 Forward slash variable, that HTML save that change later on will be dealing with the third argument, 31 00:01:57,670 --> 00:02:00,520 which has a context mapping, so that's kind of what we're here about. 32 00:02:01,000 --> 00:02:04,720 And before we do that, let's make sure it's connected underneath URLs. 33 00:02:05,200 --> 00:02:07,990 So we have the example view as a path here. 34 00:02:08,740 --> 00:02:10,270 What I'm going to do is add a comma. 35 00:02:11,240 --> 00:02:12,090 A new path. 36 00:02:12,140 --> 00:02:14,090 Let's have it be a variable. 37 00:02:15,550 --> 00:02:19,720 So say variable forward slash and then connect this to views that. 38 00:02:21,260 --> 00:02:22,040 Variable view. 39 00:02:23,440 --> 00:02:28,810 OK, so once you have that running, you should be able to go back to your site, that's running, and 40 00:02:28,810 --> 00:02:36,070 then we have the example h html at forward, slash my app, then go to forward slash variable and then 41 00:02:36,070 --> 00:02:38,440 you should see variable HTML. 42 00:02:38,890 --> 00:02:40,390 So we already know how to do this. 43 00:02:40,630 --> 00:02:46,750 Well, we don't know really how to do yet is instead of just displaying HTML, what would make Django 44 00:02:46,750 --> 00:02:53,590 really powerful is if I can do a bunch of logic, either, in my view, stop my file or in another Python 45 00:02:53,590 --> 00:02:57,850 file that I've imported, exported from and eventually send that context back. 46 00:02:58,360 --> 00:03:04,030 The way this works in the simplest manner is by working with what's known as a variable object. 47 00:03:04,240 --> 00:03:07,540 That's kind of a vague term, but it's the formal term with Django. 48 00:03:07,930 --> 00:03:13,510 And the way I like to think about it is just a context variable dictionary that gets sent from Python 49 00:03:13,780 --> 00:03:14,980 to the actual template. 50 00:03:15,460 --> 00:03:17,380 So keep in mind for what we're doing right now. 51 00:03:17,380 --> 00:03:18,820 This has to be a dictionary. 52 00:03:19,300 --> 00:03:19,990 So we're going to create. 53 00:03:21,070 --> 00:03:24,160 A dictionary is going to call it my underscore variable. 54 00:03:24,610 --> 00:03:29,890 And you can imagine that this is able to do any sort of calculations we want, and it's able to later 55 00:03:29,890 --> 00:03:31,750 on take information from the request. 56 00:03:32,050 --> 00:03:37,510 We'll actually have information, then take into account inside the Python variable, but we will do 57 00:03:37,510 --> 00:03:38,200 that later on. 58 00:03:38,710 --> 00:03:39,910 So just create a dictionary. 59 00:03:40,750 --> 00:03:43,780 And inside this dictionary, I'm going to have a first name key. 60 00:03:44,700 --> 00:03:47,400 And let's have the first name be something like Rosalind. 61 00:03:48,910 --> 00:03:51,160 And then let's have the last name key. 62 00:03:52,140 --> 00:03:53,010 B. Franklin. 63 00:03:55,700 --> 00:04:01,400 So I have this little object here, it's a dictionary in Python, first name Rosalyn, last name Franklin. 64 00:04:01,880 --> 00:04:09,890 Then what I want to do is be able to send this python variable over to be used instead of variable HTML. 65 00:04:10,310 --> 00:04:15,890 And the way this works is you pass in a third argument called context, and then you set it equal to 66 00:04:15,920 --> 00:04:22,460 my underscore variable or whatever you happen to call this variable again later on will do way more 67 00:04:22,460 --> 00:04:27,620 complex versions of this of taking in objects that the user sends, doing whatever you want them in 68 00:04:27,620 --> 00:04:30,980 Python and then sending them back, maybe redirecting to another view. 69 00:04:31,010 --> 00:04:32,240 But for right now, keep it simple. 70 00:04:32,660 --> 00:04:36,020 And we're just sending this variable dictionary. 71 00:04:36,470 --> 00:04:40,910 Then the question arises How do we actually use it inside a variable HTML? 72 00:04:41,960 --> 00:04:48,290 Well, the way this works is you go to variable to HTML and then you reference it with the syntax of 73 00:04:48,290 --> 00:04:49,970 two sets of curly braces. 74 00:04:50,510 --> 00:04:53,660 So let's say I'm going to do another heading here too. 75 00:04:54,080 --> 00:04:54,800 Then you put in. 76 00:04:55,800 --> 00:05:02,250 Two sets of curly braces, so two sets opening, two sets closing, and then you reference the key and 77 00:05:02,250 --> 00:05:05,610 then the key is going to retrieve the value associated with it. 78 00:05:06,120 --> 00:05:11,970 So that means I can say something like first underscore name inside of HTML. 79 00:05:12,390 --> 00:05:20,010 And if I save that change and then refresh my page, I now see here, Rosalind. 80 00:05:21,000 --> 00:05:27,270 So what is actually happening is keep this in mind from the views you have this dictionary being passed 81 00:05:27,270 --> 00:05:31,570 back through the context and then inside the actual template itself. 82 00:05:31,950 --> 00:05:35,430 You can begin to access this by referencing the keys. 83 00:05:35,820 --> 00:05:37,260 And it doesn't have to be by itself. 84 00:05:37,260 --> 00:05:41,370 You can also say something like her first name was. 85 00:05:41,670 --> 00:05:45,000 And then the key is going to insert the value associated with it. 86 00:05:45,900 --> 00:05:47,670 And then you can say her last name. 87 00:05:48,590 --> 00:05:55,850 Was and then two sets curly brackets last underscore name, two sets, curly brackets go ahead and then 88 00:05:56,390 --> 00:05:57,320 save that change. 89 00:05:58,130 --> 00:06:01,000 Refresh your page and you should see that pop up to now. 90 00:06:01,010 --> 00:06:01,650 Her first name was. 91 00:06:02,270 --> 00:06:03,290 Her last name is Franklin. 92 00:06:03,710 --> 00:06:05,930 OK, so that's pretty good right now. 93 00:06:05,960 --> 00:06:09,230 Hopefully, it can get the gears turning of what's actually possible here. 94 00:06:09,590 --> 00:06:15,020 We're going to expand this to actually show you, depending on the sort of Python object you sent back 95 00:06:15,020 --> 00:06:16,100 within that dictionary. 96 00:06:16,340 --> 00:06:20,270 You can begin to actually access attributes or indices from it. 97 00:06:20,780 --> 00:06:23,870 So we're going to come back here to views that pie. 98 00:06:24,990 --> 00:06:31,740 And I'm going to make this dictionary have some more key value pairs, so here inside this dictionary, 99 00:06:32,700 --> 00:06:39,090 I'm going to create a key and I'm just going to call it some list and its associated value is going 100 00:06:39,090 --> 00:06:41,550 to be a list one to three. 101 00:06:42,720 --> 00:06:44,070 Let's make another key here. 102 00:06:44,490 --> 00:06:45,480 It's going to be called. 103 00:06:46,680 --> 00:06:47,640 Some dictionary. 104 00:06:48,710 --> 00:06:52,970 Note that there's a dictionary within a dictionary, so there's really more for demonstration purposes. 105 00:06:53,240 --> 00:06:57,380 You don't want to get this too confusing, so I'll say inside key. 106 00:06:58,430 --> 00:07:00,260 And then call this inside. 107 00:07:01,230 --> 00:07:01,680 Value. 108 00:07:02,310 --> 00:07:02,580 OK. 109 00:07:02,610 --> 00:07:04,710 Make sure your commas and formatting is correct here. 110 00:07:05,040 --> 00:07:11,430 But basically what I've done is I have now some list one, two, three and some dictionary inside my 111 00:07:11,430 --> 00:07:11,920 dictionary. 112 00:07:12,270 --> 00:07:13,980 So I'm sending back this entire thing. 113 00:07:14,220 --> 00:07:18,840 But then I should be able to access some list and some dictionary in the exact same way I did before. 114 00:07:18,870 --> 00:07:22,470 So let's come back to variable and we have this first name, last name. 115 00:07:22,920 --> 00:07:25,590 Let's actually grab that list. 116 00:07:25,710 --> 00:07:31,170 So I can say again, two sets of curly braces simply say some list because that was the key. 117 00:07:31,800 --> 00:07:32,900 Save that change. 118 00:07:32,910 --> 00:07:34,920 And if I refresh, come back here. 119 00:07:36,250 --> 00:07:39,910 I now see the list one to three being put there. 120 00:07:40,390 --> 00:07:40,720 All right. 121 00:07:41,020 --> 00:07:43,670 So just by itself, that's not super useful. 122 00:07:43,690 --> 00:07:48,760 What I would like probably to do within a list is maybe loop through it, but we won't learn about that 123 00:07:48,760 --> 00:07:49,000 yet. 124 00:07:49,010 --> 00:07:50,050 It has to do with tax. 125 00:07:50,050 --> 00:07:55,150 That's a little more complicated, but maybe right now I just want to grab a single item from that list. 126 00:07:55,540 --> 00:08:01,960 The way you do that, to grab something that has an index capability, which means in Python, if you'd 127 00:08:01,960 --> 00:08:05,290 be able to index it with something like some list. 128 00:08:06,960 --> 00:08:08,430 Square braces zero. 129 00:08:08,670 --> 00:08:14,400 So this is normal python indexing the way this works on the template side of things with Django template 130 00:08:14,400 --> 00:08:14,880 language. 131 00:08:15,390 --> 00:08:19,560 They come back to variable is you have to say Dot and then the index you want. 132 00:08:19,800 --> 00:08:26,040 So for example, Dot zero save that that will grab the first item in that list. 133 00:08:26,520 --> 00:08:27,720 So I refresh this here. 134 00:08:28,170 --> 00:08:29,520 I now only see one. 135 00:08:29,610 --> 00:08:31,020 No more square brackets. 136 00:08:31,320 --> 00:08:35,559 So again, with the Django template language, you say dot zero. 137 00:08:35,580 --> 00:08:36,539 In order to use that. 138 00:08:37,289 --> 00:08:39,299 So that's indexing just to get some practice here. 139 00:08:39,659 --> 00:08:43,470 If you say that too, that should give you the last item in that list. 140 00:08:43,470 --> 00:08:44,580 So come back here. 141 00:08:44,610 --> 00:08:46,560 Refresh this and I see three. 142 00:08:46,950 --> 00:08:53,520 If you say something that's out of bounds like that 12 and save that change and then bring that up here 143 00:08:53,790 --> 00:08:55,110 and refresh you notice. 144 00:08:55,350 --> 00:08:57,660 Ill attempt to keep displaying the page. 145 00:08:57,930 --> 00:09:01,050 They actually won't see anything here because technically that doesn't exist. 146 00:09:01,320 --> 00:09:05,610 So instead of completely breaking on your website, what is kind of nice is Django just says, Hey, 147 00:09:05,670 --> 00:09:07,310 sorry, but that thing doesn't exist. 148 00:09:07,320 --> 00:09:08,370 I'm just going to leave it blank. 149 00:09:08,370 --> 00:09:10,560 There is no 12th item in this list. 150 00:09:11,220 --> 00:09:11,550 OK. 151 00:09:12,090 --> 00:09:16,290 So again, the dot notation seems a little strange if you're used to it in Python. 152 00:09:16,560 --> 00:09:21,300 But again, we're doing this in HTML, so it's pretty cool that we at least have that indexing capability. 153 00:09:21,660 --> 00:09:22,860 So that's what some list. 154 00:09:23,100 --> 00:09:24,630 Now let's think about some dictionary. 155 00:09:24,720 --> 00:09:25,980 It's going to be extremely similar. 156 00:09:26,460 --> 00:09:33,540 If I go ahead and pass in some dictionary that would pass in that entire dictionary insight, key insight 157 00:09:33,540 --> 00:09:33,990 value. 158 00:09:34,320 --> 00:09:37,380 But clearly, I'd probably just want the inside value. 159 00:09:37,380 --> 00:09:40,020 So the way that works is you just reference it with the key. 160 00:09:40,860 --> 00:09:43,530 So we say some dictionary here that. 161 00:09:44,590 --> 00:09:45,610 Inside key. 162 00:09:46,540 --> 00:09:49,090 Saved that changed and using that dot notation. 163 00:09:50,450 --> 00:09:52,670 Refresh and now I see the inside value. 164 00:09:53,120 --> 00:09:58,850 You don't really want to overdo this too much because you don't want to have in Python here a dictionary 165 00:09:58,850 --> 00:10:01,010 within a dictionary and a dictionary and so on. 166 00:10:01,280 --> 00:10:05,390 Typically, what's the best way to deal with these sort of simple context dictionaries is to just have 167 00:10:05,390 --> 00:10:09,110 everything available on a simple, key value pair level. 168 00:10:09,440 --> 00:10:13,730 That way, you don't need to worry about having to remember the dictionary variables within each other 169 00:10:13,790 --> 00:10:16,760 again, or you will make this more and more complex as it goes on. 170 00:10:17,090 --> 00:10:19,790 But this is just kind of the simplest way to go about it right now. 171 00:10:20,120 --> 00:10:26,420 The last thing I want to show you is technically the Django template variable or language has its own 172 00:10:26,720 --> 00:10:28,070 capabilities for comments. 173 00:10:28,460 --> 00:10:34,640 If you wanted to comment something, what you would do is kind of put it in to hear. 174 00:10:35,750 --> 00:10:41,630 And sets of curly braces, instead of having two sets of curly braces, you would say curly brace. 175 00:10:42,650 --> 00:10:46,640 Pound sign or hash tag sign and then hash tag sign. 176 00:10:46,790 --> 00:10:47,630 Curly braces. 177 00:10:47,960 --> 00:10:49,420 And now this can be anything you want. 178 00:10:49,430 --> 00:10:51,290 So this is a comment. 179 00:10:52,420 --> 00:10:57,760 Go ahead and save that, and then you technically won't really see anything show up in the HTML, but 180 00:10:57,760 --> 00:10:58,870 you won't get an error either. 181 00:10:59,140 --> 00:11:03,820 So this is the way you put a comment in in regards to the Django template language. 182 00:11:04,060 --> 00:11:09,390 If you want kind of the same thing as just doing a comment with each HTML, it's kind of up to you which 183 00:11:09,400 --> 00:11:10,060 you prefer. 184 00:11:10,300 --> 00:11:15,460 I usually prefer having the comments and HTML markup, but it's really up to you, whether you prefer 185 00:11:15,460 --> 00:11:17,350 it to be a comment like this. 186 00:11:17,650 --> 00:11:21,400 This is really helpful when you start dealing with more jingle filters and jingle text. 187 00:11:21,400 --> 00:11:24,610 Actually, have the comments be associated with something more Django ish? 188 00:11:24,880 --> 00:11:26,380 But again, it's kind of up to you. 189 00:11:27,070 --> 00:11:34,420 OK, so that's the very basics of passing information from Python views to the template HTML thing. 190 00:11:34,440 --> 00:11:40,600 Keep in mind right now is you're pretty much just create a context dictionary grab based off the key. 191 00:11:41,020 --> 00:11:47,650 And then main thing to know is with variables, you're using two sets of curly braces later on. 192 00:11:47,650 --> 00:11:49,790 This will change when we switch to using tags. 193 00:11:49,810 --> 00:11:54,280 Attacks are more complex functionality than just sending a simple variable back. 194 00:11:54,640 --> 00:11:58,060 The other thing to note is if you have a list or dictionary, you want to reference something inside 195 00:11:58,060 --> 00:11:58,270 of it. 196 00:11:58,570 --> 00:12:04,540 You use this dot notation and then either put in the number for the index or the key for the key value 197 00:12:04,540 --> 00:12:04,840 pair. 198 00:12:05,320 --> 00:12:05,620 All right. 199 00:12:05,770 --> 00:12:06,700 That's it for this lecture. 200 00:12:06,970 --> 00:12:11,560 I'll see you at the next one where we show you very quickly some extensions that allow you to actually 201 00:12:11,560 --> 00:12:14,140 highlight this instead of having everything the same color. 202 00:12:14,500 --> 00:12:15,040 I'll see you there.