Okay, so why don't we move on to forms in Inertia, which I think you're really going to like. So I'm going to begin by setting up a new endpoint. So we'll do it, how about right here. When the user visits users/create, we're going to load a view. We could name this something like createUser. Some people will do the most important word first. So they'll do something like userCreate, userShow, or we could namespace it. Something like users/create or users.create. All three of these are super common conventions.

Something like users/create or users.create. All three of these are super common conventions. Just pick one you like. But yeah, this is traditionally what I would do. So if we're going to take that approach, I should probably update this one to be in a users directory. And if we're listing users, I'd probably call that index. Okay, let's make our updates here. So in pages, I now have a new directory for users. And that will go in there.

So in pages, I now have a new directory for users. And that will go in there. And then finally, I will rename it to index. So now let's add a new one for creating a User. Okay, so as usual, I'm going to say hello world, just to make sure it's working. I'll come back to Firefox, give it a refresh. And if I manually visit users/create, there we go. All right, let's get going. First up, we need our head tag. And that'll be createUser, keep it simple.

First up, we need our head tag. And that'll be createUser, keep it simple. And then we'll have our h1. That will be 3xl. And it says create new user. Okay, come back, give it a refresh. There we go. Let's set up our form right here. So think about it, what do we need to create a User? Well, you need to give us their name, their email address, and a password.

Okay, so what else do we need here? We need the user's name, we need their email address. So I'm going to do the exact same thing again for the email. But the only thing I will change is set the type to email. All right, come back, give it a refresh, there you go. What else do we need? A password, all right. One more time for the password. But of course we want to set the type to password, though if you want to get a little more fancy, you could even add a toggle to change it to regular text if you actually want to see what

All right, so I think we're looking pretty good here. Now, as you know, when working with Vue, in order to submit this form asynchronously, we need to track what the user is typing into each of these inputs. So with that in mind, let's set up a data property. So again, we could do it here with the Options API, or if you're using the Composition API, we could switch to Script Setup and then define it like so. Let form equals an object. That form will contain the user's name, their email address, and their provided password. But of course, with the Composition API, this isn't quite enough. We need to make it reactive by pulling in, in this case we have an object, so I'm going

But of course, with the Composition API, this isn't quite enough. We need to make it reactive by pulling in, in this case we have an object, so I'm going to pull in reactive from Vue, and then we'll wrap that. Okay, so now, if we scroll on up, think about it, we can set v-model here to form.name. So I bind the value of this input to that field or property. We're going to have another one here, v-model to form.email. And then down here, v-model to form.password. And I'll reformat. Okay, cross your fingers, we come back to Firefox, give it a refresh. We're going to take a look at Vue DevTools, and if I look at our page component, here's

Okay, cross your fingers, we come back to Firefox, give it a refresh. We're going to take a look at Vue DevTools, and if I look at our page component, here's our form object. And notice, as I type into it, there we go. This is what we want. Okay, so now, we're successfully tracking what the user types into the form for each of these fields. So the only remaining step is to listen for when the user submits the form and use Inertia to make that request, rather than the way we would traditionally do it with a server-side framework.

to make that request, rather than the way we would traditionally do it with a server-side framework. Okay, scroll on down, and let's see, why don't we set up a method called, well, submit. Let submit equals a function. Now how do we submit a form with Inertia? Well, it's really easy. Let's import it. Import Inertia. And then I can simply say, Inertia.post. Now if you're curious, in the next episode, I'll show you how to use Inertia's form helper.

And then I can simply say, Inertia.post. Now if you're curious, in the next episode, I'll show you how to use Inertia's form helper. But for now, we're doing it more of the manual way. Okay, so what are we posting to? Well, if I'm creating a User, that endpoint would be a POST request to /users, and then the data I'm sending through would be this form data. And that should at least get us going. All right, so come back up, and on our form, we don't actually need any of this, because we're not traditionally submitting the form. So instead, I'll say, when you submit this form, prevent the default action, and instead

we're not traditionally submitting the form. So instead, I'll say, when you submit this form, prevent the default action, and instead call that submit method that we created right down here. All right, let's give it a shot. So to review this, again, I'm going to open up my network tab, so I can see exactly what happens. Okay, John Doe, john@example.com, gibberish, and if I click submit, well, it does fail with a 405, but we expected that. The important thing, though, is we did hook into that form submission and make the proper request.

The important thing, though, is we did hook into that form submission and make the proper request. We made a post to /users, and we did send through the relevant data. Okay, so let's return to the server side, and we're now going to listen for a post request to /users. Route::post to /users, and now this should be Laravel 101 stuff, like validate the request, then Create the User, then redirect somewhere. Okay, so how do we validate the request? Well, you might do something like $request->validate, where you say the name is required, so is the email, and then the password is required, but also for email, why don't we

Well, you might do something like request->validate, where you say the name is required, so is the email, and then the password is required, but also for email, why don't we say, make sure that's a valid email, and then for the password, you also might want to say it's a minimum number of characters or something like that, but let's keep it nice and simple. Okay, so assuming that the validation passes on the server side, we could then move on to creating the User, and that would take the shape of something like User::create. So once again, we could manually fill these out, or I would have to say something like request->input('name'), and that's totally fine. Another little tip, when you validate your request, the validated attributes alone will be returned from that method call.

Another little tip, when you validate your request, the validated attributes alone will be returned from that method call. So you'd get something like that. So if you want, you could even pass that to user create. And remember, we would only get to this point if validation has succeeded. Next, we just need to redirect somewhere. Okay, so let's talk about this for just a minute. Traditionally, when you're building an SPA, when you respond to a request like this, you might return a JSON response or something like that. That includes information about the User that was created.

might return a JSON response or something like that. That includes information about the User that was created. But remember, we're building an Inertia app, which is a little different. It's a bit more similar to how you would traditionally construct a server side application. So in this case, when we're done, we don't return a JSON response. We just return a typical redirect. Where do we want to go now? Well, why don't we redirect, return, redirect to users, something like that. And what's nice is, even though Inertia is still performing a traditional AJAX request, it's going to pick up on this and automatically follow that redirect.

And what's nice is, even though Inertia is still performing a traditional AJAX request, it's going to pick up on this and automatically follow that redirect. Okay, so again, let's cross our fingers and give it a shot. I'm going to give it a refresh. I'm going to create John Doe. Submit. And if we did everything correctly, he should now be included here, and there he is. Let's have a look at the database. Open database, database.sqlite. And let's see, right here, there's John Doe.

Open database, database.sqlite. And let's see, right here, there's John Doe. So it's working, but we do have that one glaring issue where we aren't yet hashing the password. All right, so obviously, we shouldn't ignore that. Now, you could do it here as part of your create call, but it's such an important thing, I will often do it as part of a mutator. So if I visit my User model, I might do something like setPasswordAttribute. That'll accept the value. And then here, I will automatically encrypt it. So I would say this attributes password equals, and then I will pass the value to bcrypt.

And then here, I will automatically encrypt it. So I would say this attributes password equals, and then I will pass the value to bcrypt. Alternatively, you can do something like hash make. Cool. Okay, so let's give that one more shot. I will delete John Doe's account and try again. Okay, so one more time, I'll say John Doe 2. Submit. All right, back to TablePlus. Give it a refresh.

All right, back to TablePlus. Give it a refresh. And there we go. We have John Doe's account again, but now notice that we are properly hashing his password. Okay, so this is good. It's working. But what about the situations where we try to create a User, but the validation fails? Okay, we'll deal with that in the next episode.