Build a Social Media App with Django – Python Web Framework Tutorial

Key Takeaways

jeno is a highlevel python web framework that enables rapid development of secure and maintainable websites in this 5-hour course you will learn d jeno by building a simple social media application this is a great course for people new to D jeno and for people who are familiar with jeno and want to learn how to build a social media application Tommy Taco teaches this course he has created many popular courses on the free C Camp Channel and his own channel I encourage enage you to leave a comment with the most interesting thing you learn from for the benefit of other campers who are watching this course I guys welcome to this video and I want to say thank you to free code cam for publishing this course and if you want to check out more tutorials like this you can check out my Channel at code with Tomy 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 this is the end produ 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 fixure which can allow us to like your users's post can 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 the username the bio the amount of post this user have the followers and the following so now if we unfollow this user we see now that this user has zero follower let follow him back just to support him now we has one follower so we added these followers and following fixure because what a social media with the followers and following picture and now after that right here we can just see a list of all the post the users are 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 post the user have easily now we can come back to the home and as you can see we right here we have these users you can follow so we did a little bit of suggestion field here they currently logged in user we'll make sure that the users that been suggested are 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 was being suggested and this is a brand new user he has no post no follower no following 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 that user so we can't be suggesting someone that you already follow now after that we also added a feature which 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 Po 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 it can log out so if I log out right now you'll see that we have this login so I can just log in since it's already Auto filled 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 our bio our location and everything we need to change press cancel it 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 Jaz and let's say you see that gives us jaspa gives his location LA and his bio if we click on jaspa we can see his page this is also a brown new user so this is basically what we're going to be building and note that you can add a lot of features 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 jungle and you can take what you learn from this course into your own project to build your own project or even enhance this having all this said I also want to say that the source code to this project where you can get the template file so as you can see we're using a template for this project and get the template file we use and the whole 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 F and code along and you can just get a source code also so if you are stuck somewhere you can just easily check that out so for the beginners taking this tutorial I'm just going to quickly give a brief introduction to changle so what exactly is Chango Jango is a python web framework now what I mean by that is that using Jango you can build web applications with the Python programming language now if you recently learned python or you know python already and you are looking to go into the web development view then Jango is a good choice for you now there are various reasons why companies and developers choose to use jangle some of the reason are because jungle is fast has a large community jangle provides security to your application Jango is also very scalable now these are just few of the reasons why developers choose to use Jango but one key one is that jungle has a very large community now this is important so that when you encounter an error when you stuck on something you can easily search that error and there's probability that someone has already solved it for you online maybe on stock 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 Jango has that large community of a lot of developers around it so having this said I hope you have an understanding of what Jango is and why you should even choose Jango let's go to the next section now the first thing we want to do is to create a new Jungle project so I'm in this folder here which is just I created a new folder named social book The Social book is going to be the name of the social media application that we are building I just created a new folder on on my computer in document that doesn't really matter but what I just need is to get this the directory to that folder so this is where I want to create my jungle 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 mark you might just open up your terminal or any other OS you are 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 I press di 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 developing my side project or something so you can totally relate with it so right now we are in this directory and if you are new to Jango when want to create a jangle 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 Jungle project but before you even want to create a jungle project you need to make sure that you have jungle installed now you know in Python we have peep which is a python package manager if you install python you have python installed already dip should come with it just to make sure we have jangle installed we're going top install jangle so this is going to install the latest version of Jango for us now I already have this installed on my computer on my laptop so it should tell me that requirement 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 jangu as I said it should go ahead and install that for you so it's going to pop up now now and tell me requirement already Saied so we should that second okay we can just out of that and so I cancel the operation because I already have that so let me just close I like cleaning up the command so right now let's just create a new Jungle project in this particular folder so what I did I first came into the folder make sure I have jangle installed and now it's time to create a new Jungle project I say jangle in admin that project we 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 you see now that I have a new directory the folder named social book also go back to that folder now I have a new folder name so by going to it you're going to that it creates this other folder name social book and a file name manp so just going to go into that particular triangle project I just created by saying C the social book now I should have man. py and social book I come back here and enter this social book again I'm going to see some files which is basically just the F that jungle create to get application so now that we have this jungle 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 jungle app so we have a jungle project and we have a jungle app to take all the functionalities 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 social book 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 features the logining signing up tication 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 the project yeah 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 loging 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 jangle app and jangle Pro so you can say a jungle app is like a subset of jangle project but for this project we're just going to have one app that going to take you of everything so now that we're in here let's just create a new Jungle app and the command is similar to creating a jungle project so we do jungle I admin start app and we name the app because it's taking care of everything and we're not giving it a specific name and just say call I like nameing my apps cor just that's just me or you can name it anything you want toally now if I press di I have a new folder name core come back here now I have a new folder name core and in there I have this bunch of files that we 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 project and I've have 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 work successfully what you need to do is to say python manage.py run server now note that if you're on a Mac you need to add Python 3 man. py run server because the recent version of jangle doesn't support python 2 as you can see it gives us this output just ignore this for now and what he 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 say saying that we have successfully created our jungle project and it's working successfully you can see here say the install work successfully congratulations now this means that everything we created has worked successfully so this is the UR that we're going to be seeing all our project all the output of our project in so that's the Local H Port 8,000 that's the default URL for Jungle 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 the user comes to our website like social book.com we don't want this to show right we want to show like our own template our own design you know our own social media so let's get into that let's go ahead and set up our URLs we're going to 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 so let me quickly work 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 come right here and click on open folder and once you click on open folder just go to the folder where we created this jungle 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 call which is the app we created and we have social book which is the main project we created but we don't have man. py and some other files if I come back to my folder right here see that we should have man. py and SQL database but it's not there that means they didn't import while 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 whole 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 a f now we 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 cancel this cancel this as you can see now we have everything imported or open 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 social book.com where should it go or what should happen or when a user comes to social book.com profile what should happen so basically each of those path are URLs like social book.com profile is a URL that we need to set up once the user come to/ profile something will happen but we don't set that URL up then it doesn't exist don't worry you're going to 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 jangle if from jangle URLs import path now this path 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 patterns and now to set up our home URL say path and we leave it blank once we leave it blank like this this is signifying that I was setting up our home URL where we do something like profile this is signifying that we setting up our website SL profile so now after this we put a comma and we will say VI do index the home and we give it the name of index so what this is doing is that this views is where we basically do most of our coding so we are going to understand what I mean by view. index in a bit but first of all before we can even access these views these views right here that we 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 say from dot import use now we have views imported we can use views. index but if we're using views. index there is no function or no class or anything like index in here so we need to set that up also and I just giving it a name like a keyword for this particular URL index so basically what this is saying is that once 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 we going to come into views now we need to set up a new function for the index and it will take a request now we can return a simple HTTP response but first we need to import that from Jango HTTP import HTTP respon now we can just say return and HTTP response H one and say welcome to social book now this is what we need to set this let me explain what I did here so as I said right here what we did was we imported path 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 views. index basically is come into this views file and it to go to index look for any function that is index so now that it has index whatever is being done here in this function is what is going to serve to that particular URL so now since we just sending an HTTP response this is just what is going to show let me save it now one more thing before we can 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 come into 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 say if someone comes to the home URL just include for URLs what this is saying is that if someone comes into the home URL include c. URLs now this c. URL is our app which is call. URLs this so it's going to go into call. URLs and look for any part that is similar to this and whatever is being done there is what which is this path and then this path also links to views. index which is right here 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 file let's go ahead and refresh this go ahead 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 this says index is not defined so let's make sure we saved our views P right here also it's reloading let's see okay let's make sure everything is working fine to this point first of all okay so we have for the 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 do index name index save again now let's see once it reloads as you can see now everything is is working so sometimes angle just need a little bit of tweaking or reloading so it can update so 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 book so as you can see what we see now is welcome to social book so basically we've removed that default jungle template I was showing in St 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 going to do now let's go ahead and set up our template so if I come in here into the folder just going to go right here right here and you see I have one fold 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 world template and everything will be in the GitHub link of this project so you can get the template also and I have this two template here one is for the profile one is for this 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 right here vs code let's close this social book URL 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 is always advisable to add that 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 Dar you just specifying the where Jango 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 Direct which contains the man py file the base directory of this Pro we're going to create a new file and we name it templates and in here is where all the HTML files of this project is going to be so we need to tell Jango 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 did we're going to come right here under there I'm going to say os. path the join base there which is the base directory going to template so it says from the base there going to template that's where you should look for all our template files that's basically all we need in telling jungle where to look for our template files so we'll 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 drag that copy it in there good so now we have that in there we need to copy one more which is from the profile so we'll go to static D profile now I'll explain what I mean by this static D 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 we 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 eat refresh we shouldn't 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 file apart from my HTML it might be an image file a Javascript file a CSS file any other file we're going to use in this our template it needs to go into static and we're going to do that in 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 going to come back to visual studio code so 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 file 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 all 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 pyi 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 to os. path do join is there itic files I don't mind why this is different from this but this the next one now is the main connection so say static files there to S the path the Bas there comma static right here now let's save this now let me quickly take a moment to explain why we are even doing this so changle whenever we're connecting like images or css files it doesn't connect it the normal way that HTML connect it so if if you work with HTML very well you know that when you want to link for example an image file what we do is we have an image and we say SRC equals to then right here we have like the directory to the image file in my being assets SL image.jpg so for example in HTML this how will link an image file but in is quite different what we just need to do in Jungle we need to make sure that this asset SL image file is inside a folder named static so it must be inside this folder and after it's been inside that folder when we are going to the HTML we need to put something like this and say with a percentage sign we say static put this that to close so this is the way jungle basically sees any external file and we're going to do this for any time we linking to any exter file it might be CSS it might be JavaScript images any other file this is what we're going to do so for Jungle to be able to recognize this we need to set all these things up like setting up the static creating a new folder and putting the static files in there I hope you understood what I just said now I can just close that up and save so now that we have all this setup next thing we want to do is to move copy all our static folders and files into this static folder right here going to come into file first of all in this template right here this asset is where all the static for all those htmls located external files for all these files 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 copi copied it there as I said the profile and the rest have different settings or different files together so what we just want to do now also copy all the static steps here store and just select that out and now let's copy the rest that copying fold now everything is going to copy is just going to take a few seconds because some files might be larger than the other so that done and we actually do not need this so we have C this is still but as that is doing we're going to close this settings now we don't need it and we're going to actually open this index.html file right here in the code editor going to come to template and open index. HT we're going to get back to this also let's just make sure all this as well we have 1 2 3 four five 6 7even for the profile so seven items selected good but we don't need a static done template it's not part I just added that so we're going to have to kind of remove that don't temp go delete it like 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 HTML file 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 um let you watch hours of tutorial on something not necessary so I already you know configured all the linking for the way Jango will see it like the Jango templating style so before you can do this before you can even like go to a CSS file and add this 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 and use it so I already did all this for all the whole you know HTML files I copied so that's why if I come back here I come into template I come into so you can see I say static done 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 tweak everything so that it will save time well 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 throughout the whole file I did that anywhere we are linking a file I added everything if you scroll all the way to the bottom right here in the JavaScript also I did that so that's just how to configure that and if you scroll up and notice that right here we are linking a PNG but we didn't add static let's add static this 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 good let's see second the color yeah boom so as you can see right now basically have all of this loaded everything good search for username the post users you can follow so this just the basic template I used for this but you can see now everything is fine the static 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 go 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 log in 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 models.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 datab base for our project so now we want to create a profile model this profile model 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 model so we know that jangle 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 user model on dedication 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 bio the user profile image the location maybe like the 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 jungo already gives us or we can create a separate model for the profile and Link it to user model using a foring key so that's what we're going to do we're going to create a separate model for the profile and Link it to that 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 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 do 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 onore ID and I'm going to explain why I'm not going to say why I do ID user so we have user this is going to be a foreign key that is going to link to 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 the bio we want profile image profile IMG pass again we want the location so this are basically the things we want for this our model 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 fi we have character fi the text fi integer field but when we want to do something like a profile image we can use a file field but that file field be able to collect like videos PDF files but we want to narrow it down to for this F to collect only images so we're going to use an image f so what we're going to do is something like this models do 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 upload to so just the way we set up static files and all those type of stuff we also need to set up media so media is going to like take care of uploading like basically the storage where all these files are going to be stored because also when we go deeper into this application when we allow a user to upload a post the user 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 base directory is the folder which contains a man. py file of the 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 are going to be uploading and now that we've created that file we need to come into our settings.py so going to open our Pro our project and go to settings now right here we just make sure we scroll down and we say mediacore URL say SL media slash like this and we also need to specify the media Roots say os. path do join base 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 quate this the next thing we need to do is to go into the URLs of P of our project not of our app so we need to come into soci which is the main project go to the URLs of P now right here we're going to import two things we're going to import settings and static say from jangle configuration we shorten it to com import settings next one is from Jango configurations. url. static import static good so this is what we need to import and now to specify the URL for this uh media specify or to configure our media URL to finalize it the URL patterns go to URL pattern above plus static settings mediacore URL have a comma can just bring it down here and say document uncore roots equals to settings do media root now we can save this so what this is doing is is 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 models which we're going to finish in a minute but because we going to use an image Feud and that is a file we need we needed 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 and media root and we needed to import that into the URLs pyi or social book and just configure URL path now we can close this and now we'll be able to use an image field in our model so now we say models do image field but one more thing we need to specify some things that Jango is going to understand so when a user want to submit a form of this field or when us 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 but 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 have folder that say post images so we don't mix all the images together so let's say this should upload going to use the upload to profile images now I know that under media folder we don't have any folder name profile images but if we don't have any folder what Jango 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 profile image so basically since we don't have that created now we can create manually but I prefer for jangle to do that automatically so it's just going to create profile images folder and it's going to store it there so 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 default profile picture that Facebook put for you so we also want to do that so that if the user doesn't have a profile picture yet we want to give him a default profile picture so 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.png um 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 is going to open good so as you can see this just a default like profile picture for user that didn't upload a 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 blank profile picture PNG but remember again I said that anything dealing with these images or 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 Jango know that it's supposed to go into static images then look for this no Jango doesn't know that so what we are going to do this blank profile images we're just going to drag it from there and paste it in Media so we want to move that so now it's the media so when we say blank profile picture. image Dango is going to go into this media folder and look for that file since now that we know jangle can see that file we can continue with configuring the rest of our model files our model field this profile image now is done model. image field it's uploaded to profile images and a default as if the user didn't upload profile IM 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 the default for the this foreign key so we going to understand that now when we do that so first of all let's do from jungle. contri do contri do import get user model so I want to import this attribute name get user model which is just going to get the model of the currently authenticated user so let's let's give it variable and say user equals to get user model we're just initiating that and now that will say user equals to this get user model anytime we use this user now it's just basically going to be model of the currently loging user so now right here we're going to say models forign key user uh UND delete first moduls that's that's good so now what this is just doing is we have a foreign key that is linking to the connected to this user which is B this user variable which is this get user model that we imported we have that done now this ID user is just meant to be an integer field model dot integer field that's that that doesn't need any attributes in here so I know you might not understand why we like have this ID user or why 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 know project when we are getting the post when we allowing the user to be able to follow another user you will know why or you understand why all these are being done like this so just follow along for now and let's get so now we have the bio the bio we just want the bio to be a text field so say model. textfield and we can give it blank equals true now this is because the user might not want to have a is not compulsory allow it to be blank now the location models. character field this time around and a character field has a max length of 100 let just give it a maximum length of 100 and let's also give it blank equals true because the user might not want to put his location that's not compulsory all this is good we have the user ID of the user the value of that user profile image and the location now let's just return the basically the usern name so we say Dev St Str self return self. user so this self. user is just this let's get the username that mod so what this is doing this is not you can remove this if you don't want this is just in the nameing 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 one or object two I'm going to show you that like in a couple of seconds 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 thing the app where you have this mod. py for us it is call that's the name of the app this app must be added to install apps in the settings. P WiFi so 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 jangle 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 migrate 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 this 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 database so now all this that we've done we need to migrate it to our database 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 do manage python manage.py make migrations now once we make migrations what this is doing is that any changes that we made in models.py is going to 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 a change we need to come here and do python man I make migrations to save that change then migrate again anytime you touch this file you need to do that just that now that that changes has been made let's just say python manage.py migrate 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 core that's migrating and now um I want us to run our project and go to the admin to see our you know database but we can't 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 the admin panel so to create that we're going to say python manage Pui create super user so 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 log detes to log into the admin panel only we the developers that can create a specific super user and log into the admin panel so now let's just say admin give it yeah book.com let give it a password password again and it says the password is too common to the username let's just bypass that so that is created successfully now let's run our server again P run server as that is preparing to run I'm going to come back into our browser and actually let's open a private window this private window is just for our admin panel so that we'll be able to log in to our admin panel and not interfere with loging in to a normal user so hit this in private browsing and go to our website now SL 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 jungle Administration now jungle Administration doesn't have a sign up form the only way you can sign up to this J is from your console it's from your command line now let's log in with the details we just created mean with the password also and we hit log good now that we hit loging you can see we have just two database we have groups and we have users this is created by default in jangle if we open this 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 I said that Jango 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 is 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 from Models import profile since it's profile we want to show in our admin panel or register to our admin now we say admin. site. register profile now we registering our this profile mode to the admin if I save this now just going to come back here and make sure everything load successfully once that loads I'm going to go back to my admin panel and now I should see my profile done going to come here and if I refresh this now good now I see under this call app two profiles I click on it no profile yet because we've not yet done anything to the profile but this is the first step in the user authentication so I hope you understand what we've done to this point created a specific profile model for each user so when a user sign up the a profile mod is automatically going to be created for them now we're going to do the registering of a user or the signing up of a user in next part 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 this and this just to make everything clean but first of all we're going to have to come into URLs and create a new URL for that view so what we want to do we want the user to be able to come to our website SL sign up and you'll be able to sign up to our platform or register on our platform so let's add a here right now just put sign up and right here sign up and the name also should be sign up so basically our website SL sign up then it should go into views. signup and it has a name of signup so we know we don't have views. signup yet we going to have to come into views create a new function named sign up it's going to take a request and let's just render our HTML template so return render Quest sign up. HTML now this sign up. HTML basically this page is sign up. HTML that's what we are rendering when user goes to/ 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/ sign up it really renders this spe 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 want to change this to sign up want to change this to social book and maybe change title let's go do that first we'll come back here and then in in sign up. HTML so this again remember as I said I already twe the all the links for static so now I just going to changes to up yeah look okay and let's scroll down right here where we see it to social book and right here we see sign in we have to change it to sign up yeah so that's that and this should be sign let's just just changes sign up Social book social book sign up this is sign up we change this instead of this so Z with that then right here this sign up that should work now sign up and this go login good now want 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 collect the username the email and course user have to have a password right here where we see this form let's disting this form rest make our work we have this form here what we're going to do is the 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 place that 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 F 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 just say password two the confirm password and we can also change this to password the type your password type for more security and well again I agree to terms and condition that is not really let's just comment that out and now let's go ahead and see what we have now so it automatically FS it in basically let's just remove that so it doesn't fill it in again now we have sign up we have all of this which is good what we want to do let's also scroll down Buton 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 e sign up all this data that is been inputed in here is going to be sent back to this sign up 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 Jungle there are two different type of method we use when submitting a form use the GU 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 yeah and a user wants to search like python so on that search form you can use a get method because the value being shown is not confidential just what the user is searching for and when youing a post method it's basically where when you have confidential input like a password we don't want the password to show so if you use a get method whatever is being searched or whatever is been submitted is going to be shown in the URL if use 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 anut that is basically not confidential as I said because if we are using like this sign up form and we're using a get method we don't want to show the user sign the user 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 a platform where a user pays using his credit card information and you don't want to use a get method in that situation because credit card information can be shown in the URL so basically those are the major two 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 jangle need to add this templating sty called csrf token now this just take care of some malware because this csrf stands for cross site request fraudery 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 deeper into that now let's save this then let's come it refresh and just inut 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 request do method equals to post so this simply means that if the when a user wants to look for this site or when the user comes to this particular page if this page is being summoned using a post method then we're going to do couple 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 here so but when we submit a form and need sign up we we 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 said if the request of method is post we're going to do some things let's pass first else Ian it's not a post method and just on this particular page so now if is a post method let's get all the value that been sent to this view so we can get that saying name equals to request do Post name what I just did was that I have a new variable and I said request. post username that means the the data that been posted here is going to get the value of that data using the name of the input 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 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 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 much um all this type of stuff like the username is taken the email is taken we're still going to do that but now we H sign up let's see giv us a value error it said views do sign up didn't return so it didn't return anything because we're not returning not giving a response we're just getting the value but we're going to do that but let's come back here first and you 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 through that form can just use that create a new object in our user model now let's go back here 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 count 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 can create and first check some things we first check if the password one is equals to the password two because when we're saying confirm password the two passwords have to be the same we also check if the email exists also check if the username exist before we do all those we need to import something and what we need to import is the user model user model which is from right here which is this user model where all the users is being stored so we need to import that right here so first of all let's say from Jango contri Earth moduls import user and we also want to import something name now this is going to allow us to authenticate the user now I think that's what we need for now just come down your back so now this place we're just going to have another if statement from here what I'm going to say is if password equals to password two that mean if the password are the same then something pass for now else we 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 from tangle contri import messages good so this is going to be able to send a message if it's an error or a warning just going to be able to send a message to the front end so now if the password is equals if the two password are the same we're going to continue and we not check again if the email is taken or the username is taken but before we even go forur that if the password are not the same name 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 messag is the info say request and will just tell the message password not matching and then we have to read that direct the user back to this 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 jungle. shortcut which we already have here so let's just say redirect so now that we have that we just say return rir to the sign up so we are redirecting digit to the sign up by sending this message so that your user will be able to F that form again basically so now that we have this that's 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 do objects filter email equals email do exist 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 equals 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 exist that mean this email is already taken messages. info Quest email taken and then once we tell the user that email is taken we want to redirect say return redirect user to the sign up now that we have that we use another if statement but if so else if want to check if the U username is taken so say user doob futter usern name go to username exist we just want to do the same thing by saying messages do info Quest username taken and then we're going to direct the person back to this page so now but what if password is equal the username does not exist and the and the email does not exist just say else if there's no error nothing bad happen what we just do now we want to create that new user so we just say user equals to user do objects create user this one so this one is going to be able to create a new user for us and we just say username go to this username that is being passed and then the email equals to the email that being passed and also the password of that user we just take one password because we don't need to start two passwords just to pass so we are storing the username password and the email basically now that we have that just say user do 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 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 equals it should give an error so let's even test if that is working so our is okay good so now that now we give it this just give another one okay so when I sign up now I come into my users you will see that there's no additional user that created and this is because obviously the password was not the same so it can't create with two different password what 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 that what we are going to do is to go into the HTML file here I'm going to use a for Loop we just basically going to pass those messages that is being sent and show it here like password not matching or password correct or username taking or stuff like that let's quickly go back to our vs code since we are sending all these messages already them to redirect 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 so this just going to basically print the message for us and let's end that for Loop but we want this to show like an error 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 right here we can just say H5 let's give an H5 col of red let's save that send that reloads good so we refresh that page and the data we posted before was reposted back as you can see now it say password not matching if we try TR to create let's say admin because we already have a username admin if should tell us username taken let just give it blank let's make sure this same now you see it gives us username taken because the admin taken so as we can see now the error is being cut successfully what we want to do now if we make sure that there's no eror 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 yes because if we create a new user now only the user object is created but a profile object won 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 so we'll say Lo the user in 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 we're not going to log the user in yet that's because when we log the user in I want the user to be automatically redirected to like the settings page where where you can upload profile and put this bio and location but since we don't have that yet let's just create a profile mod 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 plug 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 what we're going to do now it say user model user doob do get name equs to username so what I'm doing now is that first of all because in here for us to create a new profile we need to give that profile the user that owns this profile and give that user to 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 specific that 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 this username that was just created right now and then once we have that we say new profile and be equals to profile doob do create user be equals to the user model and also the ID of the user want to get the ID of the user ID user was what we used can be equals to the user model. ID so these are the only two things we want to give as default come back here to our models give it this value the user object and we give you the ID of the user so the biography the profile image and the Loc the user is going to create that so now let's just save this user basically and finaly the creating of the profile model so we just say new profile do 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 we going to be able to I'm not going to be able to redirect the user anywhere so let's just redirect the user back sign up when we create a login page we going to be able to redirect the user so let's save this now once we have this saved now we can come project that let's make sure project here good since it's running now let's create a new user let's say John joh at g.com let's give him a password let's sign him up it gives us name Arrow now this is because it said name profile is not defined now 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 model py file from Models import profile good this should work now if we come back in here John joh.com my password now we hit sign up so it says email taken 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 um name profile not defined the error was here that profile was not defined but that didn't stop that from creating a new user a new user was already created but the profile object was not created for it so this is just was the testing phase so right now we come back here and need refresh see John as a new user and as you can see it's not a staff this staff means it 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 log in 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 going to load the page normally so since that post data was sent again John user is now created and John profile model is not 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 it refresh didn't submit that post again normally in like normal browsers like I think Chrome once you H refresh it's 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.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 or it should 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 of has been created if we come back here come to users see now that we have user John john.com come to profile good we have a new profile for John that is good so the user is basically this John 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 that 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 working fine everything is fine to this point right now next step is to be able to allow the user loging into our platform now let's create the login view for our application so we want the use how to be able to go to/ signin and then the user should be able to sign in to the application let's go back to vs code for now let's just collapse this right here in URLs let's create a new view I will name it sign in let just take that copy it paste paste right here also open this again scroll down and create a new view say DF sign in West return render Quest sign in do 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 SL 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 a clicks on this log let's take this out to the sign in View and also right here if we go to sign up we look for where we have log say f to search we search for login so do you have an account this should be to slash sign in for the second one is right here at the top right corner of our application let's take them to SL sign in good now we have this we come back here 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 in Social book and let's scroll down want to change this also to social book it and what else so this is login login is create an account and register want to change create an account and register to want to make it go to the sign up view to register go to the sign up SL sign up now create an account goes to sign up good so this is done let's come back in here and it refresh social book now let's just remember me we are not really using that this video so let's just comment that out to good now what we just need is to 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 it and right here let's have a name name and this is the password if I type of this password and the place orer I love it to be password good now this is working fine let me save and see name password and each of them have a name now so the action should come back to this login View and Method post as I said whenever we use a post method we need to add csrf token good now that we have this once a user it submit or log send that to our login view let's see is we have this L okay so that's basically because we didn't refresh the page so let's refresh this page anything in there log in okay so it just comes back here which is what we want now let's do a similar approach to what we did in our sign up so right in our sign up now loging view we're just going to say going to an if statement again just like we used earlier so let's just say if W the method equals to post we're going to 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 to get the username and password just request do Post name and copy and paste this password it is paste this right now what we want to do is to create a new variable and say user equals to both authenticate authenticate with name post username password goes to password so we authenticating with the username and password good now that we have that initialized use an if statement will say if user is not known 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 known that means if is there if is present in our database then let's just authenticate and say login take a request I want to log in this user I say return direct to the homage so now when we log the user in you want to return the user to the own page else now this just simply means that if the user is none that means if he's not you know there if he doesn't really have an account and he's trying to log with a fake credential send a message error so say messages info Quest let's say 10s invalid and then we just redirect copy from here paste so we're just redirecting the user back to this signin page good so for need everything is working here if this if it's a post method get it initialize the autic the Earth and check if the user is not known they authenticate if is none give him an error on here now let's save this and we also have to come into our sign in to add the div 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 we come here go to sign in and we say if something that is not in our database see now it says credential invalid so that's an invalid credential but if we really give something that's in our database which is John can see now it is ontic and boom it takes us to the hom page so this is working fine and now once a user on 30k it takes user to the own page now we want to do two more things we want the user to be able to log out so once user come here and click log out should be able to log out and no more be authenticated and also we want that before user can access this page user must be logged in if user tries to come to this page when he not loging going to be redirected to the log URL I'm going to show you how to do that first of all let's create a new PA for log out out out on to views if log out going to 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 say o the log out rest then now direct sign in since we have this now and just easily come in into the index and search for log out right here out right here where we have log out now just say log out come back now and it refresh come here say log out boom we are logged out and it takes us to the login page to log one more thing I want to do as I said is that if I come to this hom page now you see I'm still able to even access this homepage while I'm not even loging in we want that to stop so for us to do this we're going to use a decorator triangle has this buildin function that allows us to basically take care of this lug in like when a user is not logged in not authenticated want to redirect the user to 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 Dango 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's not logged in and try to access a as I said once a user want to access this index page it 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 authenticated then redirect the person but 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 add 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 to this homepage as you can see it takes me to this log because I am not loging and you see automattic Al after I sign in it takes me to the own page let me go to and that was Val 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 log out because a user can be logged out already and can 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 there good so to this point now we're able to log 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 his bio and like location or change his bio and location so what we want to do first of all in the URLs let's create a new URL and we're going to name the URL settings so just say settings and you should take from the views do settings and name equal settings also views now we need to come here and create a new view and let's name that view settings take a request and we just render the settings. HTML which is this setting. HTML now we can save this but before we save we also want to give it this login required decorator and this is because a user can't 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 you go back to check our application should be able to go to/ settings so let's see settings s s once we come here it should basically load up that page good so we have this form here right now so we're going to twe 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 to be able to you know update first name and last name working our 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 BYO 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 what we want to do now so we want to automatically log in that user and redirect to the settings page because now if you be following along you know that once a user sign up nothing is going to happen it just bring that user back to this page but what we want to do is that once a user sign up it should take the user first of all automatically log in the user and then take the user to settings page so let's do that so say user _ login equals to earth. 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 do say. login down here we say. login take a request want to log in using this login right here so now it's going to log the user in and then once it logs the 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 the settings page but taking the user to the settings page and not back to the sign up so this is what we want so we can just go ahead and close this up and if you come to the sign in that is taken care of so once the user is logged in just take the user to the OWN page where you can see the post feeds and everything 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 you basically just go into settings. HTML right here we're going to change some things we're going to remove some form Swit some form and yeah so let's get started with that so right here where we have let's see what we want to remove where 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 where 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 log in who we want to show so first of all and we also want to have a link here where user can go to the own page back because right now us can just go us 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 the user to go home so we'll come back here and we have an a tag and that should just take the user to the home and we'll close it and we'll say home save that and come back here hit refresh so it says home account settings if I click on this home takes me to the home homage but I want to do something like home SL account settings so we know that that's the directory we are in so let's say home slash account setting but now we say account setting for then we will show the user but that user has to be in a bold tag so to show the currently login user in the jungle template the HTML file this is what we do we do we open two craes and close it and we say user do username that's what we do if you want to show the email which I don't know why you show that or you want to show it to be user. email so let's just H refresh button so as you can see it says home/ account settings for john.com which is the email the user put when it was logging in let's just say user username now we save this hit refresh to account settings for John now 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 Ur tag basically don't need it just going to that out so I'm actually building this from scratch so 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 the space so there's a little bit of space there and let's have like a line to demarcate so there's just a line there just to demarcate this is a title and this the main page now that we have this just close that Gap we're going to come here in this basic we want something like general settings so this should be like the general setting let just change it to General that's done and now let's TW 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 have to close all of that so from here close this that so now that just basically close that D tag for us let's scroll down yeah so that's good and we save it and go back there now don't have that again cuz 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 we want to change it to bio we want to leave location remove working atart and remove relationship so we basically just removing the things we don't need and keeping the things that we need here first name about me we change this to bio give it an ID of Bio name of Bio we can leave the ID but what we need to change is the name 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 don't have a name just say name equals location good come back here and it refresh we have bio we have location and we don't need working art and relationship so working at relationship be G we remove that let's save and fresh good so what we want to have now is another field for the profile image so we're going to go up here have like like this and then going to say profile image this will be a file field the name be 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 we're 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 bio here and we eat save if we eat save and it's save to our database when we come back here we don't see that bio yet want to be able to see that by you so we 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 here what we just need to have here now the form form we're going to go ahead and close that form at the bottom so we closing the form right before this other comment somewhere you also have a button to save that so we have this save button here okay so we have this save button button which should be right here so let's just leave there like that and then since we have this done already let's just set an action so let's set an action so as always we want it to come back here and have a method of post we also need to set up the csrf token 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 but we can do something like once they is cancel take them to the homepage let's just put that in there flash so if they cancel and they don't want to do that again look at the bottom left corner you'll see that it's taking them to the hom 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 and 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 this settings going to have to do a little bit of coding here what we're going to do first of all we want to get the particular profile object of this user of the login user say user profile goes to profile objects do get user equals to request user so basically what this is doing is saying that we have a new variable named user profile and the value we given that is profile. object. getet 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 currently authenticated user since we have that what we want to do is to pass make sure I'm cing that pass that into our HTML view so 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 we already have a profile image that we gave the user when first of all from here you see that profile image has a default of blank profile picture so since the user has a profile IM we should be able to tell the user that there is a profile image here we should able to give like a value a default value here then if the user want to change then it can go ahead and change and also the same thing if the user already has a value want to show it here so it 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 oh no since this is a text area we don't put the value here in here is where we put the value we just use the braces and we say user profile. bio since we already sent that from the views to the HTML it should be fine so user profile. bio location this is an input so it needs to have the value if it's having a value it doesn't need a place holder so let's give value and let's say user profile dot location and this is going to automatically fill this place in if the user has a bio or location we refresh we shouldn't see anything yet so we're not submitting enter we won't see anything here because this user doesn't even have a b location but now let's come to profile image for us to do this is going to be the same actually so what we're just going to do is to say after placeholder or we don't even need a placeholder I will say value be equals to user profile. profile IMG now I will save this and come and H refresh now right here we're supposed to see the current you know profile image of the user but we're going to fix that again in after we do something and I'm going to 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 views right now once the user it submit we want to be able to send all this data to the Views update the data or even create a new data for that particular user so for this image HTML has 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 there are other ways to go about this first of all if there's a user we can just display you know the URL here that you already have 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 profile IMG do URL so let's make sure we change this to dot let's save this first of all and it refresh as you can see it basically just shows the current profile and if we change it um we're going to change it in a bit but if we change it this should change also let's try to St that with I don't know 25 height five just testing the size first how small okay there two small so let's give it like 100 100 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 we 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 W do method equals to post and we want to get something now what we want to get first of all want to get if the user actually tries to update the profile image or not now this is because in our models we make sure that this profile image right here is compulsory so when submitting a new form we're supposed to have a profile image so we can say if Quest files get image equals to none so again there are plenty ways you can do all these things like this is just the way I going to do it in this tutorial so what I just saying now is that if the request file. getet 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 what we just say say let's even get the image also image goes to user profile. profile image what this is doing is that if the user didn't submit any image it's just getting the current that is already that user already have and just like res submitting that again basically so then we are just getting the bio Quest post bio 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 users 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 if 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 jungle we need to configure some things like you know when we use post method we have the csrf token so when we submitting a file in the form we need to make sure that we havec type and then we say multiart slash form data 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 the text the the text area all those values is going to submit them but not going to submit the email the file and you must make sure you have this in let's just save that now we can come back to the Views and in here let's just basically say user profile do profile image goes to image do the same thing and say user profile. bio want to make it equals to bio also user profile. location make it to Beals to location now that we have all of this let's just say user profile Dove now we've updated that particular model but what if the user is submitting an image so let's say if request requ do files do get image it's not equals to none is the exclamation mark is not none and that mean there's something there so now since we have that we are basically just going to get that image that user sent say image be equals to Quest and now when we getting image even using a post method it's going to be quite different say request dot get PR files we dealing with files and do get going to have bracket and say image so I want to get the value St it as image and then we just want to basically do the same thing for the bio so we just copy this so bio I just say request post bio location request of post location and we are saying user profile do profile image it goes to image and this the same for bio and location and then we are saving it and once we save it we want to redirect the user say return direct back to this set SP now that we have all of this configured it should totally work let's go ahead test that out going to come back here H refresh now let's change this profile image let's see what we can change it to just allowing that to load up folders and we have all of these images here let's just change it to one of it so it gives it this let's say bio I am John nerd and look let's just say Manchester now we can save once we save boom see brings us back to this page but now this profile image has been updated now the B says I am join and I am the coolest n and it gives us Lo 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 updated okay it's saying settings. HTML but if you go/ settings you see that that b 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 his ID is bio the link to his profile image and the Manchester another thing I want you to see is how this profile image up uploaded basically so remember that in here now models said you should upload to profile images as you can see here that's what he did he uploaded to profile images SL i. jpg whatever the name of the file is so if I come into media now not social book media you can see now that I have a new folder name profile images and in there I have the image that us uploaded basically that's how we can you know configure this settings so what we just want to do the last thing is to come into index right here where we have account setting on that you go to/ settings that you work and we do not need explore and not also help so let's save this and come back here go to home I'm here now we should be able to go to the account settings to see it and we can change the location let's say it moved on let's see Toronto and we save it now the location is Toronto go to home come back to the account settings so that is C 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 St now 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 and right here we want to create a new model for the Post to say class post models. model and we want it to have an ID also want it to have the user and should be the username I want it to have the image which the user is uploading the caption of that image the created art as the date it posted can name that created at and the number of likes so uh giving it all of this field and ID we're going to use the U ID field so first of all we need to come up and import uu ID so this U ID 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 ad so it will get the date that post was created or uploaded so now for the ID let's models uid Defi and we say primary key equals true so this primary key equals true 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 jle create an ID for which just has like the first post we have an IDE of zero second post one 2 3 and so on but we want to change that I want to give you this unique ID so it's going to 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 jungle model we need to say primary equals true if not it just give us an error anyway so now let's say default alss uid do uuid4 now this is what we need we are using the uid field primary ke is sets to true and the default is gu id. id4 so now the user this time around we're not using a foreign key we're not using we're not joining together what we're 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 100 and then image now image is going to be an image Feud models. image Feud upload two and then we'll say there 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 say postcore images so that is done and the next one is caption now this is just going to be a text field mods. textfield and we don't need to put anything in there created at is going to be a date time field we say mods dot date time field right here and we give a default of date time equals now we say default will have to be equals to D time close that up so defaults this time equals that and now next one is the number of likes mods that's integer field I have to give it a default equals z because when a user just upload a post the initial likes number should be zero then when someone like then it will be increasing when someone dislike it will decrease so let's just return it in with say self we say return self do user this time not user. username do user just because this is not a foreign key so it's not an object that is been passed in here what been passed in here is just the username so do 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 the server that is already running and then we are going to make migrations and migrate python manage.py make my migrations so this command line is just going to as I said earlier is going to change or make this the changes save the changes that we made in our models of py file it's going to save it into a file named initia going to save it into say it gives us an error as no attribute U ID field okay so the error right here is that this U ID fi supposed to be more me 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 01 initial then the more migrations we make now let's just wait for that to 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 Works a new file is being created it's just updating it that's the way D jangle just work you don't really need to understand why that is that's just way D jangle works with make migrations and migrate that's what happens when you run that command Mone py migrate and now this is just going to migrate it to 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 is running so we can go check before we check let's register this in our admin panel we open admin.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 if we come to home once we come to home now under core under this core app we should see profiles and we should also see posts with just wait for that to Lo second good as you can see now we have this post model and this is where we're going to be storing all the post that every single user on our platform makes 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 this should be upload load upload and we come into our views and just write 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 blank so we don't get an error by just rning an HTTP response and one more thing let's also add this l 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 even let's save this and let's save this now that we have that done we going to come into our index.html let me quickly go to our website right here where we see upload PS 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 for caption so you know the user can see caption or see a field where you can input the caption and there should also be a submit field so now let's just go ahead and do that first of all we aren uploading videos so we just change upload pig to let for where it is written right here we change this F right here also changes to fix 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 going to do right click on it and I'm going to copy the image link going to search for that image right here what 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 place as we can see here so okay I I think this is it so right here what we just need to do we need to pass 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 from into right here we're going to say user object so first get the user object and we'll say user dot objects do get one in which the username is equals to request user name so now we have the object of the currently log user and now want to get the user profile object say user profile should be equals to profile do object 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 login user now that I have that object I use it to get the profile now if you come into models file we will be able to see that in here for us to get the particular object with the user we need to provide the object of the user since we using a foreign key we're using a foreign key and we're connecting it to this user model so to get the object the profile object of a specific user we need to provide the profile the user object you understand we can also do it another way we can provide the user ID but I just feel like this is away 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 just a user profile goes to user profile and what this is doing is that it's basically just sending this variable of user profile into our HTML so right here now if I come to index can remove this and we can access that using the user profile say dots and let's see what we use to save it is profile image do profile image. URL so we use URL when I want to get the URL of an image field or a file field in general now if I save this and I come here and I hit refresh what I shouldn't see this image here 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 that so we have that done the next thing we want to do is to have the welcome done welcome whatever the usern name is so we're going to scroll up a little bit first of all to some things so right from this div up here going to comment that out and also this just to as we are going the ones we don't need we can them out now that we have that all I just want to do and it fres let's see we have upload PS before this upload PS 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 find 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 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 yet but okay so let's just scroll up uh so basically when you have a template you just way to look for how to or where to put your form okay so this ISS please upload so we want to put the form let's say around before upload PS see okay good so the form should be like here we have the form here C this out and wherever that D is ending that is where we're going to it says the de ends here it this actually need that okay so we're closing the form here we opening the form here and this is not part of the actually leave this but 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 BS of videos I'm going to scroll up to the of the form so this coming that out and it's refresh let's see okay so you don't need to comment that out upload PS or videos so let's just say upload PS if we see that now we have a file fi 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 going to remove it from this custom D we going to a from Custom going to save that and now under here we're going to have type so come 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 you that styling P that in there so now that we have that we can give it the name and the placeholder and stuff like that let's say name equals caption and place holder equals caption and just have like three dots now let's just refresh and see how the form looks if we upload P 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 are have a button so what we want to do in this button is Buton Buton I want to give it a class so it would you know have the styling so let's say class Wass 2 700 and let's give it a name a type this button should be a submit type so since we have this right in here can say upload since we have upload let's also give this this styling of button from here that class let's see how our button looks all right so it says upload the caption the image and good so want to remove this or upload only 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 let's just close the form then indented well and then we can come down where we add that form the form somewhere so right here move the form there scroll up oh not there so this is in a form that's good actually what we just need to do go up to where the form Begins for this the form earlier and remove that now SC back way down that for 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 the US to be able to upload an image put the caption H 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 type multi part flash form I think data now 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 supposed to if Quest the method equals to post we do a specific thing that's when we create data but if it's not equals to post that mean if a user just tried to go to slash upload without even posting anything let's just return the user to the own page 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 what we need so for the user we equals toest do user username so if we come into our mod py let's see what we need to give in our post we don't need to put the U ID that's a default we need to give it a user we need to give it the image and the caption don't need to give it the created and no like so just the image and caption right now so we say image caption so image is equals to Quest do files 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 do 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 before we use post here we need to import post prob not imported that only imported profiles now that we have post imported we can say post doobs do create user equals to user the also want to give it the image so if we here give it user image and caption so the image goes to image caption equals to caption now that we've given it all these details can come to the next line now and say new post say so after saving it we just want to redirect say return Direct on page now this should work come back here and let's H refresh okay it's not running let's wait for for this to reload and once this reload we can test that out basically so loading now we can come into upload PS unless the pck from here that should open up folder file manager B and we should able to choose a pick and let's just anyone and we'll say nature let's upload so it gives us this 43 forbidding and now this is because in our form right here we used a post method but we didn't add srf to so that must there let's save this and go back back try to upload again um here it upload good so it brings us back here doesn't tell us anything doesn't show us anything yet well we come into the admin panel and if refresh be able to see a new post object create so let's wait for that to reload good 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 to and I'm also going to explain something in this URL so you can see now the ID which we put the name the link to the image caption the date it was created at and now it has zero likes so remember when I said this U ID 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 said when we set primary key equals true so that replaces the initial ID that jangle 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 these static images all the dumb images that we put there so what we want to do now is to change this and want to get all these images and the person that and 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 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 post we have in our database so because we don't have the followers and 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 what we're going to do later in this video but for now let's just take away this 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 going to say so we don't need upload again I 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 doob all 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 this this 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 since we have this right here at toore ml we know that that's the one for this so post post one this is under post one good post two let's also collapse that load more let's collapse that we're going to just remove all this basically post three post four load more yeah so want to delete all of this we just want to keep only one so we deleted everything to post two now if I save it and come back in here what I should be seeing is just only this first post 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 jungo when we are sending a list come back here now when we are sending a list from here so we say 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 Loop through that list and just display the data we got so we can say for post in post and then we're going to end the for Loop so now that we've used the for Loop we can change this to the post dot can come into our model.py file so the post. user 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 we just have this John basically just because you know the what is 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 we're going to scroll down so we have this delete post function which we're also going to take care of later so right here where we have image SRC so I want to have post do image. URL now if we hit refresh good so you can see that the 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 we 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 I click on it it opens that image larger so now the next thing you want to do is to have like a caption so 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 where we have the likes so if we come down here I think we have it right here where it says liked by so in this place we're just going to basically have a caption and we can say first of all let's see want to remove all of these so you need this not need this and let's 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 where 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 we having right on here so where we have this right here we are just going to say let's have a P tag and in that P tag let's have an a tag so this a tag is going to be the user so we say post. user and then we also want to have the caption of that post post do caption let's save it and it 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 say strong paste that in there so we have John now strong and this so this and this we want that once a user clicks on one of these it should take the user to the profile page of this user we've not yet set up the profile page picture 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 do user that should also be in a link tag so a put that back in there give it that and give it an ash now we come back here and it refresh once we click on it it just basically brings us to this ash but later when we've taken care of the profile the profile page picture then we'll be able to link that and also we're also going to do with 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 px we wait for that to load up the files and now let's upload this and let's say the world it's beautiful and then we it upload so now that we it 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 reverse it refresh now you see we have the latest post right here so we've been able to take care of the field the photos feied 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 post we have stored in our database Well normally we are not going to stop this post feed just like this cuz that doesn't make sense we want to be able to customize it for each specific user that means 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 last section since we've not implemented that yet we're just going to stick to this stick with this for now and what we want to do is to be able to like a post so this button here once a 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 likes this place 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 going to come in here the first thing we want to do is to have a URL where we're going to 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 iph post so we're just going to copy this put it in there for the name and then for the views the views can't have an i 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 the 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 age so what we want to do is to change it to SL like post like I post so now want to click on this you should go to SL like I post but we want to go there by sending some data so let's send post ID so I want to send the post ID and the post ID will be post. ID let's save this and check this out I'm going to refresh this page now and then once I over on this button if you look at the bottom left corner you're going to see that we have SL like post a question mark then postore ID equals to the ID of that specific post now if we go to the next one we see the ID of that post so each post has a different unique ID but since now now once we click on that we are sending it to that view it's going to give us an error now that this particular place does not return anything see doesn't have return 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 is 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 of liking post so when to use that likes a post going to create an object that this post ID was liked by this user so that object is that model 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 liked this post it's going to update that and if you have not liked this post if you has liked this post it's going to update that here by reducing the likes but if you not like this post what just going to do is to increase the likes so now let's just go ahead and do that and once that is done you want you to redirect us back to this right here in our models file first thing we want to do is to have a new model take class like post and that should obviously take from the model do models and what we just want to do is to have a postore and that should just be models dot character C field and let's have a max length like 100 and the username that's the US name of the user that is liking this post let's say models do character field and that should have a max length 100 and let's say DF Dr s we're just going to do is to return self. username so this is what we have now and what we want to do before we have migration is to go ahead and import that here in admin.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 gives us an error said models model does not doesn't exist it should be model. model that models. model I come back here now and cut out of that okay so that should just cut out of that and I we say python manage.py make migrations and this will save the changes and tell us what has been updated now we can say python manage py migrate now this is just going to migrate that to our datab BAS 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 or a private window where I log the admin user in I close that tab so we just have to open that again and quickly log in the admin user so say/ admin and remember that earlier in this tutorial we created unique admin user let's just log that in good so now we logged in and we now see a new model called like posts so now once a user like a post it should update here and once a user unlike it should also update here now 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 whether liking or unliking and what we just need to do now is 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 so say request. user. username so that's that just got the username of the currently logged in user and then the post ID which we sent from our template so we say request. getet do getet and what we just want to do is to get postore 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 we say post is equals to post post doob so this post is actually the post model which we imported if I scroll up here right here you see we have that post so post. objects. getet want to get the one in which the ID is equals to the post ID that is being 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 loging user so that we know whether we want to like or unlike so what we're just going to do we say like like filter so we want to filter the database and say like post do objects filter postore ID equals postore 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 into by models in which the post ID is equals to the currently post the current post that is being sent here and the username is equals to the currently log in username now if we have an object like that that means this user has already liked this post so we know that we need to unlike that's what I want to do but 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 getet not 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 exist 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. post do get blah blah blah exist 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 want to filter with the post ID is equals 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 just want to get one model one object we say do 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 it didn't see any object that correspond with this input that I gave then that means the user has not like this post so we want the user to be able to like this post so say new like should be equals to like post do object do create want to create a new one which the post ID equals to post ID and the username equals to username now we can just say new like do save and now the next thing we want to do the reason why we got this post object so remember that once we got the ID of the post we have to get the object of 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 do number of likes should be equals to post do number of likes but this time around plus one since a new user is liking this post now we can just also say post do save after saving the let just return redirect the user back to the own 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 user to be able to unlike this post what we would just say is like f. delete so we just want to delete that particular object that we got since I want to unlike it and then we'll say post the number of likes this time around minus one and we can just say post do save and we can also do the same thing by redirecting the user will say return redirect the user back to the homepage so now let's save this and then let's go ahead and test this out so first of all if we click refresh you see that we have no post object here but we come here now and H refresh and we try to like this so nothing shows it didn't return any response but if you come back here and it 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 H refresh we see that that is gone now that is because user unliked so user 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 we now see okay so it's not this one it's the second one that's post we go to the second one now we see that it has the number of likes is one if I come back here and click it again and I come here and need refresh now the number of likes is z so that basically just fix or soles 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 want to show it under here so what we should do in there is to go into the index. py index.html actually I'm going to come in here and then just write under here so right here what we want to have is just to say let's just make sure we are in the right place yeah right here okay so what we want to have right now is have it on the inside the same div tag so we want to have like a P tag and let's just say liked by one person let's give it like that and let's it refresh okay so it just says like by one person for everything but we're going to get the data from the back end so this is liked by one person okay but even if it's not liked by one person it says that to change this now what we want to do to come into our views.py actually actually we don't need to go into our views.py because right here we're already getting all the post object and we are sending it here so each of us we are looping through already has 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 0% say like by zero person if I like it now it says like by one person but this is say like by zero person because nobody liked it but if I say if I like it one person I dislike this zero person but 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 to use an if statement in the jungle templating sty 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 the post have no likes let's just say no likes but want to have an else if statement so we just say l if post DOT number of likes if it's equals to one and we 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 likeed by whatever people just to 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 jangle template style so we create the E statement like this and this is where we end it know in Python we just end the E statement using the indentations python already understand but since HTML the indentation don't really matter here we have to end it using the tags so now we save that if I come here and it refresh this says no likes because it doesn't have a like but this says like by one person so this that have no likes if I like it now it say like by one person another 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 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 you 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 to 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 um we're just going to go back to vs code and we're going to come into the URLs pyi 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 St Str column PK and then I can close it so now this is basically just going to have the profile page slash the user so that's going to be the link to get a user's profile page and I can take it to views do 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 DF profile request and I'll just return render request profile HTML so this profile is coming from this profile. HTML that's the template we're going to use so now to be able to go to users's profile we need to go to profile SL the username that's what we're going to do so first of all let's go go into our app and see what that is going to give us so let's say profile slash so the username goes here for now nothing is going to happen because we didn't even collect this so right here after you know specifying request 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 saved it since we collected it let's it refresh press here 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 home 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 you should see his profile image username is bio all the posts and me as the currently login user should be able to follow him we're 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 object should be equals to user doob do get username equals to PK now that we have the user object we can get the user profile using the object so user profile equals to profile dot objects. getet the one in which user is equals to user object and now that we have that we can basically pass this user profile so what we want to do first of all is to pass the 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 we're going to pass the amount of post that user have it's better we do this in a context so let's move this first of all and say context and be 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 get like the username of the user we already have that but let's just pass it if we later we might want to get we might need a data from that object later but what we really need is this Prof user profile because that's where the profile IM made the bio goes 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 equals to post doob do 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 given as the username so the one 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 user equal to PK that 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 l and we can just find the length of user post 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 use all the post of this user we can just render it here so we can also click on it you know to view that specific image what we're just going do is to come back and once we come back here now we're going to pass this and say user post and also use our post length and let's just have a comma and now we can just pass context now let's save this now 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. HTML and right here you can see that we have the username of so what we're just going to say is user profile dot user do username and if we come here and it refresh what we should see in the title is profile I 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 it refresh as you can see now we have profile I 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 going to copy this tag we're going to come down to where we have the username so let's see this is where the bio is that means the username should be up right here where we have the username name we are just going to say user profile user. username and for the bio bio goes here so right here we say user profile. bio doesn't need a user anymore any other thing so that for that and let's go ahead and check that out so now we see John and here we see user profile bio that's because we used only one we scroll down only one tag to close it so that should not be now if we H refresh we see the value of that user I am joh I am the coolest kid now let's scroll up back and let's add the profile image of John so what we need to do that is right here what we need is user profile. profile IMG let's save that and hit refresh that doesn't work because we need to say URL so whenever we're getting an image need say URL to get the specific URL of that image let's it refresh 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 already have where user can upload profile photo in the own page but this is working so we have the username profile picture the bio now want to have the amount of post we're not going to do for this followers and 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 Are 11 Post so right here what we're just going to say is come back in here now we 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 the user has two post so what we can just do here also now is to use an if statement so let's just and say if US Post length do post is equals to zero then we can just simply say no post like this just have no post and we can copy this again and we can say l if is that post equals one then we can say one post else that mean if there anything more than that then copy this and paste and we can say post now we have that so now you should say two posts with an S so we have an error so user 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 it refresh we have two posts the next thing we want to do now is this profile is this posts as you can see we just have three list of post right here but what we really want to have is the amount of post the user as then it should just show the image and when the 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 what we're just going to say I'm going to scroll down scroll all the way down to right here so you can see we have one two three just going to remove that and what we're going to to say is right here in this list going to say for I say for post in and right here we sent user post all the post and user post let's just go ahead and end our full loop right here I saying for post in user post what we want to do is just to show the URL of that image that post I'm going to remove all of these I'm going to say post dot image. URL let's save it and it refresh now we see the two post and that those images we click we click on it it still take us to this image so to do that I'm just going to copy as exactly the same thing and change it for here so let's just cancel all of that let's it refresh once we click on one it takes us to the one for that c 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 Loop 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 just meant to like pop up a model here that going to allow us to like slide through all of the images us has 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 will for sure be done with JavaScript so we should make sure we link all the JavaScript in here and we scroll here will 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 so close it right here so once we have that and it's save 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 the user uploads another one it takes us to the next one now that's what's beautiful about this time so now the feature 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 Tom to.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 high school student and I can say is located let's say in 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 liked 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 John profile the reason why I did this is because we want to be able to follow John from another Prof another account because we were logged in as John and we were viewing our own profile and later on we still going to change it that if I am logged in I 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 we're also going to add that at sometime in this video but first of all since we have this now let's go ahead en coding so we're just going to come back to PS code first thing we want to do is to create a model for this followers count so I'm going to say class and we just say followers count and say models do model and this will just take two Fields first one will be follower that's the person that is following that charfield maxor 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 maxcore length = 100 so now let's just or show person that is being followed that's the username of the person that is being follow so return s. user we can save this now and come into our Command Prompt we're just going to go ahead and opt out of the server first of all then we're going to run make migrations and then after making migrations we just want to migrate the database let python man. py migrate that's done and let's just run our server again as that is trying to run we're going to come in here and we want to register this new followers count model we want to register it in our admin panel so we have to open admin.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 gu to get the amount of people that is following a user and the amount of people that user is following so now that we have this we have this followers count let's now create a new URL now this new URL is going to so let me come back here once you click on follow the request is going to be sent to that URL to you know create or update that particular followers object let's come back here now we're going to create a new URL and this URL we can just make it we can make it follow we can say views. follow name do name follow and we can have 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 fure 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 going to just wrap this is already wrapped in a form and what we're just going to do is to have some fields and use this follow like as a submit button to trigger that to trigger that request to be sent to this follow 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 a form and since this is in a form already what we can just do is to specify the method and the action so we can see action first of all as where is this going to let's take you to follow SL and the method post whenever we're 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 apart what we want to do now first of all we want to have an input field but the type of this field want it to be hidden and and want to give it like a value of user do username 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 the currently logged in user can do it any you like this is just showing you you know multiple ways you can do it or any you feel is more secure or that you prefer to run your application or we can also do it like this might not be as secure as doing it back in 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 the 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 edden and this one is going to be user object do username this user object is this the user of this person we are viewing the profile we are viewing we're just getting a username and then this one should be user 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 the submit button we are basic click good to go because this is ready a submit button that means what when we click this button it sends these two values to/ follow now we can go to SL 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 own page so if it's a post method we're going to do what we want to do but if it's not a post method and someone just trying to access slf follow without doing anything just redirect the person to the own page so now that we have that what we want to do now is to get the follower as the person being follow know the person that is following someone else so we can say request do Post follower now let's also sa for the user and that's request the post user so since we have this details now let's first of all import that follower count 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 loging 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 loging 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 the that means this user wants to follow this to say if follower count object futter now I don't want to get one object but I explained earlier in this tutorial why we are using futter but fter the one in which follower is equals to follower and then user is equals to user then do first very important so if this exists we want to delete that so we say delete follower that'll be equals to follower count do object do get this time around since we already know that exist equals follower and user is equals to user so we're just getting the spe specific object in which this is true and once we have that I'm just going to say delete you follower 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 un follow but what if the person doesn't follow yet and is trying to really follow this user say else new follower is equals to follower count. object. create the one in which follower is equals to follower and user equals to user now we say new follower. save and we're just also going to redirect back to the page of that user now let's see all this is working now should be working now let's go ahead and test it we're going to come in here let's first come to to our models and make sure that and confirm that there is no object here 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 going to do that later and show the user that you really follow this user if we come back here and H refresh to see a new object being created so as we can see a new object wasn't created Ed from here let's see why okay it doesn't even give us an error here let's try to up 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 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 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 fter is there and we just want to delete delete that follower I'm doing that by followers count. object. getet follower follower here and then we are deleting the user right here after that we are redirecting the user to the after doing that equals account create yeah and then we are saving this one this time around and then after doing that we are redirecting the us back to page so this should totally work let's just make sure our URLs specified correctly if we come here let's see this form also works so the action is going to slash follow that works and another thing we should check we're using the csrf token we have this inputs everything should be working fine let's just go ahead and try that again now let's it refresh and just so if we over over this we're going to see if you look at the left bottom corner bottom left you're going to see that it's as is linking to SL profile slj which shouldn't be so there's like an a tag that is linking to that let's check that out if that 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 so 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 let's for that to load and we eat 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 what is wrong we just need to check so we have an a tag need this title just clearing our code and then in there we have this button this button with you type submit the style and there's the Border also so everything seems to be working and this button should let's see let's it 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 linked 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 now that we don't have the data it just isn't working 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 report the class basically what is wrong is the type is meant to be submit and not button let's just try that out again 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 it refresh good so now we can see that we have a new object follower is Tom and the user is John that mean Tom is following that is what we want 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 us that this user have now to do that I'm 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 it refresh that's gone now I said we want to get the amount of followers and 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 US has followed this user we want we don't want to show follow again 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 unfollow this user now and another thing 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 set his up now let's do that first of all let's make sure that if this user is himself it should not be seeing the the follow button so we're going to come back in here what we're going to do we're going to say come back right here so no not here index as profile if the user object do username so if the user object the username is just equals to user do username that mean if is equals 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 we've ended the if tag and now what we want to do just to say instead of this button going to be a button also what we're going to do is to copy this paste it here and and it's not going to have a type button and this a tag is going to have where it's link to and that should be SL settings save that now if we come in here and is refresh only seeing this follow button because we are viewing the profile page of another user but we logged in as Tom now if we view 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 over over this just brings us back to this page let's make sure that it's working well if you look at the bottom left corner we see that it's supposed to link to account settings so yeah so if we come back here now what we can just do is to basically make sure all right so we don't need this going to come here no not for here it's for the account settings don't need a button we 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 we 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 going to 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 where we go to Tom that's how Tom's own 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 it to unfollow 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 do user do username that the person that is following and user is equals to PK so now that we have this two what we can just say is if follower count doob do filter follower equals to follower and user equals to user 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 unfollow else want 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 have those fi and if there is that means the user is already following that user so we want to unfollow if not should follow so now that we have this we can save it come into profile what we want to do now is right here where we have follow we want to remove that now and put button text so this button text now is dynamic is either it changes the text to whatever is basically in our database adj just 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 we refresh this page that still there so let's fresh unfollow 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 and right here I'm going to say user followers should be equals to followers followers counts Doob futter the one in which user is equals to PK what we are doing is that we are getting this followers count model and we filtering only the one in which the user now this user is the person that being followed so we're saying the one in which the user it goes 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 let's back come back to views want to do exactly the same thing and changes to user following and now followers counts ob. futter the one in which the follower equals to PK now we have all of this let's also pass it in this context and 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 just do now this 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 local error at profile John blah blah blah it doesn't work what we just want to do come in here but we need to make sure where the area is coming from so it's coming from user followers right here so it says is assigned for use what we can just do back to views okay so it's because all of this we put it inside the else indentation so inside the else block that's why if we're having it in the El's block we're supposed to have it in the BL 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 if is zero follower it shouldn't have an S so let 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 going to go to where we have this followers let just dist it from user following so now we're going to say if followers now if user follow us is equals to zero or user followers equals to one and if is equals to 0 or one we just say follower so zero follower or one follower else so 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 it 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 that means I am following one person if I come to my account now I see that my following is one I am following one person so that is basically what we have achieved this profile 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 followers are following we made this the text in here Dynamics so user is following already that should be unfollow or 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 post we're able to see all the post 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 post we have in our database that's what is showing 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 op poost 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 post 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 so right here it should take us to slash profile slash post. user so we can just copy that we can just search for the other post. user three right here now if we refresh this should be able to go to the that's good and we are following this user so now let's just go back to the homepage and right now we're 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 list first of all we say user 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 but it to contain like the list we're going to con we're going to first query the database to get only the post of the persons that the user is following and then that's going to 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 follower count do object filter we are just getting all the users the objects of all the users that the user is following say the one in which the follower equals to request do user do username that's the user following and we use a follow and say for users in user following what we just want to do is to say user following list want to append the username of each of everybody the user is following so we say user following. append users do user and that's is good so now we want to append to the feed list so we say for usern names in the user following list that we have now the feed lists should be equals to post doob filter the one in which the user is equals to the usern names and let's just say feed do append now I want to append to 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 spe list let without an S now because this is a new variable on its own it be equals to now we're going to use a function that we need to import so we're going to say from to 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 feed because what we want to do right now is to now convert this feed to a list 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 list chain and in there we have an aeric 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 what we can just send bid list now if I come here and H refresh we make sure our server is running so that that's done let me come here and E fresh and let's see what we see we still see this and the why we see this is because this user is following John so what we're going to do now first of all as stor let me choose a file I want to upload an image as to what I'm just going to do is put an image put in a caption I'm going to log out and log in as John then I'm going to follow Tom then what you're going to see is that I don't see the images of John which is myself image I see now is of to 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 go to my profile but I'm going to log out now and log in as John now that I log in as has join and I H 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 SL profile SLT you can see Tom has one post if I follow Tom now and I go to home you now see that I'm able to see the posts of Tom so this is a very good picture so 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 cuz I'm not following anybody once I follow John and go back home I see John's post so this is what I want right now we want to have a unique picture which is going to be uh downloading fixure this means that a user is going to be able to download the image he sees on someone's post like see his 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 picture 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 the it SC down no it's 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 going to do now is search search for where we have SVG image it 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 do image URL but we don't just want it to go there because right now if I save this and it refresh if I try to click on this what it's just going to do is going to take me to that URL I want it to download that URL for me without even going away from this page very easy with HTML you 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 going to see that it's going to download that image from as you can see at the top 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 going to open that in a new tab and that is downloaded so that's just a picture I wanted to add thought it was cool and let's move on with the project now what I 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 enter or press the search button and then the 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 so let's fix that first of all in the UI we're going to 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 here 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 hub link so don't need to worry about that now what we need to do is to come into index. HTML and right here actually where we we have Ed in we want to have a form and then we are just going to close the form so we should be able to have a form here before left side yeah and close the form somewhere around SC down here right here now that we have that done next thing we want to do is to come into the fields so if we scroll right here see that we have this type of text want to give it a name of username and since we 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 what we want to have is search 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 not need any of this and what we can just do is to say button type go 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 de tag we don't want this to be in this diff tag just so it w affect this want it to be like outside that box of this Ed because if it's in that D tag the changes we 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 is basically just the same thing once I run this search. HTML you see that it's very the Eder right here is very similar to the other of the index HTML but 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 just going to link CSS just scroll up and right here paste so now that that is done if we come here and H refresh we should see that we can search for something and we can hit here to sub if I I come in here now and as I said if I don't remove this from this G tag and I hit refresh now you see it's just not looking well that's why I remove that from the D side having that said let's also leave a space right here let's have and nbsp hold on copy that paste 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 I want the action to go to the search SL search want this action to go to/ search and with a method of post and once we 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 we say search going to come in here and create a new view search then render request search HTML so we can save that let's also give it this login required save that also now let's make sure that our app Rel successfully once it reload successfully test it out come back in here now hit refresh if I search for Jo and I search it takes me to this SL search page and now just sh search that HTML as you can see it's not really showing any result now it's just showing this this dummy data or this static data that we put in the search. HTML but now what I want to do is that it should show a result that's correlating to whatever the user search now first to do this we're going to have to come into this views.py we're going to have to get the username that the user send so whatever the user input we need to get it here to save request the method equals to post if a post method we say request 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 search just send the back that page what we want to do now say we're going to get the user object so this is just because right here we can see it says welcome Tom which is good but right here it doesn't show the profile so if we go back to the homage it shows the profile of the user we also wanted to show the profile we are just going to say user object equals to user doobs do get the one in which the username is equals to request user do username and this doesn't really correlate with the search from 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 US user profile be equals to profile object do get one in which the user equals to user your object now if I pass this to the HTML so right here what I want to pass is user profile not user object I come back here now andresh now you see that it shows update that so that is taken care of now back to searching so if the method is equals to post get the username and then we get the we say user name object and that will be user do object filter one which the username I contains equals usern name what this is doing is that we're 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 if the user search for Toom then what it's going to do is that he going to go into our database look for any user in which to is in the username and it's going to return that into this variable now that we have that let's first specify two empty list so say username _ profile we have the object let's get the profile the username uncore profile uncore list now remember that we have to convert it to a list let's just have that also as a blank list now we say for users in username object user name profile we say here right here username profile append what we want to append is so what we are doing is for users in username object we say username profile. append each of these user ID so I want to get this one using the ID this time around so now I want to say append users. ID now that we have their ID will say four IDs in name profile that's each of the ID that we get we now say profile list should be equals to profile object filter one which ID user equals to IDs so the one in which the ID user if come into our models we go to profile we see that we have a few Name ID user which is the ID of the specific user which which is beinged about or used right here right here we have ID user equals to ID and say user name _ profile _ 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 around converted so we say list chain and then Asic Asic of the username profile this this should be profile of the username profile list like this so now that we have this what we can just do is take it into like this we're taking it into search. HTML so we're taking it as username profile list we have that we can just simply come here into search. HTML now we're going to scroll down we're going to Loop through that datab what we're going to do is we're going to scroll down and when we scroll down actually is in a section right here so we're going to say four let's say user that's in username profile list let's end the for Loop immediately after that session is closed so end four now that we end that for can now use this to customize it so what we want to do now is to get the profile image so we say users that's profile I mg. URL and then want to get the username say users get the username do user name so come into profile mods actually if we come into these models we have to say user user we can just do right now is to say users user and after that we're going to do the same thing for location say 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 slash user that's 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 own page right here now let's search for J once we search for that so it say ion for Chi join permitted so if we come in here it should be I contains with an S let's just close that now let's try that again now let's say J boom so as you can see now it says John Toronto I am joined so it just shows us the bio the profile image good and we can go to the profile of that person now let's search for like Tom now we can see we have Tom 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 JN and now it just shows us that we have one username John this is what we want to do now last picture we want to add is the suggestions picture so this right here has been with us since 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 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 it will 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 just come here let me give it like a comment and say user suggestion start now first of all I want to get all the users in this platform on this platform I'll say user doob 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 right here so I'll say for user in user following user uncore list equals to user doob do get one in which username equals to this user do user now we can also say user following following uncore all append user list so now that we have this what we can just do now is to say new suggestion list so what we want to suggest now is the people that this user is not already following the new suggestions list now equals to now this is going to be in a list but in here we're going to like a for Loop so it's like a specific Style say x for X in list all users we just converting this all users query set into a list so and then we 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 have already guess where we what this is so this is the suggestion list so he looping through the list of all the users and saying if this list is not in this list then that is the new list so is just getting all the list of the users We are following and removing it from all the users on the platform so now that we have that the next thing we want to do is to remove the the current user from this list because what we have now in this new suggestion list is all the old users on the platform that we are not following and as you know we can't follow ourself that means we also part of the suggestion list and we can't suggest ourself to our can't 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 uncore user should be equals to user object filter username was request do user do username and we now let's have like a list but like for the final suggestion so let me see let's name me final uncore suggestions uncore list now should be equals to X for X in list but now in New suggestions list that is not current user and we just say if x not in list and what we just say is current user current user so we just saying that this current user must not be in that list so it's basically eliminating current user from that list and then what we can just do to make sure that all of the is in square brackets is a list so on square brackets as closed right there now that we have this what we can just do since we have this final suggestion list 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 here want to get like five so if we just get like the first five or something that means that's the same thing that just going to show only those people are going to be suggested what we want to do is to show for 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 to do that first of all have to import random from here we say import random and then right here now after this what we can just say is to say random do Shuffle this final suggestion l so want to shuffle this final suggestion list once is shuffled what we want to get is the final like just five from that list five from that sh food 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 or 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 _ profile equals to empty then username your profile your list empty also and we just do similar technique to what we did in the search so say users in final suggestions list each of the users then we say username profile append users. ID do ID now that we have that I cannot save for IDs in username _ profile we say profile underscore list equals to profile doob filter idore user equals to IDs now that we have that we can say user name _ profile doore list uncore list append profile uncore so now we have this what we can just say is let have a new list and says suggestions underscore username underscore profile underscore list so the suggestions the username profile list goes to list we have to use AIC sign here say username profile list so this is what we need to do now that we have the is we can just pass that into if I come here now copy this this is this is the final list is being shuffled and everything what I can just do now is to says is profile list that's weird name and give it that but we get only first four that's how to just get the first four and then we save it 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 SC so we want to Let's search actually let's search for let's move to let's just move down instead of searching so that's all the way down because what we're looking for is these users you can follow so 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 fres and right here and see for suggestion in usern name Prof what we want to do with each of these suggestion first of all let's Okay so what we 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 U we do exactly the same thing here now that is good if I H save and press refresh I'm just going to see this four times so it says list is not colable so let's come back here and what we just need to do is right here this doesn't need the two really braces just need one for this and one to close this now we save it and then we go back here and eat refresh let me show 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 section do user I'm going to save it and then right here I'm going to eat refresh so still the same thing what I'm going to do is to come here and then unfollow John now that I am not following John I go back home H Refresh on this home 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 SL profile slash John let me follow John once I come here it doesn't recommend anybody cuz 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 can just say I don't know Tammy D g.co your password sign up so is in I am Tammy 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 Tammy and you can see that Tammy is being recommended John and Tom because she isn't following any of those users but we're also going to change this to the profile image of the user and this followers are just going to put like the bio or something so for now let's just log out again and create like two more accounts so let's just say Henry HR g.co and there have password and let's wait for that to create we remove that let's say a I am enry and you should know that let say new here he and we can save that and go to the own page and now is been recommended Tom Tammy and John so let's just go back log out create a new account now let's just create Jasper J g.co let's give it a password submit and now let just say jper here and let's say I'm from La so now let's just save that and go to home so it's been recommended enry John Tammy and Tom so one thing is if I refresh this you see it's random now Tammy is on top if we have a bunch of people like 100 people it's just going to be picking them randomly so now let me log out and log in back as Tom now you see that I'm been recommended three people recommended Jasper Tammy and Henry now let me go back and finish that up so right here in suggestion. user let's change this to suggestion do bio and also where we have this follow want it to be view user to take them to the the profile page of the user and then once it take 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 imgurl and can going to slpr file SL suggestion. user so now let's save this come here and hit refresh good now as you can see we have this hry hry and you should know that we have Jasper Jasper here we have tamy Tammy I'm from the UK so we have all this good we can go ahead and view Henry it doesn't have no follow and no post doesn't have anything but we can support him and follow him and now that we following name if we come to home we don't see hry there again we are only being recommended these two people but now if hry creates a new post we're going to see hry post right here now we've been successfully able to add this suggestions right here so this very simple and basic algorithm built right here I hope you understood everything we did to this point we're pretty much done with this project so let's just go like at the project like give you a final review I just recap on everything we've done so right now you can see it suggest me to follow a user name Jasper added this picture where it just suggest us random users if I follow Jasper now now we has one follower we add also added this followers and following style so now if I go home it doesn't suggest me Jasper again and it also shows me the post of the users that I'm following so if jaspa that I just followed if it 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 like it to like by one person now if you like it no likes and we can also click on this John and then it's going to take us to the profile page of John and we can follow or unfollow him going to 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 home and we can also use this search functionality like we know we have John so let's say we are looking for John and we just SE j h search now you see that it brings us John gives us the location and this bio so if we click on that we're going to see profile and we also added this where user can upload a pic and choose the file and the caption right here we also have this account settings can change his profile picture change his bio update is so this is a basic work through of everything that we did in this video in this course so there is 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 video you can customize it and also add your own features you know if you want to do the comments or you want to do anything you want to do I hope with what you've learned you can be able to do thank you for watching or taking this course and finishing up to this point thank you so much