This episode is for members only

Sign up to access "Build a Livewire Comment System" right now.

Get started

Already a member? Sign in to continue

Playing

04. Posting comments

Source code

Transcript

00:00

The goal of this episode is to be able to post a comment. Let's get started on the form design.

00:05

So if we head over to the comments template here, let's go ahead and set this up so we can see at least something on the page. So let's go ahead and say comments. And then in here, we're eventually going to have a comments count.

00:17

Let's just add that here. So we don't forget to do that. Okay. So down here only for authenticated users.

00:24

So again, we're going to pull in our auth directive to protect against this. We want a form where we can post a comment. So the action to this, we can get rid of, let's go ahead and just add a class here with a margin top of four.

00:37

So it bumps away from the header and next let's go ahead and create out a section for our text area. Now within Laravel Breeze, we have, if we look over in our resources and views, a bunch of components that come with this.

00:51

For example, we have got a text input here, which is just an input component where we get things like being able to disable this, we're going to go ahead and copy all of this, and we're going to create out a new file in here and call this text area dot blade dot PHP.

01:09

We're basically just going to paste the entire thing in here and then switch this over to a text area. So we get the benefit of a component and not having to reuse all of our styles everywhere.

01:20

So we've now got a text area component that we can start to use. So if we head back over to our comments page here, let's say X text area. And let's add this in, we'll add in a placeholder and we'll just say something like post a comment.

01:35

Let's add a class to this of width full and we can set some rows here as well. So let's just set that to four. Let's head over and yeah, there we go. We have a nice component and we can reuse that for things like

01:47

replying and editing as well. Okay. So next up, we could have an error for this. So again, we're going to reuse the X input error component that

01:56

comes with Laravel breeze. And we're going to pass through the messages from any validation errors that we get. So let's just say get, and we're not sure what this is going to be called yet, but

02:05

we are going to be using a Livewire form class, so let's just say form and body. We'll come back to that in just a second. If you've not worked with form elements within Livewire before. Okay.

02:16

So last of all, we want a primary button to be able to submit this. And in here, we're just going to say post a comment and let's go ahead and just add a class to this to have a margin top of two. So we've got our comment form in here.

02:28

Let's of course get this posted. Okay. So we are going to use a form class within our comments component here. So what we're going to do is have this stored up here and not

02:40

create out something like this. We're not going to say body directly in here. We're going to completely separate this out to a different class. So to do this, we're going to go and call Livewire form.

02:52

So let's call this create comment and let's see how we can use this. So if we open this up, create comment, all this is, is a component that extends form or a class that extends form. In here, what we can do is separate out all of the things required to post a comment.

03:10

So we can do exactly as we would normally do within a component, but now this is separated out. So we know that to post a comment, we need a body, but what about validation? Well, we can do this in here as well.

03:22

So we can still use the validate attribute to pass through any of the rules that we need, and we can still validate this. Let's see how we do that now. So let's head over to our main comment section.

03:35

How do we use this form? Well, we just create out a public property in here, create comment, and we just call this create comment form or create comment, whatever you want to call this. You could just call it form, which we kind of did within the template that we just

03:50

created. So let's go ahead and just call it form for now, because we're going to be creating out other components for editing and all that kind of stuff. Okay.

03:57

So now that we have got this, let's create out a method to submit this. So let's say create comment, and we are going to just start to validate. So let's just say this form and then validate. So pretty much everything that you would usually expect from Livewire, instead of

04:15

calling this validate for any public properties we have up here as part of our form, we are accessing this directly on the form itself. So let's take this method name and let's go over to our comments and hook this up here.

04:27

So let's say wire submit, and we're going to call create comment, not forgetting to hook this up to that form item as a model. So we're going to say form and body. So now this will be attached.

04:40

Anything we type in here will be attached to that form body. This will show any errors from the form body, and this will validate the form body. Let's go over and see what we've got. I'm going to hit post a comment and yeah, sure enough, everything is hooked up, but

04:55

everything is nicely tucked away within a form class. Okay. Let's go ahead and actually create the comment now. So if we head over to this method, what do we need to do?

05:04

Well, the first thing that we're going to do is create the comment out. So we're going to say this model, remember, and then access the comments relationship on that model. We're then going to make this.

05:16

So we're not going to persist this in the database just yet. And we need to access the body from the form. Now the form class has helpers. So for example, we could say this form only and body.

05:27

So it kind of works like a standard Laravel form or request when you want to only pluck out data from this. We've only got one in there at the moment, so it's not too much trouble , but if you added anything else in here, it's a really convenient

05:40

way to pluck this out. Okay. So next we're going to go ahead and say comment, and we're going to access a relationship on here, like the user and associate it manually.

05:49

Now we don't have that at the moment. So let's go and open up our comment model. And this is just really simple belongs to relationship. So let's define this out.

06:00

And we know that a comment belongs to a user. Let's pull that in and we're pretty much done. We can now associate this to that user. So let's say user associate, and we want to associate the

06:12

currently authenticated user. So we're just going to say auth and user. Then we're going to go ahead and say comment and save. Okay.

06:21

Let's check this out and see if this works. Remember to keep our database open so we can check this and let's just say, Hey, and hit post comment. And yeah, sure enough, we've got a mass assignment exception on our comment.

06:33

Let's open up our comment model. And for now, let's go ahead and just set guarded to an empty right so we can fill everything. Okay.

06:41

Let's try this again. So I'm going to say, Hey, post a comment. And there we go. Let's go over to the database and yeah, sure enough, everything

06:48

in here is what we would expect. We've got that new commentable type that we added with our morph map. The commentable ID is correct. And now this comment belongs to that specific article.

18 episodes•1 hr 40 mins•3 months ago

Overview

Build a drop-in comment system with Livewire that instantly works for any model.

We’ll cover top-level comments and replies by re-using Livewire components, editing and deleting comments, working with Alpine.js to minimise network requests, building an Alpine.js directive to display when a comment was posted, handling deleted users and loading more comments gradually.

Once you’re done, you can drop a single Livewire comments component wherever you need it — and comments will instantly be enabled.

Alex Garrett-Smith

Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.

Sign up to access "Build a Livewire Comment System" right now.

Episodes

Transcript

Overview

Comments