Hello Artisan,
In this laravel livewire multi step form example, I will show you how to create multi step form submit example in Laravel livewire. You know that sometimes we need laravel multi step form wizard to submit our data. We can use it like multi step registration or checkout page.
So I am here to show you the example of Laravel 9 livewire wizard multi step form tutorial.SO if you don't know Laravel livewire wizard then this example is for you. Here, I will give you a very simple example of multi-step using bootstrap wizard design. I will create a products table and create a new record with multi step form then we will submit.
Step 1 : Install Laravel
I am going to start from scratch. So download a fresh Laravel project using the below command:
composer create-project laravel/laravel example-app
Step 2 : Create Migration and Model
Here, we need to create database migration for the products
table, and also we will create a model for the products
table.
php artisan make:model Product -m
Now update table like:
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateProductcTable extends Migration
{
/**
* Run the migrations.
*
* @return void
*/
public function up()
{
Schema::create('products', function (Blueprint $table) {
$table->id();
$table->string('name')->nullable();
$table->longText('description')->nullable();
$table->float('amount')->nullable();
$table->boolean('status')->default(0);
$table->integer('stock')->default(0);
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('products');
}
}
And update the model like:
App/Models/Product.php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
use HasFactory;
/**
* The attributes that are mass assignable.
*
* @var array
*/
protected $fillable = [
'name', 'amount', 'description', 'status', 'stock'
];
}
Read also: Laravel 9 Scout Full Text Search Example with Database Driver
Step 3: Install Livewire
Now in this step, we will simply install livewire to our laravel application using the below command:
composer require livewire/livewire
Step 4: Create Livewire Component
Now here we will create a livewire component using their command. so run the below command to create and add more components.
php artisan make:livewire wizard
Now they created files on both paths:
Now both files we will update as below for our contact us form.
app/Http/Livewire/Wizard.php
namespace App\Http\Livewire;
use Livewire\Component;
use App\Models\Product;
class Wizard extends Component
{
public $currentStep = 1;
public $name, $amount, $description, $status = 1, $stock;
public $successMessage = '';
/**
* Write code on Method
*
* @return response()
*/
public function render()
{
return view('livewire.wizard');
}
/**
* Write code on Method
*
* @return response()
*/
public function firstStepSubmit()
{
$validatedData = $this->validate([
'name' => 'required|unique:products',
'amount' => 'required|numeric',
'description' => 'required',
]);
$this->currentStep = 2;
}
/**
* Write code on Method
*
* @return response()
*/
public function secondStepSubmit()
{
$validatedData = $this->validate([
'stock' => 'required',
'status' => 'required',
]);
$this->currentStep = 3;
}
/**
* Write code on Method
*
* @return response()
*/
public function submitForm()
{
Product::create([
'name' => $this->name,
'amount' => $this->amount,
'description' => $this->description,
'stock' => $this->stock,
'status' => $this->status,
]);
$this->successMessage = 'Product Created Successfully.';
$this->clearForm();
$this->currentStep = 1;
}
/**
* Write code on Method
*
* @return response()
*/
public function back($step)
{
$this->currentStep = $step;
}
/**
* Write code on Method
*
* @return response()
*/
public function clearForm()
{
$this->name = '';
$this->amount = '';
$this->description = '';
$this->stock = '';
$this->status = 1;
}
}
Now update the view file:
resources/views/livewire/wizard.blade.php
Step 5: Add Route
Now we will create one route for calling our example, so let's add a new route to the web.php
file as below:
routes/web.php
Route::get('wizard', function () {
return view('default');
});
Step 6: Create View File
here, we will create a blade file for the call form route. in this file, we will use @livewireStyles, @livewireScripts, and @livewire('wizard'). so let's add them.
resources/views/default.blade.php
Read also: Laravel 9 Livewire Datatables Example Step by Step
Now visit http://localhost:8000/wizard
& you can test. Hope it can help you.
#laravel #laravel-9x #livewire #livewire-wizard