Easily Convert Django Function Based Views To Class Based Views

hey what's up everyone so I'm back with another video today and in this one we're going to be taking Django function based views and converting them into class-based views now one thing I wanted to do in this video is keep this very raw and not use any of the built-in views that Django provides other than the base view that Jago extends everything from so the reason why I'm doing this is because a lot of the built-in class-based views is where beginners get lost because there's a lot of magic that happens under the hood and when it comes time to trying to customize things or understand what's going on people get lost here so that's what I'm gonna try to stay away from and we're just going to build out class based views from scratch in this conversion process so I do have an article that goes with this this is on my dev.2 account and go ahead and check this out linked up in the video description it's all linked up there I kind of stumbled there because I forgot that it was dev.2 and not daily.dev I always get those mixed up so go ahead and follow along with this there's more information here along with all the code samples here so what I have here is actually a demo app that I built up here and we're just going to go through the code and the functionality and then we'll convert it this way you can understand what's going on there is source code provided this will be in the article so go ahead click there and then find the source code if you actually want to do this for yourself so if we look at our application this is the core application I have my server running all we have is a Notes application or a to-do app and this just renders out all the notes that we have we're able to add in new notes here so we'll just go ahead and go to the crud functionality add a task here here's our note it's ordered by the last time it was updated so the most recently updated note we can also view a note we can modify it and we can also delete a note so we'll just do delete task here so that's it that's our application now inside of our application we have our URLs here so we have three URLs and we have three different views here so let's go ahead and break this down and then we'll go through the conversion so we have a view called task list it's a function based View and this view takes in two HTTP methods on get request we simply get all the tasks from the database and then render them out and on a post request that's on that home page if you look through the actual template here inside of index we submit this form and that sends a post request so when we send a post request we simply create a task we save it and then we redirect a user back to the home page so that's all that view does now for detail we pass in the primary key this comes in from the actual URL here we pass in the primary key we use it to get the actual item then we render that out to the template and on post request so we actually have a form here if we go to task.html this is all in the source code we actually have a form and everything gets rendered out into the form on post and get request so when we submit this form right here this actually goes to the same view we go ahead and update the body we get that from the request object and then we redirect a user back to that list so for delete all we do is ask the user a question so first on get we render out this template called delete.html we ask if the user really wants to delete this item and then we send a post request so on post we simply check that method delete it and then send the user back to the home page so that's our application very simple I didn't want to go through that setup process and building this out because that should be simple to understand and you also have the source code now to actually create a class-based view we're going to start by inheriting everything from this class right here so from django.views let's go ahead and import That Base Class base View and this is going to give us all the logic that we need here so instead of deleting this let's go ahead and actually comment this out and build this out from scratch so in order to create a class-based view all we do is create a class let's keep the name so we'll call this task list and our view is going to extend from that view class that we have imported right here so let's go ahead and extend that and then with a class-based view if you know a little bit about them you know that everything is separated by HTTP methods so in our function based view where if we send a get request we have to ask that question and then we have our logic here with class-based views we actually have methods that come in from this view right here so we just go ahead and override those and we say if we have a get request let this method right here take care of all that logic then if we have a post request we're going to go ahead and let the post method handle all the logic here so that's all that's going to happen so all get requests will go here and all post requests will go here so inside of these methods it looks a lot like this right here where we simply pass in the request object but because this is a class we pass in self so we can reference the actual View and then we pass in request so so far not that different we just pass in self be before request and it still looks a lot like our function based view now what we're going to do here is we're going to take the logic from this view right here and simply separate it by these conditions right here so let's take all of this if the method is get we're going to go ahead and pass in all of this right here into the get request so let's copy that bring that into the get method and we'll bring that in right here let's remove the comments and then for the Post method we want to go ahead and take all of this so we want to create a new item and then redirect our user so we'll paste that in remove the comments and there we go that is our new view so this separates the logic right here at the core level I know class-based views become much more complex than this and actually clean up our code a lot based on how you can build them out but this helps you understand what's happening we just have a class and then we separate the logic in here anybody should be able to understand this because it's actually very similar to a function based View at the core All Views are actually functions so let's go ahead and save this and now we need to go to our URLs and we simply need to add in dot as underscore view to our class base view now so task list is now a class so we need to go ahead and call in as View and that way the URL can actually call that if we don't add this in for a class it's just not going to work so let's just make sure everything's working so we have our get and post request so we want to check out the list and the ability to create so we'll just go ahead and go in here let's refresh it so the get request is working because we now see this list and if you look here this function-based view is commented out so that means it's all coming from here now and we want to see if we can actually add an item so let's just say new item let's add it and there we go so that means that when we sent that post request this method right here was triggered so that's all we had to do for our view so let's go ahead and actually modify the detail View and then the delete view so for the detail let's go ahead and comment this out and let's just rebuild it so we're just going to redo a lot here so we'll do class we'll do task detail we're going to extend the view class then we're going to create the method for our get request we're going to pass in self request now for the detail view we need this primary key so notice that we have request and the primary key so let's go ahead and pass in self request and then PK so we just need to add that in it doesn't really change much from a function based view now we're going to take all this logic right here bring that in and uncomment that and then we'll just go ahead and build out the post method we'll scroll up here create the method post self request and PK now we'll just take that logic grab the task item itself and then bring this down here and paste that in so I'm actually following along what I have in the article um forgot how to uncomment this let's just do this manually and we want to fix the indentation here too so fix that it's going to add a little bit of time to the tutorial but that's okay so now we have our task detail view so if you're following along with your article let's just scroll down here I show the base views and then we start with the list view so we go through here now we're on details so we just separated everything and we need to go ahead and add in as view to the actual URL so we can just do dot as underscore view bring that in and now we want to see if we can actually view an item and modify that so let's check this out so if we go to new item perfect it's working we can view it and we'll just say updated let's make sure that we can actually save that and perfect so now our detail class based view works so the last one by this point you should see the pattern here we're just creating a class and separating the logic so we'll take that comment it out save it and then create a new class call this task delete throw in request no not that and we'll throw in view see I got lazy there and messed that up here so we'll just call that task just got ahead of myself separate this by get and post pass in self request and we do need the primary key so we'll throw in PK there and we'll just go ahead and return the actual task here so this is where task based views actually Thrive because you're going to see us rewrite some code here I won't get into the actual extending of the view because that's not the purpose here but this is where we can actually save a lot of the logic here so we get our task and then we simply return it and pass that in through the context dictionary okay so we have the context and then we just return that value now for the Post method let's go ahead and create post pass in self request and PK so what I'm going to do here is actually get the same task and then we're going to go ahead and delete it now this is going to be actually done in another method here and where we we actually don't have to query that task twice so there's different ways of doing this again that's the part that I'm not getting into because we're sticking to the core methods but this is where class based views can actually save us a lot of that headache right here of having to rewrite our code it helps make our code more reusable so we get the item this is where we ask the question and then we delete it so let's just make sure delete works here so I'll refresh it looks like we have an issue let's see oh I forgot one thing here and that is in the URL we forgot to change this to as underscore View okay let's go ahead and save that what's our issue now as view PK um looks like we forgot something in here yeah I forgot the colon there all right now we should be good so we'll go here we'll go to delete tasks so get method works and the post method Works awesome that's it for that conversion process so let's go ahead and just see what we did so all we had to do is we had to change our function to a class right here we go ahead and extend from the view or the base view class we separate our logic by HTTP methods we had to add in self before that request object and then we added in as view so this is a very simplistic way of looking at things again when you're going into the built-in class-based views they can really save you time there's ways to abstract all of this and make it better but we're not getting into that so I hope this actually teaches you something and you understand class based views uh just a little bit better so I'll see you all in another video

Channel: Dennis Ivy

Views: 28,610

Keywords: Programming, Software Developer, Dennis Ivy, Dennis Ivanov

Id: -3BN-JMLE0A

Length: 11min 58sec (718 seconds)

Published: Mon Jul 25 2022