Hi Developers ,
Lets see How to Create Multi Step Form Example In Laravel
Lets start coding by creating new laravel project using the following command
laravel new multistep-formNow, create migration and model using the below command.
php artisan make:model Product -m
the above command will create both model name "Product.php" and a migration table name "products"
products table:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateProductsTable extends Migration
{
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->rememberToken();
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('products');
}
}Model:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class Product extends Model
{
protected $fillable = [
'name', 'amount', 'description', 'status', 'stock'
];
}Now, we will add the routes on the web.php file.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ProductController;
Route::get('products', [ProductController::class,'index'])->name('products.index');
Route::get('products/create-step-one', [ProductController::class,'createStepOne'])->name('products.create.step.one');
Route::post('products/create-step-one', [ProductController::class,'postCreateStepOne'])->name('products.create.step.one.post');
Route::get('products/create-step-two', [ProductController::class,'createStepTwo'])->name('products.create.step.two');
Route::post('products/create-step-two', [ProductController::class,'postCreateStepTwo'])->name('products.create.step.two.post');
Route::get('products/create-step-three', [ProductController::class,'createStepThree'])->name('products.create.step.three');
Route::post('products/create-step-three', [ProductController::class,'postCreateStepThree'])->name('products.create.step.three.post');
});Now, we will create a controller using the below command.
php artisan make:controller ProductController
In the ProductController add the below code and store the value in the database.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Product;
class ProductController extends Controller
{
public function index()
{
$products = Product::all();
return view('products.index',compact('products'));
}
public function createStepOne(Request $request)
{
$product = $request->session()->get('product');
return view('products.create-step-one',compact('product'));
}
public function postCreateStepOne(Request $request)
{
$validatedData = $request->validate([
'name' => 'required|unique:products',
'amount' => 'required|numeric',
'description' => 'required',
]);
if(empty($request->session()->get('product'))){
$product = new Product();
$product->fill($validatedData);
$request->session()->put('product', $product);
}else{
$product = $request->session()->get('product');
$product->fill($validatedData);
$request->session()->put('product', $product);
}
return redirect()->route('products.create.step.two');
}
public function createStepTwo(Request $request)
{
$product = $request->session()->get('product');
return view('products.create-step-two',compact('product'));
}
public function postCreateStepTwo(Request $request)
{
$validatedData = $request->validate([
'stock' => 'required',
'status' => 'required',
]);
$product = $request->session()->get('product');
$product->fill($validatedData);
$request->session()->put('product', $product);
return redirect()->route('products.create.step.three');
}
public function createStepThree(Request $request)
{
$product = $request->session()->get('product');
return view('products.create-step-three',compact('product'));
}
public function postCreateStepThree(Request $request)
{
$product = $request->session()->get('product');
$product->save();
$request->session()->forget('product');
return redirect()->route('products.index');
}
}default.blade.php
<html>
<head>
<title>Multi Step Form Example In Laravel- ITSolutionsGuides</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" />
</head>
<body style="background-color: #f3fdf3">
<div class="container">
<h2> Laravel Multi Step Form Example - ITSolutionsGuides</h2>
@yield('content')
</div>
</body>
</html>index.blade.php
@extends('layout.default')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<div class="card">
<div class="card-header">Manage Product</div>
<div class="card-body">
<a href="{{ route('products.create.step.one') }}" class="btn btn-primary pull-right">Create Product</a>
@if (Session::has('message'))
<div class="alert alert-info">{{ Session::get('message') }}</div>
@endif
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">#</th>
<th scope="col">Product Name</th>
<th scope="col">Product Description</th>
<th scope="col">Stock</th>
<th scope="col">Amount</th>
<th scope="col">Status</th>
</tr>
</thead>
<tbody>
@foreach($products as $product)
<tr>
<th scope="row">{{$product->id}}</th>
<td>{{$product->name}}</td>
<td>{{$product->description}}</td>
<td>{{$product->stock}}</td>
<td>{{$product->amount}}</td>
<td>{{$product->status ? 'Active' : 'DeActive'}}</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
@endsectioncreate-step-one.blade.php
@extends('layout.default')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<form action="{{ route('products.create.step.one.post') }}" method="POST">
@csrf
<div class="card">
<div class="card-header">Step 1: Basic Info</div>
<div class="card-body">
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="form-group">
<label for="title">Product Name:</label>
<input type="text" value="{{ $product->name ?? '' }}" class="form-control" id="taskTitle" name="name">
</div>
<div class="form-group">
<label for="description">Product Amount:</label>
<input type="text" value="{{{ $product->amount ?? '' }}}" class="form-control" id="productAmount" name="amount"/>
</div>
<div class="form-group">
<label for="description">Product Description:</label>
<textarea type="text" class="form-control" id="taskDescription" name="description">{{{ $product->description ?? '' }}}</textarea>
</div>
</div>
<div class="card-footer text-right">
<button type="submit" class="btn btn-primary">Next</button>
</div>
</div>
</form>
</div>
</div>
</div>
@endsectioncreate-step-two.blade.php
@extends('layout.default')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<form action="{{ route('products.create.step.two.post') }}" method="POST">
@csrf
<div class="card">
<div class="card-header">Step 2: Status & Stock</div>
<div class="card-body">
@if ($errors->any())
<div class="alert alert-danger">
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
@endif
<div class="form-group">
<label for="description">Product Status</label><br/>
<label class="radio-inline"><input type="radio" name="status" value="1" {{{ (isset($product->status) && $product->status == '1') ? "checked" : "" }}}> Active</label>
<label class="radio-inline"><input type="radio" name="status" value="0" {{{ (isset($product->status) && $product->status == '0') ? "checked" : "" }}}> DeActive</label>
</div>
<div class="form-group">
<label for="description">Product Stock</label>
<input type="text" value="{{{ $product->stock ?? '' }}}" class="form-control" id="productAmount" name="stock"/>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md-6 text-left">
<a href="{{ route('products.create.step.one') }}" class="btn btn-danger pull-right">Previous</a>
</div>
<div class="col-md-6 text-right">
<button type="submit" class="btn btn-primary">Next</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
@endsectioncreate-step-three.blade.php
@extends('layout.default')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-10">
<form action="{{ route('products.create.step.three.post') }}" method="post" >
@csrf
<div class="card">
<div class="card-header">Step 3: Review Details</div>
<div class="card-body">
<table class="table">
<tr>
<td>Product Name:</td>
<td><strong>{{$product->name}}</strong></td>
</tr>
<tr>
<td>Product Amount:</td>
<td><strong>{{$product->amount}}</strong></td>
</tr>
<tr>
<td>Product status:</td>
<td><strong>{{$product->status ? 'Active' : 'DeActive'}}</strong></td>
</tr>
<tr>
<td>Product Description:</td>
<td><strong>{{$product->description}}</strong></td>
</tr>
<tr>
<td>Product Stock:</td>
<td><strong>{{$product->stock}}</strong></td>
</tr>
</table>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md-6 text-left">
<a href="{{ route('products.create.step.two') }}" class="btn btn-danger pull-right">Previous</a>
</div>
<div class="col-md-6 text-right">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
@endsectionWe hope it helps everyone. Thanks for supporting ITSolutionsGuides and keep supporting us also follow us in social media platforms.
Be the first to know about releases and tutorial news and solutions.
We care about your data in our privacy policy.
ITSolutionsGuides was started mainly to provide good and quality web solutions for all the developers. We provide tutorials to support all the developers and also we try to provide solutions to the errors we face while coding.
ITSolutionsGuides, provide users with an easy-to-use form to reach out for support or inquiries.
Copyright © 2023 - 2024 All rights reserved | ITSolutionsGuides