Python Blog Tutorial #4 - Adding And Deleting Comments

Key Takeaways

hello everybody and welcome to part four of this flask blog tutorial series in this video we're gonna be working on creating comments so how can people add a comment to a post so with that said let's go ahead and get started [Music] all right so the first thing i want to do here is just fix a small kind of inaccuracy that we made in the last video so previously if we look at this post function right here the way that we were grabbing all of the posts from a specific user was we were querying the post table so we're saying post equals post.query.filterby and then we had author equals user id now i just realized that we really don't need to do this because if we go to models here and we look at the user table we have a field called posts and this gives us all of the posts so rather than us going and looking through the post table trying to find all of the posts associated with a user what we can do instead is say that post is equal to user.posts since we have the user here based on their username we can simply say post equals users.post and then well we can access all of that users posts pretty straightforward but that's kind of the change here this is much more efficient this means we don't have to search the entire table we just already know what all the posts are so hopefully that's clear but that's just a small mistake we needed to fix now though we want to start working on comments so comments are a little bit more complicated than what we've done previously but let's go to models and let's start setting up a comment model all right so we're inside of models.pine now let's think about what we need for a comment and start creating the comment class so i'm going to say class comment this is going to be db.model and then i'm going to actually copy all of the stuff from the post here because we're going to use all of this for a comment and i'll describe why in a second so for a comment we need an id just like everything else we need an id so we add that a comment is going to have some text so we add that i'm actually going to make a maximum length on our comments here i'll just make it say 200 characters just to make sure we don't have any super long comments okay then we're going to have a date created yes we need that we need to know when the comment was created we also need to know the author of the comment so we'll leave this the way it is here and we need to know the post that the comment was on so i'm actually going to copy this author here and paste this and change this to rather than say author say post underscore id i'm then going to change the foreign key here to say dot id and we can actually leave this as is so for a comment we have an id text the date it was created the author and the post id now since we've added this foreign key here and this foreign key for author we need to add the relationships on the corresponding tables the user and the post table so again this is a one-to-many relationship one user can have many comments one post can have many comments and so on both of these tables we need the corresponding relationship so now instead of just having posts here we are going to have comments so let's make this comment and let's change this to say comment and let's make the back graph say state as user sorry so from a comment we can access the user who made that comment nice now on post we need to add a relationship i'm just going to copy this here and this will be called comments so this is actually going to be the exact same thing except instead of the back graph being user this will be post and there you go we've just created our relationships so one post has many comments one user has many comments and has many posts there you go each comment has a user or author associated with it and it has a post which is referenced by its id nice there we go we've now created the database tables that we need so now that we've created these we need to actually make some way to add a comment and to view all of the existing comments so let's do that i'm going to go to mypostdiv.html now this is another huge advantage of what we did in the previous video now that i want to add stuff to what's going to show up on the post i can do that by simply modifying this one html file and again it will apply to both of the pages that inherit from it so the post page for each user and the home page showing all of the posts so what i want to do is inside of the card body right here i want to add something to display the comments and to actually create a comment so i'm going to make a form inside of the card body here and i'm going to say form class is equal to this is going to be input hyphen group and then m b hyphen 3 which stands for margin bottom 3. you can look at the bootstrap documentation to see exactly what this is going to do but essentially this is going to add three times the default text size as a margin to the bottom of this form so it spaces it out a little bit again look at the bootstrap documentation if you want to see exactly why that is what it is but that's my basic explanation for you next i'm going to say the method is equal to post and i'm going to say that the action is equal to a different url and this url is going to be create hyphen post so what this will do is it will actually send a po sorry not create post it's going to be create comment is it going to send a post request to the create comment url with the information inside of this form this information is just going to be the actual text of the comments right so let's end the form here and inside of the form i want to have an input this input is going to be the text and then i want to have a button so i'm going to say input type equals text i'm going to say that the id is equal to text that the name is also equal to text and i can end the input like that and i want to see if there's anything else i need to add here yes i'm going to add the class which is equal to form hyphen control and i think that's good for now actually i will also add a placeholder so i'll say the placeholder is equal to comment something exclamation point okay so that's my one input tag next i'm going to add a button so i'm going to say button type is equal to submit i'm going to end the button and i'm going to say the class is equal to btn btn hyphen primary and yes we will make on this button the text say comment nice so now we should have some form that shows up underneath the text associated with our post that lets you actually make a comment so let's just quickly refresh the page i'm going to rerun my app here and let's see what we get so let's open up the correct window here let's refresh and notice we get comment something awesome so what i'm going to do is just add a break line so that this goes down a little bit so i'm going to add br like that and now the form should be beneath that there we go okay so that looks better so if i type something like hello and press comment notice it brings me to a url that's not found that's because i'm trying to create a comment and well i haven't yet set up that view this is all good the spacing looks nice perfect so now the next thing that i need to kind of think about here is how am i actually going to know which post i'm trying to create this comment for well the way i can do that is by actually sending in the url the id of the post that i want to add a comment on so notice here i said the action is equal to create comment what i'm actually going to do is make this create comment slash and then inside of here i'm going to put the post dot id because this is inside of the for loop that's generating all of the posts because we're going to have multiple forms to create comments on different posts and each one of those kind of submit buttons needs to tell the backend what post we're actually creating the comment for so in this case we'll say create comment post id so let's just do a quick refresh now and you should notice now when i press comment it brings me to create comment slash one it will send through the text and then we'll grab the text from the post request and we can actually add the comment onto this specific post so let's do that now because we want to make that url actually work so let's go to views dot pi and let's make a new view or a new root sorry so views dot root slash create hyphen comment slash and then this is going to be post underscore id okay and then we'll say define and then we will put create underscore comment and we will take a post underscore id you should make sure that the name here matches with the parameter that you put inside of i guess just the parameter that you put inside of the function okay now what we're going to do is we're going to grab the text from the post request so we're going to first make sure that this is only able to accept a post request so methods equals post and then we're going to grab the text we're going to say text is equal to request.form dot get and this will be text we'll say if not text then flash and this will be what should we say comment cannot be empty okay nice and then we can return a redirect and this will be url underscore four and this will be views.home and actually again i'm just going to put this at the bottom of the function because we're going to do this no matter what okay so if not text then we're going to flash comment cannot be empty this will be with the category which is equal to error okay otherwise if we do have text then we want to make a comment pretty straightforward so actually sorry let me just add the login required decorator here we need to make sure we have that now we're going to create a comment so the first thing we need to do is make sure that the post id actually exists right that the post that we're trying to add a comment for exists so inside of here we're going to say post is equal to post dot query dot filter underscore by and we will say id is equal to post underscore id okay easy enough we'll now say if not post or actually we'll say if post and then we can do an else here so if the post didn't exist then we can flash post does not exist with the category equal to error okay so if the post does exist then we can create the comment if it doesn't we're going to flash the error message so if the post exists we'll create the comment so we'll say comment is equal to a new comment we need to import comment here okay and this comment what does it need well the first thing it needs is text so we'll say the text is equal to text that we grabbed here we'll say that the author of the comment is equal to the currentuser.id and we'll say the post underscore id is equal to the post id and i think that's all we need to make the comment next we're going to say db dot session dot add we'll add the comment to it and then we'll say db dot session dot commit like that now we could flash a message saying hey the comment was added we don't need to i'll leave that up to you i'm not going to flash the message and that should be it for actually creating a comment nice now i just remembered that since we created this new database model here we need to make sure we import this in init.pi so i'm going to go to init.pi i'm going to make sure i import comment here and then i'm going to delete my database and rerun the application to make sure we create the database with the comment table so let's rerun this now app.pi awesome okay so now let's see if we can actually create the comment we won't be able to view the comment quite yet but we'll just see if we get any error or anything from the server so let's refresh it says okay we're going to have to sign in so i am going to have to make an account again because we just deleted the one that i had so let's do this okay nice all right sign up user created let's make a post let's say test post and then we can comment something let's say hello and let's press comment notice when we do that we don't get an error if you go here we can see that we sent a post request to create comment one so now there should be a comment on this post so now we need to deal with actually viewing all of these comments okay so let's go ahead and do that so i'm going to go to postdiv.html and for now very simply like we did before we're just going to run a for loop that looks at all the comments and displays them just so we can see if it's actually working so right before the form above this i will actually start putting all of the comments so let's do another break line and let's make a for loop here so let's go four comment in post dot comments okay then go percent percent and four and we will just display the comment dot text so we'll say comment dot text okay so this should show all of the comments for us so let's see now if i go here and refresh that we have this comment called hello now if i go here and i'll do test and i comment it notice it adds it right here perfect that's exactly what we want okay so now that commenting is working we need to display these comments nicely now what i want to do here is make it so that it doesn't by default show all of the comments i prefer if it showed a little like message that said view x comments so maybe there's two comments then there'll be some kind of gray text that says view two comments and you press that and then it shows you all of the comments that's kind of what i'm envisioning so let's see if we can create that so to do that we're gonna need to first get rid of this for loop here and one of these break lines and we're going to create a collapsible div this collapsible div will display all of the comments then we'll have that button that will actually uncollapse it right expand it so we can see all of the comments that are there so we will continue in one second we need to quickly thank the sponsor of this video and this series which is algo expert algo expert is the best platform to use when preparing for your software engineering coding interviews they have mock interviews a data structures crash course they have over 160 coding interview practice questions and the best instructors on the platform one of which is me get started using algo expert today by clicking the link in the description and using the code tech with tim for a discount on the platform all right so i'm going to create a div this div will go underneath the card text but we'll stay inside of the card body we'll actually go underneath this break line and this div will have the class equal to collapse okay then this div will have an id and this id will be equal to comments hyphen and then inside of here we are going to have post dot id just so we know what comments we're going to be collapsing or uncollapsing because the thing is we're going to have multiple comments right we'll have multiple posts each post will have multiple comments so i need to make sure when i press a button it's only expanding or collapsing the comments associated with one post it's not doing it for all of the posts so that's why i'm adding this unique id here comments hyphen and then is equal to the post id or has post id here so that we can expand or collapse the correct comments on the correct post hopefully that makes sense but that's why we're doing that and that's why you'll see that kind of more and more as we go through here just to make sure we have a unique identifier for all of these divs so we have div collapse now inside of here i'm going to say div class is equal to this is going to be a card okay and then we will end the div like that now inside of this card i'm going to have a card body so i'm going to say div class is equal to card hyphen body and the id of this card body is going to be equal to comment hyphen expanded hyphen and then here we're going to have post id just in case we need to reference this okay we're going to end the div here and inside of this div you probably guessed it this is where we're actually going to collapse uh the comment so that's where we're going to show all the comments and it will be collapsed and expanded so here we're going to do our for loop so we're going to go percent percent for comment in post doc comments okay and then we're gonna go like this percent percent and four all right so now inside of here i'm going to make a div so this div is going to have the class equal to the following there's a lot of classes here this is going to be d hyphen flex this is going to be justify hyphen content hyphen between you've seen this before we're going to do the same thing we did before i'm going to say align items hyphen center and then i'm going to end the div now the reason we're having this is because i want to have a delete button beside the comment that only shows up if the user who made the comment is the user who signed it so exact same thing as the post is what we're doing right here we're going to show a delete button if the user who's logged in is the one who made the comment so that's why i'm adding these classes and again we'll actually utilize these classes in a second once we're adding the delete button so we have this here and what this pretty much does is make it so that any items we have inside of this div are evenly spaced out in the container that they're in so if we have one item it will be on the far left hand side if we have two items we'll have one on the left and one on the right we have three items we'll have left middle right that's what this class actually does that's why i'm using it anyways now inside of here i want to have an a tag for the author's name so the author of the comment i want to display and i want to have it say like tim if that was the name colon and then what their comment was just like you would see on instagram or like any other social media site right so here i'm gonna say href slash post slash and then this is going to be comment dot and user dot username okay then we will actually put the exact same thing here comment.user.username and then we'll end the a tag then we will do a colon and then we will do the text of the comment so comment.text so now we should see a little highlighted name which is the user's username when you press on it it brings you to all of their posts and then it shows you the text after their username i'm just looking here i think for now that's actually all we need to be able to see the comments in kind of a nice format we do need to show the date of the comments as well so actually we can try to do that now so what i'm going to do is make a new div here and i'm going to say div i'm going to say slash div and inside of this div i'm going to have a small tag this just makes the text inside of here small right and i'm going to say class is equal to text muted and then i'm going to end the small tag so slash small and inside of here i can just put the date of the comment so comment dot date now since this div and this div are inside of or sorry since this div now that i'm thinking about it uh this div here needs to go inside of this div so sorry about that guys let's put that there and i think that should be okay okay so now that i'm thinking about it i need to rearrange things a little bit i'm gonna take this div and put it inside of this div so this here is inside of this and then i'm going to put a div around this i'm going to say div like that and i'm going to end the div here and now you see that we have this div and this div inside of this one larger div so this means this item will go to the left and this item will go to the right because we have justify content between and align item center so this will go to the left and this will go to the right as i was kind of explaining before let's just refresh though and see if this works so let's go here and refresh and notice we get this comment test but it's not quite showing everything that i wanted it to show it should say the name and all of that kind of stuff but it's not showing that so let's see here for comment in post.comments we should be able to see this stuff but it's not showing that okay let me refresh here still not showing that which tells me that comment.use is most likely not working so let me just go to my models and see why that might not be working so if i go to comment i have the author which points to user id if i go to user i have my back graph which is equal to user so i should be able to access the user from the comment but for some reason that's not working okay so give me a sec guys i'll be right back and see if i can figure out how this works all right so i was wondering why the comments weren't showing up and the reason why they weren't showing up is because currently they are collapsed they're not actually being shown on the screen so this div here the stuff that i'm highlighting says collapse so the way that we can actually see these comments right now is we can change the class to just not say collapse so i just remove collapse right there and now if i go and i refresh notice you can see all of the comments and you can see the username right like you did before so there you go you can do that now notice though it's not showing the date the reason it's not showing the date is because i put date here when this should say date created so if we change this to date created now and i go here and i refresh now we get the date and time that this comment was commented at perfect there we are now we need to do is make it so there's a button that collapses and uncollapses these comments so we're going to go back to the post div page and underneath or actually right above the form here we're going to make the button that will collapse and uncollapse where is it this div right here so i'm going to go back and make this collapse okay and now we want to add the button here so what i'm going to do is i'm actually going to do an if statement i'm going to say percent percent if and we're going to say comments or sorry post dot comment pipe length now what is this so what this actually does is allow us to get the length of the comments so unfortunately unlike in python where you can just do len here in the uh jenga template what you need to do is use what's known as a filter there's a special name for this i forget the exact name it's something like a filter but you add this pipe and then you add length and what that does give you the length of this which is a list so that's pretty straightforward but that's how you get the length of any list in jenga so in this case gives us the length and just going to check if this is greater than zero the reason for that is we can't view any comments the button shouldn't do anything if we don't have any comments to view right if there's zero comments so we're only going to show the button if we have any comments to actually view now what i'm going to do is add an else here and then i'll just end the if just to make sure this is done for now so let's go and if and in this else so if the length of the comments is actually equal to 0 i'm just going to show some text that says no comments just to be clear that hey there is no comments on here so i'm going to say small i'm going to say class is equal to text hyphen muted and i'm going to end the small like that and i'm just going to say no comments so if we have no comments it will say no comments otherwise though if we do actually have any comments then we want to make a button that will collapse this dip or sorry expand this div or collapse it if it's already expanded so we're going to make a button i'm going to say slash button and then here we're going to put view and then we're going to say post dot comments pipe length and then comments so if we have like four comments it will say view four comments view five comments so on and so forth now let's just make this a capital because i think that will look nicer and what we're going to do is on this button we're going to put an a tag and this a tag is going to have a data hyphen bs hyphen toggle which is equal to and this is going to be collapse we're then going to have our href which is equal to pound which stands for id and we're going to put in the id of the div that we want to expand so in this case the id is comments and then post div so we're going to grab that and put that right here and then finally we'll say roll is equal to button and we can end this a tag right here okay so let me save that so we're saying the data bs toggle is equal to collapse the href is this div right here that's what we want to collapse or expand we have the role equal to button and then this is saying view whatever the number of comments comments is okay so that should be fine the one thing i'm going to do though is put this all inside of a class so i'm just going to do a p tag here i'm going to say class is equal to card hyphen text and then i'm going to end the p tag right before the form okay so let's try this now let's refresh and notice it says view for comments and then when we press this it expands or unexpands this nice now obviously view for comments is not looking like it should look like so let's go ahead and fix this i believe this is because i have a button here and instead i want this to be small so my apologies there that shouldn't be a button this should be small okay so let's refresh this now and notice we now get vue for comments like that and when you press on it well it shows you the four comments beautiful now the thing is i don't know if i want this to actually look blue for now i think it's fine if i leave it blue but let's just make sure this works with a kind of post that has no comments so let's say hello here and then notice it says no comments so i can't actually press on that yeah you know what that looks good to me and then if i add a comment hello i now can view one comment by clicking on it like that perfect so now i can view the comments so the next thing i need to do here is make it so that i can delete comments so let's tackle that all right so to delete the comment we're obviously going to need a delete comment button so we will implement that in the same way that we implemented the delete post button so what i'm going to do is just go to where that delete post button is so it's right here in this button group i'm going to copy this button group i'm going to paste this inside of this date created div and i'm going to put it to the right of it so it's going to go after that so if i save this now we have our button group div like this so when we press on this button it's a drop down button it should uh pop up the delete button so let's just see how this looks for right now without adding any additions if i refresh this and i go here notice now we have this pop-up button that we can press on right beside the date that looks good enough to me that's fine uh yeah so we'll leave it like that for now now the thing is i need to make it so we can only view this button if you are the author of the comment or if you are the author of the post because if you're the author of the post you should be able to delete other people's comments and if you created the comment yourself well you should be able to delete that comment so let's make sure that that is the case so what we're going to do here is simply add a if statement so we're going to say if the user which is the currently logged in user so if user.id equals equals comment.author or user.id equals equals and then this would be post.author so that'll be our if statement and then down where is it right here we're going to have the end if so percent percent oops for some percent and if nice so now this should only show up if we are the one who created the comment or if we are the author of the post so i trust that's going to work what i'm going to do now is change this href so rather than delete post it's going to be delete comment and rather than post id it's going to be comment.id and that should actually be all we need to delete the comments so let's go here and refresh and let's just see what happens if we press on one of these comments so if i press on delete it goes delete comment slash three perfect that seems to be working all right so now let's implement the view to actually delete the comment so let's go to views.pi and let's make a view here so let's go at views dot root let's do slash delete hyphen comment slash and then inside of here we're going to go comment underscore id and we're going to at login required to find delete underscore comment we're going to take the comment underscore id and we're going to do the same thing we've done before we're going to make sure the comment exists we're going to make sure the user is authorized to delete the comment and then of course we'll delete it if all of that is good so we're going to say comment is equal to comment dot query dot oops dot filter underscore by and then this is going to be id is equal to comment id we're going to get the first result as there should only be one we're going to check if we have a comment so we're going to say if not comment and i got to make sure i spell comment correctly so if not comment then we're going to flash the message comment does not exist and we'll say with category equal to error okay flash okay that's all good and then we will return the redirect and this will be url4 and this will be views dot home so actually again i'm going to take this redirect here and i'm just going to put this at the bottom of the function i should really just start doing that and we'll do an else here so if not comment we'll actually say l if the current user dot id is not equal to the comment dot author and the current user dot id is not equal to the comment dot post dot author then what that means is we are unauthorized so flash uh you do not have permission oops to delete this comment okay and we'll say category is equal to error and then otherwise that means we're good we can delete the comment so we will say db dot session dot delete and we'll delete the comment and then db dot session dot commit and again i don't think we need to flash the message i think it's fine we can just delete the comment and then redirect back to the home page awesome okay so let's try this i'm going to rerun the application and now it should actually let us delete the comments let's refresh here let's view a comment and let's delete it when i do that notice it deletes the comment we now only have three left now some of you may be wondering at this point in time why does the page refresh when i do this ideally it would be great if when you delete a comment or you delete a post it doesn't refresh the page and it maintains the page state there is a way to do that but to do that you need to use javascript and i told you in this video we weren't going to use any javascript so that's why we're doing this in kind of the page refresh way but if you wanted this to actually work without refreshing the page you would need to use javascript to do that now i'm going to show you in the next video a way to do this with javascript i'll just show you one basic function and you'll get the idea of how you could kind of change the code to do that but i wanted to make this as beginner friendly as possible and as python heavy as possible so i kind of omitted doing it with javascript hopefully you guys are okay with that again in the next video i'm going to show you how to do this with javascript so the page doesn't refresh when we implement likes on the post and then that will show you how you could obviously change the code for all of this okay but with that i think this is all working so let's do one final test let me log out here and let's actually just create a new account so let's go sign up we'll go tim2 yeah i'm gonna say tim2 at gmail.com tim2 okay let's make our password and let's sign up okay so user created now let's make a comment hello comment and notice this is the only comment i can delete because that's the only one from me let me just make a comment here hello again and let's make a post let's just say another post okay and let's sign out and sign back into my other account so let's go tim gmail.com type in my password log in and now let's see if we can delete that person's comment so yes tim2 i can delete his comment because i am the author of the post good i have deleted the comment awesome and here it says no comments perfect that's exactly what we want nice okay so with that said i think i'm going to end the video here in the next video what we're going to do is add likes to the post we'll do some kind of finishing touches and as i mentioned i'll show you how we can make it so the page does not refresh when we like or unlike the post with that said if you guys enjoyed make sure you leave a like subscribe to the channel i will see you in another one [Music]