Create A Blog Profile Page - Django Blog #30

what's going on guys john elder here from konami.com and in this video we're going to create a profile page for our blog with django and python alright guys like i said in this video we're going to create a profile page for our blog but before we get started if you like this video you 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 codamy.com where i have dozens of courses with hundreds of videos i teach you to code use coupon code youtube wanted to get thirty dollars on membership that's all my courses videos and books for one time fee it's just 49 which is insanely cheap okay so in the last video we set up our little user profile that we set up the model for a couple of videos ago to show up on you know underneath every blog post so when a user makes a blog post their little profile snippet thing with their picture will show up at the bottom of that blog post but now we want to create an actual page so like uh you know if we clicked on john elder if we clicked on this picture or something it went to that user's actual profile page and had all this information in a maybe a nicer format now we're not going to do a whole lot of formatting on that page right now we're just going to build the thing out in this video so let's head back over to our code and this is going to take a little bit of tricky work but it's not too bad so let's head over to let's close out some of these now let's go to our members directory and our urls.pi file and remember this is the urls.pi file for our user authentication stuff right so registering signing in signing out editing our profile and things like that messing with the password and when we click on one of these things we head back over here it usually goes to for instance edit profile it goes to this members you know slash members directory in our urls and i think if we're going to create a profile page for each user for each member it should kind of stick in the members it should have a members thing in front of it so it'd be like members slash four for their user you know id slash profile page or whatever so because of that i'm gonna put it in our urls.pi file in our members directory now this could really go anywhere it really doesn't matter at all but um i don't know i just kind of think i want to put it there so we're going to put it there and since we're going to put it there let's go ahead and create the view in the same members directory as well so let's knock that out real quick so let's just come up here and this is going to be a class and what do we want to call this let's call this show profile page view because all of these are sort of ending in view right now what do we want to pass in well whenever we look up like a blog post that specific blog post page is a detailed view and this is sort of the same thing we've got a bunch of users we want to look up a specific user so we'll put this in a detail view so let's go detail view now i'm not sure if we've actually used detail views in this this view yet no it doesn't look like it so let's just go from django.views.generic import that detail view okay so inside of here we want to do what we usually do we set the model now we're going to be pulling our user profile information so we need to use our profile model right and let's go template underscore name let's set this equal to registration slash what user underscore profile dot html i think that looks good so let's go ahead and really quick quickly create this user profile page so we want to go into our templates in this members directory and then into our registration and then let's create a new file and let's go file save as and let's save it as user profile and i'm just going to come up to our let's see the blog directory and any of these other templates and for instance i don't know let's say let's just say the home page and let's just copy this whole thing and just paste it in here now we don't need all of this stuff on the inside here and here let's put user profile dot dot okay let's just save it like this for now so okay let's head back over to review now in order to do this we need to do some weird stuff every time a user goes to a profile page we need to look up that user's profile right and in order to know what user to look up we're going to need to pass our view their id number right so where do we get the id number well we're going to get that from the url in much the same way we've done it in other urls so we can come back here well let's go back to our the blog directory and look at that urls.pi file remember in the past we've passed this int pk thing and this is the primary key or the id of a thing we're going to do the same thing we're going to pass this npk into our path in our new url that we're about to create so let's just create that url real quick so let's see let's close this out we want to be in our members directory and this urls.pi file and make sure there's a comma at the end of your last one and let's create a new path and like i said we're going to pass in int pk so which that's the number so it'll be our www dot whatever slash members slash 4 whatever this pk is slash let's just say profile right and then we want to pass in that view we created so we called it show profile page view right so show profile page view dot as underscore view that's a function and let's give this a name equals and we get to call this anything let's just call it show profile page and let's give this a comma okay so now to use this show profile page view we have to import it here uh just like we've done up here for other ones so let's import that there okay that looks good so now we need to be able to get this int pk thing in our view and we've done this in the past with other views so let's head back over to our the blog directory and look at that views.pi file and we want to just kind of come down here and look and let's see we want to come to one that has we're grabbing context data and this is one right here basically we just need to copy this i'm going to copy it from my home view and this allows us to grab the context data that we pass in either through this view or through the url as an id number whatever these argus and quarks are we can grab it using this little snippet of code so let's copy this and let's head back over to our views.pi file in our members directory and in our show profile page view that we're working on tab over and let's just paste this all in now we need to make some changes obviously first we are not using the category model we're using profile model right so we want to call all the profile objects from the database and what do we want to save this as let's say this is users instead of cat menu right now context is the context variable that we're going to pass in just like a functional based view even though this is a class based view so we set super instead of home view we want to pass in whatever class this is so let's just copy and paste that and then the rest of this is the same self get context data we want our args and quarks okay and then you know we probably don't need to grab everything from the database right so instead of grabbing everything let's just grab a specific user let's call it the page user so whatever profile page we're on that user the page user just call it that call it anything you want and we want to get object or 404 and i think we've we've played with this before and then we want to call the profile model and we want to look up an id of self dot orgs and then we want to pass in our primary key and this primary quick key we're getting from self.korgs which is getting passed in through the url so this will make sense when we actually look at this so okay so now we've got this get object or 404 thing we need to import this up here at the top and that's in let's see that's in django shortcuts so we already have render we can just pass in get object or 404 there so okay that should work okay so now we've got our user in page user we need to now pass that into the page itself through the context variable so we can just instead of calling cat menu we were doing the category menu with this earlier we pass page view and then set it equal to page user right okay so this will just pass the only the just the user itself now we're using the model profile and i don't think we've actually imported that up here yet in this specific views.pi file uh no it doesn't look like it so let's import that real quick so we want to go from blog dot models import profile and in the past we've done things like from dot models import profile right that's the normal convention but see in this specific directory in our members directory in our models.pi file our dot models there isn't anything right this profile model is in our let's see it's in our the blog directory and our the blog app in that models.pi file right here so here's our profile model right there so in order to reference that we call blog dot models because oh wait uh the blog there we go uh because this directory is the blog so we're calling the blog dot models okay makes sense okay so let's look through here this is looking pretty good we've got our page user we can pass in our page user now we can reference it by referencing this referencing this context variable on the page so let's copy this and head over to our user profile and up here well just for right now let's just output this to the screen just to see what's going on here right so okay we can save this now in order to find these profile pages we need a link to them from any user's profile so let's head back over to our the blog directory and let's see our article detail page remember this is the page that posts that has the blog articles themselves the actual blog entries and at the bottom of these as we worked on in the last video we've got our author bio and all that good stuff so if we head back over to the website and look let's just let's just pull up one of these this is down here maybe we want to make this image clickable or maybe we want to put a link here so instead of the website we want to put profile page a link to that first so let's just do that that'd be easy so let's head back to our code and let's look at look at these are the actual links right so let's add a little pipe to this one right there and above this let's create a link so ahaf equals and let's call this profile page and inside of here and let's also put a little pipe after it and inside of here we can create a django url tag and where we want to put this we want to point this to well let's head back over to our members directory and our urls.pi file and here's the url we created and what did we call it we called it show profile page so let's head back over here and we want to point that to show profile page but we also need to point it we also need to tell it which profile to look up right so that is going to be post dot author dot profile dot id and we can just pass it in like that so post author profile id why because on this page we're calling things from post author profile and then stuff so the website url the facebook url the image whatever the first name the last name in here we want the id so okay that should work let's go ahead and save this now we down here we have profile page and we've got an extra bar so let's take that one off really quickly so after a profile page just take that okay and actually this bar we want to put outside of the a ref tag so it's not a link okay so let's go and save this and take a look it really okay so that looks better so now profile page and when we hover we see it's down here in the bottom left it's pointing to members slash one slash profile and when we click this it goes to that user profile and it says admin right okay so the page itself is set up now does this work even when we're logged out so i'm gonna open in a new tab so now we're logged out now if we come back here and hit reload this still works even though we're not logged in so that's good we want that so okay now we want to just sort of mess with this page itself so for now i'm just going to copy this thing here and output it on this page just so we can see how to grab the information and then later on maybe we'll make it look nicer like a real profile page but for now we're just going to kind of copy and paste that stuff so let's head back over to our code and let's head over to our article detail page and let's just grab all of that stuff at the bottom so let's see profile picture all right so i think it starts right here i'm just going to copy all of this stuff bring it over to our user profile and underneath our page user let's just paste this in now first things first whenever the user doesn't have a profile picture remember from our last video we're putting up that generic uh profile picture let's see right here and it's using our static directory so we need to use our static file so go to our article details page again at the top we can just copy this load static tag bring it back over to our user profile page and paste that in okay so now in order to call all the different things right we we're getting all of our user information from our page user context variable we're not getting it from post.author.profile so we need to come through here and change all the instances of this to this so we could just come through here if post author profile would just change it to page underscore user dot profile pic and same thing here and this one looks fine and it's a little different here for the first name and the last name because remember our first name and our last name are part of our original user model they're not part of our profile model right so we need to designate this as pageuser.user.firstname and pageuser.user.lastname so that's i think the only instance of that here the rest of these will just change by changing this well actually this is the link to the profile page itself so we don't need that and let's get rid of this bar here okay so post author profile boom change that post author profile boom change that and bear with me this will just take a second to go through all of these and change them post author profile post author profile post author profile and pro stop for every once in a while we have to do tedious stuff like this but that's not too bad should only take a minute so almost done post user profile and then down here for the bio we've got that as well so okay let's go ahead and save this head back over to our site reload and boom now it works and remember and you see up here it says admin we can get rid of that uh we just put that right here so we'll get rid of that save it hit reload and you'll notice i've logged out so we're not even logged in and this is showing up actually let's let's put some line breaks we're not animals let's put a line break there all right pops that down a little bit so okay now obviously this is not great because this is just basically what we have here we've just put it right here so you can go through here and style this any way you want you can expand your profile model to make a longer bio section if you want you can add anything you want and it will now show up here now we're not even logged in and yet this is still working so let's log in and let's log in as bob remember our user bob and now if we find let's see a bob post here's bob here's a link to bob's profile page and this is bob's bio bob doesn't have a picture but his thing shows up and you can see members slash two slash profile two is apparently bob right now we're not we're logged in as bob but we can still go to john elder's profile and and it still works so that is a quick and dirty way to create a user profile page and again we look through our view that we created actually we can get rid of this users we don't have to grab all of the information out of the the database here i just copied this from the last time we did it we just want to grab specific id of a specific person that gets passed in from the url so save this and head back and hit reload boom it still works and we can go forward or we can go back to bob's and his still works too so like i said just a matter of passing the context dictionary with the id that we get from the url that right here this one this one gets passed to our class the context dictionary through the args and quarks here we can then take that after setting up our context dictionary or our context you know variables we can grab the profile model look it up by that id that pk that primary key pk id they're almost always the same thing with django and many database things as well and we can pass that as page user get all that information from the database pass it in our context dictionary right here return context to the page itself and then on the page itself we can call page user dot whatever all of the things that are in the model the profile picture the user first name user last name the you know all the website urls the facebook urls twitter all the urls all the things that we put in our model and that just works so that's all for this video if you like to be sure to smash the like button below subscribe to the channel give me a thumbs up for the youtube algorithm at checkout codeme.com where you can use coupon code youtube1 to get 30 off membership page is forty nine dollars to access all my courses over 45 courses hundreds of videos and the pds of all my best-selling coding books join over a hundred thousand students learning to code just like you my name is john elder from konami.com and i'll see you in the next video

Channel: Codemy.com

Views: 7,811

Keywords: Django Blog Profile Page, Python Django Blog Profile Page, django profile page template, django allauth profile page, Django Profile page, Django Extend Profile, django extend user model profile, build django blog, build a blog with django, django blog, django blog tutorial, python django user authentication, python django blog, python django user profile, django blog tutorial 2020, python django user registration, django tutorial, django blog post, django user authentication

Id: zb4fIvtn4tY

Length: 20min 19sec (1219 seconds)

Published: Tue Jul 07 2020