This episode is for members only
Sign up to access "Installing Inertia from Scratch" right now.
Get started
Already a member? Sign in to continue
Playing
11. Posting forms with Inertia
Episodes
01. Inertia from scratch
02. Enhancements
03. Server-side rendering (SSR)
Transcript
00:00
So let's start out with a form in here. We don't need an action for this.
00:04
We're going to go ahead and trigger inertia to post through to a route for us when this form is submitted. So go ahead and fill out some basic information first, like the body in here, and we'll go ahead and add in a text area.
00:18
So let's set the name of this to body, the ID of this to body, and we can get rid of the columns here and maybe just set the rows to something like four. We'll go ahead and give this a class with a border
00:32
and we'll set the width to full. We're not going to make this look amazing, but we'll just create something that we'll do for now. So of course, we can now type into this body.
00:41
Let's also add maybe a little bit of padding to this. You can also bring in the Tailwind forms plugin, which will make your forms look a little bit nicer as well by default.
00:49
Okay, so lastly, we just need a button type of submit and we just want to say something like post. So that should be able to post through to where we need it to. Of course, at the moment, it's just posting through
01:00
to the page itself, which isn't great because we're working within a single page app. So what we want to do is hook this up to actually submit through to our backend.
01:09
Before we actually hook this up on the front end, we want to go ahead and create out a new route that is actually going to go ahead and store this. So let's create out a controller to handle this
01:21
and that's going to be post store controller. You can put two things in the same controller if you want to, but we're going to go ahead and switch this over to post
01:30
and we're going to post through to posts, switch this to post store controller and let's open that up, add in an invoke and let's just die dump works just to see
01:42
that this is actually submitting through. So how do we work with forms in Inertia if you are new to Inertia? Let's go ahead and bring in our script section here
01:51
and we're going to go ahead and import use form and that's going to come from Inertia JS V3. What we can now do is create out a form in here using this composable and we can inside of this object
02:05
give all of the properties that we want to submit through to the backend. Then what we can do is hook these up with a V model and then just submit this form
02:14
and then handle anything that comes from that like validation or what happens when it's successful. So let's go ahead and hook up our text area with a V model to form.body.
02:28
So that's hooked that up now. So every time we type inside that text area, this data will be updated with what we have. What we can then do is over on the form,
02:37
we can say that when this is submitted and we want to prevent the default behavior of that actually submitting through, we want to call a method in here
02:46
to actually post this through. So we can just call this method post or this function post. And down here, we can create out a post function,
02:54
which of course we'll go ahead and submit that form posted through. How do we do that? Well, we just use the form that we've just created
03:02
and we post through to a particular route. Now the question is, of course we have slash post, but can we use our route helper that we added earlier using Ziggy?
03:14
And the answer is yes. So let's say that this was called posts.store. If we head over to our web routes, we can actually name this posts.store.
03:25
And then of course, that makes it a little bit more convenient. Now we don't have to go through to the actual URL. Okay, so that should be enough to get that working
03:33
and see that die dump. Let's just type something in here and hit post. And there we go. We get that die dumped work.
03:38
So we know that this form is now being submitted through to the backend. We could even go ahead and update the post store controller to actually create this.
03:47
So this is just going to work as it normally would in an application. So we could go ahead and say post create, and we could go ahead and say request only body.
04:00
And then with inertia, what we want to do is return back. So it goes back to the previous page, loads in any information that you need,
04:08
works just like a normal Laravel app. So now what we can do is if we just keep an eye on our posts database, we could say something in here,
04:18
hit post that's actually sent a request through to that. And it's gone ahead and stored that in the database. So we still got a little bit of work to do because of course we're not showing any post.
04:26
This is still hanging around. It doesn't look great. So we're going to head over to the next episode where first of all, we're going to look at validation.
14 episodes•1 hr 7 mins•1 year ago
Overview
The Laravel ecosystem gives us packages like Laravel Breeze and Jetstream which come ready set up with Inertia installed. But what if you want to install Inertia from scratch and build your own features on top of it?
In this course, whether you're new to Inertia or not, we'll be covering getting Inertia set up on a completely fresh Laravel application. We'll walk through some nice additions like server side rendering, styling with Tailwind and installing Ziggy for named routes.
To finish off the course, we'll build a simple app where we can post comments to a timeline, to bring everything nicely together!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.