Learn Django 3 - Creating a User Bookmark / Favourites Features - Part 10

hello and welcome to another tutorial this is part 10 of the building the blog series so here we're looking at building a favorites feature so we're going to go through the motions of building a very simplistic favorites feature have a look at some of the different features we might want to include in the favorites feature so for example hiding items if the user is logged in or isn't logged in and so on so this is a simple process so we're going to just extend the existing model using a many-to-many field that's going to allow us then to create the logic where we can save the user id in existing posts or connect the user id to existing posts if the user wants to save a post as a favorite so we'll go through editing the template creating the logic which is literally just eight lines of code and then we initiate the save using urls so we'll pass some data over through the url to the view so we'll have a look at towards the end hiding the save feature from users who are not authenticated and in addition to that for those who are authenticated we need to swap over what the message says if they do actually save a post as a favorite so we want to move from add to add to favorite to remove favorite so here we have the simple blog at part nine so if you're following this series maybe you've got to this point if you do want to download this simple blog at part 9 code then just have a look in the description there's also a link to a a video which shows you how to actually start the application if you're new to django and just want to go ahead and complete this tutorial so if you're working from part nine of the building to blog series code you will find that you'll need to go into the admin and then just uh head over type in admin admin that would take you to the admin and then you'll need to make some new posts so if you are making a few posts just make sure that you select the status published otherwise it won't show if you're new to the series so i'm just adding one post here so we'll be able to now add a favorites feature to this to allow the user to click on it and add it to their favorites and then going back to the homepage we now have a new post so we can add a button we're going to add a button right here for favorites so back in the code if you remember we have accounts which deals with all the account features in our application we have a blog this is going to be utilized or this is utilized for managing all the posts in our database for our blog so this is where we need to go so we're going to go to the models so we're going to now extend the models so we add a new field to the post table here the post model which let's call that favorites and we're using a many-to-many field and we create a related name default none blank true so it can be blank and empty so what we're trying to do here just give you a general picture is that we have the post table inside of his post table all of our posts so each post has a favorites field and what we're trying to do is we're putting the user's id inside of that field and for every user that adds a post to their favorites that individual post has a favorites field where the user id resides so what we can do once the the user has added some favorites we can then go and query the database and look for all the posts where the user has added to their favorites because each post where the user has added a favorite post their user id will be placed inside of the favorites field so working with favorites becomes really easy because the logic is really simple when the user presses the button to add a post to the favorites we're just going to take their user id and put it inside the corresponding posts favorites field and then of course all we need to do then to remove the favorite is get the user id again that have clicked the button to remove the favorite and then remove it from the favorites field of an individual post so with about 10 lines of code we've created a very simple favorites feature okay so now let's go over to the template so that's the blog app here so all of our templates are in the template folder so we want to use the blog templates and then we're going to add the button to the single page so the single page is where you see the individual post so the individual posts on the home page click on those that takes us to the single page so we're now working in the single page and like i said we're going to add a button on the right hand side here a favorites button we're just going to use a bootstrap button for that so here we're working from line 28 we have the post title so we've identified that and underneath that we're now adding a new line of code here which is a simple link at the moment we're not linking it to anything just yet but we've just added some text add to favorites so this is going to be a button because we're using bootstrap we've added the button classes to make it into a button and in addition to that what we're trying to do is add this on the left hand side and this on the right hand side so we've got two elements here we're trying to kind of move one on one side and the other on the other side so we're using d flex from bootstrap and then we're going to justify the content in between so that the first element moves to the left the second element moves to the right so if we go back in now and just press refresh you can see we've got the button on the right hand side it's not exactly what we want it's just strangely strangely too long so we'll just change that so back in the code let's just now add this to a dip so we save that and go back in and refresh and now we have the button so obviously you can change this to a graphic if you wanted to we're simply just going to use a button like this so of course you might want not want to add it as a button you just might want some text everyone's going to have their own preference and style depending upon what they're developing so i've just added a class to the h1 just to make the text a little bit smaller so i'm using the h4 styling for this h1 element here and if we do remove the button section here we will just have some text and maybe that will look better for you so now we actually have a way for the user to add this item to their favorites we now need to hook this up to a view so to perform the logic so let's go ahead now what i'm going to do here is not use the blog i'm going to be using utilizing the accounts because this is an account type of task so in the urls for the account you can see that if you're utilizing um the part nine code there's already quite a lot of urls here so what we need to do now is just add a new url here for this favorites so building a new path for this feature what we need to do is add a path and then we need to add the the url but here i've added an extra parameter here because i want to capture the id of the post so if you think that when someone adds something to their favorites i need to know or the system needs to know when we actually add the data to a database we need to know what post to add the data to so the idea here is that we're going to pass to the view where we perform the logic the id of the post so we can match the post with the user so then we just go ahead and complete our url here so and we're going to add a new view called favorite add and then we're going to just name it favorites add okay so now we have the path in place or the url in place we can now go to the views and now configure the logic okay so if you remember i said that i wanted this feature to be only available to those who are actually authenticated or logged into the system so you're not going to be able to access this view and unless you are actually authenticated so i use the at login required to perform the action similar to what i've done with these other views here so next up we create a method so i'll call this favorite add and we're taking in request and also the id parameter that we're passing over so now we want to actually query the database so we say post create a new variable post and we use the get object or 404 so this is just going to return one item and we want to return an item from the post table and we want to then also make a match so we passed the id of the post over to this view and now we're going to use that to make the query so we're just saying that go into the post table and find a post which has an id of the id that we're looking for so in order to get this working notice that we're using the post table now that's inside the blog so what we need to do is import that in so previously we've been using models from the accounts because we're working here within the accounts so now we need to do from and then blog dot models so we need the blog models and we need to then import post so we need to make sure we can do that to to make the query on the post model in the blogs app so now we configure the logic for this so we're going to say if posts so if post that's the data that's returned from the the initial query that we run so we captured the individual post that we're working on and now we're going into that post and we're specifically looking at the favorites field and we're going to run it run a filter so we're going to check to see if the id equals the request user id so inside of the favorites we're essentially checking to make sure if the user id exists or not so what we're saying here is that if the user id is actually inside of this field then we know that the user has already added this to their favorites and we've got exists so we're checking to see if it exists if it does exist then what we're going to do is we're going to say post favorites and then we're going to remove and we're going to remove the actual user id from the favorites field so that will no longer be a favorite for that particular user so of course if we can't find that within the field then obviously what we want to do is add the user id so post dot favorites add user id so now we've actually added the user to the the field and we now have a favorite being established for that particular user okay so finally we utilize the http runs response redirect just to redirect the user back to that the page that er that they are on obviously at this point they've pressed the button and if they do exist or if a favorite does exist then they're going to be removed from that favorite else if the favorite doesn't exist we've added the favorite for that particular user and the page just refreshes okay so now we can actually try it out so we've gone over to the in this case the only post that we have i click on add to favorites notice that nothing looks like it's happening the page is refreshing if i move down slightly and add to favorites you can see that the page is refreshing so we've got the logic in place but you may have noticed that we didn't actually migrate the database so let's uh make make migrations and then we go ahead and we'll just migrate so referring to the front end here there's a few things that we need to do just to potentially remove this item if the user has added the item to their favorites so we'll deal with that in the later part of the tutorial let's now go ahead and add a new item in the admin section for the user so that they can go to the page and see all the favorites that they've saved so let's go into the remove these let's go into the templates and we want to access the accounts inside of here we're going to add a new file so we're going to make a a favorites.html page so this is an additional account feature that the user can access so to build this up let's first of all go to the profile and we're just going to copy and paste the items from the profile page there we go so this is just going to be a default page and then of course we now need to add a url link to this page okay so remember we're working in accounts so let's go to the accounts and urls and we've got the profile delete profile edit and so on here so let's just now underneath here um just add a profile favorites and we're going to add a new view called favorite list and i've named that favorite list so this is just a simple link so that the users can access this view that we're creating so now we need to build our view our favorite list view so that the user can see all of their favorites that they've saved so in the views we're going to create a new view at the top here so we're going to need a login required obviously at this point the user's logged in they're in the dashboard area or the user area of our website so we want to protect that and then we're going to create our new method here so favorite list taking the request and then we're going to run a query so we're going to say new post dot new manager filter so we're just running a we're running a query on the post table again in blogs and we're going to say favorites so that if we find a post that has a favorites field that equals the user's id we're going to return that post so then we go ahead and we just basically return that post so we can i've added a variable here called new you can change it to whatever you like so we're just going to return all the posts where the user has actually added that post to their favorites so now we can go ahead and just complete the the template for favorites so at the moment it's just got this section here which is a a simple dashboard at the top so we'll edit that and then if you remember in the templates for the blog we have the index this index page basically just loops around all of the posts so we can utilize this so here we have four post in post it's basically just going to loop all the posts that are returned from the database so we can utilize this type of feature we'll just copy and paste it across to the favorites page and to build up our favorite page really quickly so this is what we end up with so we have uh extending from the base we then have a title that we're extending so user's favorite it's the title and inside of the content block inside of our base this is what we're going to do so we include the navigation bar and then we've got a container and we're just using the jumbotron again from bootstrap just add a little bit of text here so user saved favorite post blah blah and then we add a new row so remember that we're returning new from the from the view we're returning new with all the data that's returned from the database or the query so we create a symbol loop here and then for each item we're going to output this div here this element which is going to be a bootstrap four column so we're just going to make a nice little grid here and the data that we want to access and the link so we're going to put this into a link so this is the link of the post and then we've got the image of the post the title of the post similar to what we've already done in a previous tutorial so we output the post title and so on so in addition to that at the bottom here we have this element here so again i've used a d flex and justified the content so this would be on the left hand side this would be on the right-hand side so you can see here that i've created a url to accounts favorite again so this url here will actually then obviously link to the view that we created now remember how the view works if the item does exist or the user has added it as a favorite it removes it if it isn't a favorite then it adds it so here this is a way of actually removing the item as a favorite the user simply just needs to click on this link and then the view will run see that the favorite is already added and remove it so we just add a button here to remove okay so now we can go ahead and access this so just refresh the page we should have a drop down item okay so that's the last thing that we need to do we now need to add it as a drop down item so go ahead and access that so that's in the base and then the navigation bar so we need to add it as a new item here so we'll put this under the edit details so all we need to remember here is the actual link so the url was in accounts and then favorites list so we called it favorites list in the accounts so let's just remove some of these so now we've created a link here to the actual favorites list i've called it saved posts so i press save and let's go back and refresh so now we should be able to drop down there should be a nice link here go to save post and you can see that we don't have anything saved so now let's go over to the home page go to the post add to the favorite so now let's go back into our save post and you can now see that we have a saved post okay so i'm just joking um so let's go back into the code we forgot to do one thing if you remember so let's go back into the it's a single page remember we didn't actually add a url for the button so now we can just finish this off by adding a url i suppose this is the important part and definitely a new feature in the series that we've not included so go ahead and add a new url so it's accounts favorites ad that's the link and we want to pass in the post id so we add this extra attribute here to pass in the post id now remember that's being captured so accounts urls and then it was the favorites ad so we're parsing in that id and then of course that's then going to go to the view as the id here and then we're going to utilize that as part of the query so let's just try this again we're going to go to the post add to the favorites and we get an error okay so i wasn't expecting that one but this is an easy one to fix we haven't defined it so we simply just need to define because we actually haven't put this in in our shortcuts here so we just define we're utilizing get object or 404 so we need to import that into our project so now let's go back go back here refresh this page right so add to favorites and now we get the http responder redirect is not defined because we've not defined that either so remember that we're utilizing that right here so in addition to the 404 we also need to add that into our project so now let's go back again and refresh add to favorites everything seems to be absolutely fine there so now we can go into our save post and we still don't have it so that was an easy one to fix i forgot to actually save the page the code so now when we add to favorites click on add favorites go to user favorites we can now see it save and now if i click on it again and refresh the page we can now see it's been removed so everything is working absolutely okay at the moment so say post it's right there okay so first of all let's just hide this favorites option in the single page here in the blog let's just hide this link to ensure that only people that have actually accessed or sorry are actually logged in or authenticated can actually add an item to their favorites list now if you remember if you go into the the base and the nav main we've actually implemented it here we use the if request user is authenticated so we can just copy that down to single and just put it right here so we can then just end end it right here so we end the if so the user has to be authenticated to access it so in a new window here i'm just going to go into the post and you can see now it doesn't appear if the user isn't logged in so what we could probably do here is actually have the button and then if the user isn't logged in it takes them to the register page that would maybe be a logical feature to have here because we're showing that the you to the user we do have this feature but you have to be logged in and obviously we're potentially trying to get users to sign up so that we can use them for a mailing list and build up our community for this page or for this website so just as a small example i've created an else here so we'll just copy and paste the the link here but instead of accounts favorite we can go ahead and maybe send them to the the register link so just remove the post id because we don't want to send that and then we just change the text to i know we can keep it add to favorites so when we go back to our page it now says add to favorites but if someone who isn't logged in tries to access it then they should be sent to the register page there we go so they're now sent to the registration page so that feature is now in place so let's now think about we need to potentially remove this if someone is logged in we don't want them to we don't want to show the add to favorites button because we know the logic that's in place if they do press it again it's going to remove it from the add favorites not add it to the favorites so we have the logic in place already in the overview in the account view we tested to see if the id existed on a particular post so we did that right here so we can use that code and you can definitely refactor this but we've gone into the views of the blog now this is where we gather the post or the single post information and display the single post that you see so we set out a new variable here which is going to be a billion so true or false and then we use the same piece of code here so we're going to check to see we're going to we've already got the post information right here in the single method here so all we need to do is check the the favorites of that particular post and then filter again so we're going to check to see if the user id exists if the user id exists then the user has already added this item to their favorites so the favorite equals true so let's just pass that back to the template now so we do that down here so we passed it back to the template so i've added that piece of code and now we can go back into the single so what we got now is that we're going to show different things to pending han on how or depending on if someone is logged in or not so what we've got now is the if request user is authenticated so first of all we're going to check to see if the user is authenticated if the user is authenticated then we're going to obviously allow them to add and remove so what we're doing now is we're going to check the favorite so if favorite is true we're going to run this piece of code so we're going to allow them to remove the favorites now i've set this up so that the user can remove favorites by going to the accounts page and then removing the favorites so i link them here to the favorites you can just obviously link them to the normal favorites ad and that will obviously remove them else so if the the favorite is false so if they haven't added the post as a favorite this piece of code is going to run so this is obviously the traditional code that we utilize to add the item to the favorite and of course if they're not logged in then they're just going to be shown add to favorites and link to the registration page so they have to register first and then they can start adding items to their favorites okay so that's how the logic works i've spread this out to make it a little bit easier for you to understand and this definitely can be refactored but it's working and we can now test to see if it is working so we're logged in so we can add this to favorites and now it says remove favorites so let's just um go to our save post so it's definitely here so let's go back to the post so now we can remove the favorites and that takes us like i said to the favorites page where we actually have to click on the remove button okay so now we don't have any favorites so that's all the logic in place so let's just test to see if we aren't logged in so let's just log out so when we go now to the post we have the add to favorites but that takes us to the account okay create an account page so this was just to try and inspire you to think about different ways to control some of these different features on the page and hopefully that gives you a kind of a baseline introductory view on how to maybe add items depending on different states of the user okay so here's our baseline for user favorites feature it's going to be very similar if we made a rating system it would be a very similar approach and we'll do that in a an additional tutorial in addition to that we'll also cover trying to build this utilizing ajax in an additional tutorial because this tutorial is getting a little bit too long so we'll add an additional tutorial for ajax so we have now built a user's favorite feature within an exact existing application so hopefully you can go now and explore some of those features within your own application it was a simple process um hopefully you've seen that we've simply just extended the model using a many-to-many we've added a template to include a link which is connected to the logic and that logic literally is five or six lines where we're just gathering data about the user and the post and putting it inside of of the model that we've extended and you've seen that we've initiated that using a url and of course that's not the most efficient way of doing it ajax would be obviously a little bit more efficient utilizing ajax to so that the user the page doesn't refresh um so the last thing we looked at was hiding the save feature from the user and who are not authenticated and we obviously changed some of the parameters so that the user sees different things based upon the state their login state

Channel: Very Academy

Views: 4,105

Keywords: django tut, django tutorial, django 3, djangoproject, django examples, django ajax, learn django, django beginners, beginners django, django bookmarks, django favourite list, django favorite, django framework

Id: H4QPHLmsZMU

Length: 29min 36sec (1776 seconds)

Published: Thu Aug 13 2020