Playing
01. Introduction and demo
Episodes
01. Introduction and setup
02. Basic multi step forms
03. A practical example
06. Creating the product wizard
4m 32s
0%
07. Adding top navigation
10m 37s
0%
08. Creating the record up front
4m 14s
0%
09. Using custom state
8m 33s
0%
10. Uploading a product image
6m 15s
0%
11. Adding a step navigation component
4m 27s
0%
12. Handling backsteps
3m 44s
0%
13. The final step
6m 12s
0%
14. Handling more complex backsteps
10m 38s
0%
15. Dealing with specific state issues
6m 26s
0%
Transcript
00:00
In this course, we are going to talk about multi-step forms in Livewire.
00:05
Now, these can be incredibly complicated to get working. If we think about this, we have to manage state between each of the steps that we have, and that can get really tricky.
00:18
So just to help us out, we're going to be using the Laravel Livewire wizard package, but we are going to come across some issues with state, particularly when we get to forms that
00:29
are a little bit more complicated, like the practical example we're going to be covering. So I'm going to give you a demo of what this practical example is going to look like.
00:37
And just before we tackle that, we're going to look at the very basics of this package just to kind of get us set up. OK, so this is to create a product.
00:46
It could, of course, be anything at all. So I'm just going to go ahead and create a product in here and a product description. So obviously, we don't have a Back button here
00:56
because we can't go back a step, but we do have this next step, which is going to initially create a product, which isn't the typical thing that you would do with multi-step forms.
01:05
Usually, you'd keep these in some sort of state and then create it at the end. But with this, I need to create this product first because in the next step, I want to go ahead and upload an image
01:15
and then attach it to that model. So this product has now been created, but it's not published yet. We'll do that in the last step.
01:21
So let's go ahead and just choose an image here. I'm just going to choose the Cocos logo, and I'm going to hit Next Step. So on the final screen, all of the state from any of the steps
01:31
that you have, and this could have any amount of steps, is shown in here. So we can access that state. We can show the user what they're about to create
01:39
or what they're about to publish in this case, and then we can go ahead and hit Publish. Now, the really important part about this is we want to be able to go back and navigate back.
01:48
Now, that's traditionally really difficult, particularly when we have instances of our product or any uploaded files. We need to kind of work around this.
01:56
So as you can see, I can go back to Previous Steps here, and I can click back to see the image here, and I can click back, and I can change this information. So think about this.
02:06
We've already created this product, but now I can go ahead and update it. I'm just going to add an exclamation mark, hit Next Step, hit Next Step, and we're back here as well.
02:15
Now, there are some limitations with this library that we're using just because of the way that it works, but we'll get around these as much as we can. And by the end of this course, you're
02:23
going to be really comfortable with building out forms like this, and then anything additional you need to do, you should be able to go ahead and find out how to do.
02:30
So I'm going to go ahead and hit Publish on here. That's just redirecting us back to the initial step, but that has been created out in the database, as you can see here with the title and the description.
02:40
And it's actually stored that image as well in some sort of path. It doesn't really matter where this is. And of course, Published has been set to True.
02:48
So just before we tackle this, we are going to talk about the very basics of this. So the first thing that we're going to be building is something like this, where we go ahead and create
02:56
a thing in here. We choose a description for the thing. And then on the final step, we get exactly the same thing, but this will then actually create that in the database.
03:06
This hasn't been created at the moment, but finally it will be. And nothing happens, but that's been put into the database. So we'll cover the very basics with this,
03:14
just so we can get up to scratch on how to actually use this and how to work with state. And then we'll create that practical example, which will give you more of a drive
03:22
to create things that you actually create with image uploads and anything else that you need to do. So there we go.
03:28
Let's go and get everything set up in the next episode with LiveWire if you're new. And then we'll go on and start with this basic example and work our way through.
15 episodes•1 hr 38 mins•1 year ago
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
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!