Building a Social Media App With Python 3 and Django: Part 12 User Notifications

hey everyone in this video we're going to add a big feature to the social network application which is user notifications we're going to put a badge in the nav bar that will alert the user of any unseen notifications and we'll put these notifications for when the user likes their posts comments on it or follows them and to do this we'll use some different some new parts of django that we haven't used yet this will be much more complicated than the previous videos but it will add an important feature to this application we'll write a little more javascript as well to make all this work and with that said let's get started with this project so the very first thing we do we need to do is fix one small thing so in our post detail at the bottom here let's make this a little bigger um you'll see we put our uh javascript script tag here we want to put this in our base so we're just going to move this let's do a control x and move this to our base instead of our landing application so we'll go into landing we're going to templates landing base.html let's put this here right before the closing body tag so right there that way we can use this this tag anywhere we want and let's go and just close off this tag it's not did i forget to bring that over as well let's double check that real quick uh no but wish there we go so we have our script tag added there and now we can get start with actually adding the notifications so the first step will be to go into our social app and into our models dot py and so insider models py we want to add a new class for a notification and so every time we want to send a notification we'll create an instance of this class and this class will hold all the data that we need for each notification so at the bottom here i'm going to add another class and we'll call this one just notification and we'll pass in models.model just a standard class and now the fields we want here we first we want a notification type and this will be an integer and it will either be a one a two or a three a one will mean a like a two will be common and the third we follow this will just be a sort of code that we'll use to easily determine what type of notification and what to do with it so i'll put a comment first just put this so we have this here so we don't forget one equals like two equals comment and three equals follow and now down here i'll type notification underscore type equals models dot integer field and below this we want to also hold two user foreign keys the first one will be the two user which is who we're sending this notification to and next will be a from user which will be who is it's been sent from so to underscore user this will equal models dot foreign key user and related name equals uh notification notification underscore two uh then we'll add an on delete equals or whoops let's put this outside of the quotes and put our on delete equals models dot cascade just like normal and we'll also add a null equals true in case you want this field blank for some reason and then once again we'll do the same thing but for from user this will equal models dot foreign key user related name equals notification and we'll change this to to a from then we'll do an on delete equals models dot cascade and once again we'll do a null equals true and now below this we want to hold two more fields and they'll be either a post or a comment we'll have two separate fields one for a post one for a comment and so if we have if this notifications for a post we'll fill this post field if it's for a comment we'll fill a comment field instead and there'll just be a way to link this notification to a specific post or comment so we'll do a post equals models dot foreign key once again this will be a user model or user object that will store in this field and a related name or no foreign key and this time we'll store a post for our post field we'll do on delete equals models dot cascade do a related name equals and in quotes we'll put just a plus to review to uh remove the reverse mapping and so in this case we don't want to be able to access the notification from the post model we don't really need to do that for any reason and so we can just go ahead and remove this mapping here so we don't need it and then we'll add a blank equals true and a null equals true um because this will be blank if we're on a comment or if it's a follow notification so you want to be able to have this empty as well and now i'm going to go ahead and just copy this line here because we have almost the exact same thing for a comment and so if we're on a comment instead of posts we'll store a comment value inside this comment field right here so i'll change this post here to comments and i'll change the name as variable to comment as well and now below that we have two more fields we need to add we need to add a date to get the date of when this notification was sent so date equals models dot date time field and a default equaling time zone dot now and so you'll see up here at the top here we imported timezone already from earlier we use that somewhere else probably on our post itself yeah right here so once again we're just going to default this field to the current time when it's created so whenever we create it is when we're going to send it so we can default this field to whatever it is that we created in this notification now finally we want to put one more field which is user has underscore scene and this will be a models.boolean field and this also defaults to false for this field and this one will just be a true or false value that will be set if the user has already seen this notification and by seeing what we're going to do is if they click on the notification this will be set to true and so this will no longer show up as a new notification form we'll remove it from the new notifications list that's how we'll handle getting rid of notifications by default by just if they click on it then they've seen it and we can remove it from the list and this value will set that okay and that is it for our comment uh or notifications model so let's go ahead and save that and make sure to go ahead and migrate the changes so already in the directory with my manage.py file so i'll type python3 manage.py make migrations um oh i forgot to activate my virtual environment so we'll do a source emv spin activate and then we'll do the same thing make migrations and then we'll go ahead and migrate those changes as well there we go and with those changes done we should be able to run our application let's go ahead and just run it real quick make sure everything's still working fine so python3 manage.py run server okay perfect so now what we want to do now is we want to add this notification model to our admin py file so we can create some test notifications in the admin page so here in the admin page you want to add it here so we can actually add some test ones for this to get this thing set up so let's jump back into our um text editor or swan text and let's go ahead and go to our social app into our admin.py file and first let's go ahead and import notification and then down here at the bottom we'll add another line admin.site.register notification let's save that and let's go ahead and create a couple test ones so we built the page here there it is come in here we'll create a notification we'll set the type first to one we'll put check we'll find uh admin and the from will be just test user i guess we'll do a lot of post object to this and we'll save that one let's create two more let's create um a two and this will be admin from test four we'll put a comment on this one um we'll go ahead and save that and create one more and we'll set this to three which will be if they followed this user so let's pretend that we'll say test 2 followed admin and we'll leave both these blank because this is a follow and we don't need it's not connected to a post or a comment okay those three added we have something we can work with so let's go back into our text editor here and our next step here will be to actually show these so actually we go back to our our app here view site i'm up here by this drop down right here i want to put a button that you can click and have a drop down here that shows all the notifications but to do this this is a little more difficult than what normally would be because we're in our navbar which is not a view it's just some html that is on every page and so the way that i decided to go around this would be to add a custom tag a custom template tag so we used some other tags before we use like christy's forms tags tag somewhere else we load those in so now we're going to actually create our own tag and to do this we just got to create a couple files so inside of our landing app because that's where navbar is we're going to create a new folder actually up here to the root of the app create new folder and we'll call this templates tags just like that and then inside here we'll create a new file and we'll save this as double underscore init double underscore dot py this will be empty but we need to have this file here for this to work um so now that added we go ahead and create a new file and we'll save this one and this will be whatever we want to call our our file that will hold our custom tags so i'm just going to call it custom underscore tags dot py so this ip file will be empty but in our custom tags.py file this is where we'll actually put all the code to make our custom tab or custom template tag here so first let's import a few things well from django we'll import templates which we'll use here in a second as well as from social.models import our new notification model that we just made and now below this there's a little bit of cody at the right and just one line to set this up so we'll do register equals template dot library and it's just we just need this here for this to work um and now we can use register the register decorator to actually create a tag so if you went to the django documentation on custom tags we open that real quick you'll see there's lots of different types you can do you can write custom filters you can create these other simple tags you also create these inclusion tags is what we're going to do here so you can read up here what it really is but all it's doing is rendering it's displaying data by running another template within a template so we'll we'll use our tag to put in insert new code that will run inside of another template and the reason why we're doing this is because this nav bar here doesn't have a view and so there's no way for us to handle any logic with like filtering data and grabbing data from the database that we need to do and so by using a template tag we can handle that logic within our custom template and just put that code within our templates um to actually run it on our nav bar hopefully that makes sense if not um once we get once we create this if not i'll link this in the description so you can read up on these tags how they work and we're just adding this inclusion tag to it okay with that said let's go ahead and start writing this custom template tag and so what i'm going to do here is first add a decorator so i'll do an add sign and register dot inclusion tag because that's the type of tag we want to use and then inside of parentheses here i need to pass in two things first let me pass in the the route the location of the template i guess so we have we're gonna have to create a new template that will hold all the actual html for this tag um and so we're gonna put that in our social apps we'll type social slash and we'll create a file called show notifications dot html and then i'll pass in takes underscore underscore content equals true and this or not content context takes context equals true and this will allow us to pass some context into our template and now below this we create a function so do def show notifications and this will hold all the logic for the actual template make sure we pass in context into our parameters there though and so now we need to do two things first when you get our current user has logged in so we can grab the that specific user's notifications and to get the current user um we can set a variable equals request underscore user equals we can use our context that we passed in and it's our context dictionary here we'll have an object called request or an entry called request and in that request we'll have a property of user on it and that will return the current logged in user uh into this variable next we can grab all the notifications for this user so you can do notifications equals notification dot objects dot filter inside here we'll pass in the to user equals requests underscore user so this two user will be who's receiving the notification so in this case we want to have all the notifications that this current user is the receiving user for and then we can go ahead and do exclude and we pass it in here we want to leave out in this case we want to leave out any notification that the user has already seen and we have that user has seen boolean value to check for this so we can put user underscore has underscore scene equals true the check for that and this will only return the notifications that are not seen where this value is false and then finally we can do an order by just to return the newest first by doing an equipment in quotes here minus dates and now with those two things done the last thing we do for this is just return and and curly braces here we'll pass in notifications and then colon notifications and we'll save that and that's it for our custom template hopefully that makes sense all we're doing is adding some extra logic here to be able to grab the current notifications and pass it into our template now with that done let's go and actually insert this somewhere in this case we're going to put it into our navbar we're going to go down below the drop down here it's going to go right below that so right here this is our nav item drop down right below this i'm going to go ahead and create a new div a class equaling nav dash item and then inside this nav item class here we'll do color bases two percent signs and this will be show notifications and now up at the top here though we need to import our custom tags here so i'll come up here i'll put two code races two percent signs and we'll do load custom tags and save that now let's go back to our browser and make sure everything's still working it looks like we're getting an error um custom tag is not a registered library oh you know what about to stop my server and rerun it too um you got new tags usually you have to restart the server let's try this real quick um yes okay so that fixed the issue now all we have is to add our actual show notifications file itself so let's go ahead and add that file now so we'll come into and we you'll see in our custom tags file here we put in the social app so we need to make sure we add in the social apps let's go down to our social lab into our templates here we'll create a new file we'll save this as show notifications dot html and down here we can handle all of that handle actually showing the notifications so so first you want to do is you want to add a drop down itself so i'm going to go ahead and create and also before i do this i'm going to create a custom drop down i'm not going to use bootstraps you could if you wanted to but in this case i'm going to go and just make my own so i'm going to create a div a classy clean drop down inside the drop down class i'll use a span create a span and this will hold a class equal into batch and this is boot chat 5 and bg primary now let's give us a little batch icon and then also give it a notification badge class as well and now i'm going to go ahead and add on click which we will add here in a second to make this work and now inside of this badge here i'm going to go ahead and just list out the length of the amount of notifications that there are and so in our our context here we pass the notifications which is equal to this so we can access this in our template now and in this case i can type notifications dot count to get the a number of objects that there is in there now below this let's go ahead add some more html here we'll do a div a class equaling to drop down dash content d none to hide this by default and an id equaling notification and it will produce container and now inside of this div here um we need to go ahead and loop through all the notifications so we'll go ahead and just do a for loop for notification in notifications and now we have this notification variable to access each one first we want to check if there's a post object on this if there is then we know we're dealing with a post notification so we'll do if notification dot post um and then we'll go ahead and add another if statement here which will be if notification dot notification underscore type is equal to one and in this case if this is if it is equal to one then we have a post notification that is also a like notification i'm going to indent these to make this a little more clear what we're doing here so we're just checking if there's notification.post object if it is then we have a post notification if it's equal to one then we know that the user liked a post so now i'm going to create a div a class equaling um drop down dash item dash parent and then inside this div here we're going to create a link with an href equine for now just a pound sign until we add the urls for this but we want to put inside of this h tag of this a tag here at and then two color braces uh notification notification dot from underscore user so the user that sent this notification and put liked your posts and then below this we're also going to add a span tag and this will be to hold a um just like an x button that we can use to delete this notification as well which will add that functionality in a little later as well so let's go ahead and just add a class here of drop drop down dash item dash close for now we'll just put an end times here and this is just we'll just give us an x and times and we'll close out the span that's going to close off this div and that is all we need for this now the rest of these will be very similar so i'm going to go ahead and just copy these to do that but first we need to add another if statement so now after this div here we can check okay it wasn't a one well what if it was a two so elif notification that notification underscore type is equal to 2 then we know that we have a comment notification a post comment notification and so i'm going to go ahead and just copy this for now and then we'll change this light to commented on your posts and then now below this we can go ahead in this if statement because we checked both types of post notifications so that's all we'll need here to do an end diff and now we do the same thing for comment so we'll do another if statement if notification dot comment so this there is a common object on this then we know we have a comment notification if we can once again we can check the two things again two same things again actually i'll just copy this let's be exactly the same just if this notification has a type of one then we know they liked this comment this actually here will be changes to an lf so we check if this is true if not then try this and then inside of here we have something similar just like this so we'll just copy this paste that in there and we'll change this to liked your comments and now below this we'll do the same thing here so lift notification notification type let's go and just copy this paste this here so if this is a two then we know they commented they applied to the comment by adding our comment so we can go ahead and copy this paste this and we'll change this to replied to your comment and we go ahead and end this if statement right here so we'll do just uh two curly braces end if and then down here we can do an else so if there's not a post object on there and there's not a comment object on there then it must have followed the user it must be a follow notification instead so we can go ahead and inside this l statement here we can put the logic for that which will be very similar again i'm going to just copy this paste this right here and then this will be followed you followed you as she's put has started following you has started following you and then below this we can go ahead and close off uh we need to close off at least one if statement right here so we'll do end if i'll see close out the for loop as well so we'll do two braces and four now outside of whoops outside of this for loop here let's go ahead and close off our divs like that okay now with that done let's go ahead and come back here reload the page and there we go we have right now a little badge here and you'll see that we have three comments which is we created three so that's correct and you can't see anything yet because we went ahead and hit it by default so we come back into our text editor here we went to our um up here at the top here we have this drop down content we take away this for now and save that come back here and reload the page here you'll see them all show up right here with an x by them so it's all working um like it should be we need to go ahead though and add some styles and make this look better as well as make this button here toggle on and off but right now everything's working great let's go ahead and put that back on though that d none so we have that for now let's go and add some styles to make this look better um so inside of our style.css file here we can add some stuff here so first thing you want to do is you want to add some hover effects for our notification badge so we hover over it we want to give the user some sort of like idea they can they can interact with it so we'll do a dot notification dash badge and on this here was just a transition of 0.3 seconds just so after we finish hovering we can kind of transition back to its normal state we'll add a notification dash badge and colon hover to add some hover effects and then here we'll do it we'll change the cursor to a pointer we'll change the opacity to 0.75 and we will set a transition here as well 0.3 seconds we'll set a drop down class as well which we added to our html already inside here we'll set a position of relative and we'll set a display of inline block go ahead and scroll up here so you can see it's a little better next we'll go ahead and add a drop down dash content and this will be um this will be the actual content of the drop down so we want to position a relative so we can position it where we want um and we'll set a background color to oops background color to f1 f1 f1 and then we want to set a minimum width we'll do 300 pixels i mean you can change this to fit it how you want but for me i think 300 is fine what a box shadow of 0px 8px 8px 0px and a color rgba um we'll set to zero comma zero comma zero with an opacity or an alpha value of zero point two and then also the z index of one to bring it up to the top and then we'll set a font size of 0.9 rem to make it a little bit smaller than it is currently okay and now below that we add some con some styles to the link within our dropdown content so we do a drop down content space a to get the link the anchor tag within the drop-down content we set a color of black and we can set some here we set a color we'll set just to black so zero zero zero and we'll set some padding to 12 px and 16 px next we'll add some a text decoration oops text decoration of none to get rid of the normal underline you have um on a link and we'll add a display of block here and now we'll add some hover effects to this drop-down content so i'm going to go ahead and just copy this so i'll type all out again and we'll change this a here and we'll put a colon hover and let's go ahead and get rid of all this here and just say background color uh we'll just set it equal to dd to make it a light gray and that is it now we need to go down and add some styles for the parents the drop-down parents so we'll do a dot drop down or so the drop down item parent so the direct item parent a position of relative and a display of block drop down dash item dash close to add some styles to the close button and this will set a position of absolute uh we'll set a top value of zero and a right value of zero to put in the top right corner and we'll say font size on this to be 1.8 rem and then we'll set a padding dash right to be 5px to give a little bit of space and then we want to transition on this as well to 0.3 seconds and now i want to do the same here we'll have some hover effects so i'm going to copy this just avoid typing again and then on the top here i'll put colon hover and we'll delete all this stuff here in the middle and we'll add a color so we hover over it we want to turn red so we do rgb gb value and we'll set this to 180 comma 25 25. uh we'll set a transition of 0.3 seconds again and so the cursor the pointer to give them some sort of information that they can click on this and we'll save that now let's go ahead and jump back into our show notifications let's remove this d none class save that let's see what this looks like real the page and there we go so everything here is looking good we have our notifications up here and they're all going by one and the button next to it turns red once we uh go next to it looks like this one's a little closer to that button so let's go ahead and just add increase our size a little bit so inside of our style css we put a minimum width here of 300 let's go where is that at right here let's go 325 instead maybe when you go a little bigger on that there we go so 350 looks like it did it and gave us a little more space there and you'll see next to all these we have a red x and we can have another link here that will go to the actual post or comment or whatever or profile in this first case up here now let's go ahead and actually make this thing right here either hide or unhide this list here so i'm going to go ahead and add that dashing class back to hide this now we know we have this good and working and i'm going to add some javascript to toggle this on or off so back inside our text editor go back to our show notifications we'll add back in that dash none class right there okay and now let's go ahead and create some javascript so inside of our js folder we'll have a social js let's go and add a new function here so we'll create a function and we'll call show notification inside of this uh function here we'll create a cons container and this variable will hold the actual notification container so we'll set documents dot get element by id notification dash container which is if you look inside of our show notifications we set this id here novation.container so this has it's the same div that has this dash none so now we can access this and either take it away or add it back on this is just like we did for our comment toggle earlier um so now back in our social js we have our container here let's go ahead and just do an if statement so if container dot class list dot contains and we'll pass in enclosed d-none and we'll do container.classlist.remove e-not so if it does contain this we want to go ahead and remove it if it doesn't if it currently does not contain that then we want to go and add it back so all we're doing is just switching the current state of it just to toggle it on or off so now we'll go ahead and just do a container.class list dot add d dash none add our semicolon there and a semicolon there and save that so there we go that just go ahead and toggles it it's just like this up here this kind of reply toggle that we wrote a while ago now with that done let's go ahead and add an event listener onto our button or our badge here so back inside of our show notifications up here at the top here we have um a span and on the span here we'll add an on click so when the user clicks this we want to do um we want to run that function so and then close here we'll type show note and our empty parentheses right there save that and now that should toggle on and off it's going to give that a shot it's like it's not working yet show notifications is not defined oh i call it show notification let's put nests on the end there and that will come back here page here status again and there we go there is one issue though uh looks like it's putting it in the wrong spot it's putting above everything which is not what we want so let's go and fix that real quick oh you know what i just completely messed up this this position should say i'm absolute here let's go back and try this again now let's go and get rid of this build this page and there we go now we can go ahead and add and remove it or show or hide it just by clicking on this button perfect and now that we have this working here next up we want to do is we want to go ahead and click on this we want to go to a notification view that will mark this notification as seen and then redirect us back to wherever this is pointing to and so it's going to add a view class for that now so i'll open up my text editor here i'll jump into my social views.py so find that down here and i'll scroll down here to the bottom and let's add something here so let's go ahead and add so i'm gonna go ahead and create a class here we'll call it post notification and this will handle any post notification that we have so i might pass our generic view class and then we're going to create a get method so def get pass in self pass and request pass in notification underscore pk object dot pk underscore pk star args and star star quarks so we're passing here is the actual notification pk as well as the object that it's pointing to whether that's a post or a comment that will go here next i'm going to go ahead and grab both the notification and the post or in the object pk and this object.pk will be the post um so actually i'll just name this post just for clarity um and so now we go ahead and grab both the notification and the post using these primary keys so i'm going to go ahead and type notification equals notification dot objects dot get pk equals notification underscore pk post equals post.objects.get pk equals post underscore pk now let's go ahead and mark this notification as seen so if they click on it we can go and mark it at that the user has seen it so take our notification object dot user underscore has underscore scene equals true and then we need to go ahead and save that so we type notification.save to save that change to the database and finally we can go to redirect to the post that we have here so whatever saved here i'm going to go ahead and redirect to that so i'll type return redirect and we'll pass in post detail which is the name or url that will take us to the detail of the post or to the detailed version of the post and i'll pass in pk equals post underscore pk now it's going to create one more class and this one will be for our follow notification so type of class called photo notification that's our generic view class and this will have another get method and it'll be very similar i'm going to go ahead and actually just copy all this just as a starting point because it's going to be almost the same there is a couple small differences instead of a post we want a profile so this will be profile this will be user profile and um instead of redirecting to the post we'll redirect to the profile and i'm also going to change and the met the parameters here from post pk to profile underscore pk which means i gotta change it here as well as down here just for clarity that we're not getting a post we're getting a profile step there we go and those are our two views now let's go ahead and create two url patterns for both of these views so instead of our euros.py i'll put this i'll just put it here at the bottom i guess doesn't matter where you put it we'll put a path here and this will go to [Music] say notification slash int colon notification underscore pk slash post slash int colon post underscore pk and then we need to go ahead and import both of our views and yes do it now before we forget so we'll do um post notification as well as follow notification and now we can go ahead and use that post notification view right here so type post notification dot as on square view like we do for all class based views and then we'll go ahead and give it a name equaling post notification and i'm gonna go ahead and just copy this and i'm gonna use this down here and now instead of getting a post we're going to get a profile and now set post pk it'll be profile pk now instead of post notification we'll do a follow notification and we'll change this name here to follow notification there we go and now with that done let's go ahead and link this up inside of our html so back in our show notifications um on each of these links here we want to send it to that view on that we're on so in this case for these post ones we want to go to the post notification and for these comment ones we'll also go to the post notification because we'll send it to a post once they're done anyway um and then for this last one here this will go to a follow notification so i'll start here at the top for this first post notification i we'll pass in two curly braces two percent signs and we'll pass in url post dash notification and we need to pass in two things first the notification pk and then the post pk so type notification.pk and we can get the post pk by saying notification.post.pk and that's it for that i'm going to go ahead and copy this because this will be very similar actually the same for a lot of these so i'm going to go ahead and just come down here and paste this one right here it'll be exactly the same and down here this will be very similar except instead of the post or no this will be exactly the same as well yeah these are all gonna be the same so these four will be the same so i'm going to just copy this in here as well and then finally for this last one we'll change it from a post to a profile so we called our view or i mean our url we called it follow notification so this will be follow dash notification and it's notification pk notification dot profile dot pk or no it'd be um it'd be notification from user dot profile.pk since we have we're saving the user object on the actual notification we can grab the from user which is who sent the notification and get their profile and so we're doing here is we're going to the user that followed this user we're going to their profile hopefully that makes sense uh let's go ahead and save that now and try this out we'll reload the page and let's say we're getting an error here for our follow notification url pattern it looks like we're not getting maybe i messed up my parameter there let's check that again oh so i bet this issue right here will be because this user right here doesn't have a profile so let's go to user profiles yeah we didn't set that one up before we added the automatic profile um creation when they sign up let's go just create them a profile real quick so that will work so we'll save that come back here of the page uh looks like we have the same issue for more of them so let's go ahead and just create all the profiles um for all the users we haven't made one for you um i think this is the last one oh no maybe it's this one there we go i think that might be it let's go and just try this again now oh you know what the issue here is i made a small mistake so for our uh let's go back to our sublime text right here for our comment ones here we are passing in the notification.post.pk but that's empty on these so anything with a comment this is empty but we still get the posts and so we can do that by going kind of through this a different way so back to our models here every comment here has a post on it so we can go on to the comment and get that post off that comment so inside of our show notifications.html here on both of these comments ones we'll do a comment dot post to get the comment first which is not empty and then get the post that matches that's connected to that comment let's come back here click here build the page and there we go and now we come up here click on this we get our drop down we'll click on one of these say he's given us an error notification is not defined um oh i did i forget to import that i must have forgot to import that my views we haven't used yet so i probably forgot that let's go to our views real quick and import that so up here at the top here yeah i didn't import um notification right here let's go ahead and save that come back here reel the page and it takes us to that test two example profile come back here and you notice now it's two because we clicked on that and the user has seen that so it goes away clicks on the next one goes to a comment um and we can see their reply to a comment and now it's one click on this again and now it goes down to zero and takes us to that post so it's all working very well we're able to add um notifications and go to them and see what they are um from our navbar so now we got that working instead of creating comments from our actual like admin site let's go ahead and create some comments automatically when certain things happen so when someone replies or likes or does something else let's go and just add that that automatically so back inside of our text editor here let's go back into our or we'll come down here our views and we'll add some logic to different parts of this we need to add this every time they create a comment or when they like a post or they follow a user so the first place we need to put that in will be on the post detail view so right here this post method runs every time they create someone creates a comment so at the bottom here we also want to create a notification so right before the context here once we have everything else created i'm going to create i'm going to add a variable equals notification set this equal to notification.objects.create and we'll pass a notification type and in this case this is a comment so it's a type of two we put in our models here um where is it right down here like equals one two equals comment three equals follow so we'll set those codes based on what we're doing in this case we're commenting so we put a two we said that from user of being whoever's logged in so let's be a request.user the e2 user will be the post.author so whoever this author is we want to send a notification to them that this user liked or this user commented on their post and finally passed the post and just post equals post to do that save that and let's try that real quick so now we come back here um i'm going to go ahead and jump into the app here i'm going to create a post first just so i can see the notification um looks like right here i had a notification let's go ahead and add a comment real quick [Music] and i will see up here in the navbar this changed to a one and this will show the um the comment here if i went away off this page came back here and clicked on this it takes us to that post and you can see our comment right here so that's all working well let's go do the same thing now for the other types so we we come back to our text letter here we've come down here we have a comment reply view so i really reply on a comment we also want to create another notification so once again this will be very similar i'm not sure to copy this just to save some time here go and copy this come down here to our account reply view and right before right before we turn the into the redirect route we want to go and create a comment so right here i'll paste that in there this is a comment reply so it's another comment so our type is still two the from user will be the request.user the to user will be the parent comment author so this will be parent underscore comment author so whoever wrote the comment that they're replying to and then the post there's no post because this is a comment so change this to a comment and the comment will be the new underscore comment which you'll see uh if you come back here we create a new comment and this is what we want to save in this notification because that's what their their response is now that done let's go ahead and go down to our next one so we keep scrolling down delete view comma delete view profile view um edit view we have an add follower that'll be another notification type so down here let's go ahead and paste this in here again and this one will be a little different this type will be three because we're it's a follow notification the from user will be request.user again uh the to user will be the profile.user so this will be profile.user and now instead of any post or comment this will all be blank so we can get rid of all of this this there'll be nothing in the post or comment for follow notifications and that should be it for that one we scroll down some more and you'll see we have an ad like this is another notification type so we're gonna add this down here where they actually add the like so we don't wanna put here at the way bottom we wanna put it right below this line inside this if statement that way only sends a notification if they actually end up adding a like um to this post or comment or in this case it's a post i guess because it's the ad like view so once again here i'm going to go ahead and just paste in this com this notification its type will be one this time since it's a like notification the from user will be request.user again the to user will be the post dot author just like this and the post will be post the rest of this will be exactly the same um down here comment like once again the same thing find the if statement we actually add the comment which is right here below this paste in a notification this will be a type of one again the from user will be the request.user the two user will be the comment.author this time so this will be comment dot author and this instead of post will put on a comment and this will be equal to uh comment there we go and we keep scrolling down here we have a dislike user search list followers post notification following so that should be it there i think let's go and save that and let's try out different types of notifications so we'll reload the page first let's go ahead and add a like we'll see added and since i'm logging into admin and i'm liking my own post my notifications are still showing up you could change that if you wanted to to not let that happen but in this case i'm gonna leave it how it is especially since it's easy to test this way um so that worked well we have a liked your comment uh we hit the same thing on the post you have a notification that says like your post um and then finally we can go ahead and click on these that will take us to the post this will take us to the same post because this is the account we liked now finally let's go ahead and log out let's create a new user and follow admin and see if that notification works as well we'll create a user let's search for admin so use our search bar we'll type admin or just type add we'll go to the admin profile we'll click follow now let's go ahead and sign out let's sign back in with our admin profile and there we go now we have one more notification it says new test has started following you click on that it takes us to the new test profile so this is all working great we have everything working we can add notifications it will show up up here so the user can see the new notifications that are showing up and it automatically creates some on the different events that we want to create them on there's one more step we need to do now which is adding a way to remove a notification so i jump into a post i hit like and it creates a notification there's this x button over here but there's right now it doesn't do anything we need to add some javascript to make this work so the first step will be to add another view so let's go back into our text editor here let's go to our views.py at the bottom here we'll create a new view this one will be a class of remove notification passenger review and this will have a delete method because we're going to use a delete request to send to this view to make this all work put self request notification dot underscore pk star args star star quarks we'll set notification equals and encapsulate notification.objects.get and we'll pass in pk equals notification pk now what we want to do here is once again we want to set it to has been seen so do notification user underscore has scene equals true and then notification dot save and another thing i guess i should mention real quick before i go any further up here you'll see when we created notifications we didn't put a save anywhere and that's because this dot create method does it automatically for us so in case you're wondering we didn't need a save method here because this does it handles it for us in one line but in these other cases where we're just setting a value like this a property on it we have to call the save notification to actually save it okay and now with that done the last thing we'll do is just redirect somewhere to send a a or a center not redirect but send their an http response so we know that everything works fine and what we send here doesn't really matter at the top here i'm going to import http response and i'm going to send whatever so i'll just send um down here i'll just um type http response i'll just send some text doesn't matter what it is i'll say success and it'll pass a content type equaling uh text slash plain and this doesn't really matter because we will send um we'll handle redirect in our javascript um later on anyway so what we do here on this last line doesn't really matter let's save that and now let's go ahead and add one more url pattern for this so inside of our urls.py uh we'll create one more first actual import that view so up here at the top we'll import remove notification and down here we'll create a path this will be notification slash int notification pk actually we'll put slash delete slash notification pk and this will be um we'll use our remove notification dot as underscore view since it's a class based view and we'll do name equals notification dash delete there we go let's go ahead and make sure we have our commas here at the end of the lines we do we'll add one more here and we'll save that and so now we can click on that button and we make it do something but we don't want to just put a link to this url we want to go to javascript send a delete request to this url and then redirect us to wherever that we're um we're going to next which will be where that's linked to and so to do this we'll add some javascript so we'll come into our social js and last more functions here this first one here comes from um django themselves yes so right here you'll see ajax and down here you'll see a function get cookie and that will get the csr of token itself so we want to use this function right here so first i'm gonna grab everything but this last line grab this copy this and put it inside our javascript so come here and below this function here we'll paste that and now we can go ahead and create another function and we'll call this let's call it just remove notification i'm going to pass in two things here a remove notification url and i'm going to pass in a redirect url so we want to get the actual notification url and then the actual place to go next and so this will be our view that we created this will link to the view we created and this will be wherever the actual notification itself is linked to the post or comment or profile okay and now let's go ahead inside this function first we need to add a line to get this and so you look back on that line there we have one line here we didn't grab let's grab that one now let's copy it and come back into our text editor and we'll paste it right there um now below that we can add some javascript to make this request so first we'll say var um we'll actually we'll say let's xml http equal new xml http requests speak capital r request next we'll go ahead and actually set the logic for what happens when we successfully send this request so do xml http dot on ready state change equals function and this function will have no statement that checks for the ready state being done so xml http dot ready state equals equals xml http request dot done now is if it is done we want to check the status if the sas is 200 that we know everything worked well and we can go ahead and redirect so do an f at f xml http dot status equals equals 200 let me go ahead and redrag so i'll do window dot location dot replace and we pass now redirect url and this window location at the place will replace the current screen with this new one and so then we'll go back they won't be able to use the back button to get back it also prevents us from having a bunch of back button presses to get back to where they were before or some other issue there um there we go so that's all we need to put in there to for that to work if if it's not a 200 response you want to go ahead and just show that there's an error so i'll do an else statement and i'll do an alert and say there was an error i'm going to put some semicolons there and now finally at the end of all this function right here this nexus function here let's go ahead and do an xmlhttp.open to actually create the request and we'll pass in delete as the requests type that's what our view has in the delete request pass and remove notification url that's where you want to go and passing true next we'll do an dot xmlhttp.set request header and this header will be our our token that we created so up here we grab this token but we actually need to use it now so inside of here i'm gonna go ahead and pass in quotes x dash csrf token and then csrf token which is this variable right here okay and with all that done we can go ahead and do xml http.send and inputs our um semicolons and these lines and that should be it that should actually send this request and then it hopefully will redirect us to wherever we went before so now back inside of our show notifications.html we need to add an on click here to handle um running that function so what we'll do here is in the span here we have a class and after this class we'll go ahead and add on a click be on click equals and in quotes here we want to go ahead and run that remove notification function so we'll type remove notification and in quotes here we need to pass in a few things or in parentheses here we pass in some things but since we already use our double quotes here we need to use our single quotes for the actual django url here in a second so i'm going to go ahead and above the tab key there's the backticks i'm going to use that key here and then inside here we'll go ahead and put our jingle url type url and put our single quotes notification dash delete and then now we pass in our two different um things to this url to make it work so first we need to pass in is the notification pk so we'll type notification dot pk that's actually the only thing we need to pass in here so we pass that in um and we'll go ahead and close off that back tick there and we'll put a comma and put two more backpicks and next you'll look at our function here we want to redirect somewhere and in this case we want to redirect back to everywhere before and so to do this we can pass in just the current um path and just go back to that same path and that will handle going back to where we were before because when we hit the x we don't want to go anywhere we want to stabilize so inside these two curler braces here i can type request dot path that's a variable that's in the requests that's just the current path and that is it for this and these all should be exactly the same there's no real difference to how these are set up so i can go and just copy this whole on click here and just paste it for each of these um span tags so once more here just to review this what we're doing we're passing in our notification url itself use that django url the delete notification delete url that goes in here and his redirect is where we're currently at so we hit the x we don't go anywhere we come back to the same page after it finishes we go ahead get the token we create a request we set the success to redirect us to the redirect url if there's an error we'll show just an alert just a little box that shows that there's an issue once we have all it done we can go and create the delete request passing the remove notification url that's where we're trying to go we can set the header to be our csrf token um that's required otherwise django will give us an error and then finally we can send the requests hopefully that all makes sense let's come back to our site here let's reel this page and it looks like we're getting one issue here um notification delete uh did i call it something else no oh i forgot to put the closing um greater than uh character there go ahead and save that come back here reload the page and there we go so now we have a notification here right now we hit the x it gives us an error so let's see what that error is um in our console here let's go to mobile so we can see it what is our error so we can go to our network tab go to the response and see what this says so it looks like our move our move notification didn't return an http response oh you know what i bet i forgot to put the return keyword in front of it that's exactly what i did here so on this line here i didn't return anything this is why we need to return to something otherwise we'll give this error but i forgot to type return in front of this and we'll save that now let's go and try this again let's go and close out all this hit okay refresh the page let's add notification real quick there we go hit the x and there we go it just goes away and now it's no longer in our notification list here we can click on a post here let's just add a comment here submit we have notification we hit the x it just goes away so that's all working really well now we have now we have notifications um set up for everything now and it's all working pretty well and that is where we're going to stop today we have all this working it was kind of complicated and it's a good very good time point for it now we'll come back later and we'll at least a few more things we'll probably add to this before we end this project but now we're getting a lot of different features in here that um that was suggested to me before i ended this uh so thank you for the suggestions if you have any more let me know otherwise i'll probably just make a couple more videos and we'll move on to a new project next but the code will be in the description below both the starting and ending code i'll put links to these two different links up here and there as well in case you want to read up on those and there also will be the link to the written tutorial that's really it thank you for watching and i'll see you in the next video

Channel: Legion Script

Views: 3,312

Rating: 5 out of 5

Keywords:

Id: _JKWYkz597c

Length: 66min 50sec (4010 seconds)

Published: Mon Mar 22 2021