1 00:00:05,240 --> 00:00:09,020 Welcome back, everyone, to this lecture where we're going to discuss jingo filters. 2 00:00:10,000 --> 00:00:15,790 Filters are built in modifiers in Django templating that allow you to quickly apply a change to a variable 3 00:00:15,790 --> 00:00:18,790 on the template side rather than in your Python script. 4 00:00:20,400 --> 00:00:24,090 So they're often very similar to a Python based method. 5 00:00:24,270 --> 00:00:31,320 For example, let's imagine that we were passing in a first name key in our template and that the output 6 00:00:31,320 --> 00:00:32,369 was Rosalind. 7 00:00:32,700 --> 00:00:38,580 We can actually apply a filter using this horizontal bar and in the name of the filter. 8 00:00:38,910 --> 00:00:44,850 For example, we could uppercase every letter that shows up in the resulting template by using the upper 9 00:00:44,850 --> 00:00:45,360 filter. 10 00:00:45,750 --> 00:00:48,210 And there are a ton of filters available for us. 11 00:00:48,810 --> 00:00:52,800 So we're going to do is explore a few examples of filters, how to use them, and then we'll show you 12 00:00:52,800 --> 00:00:54,690 or see the full list and the documentation. 13 00:00:56,320 --> 00:00:57,850 Let's head over to Visual Studio code. 14 00:00:58,510 --> 00:01:01,600 OK, here I am back our HTML file. 15 00:01:02,020 --> 00:01:07,510 You'll notice that we passing things like first name, last name and even things like an insight, key 16 00:01:07,510 --> 00:01:08,560 insight, a dictionary. 17 00:01:08,770 --> 00:01:14,440 And recall, this is being passed from this variable here, which is a dictionary with some strings 18 00:01:14,450 --> 00:01:16,630 it lists and another dictionary inside of it. 19 00:01:17,050 --> 00:01:20,950 Let's go ahead and explore how to apply and use these filters. 20 00:01:21,430 --> 00:01:28,990 The main way you do them is you simply pass in the vertical bar there and then the name of the filter 21 00:01:28,990 --> 00:01:29,500 itself. 22 00:01:29,530 --> 00:01:32,830 Now you do have to know these names or look them up in the documentation. 23 00:01:33,190 --> 00:01:38,800 Keep in mind, not every single operation has a filter attached to it, but you can later on create 24 00:01:38,800 --> 00:01:39,880 your own custom filters. 25 00:01:40,000 --> 00:01:44,530 We'll talk about that later, but right now, let's use one that's built in, such as upper. 26 00:01:45,040 --> 00:01:51,190 And depending on whether you not you downloaded an extension, you can get this help of which ones are 27 00:01:51,190 --> 00:01:51,800 available for you. 28 00:01:51,820 --> 00:01:54,130 So we know uppers available based off that. 29 00:01:54,310 --> 00:01:56,350 So I'm going to go ahead and save that change. 30 00:01:56,830 --> 00:01:58,810 And now let's refresh our page. 31 00:01:59,050 --> 00:02:01,180 And you can see if I bring it over now. 32 00:02:01,180 --> 00:02:03,460 Rosslyn is completely in uppercase. 33 00:02:03,820 --> 00:02:08,410 Very similar to calling the upper the string based method within Python. 34 00:02:08,889 --> 00:02:14,170 So clearly, there's some heavy inspiration here happening from Python, of which filters to actually 35 00:02:14,170 --> 00:02:15,100 create and choose. 36 00:02:15,640 --> 00:02:18,040 For example, there's also a length filter. 37 00:02:19,340 --> 00:02:20,570 So I can say length. 38 00:02:21,050 --> 00:02:27,740 Go ahead and save that, and then if I refresh the page here, you can see it now, says eight. 39 00:02:27,950 --> 00:02:32,480 So it's actually calculating the length for us how many letters were in that first name? 40 00:02:32,840 --> 00:02:33,990 Sometimes this will be useful. 41 00:02:34,010 --> 00:02:34,820 Sometimes it won't be. 42 00:02:34,820 --> 00:02:39,560 It's really up to you to decide whether or not it's useful to do this and whether or not it's useful 43 00:02:39,560 --> 00:02:45,200 to do this on the HTML side of things or keep all this sort of logic on the view side. 44 00:02:45,500 --> 00:02:47,270 It really depends on the situation. 45 00:02:47,450 --> 00:02:49,280 Both methods are totally OK. 46 00:02:49,520 --> 00:02:54,710 It just depends on what you prefer and the methods that you like to see and where you like to see that. 47 00:02:54,710 --> 00:02:59,960 Maybe it's too much work here to have the front end handling everything, and you'd rather have everything 48 00:02:59,960 --> 00:03:01,340 be in Python on the back end. 49 00:03:01,820 --> 00:03:05,510 Now let's talk about where to actually find these in the Django documentation. 50 00:03:05,900 --> 00:03:08,930 You can search for built in template tags and filters. 51 00:03:09,170 --> 00:03:13,820 And we haven't talked about tags yet, but basically we're looking for this website or this web page 52 00:03:13,820 --> 00:03:15,140 within the Django documentation. 53 00:03:15,500 --> 00:03:19,880 It's built in template tags and filters, and so they have a giant list of all the tags. 54 00:03:20,090 --> 00:03:22,280 We haven't talked about those yet, so you can ignore that. 55 00:03:22,580 --> 00:03:25,250 B, scroll down here on the right hand so you can see the contents. 56 00:03:25,250 --> 00:03:30,110 Scroll through all the tags and eventually you see something that says built in filter reference. 57 00:03:30,410 --> 00:03:35,280 So this is a huge list of all the filters that are available for you. 58 00:03:35,300 --> 00:03:37,310 Some of these filters can actually be quite complex. 59 00:03:38,030 --> 00:03:42,650 There's filters there to actually grab the dates and times that are currently available on your computer 60 00:03:42,650 --> 00:03:47,870 or on whoever which, whichever client is using the browser they can actually grab based off that browser 61 00:03:47,870 --> 00:03:51,770 on their computer, what time it is or what it is, where they're looking at the web page. 62 00:03:51,770 --> 00:03:54,340 So keep that in mind, but click here and built-in reference. 63 00:03:54,350 --> 00:03:59,030 You can see there's a bunch of filters, and what's really nice about the documentation is pretty much 64 00:03:59,030 --> 00:04:01,440 just tells you an example and how it works. 65 00:04:01,460 --> 00:04:03,680 So a lot of these are pretty self-explanatory. 66 00:04:03,980 --> 00:04:07,820 Some of them are maybe not super useful, for example, cap first. 67 00:04:07,920 --> 00:04:13,040 That's very similar to the capitalized method on a string, and it's just going to make this capitalized. 68 00:04:13,340 --> 00:04:15,770 So why would this be useful, for instance? 69 00:04:15,800 --> 00:04:19,850 Well, maybe you're reading something in from a database and it's a bunch of lowercase names, but you 70 00:04:19,850 --> 00:04:23,630 want them to look good for the user and you just want to make sure that it's capitalized. 71 00:04:23,640 --> 00:04:26,870 Maybe some names are not capitalized and some names are. 72 00:04:27,140 --> 00:04:31,640 So you can just have this on the template side of things just to make sure you quickly capitalize just 73 00:04:31,640 --> 00:04:33,500 in case something doesn't have to be capitalized. 74 00:04:33,500 --> 00:04:37,490 So you can go here, you can check out that it actually centers out based on strings. 75 00:04:37,730 --> 00:04:42,680 This could be very useful for adjusting things on your web page, and you kind of get the idea here. 76 00:04:42,950 --> 00:04:45,940 Again, some of these are way more complex like dates. 77 00:04:45,950 --> 00:04:47,990 You can actually end up formatting dates. 78 00:04:47,990 --> 00:04:54,350 So instead of saying, for example, the 31st Jan, you can say the 31st of the full name January. 79 00:04:54,350 --> 00:04:59,480 So you have a lot of flexibility and there are string codes for each of these dates and descriptions 80 00:04:59,480 --> 00:05:00,410 and example outputs. 81 00:05:00,710 --> 00:05:02,000 That's one of the most complex filter. 82 00:05:02,000 --> 00:05:06,890 There is this one to do with dates and formatting there, but this is probably one of the most useful 83 00:05:06,890 --> 00:05:14,060 because you can quickly edit the way a timestamp or date time object shows up in the actual HTML. 84 00:05:14,420 --> 00:05:19,940 So often it's a lot easier just to send a date time object into the template space, and then you start 85 00:05:19,940 --> 00:05:24,110 messing around with it based off what is available for you here for formatting. 86 00:05:25,070 --> 00:05:25,360 OK. 87 00:05:25,730 --> 00:05:29,180 So scroll down, you can see there's a bunch of them you can actually saw a dictionary. 88 00:05:29,720 --> 00:05:34,400 That's probably something you maybe want to do more on the Python side of things, but you can remember 89 00:05:34,400 --> 00:05:38,270 that if you pass in a dictionary, you might be nice just to sort of on the template side, you can 90 00:05:38,600 --> 00:05:42,110 do a lot more complicated things than just what I'm talking about. 91 00:05:42,120 --> 00:05:47,990 You can see here, there's different outputs, et cetera, and that's basically it so that we work with 92 00:05:47,990 --> 00:05:50,630 these as you just think, Hey, is this a useful case? 93 00:05:50,840 --> 00:05:53,660 Do I want to do this in the Python side of things or a template side of things? 94 00:05:53,990 --> 00:05:58,700 Python, maybe you want to do it for every single thing before actually doing another modification on 95 00:05:58,700 --> 00:05:59,210 the object. 96 00:05:59,210 --> 00:06:00,950 So you decided the Python side. 97 00:06:01,730 --> 00:06:06,140 What's nice about doing it on the template side, you can think of it as more of a last minute check. 98 00:06:06,380 --> 00:06:12,110 So the example I like to give is, you know, you're passing in a bunch of first names and last names 99 00:06:12,350 --> 00:06:14,240 from some database somewhere. 100 00:06:14,510 --> 00:06:18,740 But people have manually entered these names, so you don't know if they forgot to capitalize them or 101 00:06:18,740 --> 00:06:20,510 not or if they lowercase them. 102 00:06:20,780 --> 00:06:25,000 So we could do is just say, OK, just make sure they're all capitalized. 103 00:06:25,010 --> 00:06:29,870 I say the apply the filter and then you say cap first. 104 00:06:30,440 --> 00:06:33,800 So you go ahead and add that one to last name and first name. 105 00:06:34,220 --> 00:06:35,090 So you do that as well. 106 00:06:35,990 --> 00:06:38,930 First, save those changes and then. 107 00:06:39,900 --> 00:06:44,730 When you refresh this, you can see now you made sure that Rosalind and Franklin were capitalized and 108 00:06:44,730 --> 00:06:48,240 we come back to view that's actually make sure they're all lowercase. 109 00:06:49,300 --> 00:06:54,670 To see if that is actually taking effect, so I saved that change and then I can refresh my page. 110 00:06:54,880 --> 00:06:56,500 You notice it's still capitalized. 111 00:06:56,860 --> 00:07:02,140 Well, you can also do is stack filters, so maybe something look like this. 112 00:07:02,920 --> 00:07:09,190 Rosa Lind with a capital L. in there and you come back here and now things start looking weird because 113 00:07:09,190 --> 00:07:10,660 you have this capitalized letter. 114 00:07:11,440 --> 00:07:16,360 One way to kind of deal with this issue instead of fixing some complicated object here is you simply 115 00:07:16,360 --> 00:07:18,520 come back to your HTML and you start stacking these. 116 00:07:18,520 --> 00:07:23,350 So you say, OK, lowercase everything first and then stack the cup first on that. 117 00:07:24,480 --> 00:07:30,000 So then you would refresh this and you notice it lower cases, everything, and then it runs capitalization. 118 00:07:30,450 --> 00:07:34,770 So this is probably one of the more useful ways of using things on the template side of things. 119 00:07:35,100 --> 00:07:40,890 It's more just to make sure that what's displayed to the client, it's always going to be in the same 120 00:07:40,890 --> 00:07:41,910 uniform fashion. 121 00:07:42,240 --> 00:07:48,180 So by stacking things with lower and capitalization first, I can really make sure no matter how I receive 122 00:07:48,180 --> 00:07:51,420 the first name, it's always going to show up nicely to the user. 123 00:07:51,780 --> 00:07:59,640 For example, maybe I have something that looks like this, and then maybe I have a all lowercase Franklin 124 00:07:59,640 --> 00:07:59,910 here. 125 00:08:00,480 --> 00:08:04,410 So instead of having to figure this out on the python in the thing, sometimes it's just way easier 126 00:08:04,590 --> 00:08:07,980 to say, OK, just lowercase everything that's coming in and then capitalize it. 127 00:08:08,340 --> 00:08:13,020 So you could do this double a first name and last name, then it doesn't matter how different or how 128 00:08:13,740 --> 00:08:16,620 ill formatted things are on your Python side or on your database side. 129 00:08:16,920 --> 00:08:19,980 You come here, the user refreshes the page and they're none the wiser. 130 00:08:19,980 --> 00:08:21,090 Everything looks nice to them. 131 00:08:21,120 --> 00:08:24,150 So that's really a nice way to just clean things up. 132 00:08:24,150 --> 00:08:29,280 On the template side of things especially, we don't know for sure what data and what context and what 133 00:08:29,280 --> 00:08:31,920 variables are coming in from Python side of things. 134 00:08:32,370 --> 00:08:32,669 OK. 135 00:08:32,970 --> 00:08:34,710 That's it for this lecture on filters. 136 00:08:34,740 --> 00:08:35,490 I'll see you at the next one.