Hey there how’s it going everybody in this video we’ll be adding the ability for users to add posts that will then show up on the home page will also look at using class-based views in order to work with our post model and see how these class-based views can be useful so let’s go ahead and get started so now.
That we’ll be working with our blog post we’re going to be going back to our blog app that we created earlier in this series so first.
Things first I’m going to open up the blog views and we’re going to look at using class-based views in order to display update and delete new post so within our blog app let’s open up views dot pi.
And this is where we have our current home and about views so so far in this series we’ve been using function based views and we should be fairly familiar with these by now so our URL patterns are directed to a certain view.
And the views then handle the logic for the routes and then render our templates so now there are these things called class-based views and those have a lot more built-in.
Functionality that we’ll try to handle a lot of the backend logic for us so I’m going to create a class-based view for our home page so that we can see what this looks like compared to a function view so first of all there are different kinds of class-based.
Views there are list views detail views create views update views and delete views and a couple more.
So if we think about it a lot of websites have very similar functionality so take a blog for example so you’re going to.
Page where it lists all of your blog posts so this would be a list view or if you think about a site like YouTube for example then there’s going to be a subscriptions page where it lists all of your video subscriptions so that is also a list view now what would happen if we clicked on one of.
Of those videos from the list well then it would take us directly to that blog or to that video and give us more details and it would show us all of the content the descriptions comments and all of that so those details that would be a detail view and then we also have the ability to update and delete blogs or videos and those would be update and delete views so Gengo tries to predict this common behavior.
And give us these generic views that do a lot of the background work for us so right now we have a homepage that gets all of our post objects and passes them to our.
Home dot HTML template to display all of them there so that would be a good candidate for a list view since our home.
Page is listing all of our blog posts so I’m going to rewrite this as a list view so that you can see the difference between that and the current function that we have right now so first I’ll import list view up here at the top by saying from Django dot views let me spell.
That right from Django dot views dot generic import list view and now I’m going to create a new class because remember these are class-based views and I’m.
Going to call this so I’ll create it right below our home function so that we can see the differences here so I will call this class post list view and I will inherit from that list view and within our list view we need to create a variable called model and this will tell our list view what model.
To query in order to create the list and in.
This case we want it to be all of our posts so we’ll set that model equal to post now technically this is all that we need to do in.
Order to create a list view but we’re going to need to.
Add a little bit more to do this but first let me show you what this does if we try.
To use this list view like it is now and why we need to add a.
Little bit more so in order to use this list view we can open up our blog URLs dot pi module and say that we want to use this post list view instead of our current home function so within our blog app let’s open up those URLs and instead of using this views dot home.
We’re instead going to use our post list view so let me actually import that directly so I’ll keep the view import that we have now but I’ll also add a direct import.
So I’ll say from dot views import post list view and now instead of using.
Our home view I’m going to replace this here with this post list view now when we use class-based views we can’t just pass in the class like this it has to be converted into an actual view and they.
Have a method available that does this that’s called as view so we need to add that on so I’ll say dot as.
Underscore view and then we need to actually execute that okay so now let’s load this in our browser and see what this does now it’s not.
Going to work right now but let’s look at the error that we get so first of all it looks like our test the server is running so now let me reload our home page here so we can see that it says that a template doesn’t exist so by.
Default class-based views look for templates of a certain naming pattern so we can see here that it is looking for blog ford slash post underscore list dot HTML so let me.
Write this out so that you can see this a little bit better so this is looking for a template with the naming convention of the app and then Forge slash the model and then underscore and then the view type dot.
HTML so in this case since our app is blog it was looking in blog and then post is the model so it was looking in post underscore and then the view type is list so altogether it was looking for blog forged slash post underscore list dot HTML so we.
Could create a template with this naming convention and it would see that template but we can.
Also change which template that we want this view to use and since we already have a template for our home view let’s go ahead and just do.
That and change the template that it’s looking for so we can do that within the view spy so I’m going to copy this just as.
A reference go back to our view spy and I will paste this in and now let’s set a new template so that we can use our existing template for our home page so I will say template underscore.
Name is equal to blog forge slash home dot HTML and I’ll just put this convention on the of the line there so that we.
Have that as a reference okay and lastly.
Even with this change in place this isn’t going to work for us just yet because it doesn’t know what we want the variable to be named in our template that we’re going to be looping over so for example if we look up here in our home.
View function we called all of our post objects post in our context but by default our list view is going to call that variable object list instead of post so we can either go into our template and change it so that it’s looping over object list or we can set one more variable in our list view and let the class know that we want that variable to be called.
Post instead so since we already have the template created let’s just go ahead and set this variable here within our list view so to change that we can set an attribute here and this will be called context underscore object underscore name.
And we will set that equal to post since that’s what it is up here in our home template and just setting those three attributes should do it so now if we save those changes and then reload this in our browser so reload our home page then now we can see that we got the same thing as when we.
Were using our function view now one thing that isn’t really right about our blog right now is the ordering of our post.
So our first blog post at the top is actually our oldest one and our latest post that we created is at the bottom now that’s probably not what we want so if you’re looking at someone’s tweets or updates then you probably want to see their latest ones at the top instead of needing to scroll all the way to the bottom to see.
Their latest so let’s fix this so in.
Order to do this we’re going to.
Need to change the order our query is making to the.
Database so let’s open up our view spy and go into our list and inside of our list view in order to change the order it’s as simple as adding an ordering attribute with the field that we want to order on so I will say I will create a new attribute.
Here called ordering and set this equal to and we want to set this equal to date hosted now this will order our posts from oldest to newest like it’s doing right now now if we.
Want to go from newest to oldest then we can just put a minus sign here at the front so now with that one small change if we save that and then go back to our browser and reload this then we can see that our newest post is at the.
Top and that blog one which is our oldest post is at the bottom ok so now we are using this list view instead of our older function view so now let’s look at the differences between those views that we have here so here was our home function and here is our home list view so.
We can see that we’re not really saving any lines of code in this example compared to the function view but in our class base view we are basically just setting some variables and in our function view we had to actually render a function and explicitly pass in that information now we could.
Have saved some lines of code if we had used generic view.
Defaults so if I had created a template with the naming convention that our list view was looking for and used the variable name of object list inside of our template as opposed to post like we’re.
Using here then really the only line of code that we would have needed to set is the model and also the ordering if we wanted the ordering to be correct so really you can actually get a working class based view with just a single line of code if you stick to the conventions perfectly so let’s actually do this with our next class base view and stick to the conventions so that we can see how this cuts down on code ok so to do this let’s.
Create a view for individual posts now when we look at an individual post this is going to be a detail view since we’re.
Going to be looking at the details of a single post object so to create a detail view let’s first import it so up here at the top where we imported ListView it’s also import detail view and now down here underneath my post ListView let’s actually copy this and paste another class beneath here and.
Now let’s change a couple of things so instead of this being post ListView will call this post detail view we’re going to import from detail view instead of ListView and now I’m also.
Get rid of the ordering the context object name and the template name and I’m only going to leave the line with the model set to post okay so with that model set the post let’s go create the URL pattern so let’s open up our URLs now first we’ll need to import that post detail view so up here at the top let’s import post.
Detail view and now we need to create a route that takes us to a specific post and to do this we’re going to use something that we haven’t seen yet so we have to create a URL pattern that contains a variable so for example let’s say that we wanted to view the page for blog one then that URL would be something like post ford slash one and to go to blog two it would be something like post ford slash two and django gives us the ability to add variables within our actual routes so.
If we wanted to create a route where the ID of a post is actually part of the route then we can create a route that looks like this so I’m going to copy this home route as a starting point and paste this in and now we can create a route with a variable just.
By saying okay post forged slash and then.
These angle brackets here and then we.
Can say PK and that is going to be the primary key of the post that we want to view so if we go.
To post forged slash one then we will go to the blog with the ID of one or with.
The primary key of one now we can also set what kind of variable this is so if we know that this is going.
To be an integer then we can tell Django that we.
Only expect to see integers after post so that will prevent you know put somebody putting in strings or anything like that now remember we want to end all of our routes with a trailing slash and now instead of going to post list view the post detail view is what is going to handle this route and instead of this being blog home we will make this post – detail so again by specifying that PK variable in the URL that allows us to grab that value from the you and use.
It in our view function and in this case we’re using a class-based view so that will be passed to the class-based view and remember how I said we’re going to stick to conventions so that we can save.