Build a Social Media App with Django – Python Web Framework Tutorial
- June 5, 2024
- Posted by: MainInstructor
- Category: BASIC Go JavaScript Python SQL VSCode Web Development
![*](https://i0.wp.com/allprowebdesigns.com/wp-content/uploads/2024/06/1717563929_maxresdefault.jpg?resize=840%2C430&ssl=1)
Video Title: Build a Social Media App with Django – Python Web Framework Tutorial
django is a high-level python web framework that enables rapid development of secure and maintainable websites in this five-hour course you will learn django by building a simple social media application this is a great course for people new to django and for people who are familiar with django and want to learn how to build a social media application tommy taco teaches this course he has created many popular courses on the freecodecamp channel and his own channel i encourage you to leave a comment with the most interesting thing you learn from for the benefit of other campers who are watching this course hi guys welcome to this video and i want to say thank you to free code cam for publishing this course and you’re going to check out more tutorials like this you can check out my channel at kobitomi and for more of my content you can also follow me on twitter i’m going to leave a link in the description below so now let me show you around everything we’re going to be building in this project so this is the end product of this project so as you can see we have a feed so this is just a post feed where we see the post of the users that we are following and then once we have this we also implemented a fixture which can allow us to like a user support and just click on the button and now you see it says like by one person so now we can also click on the button again and no likes so we can like and unlike a post we can also click on the name on that post and then it takes us to the profile page of that post so now in this profile page we can see the profile image username the bio the amount of posts these users have the followers and the following so now if we unfollow this user we see now that this is our zero follower let’s follow him back just to support him now we asked one follower so we added these followers and following feature because also social media without the followers and following feature and now after that right here we can just see a list of all the posts the users have and we can click on it and once we click on one we’ll be able to scroll through all the images of all the posts the user have easily now we can come back to the um and as you can see we right here we have this users you can follow so we did a little bit of suggestion field here the currently logged in user will make sure that the users that has been suggested and not people that is following already that’s so right now if we click on view user you see that we are not following this user that’s why it has been suggested and this is a brand new user he has no post no follower no if we follow this user right now he has one follower and we go back to the home you see that that user is not suggested again now that’s because we already followed our user so we can be suggesting someone that you already follow now after that we also added a picture which will allow us to upload pictures so we can just choose the picture write the caption hit upload and then the people that are following us will be able to see our new our latest book and we also have this account settings feature for that the first thing we did in this project was to do the user authentication where a user can sign into our platform and register on our platform which is very important and also when it’s logged in you can log out if i log out right now you’ll see that we have this login so i can just log in since it’s already autofilled and now we have that and we come here and we can click on account settings and right here we can change our profile image of bio our location and everything we need to change press cancel just takes us back and we also have this search function which is also key so we know we have a user that is named jasper so let’s come here and just say jazz and let’s set you see that it gives us jasper uses his location la and his bio if we click on just bar we can see his page this is also a brand new user so this is basically what we’re going to be building and note that you can add a lot of pictures that you want to add yourself also because after this project the main purpose of this project is to introduce you to things you can do with jungle so i hope that after this course you will be comfortable with django and you can take what you learned from this course into your own project to build your own project or even enhance this at our point having all this said i also want to say that the source code to this project here you can get the template file so as you can see we’re using a template for this project where you can get the template file we use and the old source code to everything we coded i’m going to have a github link to the source code and you can just easily get the template file and full and code along and you can just get your source code also so if you are stuck somewhere and just easily check that out so for the beginners taking this tutorial i’m just going to quickly give a brief introduction to chango so what exactly is django django is a python web framework and what i mean by that is that using django you can build web applications with the python programming language now if you recently learnt python or you know python already and you are looking to go into the web development view and django is a good choice for you now there are various reasons why companies and developers choose to use django some of these reasons are because django is fast there’s a large community jungle provides security to your application django is also very scalable and these are just few of the reasons why developers choose to use django but one key one is that django has a very large community now this is important so that when you encounter an error when you’re stuck on something you can easily search that error and there’s probability that someone has already solved it for you online maybe on stack overflow or something now this is very important so that you can easily fix your bugs or fix your errors by just a google search so django has that large community of a lot of developers around it so having this said i hope you have an understanding of what django is and why you should even choose django let’s go to the next section now the first thing we want to do is to create a new django project so i’m in this folder here which is just i created a new folder named socialbook the social book is gonna be the name of the social media application that we are building i just created a new folder on on my computer in documents that doesn’t really matter but what i just need is to get this directory to that folder so this is where i want to create my django project and develop everything so now that i have the directory to that folder i’m just going to open up my command prompt right here so you might be on a mac you might just open up your terminal or any other osu i just open up the terminal in there so right here i’m just going to go into that particular directory so right now i’m in that directory if i press dir you see it’s empty let me press cls to close it up i’m going to be building this social media application from scratch to the finish so i’m going to show you how i build applications when i’m developing my site project or something so you can totally relate with it so right now we are in this directory and if you are new to django when we want to create a jungle project we use some command lines so to create a new jungle project what we will do is to say jungle i think admin start project and then the name of the project right here so this will be the name of the project so this is the command line we use to create a new tango project but before you even want to create a jungle project you need to make sure that you have django installed now you know in python we have pip which is a python package manager if you install python we have python installed already it should come with it just to make sure we have django installed we’re going to keep install tango so this is going to install the latest version of django for us now i already have this installed on my computer on my laptop so it should tell me that requirements already satisfied now that’s because i already have it installed but for you if you don’t have it installed if you’re new to django as i said it should go ahead and install that for you so it’s going to pop up now and tell me requirement already so we should do that second okay we can just out of that and so i canceled the operation because i already have that so i’m just closed i like cleaning up the command so right now let’s just create a new django project in this particular folder so what i did i first came into the folder make sure i have django installed and now it’s time to create a new jungle project i’ll say django in admin that project i’m going to name it social book so this is going to create a new folder named social book this particular directory now if i press d ir you see now that i have a new directory a folder named socialbook i also go back to that folder now i have a new folder name so i go into it you’re gonna see that it creates this other folder name socialbook and the file name manage.p so just gonna go into that particular jungle project i just created by saying cd social book now i should have money dot py and social brokerage i come back here and enter the social book again i’m gonna see some files which is basically just the files that django create get application so now that we have this django app running we can just test it out by running it on our server but what we’re going to do first is to create our django app so we have a jungle project and we have a jungle app to take all the functionality so let me just quickly explain the difference between a jungle project and an app so take facebook.com for example we have facebook.com which is the main project so for here we have socialbook which is the main project but let’s say you want to have a picture like messages or notifications or post feed each of those can be different apps no now it depends on how you want to do it me personally i like having one project and one app and that app can take all the functionalities like all the pictures the logging in signing of authentication and everything but normally you can have a project and different functionalities as the app so let’s say facebook.com as i said is the main project facebook is a project here then we can have like the authentication scheme as a different app just to take care of the authentication and what i mean by that is user authentication means logging in and registering a user we can also have another app to take care of the notifications we can have another app for the messaging platform so that is just the basic understanding of difference between django app and jungle project so you can see a django app is like a subset of django project but for this project we’re just going to have one app that’s going to take care of everything so now that we’re in here let’s just create a new django app and the command is similar to creating a django project so we’ll do django iphone admin that app and we’ll name the app because it’s taking care of everything and we’re not giving it a specific name and just say call but i like maybe my app score just that’s just me or you can name it anything you want totally now if i press dir i have a new folder named core i come back in now i have a new folder name call and in there i have this bunch of files that we’re going to be looking into later when we are using them to develop so right now i have everything taken care of i’ve created my jungle widget and i’ve added an app to it now let me just run this project and make sure that everything is working fine on the server so to run your project or even see if the installation has worked successfully all you need to do is to say python manage dot py run server now note that if you’re on a mac you need to add python three money dot pyro server because the recent version of django doesn’t support python 2. so as you can see it gives us this output just ignore this for now and what you just want us to do is to go to this url on our browser right here we can paste it and then it should boom so this is it what this is now is that it’s saying that we have successfully created our django project and is working successfully and see here is the install work successfully congratulations now this simply means that everything we created has worked successfully so this is the url that we’re going to be seeing all our project or the output of our project in so that’s the local oh sport 8000 that’s the default url for django when you run your jungle on your local server on your machine it is now that we’ve created our jungle project and stuff this is basically the home url of our website but when a user comes to our website like socialbook.com we don’t want this to show right we want to show like our own template our own design you know our on social media so let’s get into that let’s go ahead and set up our urls we’re gonna go into visual studio code now if i come here i have my visual studio code open and i have imported the project we just created let me quickly walk you through how to do that so just make sure you have visual studio code or any other you know code editor that you’re using and on right here click on open folder and once you click on noble folder just go to the folder where we created this django project and it’s going to open up that project for you right here like this so what we just want to do as you can see right here we have core which is the app we created and we have sociable which is the main project we created but we don’t have money dot py and some other files if i come back to my folder right here see that we should have money dot py and sqlite database but it’s not there that means they didn’t import why i was selecting so what we just need to do is to come to file open folder and make sure you don’t select anything just open the old folder and you should so we don’t want to save anything yet because this is seeing it as a workspace we just want to open it as before now you should go ahead and open that folder up for us and then once we have this opened what we just need to do is to set up our urls and so this answer is as you can see now we have everything imported or opened but now let’s go ahead and set up our urls so if you don’t understand what i mean by urls what i just simply mean is the path of our website so when a user comes to socialbook.com should it go or what should happen or when a user comes to socialbook.com profile what should happen so basically each of those paths are urls like socialbook.com profile is a url that we need to set up once the user comes to slash profile something will happen but we don’t set that url up then it doesn’t exist don’t worry you’re gonna get this the first thing we want to do to come into our app and create a new file in there and name it urls.py so right here now we’re just going to import something from django if from angle.urls import path now this part is going to allow us to be able to set up our urls and now we’re going to have a new list and name it url buttons and now to set up our home url a path and we leave it blank once we leave it blank like this this is signifying that we’re setting up our own url where we do something like profile this is signifying our setting up our website slash profile so now after this we put a comma and we’ll say use dot index and we’ll give it a name of index so what this is doing is that this views is where basically do most of our coding so you are going to understand what i mean by view dot index in a bit but first of all before we can even access these views so these views right here that we’re saying is this view.py file in the same directory i’m just going to go ahead and open that so before we can access that file we need to import it so we’ll save from dot import use now we have views imported we can use views.index but if risingviews.index is no function or no class or anything like index in here so we need to set that up also i’m just giving it a name like a keyword for this particular url index so basically what is the same is that once the user comes to the home url go to the views.index whatever is being done there just basically show that to the user so now we can save this i’m going to come into views now we need to set up a new function for the index i need to take a request now we can return a simple http response but first we need to import that from django.http import http response now we can just say return an http response h1 and say welcome to social book now this is what we need to say so let me explain what i did here so as i said right here what we did was imported parts imported views and then we set up a new url named the home url which is empty and we said it should go to the views.index and this view.index basically is coming to this views file i need to go to dot index look for any function that is not index so now that it has dot index whatever is being done here in this function is what is going to serve that particular url so now since we’re just sending an http response this is just what it’s going to show let me save it now one more thing before we can this can reflect on our main project we need to set the urls up on our main project as you can see we set it up on our app but if we come into social book coming to urls here what we just need to do is to import something called include and now we just have to set up the home url that’s the only thing we need to set up right here and we’ll say if someone comes to the home url just include or dot urls what this is saying is that if someone comes into the home url in code cloud.urls now this call to arrays is our app which is for dot urls which is so it’s going to go into code urls and look for any path that is similar to this and whatever is being done there is what which is this path and then this part also links to views.index which is right here so everything just link back to returning this http response now this is done let’s just make sure our server is running so this gave us an error when we use views.index but we haven’t defined index in the views wire file let’s go ahead and refresh this right and refresh this now it should update and not give us any error because obviously we’ve already added that index function in our views so it still says index is not defined so let’s make sure we saved our views of people right here also it’s reloading let’s see okay let’s make sure everything is working fine too this one is first of all okay so you have or the two arrows in line five you say index in here first of all save that so it can reload so sometimes we need to like reload and let’s just do use dot index name x save again now let’s see once it reloads dude as you can see now everything is working so sometimes jungle just need a little bit of tweaking or reloading so it can update now let’s go back to this that we run and we shouldn’t see this again now what we should see now is that http response welcome to social books as you can see what we see now is welcome to subscriber so basically we’ve removed that default jungle template i was showing in stores work and we’ve given this http response on our own url but this is still not what we want what we want is to show a template basically that’s what we’re gonna do now let’s go ahead and set up our template so if i come in here into the folder it’s going to go right here right here and you see i have one folder called template here so this is just basically the template for that we’re going to use in this tutorial so it’s just a free template and everything the whole template and everything will be in the github link of this project so you can get the template also and i have these two templates here one is for the profile one is what is for the main for the index sign up everything and what i just want to do is to drag this i’ll select it first of all and i’m going to drag the html files into a particular folder but before that let’s come into our visual studio code so before we can even use any template we need to do some configurations writing vs code let’s close this social book where else we don’t need that again now we want to go into our settings.py file and right underneath here we just want to import os first of all and let’s scroll down so in installed apps when you first create an app it’s always advisable to add the app in here now this is not relating to the template but just so we don’t get an error later let’s add that up so now that we have that let’s scroll down right here where you see this template is a list and what you’re just going to do is to come into dares and this desk is just specifying the where jungle should go and look for all our template files so let’s just stop and in the base directory of this project now when i say base directory i mean the same directory which contains the money.py file so the base directory of this project we’re going to create a new file and we’ll name it templates and in here is where all the html files of this project is going to be so we need to tell django that that is where everything is going to be that’s what we’re going to do right here so first of all we need to import os as we d we’re going to come right here under this i’m going to say os the path the join page there which is the base directory go into template so it says from the base they’re going to template that’s where you should look for all our templates files it that’s basically all we need in telling jungle where to look for our templates files so we just save that and right here in our template files now we need to load it up with our html files let’s come back here and we’ll drag that just copy it in there good so now we have that in there we need to copy one more which is from the profile so go to static dom profile now i will explain what i mean by this static dom profile later let’s just take this profile so again all this is going to be available in the github link of this tutorial so you can easily grab them and yeah so right now we have all the html files of this template now and what we can just do now if i close this up don’t need this for now we can go into the views file and instead of returning an http response we can now render an html page so this is the index function obviously we want to render the index.html what we do say return render take a request get index.html so this is just the line of code we need to show this index.html file now let’s make sure everything is running good and let’s come back here and hit refresh i should see this again and we should see that template let’s give it a moment to load that up okay good as you can see now we see all the template we see the template but it is looking bad so this is because we have not set up our static files our static files is basically any other file that we’re going to use in our template file so any other apart from my html this might be an image file a javascript file or css file any other file we’re going to use in this our template it needs to go into static and we’re gonna do that in the next session so as i said the reason why our template is not looking good right now is because we haven’t connected or set up our static files let’s go ahead and do that i’m going to come back to visual studio code the static files as i explained in the last video is basically any other file that we’re going to use in our template file apart from the html file so any other image css for javascript file any other file we’re going to use goes to the static but how do we set this up let’s do that so let’s close out this again and similarly to what we did in the last video we’re also going to create a new folder name is static and as you might have guessed we’re going to go into the settings of pyr file also and then we’re going to set static up right here it just shows this that the static url but we need to set up the static root and the static files directory so let’s do that so static underscore root goes to os dot path dot join is there static files i don’t mind why this is different from this but this the next one now is the main connection so says static files there’s first two is the path the join is there comma static right here now let’s save this now let me quickly take a moment to explain why we’re even doing this so jungle whenever we’re connecting like images or css files it doesn’t connect it the normal way that html connected so if you work with html very well you know that when you want to link for example an image file what we do is you have an image and we say src equals to then right here we have like the directory to the image file in my bin assets slash image.jpg so for example in html these i will link an image file but in django is quite different what we just need to do in jungle we need to make sure that this asset slash image file is inside the folder named static so it must be inside this folder and after it’s been inside our folder when we are going to the html we need to put something like this and say with a percentage sign we say static with this that to close so this is the way jungle basically sees any external file and we’re gonna do this for anytime we are linking to any standard file it might be css it might be javascript images any other file but this is what we’re gonna do so for django to be able to recognize this we need to set all these things up like setting up static creating a new folder and putting the static files in there i hope you understood what i just now i can just close that up and save so now that we have all this set up next thing we want to do is to move copy all our static folders and files into this static folder right here gonna come into well first of all in this template right here this asset is where all the static for all those html is located external files for all these files in this asset that means we just need to drag the asset into this static folder and do not add folder to workspace copy the folder so i copied it we’ve copied it there but as i said the profile and the rest have different settings or different files either so what we just want to do now also copy all the static steps yes store and just select that out and now let’s copy the rest attic opening food now everything is going to copy it’s just going to take a few seconds because some files might be larger than the other so that’s done and we actually do not need this so we have seen okay this is still okay but as that is doing we’re gonna close this settings now we don’t need it and we’re gonna actually open this index.html file right here in the code editor i’m going to come to template and open index.html we’re going to get back to this also let’s just make sure all this has worked i have one two three four five six seven for the profile so seven items selected good but we don’t need a static down template it’s not part i just added that so we’re gonna have to kind of remove that contempt go delete it equipping so you don’t need to understand what i did there what i just did was i added a file that i want to remove basically so now as you can see this html5 is quite different because on top we have something named load static right here remember what i explained when i said we don’t link files normally so just to save time and not let you watch hours of tutorial on something not necessary so i already you know configured all the linking for the way jungle will see it like django template and stuff so before you can do this before you can even like go to a css file and add a static and also close it at the top of the file you need to add something named load static if we don’t add this it’s going to give us an error it’s basically loading all the static settings the static file so this file can use it so i already did all this for all the wall you know html files are copied so that’s why if i come back here if i come into template i come into so you can see i said static non-template i have the normal template that doesn’t have all these configurations done but before i started filming this tutorial i just made sure i you know tweaked everything so that it will save time but i hope you understand what i mean by this static so basically we need to load static first of all and then anywhere we are linking something we just need to add this static at the beginning and at the end so throughout the whole file i did that anyway we are linking a file i added everything if we scroll all the way to the bottom writing the javascript also i did that so that’s just how to configure that and if we scroll up and notice that right here we are linking a png but we didn’t add static let’s add static piece and we close it like this that’s basically how to do it now if we go into our browser and we hit that refresh button see our website in good let’s see second things the color yeah boom as you can see right now basically have all of this loaded everything good such username the post is as you can follow so this is just the basic template i used for this as you can see everything is fine the static files have been loaded load more javascript is also working so everything is totally good so now that we have all of this let’s just try ahead by starting with the registration and signing up of a user now let’s start with the authentication of our website so basically what i mean is allowing a user to register and login to our website so before we do this we need to create a model so first of all let’s close this index.html we don’t need it for now and then we’re going to come into modules.py right here so this models.py file is basically the file where we create our jungle models so we can use it as a database for our project so now we want to create a profile model this profile module is going to have different things like the user profile picture the user bio the user location and stuff like that so first of all let me explain why we are creating this profile module so we know that django as in as default it gives us this user model which a user is going to be able to you know sign in sign up and have some information like their first name username email and stuff but we want more so the jungle alt user model authentication it gives us the username the first name last name email and password so those are the only fields it gives us but we want more so we want to be able to add the user by you the user profile image the location maybe like a country is from or something so there are various ways we can go about this we can create a custom user model or we can just extend that user model that jungle already gives us or we can create a separate model for the profile and link it to user model using a foreign key so that’s what we’re going to do i’m going to create a separate model for the profile and link it to the user model using a foreign key so i’m going to show you how we’re going to go about this now you might want to do it anyhow you like if you’re already familiar with jungle you might want to extend the database or anyhow you feel it’s easier for you but this is the way i’m going to do it in this tutorial so first of all let’s create a class and we’re going to name it profile and that will be take from the models dot model and now i want to give this field the user just pass on everything first i want to have like the id of the user so now i’m not going to say user underscore id and i’m going to explain what i’m not going to say it’s why i do id user so we have user this is going to be a foreign key that is going to link to that model i’m going to we’re going to do that the id user this is going to be the id of the user that has this profile and we also want to buy you we want profile image profile img pass again we want the location so these are basically the things we want for this our modules but for this profile image we’re going to use an image field so if you’re familiar with jungle you know we have different model field we have character field the text field integer field but when we want to do something like a profile image we can use the file field but that file will be able to call it like videos pdf files or we want to narrow it down to but this view to connect all the images so we’re going to use an image view so what we’re going to do is something like this models dot image field now we need to configure some things like where will this image upload to when a user uploads the image which folder will you upload to so just the way we set up static files and all those type of stuff we also need to set up media the media is gonna like take care of uploading like basically the storage where all these files are gonna be stored because also when we go deeper into this application when we allow a user to upload a post the user will want to upload an image with that post so where would that image go to so we need to store we need to configure all these things also and this one is quite different from the others the only similarity is that we are going to create a new folder again in the base directory as i said the page directory is the folder which contains the money.py file of that project so now we’re going to create a new file i’m going to name it media this media basically is going to store all the images we’re going to be uploading and now that we’ve created that file we need to come into our settings dot py so i’m going to open our proof our project and go to settings now right here we just make sure we scroll down and we’ll say media underscore url a flash media flash dash like this and we also need to specify the media routes the os dot path the join based directory and media so the name of this folder must correlate with the name we gave it here let’s save that and we can quit this the next thing we need to do is to go into the urls of py file of our project not of our app so we need to come into social cookie’s main project go to the urls of your wifi all right here we’re going to import two things i’m going to import settings and static if from jungle and configuration we shorten it to conf import settings next one is from jungle.configurations.urls.static import static good so this is what we need to import and now to specify the url for this our media specify or to configure our media url to finalize it the urls patterns goes to variable pattern above plus static settings dot media underscore url have a comma and just bring it down here and say document underscore root equals to settings dot media root now we can save this so what this is doing is it’s just specifying the url of our media so uh media files so this is just the way we set up anything dealing with media let me quickly recap so we we started with our modules which we are going to finish in a minute but because we are going to use an image field and that is a file we need we need to create a new folder called media which is going to take care of the uploading of the image where it’s going to be stored and we need to go into settings.py file to assign these two variables media url media root and we needed to import that into the url.py file socialbook and just configure url path now we can close this and now we’ll be able to use an image field in our module so now we say models.image huge but one more thing we need to specify some things that django is going to understand so when a user wants to submit a form of this field or when he doesn’t want to submit a profile image where does that image upload to i know i said it’s going to upload to the media folder or where in that media folder is it going to upload so we want to have different categories or different folders under this media folder here so we might have one that says profile images my vendor folder that say post images so we don’t mix all the images together so let’s say this should upload and use the upload tool profile images now i know that under media folder we don’t have any older name profile images but if we don’t have any folder what django is going to do is that for the first time it’s going to create a new folder there called profile images and then from that time any image being stored through this field or through this model is going to be stored under media on a profile image so basically since we don’t have that created now we can create it manually but i prefer for django to do it automatically so you’re just going to create profile images folder and it’s going to store it today but now that we have that out of the way one more thing so you know when you sign up to like facebook and you don’t yet have a profile picture there’s actually a default profile picture that facebook puts for you so we also want to do that so that if the user doesn’t have a profile picture yet want to give him a default profile picture but what we’re going to do now right here if you come into your static and you come into images you’re going to see that we have a image called blank profile picture that’s the name of the image blank profile picture dot png i would love to show you yeah if that is going to open but that’s just basically a default profile picture that we’re going to give the user so okay that’s going to open good as you can see this is just a default like profile picture for user that didn’t upload the profile picture yet so now let’s just copy the name of that file and quit this and then what we just want to do is to say default equals to blankprofilepicture.png but remember again i said that anything dealing with these images of files in a jungle model it needs to be done in this like media folder so when we are getting the default image this blank profile picture.png how does django know that it’s supposed to go into static images then look for this no jungle doesn’t know that so what we are going to do these blank profile images we’re just going to drag it from there and paste it in media don’t want to move that so now it’s the media so when we say blank profile picture that image tango is going to go into this media folder and look for that file since now that we know django can see that file we can continue with configuring the rest of our module files our model fields this profile image now is done model dot image field it’s uploaded to profile images and it defaults as if the user didn’t upload profile image yet or doesn’t want to upload the profile image you should just use this as the user’s profile image so now that we have that out of the way let’s start from the beginning right here so here in this user we want to link this particular profile to the user model using a foreign key so what we need to do first is to get the model of the current user that is logged in or that is authenticated and then that is going to be like be the default for this foreign key so we are going to understand that now when we do that first of all let’s do from django.contrib.org on trip dot auth import get user model so i want to import this attribute name get user model but you’re just going to get the model of the currently authenticated user so let’s give it variable and say user equals to get user model we’re just initiating that and now that we say user equals to this get user model anytime we use this user now is just basically going to be model of the currently logging user so now right here we’re going to say models dot foreign key user on delete first modules cascade that’s good so now what this is just doing is we have a foreign key that is linking to the connector to this user which is this user variable which is this get user model that’s been imported you have that done now this id user is just meant to be an integer field so model dot integer field that’s that’s that doesn’t need any attributes in here so i know you might not understand why we like have this id user or while we have this user foreign key related to a foreign key that is connected to this that if you are new you might not understand that but when we are using this in our you know project when we are getting the post when we are allowing the user to be able to follow another user you know why or you understand why all these are being done like this so just follow along for now and let’s get back so now we have the bio the bio we just want the bio to be a text field so same model the text field and we can give it blank equals true now this is because the user might not want to have a value it’s not compulsory and allow it to be blank now the location models dot character field this time around and a character field has a max length of hundred i just give it a maximum length of hundred and let’s also give it blank equals true because the user might not want to put his location that’s not compulsion all this is good we have the user id of the user the value of that user profile image the location now let’s just return the basically the username so say dev str self return self.user so this self.user is just this let’s get the username that model so what this is doing this is not compulsion you can remove these if you don’t want this is just in the name of the model so that when we are seeing the model in our admin panel it’s going to be showing the username and it’s not going to be showing object 1 or object 2. i’m going to show you that like in a couple of seconds so now we have this done now let’s just go back to our command prompt and let’s make migrations and migrate everything to our database first of all note that before you run migrations or anything the app where you have this module.py for us it is core that’s the name of the app this app must be added to install apps in the settings of your wifi if we come down here remember in the beginning i said let’s just add this to avoid any error later that is the main reason so because we want django to be able to see this app as part of this project we need to add it to installed apps so now we can be able to upgrade our database so basically if you don’t know the meaning of migrate or what i’m talking about in jungle once we create all this data here so this is basically like the name of the database and these are tables in the database so think about it like that this is the name and these are tables but these are row each row each row like this i wish i can like visualize this for you in a table but just think about it like this the name of that database and this is each row in the table of that data so now all this that we’ve done we need to migrate it to our database i’m going to show you that also so we have to come right here let’s opt out of the server real quick out so yeah done and now to migrate our server we just manage python manage dot py make migrations and once we make migrations what this is doing is that any changes that we made in our models dot py file is gonna save that change before migrating it to our database so if we come here and let’s say we add blank equals false or something blank doesn’t have a false but if we remove blank or something since we’ve made it change we need to come here and do python manage write make migrations to save that change then migrate again anytime you touch this file you need to do that it’s just that now that that changes has been made let’s just say python manage dot py migrate so now this is going to migrate that database that model into our database this is the first time we’re running it that’s why it’s migrating the earth admin and every other thing but the main thing we want to see migrating is this call that’s my great thing and now um i want us to run our project and go to the admin to see our you know database but we can go to the admin to see our database because if we go there we don’t have any login yet that a user can use to log into the admin panel so to create that we’re going to say python manage dot py create super user this command line is going to create a super user now this super user means like a user that can access the admin panel so any normal user that sign up from our site can just use their login details to log into the admin panel only we developers that can create a specific super user and log into the admin panel so now let’s just say admin give it book dot com i’ll give you the password password again it says the password is to come on to the username let’s just bypass that but that is created successfully now let’s run our server again ui run server but that is preparing to run i’m going to come back into our browser actually let’s open a private window this private window is just for our admin panel so that we’ll be able to log into our admin panel and not interfere with logging in to a normal user so it is in private browsing and go to our website now slash admin our website should be running now just come here and see so as you can see right there our website is running let’s come down good this is what we want to see it basically gives us this login form to log into the django administration now django administration doesn’t have a signup form the only way you can sign up to this generation is from your console it’s from your command line now let’s log in with the details we just created i mean again with the password also and we hit again good but now that we use login you can see we have just two database we have groups and we have users this is created by default in django if we open these users we’re going to see one user which is us the super user admin user so let’s wait for that so as you can see the username admin email address and staff status so remember i said that django as a default gives us this user model but it doesn’t have enough fields for us to build this social media platform it just gives us only username email address first name last name and a password but we want more than that as i said so that’s why we created a profile model now let’s go back to our visual studio code because we come back to home you see that the model we just created which is profile is not showing here so we also need to make sure that that shows here so we can manage that database do that it’s very simple just like two lines of code we come into a file named admin.py now this file is going to be in your app just click on the file and the first thing to do right here is to import the model that you want to show in your admin panel if from dot models import profile since this profile we want show in our admin panel or register to administer now say admin dot site does register profile now i register now it’s profile mode into the admin if i save this now just gonna come back here and make sure everything loads successfully once that loads i’m gonna go back to my admin panel and now i should see my profile done i’m gonna come here if i refresh this now good now i see under this core app see profiles right click on it no profile yet because we’ve not done anything to the profile but this is the first step in the user authentication so i hope you understand what we’ve done till this point created a specific profile model for each user so when users sign up a profile mode is automatically going to be created for them now we’re going to do the registering of a user of the signing up of the user in export the next thing to do now is to set up the view for our registration to be able to register a user into our platform basically what we want to do now let’s just come into views.py we want to create a new url for our sign up so let’s just collapse these and this just to make everything clean first of all we’re gonna have to come into urls and create a new url for that view so what we want to do want a user to be able to come to our website slash sign up and you’ll be able to sign up to our platform or register on our platform so let’s add it here right now just put sign up and right here sign up and the name also should be sign up so basically our website slash sign up then you should go into views dot sign up and it has a name of sign up but we know we don’t have user sign up yet we’re gonna have to come into views create a new function named sign up it’s gonna take a request and let’s just render our html template return render request sign up.html now this signup.html basically this page is signup.html that’s what we are rendering when user goes to slash signup let’s save this also save our urls basically we have that done and let’s just make sure that when we go to slash sign up it really renders this first of all as you can see right here our website is running so we can go test that out now let’s go to slash sign up enter good so as you can see our website is showing and we are going to do some configurations first of all we want this to be sign up on the changes to sign up once it changes to social book and maybe change the title let’s go do that first we will come back here and then in signup.html so this again remember as i said i already tweaked the all the links for static so now i’m just gonna change this to up okay okay and let’s scroll down right here where we see youtube social book all right here we see signing we have to change it to sign up yeah so that’s that and this could be fine let’s just use changes sign up social work social book sign up this is i know we change this instead of this so to see with that then right here which is sign up that should work now i know about this was logging good now once that to be able to sign up with just the username the email and the password we don’t really need the first name if you want to collect the first name in your own application you can do that but we don’t really need the first name and last name let’s just call it the username the email and because user have to have a password right here where we see this form let’s just image this for rest make our work we have this form here what we’re gonna do is a name let’s change it and let’s make it have so we have all this style and everything done let’s just username is okay let’s have an email type should be an email this order should be email and all of them needs to have a name because when we are collecting the data in our back end we’re going to collect them using the name of the particular thing so right here after type the name so this is the username should have name of username so let’s just copy this you have email and this is what the password right so password and this is as you say password to confirm password and we can also change this to password the type your password type more security and what again i agree to terms and condition that is not really let’s just comment that out now let’s go ahead and see what we have now so it automatically fuse it in basically let’s just remove that hdd it doesn’t fill it in again now we have sign up we have all of these which is good what we want to do let’s also scroll down button everything is working good so now right here in this form we want the action we leave it blank now when we leave this action blank it means that once we hit sign up all this data that has been inputted in here is going to be sent back to the signup page i’m going to show you why we do that so now we have the action blank another thing we want to have is the method we want to use a post method now in django there are two different type of methods we use when submitting a form use the guest method and the post method let me tell you why and when we use any of the two we use a guest method basically when we are passing like an information that is not confidential so like let’s say a user wants to search like python you have a search engine here and the user also search like python so on that search form you can use a get method because the value being shown is not confidential it’s just what the user is searching for and when you’re asking the post method is basically where when you have confidential inputs like a password we don’t want the password to show so if you use a guest method whatever is being searched or whatever it means submitted is going to be shown in the url we’ve used a post method those values are going to be hidden those are the major two difference so if we’re going to show an input in the url that input has to be an input that is basically not confidential as i said because if we are using like this signup form and why is in a get method we don’t want to show the user sign the user’s password in the url bar that is not a good practice so that’s why we use post method or let’s say you have a platform where a user pays using his credit card information and you don’t want to use a guest method in that situation because credit card information can be shown in the url so basically those are the majors to difference you can also do a quick search on google if you want to dive deeper that another thing is that when we use a post method in django we need to add this templating style called csrf token now this just take care of some what malware because this dsrf stands for cross site request for audrey so it’s basically like an attack but when you put this it basically takes care of that jungle way we’re not going to get too much into that now let’s save this and let’s come here and hit refresh and just put random things just to make sure that everything is working once we sign up it brings us back to this page that’s what we want so now that all this information is being sent to sign up view using a post method what we’re just going to do now in the views we’re going to get all of them using an if statement so what we’re going to say is that if requests does method equals to post so this simply means that if the when a user wants to look for this site or when user comes to this particular page if this page has been summoned using a post method then we’re going to do a pool of things if not just show sign up so when we just come to this page normally and just enter like this it’s just a it’s not a post method yet so but when we submit a form i need to sign up we are sending back some information to this page using a post method that’s when we’re going to be able to get those values so what we’re going to do now that if the request of meta disposed we’re gonna do some things let’s pass first else i mean there’s not a post method and just on this particular page so now there is a post method let’s get all the value that has been sent to this view so we can get that same name first to request let’s post their name what i just did was that i added a new variable and i said request.post username that means the the data that has been posted here is going to get the value of that data using the name of the input if i come back to sign up remember i said they have to have a name when this is submitted it’s going to have like a name and a value so using the name of this input which is username now in this views file we’ll be able to get the value now if we just do something like print username it’s going to basically print whatever we input here in our console just give me a minute and let’s just add something and um just fill it up and test what i just said so as you can see it’s not yet getting any error like the password don’t match um all this type of stuff like the username is taking the email is taking we’re still going to do that but now we hit sign up let’s see gives us a value error they said views dot signup didn’t return so it didn’t return anything because we’re not returning i’m not giving it a response we’re just getting the value but we’re going to undo that but let’s come back here first and you’ll see that right here gives me this value which i put in the form as the username basically we are getting the value of that form and once we have the value that is being sent to that form and just use that create a new object in our user model now let’s go back here and what we’re just going to do is to copy this four times so now we need to have email password and password two which is repeat password so now the email has a name of email just advisable to copy it so you don’t contain any error in the names and stuff like that even if you know you are correct password password two now we have all these values now that we have all these values and create now first check some things we first check if the password one is because of the password two because when was saying confirm password the two passwords have to be the same we also check if the email exists we also check if the username exists before we do all those we need to import something and what we need to import is the user model user model which is um right here which is this user model where all the users has been stored so we need to import that right here so first of all let’s say from tango dot contrib that’s earth that’s models import user good i also want to import something named alt now this is going to allow us to authenticate the user now i think that’s what we need for now just come down here back so now this is we’re just gonna have another if statement and yeah what i’m gonna say is if password equals to password two and if the passwords are the same then something fast for now else we’ll have to give it an error saying that the password does not match so to give an error we’re going to use something called messages we also need to import that so we have to scroll all the way up right here where we have we could have imported it from this let’s just angle dot contrib import messages okay so this is going to be able to send a message if it’s an error or a warning just gonna be able to send a message to the front end so now if the password is equals if the two passwords are the same we’re gonna continue and will not check again if the email is taken or use any mistake but before we even go for that if the passwords are not the same let’s first send an error and tell the person that the passwords don’t match we’re going to say messages let’s use an info message is the info the request and we just turn the message password not matching and then we have to redirect the user back to the sign up page but before we even use redirect we also need to import redirect but that’s easy because we are importing redirect from django.shortcut which we already have here so let’s just say redirect now that we have that we just say return direct to the sign up so we are redirecting the user to the sign up by sending this message so that the user will be able to fill that form again basically now that we have this as if the password are not equal but if the password is equal let’s have another statement by saying if user which is the user model dot objects dot filter email equals email dot exists i want to do something so what this is saying is that if we go to the user model we check each of the objects then we filter and we find an object in which the email which is being which is in the user model is equal to the email which is being posted to this view if that exists then we just want to tell the user that this email already exists i mean this email is already taken the message is dot info request email taken and then once we tell the user that email is taken we want to redirect the return redirect user to the sign up now that we have that we will use another if state member a leaf so else if we want to check if the username is taken so say user dot objects dot filter name goes to username but exists and we just want to do the same thing by saying messages that’s info request username taken and then we’re gonna direct the person back to this page so now for what if password is equal the username does not exist and you and the email does not exist just say else sometimes if there is no error nothing but happen what we just do now we want to create that new user so we just say user equals to user dot objects dot create user this one this one is going to be able to create a new user for us and we just say user name goes to this username that has been passed and then the email equals to the email that has been passed and also the password of that user we just take one password because we don’t need to sort to passwords just to pass so we’re storing the username password and the email basically now that we have that just say user dot save now that we save the user this should work but before you know saving the user or doing anything like that before testing it as i said we created this profile model so once we create a new user we also want to create a profile model for that user but before we test that out let’s just save this first of all and let’s go to our page and we have this one so what we want to do now we want to test the error that we configured in here remember we said if password is not equal it should give an error so let’s even test if that is working so our that is okay good so now that um give it this i’ll give another one okay so when i sign up now if i come into my users you’ll see that there’s no additionalization and this is because obviously the password was not the same so it can create a two different password but didn’t even tell us anything like the password is not matching i didn’t create or whatever how would the user know what happened so we need to do that what we are going to do is to go into the html file here we are going to use a for loop we are just basically going to pass those messages that has been sent and show it here like password no matching or password correct or username taking and stuff like that let’s quickly go back to our vs code but since we are sending all these messages already writing them to redirect it should be easy what we just want to do from above form let’s have a new div tag in there we want to have say for message in messages and h5 let’s just print that message this is just going to basically print the message for us let’s end our for loop but we want this to show like an arrow so it should be like a color red or something and it should be bold or something like that so let’s have a styling now right here we can just say h5 let’s give an initial color of red let’s save that and very loose good so we refresh that page and the data we posted before was reposted back as you can see now it says password not matching if we try to create let’s say admin because we already have a username admin if you tell us username taken let’s just give it blank let’s make sure this name nice it gives the username taken because the admin taken so as you can see now the error is being cut successfully what we want to do now if we make sure that there’s no error that means a new username email and password is going to create a new user for us in here but we don’t want to do that yet because if we create a new user now only the user object is created but a profile just won’t be created for that user so let’s go back to our code and make sure that once a user is created right here once we have a new user created we also want to create a new profile let’s say a new profile object for that user so first thing we’re going to do let’s log the user in it will say the user no we’re not going to log the user in first of all the first thing i want us to do okay so before we log the user in i’m not going to log design yet that’s because when we log the user in i want the user to be automatically redirected to like the settings page where you can upload profile and put this by you and location but since we don’t have that yet let’s just create a profile model for that user first before then when we have the settings done we can come back and change that so let’s just have a comment here and say user in and direct to settings page so we don’t forget about that and now right here let’s just create a profile object for the new user we’re going to do now is say user underscore module user.object dot get that name goes to youtube what i’m doing now is that first of all because in here also create a new profile we need to give that profile the user that owns this profile if that user will be able to give it this value we need to have the object of the user we don’t just need to have the username or the id of the user we need to have the object of that specif now what i’m getting now i’m saying the user model should be user the object.get the one which the username is equals to the username that was just created right now and then once we have that with the new profile and the equals to profile dot objects dot create user because to the user model and also the id of the user once you get the id of the user id user was what we used and we equals to the user model dot id so these are the only two things we want to give as default come back here to our modules gave it this value the user object and we gave you the idea of use so the biography the profile image and the location the user is going to create that stuff so now let’s just save this user basically and analyze the creating of the profile model so we just say new profile let’s save then and just redirect the user the login page but right now we don’t have a login page so since we don’t have a login page i’m gonna be able to i’m not gonna be able to redirect the user anywhere so let’s just redirect the user back sign up when we create a login page we’re going to be able to direct the user so let’s save this now once we have this saved now we can come project that let’s make sure our project yeah good so since it’s running now let’s create a new utah let’s say john let’s give him a password let’s sign him up it gives us name error now this is because it said name profile is not defined and this is because we are using this profile name but we didn’t import it right here so we need to import that profile model from the py file if from dot models import profile good this should work now if we come back in here done energy.com in my password now it’s sign up so it says email taking now this is where the error comes because we tried to create a new user so we created a new user for right now when it says name profile not defined the error was here that profile was not defined but that didn’t stop that from creating a new user the new user was already created but the profile object was not created for it so this is just what’s in the testing phase so right now we come back here and it’s refresh see john as a new user and as you can see is not a staff this stuff means he can’t access this admin panel come into profiles see that we don’t have any profile right here but we are supposed to have a profile for john this was because john was already created before we fixed the bug about the profile name not defined so now let’s delete john first of all now let’s try to login again good i refresh that page once i refresh that page from this button it’s going to send that post data again but if i refresh it from here just gonna load the page normally so since opposite i was sent the game john user is now created and jump profile model is now created so let’s go check that hit refresh so it didn’t create it if i come to profile also didn’t create it that means when i hit refresh didn’t submit that post again normally in like normal browsers like i think chrome once you hit refresh you’re supposed to submit that again but i’m using microsoft edge this video so i think that’s why it didn’t work but let’s just quickly go ahead and that energy.com password sign up good let’s just save it here so we have this sign up done normally you know it’s supposed to like take us to the login page to log in or you just automatically authenticate us into the platform but since we’ve not yet done all those stuff we just made it redirect back to this page first of all but since we came out to this page without an error we should be expecting now that the user and the profile object has been created if we come back here come to users see now that we have user john johnnergy.com come to profile code we have a new profile for john that is good so the user is basically this done user and this is the id of the user so also we’re going to be able to allow them to update that bio update our profile image and location as you can see as a default the profile image is blank profile picture.png is this that we gave it good that’s working fine everything is fine to this point right now next step is to be able to allow the user login into our platform now let’s create the login view for our application i want the user to be able to go to slash sign in and then the user should be able to sign in to the application let’s go back to vs code but now let’s just collapse this right here in urls let’s create a new view i will name it sign in let’s just take that copy it paste paste right here also open this again scroll down and create a new view cdf sign in quest return render sign in dot html now that we have this let’s first of all go ahead and collapse this let’s save this and let’s also save this so now once a user goes to slide sign in we should have that so let’s go test that out sign in good so it gives us this let’s also you know tweak this very well for everything to work good and we’ll come back here but before we even do that let’s go back to the sign up page and you know once i use that clicks on this login let’s take this out to the sign in view and also right here if we go to sign up before we have login let’s say f to search and search for login so do you have an account this should be to slash sign in or the second one is right here at the top right corner of our application let’s take them to slash sign in good now we have this if we come back and hit refresh now it says do you have an account if we click login it takes us to login good now let’s open up our login page sign in right here and then where we have sign in let’s sign into sociopoo and let’s scroll down on the changes also to social book it and what else so this is login login let’s create an account and register want to change create an account and register to make it go to the sign up view the register go to the sign up flash sign up now create an account goes to sign up good so this is done let’s come back in here and hit refresh to share book now let’s just you remember me you are not really using that this video so let’s just comment that out too good now what we just need is to you know configure this make it have a post method and all those fun stuff first of all as i did last time let’s just leave a space in our form just to finish it and right here let’s have a name name and this is the password if i type of dish password and the placeholder i would love it e password good now this is working fine let me save and see sending password and each of them have a name now so the action should come back to this plugin view and method repost as i said whenever we use a post method we need to add csrf token good now that we have this once a user hit submit or login send that to our login view let’s see is we have this again okay so that’s basically because we didn’t refresh the page so let’s refresh this yes anything in there login okay so it just comes back here which is what we want and let’s do a similar approach to what we did in our sign up so right you know sign up now login view i’m just going to say i’m going to leave an if statement again just like we used earlier so let’s just say if request method equals to post we’re gonna do something else just return this page this is what we want to do now and this is quite easy what we just want to do is we get the username and password just to request dot post name and copy and paste this password it is pasted right now what we want to do is to create a new variable and say user equals to earth dot authenticate onto authenticate with any post name password goes to password while dedicating with username and password good now that we have that initialized use an if statement will say if user is not none what this mean is that if the user is not known so for this to be able to work that means we need to even have a user with this password in our database so if we have it that means if it’s not none that means if is there if he’s present in our database and let’s just authenticate and say alt dot login take a request i want to log in this user i’ll say return direct to the home page so now when we log the user in we want to return to that to the home page else now this just simply means that if the user is none that means if he’s not you know he doesn’t really have an account and he’s trying to log in with a credential then the message error so the messages that info request let’s say again girls invalid and then we just redirected yeah let’s copy from here paste so we’re just redirecting the user back to this sign-in page did so for need everything is working here if this if it’s the post method get it initialize the authenticate the auth and check if the user is not known then authenticate if it’s none give him an error and yeah now let’s save this and we also have to come into our signing to add the gift tag that is going to take care of the error messages so we can just come down here and copy that basically the same thing sign in save you come here to sign in and we say if something that is not in our database as soon as it says credential invalid so that’s an invalid credential but it really gives something that’s in our database which is done and see now it is authenticating and boom it takes us to the home page so this is working fine and and once a user authenticates it takes user to the home page now we want to do two more things we want the user to be able to log out so once these are coming and click logout that should be able to log out and normally be authenticated and also we wanted that where user can access this page the user must be logged in if user tries to come to this page when it’s not logging in to be directed to the login url i’m going to show you how to do that first of all let’s create a new path for log out out log out onto views f log out and i take a request also so let’s just close that up so this logout view is quite easy all we just need to do here the auth a log out request and we now find direct sign in since we have this now and just easily come into the index and search for log out right here out actually where we have log out now just say log out come back in on each refresh from here they log out boom we are logged out and it takes us to the login page to login but one more thing want to do as i said is that if i come to this home page now you see i’m still able to even access this home page while i’m not even logging we want that to stop so for us to do this we’re going to use a decorator kangoo has this built-in function that allows us to basically take care of this login like when a user is not logged in or not authenticated want to redirect the user to a page before bringing it back to another so let me show you what i mean by this first of all we are going to need to import something so let’s scroll all the way up right here i say from angle dot country dot dot decorators import plugin required this login required is going to allow us to be able to direct a user to the login page if it is not logged in onto our csep as i said also is i want to access this index page you need to be logged in for me to do that now you know i can easily like configure this and say if user is not logged in or is not dedicated then redirect the person well i don’t want to do that so what i want to do is because that is like this is a better way to do it just like a line of code i’m just going to say at login required i’m going to specify the login url so that means url it should redirect the user into that is sign in url so if i save this now and i come here this home page as you can see it takes me to this login because i am not logged in and you see automatically after i sign in it takes me to the omp let me go to john and okay that was valid credentials john so right now i can view this page one more thing i need to do is to also put that login required in logout because a user can be logged out already and now come to log out to try and log out so let’s just make sure that the user is logging first before you can log out so let’s just copy this that’s good to go that’s basically how to do that and save that and now we have everything done about the authentication to this point so now we can just log in good so to this point now we’re able to log in so now let’s go ahead and continue with the settings view so this settings view basically is going to be where the user can upload or change his profile image or you can also like add this bio on like a location or change it by you on location so what we want to do first of all in the urls let’s create a new url and we’re gonna name the url settings we’ll just say settings and if you take from the views.settings and name equals settings also views now we need to come here and create a new view and let’s mw settings take a request and we just render settings.html which is this page 13.html so now we can save this but before we save we also want to give it this login require decorator and this is because a user can come to settings or to change profile image or something like that if they are not logged in that’s just not possible so we give it that and let’s save it so now if we go back to check our application to be able to go to slash settings so let’s see settings s-e-t s once we come here it should basically load up that page good so we have this from here right now so we’re going to tweak this form a lot we don’t need this we basically don’t need most of this what we just want is a file field or an image field the text field for the bio something like this and a location field that’s what we want but you know if you want to add your own customization you can add anything you want you can allow these apps to be able to you know update first name and last name work in a relationship even all of this but just for this tutorial what we’re going to be doing is just basically the fields we created in our profile model which we didn’t set so if i come into model.py you know that we’ve already set user and user id for each user but we haven’t set by your profile image and location so that is the form where user will be able to you know set all of that so what i want to do now i’m going to come to the sign up so now once a user basically is logged in so a user creates an account and right here i said log in user and then redirect to the settings page so that one want to do now so we want to automatically log in that user and redirect to the settings page because now if you’re following along you know that once the user sign up nothing is going to happen it just bring the user back to this page but what we want to do is that once the user sign up it should take the user first of all automatically log in the user and then take the user to settings page let’s do that so say user underscore login equals to auth.authenticate i want to authenticate with username password i’m going to give you the username that just been created and also password with the password that has just been created so now once we have this we can just use say odds.login down here we’ll say earth login take a request i want to log in using this login right here so now it’s going to log the user in and then once it logs user in it’s going to create a profile object for that user and after saving that profile object we want to redirect the user this settings page by taking the user to the settings page and not back to this i know so this is what we want so we can just go ahead and close this up and if you come to the signing that is taken care of so once the user is logged in just take the user to the home page they can see the post feeds and so that is done and we can just save that what we want to do now is to come into the settings and we want to first of all go to the html page and change some things in here so if basically just go into settings.html so right here we’re going to change some things we’re going to remove some form tweak some from and yeah so let’s get started with that so right here where we have let’s see what we want to remove but we have account settings we don’t want to remove it actually we just want to add some things in there so you can see here we have account settings right here we want to show like account setting for this user like maybe for john which is the user so whichever user is currently logged in we want to show so first of all and we also want to have a link here where user can go to the home page back because right now isa can just go it has to start removing the url bar to go or pressing back we don’t want that we want a link here that will allow user to go so we’ll come back here and we have an a tag and i should just take user to the boom i will close it and say home save that and come back here hit refresh so it says um account settings if i click on this um it takes me to the um home page but i want to do something like home slash account settings so we know that that’s the directory we are in so let’s say um slash account setting but now we say account setting for then we show the user but that user has to be in a bold tag so to show the currently logging user in the jungle template on the html file is what we do you do we open two curly braces and close it and we’ll say user.username that’s what we do if you want to show the email which i don’t know why you showed that but we want to show it to you dot email so let’s just hit refresh button so as you can see there’s home slash account settings for john rj.com which is the email the user puts when he was logging in let’s just say user dot username now we save this it refresh the account settings for john and that is good we’ve done that next thing we want to do to go back here and then we are going to scroll down first of all all of this ul tag basically don’t need it just gonna i mean that out so i’m actually building this from scratcher you know you understand everything that we’re going to be doing here and after this let’s have like a break just to leave this space so there’s a little bit of space there unless i have like a line to demarcate her fresh so there’s just a line there just to demarcate this is the title and this the main page now that we have this just close that gap we’re gonna come here in this basic we want something like general settings so this should be like the general set let’s just change it to general and that’s done and now let’s tweak the form but before we even do that we don’t need privacy also so we’re going to scroll down scroll down right here you see where we have this privacy so all the way from here to the end of the privacy div tag i have to close all of that so from here close this that so now that just basically close that div tag for us scroll down yeah so that’s good and if we save it and go back you don’t have that again because we don’t need it and the next thing we want to do is to remove first name last name we want to remove email that about me want to change it to bio want to leave location remove working art and remove relationship so basically just removing the things we don’t need and keeping the things that we need yeah first name out me we change this to bio give it an id of bio aim of bio actually we can leave the id but what we need to change is the name because that we’re going to be using to get it’s in a back end so now the location we’re going to leave that and what we need to add is the name for this location so since we have a name just say name equals location good come back here and hit refresh we have value we have location and we don’t need working out and relationship so working out relationship click on we will remove that let’s save and refresh it so what we want to have now is another field for the profile image so we’re going to go up here i’ve like like this and then when i say profile image this would be a file field a name a profile let’s just give the name image let’s save this it’s refresh so now we have this we have the profile image the bio and the location so i’m also also going to do something like you know when you go to like instagram and you already have a bio once you come to the settings you’ll see the bio you already have there so for example let’s say we have a value here and we hit save if we hit save and it saves our database when we come back here we don’t see that by you yet we want to be able to see that by you so i’m going to do that later and you’re basically going to understand what i’m talking about when we do that but first of all since we have all of this done let’s just make sure we have our form because all of this needs to be in a form so we can send it to the view so right here that general right yeah but we just need to have here now the form the form i’m gonna go ahead and close that form at the bottom so we using the form right before this other comment somewhere we also have a button to save that we have this save button here okay so we have the save button button it should be right here so let’s just leave it down like that and then since we have this done already let’s just set an action let’s set an action so as always we wanted to come back here another method of post we also need to set up the csrf token so now that we have all this set up we in this button here this button should be submit button first of all we don’t need this cancel what or we can do something like once they eat cancer take them to the home page let’s just put that in there bash so if they cancel and they don’t want to do that again look at the bottom left corner you see that it’s taking them to the home page so that’s what we want and this save button type button actually the type should be submit just so that it submits this form now we hit refresh maybe okay when it brings back here good so now all of this is working fine next step is to go into our views right here in our views where we have these settings we’re gonna have to do a little bit of coding here so what we’re gonna do first of all we want to get the particular profile object of this user of the logged in user the user profile goes to profile dot objects dot get user equals to request dot user so basically what this is doing is saying that we have a new variable named user profile and the value we’re giving that is profile.object.get that means we’re getting a particular object so we’re getting the profile object in which the user come back here in which the user is the currently logged in user rightly authenticated user since we have that what we want to do is to pass the mixture in that pass that into our html view like this user profile and user profile so now that we have this if i come into my html settings.html i can actually do something now so as you know as default a user already have like a profile picture i already have a profile image that we gave the user winning first of all from here you’ll see that profile image has a default of blank profile picture so let’s use that as a profile maybe we should be able to tell the user that there is a profile image here we should be able to give it like a value a default value here and if the user wants to change then you can go ahead and change and also the same thing if the user already has a bio you want to show it here so you can edit or change same for location we’re going to come back to settings first of all let’s start with the bio so we don’t have a value so let’s have a value in the bio i know since this is a text area we don’t put the value here in here we put the value so we just use it poly braces and we say user profile dot bio since we already sent that from the views in html it should be fine so user profile.bio location this is an input so it needs to have a value if it’s having a value it doesn’t need a placeholder so let’s give value and let’s say user profile dot location and this is gonna automatically fill this place in if the user has a buyer or location we refresh we shouldn’t see anything yet so we’re not submitting it does it enter won’t say anything here because this user doesn’t even have a buy your location but now let’s come to profile image first to do this is gonna be the same actually so what we’re just gonna do is say after place order or we don’t even need a placeholder i will say value equals to userprofile.profile img now we save this and come here and hit refresh now right here we’re supposed to see the current profile image of the user but we’re gonna fix that again you know after we do something and i’m gonna also explain why we do that but first of all let’s leave this like this and what we want to do is basically just come into use right now once the user hits submit you want to be able to send all these data the views update the data or even create a new data for that particular user so for this image html has this security system that doesn’t give a default image so that’s why we’re not going to be able to use this value for this image now i remember working on a few projects a while ago and we tried to do this but because html has this security system as i said that it won’t allow you to put an image or a default image when a form loads just you know for some kind of securities and that’s why we’re not going to put value for that but the other way to go about this first of all if there is a user we can just display you know the url here that you already have you a profile or you want to update or something or we can just even showcase the profile image here so let’s see let’s see what we can do and this is not too important but just to make sure that we do something there we can have an image src and that can be from profile user profile dot profile img dot url so let’s make sure we change it to dot let’s save this first of all and hit refresh as you can see it basically just shows the current profile and if we change it and we’re going to change it in a bit where we change it this should change also let’s try to i don’t know 25 height five i’m just testing the size first how small okay that’s too small so let’s give it like hundred hundred okay so that is good now we might you might want to put it in another way or any how you want to do it so first of all let me let’s say we should have like current image or any i want to do but let’s just leave it like this first of all so this is the current profile image that is good now what we just want to do now is to come into the views and right here in the views we’re going to say if request dot method equals to post i want to get something and what we want to get first of all once we get if the user actually tries to update the profile image or not and this is because in our models we make sure that this profile image right here is compulsory when submitting a new form we’re supposed to have a profile image so we can say if request dot files dot get image equals to none so again there are plenty ways you can do all these things like this is just the way i i’m going to do it in this tutorial so what we’re just saying now is that if the request of file.get is equals to none so that means if there is no image being sent then we just want to get only so if we scroll down here well we just say they let’s even get the image also image goes to user underscore profile dot profile image what this is doing is that if the user didn’t submit any image it’s just getting the current image that is ready that these already have and just like submitting that again basically so then we are just getting the bio quest dot post i o and we also do the same for the location let’s get the location so now since we have all of this we can just update the user’s profile object so now what we want to do first of all because we already have a file being sent so for us to have a file being sent we come into this form right here whenever you are sending a file you need to make sure that you have another like attribute in here so what we want to do because html when and also when working with django we need to configure some things like you know when we use post method we have the csrf token when we’re submitting a file in the form we need to make sure that we have enc type and then we’ll say multipath slash form data now this must be there because if this is not there it’s not going to submit that form it’s going to submit the rest it takes the the text area all those values is going to submit them but not going to submit the image or the file and you must make sure you have the same let’s just save that now we can come back to the views and in here let’s just basically say use the profile dot profile image goes to image do the same thing and say userprofile.bio i want to make it equal to bio also use our profile dot location make it to be exposed to location now that we have all of this let’s just say user profile dot save now we’ve updated that particular model but what if the user is submitting an image so let’s say if request quest dot files let’s get image it’s not equals to none it’s exclamation mark it is not none and that means there’s something there so now since we have that we’re basically just gonna get that image that these are sent to the image equals to quest and now when we’re getting image if we write in a post method it’s going to be quite different they request dots get result files because we’re dealing with files and dot gets when you have a bracket the image so i want to get the value sorry that’s image and then we just want to basically do the same thing for the bio so we just copy this so by you adjusting request oppose bio location request of post location and we are saying user profile dot profile image goes to image and the same for bio on location and then we are saving it and once we save it we want to redirect the user to say return direct back to this settings now now we have all of this configured it should totally work let’s go ahead test that out and come back here hit refresh now let’s change this profile image let’s see what we can change it to just allowing that to load up orders and we have all of these images here let’s just change it to one of it so it gives it this and let’s say bio i am john first nerd and location let’s just say manchester now we can save once we save boom see it brings us back to this page but now this profile image has been updated now the buyer says i am joined and i am the coolest net and it gives us okay sk doesn’t need to be a nerd so we save that and you can see that also updates let’s come to home and if i go back to account settings not sure if i’ve updated that okay it’s just saying settings.html but if we go slash settings you’ll see that that bio is there so it has been saved in our database we have the location there also and the profile image saved so if we come right here and then we go to john’s profile object what we should see now is john the id is id is bio a link to is profile image under manchester and that thing i want you to see is how this profile image up uh uploaded basically so remember that in here now models said you should upload to profile images as you can see here that’s what it did uploaded to prefer images slash i dot jpg whatever the name of the file is so if i come into media now on social book media you can see now that i have a new folder named profile images and in there i have the image that the user uploaded basically that’s how we can you know configure these settings so what we just want to do the last thing is to come into index right here we have account setting i want that to go to slash settings that should work and we do not need explore i’m not also up so let’s save this and come back here go to home from here now you should be able to go to the account settings to see it and we can change the location let’s say it moved unless hit toronto and we save it now the location is toronto go to home come back to the account settings so that is cda basic and we can also cancel like we don’t want to do it brings us back here so for now we’ve been able to have the account settings for the user where he can update his bio his location and his profile image now let’s move to the next step let’s get working with a user being able to upload a post the first thing we want to do is to go into our models.py file and right here i want to create a new model for the post to say class post models dot model and we wanted to have an id we also wanted to have the user and it should be the user name i wanted to have the image which the user is uploading a caption of that image created at as a date posted a name that created that and the number of likes so uh giving it all of this field and id we’re gonna use the uuid field so first of all we need to come up and import uid so this uuid just helps us to generate a unique id for you know this particular field for each of the post and we also want to import something else want to import date time so say from date time import date time so this date time is going to take care of this created at so it will get the data that post was created or uploaded now for the id let’s say models dot uuid fit and we’ll say primary key equals true so this primary key question means is like this is the id now of this particular post the identification of each of the objects now this is because once we have an id as a default jungle creates an id for us which just has like the first post we have an id of zero second post one two three and so on but we want to change that i want to give you this unique id so it’s gonna have like a long character but it’s going to be very unique i want to set that to the main id of each of the objects so it’s basically replacing the initial id when we say primary key equals true but anyways anytime we are using an id field in a django model we need to say primary key equals true in order to just give us an error anyway so now let’s say default pause uid dot uid4 so now this is what we need we are using the uuid field primary key is set to true and the default is guid dot uid4 so now the user this time around we’re not using a foreign key i know he’s in i’m not joining them together what i’m just going to use is a character field and this is what is going to go in here is the username that’s the owner of the post so let’s just say android and then image image is going to be an image field the models dot image field upload to and then we’ll say let’s upload it to let’s say post images the other one which was this we uploaded it to profile images but this time around we want to upload it to post images they post underscore images so that is done and the next one is caption now this is just going to be a text field in models dot text field and you don’t need to put anything in there created at is going to be a dates time field we’ll say models dots date time field right here i’ll give a default of date time equals now it’ll say default will have to be equals to deep time close that up so defaults date time equals that and now next one is the number of likes okay models that’s integer field i have to give it a default equals zero because when a user just upload a post the initial likes number should be zero and when someone like then it will be increasing when someone dislikes you to decrease so let’s just return it in with close itself we’ll say return self dot user this time not a user.username go to user just because this is not a foreign key so it’s not an object that has been passed in here philippine patent here is just the username so dot user now we can save this and now that we have this saved we can just come into our command prompt first of all we want to opt out of a server that is already running and then we are going to make migrations and migrate python manage dot py make migrations so this command line is just gonna as i said earlier you’re gonna change or make this the changes save the changes that we made in our windows or py file it’s going to save it into a file named initial i’m going to save it into okay so it gives us an error as no attributes uid field okay so the error right here is that this uid field supposed to be more better let’s just run that again each of the changes is saved into a brand new file so if we come to this file use yes so zero zero one initial then the more migrations we make um let’s just wait for that make migrations and when we migrate you’re going to see that there’s a new file here okay exactly so we made migrations that worked a new file is being created it’s just updating it that’s the way django just so you don’t really need to understand why that is that’s just the way django works with make migrations and migrate that’s what happens when you run that command i need dot py migrate and now this is just going to migrate into our database for us very simple stuff good now let’s run our server again and that’s good so now that we have this in our database let’s make sure that it’s running so we can go check before we check let’s register this in our admin panel to open admin dot py just say post post now that we have that we can close this up and we can basically just go into our admin panel right here and we come to home so once we come to home now under core and that is called app we should see profiles and we should also see posts with yes just wait for that to load click on good as you can see now we have this post model and this is where we’re going to be storing all the posts that every single user on our platform makes so that’s good now let’s go back in there and the next thing we want to do now is to go into urls.py and create a new url for take care of uploading a post should be upload load upload i will come into our views on and just right here we have a new view a new function takes a request and let’s just turn an http response for now upload view we don’t just want to leave the response block so we don’t get an error by just returning an http response and one more thing let’s also add this plugin required in upload so that a user can just go to our website and try to upload or try to you know send some data to it even let’s save this and let’s save this now that we have that done i’m going to come into our index.html let me quickly go to our website right here where we see upload pics or videos so once we click on it it’s going to open this so we want the user to be able to choose file and we want there to be a box for caption so you know the user can see a caption or see a field where you can input the caption and they should also be a submit field so now let’s just go ahead and do that first of all we’re not uploading videos so we just changed upload peaks too that’s but where it is between peaks right here changes it peaks here also changes to x now let’s see the next thing we want to do so before we even continue i want us to be able to have like a text around that area that says welcome user so the user might be around this area that can say welcome like john i think john is the one logged in now so john we know he is logged in and another thing is we want to change this particular icon this is just a default icon now we want to change it to the profile picture of the currently logged in user let’s go ahead and do that now let’s go to where we have this image what i’m just gonna do right click on it and i’m going to copy the image link i’m going to search for that image right here but i’m going to set up here good right here we can see it what we’re looking for we actually have it in i think 10 different plates as we can see here so okay i think this is it so right here what we just need to do we need to pass we need to go into the views of the index and we need to get the profile object and then pass it in here so we’re going to come into use right here i’m going to say user object so let’s get the user object and we’ll say user dot objects that get one in which the username is equals to request that user name so now we have the object of the currently logged in user and now we want to get the user profile object the user profile will be equals to profile dot objects dot get the one in which the user equals to the user object now i hope you understand what i did so first of all i got the object of the currently logging user now that i have that object i use it to get the profile now if we come into models file we will be able to see that in here first to get the particular object with the user we need to provide the object of the user since we’re using a foreign key why isn’t a foreign camera connecting it to this user model so to get the objects a profile object of a specific user we need to provide the profile the user object if you understand we can also drive it another way we can provide the user id but i just feel like this is better way so now that we have the that profile object what we can just do is to pass that into our html just copy this now let’s say user profile goes to user profile and what this is doing is i basically just sending this variable of user profile into our html so right here now if i come to index and remove this we can access that using the user profile the dots and let’s see what we use to save it is profile image dot profile image dot url so we use dot url when i want to get the url of an image view or a file field in general now if i save this and i come here and i hit refresh but i shouldn’t see this image yet good so i see the image of the currently logged in user if i go to account settings and change the profile image the new profile image so we have that done the next thing we want to do is to have the welcome done or welcome whatever the username is so we’re gonna scroll up a little bit first of all now to some things so right from this div up here and a comment that out and also this just as we are going the ones we don’t need what can speed them up now that we have that all i just want to do and it fresh let’s see we have upload page before this upload peaks we want to have let’s see i think we can cancel this now and we have the upload here so let’s look for something behind it so let’s see please upload uh for that good so now we are in the form basically right here this is the input for the file where it says choose file and what we can do right now we need to make sure that this is inside a form so we can basically post that form in there so up in here where we see import videos from youtube that’s not here but okay so let’s just scroll up uh so basically when you have a template you just wait to look for how to or where to put your form okay so this is please upload uh so we want to put the formula say around here before upload peaks see okay good so the form should be here we have the form here cut this out and wherever that div is ending that is where we’re going he says the div ends here close it is actually that okay so we’re closing the form here we’re opening the form here and this is not part of the can actually leave this but age it’s maximum and yes so now all of this is inside the form now that all of this is inside the form we can have like an input for each of them so what we just want to do right here where we have scroll up a little bit peaks of videos i’m going to scroll up to the pain of the form so this combine that out and hit refresh let’s see okay so you don’t need to comment that out upload peaks or videos so let’s just say upload x if we say that now we have a file field is what we want just hit refresh make sure everything is working all right so now we have a file field which is what we want and what we’re just going to do is to come here we’re going to remove it from this custom div i’m going to a from custom i’m going to save that and now under here we’re going to have type so from here af class uk text all right so now what we want to do is to say the type of the file and then name equals to image underscore upload so we save that hit refresh okay so we have this field now we don’t need this of all so it says choose file which is the image that we want to upload and the next thing we want to have is like a text area so let’s go back there so we want to have a text area beneath so we can still be inside this div tag just have text area let’s just close now that we have this say let’s give it a class button soft running and small just give it a styling fix that in there so now that we have that we can give you the name and the placeholder and stuff like that let’s say name equals caption placeholder equals caption and just have like three dots now let’s hit refresh and see how the form looks if we upload ps okay good so now right here basically have here where it says choose image and right here also we have the place for the form to place for the caption in the form so now let’s have a break i have a button so what we want to do in this button is button i want to give it a class so it would you know have the styling so let’s say class pause to 700 and let’s give it a name or a type this button should be a submit type so since we have these right in here and say upload since we have upload let’s also give this this styling of button from here that class let’s see our button looks alright so it says upload the caption the image and good don’t want to remove this or upload i don’t need that and actually what we can do is we can have our form right here and we can close the form after this div tag right here i just close the form then indented well and then we can come down here we add that form get the form somewhere so right here move the form there scroll up or not there so this is in a form that’s good actually what we just need to do go up to where the phone begins for this we have added the formula yes and remove that now through back of it down that phone so now that is good so now that we have this form we can basically continue with what we want to do what we just want to do now is to you know allow these to be able to upload an image put the caption hit upload send it to our view and then create a new object for those data with those data so now where we have our form right here right here and say action should go upload and then method should be post and one more thing since we are dealing with we have files in here we have to put nc type multi-part flash from iphone data and this works and now we can hit save so since we have all of this now being sent to this upload view and come back in here and in our upload view we can basically get all those data so now in our upload view the first thing we want to get is if the request the method is post if request the method equals to post will do a specific thing that’s when we’ll create data but if it’s not equals to post that means if it is i just try to go to slash upload without even posting anything let’s just return the user to the home page so that’s good now if it’s a post method let’s first of all get the user the image caption and yeah that’s all we need so for the user it equals to request dot user that username so if we come into our module.py let’s see what we need to give in our post we don’t need to put the uuid as a default we need to give it a user we need to give it the image and the caption you don’t need to give it the creator that and no like so just the image and caption right now so say image caption the image is equals to quest dot files dot get image upload let’s just go ahead and confirm that right here in our form this image name was image upload and then for caption press dot post caption that’s that and now we can just easily create a new one we can just say new post and be equals to post well we use post yeah we need to import posts probably not imported that we imported profiles now that we have post imported we can say post dot objects dot create user equals to the the also want to give it the image so you will give it user image and caption so the image goes to image caption equals to caption now we’ve given it all these details and come to the next line now and say new post let’s say so after saving it we just want to redirect a return direct on page now this should work come back here and let’s hit refresh okay it’s not running let’s wait for this to reload and once they should load we can test that out basically so loading now we can come into upload peaks unless the peak from here that should open up oda our money job is i’m sure able to choose a peak and let’s just anyone and we’ll say nature let’s upload so it gives us this for three forbidden and now this is because in our form right here we used a post method but we didn’t add the srf2 so that must yeah let’s save this and go back try to upload again um here it’s upload good so it brings us back here it doesn’t tell us anything doesn’t show us anything yet well we come into the admin panel and hit refresh be able to see a new post object created so let’s wait for that to load do it so now we see a new post object created for john and we can have all the details of that post so let’s wait for that too and i’m also going to explain something in this url so you can see now the id which we includes the name a link to the image option the date it was rated at and now it has zero like so remember when i said this uuid now replaces the id when we say primary key equals true so now in the link that is the identification for that post so that’s what i was talking about when i say when we set primary key equals true so that replaces the initial id that django provides and use that as the id so now we are able to upload the post and allow everything show like this and allow you know it to save into our database and allow everything show like this what we should do now is to return everything and show it in the post feed when we come in here as you can see this is still just showing all this static images or these dumb images that we put there so what we want to do now is to change this and once we get all these images and the person that it whatever once we get it from our database let’s do that so now what we want to do is to go ahead and customize this post feed so right here once a user logs in what we want the user to see is a list of posts a random post but for now because we’ve not implemented the picture of being able to follow a user what we’re just going to do is to show a post of a list of all the posts we have in our database so because we don’t have the followers i’m following when we implement that we’re going to be able to show only the posts of the users that the logged in user is following so you know like when you log into instagram or any other social media that you see the post of people you’re following or related or anything related to that so that we’re gonna do later in this video but for now let’s just take away these static images and stuff and let’s change it to a list of all the posts we have in our database so actually this is very easy what we just need to do is to come into our index view and right here in our index view we’re just gonna say so we don’t need upload again and collapse that and right here what we want to get is we can say feed list or let’s just say post equals to post dot object dot o now this is all we need to write and we can just pass it in here by using a comma and then like that so now we can save this and now that we have this saved we can come into index and right here in index what we can just search for first of all we want to come and look for where we have these these other ones the ones below it we want to delete any other one we have below it we just want to leave this one and then we’re going to loop through it so we’re going to come so we have this right here but since we have this right here at some middle underscore ml we know that that’s the one for this so post error post one but this is under post one good post too let’s also collapse that load more let’s collab that we’re gonna just remove all this basically post three post four load more yeah so we want to delete all of this we just want to keep only one so we deleted everything to those two now if i save it and come back in here what i should be seeing is just only this first plus good so this is all we have now and what we just want to do is to open that back let’s close that back first of all so this post want to loop through it in jungle when we are sending a list we come back here now when we are sending a list from here so we said post.object or this is basically returning to us as a list so this that we pass into the view is a list if we come in here now we can basically look through that list and just display the data we got so we can say for posts in posts and then we’re gonna end the for loop now that we’ve used the for loop we can change this to the post dot now coming to our models dot py file to depose the user so this will change to the username of the person that posted it and let’s try that out so that is john so for now is we just have this job basically just because you know the what is getting from the database as the user of john so we also want to change the image to the image that this john uploaded and yeah so i’m going to scroll down so we have this delete post function which you’re also going to take care of later right here where we have image src so i want to have post dot image dot url and we hit refresh good so you can see that is the image we uploaded that we have here now and i just want to change the link because right now if i click on this it’s still going to that image that we had earlier but now i want to change that to this image so let’s just change that this image so whatever image it is is what it should go to if i click on it it opens that image larger so now the next thing we want to do is to have like a caption so for us to have a caption we’re just going to look for where we can put that caption so we’re going to scroll down here we have the likes so if we come down here i think we have it right here where it says like spy so in this place we’re just gonna basically have a caption and we can say first of all let’s see once you remove all of these so you need this not need this and let it refresh okay good so we’re just basically taking out all the things we don’t want and now let’s see let’s see what we have now you know we need that take this away see okay so right under here we want to have the caption and well we have the caption we have like the person that posted it and then the caption so let’s do that right now and what we’re just going to do so having it right under here so where we have is right here we are just going to say let’s have a p tag and in that b tag let’s have an a tag so this a tag is going to be the user so say post.user and then we also want to have the caption of that post post dot caption let’s save it and hit refresh so now we have this this is the user and then we have the caption so now we have this but doesn’t look well let’s like give this one a strong tag and let’s also link it so what i want to do now is to cut this out this trunk paste that in there so we have john now strong and this so this and this we wanted that once a user clicks on one of these if you take the user to the profile page of this user we’ve now yet set up the profile page fixture but let’s just give it an a tag first of all so this has an a tag but it should stop here so let’s just give it a link let it go to ash first of all and if we scroll up where we have the post dot user that should also be in a link like so a put that back in there give it that and give it an ash now we come back here and hit refresh once we click on it it just basically brings us to this ash but later when we’ve taken care of the profile in the profile page feature then we’ll be able to link that and also we’re also going to do it that if this post is for logged in user then the user should be able to delete this post but basically now we are able to upload a picture and just showcase it in the feed let’s try that out now if we upload a pix we wait for that to load up the files and now let’s upload this and let’s say the word it’s beautiful and then we hit upload so now that we upload we have this right here so you can see now that we have the second image right here like what is in our database is what is showing right here now but as you can see the second one is what is down so we basically want to have the latest posts at the top so to do that we can come in here and say for post in post reversed hit refresh now you see we have the latest boost right here so we’ve been able to take care of the field the photos feed and let’s move to the next step so now we stopped at this post feed where we can just easily get the data of all the objects we have in the post model in our database so as you can see right now we just have all the posts we have stored in our database well normally we are not going to stop this post feed just like this because that doesn’t make sense we want to be able to customize it for each specific user that means we want to get the post of the user that i am following so not just all the posts we have in the database but since as i said in the last section since we’ve not implemented that yet we’re just going to stick to this stick with this for now and what i want to do is to be able to like a post so this button here once the user clicks on it we want the user to be able to like that post and also right here it should be updated like um this post has three like this blues has four likes and we should once we unclick from that button again we should be able to unlike the post so let’s just go ahead and do that now we’re just gonna come in here the first thing we want to do is to have a url where we’re gonna be submitting you know the data of which post we are liking and who is liking that post so we’re going to come here now we’re just going to copy and paste that and we’re going to have a new path we’re going to name it like i think post so we’re just gonna copy this put it in there for the name and then for the views the views can’t have an iphone it needs to have an underscore so now let’s just copy that for the view and right here in views we’re going to close this for now let’s create a like post function and then we can just create it like under upload right here df like post take a request and let’s pass first of all and we also want it to have login required so urls we save these also now this is good the next thing we want to do is to come into our index.html so right here let’s see where we have that like button we want to be able to link it to submit like a mini form not really a form but let’s see where we have the like button first of all so this like button right above john and then that should be down here okay so this is the like button i suppose no this is the other button to download so now this is the like button and as you can see that like button is already linking somewhere which has an edge so what we want to do is to change it to slash like post like i’ve imposed so now once you use that click on this you go to slash like i’ve imposed but you want to go there by sending some data so let’s send posts id so want to send the post id and the post id will be post dot id let’s save this and check this out i’m gonna refresh this page now and then once i overrun this button if you look at the bottom left corner you’re gonna see that we have slash like posts a question mark name post underscore id equals to the id of that specific post now we go to the next one we see the id of that post so each post has a different unique id but since now once we click on that we’re sending it to that view it’s going to give us an error now that this particular place does not return anything so it doesn’t have written an http object but that’s for now but what we want to do is once we click on that it will take us to that view but within like a millisecond it’s going to take us to that view automatically create a new object in our database and that object is going to be under a model that we’re going to create and that model is going to take you over liking post so when a user likes a post you’re going to create an object app this post id was liked by this user so that object is that module is going to have two fields and then once it does that it’s going to check if the user has liked this post already or he has not liked this post so if he has like this post is going to update that and he does not like this post if he has liked this post he’s going to update that here by reducing the likes but we are not like this post what you’re going to do is to increase the likes so now let’s just go ahead and do that and once that is done we want you to redirect us back to this right here in our modules file first thing we want to do is to have a new model say class like post and that should obviously take from the model dot models and what we just want to do is to have a post underscore id and that should just be a models dot character field and let’s have a max length like 100 and the username that’s the name of the user that is liking this post let’s say models.character field and i should have a max length 100 and let’s say df the r itself i’m just gonna do is to return self.username so this is what we have now and what we want to do before we have unreal migration is to go ahead and import that here in admins.py file so we can register it in our admin panel copy paste copy this paste and save so now that should be registered but before we go and view that let’s make sure we come here it gives us an error i said models.model does not doesn’t exist should be model.model that models dot model i come back in now i’m cut out of that okay so that you just got out of that and i will say python manage dot py make migrations and this will save the changes and tell us what has been updated now we can say python manage dot py migrate now this is just going to migrate that to our database good now let’s run our server back and once we have our server running good we can just come back to our browser and actually the tab where i remember i opened an incognito tab by private window where i log the admin user in i close that tab so just have to open that again and quickly log in the admin user so slash admin and remember that earlier in this tutorial we created unique admin user let’s just log that in good so now we log in now we now see a new model called like posts so now once a user like a post issue update here i’m also using unlike you should also update here let’s just go ahead and do that so to this point now we’ve created the model right here we’ve been able to link to where the user will be able to save whatever the user is doing without liking your own liking and what we just need to do nice to go to this view the view of this url and now collect this data and do the rest so now let’s import like post and right here where we have this like post the first thing that we want to do to just get the username of the currently logged in user to say request.user but username so that’s that just got the username of the currently logged in user and then the post id which was sent from our template so say request dot get dot get and what we just want to do is to get post underscore id so we have that now and then what we want to do is to get the post object so since we have the id of that post we want to get the object the entire object of that post to say post is equal to posts posts dot objects so this post is actually the post model which we imported if i scroll up here right here you see we have that post suppose dot objects dot get want to get the one in which the id is equal to the post id that has been sent so now that we have that what we just want to do we want to first of all check as this user liked this post before so we want to check if this specific post has been liked by the currently logged in user so that we know whether we want to like or unlike so what we’re just going to do is say like like filter don’t want to filter the database and say like post dot objects dot filter post underscore id equals post underscore id so let me before i continue let me quickly explain what i want to do so i want to get if there is actually an object in our database in which the post id if i come to my models in which the post id is equals to the currently post the current post that has been sent here and the username is equals to the currently logged in username now if we have an object like that that means this user has really liked this post so we know that we need to unlock that’s what i want to do well if you are very familiar with jungle you know that when i want to get just one model i mean just one object i need to use dot gets not the filter but that’s when i want to get just one model and that’s what i want to do here i just want to check if one model exists but if i do that in this case it’s going to throw me an error because right here i am basically not if that does not exist it’s going to throw me an error now i can use an if statement and say if like those post dots gets blah blah blah exists or not but it’s still going to throw me an error and to solve that what we just want to do is to use filter now when we have filter we can just say onto fuel tank with the post style is equal to this post id and then the username is equals to this username that we got which is the currently logged in user so if we have that already what we want to do now is to say at the end of this because as we know this is going to give us back a list but we don’t want to get one module one object we’ll say dot first so now this is going to give us just the first one it gets which should even be only one in the first place so now that we have this what we can just say is i’m just going to come here and i’m going to say if like filter is equals to none now this means that if it checked through the database and you didn’t see any object that corresponds with these inputs that i gave then that means the user has no you like this post so we want the user to be able to like display us so say new like would be equals to like post dot object dot create i want to create a new one in which the post id equals to post id the username equals to username now we can just say new like dot save and now the next thing we want to do the reason why we got this post object so remember that once we got to the id of the post we have to get the object that post now this is because if we come back here we’ll see that in this post object we have a field called number of likes now we just want to increase the number of likes when a user likes that post and decrease the number of like when the user unlikes that post so let’s do that right here now after saving that after creating a new like object what we can just do is to say post dot number of likes should be equals to post dot number of likes for this time around plus one since a new user is liking this post now we can just also say post dot save after saving the letters return redirect the user back to the home page so this should work now when a user tries to like the post it should create a new object in the database but after this what if this query that we try to search for already exists that means the user already likes this post then we want users to be able to unlike this post what we would just say is like filter dot delete so we just want to delete that particular object that we got since it is i want to unlike it and then we’ll say post the number of likes this time around -1 and we can just say post dot save and we can also do the same thing by redirecting the user we say return redirect the user back to the home page so now let’s save this and then let’s go ahead and test this out so first of all if we click refresh we see that we have no post object here but we come here now and hit refresh and we try to like this so nothing shows it didn’t return any response but if we come back here and hit refresh we now see that we have a new object and if we go in there we have the post id and the username of the user that liked that post well if we click on that like button again and we come here and hit refresh we’ll see that that is gone and that is because these are unliked so these are unliked we don’t want to have that object again so one more thing let’s just try to like this other post so now we come here we obviously have that here now and if we go to that post which is i think the latest one will now see okay so it’s not this one is the second one that’s post you go to the second one now we see that it has the number of likes is one well if i come back here and pick it again and i come here i need to refresh now the number of likes is but that basically just fix or solves that that we want to do now the next thing we want to do is to just show like the number of likes this particular post have we want to show it on there so what we should do in there is to go into the index the py index index.html actually i’m going to come in here and then just write on the here so right here what we want to have is just to say let’s just make sure we are in the right place here right here okay so what we want to have right now is have it on the inside the same div tag so want to have like a p tag and let’s just say liked by one person let’s give it like that unless it refresh okay so it just is like by one person for everything but we’re gonna get the data from the back end so this is liked by one person okay but even if it’s not like by one person it just says that to change this now what we want to do to come into our views dot py actually we don’t need to go into our views.py because right here we’re already getting all the post objects and we are sending it here so each of what we are looking through already as the number of likes because each of the post object has the number of likes filled in there so now we can use this field just come in here and say liked by post.number of likes person so now you see this one says like by zero person you don’t say like by zero person if i like it now it says like by one person but this is the same like by zero person because nobody liked it but if i say if i like it one person i dislike this zero person so that’s what we want to do to that but this is wrong grammatically in english so let’s just change this to be right so what we want to do is use an if statement in the jungle templating style so we can say if post dot number of likes is equals to zero then what we want to do let’s copy and paste this is to say no likes no likes so since reports have no likes let’s just say no likes but want to have an else if statement so just say alif post dot number of likes if it’s equals to one i will say liked by one person but now if it’s equals to anything except zero and one that means it is from two above so now we can say else liked by whatever people just make sure that is right and now we can just simply end that if statement so this is just the way we write a simple if statement in the jungle time register so we create this statement like this and this is where we end it now in python we just end the statement using the indentations python already understand but since html the indentation doesn’t really matter here we have to end it using the tags so now we save that we are coming and hit refresh this says no likes because it doesn’t have a like but this is like by one person so this i have no likes if i like it now it says like by one person wonder person like it now it should say liked by two people so now we’ve taken care of that everything is working with the likes to this section so now that we are done with allowing a user to like a post and showing the amount of likes that that post have the next thing we want to do is to customize the profile page so right now to this point we don’t have any profile page so that means if we see a post and we click on the username it doesn’t take us the profile page of that user and we can’t even see our own profile page so let’s go ahead and add that picture now we’re just going to go back to vs code and we’re going to come into the urls.py file so in here the first thing i want to do is to create a new url so under let’s say upload i can just say profile and what i can say after this profile is slash and i’ll say str column pk and then i can close it so now this is basically just gonna have the profile page slash the user so that’s gonna be the link to get a user’s profile page and i can take it to views dot profile right here and the name can also be profile so now i can come into views and i can just close up this like post and right here i can say def profile request and i’ll just return render request profile dot html so this profile is coming from this profile.html so that’s the template we’re gonna use so now to be able to go to user’s profile we need to go to profile slash the username that’s what we’re gonna do so first of all let’s go into our app and see what that is going to give us so let’s say profile slash so the username goes here but now nothing is going to happen because we didn’t even collect this so right here after you know specifying requests we also need to specify the pk so the pk is what we collected from the url right here we said pk is the name or is the key and the data type is a string so we can come back here and just save this since we collected it yes it refresh press yeah our app is running and let’s see good so this is just the demo profile page very simple and as you can see just have this image we can go to the ohm and it has this dummy like numbers now right here and there’s a button to follow and all this so what i want to do now is to customize this so first of all like when we enter like john then we should see all the details of john of this if you see his profile image user name is bio of the post and me as the currently login user should be able to follow him i’m also going to do that after this section what we want to do now is to go into the views of this profile first of all let’s also add this login required and now what we just want to do is to get the user object first of all of this user that we’re passing i’m going to say user underscore object it’ll be equals to user dot objects dot get user name equals to pk now that we have the user object we can get the user profile using the object the user underscore profile equals to profile dot objects dot get the one in which user is equals to user object and now that we have that we can basically pass this user profile what we want to do first of all is to pass the let’s pass the user object okay because we’re going to pass a lot of things like if we come in here we’re going to pass the user object user profile i’m going to pass the amount of posts that i use i have it’s better we do this in the context so let’s move this first of all and say context and the equals to no not a list like this and we can say user object give it user object and also the user profile give it the user profile and let’s see another thing we need to pass so we are passing the user object just so we can guess like the username of the user we already have that but let’s just pass it we later we might want to get you might need a data from that object later but what we really need is this pro user profile because that’s where the profile is made by your goals but another thing you want to get is the amount of posts that specific user have so to do this we are going to have to say user posts now is equal to post dot object dot filter i want to filter the one in which user is equals to pk so if we come here to confirm in the post model the user is just a character field which we are giving us the username so the one in which user is equals to pk as we know this pk is the username of the currently viewed user so the one in which users go to pk that’s a post that is belonging to this user that we’re looking for so once we have that we just query all of it and what we can just do we can say user post length is equals to let’s say len and we can just find the length of this outpost now once we find the length or once we get the length of this user post we can be able to use that right here so we can just say the amount of post another thing we can do now since we already have all the users all the posts of this user we can just render it here so we can also click on it you know to view that specific image so we’re just gonna do is to come back and once we come back here now we’re gonna pass this and say use our post and also user post length and they just have a comma and now we can just pass context now let’s save this now that we have this saved what we can do first of all we can use this user profile now we’re going to come into profile.ht and right here you can see that we have the username of what we’re just gonna say is user profile dot user dot username and we come here and hit refresh what we should see in the title is profile iphone john let’s come back here and see what’s up so okay right here we have one we didn’t let’s see okay right here should be colon and that should reload good so if we come here now and hit refresh as you can see now we have profile iphone john good so now what we want to do is to just scroll down first of all let’s copy this profile i think john so we’re just gonna copy this tag i’m gonna come down to where we have the user name so let’s see this is where the bio is damaged username should be up right here where we have the user name we are just going to say user profile user.username and for the bio value goes here so right here we say userprofile.bio it doesn’t need a user anymore any other thing so that’s for that and let’s go ahead and check that out so now we see john and here we see user provided by you that’s because we used only one we scroll down only one tag to close it so that should not be now if we hit refresh we see the value of the user i am done i am the coolest kid now let’s scroll up back and let’s add the profile image of john so what do we need to do that is right here what we need is user profile dot profile img let’s save that and hit refresh that doesn’t work because we need to say dot url so whenever we’re getting an image we need a dot url to get a specific area of that image that it refreshed good so now we have the profile image of john and this where we have let’s see scroll down here we have upload profile photo we don’t need this because we already have where so if you come here you see we have this we don’t want that because right there where user can upload profile photo in the home page but this is working so we have the username profile picture the bio i want to have the amount of posts we’re not going to do for these followers i’m following for now because we haven’t implemented our picture we’re going to come back to it once we have done that so let’s go ahead and say and configure this post so let’s search for where we have 11 post so right here what we’re just going to say is come back in here now you see we passed user post length so we’re just going to say we’re going to change this 11 user post length post so these are two posts so what we can just do here also now is to use an if statement so let’s just and say if zappos lens dot post is equals to zero then we can just simply say no post like you just have no post and we can copy this again and we can say l if is that personality equals one and we can say one post dummies with anything more than that then copy these and paste and we can say posts now we have that so now you say two posts with an s so we have an error so use our post length so right here says we didn’t close the if tag what we just need to do to come down where we have this and just basically post close that if tag by saying end if now we save that and hit refresh we have to post the next thing we want to do now is this profile is this posts as you can see we just have three lists of posts right here but what we really want to have is the amount of post the user has then it should just show the image and one user clicks on that image should open the image wider so that is what we want to have and let’s go ahead that if we come back in here now oh we’re just gonna say i’m gonna scroll down all the way down to right here so you can see we have one two three gonna remove that and what we’re gonna say is right here in this list i’m gonna say for let’s say for posts in and right here we sent user posts all the posts and user posts let’s just go ahead and enter a for loop right here i’m saying for post in user posts what we want to do is just to show the url of that image that post we’re going to remove all of these we’re gonna say post dot image dot url let’s save it and hit refresh and we see the two posts and that in those images we click we click on it still take us to this image so to do that i’m just going to copy exactly the same thing and change it for you so let’s just cancel of that let’s hit refresh once we click on one it takes us to the one for that you click on the other one takes us to the full image of that so as you can see what we are just doing now is that we got everything we need all the data we need and then we just looped through it in here since we have all of this done now we are pretty much done with this profile image so yeah now let’s continue with the next part of this project so in the template of this profile page once we click on this image it’s just meant to like pop up a model here that’s going to allow us to like slide through all of the images as posted so that is not working what is just happening is that it’s taking us to the full image so that means there is a problem somewhere if we try to look for it we’ll notice that it’s probably from the static because all those type of stuff would will for sure be done with javascript so we should make sure we link all the javascript in here and we scroll here we’ll see that this is just a plain linking without the static or the jungle static template so what we just need to do is to add static and also close it right here so once we have that on it’s safe so let’s wait for that to refresh and now that that has reloaded once we click on it boom what it just does down here you see it says one out of two so if we scroll it takes us to the next image if these are plus another one takes us to the next one now that’s what is beautiful about this time so now the fixture we want to add now is the following and unfollowing feature right now we just have those button if we click on it nothing is going to happen what we want to do is that once we click on this follow we want the user that is currently logged in to be able to follow the user that is on this page so that is basically what we want now but first of all let’s go ahead and go to the home and once we go to the home let’s just log out so i want us to create a new account and let’s create thumb on my g dot co let’s give it a password and sign up so now that we have that and save that let’s just give it this default profile image and say i am tom and i screw student and i can say is located let’s say new york and let’s just hit save now we can go home and basically we just still see the post of john you know we can like the post likes by one person and what we want to do now is to be able to go to john’s profile so now we are in jump profile the reason why i did this is because we want to be able to follow john from another pro another account because we are logged in as john and we’re viewing our own profile and later i was still going to change that if i am logged in i am i’m viewing my own profile i shouldn’t even see this follow button like i can’t follow myself that’s impossible so i shouldn’t see that i’m also going to add that at some time in this video but first of all since we have this now let’s go ahead and coding so we’re just going to come back to ps code first we want to do is to create a model for this followers account so again we’ll say class and we just say followers count i’ll say models dot model and this will just take two fields first one will be follower that’s the person that is following that dot chart field max underscore length so what’s going to go into this particular field is the username of the person that is following another user and user now is the person that is being followed character field marks on the score length was 100 so now let’s just turn or show person that has been followed as the username of the person that has been followed the return of that user we can save this now and come into our command prompt we’re just going to go ahead and opt out of this server first of all and we’re going to run make migrations and then after making migrations we just want to migrate the database is python money dot py migrate that’s done and let’s just run our server again so as that is trying to run we’re gonna come in here and we want to register these new followers account model we want to register it in our admin panel so we have to open admin dot py import that and register it like this so that’s going to register it for us and now if we come right here and we go to home we should now see followers count so this is just going to store the data of everybody following each other who is following who is being followed that’s going to store it and later on we’re going to be able to use that to guess get the amount of people that is following a user and the amount of people that user is following so now that we have these we have this followers account let’s now create a new url now this new url is gonna so let me come back here once you use that click on follow the request is gonna be sent to that url to you know create or update that particular followers object let’s come back here now we’re gonna create a new url on this url we can just make it we can make it follow so we can save views that follow name dot name cos follow and we can add a new view and say request and let’s just pass first of all and then this we also need to be logged in before we can access following picture before we can follow a user now let’s just save that so now that we have all of these what we just want to do is to come into our profile page then we’re gonna just wrap this is already wrapped in a form and what we’re just gonna do is to have some fields and use this follow like as a submit button to trigger that the trigger that requests to be sent to this photo url and then once we do that we’re going to come here get all those values and then create an object let’s come into profile and as you can see with the template already wraps this in the form and since this is enough form already what we can just do is to specify the method and the action so we can say action first of all that’s where is this going to let’s take you to dot follow slash follow and the method is post whenever using a post method make sure to add our csrf token so now that we have all of these what we just want to do is to come in here right here where we have this button let’s just make that a part what we want to do now first of all we want to have an input field but the type of this field wants it to be hidden and want to give it like a value of user dot user name so what we’re getting is a currently logged in user actually we can also do this on the you know on the back end on the views like when we trigger that button once we come here we can just get it currently logged in user you can do it anyhow you like this is just showing you know multiple ways you can do it or anyhow you feel is more secure or that you prefer to run your application or counsel do it like this might not be as secure as donated backing but this is also another method what we can just do now is to say name is equals to follower so this is the person that is following another user that’s a currently logged in user that’s the authenticated user i want to have another field also so the other field is also going to be hidden and this one is going to be user object dot username so this user object is this the user of this person who are viewing the profile we’re viewing or just getting a username and then this one should be user so since we have those two inputs now right here this button we’re going to make it submit button so we can just say type equals button so since this is already been made submit button we are basically good to go because this is ready a submit button that means what when we click this button it sends these two values to slash follow now you can go to slash follow and go collect all of these values so right here in follow first thing we’re going to do is to say if request the method equals to post first of all let’s pass then we can say else return redirect let’s say to the home page so if is a post method we’re going to do what we want to do why is there a post method and someone just trying to access slash follow without doing anything just redirect the person to the home page so now that we have that what we want to do now is to get the follower as the person being full not the person that is following someone else we can say request dot post follower now let’s also say for the user and that’s request the exposed user so since we have these details now let’s first of all import that follower account model now that we have this model we can come in here and what we want to do we first of all want to check if this person is already following if the currently logging user is already following this user so the only way we can check is we’re going to query the database and say does is there an object in which the follower is the currently logged in user and the user is the person that is being viewed so if there’s an object like that that means that this user is already following that user and is trying to unfollow that user or if there’s not an object like that that means the user wants to follow this to say if follower count dot objects dot filter now i don’t want to get one object but i explained earlier in this tutorial why we are using dot filter but filter the one in which follower is equals to follower and then user is equals to user then dot first very important so if this exists we want to delete that so say delete follower now because of follower account dot object dot get this time around since you already know that exists equals follower and user is equals to user so we’re just getting the specific object in which this is true and once we have that i’m just going to say delete your follower dot delete and now we can just return redirect back to the profile page of that specific user but this is only if the person already follows and is trying to unfollow but what if the person doesn’t follow yet and is trying to really follow this user say else new follower equals to follow account.object.create the one in which follower is equals to follower and user equals to user now say new follower.save and we’re just also gonna redirect back to the page of that user now let’s see all this is working now it should be working now let’s go ahead and test it we’re gonna come in here let’s first come to our modules and make sure that i confirm that there is no object here we hit the refresh button now and we say follow as you can see it brings us back to this page we don’t get anything we don’t even know that we followed we’re gonna do that later and show the user that you really follow this user but we come back here and hit refresh you see a new object being created so as we can see a new object wasn’t created from here let’s see why okay it doesn’t even give us an error here let’s try to opt out of the server and run that again and everything seems to be working here so that should definitely work let’s try to do that again let’s first of all refresh this page i think that was the error we did we didn’t refresh the page but anyways let’s say follow so now it brings us back to this page come back here and hit refresh as we hit refresh it still doesn’t update that so it doesn’t create a new user or anything like that so now let’s go back to our code and go see what’s wrong so if we come back here we are saying if the request that object filter is there and we just want to delete that follower i’m doing that by followers count.objects.get follower follower yeah and then we’re deleting the user right here and after that we’re redirecting the user to the after doing that blower equals account create yeah and then we are saving this one this time around and then after doing that we are redirecting the apache page so this should totally work let’s just make sure our url’s specified correctly if we come here let’s see from also works so the action is going to slash follow that works and another thing we should check using the csi of token we have this inputs so everything should be working fine let’s just go ahead and try that again now let’s hit refresh and just so if we hover over this we’re gonna see if you look at the left bottom corner bottom left you’re gonna see that it’s as is linking to slash profile slash john we shouldn’t be so there’s like an a tag that is linking to that let’s check that out if that’s okay so we see that this is in an a tag and it’s basically linking to this page so let’s first of all clear that out we don’t want that to link to anything we want it to submit but since we have that cleared out we can come here and refresh now we don’t see that link at the bottom left corner now let’s get this follow let’s refresh the page okay ready for that to load and we hit follow so as we do this nothing happens so first of all let’s see nothing happens so that means there’s something wrong right here in our code and what is wrong we just need to check so we have an a tag we need this title just clearing our code and then in there we have this button this button we need type submit as a style and does the border also take so everything seems to be working and this button should let’s see let’s hit refresh again and let’s try to click on the button so i think we just need to change this tag let’s see if it’s a p tag so that takes that away from there but let’s click on this button now and see that still doesn’t work we’re just going to try to do to see if this is linear to any class let’s take that back to an a tag data repo let’s see let’s hit refresh button and it follow so now that we don’t have the data repo it just isn’t working but what we can do now is just to take this out okay so i’m sure some of you may have noticed the error while i’ve been searching for it so there’s nothing wrong with this data reported class basically what is wrong is the type is meant to be submit and not button let’s just try that out again allowing this to load and yeah so now it brings us back to this page that means something must have worked let’s go back in here and hit refresh good so now we can see that we have a new object polarized term under that is what we want to see now that we have this the next thing we want to do is to show the amount of users that this specific user has the amount of users this user have now to do that are going to have to come into the views of profile so we’ve taken care of a user following and unfollowing let’s just test that one more time if we click on this follow button now and then we come in here and hit refresh that’s gone now i said we want to get the amount of followers i’m following but before we even do that there’s one thing that is important that we do what we want to do is that once the user has followed the user we want we don’t want to show follow a game now we want to show unfollow so the user can know that okay this user is a user i’m following already so i want to follow this user now and another thing i want to do is that if this user is viewing his own profile we don’t want him to even see the follow button what we want him to see is like a button that goes to his account settings for example so the user can go to now let’s do that first of all let’s make sure that if this user is himself he should not be seeing the the follow button so we’re gonna come back in here what we’re gonna do i’m gonna say come back right yeah so no not here index as profile if the user object.username so if the user object the username it’s just equals to user dot username i’m zip is equal to the currently logged in user we don’t want to show this so else we want to show this then let’s end the if so we’ve entered the if tag and now what we want to do just to say instead of this button it’s gonna be a button also what i’m gonna do is to copy this paste it here and it’s not going to have a type button and this data is going to have weights linking to and that should be slash settings save that now if a communion is refreshed only seeing this follow button because we are viewing the profile page of another user but we logged in as tom and i review tom actually this should be account settings okay now the reason why that is not account settings because we didn’t change that here let’s say account settings and we hit refresh what we see now is account settings and if we click on that it should take us to the page where we can let’s see if we overall what it just brings us back to this page let’s make sure that it’s working well if we look at the bottom left corner we see that it’s supposed to link to account settings so yeah if we come back here now what we can just do is to basically make sure all right so we don’t need this gonna come here not for you it’s for the account settings you don’t need a button you just need the a tag now that we have this we can hit refresh and once we click on account settings it take us to the settings page for this user now we can go back to wherever we were and we can view the profile page of john good so this is what we want to see so the next thing we want to see is to be able to change this to like unfollow when we are following the user so let’s come back here first of all because this has been altered so let’s save this and see if that affects this button that doesn’t go back gonna redo okay so let’s see let’s just save that first of all come back here and hit refresh this is the button for this and then if we remove the button for account settings let’s see refresh so that doesn’t alter it when we go to tom that’s our terms on looks and if we come back here good so we have that settled and what we want to do as i said is to change this from follow when we are following that specific user for us to do this we need to come into view so now in this view we don’t need follow view again what we need is this profile view and one thing we want to get is follower equals to request dot user dot username that is the person that is following and user is equals to bk so now that we have these two what we can just say is if follower account dot objects dot filter follower equals to follower and user goes to user but first so if this is actually in our database then that means the user is already following this user that is viewing so let’s say button text we’re just having a new variable and then we want it to be on follow else one button text equals to follow so now we want to pass button text part of the context so what we just did there was we checked if there’s an object which are those fields and if there is damage the user already following that user so we want to unfollow if not should follow so now that we have this we can save it coming to profile what we want to do now is right here where we have follow we want to remove that now and put butting text so this button text now is dynamic is it ah it changes the text to whatever is basically in our database adjust if we come back here and hit refresh and we hit follow now see now it changes to unfollow because we’re following this user the refreshes page are still there so let’s refresh and follow so now we can follow so that is basically working now and the next thing we want to do is to have followers count right here so another thing to do now is just to come into views right here i’m gonna say user follow us will be equals to follow us counts.object dot filter one in which user is equals to pk what we’re doing is that we are getting his full last count model and we’re filtering only the one in which the user now this user is the person that has been followed so i think the one in which the user is gross to pk and pk is the username of this user that we are viewing so all the times that this user is being followed is what we want to get and what we just want to do is to calculate the length of that so now that is an integer which calculates the length and we want to do exactly the same thing for the following um back come back to views you want to do exactly the same thing and change this to user following and now blue scans dot object or filter the one in which the follower equals to pk now we have all of these let’s also pass it in this context and the user following so now we have all of this in this context dictionary we now come into this place into the profile.html page where we have all these followers and following what we can just do now these followers we can change it to user followers and this following you can change it to user following now let’s go back and hit refresh and see what’s up so it says zero follower zero following but if i follow this user now what so it gives us an error of unbound error at profile john blah blah blah it doesn’t work what we just want to do i’m in here but we need to make sure that everything’s coming from so it’s coming from user followers right here so it says assigned before use what we can just do back to views okay so it’s because all of these we put it inside the else indentation so inside the else block that’s why if we have anything the else block we’re supposed to have it in the if block but we don’t even want it in there so we just want it on its own but now that should work and let’s just hit refresh now it has one follower i unfollow followers back yeah so that is working another thing we want to change is this follower so it is zero follower it shouldn’t have an s so let’s just quickly fix that the way we’ve been doing it with the other ones so what we just want to do is to come up here in the profile and we’re gonna go to where we have this followers i just disagree from these are following so now we’re going to say if follow us if user followers is equal to zero or user followers is equals to one and if is equal to zero one we just say follower so zero follower or one follower else let’s copy paste this and right here we will say else want to add an s and then we just end the if tag now we have this we come here and hit refresh now we see one follower we unfollow this is zero follower so this is working now let me follow this user so that means this user has one follower so that means i am following one person if i come to my accounts now i see that my following is one i am following one person so that is basically what we have achieved this profile per section so so far we’ve been able to get the profile image basically get all the details of the user and we’ll be able to implement the following following we made this the text in your dynamics so user is following already that should be unfollow but if the user is not following that should be now let’s move to the next section so at this point now we are able to see a profile a user’s profile we’re able to follow that user you know we’ll see the amount of followers the user have amount of posts we’re able to see all the posts and all this good stuff but in the beginning of this tutorial when we come to home we are just able to see the list of all the posts we have in on this platform that’s all the posts we have in our database that’s what is shown we’re not customizing this feed for a user and that is bad because we want a user to be able to see the posts of the people is following not just anybody’s post so right now it’s just showing all the opals we have on the platform which doesn’t really make sense what we want to do now is to be able to customize this to be able to show only the posts that the user is the post of the people that the user is following basically so that’s what we want to do right now so let’s click on this so the first thing we want to do let’s make sure that once we click on this and right here it takes us to the profile page of the user so we’re going to come into index and we’ll say user post.user right here it should take us to slash profile slash close the user so we can just copy that we can just search for the other post.user we write here i will refresh this to be able to go to the that’s good and we are following this user so now let’s just go back to the home page and right now i’m going to come into the views of this index and we actually need to do a little bit of tweaking in here what we’re going to do first of all let’s assign like two empty lists first of all we’ll see these are following list so this is the list this will contain all the users that the logged in user is following and let’s just say feed so this feed is also a list where to contain like the list we’re gonna con we’re gonna first query the database to get only the post of the persons that the user is following and then that’s gonna give us in like a query set but we’re not going to have to convert that into a list so the first thing we want to do is to say user following equals to account dot object dot filter by just getting all the users the objects of all the users that the user is following the one in which the follower equals to request dot user dot username so that’s the user following and with the follow passive for users in user following what we just want to do is to say user following list want to append the user name of each of everybody the user is following so we say user following does append users does user and that is good so now we want to append to the feed list so say user names in the user following list that we have now the feed lists should be equals to post.object dot filter the one in which the user is equals to the names and let’s just say feed dot append and i want to append this feed this feed list now that we have that this is like a query set now i want to convert that to a list so we can look through it in the template what we’re going to do now is to say feed list it’s without an s now because this is a new variable on its own it’ll be equals to now we’re going to use a function that we need to import so we’re going to say from there tools or chain so chain is going to be able to convert it to a list for us now we can just use this you know when we have speed because what we want to do right now is now convert this fee to a list you know we can do something like list then in there we have feed but we can’t just do that here so what we want to do is to say lists chain and in there we have an aesthetic mark and we say feed so now that we have this we can just pass it into the html right here instead of sending posts now or we can just send bid list now if i come here and hit refresh we make sure our server is running so that that’s done and let me come here and hit refresh and let’s see what we see we still see this and the reason why we see this is because this user is following john so what we’re going to do now first of all a storm let me choose a file i want to upload an image as tom and what i’m just gonna do is put an image put in a caption i’m gonna log out and log in as john and i’m gonna follow tom then what you’re gonna see is that i don’t see the images of john which is myself image i see now is of tom so as i upload this now you’re going to see that it doesn’t show yet it doesn’t appear yet because i don’t want to see my image i can just easily go to my profile but i’m going to log out now and login as john now that i login as john and i it’s login you see i can’t see anybody profile image right here it’s just blank because i’m not following anybody but now if i go to slash profile slash tom you can see tom has one post if i follow tom now i go to um you now see that i’m able to see the posts of tom so this is a very good picture let’s just log out and log in back as tom so now john i go in there i unfollow come back home i can’t see any post because i’m not following anybody once i follow john i go back home i see john’s post this is what i want right now want to have a unique picture which is going to be a downloading feature this means that a user is going to be able to download the image you see is on someone’s post like this is image and he loves it this button here once you click on it you should be able to download that image so right now the button doesn’t do anything but let’s go ahead and add that feature come back to vs code right now and we go to index so this is actually very simple and fast what we’re just going to do is to look for where we have that button so we have it wrote down no is inside the for loop so that’s how we know and this is the caption we have as a caption caption is down below so it should be before it so right what we’re just gonna do now is touch and search for where we have svg image it’s this is for the like and right here is for the download what we just want to do is to have this go to this post dot image dot url well we don’t just want it to go there because right now if i save this and hit refresh if i try to click on this what it’s just gonna do it’s gonna take me to that url i want you to download that url for me without even going away from this page very easy with html we can just add download right here and we leave it blank so that is just going to do that first come here and hit refresh now if we click on this you’re gonna see that it’s gonna download that image from so as you can see at the top right corner right here something is about to start downloading so as you can see that has been downloaded i can open that file here just gonna open that in a new tab and that is downloaded so that’s just the feature i wanted to add thought it was cool and let’s move on with the project now we want to add to our website is the search functionality let’s just go ahead and refresh this page so now if we want to be able to search for something and it’s enter press the search button and then it should bring uh results corresponding to whatever the user searched so let’s go ahead and do that first of all as we can see once the user input something we don’t even have a button where the user can click search let’s fix that first of all in the ui we’re gonna come in here now and before we do that i just want to say that i brought in the search.html from the my template so if you have been watching from the beginning you know that there was no search.html yet i just brought it from my template but you don’t need to worry about that all these files are going to be in the github link so don’t worry about that now what we need to do is to come into index.html and right here actually where we have a diana we want to have a form and then we’re just gonna close the form so we should be able to have a form here before left side yeah i close the form somewhere around scroll down here right here now that we have that done next thing we want to do is to come into the field so if we scroll right here see that we have this type of text we want to give it a name username and since we’re giving it a name now next thing we just want to do is to first of all remove this particular search that is beside it we don’t want to search there or want to have this dash after it so this should be like in a box and like a search button after it let’s go ahead and do that right here we do not need this we don’t need any of this and what we can just do is to say button type goes submit and we can close that button and now we want to use an icon here so first of all let’s comment out this d we don’t want this to be in this div tag just so it won’t affect this i want you to be like outside that box of this editor because it was in that div tag the changes i’m making is not going to work i’m also going to show you that so now what we just want to do is to come into that search.html that i imported and right here we want to copy this so what this is is it’s basically just the same thing once i run the search at html you see that it’s very the header right here is very similar to the other of the index.html but indeed the search.html already has like its own form tweaked so that’s why we can come in here and just copy what we need and paste it right here one more thing we need since we’re using that icon we need to import it so i’m just gonna link css just scroll up and right here paste so now that that is done if we come here and hit refresh we should see that we can search for something i’m kind of here to sub if i come in here now and as i said if i don’t remove this from this give tag and i hit refresh now you see it’s just not looking well that’s why i remove that from the deep line having that said let’s also leave a space right here let’s have and nbsp hold on copy that paste let’s have two of it once we hit refresh now we have a good space beside it so that is good now we just have this name of username and this submit what we want to do in this form we want it to go to the action url no the search url want the action to go to the search flash search run this action to go to slash search and with a method of post and once we’re using the post method we need to add a csrf token so now we know that there is no url named search so we need to go ahead and create that so let’s just copy paste and say search i’m gonna come in here and create a new view search turn render request search dot html we can save that let’s also give it this login required save that also now let’s make sure that our app will successfully once it reloads successfully test it out i’m back in here now hit refresh if i search for j.o my search it takes me to this slide search page and i just want to search that html as you can see it’s not really showing a result now just showing this dummy data this static data that we put in the search.html but now what i want to do is that it will show a result that is correlating to whatever the user search now first to do this we’re going to have to come into this view.py we’re going to have to get the username that the user sends it by whatever user input we need to get it here to save request a method equals to post there is a post method say request that’s post username that should be username so we basically just got the username and then what we want to do next is to filter the data so when we filter the data to only any username that contains what the user says just send it back that page what we want to do now okay we’re gonna get a user object so this is just because right here we can see it is welcome tom which is good but right here it doesn’t show the profile so if we go back to the home page it shows the profile of the user we also wanted to show the profile we are just gonna say user object equals to user dot objects dot get the one in which the user name is equals to request that’s user that’s username and this doesn’t really correlate with the search form but we just want to take care of that now and since we have that user object what we just want to get is the user profile it goes to profile dot object dot get one in which the user equals to user object and if i pass this to the html so right here valley what i want to pass is use our profile not use object i come back here now and refresh now you see that i chose to update that so that is taken care of now back to searching so if we the method is equal to post get the username and then we get the jose user name object and that will be user dot objects the filter one name with the username i’m just going to i contains equals username what this is doing is that by getting a list of all the objects in which whatever the user search is contained in the username so if the user search for if there is a if they are if the user search for tom then what it’s going to do is that it’s going to go into our database look for any user in which tom is in the username and it’s going to return that into this variable now that we have that let’s first specify to empty list so say user name on scope profile we have the object let’s get the profile the username underscore profile underscore list now remember that we have to convert it to a list let’s just have that also as a blank list now save for users in username object user name profile it will stay here right here designing profile append what we want to append is so what we’re doing is for users in username objects we’ll say username profile what’s append each of this user does that id so i want to get this one using the idd seminar so now i want to say append users.id now that we have their id we say for ids in name profile that’s each of the id that we get we now say profile list it because of profile dot object dot filter the one in which the id user equals to ids so the one in which the id user if we come into our models we go to profile see how we have a few name id user which is the id of the specific user which which has been talked about or used right here right here we have id user equal to ids now say user name underscore profile underscore list append now we just want to append profile lists to it and now that we have that we can just say username profile list so now we just want to update that with itself but this time i’ll convert it so we’ll say list chain then aesthetic a steric of the username profile disk you should be profile the stereotype of the username profile is like this but now that we have this what we can just do is take it into like this we are taking it into search.html we are taking it as username profile list so if we have that we can just simply come here into search.html now we’re gonna scroll down i’m gonna loop through that database what i’m gonna do is i’m gonna scroll down and when we scroll down actually it’s in a section right here so we’re gonna say four let’s say user does in username profile list let’s end the for loop immediately after that session is closed so end for now that we end our for loop we can now use this to customize it so what we want to do now is to get the profile image so we’ll say users that’s profile img.url and then once you get the username the users get the username dot name they’ve come into profile there was actually if we come into these models we have to say user dot user on it what we can just do right now is to say users.user and after that we’re going to do the same thing for location the users the location and we do exactly the same thing for the bio good now what we want to do is that once a user clicks on any of these you take the user to the profile page of that user so now we say slash profile flash user does user and let’s also do the same thing right here good so now we have this done let’s now come back here let’s go to the home page right here now let’s search for j o h once we search for that so it says i contain a chaff with adrenal permitted so if we come in here it should be i contains with an s just close that now let’s try that again now let’s say j o h boom so as you can see now it says john toronto i am john so he just shows us the value the profile image good and we can go to the profile of that person now let’s search for like term now you can see we have some it gives us the profile image the location and the bio and go to the profile of that user so this is basically what we have and this is how to you know build a very simple search picture so we can search for john and now it just shows us that we have one user named john this is what we want to do now last picture we want to add is the suggestions feature so this right here has been with us as the beginning of this project and what i want to do here is just to say users you can follow and it’s going to recommend users that you are not already following and users that is not you so it’s just a very simple algorithm we’re going to use anybody that are not following it can recommend it and as long as that person is not you which is a login user it can also recommend it and if you do that at random so just randomly going to pick different people for you to recommend let’s just go ahead and do that so we’re going to come into vs code now and what we want to do is to open up this index so we don’t even need this post again right here let’s just come here let me give it like a comment and say user suggestion stats now first of all i want to get all the users in this platform on this platform i’ll say user.object dot all and i’ll have the following all so this is just an empty list but what this is going to be is all the people that the user is already following that’s what i want to do so i’ll say for user in user following remember that we already have this year right here so i’ll say for user in user following user underscore list equals to user dot object dot get the one in which user name equals to this user dot user now we can ask the user following let’s go following underscore all dot append user list so now that we have this what we can just do now is to say new suggestion list what we want to suggest now is the people that this user is not already following the new suggestions on the skull list equals two now this is gonna be in at least but in here we’re to have like a for loop so it’s like a specific style you see x4 x in list all users we’re just converting this all users query set into a list so and then we’ll say if x not in list so you might already understand where we’re going with this following so this is just the user following all just open and close this so you might already guess where we what this is so this is the suggestion list so it’s looping through the list of all the users and saying if this list is not in this list and that is the new list so it’s just getting all the lists of the users we are following and removing it from audio users on the platform so now that we have that the next thing we want to do is to remove the current user from this list because what we have now in this new suggestion list is audio users on the platform that we are not following and as you know we can follow ourselves that means we’re also part of the suggestion list and we can suggest ourselves to ourselves can suggest a user to himself so what we just need to do is to make sure that we remove the current user from that list so we say current underscore user will be equals to user dot object dot filter username was request dot user but username and now let’s have like a list but like for the final suggestion so let me see let’s name it final underscore suggestions underscore list now should be equal to x for x in list but now in new suggestions list that is not current user and we just say if x naught in list and what we just say is current user current underscore user so we’re just saying that he this current user must not be in that list so he’s basically eliminating current user from that list and then what we can just do to make sure that all of these in square brackets that is a list so unscrew brackets as close right there but now that we have this what we can just do since we have this final suggestion is now this is just a list of everybody that we are not following and that is not us so now we just have that unique list but now if we pass it to the front end or to the template and we say we just get like let’s see yeah want to get like five so if we just get like the first five or something that means that’s the same thing that’s just gonna show only those people are gonna be suggested but what we want to do is to shuffle that list that we already have and make it random so like once we even refresh this page a new random random list of suggestions comes up so to do that first of all i have to import random from here to say import random and then right here now after this what we can just say is to say random dot shuffle is final suggestion only so i want to shuffle this final suggestion list and what’s in shuffle what we want to get is the final like just five from that list right from that short foot list but since before we get that we don’t want to get that now we can what we can actually do since we already have this list we can you know pass that list into the html but before we pass that list what we want to get is the profile object of each of this list because right now from here what we have is the user object so we need to get the profile object so we can return the profile picture the username and maybe the location of the bio or something so that’s the main thing we need to get this is just a step from getting that so let’s go ahead and say user name on the scope profile equals to empty then username let’s go profile let’s go list be empty also and we just do similar technique to what we did in the search so the users in final questions list each of the user they will say username profile but append users.id dot id now that we have that i cannot say for ids in username underscore profile we’ll say profile on the sql list equals to profile dot object dot filter id underscore user equals to ids now that we have that we can see user name underscore profile dot underscore list underscore list let’s append profile underscore so now we have this what we can just say is let’s have a new list and say suggestions underscore user name underscore profile underscore list so the suggestions the username profile list goes to list okay we have to use the aesthetic line here the username profile list that is what we need to do now that we have these we can just pass that into if i come here now copy this this this is the final list is being shuffled and everything but i can just do now is to say questions designing profile list that’s a weird name but and give it that but we get only ps4 because does have to just get the first four and then we save it now that we’ve saved it we can come into the index and right here in the index what we just want to do is to throw so once let’s search actually let’s search for let’s move to let’s just move down instead of searching so as all the way down because what we’re looking for is these users you can follow but this is it right here we do not need this and then good so i think this is it so what we need now just to loop through this basic so we have refresh and right here you can see for suggestion just changes our name proof what we want to do with each of these suggestions first of all let’s okay so what i’m supposed to do first of all is just to have one of it but let’s end the full loop here so we just need one let’s remove this remaining three right here just remove this do the same here and we do exactly the same thing here now that is good if i hit save and press refresh i’m just gonna see this four times so it says list is not callable so let’s come back here and what we just need to do is right here this doesn’t need the two value braces just need one for this i want to close this now we save it and then we go back here and hit refresh let’s make sure our site is running so now you see that it works but nothing is showing here and this is because remember we got all the users on our platform and we said basically it should render the ones i’m not following and the ones that are not me so um the ones that is me and the ones that i’m not following is basically everybody on the platform so that’s why it doesn’t have anything yet but let’s see let’s see let’s come back here come into index so for suggestion in suggestion what i can just do is to say suggestion action that’s user i’m gonna save it and then right here i’m gonna hit refresh so still the same thing what i’m gonna do is to come here and then unfollow john now that i am not following john if i go back home it’s refreshed on this oh boom now you can see now that it recommends john for me since just because i’m not following john again so this is actually what i want so if i follow john it won’t recommend john for me again what i just want to do is to go back to follow john slash profile slash john let me follow john once i come here doesn’t recommend anybody because i’m following everybody on the platform but now let me log out and what i want to do is to create a bunch of accounts so i can say you can just say i don’t know tammy e at g dot co your password sign up so is doug jane i am tommy from the uk and right here we can just say london now we can save that and once we come home we have an account for tommy and you can see that tommy has been recommended john and tom because she isn’t following any of those users i’m also going to change this to the profile image of the user and these followers are just going to put like the bio or something so but now let’s just log out again and create like two more accounts so let’s just say emry hrg.co and deserve password and let’s wait for that to create to remove that let’s say a i am henry and you should know that listen new jersey and we can save that and go to the home page and now it’s been recommended tom tammy and john so let’s just go back log out create a new account now let’s just create jasper a rg dot co let’s give it a password submit and now you just see just per year and let’s say i’m from l.a now let’s just save that and go to home so it’s been recommended and rejoined tommy and tom so one thing is if i refresh this you see it’s random now time is on top if we have a bunch of people like android people is just going to be picking them randomly so now let me log out and log in back as tom now you see that i’ve been recommending three people been recommended just part time me and henry now let me go back and finish that up so right here in suggestion.user let’s change this to suggestion. bio and also where we have this follow want it to be view user so to take them to the you the profile page of the user and then once it takes them there they can follow the user right there right here now we can just say slash profile slash suggestion.user and one more thing is the image so we can just say suggestion that’s profile img.url and i am going to slash profile slash suggestion.user so now let’s save this from here and hit refresh okay and as you can see we have this angry i am henry and you should know that we have jasper jasper here we have tommy tommy i’m from the uk so we have all this good we can go ahead and view henry he doesn’t have no follower no post he doesn’t have anything but we can support him and follow him and now that we’re following him if we come to home we don’t see henry there again we are only being recommended these two people but now if every creates a new post we’re gonna see every post right here now we’ve been successfully able to add these suggestions right here so this very simple and basic algorithm we built right here i hope you understood everything we did to this point we are pretty much done with this project so let’s just go like got the project like give it a final review but just recap on everything we’ve done so right now you can see it suggests me to follow a username jasper but it is feature where he just suggests us random users if i follow jasper now now he has one follower but they also added his followers and following style and now if i go home it doesn’t suggest me jasper again and it also shows me the post of the users i’m following so if jasper that i just followed if he uploads a post i’m going to see it in my feed so we customize the feed but only the users are following and we can like post like it you liked it like by one person now if you like it no likes and we can also click on this on and then it’s going to take us to the profile page of john and we can follow on follow him and show us the bio his username is profile pics and if we click on images he posted we can just slide through all the images back to the own and we can also use this search functionality like we know we have john so let’s say we are looking for john i will just search joh it’s search now you see that it brings us john gives us the location and this bio so if we click on that we’re gonna see profile and we also added this way user can upload a pics and choose the file and the caption right here we also have this account settings they can change this profile picture changes by your update is look so this is a basic word true of everything that we did in this video in this course so there’s still a lot that can be done to this project so but i hope with everything you’ve learned and the knowledge you’ve learned from this you can customize it and also add your own pictures you know if you want to do the comments or you want to do anything you want to do i hope it’s what you’ve learned you can be able to thank you for watching or taking this course and finishing you up to this point thank you so much
-
Sale!
Wireless WIFI Repeater Extender Amplifier Booster 300Mbps
$29.99$14.99 Add to cartWireless WIFI Repeater Extender Amplifier Booster 300Mbps
Categories: Electronics, Wi-Fi Router, Wireless Wi-Fi Extender Tags: 300Mbps, 802.11N, Amplifier, Booster, Extender, mobile wi-fi booster, Remote, WIFI, Wireless, Wireless WIFI, Wireless WIFI Repeater, Wireless WIFI Repeater Extender, Wireless WIFI Repeater Extender Amplifier, Wireless WIFI Repeater Extender Amplifier Booster, Wireless WIFI Repeater Extender Amplifier Booster 300Mbps$29.99$14.99 -
Sale!
Full RGB Light Design Gaming Headset Headphones with Mic
$24.99$14.99 Add to cartFull RGB Light Design Gaming Headset Headphones with Mic
Categories: Electronics, Gaming, Gaming Headsets Tags: Design, Full, Full RGB Light Design Gaming Headset, Full RGB Light Design Gaming Headset Headphones, Full RGB Light Design Gaming Headset Headphones with Mic, Gamer, Gaming, Gaming Headset Headphones, gaming headset wireless, Headphone, Headphones, Headset, Light, Mic, Package, RGB$24.99$14.99 -
Sale!
Wireless BlueTooth Multi-Device Keyboard Mouse Combo
$39.99$19.99 Add to cartWireless BlueTooth Multi-Device Keyboard Mouse Combo
Categories: Electronics, Gaming, Gaming Keyboards, Keyboard Mouse Combos Tags: Combo, Keyboard, keyboard mouse combos, Mouse, MultiDevice, Set, WireKeyboard Mouse Combo, Wireless, Wireless BlueTooth Keyboard Mouse Combo, Wireless BlueTooth Keyboard Mouse Combos, Wireless BlueTooth Multi-Device Keyboard Mouse Combo, Wireless BlueTooth Multi-Device Keyboard Mouse Combos$39.99$19.99 -
Sale!
High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
$199.99$139.99 Add to cartHigh Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar
Categories: Gaming, Gaming Chairs Tags: Adjustable, Chair, computer chairs, Desk, Executive, Gaming, Girl, Headrest, High, High Back Leather Executive Adjustable Swivel Gaming Chair, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest, High Back Leather Executive Adjustable Swivel Gaming Chair with Headrest and Lumbar, High Back Leather Executive Adjustable Swivel Gaming Chairs, Leather, Lumbar, Office, Racing, Swivel$199.99$139.99 -
Sale!
Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
$29.99$19.99 Select optionsProfessional LED Light Wired Gaming Headphones with Noise Cancelling Microphone
SKU: N/A Categories: Electronics, Gaming, Gaming Headsets Tags: Cancelling, Gaming, Gaming Headphones with Noise Cancelling Microphone, gaming headset, Headphones, Headset, LED, Light, Mic, Microphone, Noise, Professional, Professional LED Light Wired Gaming Headphones, Professional LED Light Wired Gaming Headphones with Noise Cancelling Microphone, Wired, Wired Gaming Headphones, Wired Gaming Headphones with Noise Cancelling Microphone$29.99$19.99 -
Sale!
Gaming Desk with LED Lights USB Power Outlets and Charging Ports
$349.99$249.99 Select optionsGaming Desk with LED Lights USB Power Outlets and Charging Ports
SKU: N/A Categories: Computer Desk, Gaming, Gaming Desk Tags: and Charging Ports, Charging, Desk, Desks, Gaming, gaming desk with led lights, Gaming Desks with LED Lights, Home, LED, Lights, Monitor, Office, Outlets, Port, Power, Room, Stand, USB, USB Power Outlets, White, Workstation$349.99$249.99 -
Sale!
Wired Mixed Backlit Anti-Ghosting Gaming Keyboard
$99.99$79.99 Add to cartWired Mixed Backlit Anti-Ghosting Gaming Keyboard
Categories: Electronics, Gaming, Gaming Keyboards Tags: Antighosting, Backlit, Blue, brown, Gaming, Gaming Keyboard, gaming keyboards, gaming keyboards and mouse, Keyboard, Laptop, Switch, Wired, Wired Mixed Backlit Anti-Ghosting Gaming Keyboard, Wired Mixed Backlit Anti-Ghosting Gaming Keyboards, Wired Mixed Backlit Gaming Keyboard$99.99$79.99 -
Sale!
Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
$119.99$59.99 Add to cartWireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset
Categories: Electronics, Gaming, Gaming Headsets Tags: 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, ANC, Audio, Bluetooth, Cancellation, Ear, Earphone, gaming headset, Headphones, Headset, Hi-Res Over the Ear Headphones Headset, HiRes, Noise, Wireless, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Headphones, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headset, Wireless Bluetooth 5.3 ANC Noise Cancellation Hi-Res Over the Ear Headphones Headsets$119.99$59.99 -
Sale!
Wired Sports Gaming Headset Earbuds with Microphone
$19.99$9.99 Select optionsWired Sports Gaming Headset Earbuds with Microphone
SKU: N/A Categories: Gaming, Gaming Headsets Tags: Accessories, Earbud, Earphone, Earphones, Gaming, gaming headset with microphone, Headphones, Headset, IOS, Microphone, Sports, Wired, Wired Sports Gaming Headset Earbuds, Wired Sports Gaming Headset Earbuds with Microphone, Wired Sports Headset Earbuds$19.99$9.99 -
Sale!
150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
$49.99$29.99 Add to cart150W Universal Multi USB Fast Charger 16 Port MAX Charging Station
Categories: Charging Stations, Electronics Tags: 150W, 150W Charging Station, 150W Universal Multi USB Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Station, 150W Universal Multi USB Fast Charger 16 Port MAX Charging Stations, 150W Universal Multi USB MAX Charging Station, 16 Port MAX Charging Station, 3.5A, Charger, Charging, Fast, laptop charging stations, Max, Multi, Port, Stand, Station, Universal, USB$49.99$29.99
Thanks for posting this, i hope it helps others get comfortable with building a project like this with django
thanks for the course, we all loved it
ok
Template links?
i could kiss u
This didn't work with me wasted 3 hours man got stuck at url where i cant write or do anything in cmd
Thank you brother ❤❤❤❤❤❤
What theme are you using?
Your accent is funny😂😂
Thank You Tomi
Sir how to view a db.sqlite3 file
Thank you for this video Tomi! Finally, I am done with this, project. In between a few hiccups but it was all my mistakes when typing the code. The search.html is not there in the templates folder. I downloaded it from the final code folder. Thanks a lot! Keep posting a lot of videos like this! Hope this helps if anyone is stuck with this video.
I got an attribute error 1:30:17 someone please help
i want to build a social media app in python can i use django and kivy ?
You do not have requirement.txt in your repo
is it responsive
can you give us a demo on class based views?
can we use the anaconda prompt for this?
Thanks tomi for this project
great as always.
Can any one tell from where to get blank-profile-picture image
10:23 so at some point your directory is 'social_book/social_book/social_book/social_book/' ? You might be a good teacher but already at this point you're losing credibility :/
Кайф
Are the delete function in the video ? thanks
❤❤❤❤👍👍
crap course, could not understand a thing
can we adjust it after ?
Thank you 🙂
Would be great if you could also add notifications and chat.
How do you refresh like he says in 21:11
ASSED SCHKEEIT WINGONON RAIDER (POPIPOOO)
didn't getting that @username , location , bio box under the "Result for" 4:27:45 , need help regarding this
Can someone help? It reloads every time I like a post, I know it is because it redirects to the same page but in the video it doesn't reload every time.
How about commenting, pls I would like to see u do that one thanks
6:00
This is an amazing tutorial for someone starting out with backend development in django….