Hello Artisan,
In this example, I will show you the professional use of Laravel blade components. In this tutorial, I will create some custom blade components and by using them, I will create a dynamic HTML form and also show you the error messages with those components.
After creating the form, I will submit this form and show an error message using that dynamic component. If you don't know how Laravel blade component works, then this tutorial is exactly for you.
Before starting this tutorial, please read this article if you don't know about laravel component.
Recommended: Create and Use Reusable Laravel Component Like Vue React Js
Now let's see how to create laravel blade component to dynamically render HTML. Let's start:
Step 1: Create Component
To create a dynamic html form using laravel blade component, run below command to create some components like input
, button
and error
. So let's create
php artisan make:component Error/Error
php artisan make:component Form/Type/Input
php artisan make:component Form/Type/Button
Step 2: Update Blade Component
Now update those components like below to show error messages and creating a dynamic HTML form.
resources/views/components/error/error.blade.php
resources/views/components/form/type/input.blade.php
resources/views/components/form/type/button.blade.php
Step 3: Update Component Class
Now in this step, we need to update the class component for creating our dynamic HTML form. So let's do it.
App\View\Components\Error\Error.php
namespace App\View\Components\Error;
use Illuminate\View\Component;
class Error extends Component
{
public function __construct()
{
}
public function render()
{
return view('components.error.error');
}
}
App\View\Components\Form\Type\Button.php
namespace App\View\Components\Form\Type;
use Illuminate\View\Component;
class Button extends Component
{
public $type;
public $class;
public function __construct($type, $class)
{
$this->type = $type;
$this->class = $class;
}
public function render()
{
return view('components.form.type.button');
}
}
App\View\Components\Form\Type\Input.php
namespace App\View\Components\Form\Type;
use Illuminate\View\Component;
class Input extends Component
{
public $name;
public $id;
public $class;
public function __construct($name, $id, $class)
{
$this->name = $name;
$this->id = $id;
$this->class = $class;
}
public function render()
{
return view('components.form.type.input');
}
}
Step 3: Create Route
In this step, we have to create our route. So create it like below:
routes/web.php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\TestController;
Route::get('/', [TestController::class, 'index'])->name('task');
Route::post('/', [TestController::class, 'store']);
Step 4: Create Controller
Now in this step, we have to create our controller to show our dynamic reusable HTML form using laravel blade component. So create it and update this controller like below.
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Http\Controllers\Controller;
use App\View\Components\Error\Error;
use Illuminate\Support\Facades\Route;
class TestController extends Controller
{
public function index()
{
return view('welcome');
}
public function store(Request $request)
{
$request->validate([
'name' => 'required',
'address' => 'required',
]);
}
}
Step 5: Create Blade
We are in the final step, In this step, we will create a welcome.blade.php
file and will show our form using our blade components.
resources/views/welcome.blade.php
Read also: Show Error Message in Laravel Using Custom Blade Directive
Have a look, how pretty our HTML form is right now. Hope it can help you.
#laravel #laravel-8x #laravel-blade-components