Profile Page With Followers - Django Wednesdays Twitter #5

what's going on guys channel here from codemy.com and in this video we're gonna build our individual profile Pages for our Twitter clone with Django and python all right guys like I said in this video we're going to start to build out our individual profile pages but before we get started if you like this video I want to see more like and be sure to smash like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and check out codemy.com where I have dozens of courses with thousands of videos to teach you to code use coupon code YouTube 50 to get 50 off lifetime membership so my courses videos and books for one time fee which is insanely cheap okay like I said in this video we're gonna start to build out this profile page we're going to add the follows and followers section as well super quick announcement before we get started I've been mentioning we're going to change the code to be memberships we've done it we now have a monthly membership option for just 12 you get all my courses on my future courses just 12 a month there's no long-term contract you can cancel that at any time 30 day money back guarantee we also now have a yearly membership for 99 a year and lifetime membership for life one-time fee has gone up to 249 and with all of these membership levels you get all my courses you get all my future courses at no extra charge they just pop up in your account to sign up for any of these just come down here and click on the individual one that you want there you go boom 12 a month and that's all there is to it so okay like I said in this video we're going to do this profile page section so let's head over to our code I'm using the Sublime Text Editor and the gate batch terminal as always and as always you can find a link to the code in the pin comment section below as well as link to the playlist with all the other videos in this Twitter clone Series so check that out if you haven't so far so the first thing I want to do is head over to our urls.pi file and we're going to create profile pages so we need a new URL here so let's go path and I want this URL to look like profile slash and then the ID number of the user so to do that we can go int short for integer and just pass the primary key of the user into the URL so all right that looks good there now we need views dot profile we'll create that in just a second and let's give this a name of profile stick our comma at the end of that make sure this line has a comma at the end of it as well okay so that looks good now we need this profile view so let's save this and head over to our views.pi file and let's just come down here and Define a new profile we want to pass in the request now we also need to pass in that PK that primary key right so that will allow us to look up the individual by their ID number so if we go to your website slash profile 12 that will look up user number 12 and we need to pass that 12 right here into here so we can look up 12 right so the first thing we need to do is make sure that the user is logged in so let's say if request dot user dot is underscore authenticated because this is going to be a specific user right you want whoever's logged in to look at their profile this isn't going to let you look at other people's profile just yet we can tweak it for that in a little bit but right off the bat I just want to make sure that a person is logged in first so let's create a variable called profile and we need to now query the profile model to get that person so here we would go profile Dot objects.get and what user do we want to get we want to get the user ID D equal to that primary key that we just passed in so we want to also make sure that profile has been added up here yes we've imported it from Models right there so we can access it okay so now we can return render request and let's show the page profile dot HTML we haven't created that yet we will in just a second and we also want to pass in that profile so we go profile profile there we go that will allow us to access all this profile information with this profile variable on the page so we also need an else here and I'm going to copy this stuff from our last video and we'll just throw up a little error message that says You must be logged in to view this page and redirect them back to the home page so okay that looks good now let's create this profile.html page so let's head over to our templates right click and create a new file and let's go file save as and save this as profile.html and if it didn't pop up right away here you can go up to project refresh folders and then boom there it is and now I'm just going to go to my home.html page and copy all of this stuff and paste it in because we want to extend our base grab our nav bar and here let's say profile for now and we're going to tweak this in a second but let's just save this and make sure everything's looking okay and okay so let's look through here again real quick because I feel like ah yeah we need to wrap all of this in Brackets okay that looks good let's go ahead and save this head back over to the website and check that to make sure everything looks okay so let's go to profile forward slash two okay so that's good it says You must be logged in so let's hit our admin area and log in real quick so now we can go to profile slash two and that one doesn't exist uh flash six okay so we see this as profile and okay instead of going to profile six let's put a link up here in the nav bar that goes straight to our specific profile and we can do that fairly easily head back over here and let's go to our nav bar and I'm just going to grab this profile list link and paste in another one and let's just say I don't know my profile and here for this URL it's going to be profile but we also want to pass the request Dot user.id now if we save this and head back over to the website and hit reload and we hover over this you see profile one down here in the bottom is highlighted because I'm the admin and I'm the number one guy right my profile my ID number is one since I'm in Min so okay that looks good now if we log out and then go back again we get an error so above this link here in our nav bar we can do a little bit of code here and say if user dot is underscore authenticated and then here we want to end our f okay so if we save this head back over to the website and hit reload now we can see the home page but that link doesn't exist right but if we log in again and then go back to our home page that link does exist so okay so far so good so now let's play around with this profile page and this is the fun stuff let's head back over to profile so so first off I want to make sure that there is a profile right so if we've wandered into some weird place or added a number that doesn't exist as a user ID or whatever let's go if profile and here I can end my if and here let's add in the actual profile so that's going to be profile Dot user.username and let's put a little apostrophe s on there okay that looks good let's go ahead and save this head back over here reload and now we see admins's profile that's not what I want there we go Okay so we've got the profile now let's say follows and followed bye so we want to list who you follow and who follows you back so how do we do that well we need a for Loop so let's go four and I'm gonna call this following in and access who we follow that's just profile dot follows dot all and right away I'm gonna end my four because I always forget and if you don't remember what this profile dot follows.all is you can head over to your models.pi file and in our profile model here we have this follows thing that we set up way back a few videos ago and it's a many-to-many field and it has everything already set up and ready to go so we can put a little at sign and then the actual person by typing out following so let's put a line break after each one save this and let's see if this worked so head back over here hit reload and follows up we got we need a line break here too and let's put one right here as well while we're at it okay now admin is following April Bob and Wes and that's cool now we can make these into links if we want just by wrapping this whole thing in an A or F tag then we need a closing tag here and inside of here this is just going to be a link URL tag and we want to point it to profile and this is going to be following Dot user.id so if we save this and head back over here and hit reload these are now all links we can click this boom it goes to April's profile April is following in Min and Bob we can click on here we go to Bob's profile Bob is following just west very cool I'm going to always go back to ours so that's follows pretty simple now how do we get the followed by well head back over to remodels.pi file and you'll notice here we have this related name followed by and the related name definitionally is sort of the opposite of whatever this thing is so if this thing is follows the opposite is who's following you and that's what the related name field does just automatically we don't even have to do anything all we have to do is reference this followed by name so we can do that super easy head back over here and let's put a couple more line breaks here down here same thing we just need another for Loop so let's go four and again let's call it following why not and this is going to be in profile dot followed underscore by dot all and again right away I'm going to end my four because I always forget and same thing we can just grab all of this here paste it in and that should be good so let's go ahead and save this head back over here reload admin is followed by April April follows admin and Bob and is followed by admin and Wes click on Wes a bunch of people follow us less follows April April follows it man also a man is followed by April only and that's it very cool pretty simple we're moving right along so if we want to kind of position this page around a little bit we can come up here and just use some quick bootstrap here we can create a div with a class equals container and let's say we want text to be Center here and then let's create a div with a class equals row and then another div with a class of and let's call this col dash eight we need quotation marks and then we can put that there and we can close that div there we go and if we want then another div with a class of col-4 we can have all of this stuff inside of it sort of tab this stuff over a little bit if you want and then let's close that div and let's close the row div and the class div all right let's go ahead and save this see what that looks like very quickly just using some bootstrap Okay so we've got things over here and over here we can put this stuff in a card if we want let's head over to get bootstrap.com click on Docs come down here until you find card there we go and then just sort of find the card that you want I think this one is good so we could just go ahead and copy this super quick head back over here and inside of our call Four we'll paste that let me just save this and refresh this to see if that's what I like yeah that looks good so now we could just come up here instead of featured let's say follows something like that and then for this let me get rid of that and also this button and inside of our card text we'll just paste all of this for Loop stuff there we go so let's go ahead and save this back over here and reload okay so that looks good and then we just do the same thing for followed by so again I'm just going to come over here to get bootstrap click this copy stuff head back over here scroll down here and this is going to be followed by and we get rid of the title get rid of the button modify the P tag here to put all this stuff in paste it kind of sloppy but head back over here hit reload all right we are moving right along so then underneath here underneath this where it says Bob's profile this where we're going to put our tweets our meeps uh obviously we've got some work to do before we do that but yeah pretty simple to make this look pretty good pretty quickly now we can also come back here to the profile list page and make these clickable if we want so let's just head back over to our profile list page there it is and then just come down here to the at sign here and give an a her F tag and close our a tag and again this is just going to be a little Django URL tag and we want to point it to profile and pass in that profile.user.id Den save this head back over here it reload boom there we go click on Bob go to Bob click on West goes to Wes very cool Wes follows himself apparently and April April follows at men all right very cool so we are moving right along now we just need to start working on the tweets the meeps and we'll probably start to do that in the next video and uh yeah pretty cool so that's all for this video if you liked it be sure to smash like button below subscribe to the channel give me a thumbs up for the YouTube algorithm and check out codemy.com where you can use coupon code YouTube 50 to get 50 off lifetime membership so that's access to all my courses over 50 courses thousands of videos in the PDFs of all my best-selling coding books join over 150 000 students learn to code just like you my name is John Elder from codemy.com and I'll see you in the next video

Channel: Codemy.com

Views: 6,526

Keywords: django twitter clone tutorial, django profile page, django twitter profile page, django twitter followers, django twitter follows, codemy.com, john elder, john elder django, john elder django tutorial, john elder django tutorial 5, john elder django wednesday, john elder django wednesday 5, django wednesday, python django user profile, django wednesdays, django user profile, codemy django, django tutorial for beginners

Id: fk8seSR148E

Length: 16min 2sec (962 seconds)

Published: Wed Jan 11 2023