Welcome everyone to this lecture or start going to take a basic look at some of the concepts behind
class based views, starting with the idea of using a class based view to connect a template to a view
to a URL.
Let's get started.
All right.
Here I am inside visual studio code.
I'm going to start a fresh project.
Or is it to get those reps in?
So we'll say Django Admin Start Project.
And let's go ahead and just say this is a school.
So I start a school project, I will seed into school and let's make an application that's going to
be for a classroom.
So I'll say Python managed managed PI Start app.
Classroom.
And there we go.
OK, so we have all our files here set up and ready to go.
We're going to be making new files along the way.
Going to zoom in just a little bit here.
So it's a little easier for you to see.
And the main idea for this lecture is to set up a couple of things that we're going to use later on,
like a model for a teacher as well as configuring our settings and a couple of base templates.
And then we're going to add more and more things like forms and the template views later on.
OK.
So what I want to do here is just quickly begin to set up some templates.
So underneath school classroom, I'm going to create a new folder called templates.
And let's create a new subfolder beyond that called classroom.
And here, let's create a file for a template just called home.
HTML.
And here I'm just going to say each one.
Welcome to home, Timol.
Now, clearly a big part of websites is just connecting to a template.
Often a lot of these templates don't need anything fancy like context from a jingo view.
They're essentially you're saying, go ahead and just show this HTML like a landing page or something
like that.
So what we're going to do is explore how we can actually use template based views, a class based view
model to connect to a template rather than having to create a function.
But let's first start off with what we do know, which is a function based view.
So inside of views, what I can do is create a simple view.
So we'll call this my home deal.
And this takes in a request.
And it's going to return a rendering of that request.
And then we connect it to the actual template, which is underneath classroom slash home that html.
OK.
And then we need to create a URL file.
So we'll create a new file here.
URLs that pay and, let's say, from Django Dot URLs, imports, and then I'm going to import path.
And what I'm also going to do is set up an app name now.
We'll use this later.
Just call it classroom.
And then let's set up our URL patterns list, so we'll have URL patterns path.
I'm going to have this just be the homepage.
So remember, the way this works later on is this will essentially be domain BCom forward slash classroom
for slash.
And then that's just the home page right here at that path.
OK, so I need to import my view, so we still need to do that, will say from.
The View's imports, and then I believe I call this home for you.
Yup.
OK, so there are some of you and we'll just say.
In fact, let's just make this simpler.
Actually, that's fine.
We'll just help you here.
OK.
So I pass in my home view and then let's give it a name as home.
So something to note right now is very clearly the path function expects this view to be a function,
and I mentioned we're using class based views.
So that's one thing we'll have to solve is that path expects a function.
So something to note here.
This is a function, and the path function expects it to be that way.
So just keep that in the back of your mind and let's connect this URLs, the project level URLs.
We already know how to do that.
We simply import include here.
Hopefully, this feels super familiar with on this kind of a million times by now, and we'll say classroom
forward slash.
And then I'm going to include classroom thought URLs.
OK.
And then while we're at it, let's go ahead and register the classroom config inside our application.
So we come over to settings about PI.
Remember, we have these installed apps.
And so what I say here is classroom, the apps dot and then classroom config comma there.
And later on, I am also going to use a model, so what we can do is imagine that our particular school
or classroom has teachers, and later on I want to be able to list all the teachers.
Maybe they have a subject they teach in order to be able to create the elite view teachers, update
them, et cetera.
So inside the models that pi inside our classroom app lets quickly create a very simple teacher model.
So I'll create a class called teacher.
It's going to inherit from models that model.
And teachers are going to have a first name.
I just make this a character field.
Let's say maxlength, a 30, let me using a lot of tab autocomplete since kind of seen this a lot already.
And then models character field maxlength 30.
And finally, let's go ahead to have a teacher, a teacher subject, so we'll connect them to a particular
subject.
So can models character field maxlength 30.
And then later on, I want to be able to display teacher inside a template.
So let's give it a string representation.
So that's SDR.
Oops.
Accidentally autocomplete at that.
So SDR underscore underscore percent so.
And I'm just going to return something like FirstName LastName teaches the subject, so I'm going to
say self first name.
And then sell that last name.
Teachers and then the subject they teach, which is self thought subject.
OK, so hopefully this feels like review very simple model here.
Haven't used it anywhere yet, but I do want to make sure this is registered, so I need to actually
make those migrations.
We're going to say python managed pie make migrations.
And it made those migrations for the teacher, and then I'm going to say Python managed not pie migrate,
and it should migrate all the initial things as well as classroom.
OK, so we are good to go now, and let's just make sure our home age HTML is actually connected.
I'm going to begin by actually running our server, so I'll say Python managed our pie run server.
OK, looks like that's working, but let's make sure it's actually showing up.
So I'm going to go to that page, and if I bring that in, it says, welcome to home each HTML.
Perfect.
Looks like that's working.
So as I mentioned, the whole purpose of a class based view is to make your life easier.
So right now, a simple template view is actually not too bad, but we do know that this is a super
common view.
And later on, we're going to realize that many views are actually super common in web applications.
You just end up kind of making the same views over and over again, like you're always going to have
a view to list all the items or up a particular entry in a model, etc..
And one of those basic views the end up using over and over again is, Hey, connect this view to a
template.
And the very first class based view we're going to learn about is the template view, and this falls
under the generic views underneath the class based views.
So what we're going to do here is import a generic, class based view.
So what we do here is at the top.
We're going to say the following I'm going to say from Django Dot views dot generic.
Import and then we're going to be importing a bunch of use later on throughout the section, but the
very first one is going to be a template view know how through the capitalization.
Again, this is known as camel casing that this is actually a class.
And so how does a template view work?
Well, it's actually really cool.
The way it works is you create a class, and this should feel super similar to the way we used models
and forms.
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.
But this time I'm using camel casing because it's a class and it's going to inherit the template view.
And then the main attribute for a template view is just what is the template name?
So we say template underscore name.
Keep in mind, this attribute has to be like this template underscore name and then you set it equal
to the template you want, which in this case was classroom home, the HTML.
So you go ahead and copy that and paste that in.
And this is now a class based view for templates.
It's not too much simpler than a function based template, and you'll be going to see later on.
These generic views get really, really simple for more and more complex tasks, and they all kind of
follow the same idea.
You create a class and then through the attributes, you connect it to things like forms or models.
So we're going to do is I'm actually now going to delete my function based view.
And now I have my home view, which is a template view, template name, and then you link up that template.
And that's actually how it works.
But we still need to connect this to our URLs that pie file.
So how exactly does that work?
Remember, I mentioned that the URLs that pie file is expecting a function.
Well, luckily for you, that's already been taken care of through a quick method call.
So come back to URLs that pie.
And now, instead of importing home, view the function, I'm going to import home, view the class
and then I'm going to swap this out for home to you.
And then the only thing you didn't remember is to call the as underscore view method.
And what this does.
It essentially says, OK, I'm going to take that class and return a function for path.
So it doesn't freak out when it sees a class go ahead and I'll save that.
And just to make sure everything's actually working, let's try this again on another HTML file.
So I'm going to create a new file here, and I'm going to call it my thank you page.
So we'll call this thank you each HTML, and it's just going to say something like.
Thank you.
And let's create a new view for it.
And let's just get a little practice here.
So we say class, and let's call this now.
Ah, of you.
It's going to inherit from a template view.
And again, super simple code, you just grab the template name, attribute template, underscore name
and say, Now connect this to underneath classroom.
Go ahead and connect to thank you the HTML.
And note how this starts looking a lot cleaner for views that you use often, but I still need to connect
this in URLs.
So what do I do?
I come back to your URLs.
I simply import that view.
Remember, that was my thank you view.
And then here.
Say comma and add in a new path.
This one will go ahead and put it at.
Thank you.
Forward slash.
And then I'm going to say here, thank you, view.
And remember, you need to call as view open close parentheses and let's give it a name.
Thank you.
Let's save those changes.
All right.
Let's make sure that actually works going to come back here to my website.
Zoom in a bit for you.
Let's go ahead and refresh.
All right.
Classrooms working.
Let's now go to classroom.
Thank you.
And now I think he's working now, let's imagine I wanted to connect these two.
Well, I know I can do a lot of that work within the views themselves.
So all I need to do is come back to the home each HTML page and let's actually now create maybe a list.
Because eventually, I'm going to have a bunch of links here.
And what I'm going to do is create an unordered list item, and I'm actually going to have this be an
anchor tag where my reference is going to be a URL.
So I'm simply going to say the following to say you URL.
And then in quote, Syria passing the actual you're referring to.
So we're going to say classroom colon and then this was.
Thank you.
So how am I getting this string?
Remember, that's the find here.
Underneath the name and the app name.
So it's classroom colon.
Thank you.
So now if you go to home, I have this anchor tag which said it put some text here.
It says, thank you, page, link or whatever you want to call it.
And later on, we're going to be adding more and more of these.
So go ahead and save that change.
And now let's go back to home here, and we're going to make sure actually connected that an ordered
list correctly.
Looks like I wasn't paying attention, I swapped the tax here.
So what I'm going to do is this should be the unordered list you will.
You will, and this is the list item I.
Eli.
OK, sorry about that little typo.
Let's refresh.
And now, if I refresh this, this should look a little nicer.
OK, now if I click on, thank you, it takes me to thank you.
Perfect.
So that's pretty much it for now.
And let's just do a really quick review of what we just did, which was using a class based view to
actually connect to a template.
It's pretty simple.
So the way the class space views works is you're pretty much really often going to be saying from tangled
up used generic import, some sort of generic view that's already been made for you.
And pretty much this whole section, of course, is exploring all your options here under generic views.
The first thing we discovered was template for you super simple view you just inherit make your own
class view and connect it through the attribute, template, name and boom, you're done.
Template views should really only be used when you expect most of the work to be done on the template
side of things.
I should point out it is possible to start doing things like pass in context back to the template,
but I first want to give you a tour of the other generic template views or, excuse me, the other generic
class based views, because a lot of that functionality where you're passing it back in a context are
better served through some of these other views we're going to discover.
So keep that in mind.
We're going to discover a lot more views, and this one is really nice when it's just the clean connection
to an attribute.
The one thing to remember is inside your URLs.
When you actually connect it, you need remember to call as a view.
OK, I'll see you in the next lecture.