Add Blog Posts To Django Webpage - Django Blog #2

what's going on guys John elder here from Kota be common in this video we're gonna continue building out our blog app with Django and Python alright guys like I said in this video we'll continue building out our blog app with Django but before we get started if you liked this video 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 be sure to check out cody be calm where i've dozens of courses with hundreds of videos to teach you to code use coupon code youtube one to get $30 off membership that's all my courses videos and books for one-time fee HS $49 which is insanely cheap okay so in the last video if you didn't see it check the playlist below in the comments section we created our basic django app and we added our model so we're gonna have a title and author and a body we also added a couple of blog posts via the admin area on the back end but now when we run this thing blow up our website all we have is this hello world so in this video i want to put the blog posts that we've created those two on the screen on the web page and then also make them clickable so if we click on the title we can go to the actual page and then read the actual blog post so that's what we're gonna do in this video and it's it's not particularly difficult but it is a little different than we've ever done anything before in my past django videos and the difference is in the views so we've got our basic home view here right and we're passing in our request then we're rendering that request and showing the home dot HTML template file that's usually how we do things with django but we're gonna do a little bit different now we're actually gonna use class-based views which are completely different than this they're not any more difficult they're just sort of different right so we need to come up here to the top and we actually need to import some things we're gonna be using some generic templates that come with django to see some list views and some detail views i'll explain what those aren't just a second but for now we can go from django dot views generic again these are just generic views that we can use import and we want to start out with list view and palace add detailed view and what these are is the list view this will allow us the list basically a query set into the database so it will do a query set for us look up all the records in the day and then bring them back that week and then list out on our webpage the detail view is sort of the same thing it makes a query set to the database for us but it just it brings back like one record the details of one record right so think of it like that so think of lists as all of our blog posts and think of detail as just one blog post so we're gonna call the list to make a list of them on the webpage and then when we click on any individual blog post we'll use the detail view to view that blog post right and the reason why we use these is because it just takes care of everything for us we don't have to actually write query sets and we don't actually have to output the output on the screen well we do a little bit but it's it's much easier and if we were to do all this stuff by hand so I'm just gonna come over here and let's comment out this old home view that we did in the last video we're not gonna need in anymore so let's create our home view using class view so we just type in class this is a class and I'm gonna call it home view you could call it home you don't have to call it view but we're using these list views and detail views so I kind of like to be consistent and keep the same sort of conventions in naming like I said you don't have to you could just name it home if you wanted to so okay now instead of passing in the request like we normally would like right here we're gonna pass in this list view because this is our home page and we want to list all of our blog posts on the home page okay so now we need to define what model we want to use and we want to use our post model remember if we look at models pi we created this post model that's the only model we have right so it has the title the author in the body of our blog posts so that's what we want to designate as our model now we can designate what file we want to do you know right here we used home dot HTML well we can go template underscore name equals and we'll just designate the same page home HTML it's already created it's already ready to go it's already sitting in our templates directory okay and that's that's it that's all we have to do to create our view so pretty simple you know not any more difficult than the old way just just different right so ok now let's head back over to our home dot HTML and now we need to kind of tweak this to put all of our blog posts on the page now we're gonna make this look nicer later on this is just a blank white page for now we'll style it with bootstrap and whatever later but for now I just want to slap up all of our blog posts onto the page so we just create some embedded sort of Django here and so let's do a for loop so let's go for post in object underscore list and our object list is the query set like if we're gonna go to the database query the database pull back all over the blog post that's our object list so that's all of the blog posts and we want to loop through them and then print out each one onto the screen individually so that's why we have a for loop and whenever we do a for loop we want to end our for loop I'll just do that now now inside of here we can do whatever we want so let's put let's put the post dot title right let's put the post dot author and remember our our database our model is the post model so if we're doing here for post we just called this post right here because it's a post model we could have called this anything we could have called this X for X and object list and then we would have went for X and X you know same thing but I do post because that makes more sense to me and then let's also do post dot body now maybe we want to put this in an li so let's put these things and we could do that we could go a list item right and here I want to put well yeah let's keep this all in the same line but I want to put a line break there and since this we're using an Li we need to create an unordered list on the outside of this for loop okay so if we save this that should do it this will loop through all of our blog posts put the title and the author on one line drop down put the post body on the on the next line and then list items stuff so okay let's save this okay so that looks good now let's come back to our views this looks good now we're calling model right here a model equals post we have to actually import that in order to use it so up here from the top we'll go from models which was our models PI file we want to import post okay so that's good now there's one more thing remember sort of think back to the earliest Django you ever learned whenever you can create a web page it's always a three-step process you have your view you have your template file and have you euro are up your URL right well we've got our new view we've got our template file but we don't have a URL this is the old URL and we're not using these types of URLs anymore now we're using the class-based views so we have to use class-based view URLs I guess so we can comment out this we don't import views anymore instead we want to go from dot views import and then we just want to call whatever we call this class so we want to import the home view ok so boom and then down here we need to create a URL let's go path and we want this to be our home page so double equal or double single quotes and now this is gonna be home view dot as underscore view and we also want to name it let's just call it home okay now the reason why we're calling this as as view is because we're using class-based views and now let's view detail view boom and that's just how that works so okay let's see that looks good so now we can come back here and reload make sure our servers running so run server come back here reload boom here we go here's our homepage post the first by admin this is my very first blog post I'm very excited my second blog post by admin this is my second post honestly it's not really as exciting as the first one and this is horrible formatting right we don't care we're gonna make it look nice later on for now I just want to show you how to put the stuff on the screen so check it out here's our admin right this is the author when we came back here and on our home page we call post author we could also call post author dot first underscore name and then we can do we just copy this and do a another one oops that should be named with an E and then post on author dot last name right and this is straight from the admit area where you know we set up our super user way back at the beginning a last video we could also put email we could go you know post author dot email all right so if we save this and come back and reload now it says John elder or John at Khoda me calm so anything in our model we can use Python is object-oriented we can just slap a period and then call the thing so you know in this case what we're doing is post on author dot first name post dot author dot last name I'm going to take off this email I don't really want us have email floating around out there so if we save this come back and hit reload boom John elder so you can put the username you can put their first or last name any combination whatever you want so post the first my second post okay so doing pretty good here that was pretty simple how are we doing on time Oh lots of time so let's go ahead and make these titles clickable and then throw up their own page and you know for each blog sort of article blog post or whatever you want to call it so how do we do that well first things first we need a new template file because each of these will be a web page and right now all we have is our home dot HTML so let's go over to our templates directory right click and new file let's go file save as and we can call this really anything we want I'm gonna call it article underscore details dot HTML cuz we're gonna use the detail view right these are our blog posts or our articles whatever you want to call them so I'm gonna call this article underscore details really it doesn't matter what you call it and we'll just leave that there for now now let's head back to our view spy file and remember at the beginning of this video we imported list view and we import a detailed view now we want to use detailed view so let's come down here and create another view so class and we can call this article detail view or article detail or article view or whatever you want to call it really doesn't matter but we want to pass in this detail view right and again we want to designate the model is gonna be post and we want to say the template underscore name equals that file we just created it was article underscore details dot HTML which is this guy right here and okay that's all there is to that but now we need to import this view into our URLs so let's go ahead and copy that and head back over to our where we go URLs so up here we we imported the home view now we also want to import the article detail view right and we want to create a new path for it and where do we want to put this we want to put this in sort of looks like its own directory called article so gonna be ww-whatever com4 / article 4 / whatever what is the each each blog post will then have its own little name what is that well we can create that with these two little brackets and we could just go int PK so PK is private or the primary key of each blog entry whenever you create an entry you know whenever you put in a new blog type in a new blog entry it gets assigned its own unique ID number right Jango just does that on the backend the database just does that on the backend and most databases when you make an entry into a database they will assign a primary key to that entry that's so that every entry in your database is unique right so if later on I want to delete an entry I wouldn't delete post one I would delete the post with primary key one and each post has its own unique primary key and that's how they do that so we can reference that unique primary key in our URL just by calling it's an integer you know a number so it's the primary key so the first blog post will be articles / 1 the second blog post will be article / - right so then it will just create it for us automatically based on its primary key so then we want to grab this thing again just like we did here alright so we want to go article detail view dot as underscore view boom just like we did right here right and then we want to give this a name so we can reference it as a URL later on and I'm just going to call this article - detail details maybe berkel detail and this needs to be in quotation marks obviously okay so let's put a comma at the end of that okay so our urls are set and now we need to go to our home page and actually create a link for each thing and i think i want to make the title linkable so i'm gonna go a her f and then close our a her f that's just a basic HTML link tag and now inside of here we can call a django URL right so a URL tag and then what do we want that to point to well we want to point to article detail - detail and the reason why we pick article detail is because in our view or in our URL we named this link article detail any time you're doing a django link you reference the name of the URL so we want this article detail but here is a little tricky because depending on which one we click on it's gonna be a slightly different PK and we need to reference that in our in our URL so go back to home and so it's really easy we just go article detail and then put a space and it's just that post dot primary key alright so like here we go post author post title post body here we're calling post piqué piqué stands for primary key it's the unique key of that post right which then gets passed to this thing and then the thing gets created so okay save this save this save everything you save our view now finally our article details dot HTML page we need to actually put what with what we want to put on here so again we're not gonna put any styling or anything right now let's just put let's make this an h1 tag so you know the title is big and tall and we can just reference again just post title and we don't have to put this in a for loop remember our home that HTML we put this in a for loop that's because on our home page we had a list we had a list of all of our blog posts and we had to loop through that list and print out each one we're not doing that here we just have the detail here there's just one one blog post so we don't have to loop through and we could just reference whatever we want a reference so we can go blog title and then here we can go small maybe and then we can say bye and we can go post dot author dot first underscore name and then you just copy all this print it again with last name so close our small tag and then we can put maybe a line break or maybe we want to put a horizontal rule or something and then a line break whatever you want to do like I said we're not really gonna do styling in this video we'll do that later then finally post dot body okay and we save this and head back here and hit reload boom now these have links so if we click on here boom post the first by John oh did I misspell last name name name well man it's Friday last name let's save that alright so by John elder here's our horizontal rule this is my very first blog post I'm very excited right my second post this is my second post honestly it's not really as exciting as the first one and you'll notice up here so we've got articles / - right if we go back and click on the first one article slash one okay pretty cool so let's see what else can we do we can put a little back button on here if we wanted to down here we could do a couple of line breaks and we could go a her f equals something let's just say back and we can do a Django URL tag again and instead of pointing it anywhere so people just point at home right so we save this it reload now there's a back button which takes us back okay very fancy but we are starting to get a little bit of navigation in and just that easy so you know this blog stuff with Django is pretty easy so far we've got the ability to put our blog post on the screen now we still have to go back the eminent to create a new blog post and we'll fix that later so we'll have an actual web page where we can type in our blog post and then we will also want to make these editable so it'll be a little button here this is edit so we can edit them if we want after they've been created and all that good stuff and we'll get into all that in the next few videos but yeah moving right along and I think you'll agree that this is a pretty simple so far we haven't done anything all that complicated but they're pretty powerful we've been able to do some cool stuff right off the bat and a lot of fun so that's all for this video if you liked it be sure to smash the like button below subscribe to the channel give me a thumbs up for the YouTube algorithm which really helps out the channel I really appreciate it and check out Cody Meachem or you can use coupon code youtube one they get $30 off membership say pay just $49 to access all my courses over 40 courses hundreds of videos and the PDFs of all my best-selling coding books join over ninety five thousand students now learning to code just like you my name is John elder from Kona be calm and we'll see in the next video

Channel: Codemy.com

Views: 40,063

Keywords: django listview and detailview, Django Listview, Python Django listview, Django python Listview, django detail view, django detail view tutorial, django detailview get object, django detailview, django class based views vs function based views, django class based views form, django class based views tutorial, django class based views, django class views, django blog tutorial, django blog project, django blog app, django blog, django basic blog, codemy, john elder

Id: CnaB4Nb0-R8

Length: 19min 46sec (1186 seconds)

Published: Fri Apr 03 2020