Friends, components are very important in any website. If you have read any reactjs or angular type library or framework, then you will know what are components or models.
The meaning of components inside the website is that like our one for people to sign up is a component, our check out is a component, our starting a product, going to its product detail page, going to its pricing etc., all these are components, these are called components.
One of the advantages of creating a component is that we can create a component once and use it again and again. This saves our time. Our coding speed is also very fast and our code is also very less, which makes the speed of our website very fast.
There are many ways to create components in Flowerwell, I am going to explain one way to you, read the description below carefully:
A. Write this command
php artisan make:component HeaderComponent
( We can use component for reusable like react, vue and angular )
( Go to app/view/components/HeaderComponent.php ) // class based file
( Go to resource/view/components/HeaderComponent.blade.php ) // view file
B. HeaderComponent.blade.php
<div class="form-control"> <label>Username</label> <input type="text" name="username" class="form-control" /> </div>
C. index.blade.php
<x-HeaderComponent name="username" type="text" label="Username" /> <x-HeaderComponent name="password" type="password" label="Password" />
D. HeaderComponent.php
<?php
namespace App\View\Components;
use Closure;
use Illuminate\Contracts\View\View;
use Illuminate\View\Component;
class HeaderComponent extends Component
{
/**
* Create a new component instance.
*/
public $type;
public $name;
public $label;
public function __construct($type, $name, $label)
{
$this->type = $type;
$this->name = $name;
$this->label = $label;
}
/**
* Get the view / contents that represent the component.
*/
public function render(): View|Closure|string
{
return view('components.cart');
}
}
E. HeaderComponent.blade.php
<div class="form-control">
<label>{{$label}}</label>
<input type="{{$type}}" name="{{$name}}" class="form-control" />
</div>
