Laravel Comments

this is part of my premium course so if you liked it be sure to check out useful laravel packages calm okay let's take a look at this comments package this package allows you to easily implement comments in your laravel app let's go ahead and take a look at how to use it so before we get started let me just show you around in the app I have prepared here so I have the author scaffolding for laravel setup so you can log in and register my database is set up and I also have a few routes here I have a posts route that just dist sell all the posts and I have two posts in here and if you click it it goes to the show method and it just shows the contents so the idea is to add comments here so this package makes it really easy so let's go ahead and install it just composed to require it as always okay let's run in the migrations it creates a comments table where all your comments are stored okay that says to add the commenter trait to your user model okay so go to our user model and it's add that trait so let's use it and add commenter here okay now we have to add comment below to the model we want to use and in our case we're using a post model so let's go ahead and copy this let's go into our post model and let's use that and let's use commentable okay let's publish the config here okay and it's also published the views which you don't have to do but if you want to customize it you can do that and same for migrations but I'm not gonna modify the migration so we won't do that okay so now we just have to add this to our view here so in our case that's just let me say this let me show you the show route which is right here so post controller add show and all this does is passing the post and show the show view and believe it or not all you have to do is paste that in and we have comments so if I show you here sorry this should be a post and that's being passed in from the controller there we go so by default this package requires you to log in but there is an option to have guest posts so you don't have to login so let me just make a few users here so I'll make one with my actual email because this package uses Gravatar and you can see that when I make a comment here okay so now I'm logged in and let's go ahead and go back to that route so posts one and now you can see the form for entering a comment cool and it also supports marked down here so let's add a comment Oh add some markdown and let's submit it there we go there's our first comment so it's using bootstrap under the hood bootstrap 4 and when I did the art of scaffolding it included bootstrap for so everything looks nice here and this doesn't know like it's being pulled it but it actually is yeah so there's strong tags you just have to style that appropriately and like I said my Gravatar is pulled from gravatar.com you can edit and it uses bootstraps modal here you see edit update it there we go cool now you can also reply to comments so if I log out of here we should still be able to see that but like I said we have to turn on guest posts if you want to do that but let me make another user and reply to this comment to show you that you can do that so let's make another one called user ok and let's go to that post route and it's go to first post and you can reply to it this is a reply to Andre and you can see that it indents it here ok let me show you guest posting so if you want to turn that on go into the config I believe it's called comments and then it's somewhere here there's also support for requiring approval for the comments so I'll just set this to true if you want and here is guest commenting so now if I set that to true for fresh this actually let me log out and go to posts and you can reply here you have to enter your name and email guest guest guest com this is a guest comment cool submit and that works now if you're not using bootstrap we can easily modify this because we did publish the views so for example if I want this to be in descending order so the latest post is on top so right now the latest post is on the bottom we can change that so we go into the published views which is in here some our vendor comments not sure which one it is but we'll look for it here I think it's this one comments and here we go so let's sort of I created at what we want sort by descending created at so this is just a collection so this is a method on the collection and that will change the order so there should be a top because this is the latest post ok cool and say we wanted this form on top so that kind of makes sense right after the post we want the form so let's add that so here we would just change where's the form here so we just move this on top so on this entire block here move this on top so right before the UL and now the form should be on top cool and again you have full control over this so if you're not using bootstrap you can just modify this for your own classes and make a look at the way you want relative to your brand so this package was designed for a traditional server rendering application where the forum posts back to the server and we have a full page refresh however it is possible to use the database schema so you can make it a JavaScript component so it just makes an ajax request and it doesn't make a full page refresh that requires a bit more work let's see if we can create the beginning stages of using a JavaScript component so I am going to run my watch her first as my BMR and watch and then I am going to make a new JavaScript component so Jay yes actually let's make it here first so I'm gonna call it comments list and I'm going to combine the form and the comments just cuz this is an example and I don't want to do state passing state around here okay so let's make that comments list top view and let's make a template say comments go here front end and let's go into our post blade sorry it's showed up late and let's put it right above here let's put up margin on it and say comments list okay see if this renders okay there it is so the first thing I do is just grab the comments so let's go into our component here and let's make a script tag export default and let's just make a mounted hook here and it's used Axios bucket and we're gonna make this in a second so it's gonna be posts I'm just gonna hard code it here just because this is an example and comments will grab all the comments from this post with ID 1 and and grab the response and it just console.log response not data see forgetting anything and let's make that route in our it's gonna do it in ruts web just gonna call back here and I think I called it posts slash post okay and slash comments and we have to grab a post let's make sure to import to post use app post and all we have to do is return this posts comments so this is this relationships really set up by the package so we're just using that and see if we are getting the posts here if we open up this and yep looks like we are cool so let's just dump it out on the screen here so no matter our comments list I'm gonna need some stay here so data turn just like comments is an empty array and here we can do comments this comments its response data and here we can just loop over them here so do V for [Music] say comments comment in comments and the key is comment ID it's all super class on this margin and we just want to list in the comment or show the comment so comment I believe it's just comment sorry not PHP comment top comment all right we'll see okay so there you see the comments okay obviously you would just style it like this but again this is just a quick example to show you how a JavaScript component would work now let's add the D form so I'm just gonna put in the same component just sew it down to share state and then I'll put it right here the action doesn't matter submit a prevent equals submit comment and it's the rest of the form here so this will be where the comment goes let's make it a text area and say comment ideas comment and just give it five rows okay and let's wrap that at Davis oh it's on it's on line and it's just give it a submit button submit make sure type equals submit okay and also let's put a V model on this so we can grab it and pass it through to the server comment and add this to our data comment is empty okay and it's also add that submit method so submit comment so I named it yeah okay it's too I'm gonna grab this change it it's gonna be a post request it's gonna go to the same URL again I'm just hard-coding this one and let's just see if this works actually so this what this is what would happen if it did work so you would push whatever's coming back which is the comment we added to the list of comments we have here but let's try this first let's want to see if it works and we have to obviously write the back end for that so if you look at the comments config then you'll see the controller here some are done here right here so comments comment controller and you see the code for adding any comments also just look for that so it's this one and if you go to the store method you'll see all this code here so we'll just use this as reference as we write the back end for commenting so back to our web api let me just import the request and i'm going to duplicate this and change it to the post one work about to do posts okay and we need the request coming in here actually i forgot to do one thing in the view component we have to pass through with the comment here so let's add that so it's better as comment and this comment okay came back to our back end so I'm just gonna paste the code in here because I don't want this video to be about how to remake this comment package as a view component but this code is just like I said basically what this comment controller is doing here so you see it's a sorting associating this model and here I'm just hard coding it here to the post because this is more configurable and just this is just an example so if I did this right we should be able to add a comment so I'm going to go back to my view component and I'm gonna hope that this works ok so if I did this correctly let's make this a bit smaller I'm gonna refresh so now here's the comments it should add to this if I did everything correctly hopefully it works and I check the console too and it doesn't work and I'm sure you saw this this should be in a method ski it's ok cool try it again does it work so there we go it works you see the response there you see add it to the list of comments and if we refresh this this is the back end version so it should be on top there we go cool so yeah great package if you want to add comments to your site and you can see it's very configurable and you can even make a view component out of it if you want to do

Channel: Andre Madarang

Views: 30,228

Keywords: laravel comments, comment laravel, comments in laravel, laravel comments bootstrap, useful laravel packages, laravel comments package, how to add comments laravel, andre madarang, drehimself

Id: YhA0CSX1HIg

Length: 17min 13sec (1033 seconds)

Published: Wed Oct 16 2019