Build a Forum with Inertia and Laravel
This episode is for members only

Sign up to access "Build a Forum with Inertia and Laravel" right now.

Get started
Already a member? Sign in to continue
Playing
29. Storing a new discussion

Episodes

0%
Your progress
  • Total: 6h 54m
  • Played: 0m
  • Remaining: 6h 54m
Join or sign in to track your progress
01. Introduction and demo
6m 59s
0%
02. Getting set up
10m 36s
0%
03. Modifying registration for usernames
7m 15s
0%
04. Figuring out the forum layout
5m 57s
0%
05. Creating and listing topics
9m 15s
0%
06. Basic discussion listing
13m 33s
0%
07. Pinning discussions
4m 1s
0%
08. Tackling pagination in Inertia
8m 23s
0%
09. Customising pagination text in Laravel
52s
0%
10. Showing a discussion
6m 4s
0%
11. Setting up discussion posts
5m 53s
0%
12. Listing through discussion posts
5m 28s
0%
13. Adding more data to posts
8m 24s
0%
14. Adding pagination to posts
1m 35s
0%
15. Adding a post preview to discussions
4m 52s
0%
16. Adding the last reply to discussions
5m 54s
0%
17. Outputting discussion participants
8m 4s
0%
18. Limiting participants in the UI
5m 56s
0%
19. Ordering discussions by last post
4m 30s
0%
20. Handling deleted users
2m 31s
0%
21. Counting replies
8m 13s
0%
22. Building our first filter
8m 31s
0%
23. Highlighting current filters, and merging with pagination
5m 37s
0%
24. Adding auth specific filters
6m 40s
0%
25. Adding the topic filter
8m 18s
0%
26. Scaffolding the new discussion form
13m 29s
0%
27. Toggling the create discussion form
9m 2s
0%
28. Keeping form state
4m 59s
0%
29. Storing a new discussion
11m 29s
0%
30. Discussion validation and authorization
5m 1s
0%
31. Generating markdown for posts
8m 37s
0%
32. Toggling the markdown preview
7m 43s
0%
33. Fetching and displaying markdown
8m 6s
0%
34. Adding a markdown shortcut toolbar
5m 53s
0%
35. Dealing with SVG icons
7m 46s
0%
36. Creating the reply form
7m 48s
0%
37. Basic Inertia permission checking
6m 26s
0%
38. Creating replies to discussions
5m 37s
0%
39. Jumping to posts
11m 40s
0%
40. Automatically scrolling to posts
6m 18s
0%
41. Toggling post editing
7m 32s
0%
42. Editing posts
3m 36s
0%
43. Deleting posts
4m 21s
0%
44. Deleting discussions
6m 7s
0%
45. Setting up for best answers
7m 29s
0%
46. Toggling the best discussion answer
12m 14s
0%
47. Solved and unsolved filters
2m 23s
0%
48. Indexing discussions for search
8m 6s
0%
49. Searching discussions
12m 35s
0%
50. Debouncing search
2m 47s
0%
51. Adding mentionable functionality to forms
6m 32s
0%
52. Indexing users for mentioning
9m 9s
0%
53. Hooking up users for mentions
10m 10s
0%
54. Detecting and storing mentioned users
9m 54s
0%
55. Adding the mentioned filter
2m 26s
0%
56. Adding mentions to the markdown toolbar
1m 1s
0%
57. Adding mentions to the reply form
7m 21s
0%
58. Fixing up some unauthenticated state
1m 1s
0%
59. Fixing up post scrolling
1m 48s
0%
60. Reviewing SSR (Server-side rendering)
8m 20s
0%
61. Preventing parent posts from being deleted
2m 31s
0%
62. Improving solution marking
4m 9s
0%

Transcript

00:00
So things are starting to come together now.
00:01
By the end of this episode, we will be able to click this button, type in the discussion details we want to see, click create discussion and have this close and redirect over to the new discussion page that we have just created.
00:16
So we're going to start out here with the controller just to see what we need to add in here. So let's go ahead and make out a controller. We're going to call this discussion store controller.
00:27
It's going to have one job and let's go ahead and register out the root for this first of all. Now, of course, to create a discussion, we need to be authorised. So we can put this under this already defined middleware group for auth.
00:39
Let's just grab this as a reference and we'll just put this at the top here. So we're going to post through to discussions. That's going to use the discussion store controller. And of course, we'll give this a name as well
00:54
so we can reference it easily within our component. So over on the discussion store controller, let's create out an invoke method. We are going to bring our request in here, but we're going to switch this out for a form request a little bit later.
01:07
Let's do no validation here. First of all, we'll tackle that afterwards and then let's go ahead and see how we actually store a discussion. Now, the only problem we've got at the moment is with our discussions.
01:18
Remember, the slug here needs to be generated. We initially want to set this to null. And then once a discussion has been stored, we want to update this with the slug, but we want to prefix the ID.
01:33
That then means that what we're going to have is a unique slug for every single discussion, even if the user chooses the same title. So we would normally do this by just creating out a discussion variable in here and saying discussion and create or discussion make and then persisting it in the database.
01:54
What we don't want to have to do is do all of the slug generation inside of here. So we're actually going to update the discussion model to handle this for us. That means that wherever we create a discussion, this functionality is always going to exist.
02:08
So to do this, we're going to go ahead and hook in to the booted event in here or the booted lifecycle of a model. So let's go ahead and create out a static function called booted. And this will allow us to define and hook in to any eloquent events within here.
02:25
There are other ways to do this, but something so simple makes sense to do this directly within here. So to do this, we're going to say when this is created. So when it's actually being persisted in the database, what we want to do is go ahead and run this closure,
02:39
getting the discussion into here that we can then modify. So once this has been created with an empty slug, we're then going to go ahead and update this model with a new slug. So the slug is going to be the discussion title.
02:56
But then outside of this, what we're going to do is create out a setup. So we're going to say set slug attribute or a mutator, as it's called. And into here, we're going to get the value, which is going to be basically just the title of the discussion, which gets set in.
03:12
From here, we're going to go ahead and set the slug on the attributes of this to the ID of the created discussion. And then we're going to add a hyphen. And then we're going to use the string helper to slugify the title that's been set in.
03:33
So essentially, what we're doing is every time we create a discussion, we're going to set the slug initially to the slug title. But then when that gets set or wherever it gets set from, we're always going to append on or prepend on, in this case, the ID of the discussion.
03:52
So now that we've done that, we're going to see this in action once we have actually created the discussion. So let's start this now. So let's go and create out that discussion variable again so we can reference it.
04:05
And what we're going to do here is actually make this, the difference between make and create is make will not persist this in the database. We're going to go ahead and set the title in here to request title. So that comes from the form that we're posting through from Inertia.
04:20
And now we just need to hook a couple of things up. So what we want to do is associate the user with this discussion. Let's just double check that we've got a user relation in here, and we do. So we're going to go ahead and associate the currently authenticated user
04:36
with that discussion before we save it. What we're then going to do is associate the topic of that discussion. So let's go ahead and do pretty much the same thing here. But we need to look the topic up.
04:47
Now, we know that we get the topic ID into here. We're going to have to relook the topic up as a model to be able to associate it. The reason that we don't do in here topic ID is we don't really want to get into the habit of setting a topic ID directly or any kind of foreign key directly
05:07
within the attributes that we want to set. It's a much better idea to associate things like this. It just means that we don't have to set our topic ID as a fillable field, and it makes it a little bit safer and also a little bit cleaner as well.
05:21
So we're going to go ahead and find that topic by the topic ID and then pass the entire thing in to associate it with the relationship. Then what we can do is go ahead and simply save the discussion. Now we've created a discussion out.
05:36
The next thing to do is to create our post for that discussion. So again, we're going to follow the same kind of format. We're going to make out the post, associate what we need, associate the post with a discussion and then save the post.
05:52
So to make the post, we're going to go ahead and set in the body. So we grab the body from the request. And then what do we need to hook up to the post? Well, the post has a user.
06:02
So let's again go and associate a user with this. That's just going to be the currently authenticated user. We also want to then associate this with a discussion. So we're going to go ahead and do that as well.
06:15
So associate the discussion that we've just created. And then we're going to go and either save this post out or what we could actually do is get rid of this discussion association. And we could just say discussion, which has already been created,
06:29
go into posts and save that post. So we're basically creating a post associating the user and then for the discussion posts, putting that new post into there. And that should go ahead and create that out.
06:43
Then what we're going to do is return and return a redirect response. So we're going to redirect to the discussion show route, passing in the discussion. So let's recap. Create the discussion and associate the user in the topic that we've chosen.
07:03
Then save the discussion, create the first post and associate the user. And then within the discussion, save this within the list of posts. Okay. Now we just need to hook this up on the client side.
07:17
And then we're going to look at authorization and validation. So over on the create discussion form, we know that we've got a reference to the form in here via our composable. Because this is just an inertia form,
07:31
we can just directly hook into this from here and make a request to save this. Now our fixed form wrapper actually could do with being a form itself. So we can just submit this through. So I'm going to change over the overall thing here to a form, the overall wrapper to a form.
07:50
What we can then do is over on the create discussion form, we can say V on submit. And that will go through and pass through to the form that we're referencing in here. We can prevent the default behavior here. So it doesn't actually go through.
08:03
And we can go ahead and call a create discussion function. So really over on our fixed form wrapper, we're just saying when this overall form with the main components in is submitted via this button that's slotted in, then we want to call this create discussion function.
08:23
We can add this down here, create discussion. And that's just going to go ahead and submit that form that we have within inertia. So what are we doing? We're posting through to the discussions store route.
08:39
We will hook into this to do something when the form was successfully posted, but let's just check out and make sure that this works. Okay. So we've got an issue here with attribute posts does not exist.
08:51
So let's figure out what we have yet. We've put posts there instead of posts. You probably caught that. Let's say post.
08:59
And there we go. So let's also keep an eye on our database just to make sure everything's good, but this should all just flow through. So let's go ahead and say new discussion, new discussion body.
09:10
And we'll stick this under the inertia topic. Let's hit create discussion. And yeah. Okay.
09:16
So we just need to add some items to discussion for mass assignment. Let's just have a look in here at what we've got and what we might need to add. We don't have anything. So that would make sense.
09:28
Let's add in our fillable columns in here. That's going to be the title and the slug. Remember the user ID and the topic ID gets set by the associations. So we don't need to add them in there.
09:39
Okay. Let's try again. New discussion. New discussion body.
09:45
And we'll choose inertia. Let's go ahead and click create and discussion show is not defined. Okay. So that looks like it would have been created,
09:53
but we just need to say discussions.show. So if we head over to the database, we've got that new discussion in there with the ID, which has been prefixed, which is great. And we should have the new discussion body in there as well,
10:05
with no parent associated to my ID. I'm going to get rid of these just so we get these sort of full flow through to creating a discussion. And let's try this one last time.
10:15
So new discussion and new discussion body. And once again, hook that up to inertia. So create discussion. And there we go.
10:25
We are fired over to the new discussion page and we have everything in there that we would expect to see. So once we have created this discussion, obviously we want to hide this form. So what do we do?
10:37
Well, over in the create discussion form, where we're posting this through on the success of this. So once this has been successfully posted through and we don't have any validation errors, we want to do a couple of things. The first thing we want to do is reset the form back to its original value.
10:55
Because remember, we have state management here now. So we want to clear everything out, basically reset it back to the original values. But what we also want to do is hide the create discussion form. So we just want to invoke that in there.
11:08
Let's go ahead and create another discussion to see this working. So another discussion. And we'll say another discussion body. And let's go ahead and choose inertia.
11:20
Create that. And there we go. Without, of course, refreshing the page, we're fired over here. But that's also got rid of the create discussion form.

Episode summary

In this episode, we're finally making our "create discussion" feature work from start to finish. You'll see how to set up the controller that handles storing new discussions, including making sure only authorized users can post. We walk through getting the route, creating the controller, and making sure we can reference everything we need in our components.

A big focus is on generating unique slugs for each discussion—even if people use the same title. We tweak the Discussion model to handle slug generation automatically. This way, every time you create a discussion, the system adds a unique ID to the slug and avoids conflicts.

We also cover associating the newly made discussion with the current user and topic (no raw foreign keys here—just clean model relationships). Then we see how to create the first post within the new discussion, link it to the user and discussion, and save everything to the database.

After that, the frontend gets a little update: the form properly submits through Inertia, and on a successful response, resets itself and disappears (so you don’t see the form after creation). We wrap it all up by confirming that after creating a discussion, you’re redirected to its page and the whole process feels smooth and seamless.

Basically, by the end, you can add new discussions and have everything wire up behind the scenes like magic!

Episode discussion

No comments, yet. Be the first!