How to follow users in Django | follow users like on Twitter

hi guys this is luke and in this video we are going to create a follow functionality as an addition to the social network project in django available here on the channel so if you are new here consider subscribing and now a few words on what we are going to do in this tutorial so we are going to create a separate project with two applications profiles and posts and we can simply follow a profile and that would mean that we will also see the profiles post so the biggest challenge will be to merge the query sets of all the profiles that we are following and put them in the right order okay so without further ado let's get started all right guys so this is how the final project looks like so as you can see we didn't care too much about the styling the most important part is the functionalities themselves okay so here we have a button of people to follow here is who we are following so we are following test user 3 and we can see the posts of test user three and of course we can see the posts that we written down ourselves so if i go to people to follow i'll select test user three and okay i'm following test user free i'll select test user 2 and i press follow here we will get a model and once i press yes i will be following test user 2. so right now i'm going to head over to the posts and as you can see right now i have also test user two uh posts on the list okay and the order is by the created date so the newest posts will appear at the top and the oldest one at the bottom so this is exactly what we are going to create and before we begin i just want to mention that the idea of this tutorial came from yoxel i hope i'm pronouncing your name correctly i also hope you are watching because i just want to say thank you for all the support i really really appreciate it thanks again alright guys so before we get started let's have a short overview on what have i done so far so i started a django project called follow proj and i also created two applications posts and profiles and finally i created a super user i didn't do anything else so let me jump into follow approach settings py file and over here let's add our posts and profiles to the installed apps lists so posts and profiles pro files all right and now let's scroll down again and let's provide for django some informations about the template so i'm going to borrow the code from databases and put it into templates dears all right so let's put in templates and now let's create this templates folder inside the src directory okay so let's put it over here templates and here we will keep our base html okay so other templates will inherit from this base html and we won't be using any static or media files for this project so we can leave this as it is so let's save this and let's jump directly into profiles and to the models py file over here we will define a new class called profile which inherits from models dot model it will be a simplified class with user field this will be models one two one field two the user we need to import our user model so from django contrib auth and then models we want to import the user model and put it over here and then on delete let's put in models cascade okay so whenever a user gets deleted the profile will get deleted as well okay then let's add a following and this will be a models many to many field with the user again so let's also provide a related name and it will be also following and let's set blank is equal to true okay so this field is optional that means uh basically that we don't need to have any following users in order to create a profile instance and this is exactly what we want then let's also provide a bio we will see if we need this field or not this will be a text field and maybe we can set the default value to no bio all right and finally let's add update it and create it so first of all models date time field with out to now is equal to true and then created and this will be models date time field auto now add is equal to true okay and let's also create a method inside this class that will give us all the profiles posts of this particular user so we don't have the posts model created yet but we can put in a method so we don't forget about it i'm just going to put in profiles posts and this will take himself and let's write down pass for now and then we will have a string representation which also takes in self and let's return str and we want to maybe return self user username okay also what we can do is to provide a class meta and with the class meta we will set the ordering of our profiles uh in relation to the created fields so we want to have the newest profiles at the top and the older ones down below so we can just write minus created and then comma because this is a tuple okay so um this is it for the profile we can go ahead and save this and now let's jump into the posts and let's create a post class okay so we need to jump into models py again let's create class post which also inherits from models.model and over here we will have an outer of the post field so this is going to be a model's foreign key to the profile so from profiles models we want to import our profile and put it over here and also let's specify on delete is equal to models cascade okay and then the body will be models text field and also let's just uh copy and paste the updated and create it so i'm just going to copy it and put it over here and then with and then let's also provide the string representation so str self return and let's maybe refer to the body field so i'm just going to put in str self body and let's limit it to 30 characters okay and also we can put in a class meta and set the ordering to be minus created all right so now let's register both models in the admin i will begin this time from the posts so let's jump into the admin from dot models import post and admin site register post okay and let's jump into the profiles admin from dot models import profile and then admin site register profile perfect so now let's save this let's jump to the terminal python manage py make migrations python manage py migrate and python manage py run server okay here is a confirmation that django has been successfully installed let's go to the admin and here are our profiles and posts so i'm going to add a profile for the super user that i created and in a second we are going to set the signals so that the profile will be created automatically okay so right now i'm going to save this and let's go back to the profiles application because here we need to have another file called signals py and if you don't know how signals work please go ahead and check out my video here on the channel on signals for beginners in django and if you know signals maybe from my django social network project please pause the video and try to configure the signal on your own so we will be using post safe signal the sender will be the user the receiver will be the profile and based on the user we are going to create a profile instance so i'm going to type the code right now if you want to follow along we need to begin from the import so from django db dot models signals we want to import post save and then from django dispatch we are going to import the receiver decorator and also we will need to have our profile so from dot models we want to import profile and also we will need the user so from django contrib auth models we want to import the user okay so let's use the receiver decorator down below we need to pass in the type of signal and specify who is the sender the sender is the user then let's write a function called post save create profile the name is actually up to you over here i'm just going to put in the sender the instance and the created as well as keyword arguments and we can ask if created so if the user is created we are going to create a profile so profile objects create where the user is going to be the instance that we get over here okay so sender is the user the instance is the instance of the user the created is a boolean value that returns either true or false if it's created that means that the user has been created for the very first time and this returns true and then we are creating a profile so now we can go ahead and save this and now we need to head over to the apps we need to put in this profiles config class ready method which takes itself and here we are going to import profiles signals okay and if you're not familiar about the ready method and what we are going to do next i strongly recommend to check out the signals tutorial again available on the channel so i'm going to go now to save the apps py file copy the profiles config and i'm going to head over to the init here we are going to set the default app config to be equal and then we go to profiles apps and we need to put in this profiles config class right so now i'm going to save this hopefully we didn't make any us mistakes so let's take a look at the signals post save sender instance created profiles object create let's also take a look at the apps already you know i think everything should be okay so what i'm going to do next is go to the home and go to the users and i'm going to add a test user set a password save save and let's go to the profiles and here is our test user profile perfect we can now go back to our profiles to the models py file and finish this method so what we need to return is self and then post set all okay we are dealing with a reverse relationship okay so here we don't have posts anywhere but if we take a look at posts in the models py file here we have a relationship to the profile so we we need to either specify a related name or we can simply go to our models py file in the profiles and write down post sets so this is the name of the model where we are dealing with the reverse relationship in our case this is the post because in the post we have this relationship back to our profile and we need to put in set and then write down all and this will give us all the posts for a particular profile instance all right so now we can go ahead and save this and jump into the views py file here we are going to create a profile list view so we will be using class-based views for this so from django views generic we want to import a list view and we will be also using a detail view so i'm going to import this as well so down below let's put in a class called profile list view and this will inherit from the list view so what we need to specify over here is the model so we need to import our profile from dot models import profile and put it over here then what we want to do is to specify the template name we don't have templates folder just yet we don't have even our base html just yet but we will do this in just a second but the template name will be profiles as the directory where the main html file will be kept and also we can specify the context object name and set it to profiles because the default vari value is object list and we are changing it to profiles so later we are going to loop through the profiles in our template and if we wouldn't put this context object name we would have to loop through object list as default all right so one more thing that we need to do is to specify a query set because we want to see all the profiles that we can simply follow so we would like to exclude ourselves and if you took the django social network project you will probably know how to do this so in case you don't i'm going to do it by overriding the get query set method and i'm going to put in self and then simply return profile objects all and we want to exclude by the user which we will set to self request dot user so we are getting all the profiles excluding the user that is logged in and that is us okay so this will give all the profiles but not our profile as the next step let's set up the template so in the main templates folder i'm going to create a file called base html and we are going to use the base html for the social network project so in the description you will find a link to the blog i'm just going to copy this code put it over here and then we will change the name to follow project and also we won't be using custom js and we won't be using custom css that means we won't be using actually static files as mentioned before we aren't using in this project static and media files okay so we will do things a little bit differently we will use the block scripts in order to put in javascript for the model and we will do some styling directly with the use of style okay so you'll put in style and for example background color set to red okay so this is what we are going to do this is in order to save some time i don't want this tutorial to be too long okay so this is what we are going to do uh all right so now we have our base html set up i'm going to save this i also forgot to save the views py and let's jump into the profiles because over here we are going to create a templates folder inside the templates folder we will create another one called the same as our app name so profiles and inside the profiles we are we are going to create this main html so main html and over here we can write down extends base html okay so we are now inheriting from base html and then block title and here we are just going to put in uh profiles to follow and then we will put in a block content and here we are going to set a loop so for profile in profiles we can do this because in the views py we specified that the context object name should be profiles we want to get the profile okay so we want to display the profile all right so i'm going to save this and then in the profiles i'm going to create another file called called urls py and here let's import path so from django urls we want to import path and then from dot views we want to import our profile list view set the app name to profiles and let's open up the url patterns and let's register the path as the main path and let's put in profiles list view as view because this is a class based view and let's set the name to profile list view all right so now we need to include those url patterns in our main urls py file in our main project folder so let's go to urls we need to import include and below the admin i'm going to set a new path to the profiles and we want to include profiles dot urls and set the namespace to be equal profiles okay so now let's save this and let's see if this is working so i'm going to head over to profiles and something is wrong [Music] the server is reloading let's try it out again profiles and here we have test user because we excluded ourselves so if we go back to our views py file and comment out this get query set and go back we will see our user as well okay so right now i'm going to bring this back in save this and refresh so right now we have only the test user so maybe let's add another one i'm going to head over to home and then users and let's create a test user too set the password save save and let's create another one test user 3 save and save and then let's refresh and here we have test user three test user to test user so as you can see the order is from the newest to the oldest and what we can do next is to simply style this main html a little bit so in our loop let's add a div class equal to ui segment this will give us a card effect let's close up the div over here let's indent this and let's add a break line and down below let's add a button let's add a class ui primary button so this will be a blue button c profile and let's close off the button okay so now let's save this let's go back refresh and here are the profiles so once we click the c profile button we should actually be redirected to this particular user's profile and let's do this right now so we need to go back to our views py file and below we will create another class called profile detail view which inherits from the detail view okay let's specify the model to be equal profile and let's also set the template name to be equal profiles slash detail html okay and now let's save this because we need to do some configuration in the urls py and we will return to this profile detail view in just a second so i'm going to also import our profile detail view and i'm going to register it down below with the path where we are going to pass in the primary key of the particular user and here let's put in profile detail view as view and let's set the name to profile detail view all right so let's save this let's create the detail html so in the templates detail html this will also inherit from base html let's set the block title to be equal profile detail and the block content let's just put in in the blog content the object itself okay so i'm going to save this and right now i'm going to go back to main html and add a link to this so ahref and we will use url so we need to specify the application name firms first and then where do we want to go we want to go to the profile detail view in this profiles application and the argument is going to be the profile because we are in a loop pk okay let's close it off let's save this and let's test this out so i'm going to hit refresh see profile test user free test user 2 and test user okay so everything is working so we can now continue working on our views because we want to determine if in the profile detail view we want to see the follow button or unfollow button okay so if we are following this test user free we want to see a unfollow button if we are not following this test user 3 we want to see a follow button so this is the logic that we need to apply and this is going to be very similar to the like button the difference is the biggest difference is that we did function views for the like button and the django social network project or in the like button tutorial and here we will do it with the use of class based views so let's write get object we are going to get our profile with this method so this takes in self and keyword arcs and let's set a variable called pk and this is going to be self q or darks get and we are getting our primary key okay based on the primary key and if you are wondering how we can get it well we have it in the urls py we are passing this primary key in order to go to the profile detail view so we can write down pk is equal to self quarks get pk and once we have pk it's very easy we can set a new variable called view profile for example and this is going to be profile objects get by the primary key so we are setting primary key to this primary key over here and finally we just need to return view profile and right now what we need to do is to define another another method called get context data and with this get context data we are going to pass some variables to the templates okay we are going to set a key and a value and we can with this method then use this key in our template so what we need to do first is to get two profiles the one that we are viewing so this is going to be this one and our profile so let's do this i'm going to set view profile to be equal self get object and then over here i'm going to write down my profile and this is going to be profile objects get user is equal to self request dot user all right and what we can do is to simply write an if statement if view profile in my profile following so we are referring to the many-to-many field all then what we need to do is to set follow equal to true and this follow will be passed with the context so we will know either to display the follow button or on unfollow button okay so we are setting follow is equal to true and in other case we are setting follow equal to false and with the context we can pass in as the key follow the value follow all right so now what we can do is to go to our detail html put in a break line and add follow let's save this hit refresh we have false and here we have false as well and here we have false as well so let's actually follow this test user with the use of django admin so i'm going to head over to our profiles i'm going to grab my profile and i'm going to add the test user to the following list i'm going to hit save and then i'm going to refresh this and i'm still let's check it out i should be seeing test user equal to true but i'm apparently not so something is wrong and if we go to the views the problem over here is that the view profile is actually a profile okay here we are getting the profile and if we take a look at our models py file the following field is a many-to-many field to the user so if we want to fix this we just simply need to add dot user and now if i'm going to save this hit refresh we see true okay so this problem has been solved and we can work a little bit on styling this detail html so let's do this right away at the top let's add a div class equal to ui grid actually i'm going to remove this for now this object nbr let's close off the div let's create another div inside called row and let's do a split so diff class is equal to i'm going to explain this in just a second if you don't know this four white column and then let's close off the div over here and also let's add another one i'm just going to copy this actually and paste it below semantic ey uses a 16 column system so over here we need to put in 12 and i'm going to put in test and test 2. i'm going to save this refresh and now we see test and test two so we did a split here we have a four white column system and here we have a 12 white column system okay so this is basically what we have done and let's work on the four white column system first on this diff so i'm going to put in here the object and then i'm going to add a horizontal line and finally i'm going to ask if follow so if follow is equal to true and if this is the case we are going to display a form with a particular action for now it will be blank and the method will be set to post and since we are dealing with a post request let's add a csrf token and we are going to put an input input type equal to hidden let's say set the name to profile pk because we are going to send the profile pk to another view that we are going to create that will handle the follow unfollow functionality for us okay so over here i'm going to put in value and we can put in object pk so we are sending with this input type hidden the object pk and we will grab it by the name profile pk and then we need to have a button type submit to send the data and it will be a class equal to ui negative button and here we will put in follow why on follow because follow is equal to true that means we are already following this user so we can't follow him again what we can do is simply unfollow so this is how it works i'm going to close up the form and in other case we are going to have a button with a certain id and this is going to be follow btn and th this button will simply give us the model that we a model after clicking this button button will appear and we will have some kind of a confirmation message do you want to follow this user and if we press yes then this user will simply be added to our following list okay so here let's continue working on this button we have the id let's specify the class and the class will be set to ui positive button and let's put in follow all right here in this 12 white column we will have the posts so we will take care of this right now so we can set a loop for post in object profiles posts so we are referring right now to this particular method okay and we can have another div class equal to ui segment and let's close it off over here and let's put in post body alright so um right now what we need to do to finish this template is to add a modal moto all right so we will be using one of the semantic uis models that is ready and we will just modify it a little bit so let's go to this link you can find it in the description it's basically semantic ui.com and you need to go to models and underneath the models you will find a model and here are some examples and we will use this basic one it looks kind of nice so let's apply it here is the code if you press on the view source and let's just copy this and bring it in over here underneath the comment so we have this div class ui model and let's because right now we have this archive icon and of course we don't want to use an archive icon let's put in a user plus icon user plus icon and here we can ask are you sure you want to follow and then let's put in the object okay and here we can put in by clicking yes you will see all the posts published by the object all right and let's remove the no button we won't need it and let's adjust this green button because the button itself won't be enough we will need a form so what i'm going to do over here is to put a form form action and again we will fill out the action in just a second the method will be set to post again and then let's put in a csrf token and let's also put an input type hidden exactly as over here so i'm just going to copy this and paste it down here and then this has to be turned into a button so let's do it right away and we need to have a type equal to submit so now we have a submit button with ui green okay inverted i'm just going to change the inverted to massive and basically this is it i think let's just indent this okay so um let's also don't forget to close up the form and this should work however we won't be able to see the model itself so let's hit refresh and right now we have this unfollow so let's actually go to test user free for example where we see the follow button but it doesn't do anything and this is because we need to apply on this script over here so what i'm going to do is to simply copy it go down at the end of the file and create here or retrieve the block scripts from our base html and here we will do a little bit of jquery okay and let's put in document ready once the document is loaded we want to have this but this won't give us the actual result that we want to achieve we have to write down we have to refer to this follow button so let's write follow button and if we click on this button we want to see the model so this is basically what is happening and let's hope this will work ah come on all right i'm going to save this go back refresh follow and there it is so here is our model and if we click anywhere it will be gone so what we need to do next right now is to style this a little bit so i'm going to head over to the model and here i'm going to write down style and do some styling from here so i'm going to set the position top 100 pixels and i'm going to add a height of um of 400 pixels let's save this let's refresh follow and this looks much much better maybe let's change 100 to 200 refresh and i think this is okay so um now let's take a look take care of this uh follow on follow functionality so we need to create one view for the yes button and for the on follow button so this will be a function view and we need to apply it in the views py so maybe at the top let's create a function view called follow unfollow profile and this takes in a request and the first thing that we need to do is to write down if request method is equal to post and in this case we want to grab our profile so my profile is going to be equal profile objects get by the user which is going to be request dot user and then we want to get the primary key so this is what we are going to receive from the input type hidden and the p we can do it by writing request post get and we need to put in the name so we we've set it profile pk so if we take a look at our detail html here we have input type hidden profile pk and in this form we have profile pk as well all right so let's go back here is our primary key so we can get the actual object by writing profile objects and then get by the pk so pk is equal to this pk over here and now we can simply ask if obj user in my profile following all and if this is the case we want to remove this obj user from the following list okay because he's already he or she is already in there so my profile and then following remove and we want to remove the obj.user and in another case we want to add to my profile following this particular user so obj.user and we want to stay on the same page so we need to write down return redirect and before we do that let's import redirect return redirect and then request meta get and then http referrer right and in other case if we are not dealing with the post request and we want to access this particular path that we are going to define in just a second in our urls py we want to be redirected to the profiles list so let's write return redirect and profiles and then profile list view okay so i'm just going to double check if this is the name this is the name okay so uh basically we can now register this view in the urls py file so let's do this right away and we need to begin from the import so follow on follow profile and then here we can set a new path and this is going to be simply switch follow and let's pass in this follow on follow profile and let's set the name to follow unfollow view and let's add a comma and now i'm going to copy this follow on follow view i'm going to save the urls py and i'm going to go back to the detail html and fill out the action so here i'm going to put in url and profiles as the app name and then follow on follow view and i'm just going to copy this and put it also and model so here we have another form action and yeah we can actually save this and test this out so i'm going to hit refresh follow are you sure you want to follow test user free yes and we have unfollow unfollow and we have we see follow again so this is working so now let's go to the django admin and let's create some posts so as you can see we have no posts um created so let's change this and i'm going to select my user and i'm going to put here my first post then i'm going to save and add another one and i'm going to select test user and here i'm going to write down hello world from test user i'm going to save and add another one i'm going to select this time test user 2. and here i'm just going to put in hi there my name is test user 2 save and add another one and let's put in test user free [Music] goodbye my friends test user 3 and let's save this so i'm going to go back refresh and here we have goodbye my friends test user 3 so this is working let's go to the profiles let's see test user two here we have hi there my name is test user two and test user hello from test user and here we have follow of this test user so we can simply unfollow him follow him you know that this is working right now okay so right now i think we can jump into our posts we haven't created anything just yet so let's start working on the most challenging part that is to simply display the posts of the profiles that we are following and including our own posts okay so for this we are going to write another function view that i'm going to call posts of following profiles and this will take in a request let's return render and then request will be the first argument that we are passing then we need to specify the path to our template so let's put in posts main html and here we will have a dictionary for passing something to this main html so we will fill it out uh in a few minutes all right so actually let's create this main html we need to go to posts put in a templates folder inside the templates folder let's create another one called posts and inside the posts let's put this main html and here we need to inherit from base html and let's set the block title and block content so the title will be i don't know dashboard or main posts and the blog content yeah let's for now put in simply posts okay so i'm going to save this main html i'm going to also save the views py and i'm going to create another file called urls py so here let's put in let's import path so from django urls import path and let's import our view from dot views we want to import follow on why aren't we our posts of following profiles okay posts of following profiles that's the name and then let's specify the app name set to posts and let's open up the url patterns let's put it as the main path for this application posts of following profiles and the name will be posts let's put in posts follow view okay so now we need to include this in the main url patterns so i'm going to save this and i'm going to head over to our main project folder copy this and below let's paste paste this with some changes so here we will have posts and then not profiles but posts and here posts as well okay so now let's go to posts i'm going i already saved the urls py so let's go to posts and here we see posts all right so let's go back let's open up the views py file again and let's start working on the logic i'm going to write some comments because this part is a little bit more complicated than the things that we've done so far so first of all we want to get the locked in user profile and we can do it by setting up a variable called profile and this is just going to be profile objects and of course we don't have profiles so we need to import it from profiles dot models we want to import profile okay so now profile objects get and we want to set the user to be the request dot user so we are getting the user by their user field and we are assigning request.user all right then we need to check who we are following so let's write this comment check who we are following and we can do this with the use of list comprehension so i'm going to put to put in users and we can write down user for user in profile following all so we are referring to the following which is a many-to-many field and in the many too many field we are storing users so this is why user for user in profile following call this gives us all the users that we are following okay the next step will be to set some initial variables or initial state for some variables that will be helpful in the next step so i'm just going to put in initial values for variables and we need to have a post list initially it will be empty and the qs which is going to be set initially to none and then we want to get the posts of people who we simply follow so let's write down get the posts of people who we are following and we see we have the users list over here we got it with the use of list comprehension so we can write down for you as a user in users and let's set another variable called p and this is going to be the profile of this particular user because here we are we are dealing with the users and we will need the profile of the users that we are following so let's write down profile objects get and we want to get by the user and set it to you and now we can write down profile posts or maybe p posts variable and this is going to be p and then posts set all so we are grabbing all the posts of the particular profile okay and finally we want to append those posts this query set into our posts list so we can do it very easily by writing posts append and then we can put in this this uh variable over here p posts so uh yeah this will give us some result unfortunately we aren't done just yet so here we are installing storing in this list the uh all the posts of the users that we are following we also shouldn't forget about our posts so let's put in our posts and here i'm just going to create another variable called my posts and this is going to be profile and then post set all or yeah we can actually if we go to the profiles in the modals py we have this profiles post which gives us exactly this so we could use this profile post so maybe i can actually take this and go back to the views and here instead of post said all i'm going to use profile posts so my posts are going to be profile profile posts and we want to append them to the list as well okay posts and then append and we want to append the uh my posts all right so maybe we can have a look at what do we have so far so what i'm going to do is to put in over here a key post and assign value of posts so i'm going to save this and let's head over to the main html and here let's display what we have so far i'm going to save this refresh and we have query set instance of hello world from test user and post my first post so if we take a look in the admin we should be following test user and we also see our post because we added our posts if we go to the views to the post list okay so this is our post this is the post of test user and let's go to the admin let's head over to the profiles and um we are following test user so this is okay and if we head over to the posts my first post is the is created by my user so everything is fine if i go to profiles i can see a particular profile follow this particular profile and then go back to posts and we have also goodbye my friend test user free the problem right now is one of the problems right now the biggest problem right now is that if we do it like this we won't have any specific order we would like to see the posts not by the user but by the created date okay so we want to see the newest posts at the top and the oldest at the bottom and we don't want to worry about who actually wrote those posts so what i'm going to do is to maybe create another post um let's add another one of test user three we are following test user free and i'm just going to put in second post test user three i'm going to save it and then i'm going to also create maybe another one of my my of my author okay so my second post to i'm going to save this refresh and as you can see it's grouped by the user so here we have the query set for the test user free and here we have the query set for my user so we have my post my first post and then my second post too okay so we need to fix this because this isn't the correct way to do things so i'm going to add another comment sort and chain query sets and unpack the posts list the one over here okay so i'm going to explain this in just a second but first let's write a if statement if length of the posts is greater than zero then we want to override this query set variable and in order to do that we need to make an import from iter tools we want to import chain so we are going to chain the query sets so first of all we want to also have them sorted so we can write down sorted and then chain and what do we want to chain we want to change the posts but let's unpack them because each um as you can see over here we have um over here a list and inside the list we have a query set so let's unpack the posts okay so let's have them unpacked and then what do we want to have next we want to have a reverse order so let's write reverse is equal to true and let's specify a key that will help us organize the posts by the created date and we will use for this anonymous lambda function lambda oh come on lamp down and put in obj and obj created all right so now instead of putting the posts let's put in the query set so i'm just i'm going to keep the key the same so we still be using the posts name in the template but i'm going to assign to the posts not the post list but the qs so let's see what will happen now let's hit refresh and here we have post my second post second post test user three goodbye friends that's user3 hello world from test user and my first post so right now we changed we merged the query sets in the order of the creation by the created field so we see the posts the newest posts at the top the oldest one at the bottom and who actually wrote them doesn't matter right now so the final thing over here is to work on the main html so let's do this right away at the top i'm going to write down div class equals to ui grid and let's add a div class equal to row and also let's add a div class equal to 4 wide column so we are splitting the row again by 4 and 12 and i'm going to copy this again paste it over here and let's take a look at the four white column first so here what we want to display is the profile so actually we need to go to our views py and pass in the profile as well so i'm going to put it over here profile and we can [Music] assign our profile that we got from over here all right and let's go back to the main html let's put in a profile and below the profile let's add two break lines and let's add a button button class and this is going to be a blue button ui primary button and let's put in here people to follow and let's close it off so we actually created a view for the people to follow so we can write down a traff url and we want to head over to the profiles and the name of the view was profile list view okay and we don't need an argument over here let's close it off and let's save this let's see if this is actually working so let's take a look at people to follow and here we have our profiles that we can see and decide whether we want to follow or not all right so below we can add two additional break lines and let's put in following so let's display the people that we are following and let's do it in a list and we need to use a for loop again so for p in profile following all we want to create a list item and inside we want to display this profile okay so let's save this let's hit refresh so now we see that we are following test user and test user three okay so uh yeah the next step is to uh take care of this other column this this should be this other diff which should be not for white column but 12 white column and inside we will have posts so i'm going to put in posts i'm going to add a horizontal line and i'm going to indent this and now i'm going to create a for loop for post in posts we want to have a div we have a class of ui segment let's close it off and inside what we want to display maybe post author and also let's add a maybe horizontal line and below let's put in post body okay so let's save this let's refresh and something didn't work for okay posts for post in posts let's do this one more time and there it is so we have um my post the test user 3 we are following test user three we are following test user free here as well test user we are following test user and this is our post so this is okay so let's follow maybe test user two yes and then let's return to the posts posts posts okay and here is the post of test user two and we are now following test user two all right guys so i think this is it hope you enjoyed this tutorial uh if you do if you did please consider subscribing to my channel uh i'm working currently on the social network project for django rest framework and react also we will be doing some and deep learning tutorials with python so this is coming up pretty soon and yeah tomorrow i will publish the 12th part of the social network project so stay tuned thank you one more time have a great day and bye bye

Channel: Pyplane

Views: 5,902

Rating: 4.9448276 out of 5

Keywords: how to follow users in django, learn django, follow button in django, follow django, how to follow in django, learn python django, django tutorial, django project, python django, web development course, django project 2020, django project ideas, django project tutorial, learn python django for beginners, django follow, django follow user, learn django 2020, django follow unfollow, learn django fast, learn django 3, django followers

Id: 1tZg5YLsCO4

Length: 70min 39sec (4239 seconds)

Published: Tue Aug 11 2020