ਲੇਖ

ਲਾਰਵੇਲ ਕੰਪੋਨੈਂਟ ਕੀ ਹਨ ਅਤੇ ਉਹਨਾਂ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ

ਲਾਰਵੇਲ ਕੰਪੋਨੈਂਟ ਇੱਕ ਉੱਨਤ ਵਿਸ਼ੇਸ਼ਤਾ ਹੈ, ਜੋ ਕਿ ਲਾਰਵੇਲ ਦੇ ਸੱਤਵੇਂ ਸੰਸਕਰਣ ਦੁਆਰਾ ਜੋੜਿਆ ਗਿਆ ਹੈ। ਇਸ ਲੇਖ ਵਿੱਚ ਅਸੀਂ ਇਹ ਦੇਖਣ ਜਾ ਰਹੇ ਹਾਂ ਕਿ ਕੰਪੋਨੈਂਟ ਕੀ ਹੈ, ਇਸਨੂੰ ਕਿਵੇਂ ਬਣਾਉਣਾ ਹੈ, ਬਲੇਡ ਮਾਡਲ ਵਿੱਚ ਕੰਪੋਨੈਂਟਸ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰਨੀ ਹੈ ਅਤੇ ਪੈਰਾਮੀਟਰ ਪਾਸ ਕਰਕੇ ਕੰਪੋਨੈਂਟ ਨੂੰ ਕਿਵੇਂ ਮਾਪਦੰਡ ਕਰਨਾ ਹੈ।

ਲਾਰਵੇਲ ਕੰਪੋਨੈਂਟ ਕੀ ਹੈ?

ਇੱਕ ਕੰਪੋਨੈਂਟ ਕੋਡ ਦਾ ਇੱਕ ਟੁਕੜਾ ਹੁੰਦਾ ਹੈ ਜਿਸਨੂੰ ਅਸੀਂ ਕਿਸੇ ਵੀ ਟੈਂਪਲੇਟ ਬਲੇਡ ਵਿੱਚ ਦੁਬਾਰਾ ਵਰਤ ਸਕਦੇ ਹਾਂ। ਇਹ ਸੈਕਸ਼ਨ, ਲੇਆਉਟ, ਅਤੇ ਸ਼ਾਮਲ ਵਰਗਾ ਕੁਝ ਹੈ। ਉਦਾਹਰਨ ਲਈ, ਅਸੀਂ ਹਰੇਕ ਟੈਂਪਲੇਟ ਲਈ ਇੱਕੋ ਸਿਰਲੇਖ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹਾਂ, ਇਸਲਈ ਅਸੀਂ ਇੱਕ ਹੈਡਰ ਕੰਪੋਨੈਂਟ ਬਣਾ ਸਕਦੇ ਹਾਂ, ਜਿਸਨੂੰ ਅਸੀਂ ਦੁਬਾਰਾ ਵਰਤ ਸਕਦੇ ਹਾਂ।

ਬਿਹਤਰ ਸਮਝ ਲਈ ਕੰਪੋਨੈਂਟਸ ਦੀ ਇੱਕ ਹੋਰ ਵਰਤੋਂ ਇਹ ਹੈ ਕਿ ਤੁਹਾਨੂੰ ਵੈੱਬਸਾਈਟ 'ਤੇ ਕਈ ਥਾਵਾਂ ਜਿਵੇਂ ਕਿ ਸਿਰਲੇਖ, ਫੁੱਟਰ ਜਾਂ ਵੈੱਬਸਾਈਟ 'ਤੇ ਕਿਤੇ ਵੀ ਇੱਕ ਰਜਿਸਟਰ ਬਟਨ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਇਸ ਲਈ ਉਸ ਬਟਨ ਕੋਡ ਦਾ ਇੱਕ ਹਿੱਸਾ ਬਣਾਓ ਅਤੇ ਇਸਨੂੰ ਦੁਬਾਰਾ ਵਰਤੋਂ ਕਰੋ।

ਲਾਰਵੇਲ ਵਿੱਚ ਕੰਪੋਨੈਂਟਸ ਕਿਵੇਂ ਬਣਾਉਣੇ ਹਨ

ਉਦਾਹਰਨ ਲਈ, ਆਓ ਇੱਕ ਕੰਪੋਨੈਂਟ ਬਣਾਉਂਦੇ ਹਾਂ Header ਨਾਲ 'Artisan:

php artisan make:component Header

ਇਹ ਕਮਾਂਡ ਤੁਹਾਡੇ laravel ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਦੋ ਫਾਈਲਾਂ ਬਣਾਉਂਦਾ ਹੈ:

ਨਾਮ ਦੇ ਨਾਲ ਇੱਕ PHP ਫਾਈਲ Header.php ਡਾਇਰੈਕਟਰੀ ਦੇ ਅੰਦਰ app/http/View/Components;
ਅਤੇ ਨਾਮ ਦੇ ਨਾਲ ਇੱਕ HTML ਬਲੇਡ ਫਾਈਲ header.blade.php ਡਾਇਰੈਕਟਰੀ ਦੇ ਅੰਦਰ resources/views/components/.

ਤੁਸੀਂ ਸਬ-ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਭਾਗ ਵੀ ਬਣਾ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ:

php artisan make:component Forms/Button

ਇਹ ਕਮਾਂਡ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਇੱਕ ਬਟਨ ਕੰਪੋਨੈਂਟ ਬਣਾਏਗੀ App\View\Components\Forms ਅਤੇ ਬਲੇਡ ਫਾਈਲ ਨੂੰ ਸਰੋਤ/ਵਿਯੂਜ਼/ਕੰਪੋਨੈਂਟਸ/ਫਾਰਮ ਡਾਇਰੈਕਟਰੀ ਵਿੱਚ ਰੱਖਿਆ ਜਾਵੇਗਾ।

HTML ਬਲੇਡ ਫਾਈਲ ਵਿੱਚ ਕੰਪੋਨੈਂਟ ਨੂੰ ਰੈਂਡਰ ਕਰਨ ਲਈ, ਅਸੀਂ ਇਸ ਸੰਟੈਕਸ ਦੀ ਵਰਤੋਂ ਕਰਾਂਗੇ:

ਲਾਰਵੇਲ ਕੰਪੋਨੈਂਟਸ ਦੀ ਉਦਾਹਰਨ

ਪਹਿਲਾਂ ਅਸੀਂ ਫਾਈਲ ਵਿੱਚ ਕੁਝ HTML ਕੋਡ ਪਾਉਗੇ header.blade.php ਹਿੱਸੇ ਦੇ.

<div><h1> Header Component </h1></div>

ਹੁਣ ਇੱਕ ਵਿਊ ਫਾਈਲ ਬਣਾਓ users.blade.php ਸੰਪੱਤੀ ਫੋਲਡਰ ਵਿੱਚ, ਜਿੱਥੇ ਅਸੀਂ ਹੈਡਰ ਕੰਪੋਨੈਂਟ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹਾਂ।

<x-header /><h1>User Page</h1>

ਹੁਣ, ਦੇ ਸਿਸਟਮ ਦੁਆਰਾ ਰੂਟਿੰਗ laravel ਦੇ, ਅਸੀਂ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਨਤੀਜਾ ਪ੍ਰਦਰਸ਼ਿਤ ਕਰਨ ਲਈ ਬਲੇਡ ਨੂੰ ਕਾਲ ਕਰਦੇ ਹਾਂ

ਲਾਰਵੇਲ ਕੰਪੋਨੈਂਟਸ ਨੂੰ ਡੇਟਾ ਕਿਵੇਂ ਪਾਸ ਕਰਨਾ ਹੈ

ਕੰਪੋਨੈਂਟ ਨੂੰ ਡਾਟਾ ਪਾਸ ਕਰਨ ਲਈ Blade ਹੇਠ ਦਿੱਤੇ ਸੰਟੈਕਸ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਜਾਂਦੀ ਹੈ, ਤੱਤ ਦੇ ਅੰਦਰ ਪੈਰਾਮੀਟਰ ਨਾਲ ਸੰਬੰਧਿਤ ਮੁੱਲ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਦੇ ਹੋਏ HTML:

<x-header message=”Utenti” />

ਉਦਾਹਰਨ ਲਈ, ਅਸੀਂ user.blade.php ਫਾਈਲ ਵਿੱਚ ਪਿਛਲੇ ਹਿੱਸੇ ਦੀ ਵਰਤੋਂ ਕੀਤੀ ਹੈ।

ਤੁਹਾਨੂੰ ਚਾਹੀਦਾ ਹੈ defiheader.php ਫਾਈਲ ਵਿੱਚ ਕੰਪੋਨੈਂਟ ਡੇਟਾ ਨੂੰ ਨਿਸ਼ ਕਰੋ। ਸਾਰੇ ਜਨਤਕ ਵੇਰੀਏਬਲ ਡੇਟਾ ਕੰਪੋਨੈਂਟ ਦ੍ਰਿਸ਼ ਲਈ ਆਪਣੇ ਆਪ ਉਪਲਬਧ ਸੀ।

ਫਾਈਲ ਵਿੱਚ ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ header.php ਐਪ/http/View/Components/ ਡਾਇਰੈਕਟਰੀ ਦੇ ਅੰਦਰ .

<?php

namespace App\View\Components;
use Illuminate\View\Component;

   class Header extends Component{

   /*** The alert type.** @var string*/

   public $title = "";

   public function __construct($message){

   $this->title = $message;

   }
}

ਜਿਵੇਂ ਕਿ ਤੁਸੀਂ ਦੇਖ ਸਕਦੇ ਹੋ, ਕਲਾਸ ਦੀ ਕੰਸਟਰਕਟਰ ਵਿਧੀ ਵੇਰੀਏਬਲ ਨੂੰ ਸੈੱਟ ਕਰਦੀ ਹੈ $title ਕੰਪੋਨੈਂਟ ਨੂੰ ਪਾਸ ਕੀਤੇ ਪੈਰਾਮੀਟਰ ਮੁੱਲ ਦੇ ਨਾਲ। ਹੁਣ ਵੇਰੀਏਬਲ ਨੂੰ ਜੋੜੋ $title ਕੰਪੋਨੈਂਟ ਫਾਈਲ ਵਿੱਚ header.blade.php ਪਿਛਲੇ ਡੇਟਾ ਨੂੰ ਦਿਖਾਉਣ ਲਈ.

<div> <h1> {{$title}}'s Header Component </h1> </div>

ਹੁਣ ਇਹ ਸੰਚਾਰਿਤ ਕੰਪੋਨੈਂਟ ਡੇਟਾ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਪ੍ਰਦਰਸ਼ਿਤ ਹੋਵੇਗਾ।

ਇਸੇ ਤਰ੍ਹਾਂ, ਤੁਸੀਂ ਇੱਕ ਹੋਰ ਵਿਜ਼ੂਅਲਾਈਜ਼ੇਸ਼ਨ ਫਾਈਲ ਬਣਾ ਕੇ, ਵੱਖਰੇ ਡੇਟਾ ਦੇ ਨਾਲ ਇੱਕ ਹੋਰ ਵਿਜ਼ੂਅਲਾਈਜ਼ੇਸ਼ਨ ਪੰਨੇ 'ਤੇ ਇਸ ਭਾਗ ਦੀ ਵਰਤੋਂ ਕਰ ਸਕਦੇ ਹੋ blade contact.blade.php ਅਤੇ ਪਾਸ ਕੀਤੇ ਡੇਟਾ ਨੂੰ ਦਿਖਾਉਣ ਲਈ ਹੇਠਾਂ ਕੰਪੋਨੈਂਟ ਕੋਡ ਸ਼ਾਮਲ ਕਰੋ।