Update and Edit Blog Post - Django Blog #6

what's going on guys John elder here from khou-tv common in this video I'll show you how to edit your blog post with Django and Python I guess like I said in this video we're gonna look at editing our blog posts but before we get started if you like this video I want to see more like it be sure to smash the like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and check out Co to be calm we're have dozens of courses with hundreds of videos to teach you to code use coupon code youtube wanting to get thirty dollars live membership that's on my courses videos and books for a one-time fee it just $49 which is insanely cheap okay so moving right along with our blog app here we've got posts here we can view them we can go back we can add a new one we've got styled forms everything's looking good but now say we want to edit a post there's no way to do that so that's what we're gonna look at in this video and it's super easy we've already got most of the things in place we can copy and paste a lot of it so let's just jump into it let's head over to our templates directory right click and let's create a new file and let's go file save as and what do we want to call this let's call this update underscore post dot HTML that's what we're doing we're updating our posts or you could call it edit post whatever you want doesn't really matter at all so let's head over to our C ad post at HTML and I'm just gonna copy all of this so let's copy this and bring it back over to our update post file and just copy and then just right click and paste this in and here for our title we can say edit blog post whatever and here instead of add post let's say update post and then the rest of this is gonna stay the same stuff where we could change our button here to update something like that okay so let's go ahead and save this and notice we're using the same form method equals post the same CSRF token the same form as P tag that we used for our add post page because this is gonna be a form on this page that will have our information from our blog post so that we can then type and edit it however we want so it makes sense that there's a form and then we'll sort of propagate this form with the information automatically and I'll show you how to do that in just a second so alright go ahead and save this now let's head over to our view spy and up at the top here we've so far imported a list view this is to list all of the blog post on our home page we've imported a detailed view that's to show just one blog post after we click on it we've got this create view which we use to actually create the posts now we want to do any guesses could go either way edit view update view update view okay alright and this update views gonna take care of most of this stuff for us just like these things did for their their things so all right we need to come down here and create a new class and what do we want to call this thing let's call this update post view and we want to pass in that update view that we just added and same thing with all the other ones we want to go model equals post to tell it which model we want to use we want to go a template name equals and what did we call this update post so that would be update underscore post dot HTML and now here we need to add the fields and we can do it like this but we could also do it with square brackets really doesn't matter and what do we want to update in our blog post well we want to update the title and we probably want to be able to update the title underscore tag remember that's the HTML tag at the top of the browser tab that we did a few videos ago and we definitely want to do the body now let's save this and let's look at our models dot PI file so we've got a title a title tag and author and a body I think I'm gonna leave out the author because we probably don't want to change the author we are always gonna be the author so we'll just leave that one off so okay let's head back over to our you've used up high file here and let's take a look at this and okay that looks pretty good now in our add post we added the form and we don't have to do that here it already take care of it for us in the update view thing that we just imported so okay so we've got our template file we've got our view now we need our URL anytime you create any pages with Jenny go as you know it's always a three-step process there's always a URL of you a template file so let's see let's make sure we have our comma at the end of this guy and we do so let's create a new path and we want to put this in let's say article slash edit slash and then we just want to add this exact same thing that we did for our article detail view right because think about it when we click on one of these things we want to be able to edit a specific page so what page do we want to edit well this integer PK which is a primary key which is the ID that every single blog post gets automatically in the database the same exact thing we did here I'm just calling it slash edit instead of article nothing because we've already got article nothing right here right so okay that looks good and then we also want to let's go back to our views DUP high file and copy the name of this guy and so we want to paste that in there and then it's dot as underscore view just like all the other ones and then we want to give this a name let's say update underscore post and it's put a comma here and then up here at the top just like all the other ones we need to import that update post view okay okay that looks good so almost there now all we need is to create a URL because if we go back to our our thing here you know there's nothing here that we can click on that says edit and when we go to this thing there's nothing up here that we can click on that says edit so we need to create those two URLs wherever we want it but I would probably put it on both of these pages now right now anybody can make a blog post and anybody can edit them now that's not the way we're gonna want to keep it obviously we're gonna want to have some user authentication and we'll do that you know coming up in in future videos when we do that we'll have certain logic in there that says if the user is the correct user of its logged in user then they can edit but for right now we're just gonna put the link on the page and just forget about it and not worry about it until we get to the authentication stuff so okay let's head back over to our C templates and our home dat HTML file and where do we want to put this little link let's look back at our pager maybe right after the author so John elder - and then we'll put a little edit link maybe but anywhere you want really put it at the end but let's do that so let's look through here here's our post title here's our person author first name post off their last name so right here let's put a link and I'm just gonna leave it blank for now now let's call this edit post or just edit and then close it and then inside of here basically we want this exact same thing with just a little tweak so we can copy this this is the link to the actual post itself right but instead of giving it going to article detail we want it to go to whatever we name this thing update post so I can just copy this and go home and then let's see paste that in there and again we're gonna pass the post dot PK the primary key of the post so we know which post we want to edit so all right let's go ahead and save this and see if that works so come up here and hit reload and boom now we have edit buttons next to all of our little thing and maybe you want to you know wrap these in something like this or you know like that hey whatever just playing around at this point yeah that looks good or maybe you want to wrap it in a small tag you do that and then close our small tag there save that okay so that's a little smaller whatever you like go ahead and play route that now let's click on one of these and see if it actually worked so we click this and boom it goes back to our post right it says update post we're getting the same non styled stuff here so we can take her with that if we like but here's here's a title style blog post here's the title tag bootstrap CSS this is a post where the form was styled with bootstrap and now edited and up here for the title I'm gonna say edit and now we can click update and boom it goes back to our home page and okay and now here we see style blog post edit alright if we click on this guy it's just this post where the form of style with bootstrap and now edited whoo and it at a TD alright so I misspelled edited so we need to edit that well there's nothing on this page that we can click on to go to an edit page so let's add that real quick so let's head back over to our code and I'm just gonna grab this whole thing and copy it cuz I suspect we're gonna use the same code here so let's copy this and now let's head over to our article details page this is the page where each blog post gets put on the screen right here by John elder let's put it right next to that that looks good to me so that would be by post off their first name post offer Austin last name and we've already got small tags so we don't have to put that in there so let's just let's just paste this whole thing now we don't need this small tag obviously we'll get rid of that and we don't need the closing small tag that we had earlier okay so kay that looks good so let's save this and head back over here and hit reload - boom now we get this edit thing and we can change this from edit eed to edit Ted update it boom it goes back to the home page and let's see and it's been updated now it's going back to the home page when we click update because if you remember our models PI file we told it to go to home after we've submitted something we could also have it go back to the main page itself the blog page itself and I've got this one commented out so uh you know you can uncomment that if that's what you want it to do but I like just returning back to the home page after we do something edit it or post something so I'll just keep it like that okay so so far so good let's head back over here and let's see click this again and here again we've got this unstyled stuff because we're not actually using the bootstrap form that we did in the last video so I think we can change that if we want let's see let's head back over to reviews dot pi file and in our add Post view we designated which form we want with form class equals post form so we could do that as well right here but we might have some trouble with this so let's go ahead and save this come back here and hit reload and we do you can't have a fields and the form class in a specific view when you call these so if we um if we comment this out the fields and come back and hit reload now this works but we've got this admin thing here right so you could just sort of live with that and that's fine with me because I don't really care maybe we do want to update the authors in the future so it would be good that we had that so let's save this real quick just to make sure this still works with this new fancy form I'll put edit two in the title and then we click update boom it goes home style blog post edit too and it looks like it worked and if you click on it yep there it is click here boom there it goes back now if you don't want all of your fields here and you might not i fairly simple to to change that i head over your forms dot pi let's see oh yeah there it is and you could always just create another one of these right so let's try that real quick i'm just gonna copy and paste and let's call this edit form and here instead of the title tag we could just comment that guy out and same thing here well we can't comment it out here we gotta have actually remove it but we could do that and our model is our post and all that's good so let's copy this and head back over to reviews dot pi and up here at the top from forms import that form as well now we can just come down here and designate that save it head back over here reload boom now the author thing oh i got rid of the title thing why didn't you say something all right let's head back over to our models dot pi now let's head back over to our forms dot pi and yeah i got rid of the title tag man i was not paying attention it's Monday morning here in vegas so we want to get rid of author and we can get rid of our here ok all right so save this now head back over and boom authors gone our title tag is still there and alright that looks good so let's edit this one more time edit 3 click update boom now it's a style blog post edit 3 that seems to work we can edit it there and we're good to go so very very simple to start using different forms anytime you want to just do what we just did head over your form stop I just create a new class name it something else do whatever you want to do in it and then just import it in your views PI right there and then just you know start using it so pretty simple and that's how you edit forms so we're almost done with the sort of nitty-gritty stuff we still need to be able to delete a blog post and we haven't done that yet so we'll do that in the next video but that's just as easy as all the rest of them have been so far we're gonna you know I won't give it away but I think you can guess what kind of view we're going to import up here all right we had detailed view list view create view update view now we want to delete things but I'll leave that to the next video unless you want to just try and figure it out on your own but you probably can't at this point but it's a little tricky so I wouldn't there's a couple little things that are different so I will just leave that till the next video so that's all for this video if you liked it be sure to smash that like button below subscribe to that channel give me a thumbs up for the YouTube algorithm and check out Cottam e-comm or you can use coupon code youtube one to get $30 off membership they pay just $49 to access all my courses over 40 courses hundreds of videos and the PDFs of all my best line good coding books join over 100,000 students learning to code just like you my name is John elder from khou-tv , we'll see in the next video

Channel: Codemy.com

Views: 21,254

Keywords: Django Edit Blog Post, Edit Blog Post Django, django edit view, django edit view example, Django EditView, python django edit view, python django editview, django updateview tutorial, django updateview template, Django UpdateView, Django Update View, UpdateView, Python Django UpdateView, Python Django Update View, Django Blog, Django Blog Tutorial, Django Blog App, python django blog tutorial, python django blog app, django blog, django tutorial, how to django

Id: J7xaESAddDQ

Length: 14min 52sec (892 seconds)

Published: Mon Apr 13 2020