Laravel Mentions
This episode is for members only

Sign up to access "Laravel Mentions" right now.

Get started
Already a member? Sign in to continue
Playing
03. Basic comment setup

Episodes

0%
Your progress
  • Total: 1h 52m
  • Played: 0m
  • Remaining: 1h 52m
Join or sign in to track your progress

Transcript

00:00
So let's go ahead and build out a really simple comment systems at least so we have something
00:04
that we can submit and test with our mentions. You might already have something like this in which case you can go over to the next episode and we'll get started on the core detection functionality. Okay so if not let's go ahead and build this out. So to start with let's go and build out a full page Livewire component so let's use Livewire and Make and we're going to make out
00:29
a comment or comments index. Let's call this comment index that kind of makes sense and once we've created this component we can go ahead and just directly register this out as a root. So let's grab the dashboard as an example let's go and say root get and let's say slash comments let's hook this directly up to that comment index component that we've just created there
00:53
and for middleware let's keep this as auth and verified and let's call this comments dot index. So let's head over to our now we can go over to our navigation first and add this in here so let's go over to our layout and let's grab the navigation link here for the dashboard and let's hook this up to comments and index at least just so we can click on it and get that
01:17
a little bit quicker. Okay so at the moment this isn't going to work because we don't have a template set on this full page Livewire component so if we come over to our comment index dot php file just above register with Livewire to set a template for a full page component here we're going to go ahead and use not Livewire we're going to use the layout and we can just point to the
01:41
default layout that we use now which is layouts.app which is the same as our dashboard so you can see now we've got the same structure to this we can just start to build this out. Okay so because of this we can go ahead and grab say dashboard copy and paste this over and we get pretty much the same structure so let's go over to comment index dot blade dot php paste this in but we're going
02:02
to get rid of the app layout because we've already defined that within our Livewire component so now we should have a replica of our dashboard over on this comments page. So let's start to change this up then so let's change the title to comments I'm going to set the max width here to say 2xl just so it's a little bit smaller and in here is going to be our text area to of course enter our comment
02:27
and then underneath that we're going to have a list of our comments as well. So let's start to build out our form first so I'm going to create a form inside of here we're going to hook this up to a method inside of our base Livewire component so we're not actually using volt here we're doing this as the sort of standard Livewire way so we're going to say wire submit and we're going to say
02:49
create comment and we'll create that method out over in comment index let's find that and we'll just create this method out in here really quickly and we'll just do nothing for now. Okay so let's go back over to our form now in here we want a text area because we're using Laravel Breeze just to make things a lot easier under our component section we already have this text input that's
03:15
styled up and we've already seen that with our forms what I'm going to do is create out a new component in here called textarea.blade.php I'm going to just paste this in I tend to do this on every single project I work with Laravel Breeze and I'm just going to change that over to a text area we need to actually end text areas so we're going to go ahead and end that off and that's
03:36
pretty much it now we've got a new blade component that we can use and it won't get in the way so now we can say x text area and we can just start to apply any styles that we want to this so we probably want a width of four here because this is a text area component we can fall through attributes like rows to make this a little bit higher and we can go ahead and hook this up to a wire model as well
04:01
we won't do that just yet because we don't know quite where that lives but that's pretty much it that's now our text area section now underneath this we've already pretty much got a button with our starter kit here so we can just say x primary button that's pretty much everything we've already seen on every single form and we're just going to say post so let's go over and have a look at that
04:25
and there we go great so we've got a nice form that we can obviously enter some text in hook up to and go ahead and output a comment okay let's do that first of all so where are we going to hook this up to well let's go over to our comment index what i'm going to do is rather than create out a property in here like a string for the body i'm going to go ahead and create out a
04:48
live wire form specifically so to do this we say live wire form and then we create a form that performs an action like create comment or something like that so our create comment form which now lives in the forms directory of live wire is going to contain the string or the body we can validate this still so let's go ahead and use rule in here and we are going to say that this
05:16
is required you can of course attach more rules to this if you want to now what we can do over in our comment index is we can set up this create comment as a form property and inside of create comment for example when we actually submit the form we can say something like this form validate that will go ahead and validate everything for us we can add our validation rules into our template
05:40
as well if we want to then we can access the data to create this for now i'm just going to die dump and say create because we're not too sure what we're doing just yet okay let's go ahead and test this out by using wire model and now we can say form dot body to hook that up let's try this out so let's just say hey hit post and yeah there we go we get create dumped out we can access any
06:00
of that data to start to create our comment so let's go ahead and do that now so let's create out our comment model so let's make out a model here called comment we'll create a migration and a factory alongside of that we're going to need our factories for testing and let's go to our create comments table just here so what do we need to do here well we need this to be hooked up
06:21
of course to a user so we need to know who's actually posted this so let's create out a foreign id called user id that will automatically constrain that to the users table so we know that it exists and let's just keep it simple so we'll just have some text in here and this will be a body so it will just be who's posted it the body and of course the usual time sounds that we get
06:43
with rfl so let's go ahead and migrate this and we should be good let's head over to the model first of all because i'm just going to do a couple of housekeeping items like setting guarded here to false since we don't need that and we'll create our relationship here to show who has posted this so let's say return this belongs to a user so we know that we can access that
07:11
user who's posted it and we'll do the same thing over in our user model as well because we'll create comments through a user so we'll create out a comment relationship in here which again is pretty straightforward it's just a has many for our comment model so we're pretty much done now with our relationships and stuff we can just start to create out the ability to store a comment
07:33
now so we do this over in comment index where we have create comment so here we want to go ahead and just create that comment how do we do this well let's say auth user now that we have that comments relationship we can access that and we can go ahead and create that using the validated data from our form so what we could do is we could either i think we could probably assign this or
07:55
we could just say this form only and we just need the body here to store that because the id will already be filled then we can go ahead and reset the form so we can say this form reset we can optionally pass through the properties that we want to reset or we could just reset everything back to the originals that we've set here okay now that we've done that let's check this out
08:19
this should actually store a comment now so let's just say hey hit post and let's head over to the database and check out our comments table and yeah sure enough that's been posted pretty straightforward stuff okay i'm going to post a few comments here so let's say comment one post comment two and that should be enough just so we can actually list through all of these comments in the ui
08:44
so to do this over in our comment index we want to pass the comments through here and this is just going to be a global list of comments we're just keeping this really simple now so we're just going to say latest and get we're not even paginating them we don't really care about this just now we just want to see them on the page so back over to the comment index template underneath let's just
09:08
find where we've got this let's duplicate this down let's take a space y three and then in here we can iterate through each of the comments so that will be a background of y let's get rid of this form this will be a comment and this will be duplicated down to show the next comment so you know not ideal but it works for now so before i do anything i'm going to create out a separate
09:35
component for this comment item because it's going to have its own actions like being able to toggle the edit state so we're going to go ahead and create out a livewire component let's say livewire make and we're going to call this comment item so let's grab all of this stuff here copy this out let's do a for each on comment as comment and in here we'll render out the comment item component
10:06
we'll pass the comment through to that in just a second but let's open this comment item component up for now just give that a refresh and we see two of them iterated over so we know that that is pretty much working so we're going to pass the comment down to this component so let's do that first of all and really importantly here we need to provide a key so everything can re-render properly
10:28
that just needs to be something unique for the comment which in our case is going to be the id so for the comment item let's go and start to output the data that we need here first thing i'm going to do is set the text here to small and just inside of here we're going to have a div with the user who's posted this and when they actually posted this so let's say comment and
10:51
user and name now we don't have this available yet so if we come over to comment item we know that we're passing this down into here so let's go ahead and provide that as a property there we go so comment user name and let's say on and let's say comment created at and let's just take a look at that quickly there we go all that data looks good to me we can just go ahead and style this up
11:17
so let's say text gray 600 and maybe we could just make the user's name a bold font so let's say font bold and let's change the text back to 900 and there we go yep great that looks okay okay so next let's go down to the body so we'll just create our paragraph in here with the margin top of one and this is just going to be the comment body we'll change this to mark down
11:48
a little bit later when we get to clicking on users who have been mentioned but for now we will just keep this really really simple and have the comment body in here okay so that should be just about enough for now let's go ahead and post a new comment and we should get this refreshed through and there we go perfect so everything is looking good we've at least got the data on the page
12:10
and that now means that when we do something like this we can go ahead and detect this and because we now have each of our comments we can hook up who has been mentioned in which of these comments and we can just do everything we've already seen from the introduction okay great we've got this foundation now let's go ahead and start to look at the core mention functionality

Episode summary

In this episode, we set up a basic comment system to give us something to work with before diving into the more advanced mention detection features. If you've already got a comment form in place, feel free to skip ahead, but if not, here's what we do:

We start by making a new full-page Livewire component for comments and hook it up to a route and the navigation menu, making it easily accessible. After some quick tweaks to the layout to match our dashboard style, we drop in a form with a custom textarea component and a button to post new comments.

Instead of just managing form state manually, we use a Livewire form class to handle validation and reset logic for our comment body, setting things up so new comments can easily be created and validated. We then create a Comment model and migration, hook them up to users, and make sure each comment stores the user who posted it and its content.

Once that’s in place, we loop through the comments and show them on the page. To keep things tidy, we create a Livewire component for each comment item, passing in the relevant data (like the author’s name and when it was posted), and display the comment body.

By the end of this video, we've got a working comment feed with forms, simple validation, and data rendering. This gives us a nice foundation to start building and testing the real-time mention detection logic coming up next!

Episode discussion

No comments, yet. Be the first!