1 00:00:05,380 --> 00:00:10,060 Welcome everyone to this lecture or start going to take a basic look at some of the concepts behind 2 00:00:10,060 --> 00:00:16,540 class based views, starting with the idea of using a class based view to connect a template to a view 3 00:00:16,540 --> 00:00:17,320 to a URL. 4 00:00:17,590 --> 00:00:18,280 Let's get started. 5 00:00:18,850 --> 00:00:19,120 All right. 6 00:00:19,150 --> 00:00:21,020 Here I am inside visual studio code. 7 00:00:21,040 --> 00:00:23,170 I'm going to start a fresh project. 8 00:00:23,470 --> 00:00:25,050 Or is it to get those reps in? 9 00:00:25,210 --> 00:00:28,270 So we'll say Django Admin Start Project. 10 00:00:28,390 --> 00:00:31,180 And let's go ahead and just say this is a school. 11 00:00:33,160 --> 00:00:39,610 So I start a school project, I will seed into school and let's make an application that's going to 12 00:00:39,610 --> 00:00:40,540 be for a classroom. 13 00:00:40,990 --> 00:00:45,520 So I'll say Python managed managed PI Start app. 14 00:00:46,820 --> 00:00:47,450 Classroom. 15 00:00:48,320 --> 00:00:49,310 And there we go. 16 00:00:49,790 --> 00:00:53,150 OK, so we have all our files here set up and ready to go. 17 00:00:53,180 --> 00:00:55,490 We're going to be making new files along the way. 18 00:00:55,850 --> 00:00:57,710 Going to zoom in just a little bit here. 19 00:00:57,740 --> 00:00:59,210 So it's a little easier for you to see. 20 00:00:59,780 --> 00:01:04,400 And the main idea for this lecture is to set up a couple of things that we're going to use later on, 21 00:01:04,400 --> 00:01:10,220 like a model for a teacher as well as configuring our settings and a couple of base templates. 22 00:01:10,370 --> 00:01:15,200 And then we're going to add more and more things like forms and the template views later on. 23 00:01:15,710 --> 00:01:16,040 OK. 24 00:01:16,340 --> 00:01:20,960 So what I want to do here is just quickly begin to set up some templates. 25 00:01:21,110 --> 00:01:26,120 So underneath school classroom, I'm going to create a new folder called templates. 26 00:01:27,310 --> 00:01:31,330 And let's create a new subfolder beyond that called classroom. 27 00:01:32,980 --> 00:01:37,600 And here, let's create a file for a template just called home. 28 00:01:38,140 --> 00:01:38,520 HTML. 29 00:01:39,250 --> 00:01:40,930 And here I'm just going to say each one. 30 00:01:41,890 --> 00:01:44,200 Welcome to home, Timol. 31 00:01:44,950 --> 00:01:49,510 Now, clearly a big part of websites is just connecting to a template. 32 00:01:49,840 --> 00:01:54,280 Often a lot of these templates don't need anything fancy like context from a jingo view. 33 00:01:54,520 --> 00:01:58,360 They're essentially you're saying, go ahead and just show this HTML like a landing page or something 34 00:01:58,360 --> 00:01:58,840 like that. 35 00:01:59,230 --> 00:02:04,540 So what we're going to do is explore how we can actually use template based views, a class based view 36 00:02:04,540 --> 00:02:08,680 model to connect to a template rather than having to create a function. 37 00:02:09,130 --> 00:02:12,400 But let's first start off with what we do know, which is a function based view. 38 00:02:12,850 --> 00:02:16,750 So inside of views, what I can do is create a simple view. 39 00:02:16,840 --> 00:02:18,280 So we'll call this my home deal. 40 00:02:19,090 --> 00:02:20,500 And this takes in a request. 41 00:02:21,250 --> 00:02:24,820 And it's going to return a rendering of that request. 42 00:02:24,820 --> 00:02:31,750 And then we connect it to the actual template, which is underneath classroom slash home that html. 43 00:02:32,590 --> 00:02:32,940 OK. 44 00:02:32,950 --> 00:02:35,020 And then we need to create a URL file. 45 00:02:35,500 --> 00:02:37,000 So we'll create a new file here. 46 00:02:37,970 --> 00:02:45,970 URLs that pay and, let's say, from Django Dot URLs, imports, and then I'm going to import path. 47 00:02:46,810 --> 00:02:49,030 And what I'm also going to do is set up an app name now. 48 00:02:49,060 --> 00:02:49,960 We'll use this later. 49 00:02:50,530 --> 00:02:52,120 Just call it classroom. 50 00:02:53,150 --> 00:02:58,430 And then let's set up our URL patterns list, so we'll have URL patterns path. 51 00:02:58,820 --> 00:03:00,440 I'm going to have this just be the homepage. 52 00:03:00,740 --> 00:03:06,050 So remember, the way this works later on is this will essentially be domain BCom forward slash classroom 53 00:03:06,050 --> 00:03:06,640 for slash. 54 00:03:06,650 --> 00:03:08,660 And then that's just the home page right here at that path. 55 00:03:09,020 --> 00:03:13,820 OK, so I need to import my view, so we still need to do that, will say from. 56 00:03:15,200 --> 00:03:19,230 The View's imports, and then I believe I call this home for you. 57 00:03:19,250 --> 00:03:19,520 Yup. 58 00:03:20,120 --> 00:03:22,850 OK, so there are some of you and we'll just say. 59 00:03:23,330 --> 00:03:24,860 In fact, let's just make this simpler. 60 00:03:25,070 --> 00:03:25,700 Actually, that's fine. 61 00:03:26,150 --> 00:03:27,110 We'll just help you here. 62 00:03:27,710 --> 00:03:28,010 OK. 63 00:03:28,280 --> 00:03:32,600 So I pass in my home view and then let's give it a name as home. 64 00:03:33,380 --> 00:03:41,050 So something to note right now is very clearly the path function expects this view to be a function, 65 00:03:41,060 --> 00:03:43,040 and I mentioned we're using class based views. 66 00:03:43,370 --> 00:03:48,050 So that's one thing we'll have to solve is that path expects a function. 67 00:03:48,500 --> 00:03:49,820 So something to note here. 68 00:03:50,060 --> 00:03:53,330 This is a function, and the path function expects it to be that way. 69 00:03:53,660 --> 00:03:57,950 So just keep that in the back of your mind and let's connect this URLs, the project level URLs. 70 00:03:58,490 --> 00:03:59,420 We already know how to do that. 71 00:03:59,690 --> 00:04:01,820 We simply import include here. 72 00:04:02,150 --> 00:04:07,040 Hopefully, this feels super familiar with on this kind of a million times by now, and we'll say classroom 73 00:04:07,640 --> 00:04:08,490 forward slash. 74 00:04:09,020 --> 00:04:13,310 And then I'm going to include classroom thought URLs. 75 00:04:14,970 --> 00:04:15,330 OK. 76 00:04:15,810 --> 00:04:22,440 And then while we're at it, let's go ahead and register the classroom config inside our application. 77 00:04:22,890 --> 00:04:25,140 So we come over to settings about PI. 78 00:04:25,860 --> 00:04:27,900 Remember, we have these installed apps. 79 00:04:28,080 --> 00:04:37,080 And so what I say here is classroom, the apps dot and then classroom config comma there. 80 00:04:38,000 --> 00:04:45,680 And later on, I am also going to use a model, so what we can do is imagine that our particular school 81 00:04:45,680 --> 00:04:49,310 or classroom has teachers, and later on I want to be able to list all the teachers. 82 00:04:49,550 --> 00:04:53,750 Maybe they have a subject they teach in order to be able to create the elite view teachers, update 83 00:04:53,750 --> 00:04:54,590 them, et cetera. 84 00:04:55,340 --> 00:05:01,250 So inside the models that pi inside our classroom app lets quickly create a very simple teacher model. 85 00:05:02,220 --> 00:05:04,620 So I'll create a class called teacher. 86 00:05:05,190 --> 00:05:06,990 It's going to inherit from models that model. 87 00:05:08,460 --> 00:05:09,990 And teachers are going to have a first name. 88 00:05:11,250 --> 00:05:12,950 I just make this a character field. 89 00:05:13,830 --> 00:05:19,230 Let's say maxlength, a 30, let me using a lot of tab autocomplete since kind of seen this a lot already. 90 00:05:19,800 --> 00:05:24,750 And then models character field maxlength 30. 91 00:05:25,770 --> 00:05:30,360 And finally, let's go ahead to have a teacher, a teacher subject, so we'll connect them to a particular 92 00:05:30,360 --> 00:05:30,750 subject. 93 00:05:31,230 --> 00:05:35,070 So can models character field maxlength 30. 94 00:05:36,110 --> 00:05:39,200 And then later on, I want to be able to display teacher inside a template. 95 00:05:39,590 --> 00:05:41,480 So let's give it a string representation. 96 00:05:41,810 --> 00:05:43,300 So that's SDR. 97 00:05:43,400 --> 00:05:43,680 Oops. 98 00:05:43,760 --> 00:05:45,200 Accidentally autocomplete at that. 99 00:05:45,740 --> 00:05:49,130 So SDR underscore underscore percent so. 100 00:05:50,110 --> 00:05:57,670 And I'm just going to return something like FirstName LastName teaches the subject, so I'm going to 101 00:05:57,670 --> 00:05:59,500 say self first name. 102 00:06:02,880 --> 00:06:05,040 And then sell that last name. 103 00:06:07,490 --> 00:06:12,170 Teachers and then the subject they teach, which is self thought subject. 104 00:06:13,840 --> 00:06:17,560 OK, so hopefully this feels like review very simple model here. 105 00:06:17,800 --> 00:06:22,390 Haven't used it anywhere yet, but I do want to make sure this is registered, so I need to actually 106 00:06:22,390 --> 00:06:23,260 make those migrations. 107 00:06:23,280 --> 00:06:28,420 We're going to say python managed pie make migrations. 108 00:06:29,630 --> 00:06:35,450 And it made those migrations for the teacher, and then I'm going to say Python managed not pie migrate, 109 00:06:35,900 --> 00:06:39,830 and it should migrate all the initial things as well as classroom. 110 00:06:40,370 --> 00:06:46,100 OK, so we are good to go now, and let's just make sure our home age HTML is actually connected. 111 00:06:46,550 --> 00:06:51,800 I'm going to begin by actually running our server, so I'll say Python managed our pie run server. 112 00:06:52,860 --> 00:06:57,120 OK, looks like that's working, but let's make sure it's actually showing up. 113 00:06:57,870 --> 00:07:04,140 So I'm going to go to that page, and if I bring that in, it says, welcome to home each HTML. 114 00:07:04,590 --> 00:07:04,980 Perfect. 115 00:07:05,230 --> 00:07:06,300 Looks like that's working. 116 00:07:06,780 --> 00:07:12,480 So as I mentioned, the whole purpose of a class based view is to make your life easier. 117 00:07:12,960 --> 00:07:19,620 So right now, a simple template view is actually not too bad, but we do know that this is a super 118 00:07:19,620 --> 00:07:20,400 common view. 119 00:07:20,550 --> 00:07:25,260 And later on, we're going to realize that many views are actually super common in web applications. 120 00:07:25,260 --> 00:07:29,070 You just end up kind of making the same views over and over again, like you're always going to have 121 00:07:29,070 --> 00:07:33,510 a view to list all the items or up a particular entry in a model, etc.. 122 00:07:33,840 --> 00:07:40,350 And one of those basic views the end up using over and over again is, Hey, connect this view to a 123 00:07:40,350 --> 00:07:40,800 template. 124 00:07:41,160 --> 00:07:46,590 And the very first class based view we're going to learn about is the template view, and this falls 125 00:07:46,590 --> 00:07:50,700 under the generic views underneath the class based views. 126 00:07:50,880 --> 00:07:56,220 So what we're going to do here is import a generic, class based view. 127 00:07:56,700 --> 00:07:58,890 So what we do here is at the top. 128 00:07:59,130 --> 00:08:07,830 We're going to say the following I'm going to say from Django Dot views dot generic. 129 00:08:08,900 --> 00:08:14,150 Import and then we're going to be importing a bunch of use later on throughout the section, but the 130 00:08:14,150 --> 00:08:19,760 very first one is going to be a template view know how through the capitalization. 131 00:08:20,090 --> 00:08:24,770 Again, this is known as camel casing that this is actually a class. 132 00:08:25,250 --> 00:08:27,170 And so how does a template view work? 133 00:08:27,440 --> 00:08:28,850 Well, it's actually really cool. 134 00:08:28,880 --> 00:08:36,679 The way it works is you create a class, and this should feel super similar to the way we used models 135 00:08:36,679 --> 00:08:37,669 and forms. 136 00:08:38,179 --> 00:08:43,970 So what we're going to do is we're going to create a class and I'm now going to call this my home view. 137 00:08:44,240 --> 00:08:50,630 But this time I'm using camel casing because it's a class and it's going to inherit the template view. 138 00:08:51,750 --> 00:08:56,010 And then the main attribute for a template view is just what is the template name? 139 00:08:56,850 --> 00:08:58,650 So we say template underscore name. 140 00:08:59,010 --> 00:09:04,860 Keep in mind, this attribute has to be like this template underscore name and then you set it equal 141 00:09:04,860 --> 00:09:09,930 to the template you want, which in this case was classroom home, the HTML. 142 00:09:10,530 --> 00:09:13,470 So you go ahead and copy that and paste that in. 143 00:09:14,010 --> 00:09:18,060 And this is now a class based view for templates. 144 00:09:18,690 --> 00:09:23,970 It's not too much simpler than a function based template, and you'll be going to see later on. 145 00:09:24,210 --> 00:09:28,380 These generic views get really, really simple for more and more complex tasks, and they all kind of 146 00:09:28,380 --> 00:09:29,680 follow the same idea. 147 00:09:29,700 --> 00:09:35,280 You create a class and then through the attributes, you connect it to things like forms or models. 148 00:09:35,760 --> 00:09:39,240 So we're going to do is I'm actually now going to delete my function based view. 149 00:09:40,610 --> 00:09:46,430 And now I have my home view, which is a template view, template name, and then you link up that template. 150 00:09:46,700 --> 00:09:48,140 And that's actually how it works. 151 00:09:48,440 --> 00:09:53,600 But we still need to connect this to our URLs that pie file. 152 00:09:53,870 --> 00:09:55,850 So how exactly does that work? 153 00:09:55,880 --> 00:10:00,350 Remember, I mentioned that the URLs that pie file is expecting a function. 154 00:10:00,800 --> 00:10:05,390 Well, luckily for you, that's already been taken care of through a quick method call. 155 00:10:06,110 --> 00:10:07,790 So come back to URLs that pie. 156 00:10:08,480 --> 00:10:13,460 And now, instead of importing home, view the function, I'm going to import home, view the class 157 00:10:14,030 --> 00:10:17,390 and then I'm going to swap this out for home to you. 158 00:10:17,900 --> 00:10:24,800 And then the only thing you didn't remember is to call the as underscore view method. 159 00:10:25,280 --> 00:10:26,180 And what this does. 160 00:10:26,180 --> 00:10:31,820 It essentially says, OK, I'm going to take that class and return a function for path. 161 00:10:31,880 --> 00:10:35,900 So it doesn't freak out when it sees a class go ahead and I'll save that. 162 00:10:36,320 --> 00:10:41,150 And just to make sure everything's actually working, let's try this again on another HTML file. 163 00:10:41,600 --> 00:10:45,590 So I'm going to create a new file here, and I'm going to call it my thank you page. 164 00:10:46,130 --> 00:10:51,170 So we'll call this thank you each HTML, and it's just going to say something like. 165 00:10:52,500 --> 00:10:53,010 Thank you. 166 00:10:54,150 --> 00:10:56,250 And let's create a new view for it. 167 00:10:56,460 --> 00:10:57,840 And let's just get a little practice here. 168 00:10:58,940 --> 00:11:01,770 So we say class, and let's call this now. 169 00:11:01,790 --> 00:11:02,570 Ah, of you. 170 00:11:04,610 --> 00:11:06,200 It's going to inherit from a template view. 171 00:11:07,560 --> 00:11:13,350 And again, super simple code, you just grab the template name, attribute template, underscore name 172 00:11:14,100 --> 00:11:16,830 and say, Now connect this to underneath classroom. 173 00:11:17,370 --> 00:11:19,860 Go ahead and connect to thank you the HTML. 174 00:11:21,080 --> 00:11:26,660 And note how this starts looking a lot cleaner for views that you use often, but I still need to connect 175 00:11:26,660 --> 00:11:27,510 this in URLs. 176 00:11:27,530 --> 00:11:28,220 So what do I do? 177 00:11:28,610 --> 00:11:29,720 I come back to your URLs. 178 00:11:30,200 --> 00:11:31,580 I simply import that view. 179 00:11:32,000 --> 00:11:33,260 Remember, that was my thank you view. 180 00:11:34,070 --> 00:11:35,000 And then here. 181 00:11:36,360 --> 00:11:38,490 Say comma and add in a new path. 182 00:11:39,090 --> 00:11:40,940 This one will go ahead and put it at. 183 00:11:41,520 --> 00:11:42,060 Thank you. 184 00:11:43,340 --> 00:11:44,210 Forward slash. 185 00:11:45,230 --> 00:11:48,530 And then I'm going to say here, thank you, view. 186 00:11:48,890 --> 00:11:53,360 And remember, you need to call as view open close parentheses and let's give it a name. 187 00:11:54,830 --> 00:11:55,340 Thank you. 188 00:11:55,740 --> 00:11:56,990 Let's save those changes. 189 00:11:57,860 --> 00:11:58,230 All right. 190 00:11:58,250 --> 00:12:02,730 Let's make sure that actually works going to come back here to my website. 191 00:12:03,110 --> 00:12:04,010 Zoom in a bit for you. 192 00:12:04,330 --> 00:12:05,480 Let's go ahead and refresh. 193 00:12:05,630 --> 00:12:05,900 All right. 194 00:12:05,900 --> 00:12:06,980 Classrooms working. 195 00:12:07,220 --> 00:12:09,170 Let's now go to classroom. 196 00:12:10,270 --> 00:12:10,930 Thank you. 197 00:12:11,440 --> 00:12:15,520 And now I think he's working now, let's imagine I wanted to connect these two. 198 00:12:15,970 --> 00:12:19,750 Well, I know I can do a lot of that work within the views themselves. 199 00:12:20,230 --> 00:12:28,330 So all I need to do is come back to the home each HTML page and let's actually now create maybe a list. 200 00:12:29,920 --> 00:12:32,230 Because eventually, I'm going to have a bunch of links here. 201 00:12:32,860 --> 00:12:39,820 And what I'm going to do is create an unordered list item, and I'm actually going to have this be an 202 00:12:39,820 --> 00:12:44,320 anchor tag where my reference is going to be a URL. 203 00:12:45,190 --> 00:12:48,790 So I'm simply going to say the following to say you URL. 204 00:12:49,810 --> 00:12:53,180 And then in quote, Syria passing the actual you're referring to. 205 00:12:53,200 --> 00:12:56,950 So we're going to say classroom colon and then this was. 206 00:12:57,040 --> 00:12:57,640 Thank you. 207 00:12:58,210 --> 00:12:59,950 So how am I getting this string? 208 00:12:59,950 --> 00:13:01,520 Remember, that's the find here. 209 00:13:01,930 --> 00:13:04,090 Underneath the name and the app name. 210 00:13:04,090 --> 00:13:05,410 So it's classroom colon. 211 00:13:05,710 --> 00:13:06,250 Thank you. 212 00:13:06,730 --> 00:13:11,550 So now if you go to home, I have this anchor tag which said it put some text here. 213 00:13:11,560 --> 00:13:15,970 It says, thank you, page, link or whatever you want to call it. 214 00:13:16,270 --> 00:13:18,040 And later on, we're going to be adding more and more of these. 215 00:13:18,580 --> 00:13:20,080 So go ahead and save that change. 216 00:13:20,620 --> 00:13:27,220 And now let's go back to home here, and we're going to make sure actually connected that an ordered 217 00:13:27,220 --> 00:13:28,000 list correctly. 218 00:13:29,910 --> 00:13:32,130 Looks like I wasn't paying attention, I swapped the tax here. 219 00:13:32,160 --> 00:13:36,630 So what I'm going to do is this should be the unordered list you will. 220 00:13:38,610 --> 00:13:41,790 You will, and this is the list item I. 221 00:13:43,590 --> 00:13:44,070 Eli. 222 00:13:44,300 --> 00:13:45,720 OK, sorry about that little typo. 223 00:13:45,870 --> 00:13:46,830 Let's refresh. 224 00:13:47,400 --> 00:13:49,800 And now, if I refresh this, this should look a little nicer. 225 00:13:49,920 --> 00:13:52,260 OK, now if I click on, thank you, it takes me to thank you. 226 00:13:52,620 --> 00:13:53,070 Perfect. 227 00:13:53,670 --> 00:13:55,530 So that's pretty much it for now. 228 00:13:55,770 --> 00:14:00,870 And let's just do a really quick review of what we just did, which was using a class based view to 229 00:14:00,870 --> 00:14:02,400 actually connect to a template. 230 00:14:02,460 --> 00:14:03,330 It's pretty simple. 231 00:14:03,750 --> 00:14:08,040 So the way the class space views works is you're pretty much really often going to be saying from tangled 232 00:14:08,040 --> 00:14:12,510 up used generic import, some sort of generic view that's already been made for you. 233 00:14:12,750 --> 00:14:16,890 And pretty much this whole section, of course, is exploring all your options here under generic views. 234 00:14:17,130 --> 00:14:22,260 The first thing we discovered was template for you super simple view you just inherit make your own 235 00:14:22,260 --> 00:14:26,790 class view and connect it through the attribute, template, name and boom, you're done. 236 00:14:27,240 --> 00:14:32,850 Template views should really only be used when you expect most of the work to be done on the template 237 00:14:32,850 --> 00:14:33,420 side of things. 238 00:14:35,410 --> 00:14:41,100 I should point out it is possible to start doing things like pass in context back to the template, 239 00:14:41,380 --> 00:14:46,300 but I first want to give you a tour of the other generic template views or, excuse me, the other generic 240 00:14:46,540 --> 00:14:51,670 class based views, because a lot of that functionality where you're passing it back in a context are 241 00:14:51,670 --> 00:14:54,490 better served through some of these other views we're going to discover. 242 00:14:54,880 --> 00:14:55,690 So keep that in mind. 243 00:14:55,720 --> 00:14:59,950 We're going to discover a lot more views, and this one is really nice when it's just the clean connection 244 00:14:59,950 --> 00:15:00,640 to an attribute. 245 00:15:00,940 --> 00:15:02,890 The one thing to remember is inside your URLs. 246 00:15:03,220 --> 00:15:06,160 When you actually connect it, you need remember to call as a view. 247 00:15:06,700 --> 00:15:08,590 OK, I'll see you in the next lecture.