Livewire Multi Step Forms
This episode is for members only

Sign up to access "Livewire Multi Step Forms" right now.

Get started
Already a member? Sign in to continue
Playing
08. Creating the record up front

Episodes

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

Transcript

00:00
So based on what we've already covered, this should be pretty straightforward. We just want to go ahead and create this initial product up front and
00:07
then move over to the next step. So let's go and create out our database stuff and then we'll get this working. Okay, so let's go and pull up our console and we'll go ahead and make out a model and let's call this product.
00:21
We'll just keep this super simple once again. So let's open up our create products table, migration, and let's fill the basic data in for this. So we're going to have a title in here.
00:34
Of course, we're going to have a description as well. We are also going to have an image path, which is going to be a string that's going to be where that image gets stored. Now, we need to think about this when we're creating the record up front,
00:48
which can be really helpful when we're doing things like updating the record as we go. We need to make sure that everything after the first step is nullable or has a default value.
00:58
So for the image path, that's not going to be added to the next step. So we need to really make sure we think about the way that this is set up. So let's go and say table and boolean and we'll make this published. And let's set again a default on this to false or zero.
01:17
Okay, great, I think that's pretty much all we need. So let's go ahead and migrate this. And of course, let's go over to our product and make sure we set this to unguarded.
01:29
Or of course, add in our fillable fields. And we're going to be creating this for a user, which we didn't actually just fill in. So we'll go back to our migration and sort that out in a minute.
01:38
Each of our users are going to have products. So let's return a really simple relation in here and say has many and product. And let's just head back over to our create products table migration and add in a foreign ID for this user.
01:57
So user ID and constrained, and let's go ahead and say migrate, roll back, and then we'll just run migrate again. Great, okay, so we've got our product and our relationship set up. So really, all we need to do now is just submit this form and
02:14
create a product for that user. So over in the metastep component, let's go and create out a submit method in here. Now this step info, I want to kind of keep at the top. So let's do this directly under here.
02:29
So let's create that submit method out. Of course, we already know we're going to want to validate this and then create the product, and then go to the next step. So not really too much to do here.
02:42
So over in the metastep, make sure this is hooked up to submit. These are all wired up. So really, we can just create this using the currently authenticated user. Accessing that product relationship, going ahead and
02:55
creating that with the data that we need to insert here. Now that is, again, something that we need to think about. Now in this case, it's a lot easier because we are creating the product up front with the title and the description that we already have in this component.
03:08
So for this, what we can do is just say this only, which is a really helpful method on our live wire components, as well as elsewhere in Laravel that will just pluck out the values from these two properties that we're wiring up, so that will just create that product out now.
03:24
Hopefully, we'll see how it goes. So we've created the product, and now we just want to go to the next step, and we already know how to do this. We just want to say next step.
03:33
Okay, let's roll through this and just see if it works. So let's say abcdef, hit next step. We're over to the next step. Let's check our database, and sure enough, that product's been created.
03:44
Great. So we now have a product created, and we are going over to the image step. But we need to talk more about state and how from this image step, we can access the product that's already been created.
03:57
So we need some way to grab this model back out of the database within our image step, or within our publish step, or any of the steps after this. And that is going to involve using custom state to keep this nice and tidy. So let's take a look at that in the next episode.
15 episodes•1 hr 38 mins

Overview

Everything you need to build multi step forms in Livewire.

We'll cover the basics of creating a multi step form, adding steps, navigating steps and accessing state using the laravel-livewire-wizard package.

Finally, we'll build a fully working practical example with more advanced step navigation, file uploads, and custom state.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

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