How to create a like button with counter in django

hi guys in this video we are going to create a simple functionality for liking and unliking posts and this will be done with a counter so we can actually have a tracking on how many legs does a particular post have and this will be the first part of this series I'm going to add some videos related to social applications for example how to add friends how to remove from friends how to add comments to the post and so on so yeah without further ado let's get started alright guys so I have a blank Django project set up and I called it social project folder with among other settings py file with URLs py and I added a post application so this is something that you have to create just run Python manage py start up and the name of the app so in our case it's post and I also created a template folder and inside the templates for the folder I I've put in base HTML so the base HTML has been filled out by me I just went to my blog pipeline comm and I borrowed the base HTML from the chart Jaya so what you need to do is simply get rid of discharges and you can bring everything in then you can add those blog titles and blog content and simply add this UI container so the post that we are going to create won't be stretched all the way there will be some space on the left and on the right okay so also the last thing I did is in the social project in our main project folder I went to settings py file and I simply added settings related to the template so Django will know where to look for them ok so now we can head over to post and we can open up models py file and over here we need to create two models the first one will be post and the second one will be like so let's begin class post which inherits from models dot model and the first field that we need is a title so this will be the posts title and this will be just an ordinary char field with the max length of 150 then we will have a body which will be basically a description and this will be just a simple text field and then we will have a very important field called light and this will be models many-to-many field and we need in order to have this field working we need to import a user model so we can do it right now from django contrary off models import user now we can take this user and we can put it inside the many-to-many field ok and we can also set the default value to none and let's add also blank is equal to true so we are making this field optional right now so the idea is that we are starting with an object that has no likes and whenever a user clicks the like button this field will be updated so the user that clicked the like button will be added included in this many-to-many field and later we can count with this field how many likes the particular post has ok so when we click the first time we will be added as a user to the many-to-many field and if we click it the second time we will be removed from this field and this is the logic that we will apply in the views py file but for now let's move on let's add also maybe an updated field and this will be just models date/time field without now is equal to true and also let's add created and this will be also date/time field with outer now add is equal to true now okay and yeah we need one more thing and this is the author so let's make it models and this time we need a foreign key and we need to pass in this model that we are referring so this is the foreign key to the user and we need to specify what happens on delete so in our case we just want to write it down models cascade okay so every time an author gets deleted the post that he created will be also deleted alright and finally we can apply a string representation and let's return STR self title okay and maybe you let's do it one more thing let's let's get the numbers of likes so I'm going to define a new function I've actually met it called non likes and mistakes in the self and we simply need to return then self light so we are referring to this field and then we need to grab all and count okay and let's make it as a property so this method will be treated as a field and that is it for the post model we can now proceed and create like model okay so let's define a class called like which takes in which which inherits from models of model and the first field will be the user in the system foreign team to the user and on delete again we are going to write down models cascade and the second field will be in the post so we have another foreign key post and again on delete models cascade and finally we need to set something like a value so this will be just models which are filled and we need to specify the choices and we will create a topo in just a second but let's provide a default value so this will be like because we are first time we want to click a button it will be alike and then let's specify the max length I'm just going to put in 10 and now what we need to do is to work on the choices so I'm going to create a couple like OSS and inside the topo we are going to create two tuples so the first the first thing will be like the first value over here and the second one will be unlike okay and now we can refer to this life choices and then finally we can present string representation so let's create this method let's return cell or STR cell post okay so um yeah I think everything gets set up we can go ahead and save it we can head over to our social project and go inside the settings B Y over here in the installed apps let's add posts let's save it and also let's go back to the post and let's access the admin UI let's register those models so we can actually see them in our admin so from dot models import post and like and now what we need to do is to write admin side register let's just copy this let's grab the post put it over here and let's grab the like and put it below the post let's save it let's go back to the terminal and over here Python managed do I make my gracious and we need to add related name to our fields so I'm just going to put over here related name as liked and over here related name as after I want to change them it it should be working like this okay so let's try this again Python managed py make migrations and now it works as you can see and now python managed py migrated alright so we can write down - managed py run server to see the results in the admin ok so over here we have the confirmation that everything is working Django has been set up but we want to go to the admin so you need to provide your username and the password and then you should see the post application over here with those two models so let's actually create a post so the title will be test post 1 and the body will be the scription of the post number 1 something like this here we have the optional field like I won't add myself to this like many-to-many field if I would click on it I would be added but I don't want to be included so we are starting at point 0 and then we have the outer and I'm just going to select myself and I'm going to save this pose and there it is okay so everything is working and we can continue with the view so let's go back to visual studio code let's open up the views and let's begin from the post view so we will create a post list view or a post view and I'm going to do it as a simple function view so let's do it really quickly this takes in a request and then we can simply define the query set and this will be a post so we need to actually import the posts from the models so from the models import post and I'm going to bring by the way the like model and we can continue now so post objects all and then let's just set the user as request user now what we can do is to pass to the template which we don't have just yet the query set and we want to pass the user as well okay because we will check we will need this for the logic related to liking and enlightening okay so now what we need to do is simply return render and we need to pass in the request over here we need to pass in the template so we don't have one yet we will create it in just a second but for now I'm just going to write down posts and main HTML and the third part is this contact so what we are passing into the template so we are passing this contact dictionary all right so we have our post view setup and let's create a templates folder here inside the templates folder we need to have the posts folder and then over here we can create the main HTML and now we have exactly what we defined in our views so we can go ahead and save the views BY and in the main HTML well we can write down for starters extent base HTML and now let's write log title and block content okay so in the block content we are going to define a for loop and we want to iterate through this query set over here so I'm just going to write down obj you can put in everything and you anything you want basically and then Q s so now we have an object of a particular model and in our case is the post model and we want to grab the title and the body so let's just write it down h1 over here let's put an obj tile low as a paragraph let's put in obj or okay so we will be able to display the things that we saw and that we created in our admin so we should see this and this but of course before we do that we need to do one more thing we need to actually create URLs py file and set up the path so let's do it immediately I'm going to save the main HTML and in the post application folder I'm going to create the URLs py file and over here I'm just going to import sorry from Django URLs import app and then then from dot views import post view we need to provide an app name that will match the namespace so in our case we can put in posts and the namespace will be defined in the main URLs py file in our main project folder so this is something that we will do in just a second and over here we just need to define the URL patterns so we can put in the path and yeah we need to pass in this post view and the name will be I don't know post let's do something like this okay so we can go ahead and save this and now we need to include those URL patterns in the main URLs py file so we need to import include and we can define another path and let's just put in over here posts and we want to include the URL patterns defined in the posts application in the URLs py files so we need to write down include and then we need to go to posts so let's write posts and then URLs so let's put in URLs and the name space will be posts okay so it matches the app name define the URLs py of the post application I'm going to save this and yeah let's let's test it test this out so I'm going to head over to the admin and change the URL to posts let me do it one more time and there it is so here is our post the one post that we have if we will add another one so I'm going to head over back to the admin just going to create a separate window admin and I'm going to create another one so test post post two and over here I'm just going to write down description of post number two and I need to set up the outer and I'm going to save it let's refresh and there it is okay so this is working and now we can continue with our visual studio code we can head over back to the views and let's create the like post functionality so in order to do that we need to have a new view and let's call it maybe something like like post and this takes also a request and this will return redirect so we need to import redirect and we can import it from the shortcuts redirect okay and we want to redirect it to the posts and then the name of the view defined in the URLs BY post list okay alright so you have this like post we can actually save it and bring it into the URL SPI of course we are not done yet there's a lot of logic that we need to apply in this views view but let's put it in the URLs py so let's define a new path and this time I'm going to put in like and we need to put in this like post and let's set a name to maybe also we can put in the like post okay so now we have this we can save it and we can proceed with the main HTML so over here we need to create a form and let's set the action should be equal to we need to define the URL for which we created just a second ago so that's right URL and posts and then like post so we are going to send this to this path and in the like post we will be redirected back to to the post list or post view and then let's set the method to be equal to post and we can also specify class and let's make it a UI form so we can provide a semantic UI design style let's close up the form and this form will have to take in input type hidden' and since we are in loop we have access to the ID of a particular post and this ID will be sent so I'm going to set a name to post ID and the value will be obj ID okay so we are in a loop so we have access to the title to the body but also to the idea of a particular post okay so the next thing is to actually set up button but we need to know which one should we display the one with the like or with the unlike and the like button will be green and the unlike button will be red so we have access in the views to our user because we are passing the user to the template so what we can do is to write a if if block and here we need to check if the user is in or let's do it not in person not in obj liked Oh spelled obj like though so if the user is not in obj like all we are going to set a positive button so it's going to be a green button and then we can add an else and else we are going to set a negative button so a red button with the title with the label of unlife okay so let's just put in button and then let's define a PLAs and again we are going to use the styling of the semantic UI so button positive we need to make it as a type submit' because we are submitting the form and yeah we can write them like and close off the button over here and I'm just going to copy this and put it over here so here we need to change to negative so it will be actually a like button and the unlike button sorry and we need to change the label to unlike alright so I think we are done over here but okay we forgot to do two things to indent this and then let's also display strong and over here I'm just going to put in obj liked all and count and then next to it I'm going to put in likes alright so we can save it let's refresh so we apparently have some issues okay let's head over to the views and I'm not to the views though to the URL patterns and over here we should have a comma let's go ahead and save this and let's refresh and there is our button and over here we have likes so let's make this functionality work because right now we have okay so first of first thing we forgot about CSRF token so we can go to the form and below we can add CSRF token let's save it let's refresh and over here now if we click like nothing happens so we need to apply this logic in our views py so we can simply begin from the top and we are going to set the user to be request user and then we need to check if the request post and then we are going to simply define a variable called post ID and this will be just a request post yet and then we need to add this name over here post ID so now we are getting the post ID from the forum from the input type hidden' and we can now get the post object so post objects yet and then we are going to get it by the ID so put an ID is equal to post ID all right now we can check if the user is in obj sorry post obj liked oh okay and then if if the user is in post object like ball that means that the user has actually liked the post already so if he clicks it one more time this will mean that he needs to be removed from the many-to-many field so in this case we will write post obj and then like remove and in the brackets user and then we can put an else statement so in this case he isn't in the many to mean many view and we are simply going to add it ok so I hope this is obvious we have a user we have a post which we received from the main HTML from the forum and then we are checking if the user is in the light view this many-to-many field and if he is in that means we need to remove the user because he clicked he collected before he clicked the like button before and then we are going to change put some logic over here to make the like as an unlike but in other case maybe the user is clicking the post for the first time he is definitely not in the many-to-many field and we are simply adding him to this management ok and now we can write down like create it and over here we can use the get or created method with the use of the like model so like objects and then get or create and what we need to pass in is the user and we can set it to the user over here to the request that user in fact and then we need the post ID to be equal to the post ID ok so we have the like and over here I made a typo sorry about this and then we have the created variable and the created variable is a boolean so it returns either true or false and over here we can simply ask if not created then we are going to create another if statement if like value is equal to like then we are going to set the like value to unlike and else like value will be set to like okay the final thing is to write it down like save and this will be it this should be working so let's test this out I'm going to save it and I'm going to refresh our site and I'm going to press like and as you can see we have one light right now and the button changed to red and right now we have unlike so let's go ahead to our yeah maybe let's begin with the lights so we have this test bode post ID and we have a value of like and let's try to unlike it and then we have name post is not defined so we made a mistake over here post post object obj like okay and the mistake is over here sorry about this let's try this out again unlike and then let's see what's happening over here and we have the value of unlined so if I press like we have value of like okay so this is working and yeah let's check out the posts and in the posts we can head over to this desk post for example and you can see right now that I'm currently at the many-to-many field for the test post but if I press it one more time and over here I need to refresh it I'm gone okay so this is working and the last thing that I'm going to do is to apply some additional styling over here so I'm going to head over to main HTML I'm going to grab this strong and put it over here and then in the for loop I'm going to write a div with a class of UI segments and I'm going to close off this dip over here let's save it let's refresh and now this looks a little bit better okay so we can finish up over here thank you very much for participating in this tutorial I hope you made it through and I hope you enjoyed it if you would like to hear more from me please subscribe to my channel and we will see each other soon take care and bye bye

Channel: Pyplane

Views: 14,177

Keywords: like button in django, python, web development, coding, programming, like button, counter, django tutorial, python django, web application development, learn django, django python, how to, django framework, django framework for beginners, django tutorial 2020, django framework example, django python app, Learn django 2020, django like button, creating a like/dislike button, how to create like button., create like button in django, like button using django, learn django fast

Id: xqFM6ykQEwo

Length: 36min 3sec (2163 seconds)

Published: Tue Apr 07 2020