Laravel Livewire Wizard Form Example

About Us:

We are from free coder. We are a group of web developers who are passionate about web development. You can learn from us php, laravel, node js, vue js, react js and many other topic on web developement.
we are very happy to help you.
free coder

Today what you are going to learn:

Hi Brother,

This simple article demonstrates of laravel livewire wizard form. you can see laravel livewire multi step form lesson. step by step explain wizard form bootstrap laravel livewire. i would like to share with you step by step wizard form in laravel livewire. Let's get started with livewire multi step form laravel lesson.

we can easily create multi step form using livewire in laravel 6, laravel 7 and laravel 8 version. let's see simple lesson of laravel livewire wizard form.

Livewire is a full-stack framework for Laravel framework that makes building dynamic interfaces simple, without leaving the comfort of Laravel. if you are using livewire with laravel then you don't worry about writing jquery ajax code, livewire will help to write very simple way jquery ajax code using php. without page refresh laravel validation will works, form will submit etc.

Hello Brother, i will give you very simple lesson to multi step using bootstrap wizard design. we will create product table and create new record with multi step.

So, let's follow bellow step and you will get bellow layout:

Lesson 1 : Install Laravel 8

first of all we need to get fresh Laravel 8 version application using bellow command, So open your terminal OR command prompt and run bellow command:

composer create-project --prefer-dist laravel/laravel blog

Lesson 2 : Create Migration and Model

Hello Brother, we need create database migration for files table and also we will create model for files table.

php artisan make:migration create_products_table

Migration:

<?php

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');

}

}

php artisan migrate

now we will create Product model by using following command:

php artisan make:model Product

App/Models/Product.php

<?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'

];

}

Lesson 3: Install Livewire

now in this step, we will simply install livewire to our laravel 8 application using bellow command:

composer require livewire/livewire

Lesson 4: Create Component

Now here we will create livewire component using their command. so run bellow command to create add more component.

php artisan make:livewire wizard

Now they created fies on both path:

app/Http/Livewire/Wizard.php

resources/views/livewire/wizard.blade.php

Now both file we will update as bellow for our contact us form.

app/Http/Livewire/Wizard.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;

use App\Models\Product;

class Wizard extends Component

{

public $currentLesson = 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->currentLesson = 2;

}

/**

* Write code on Method

*

* @return response()

*/

public function secondStepSubmit()

{

$validatedData = $this->validate([

'stock' => 'required',

'status' => 'required',

]);

$this->currentLesson = 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->currentLesson = 1;

}

/**

* Write code on Method

*

* @return response()

*/

public function back($step)

{

$this->currentLesson = $step;

}

/**

* Write code on Method

*

* @return response()

*/

public function clearForm()

{

$this->name = '';

$this->amount = '';

$this->description = '';

$this->stock = '';

$this->status = 1;

}

}

resources/views/livewire/wizard.blade.php

<div>

@if(!empty($successMessage))

<div class="alert alert-success">

{{ $successMessage }}

</div>

@endif

<div class="stepwizard">

<div class="stepwizard-row setup-panel">

<div class="stepwizard-step">

<a href="#step-1" type="button" class="btn btn-circle {{ $currentLesson != 1 ? 'btn-default' : 'btn-primary' }}">1</a>

<p>Lesson 1</p>

</div>

<div class="stepwizard-step">

<a href="#step-2" type="button" class="btn btn-circle {{ $currentLesson != 2 ? 'btn-default' : 'btn-primary' }}">2</a>

<p>Lesson 2</p>

</div>

<div class="stepwizard-step">

<a href="#step-3" type="button" class="btn btn-circle {{ $currentLesson != 3 ? 'btn-default' : 'btn-primary' }}" disabled="disabled">3</a>

<p>Lesson 3</p>

</div>

</div>

</div>

<div class="row setup-content {{ $currentLesson != 1 ? 'displayNone' : '' }}" id="step-1">

<div class="col-xs-12">

<div class="col-md-12">

<h3> Lesson 1</h3>

<div class="form-group">

<label for="title">Product Name:</label>

<input type="text" wire:model="name" class="form-control" id="taskTitle">

@error('name') <span class="error">{{ $message }}</span> @enderror

</div>

<div class="form-group">

<label for="description">Product Amount:</label>

<input type="text" wire:model="amount" class="form-control" id="productAmount"/>

@error('amount') <span class="error">{{ $message }}</span> @enderror

</div>

<div class="form-group">

<label for="description">Product Description:</label>

<textarea type="text" wire:model="description" class="form-control" id="taskDescription">{{{ $description ?? '' }}}</textarea>

@error('description') <span class="error">{{ $message }}</span> @enderror

</div>

<button class="btn btn-primary nextBtn btn-lg pull-right" wire:click="firstStepSubmit" type="button" >Next</button>

</div>

</div>

</div>

<div class="row setup-content {{ $currentLesson != 2 ? 'displayNone' : '' }}" id="step-2">

<div class="col-xs-12">

<div class="col-md-12">

<h3> Lesson 2</h3>

<div class="form-group">

<label for="description">Product Status</label><br/>

<label class="radio-inline"><input type="radio" wire:model="status" value="1" {{{ $status == '1' ? "checked" : "" }}}> Active</label>

<label class="radio-inline"><input type="radio" wire:model="status" value="0" {{{ $status == '0' ? "checked" : "" }}}> DeActive</label>

@error('status') <span class="error">{{ $message }}</span> @enderror

</div>

<div class="form-group">

<label for="description">Product Stock</label>

<input type="text" wire:model="stock" class="form-control" id="productAmount"/>

@error('stock') <span class="error">{{ $message }}</span> @enderror

</div>

<button class="btn btn-primary nextBtn btn-lg pull-right" type="button" wire:click="secondStepSubmit">Next</button>

<button class="btn btn-danger nextBtn btn-lg pull-right" type="button" wire:click="back(1)">Back</button>

</div>

</div>

</div>

<div class="row setup-content {{ $currentLesson != 3 ? 'displayNone' : '' }}" id="step-3">

<div class="col-xs-12">

<div class="col-md-12">

<h3> Lesson 3</h3>

<table class="table">

<tr>

<td>Product Name:</td>

<td><strong>{{$name}}</strong></td>

</tr>

<tr>

<td>Product Amount:</td>

<td><strong>{{$amount}}</strong></td>

</tr>

<tr>

<td>Product status:</td>

<td><strong>{{$status ? 'Active' : 'DeActive'}}</strong></td>

</tr>

<tr>

<td>Product Description:</td>

<td><strong>{{$description}}</strong></td>

</tr>

<tr>

<td>Product Stock:</td>

<td><strong>{{$stock}}</strong></td>

</tr>

</table>

<button class="btn btn-success btn-lg pull-right" wire:click="submitForm" type="button">Finish!</button>

<button class="btn btn-danger nextBtn btn-lg pull-right" type="button" wire:click="back(2)">Back</button>

</div>

</div>

</div>

</div>

Lesson 5: Create Route

now we will create one route for calling our lesson so let's add new route to web.php file as bellow:

routes/web.php

Route::get('wizard', function () {

return view('default');

});

Lesson 6: Create View File

here, we will create blade file for call form route. in this file we will use @livewireStyles, @livewireScripts and @livewire('wizard'). so let's add it.

resources/views/default.blade.php

<!DOCTYPE html>

<html>

<head>

<title>Laravel Livewire Lesson - ItSolutionStuff.com</title>

@livewireStyles

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">

<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>

<link href="{{ asset('wizard.css') }}" rel="stylesheet" id="bootstrap-css">

</head>

<body>

<div class="container">

<div class="card">

<div class="card-header">

Laravel Livewire Wizard Form Lesson - ItSolutionStuff.com

</div>

<div class="card-body">

<livewire:wizard />

</div>

</div>

</div>

</body>

@livewireScripts

</html>

public/wizard.css

body{

margin-top:40px;

}

.stepwizard-step p {

margin-top: 10px;

}

.stepwizard-row {

display: table-row;

}

.stepwizard {

display: table;

width: 100%;

position: relative;

}

.stepwizard-step button[disabled] {

opacity: 1 !important;

filter: alpha(opacity=100) !important;

}

.stepwizard-row:before {

top: 14px;

bottom: 0;

position: absolute;

content: " ";

width: 100%;

height: 1px;

background-color: #ccc;

z-order: 0;

}

.stepwizard-step {

display: table-cell;

text-align: center;

position: relative;

}

.btn-circle {

width: 30px;

height: 30px;

text-align: center;

padding: 6px 0;

font-size: 12px;

line-height: 1.428571429;

border-radius: 15px;

}

.displayNone{

display: none;

}

Now you can run using bellow command:

php artisan serve

Open bellow URL:

localhost:8000/wizard

thank you very much for following up with me.

Recent Posts

Related Posts