💡 مشاوره

مارک پلاس

تکنولوژی نوین اینترنتی

نحوه ایجاد کامپوننت‌های Blade

نحوه ایجاد کامپوننت‌های Blade
کامپوننت‌های Blade

کامپوننت‌های Blade در لاراول به شما این امکان را می‌دهند که قطعات قابل استفاده مجدد کد HTML را به راحتی ایجاد کنید. با استفاده از کامپوننت‌ها می‌توانید کدهای تکراری را مدیریت کرده و ساختار تمپلیت‌های خود را مرتب‌تر و قابل نگهداری‌تر کنید.

در اینجا نحوه ساخت و استفاده از کامپوننت‌های Blade در لاراول را به شما توضیح می‌دهم.

🧩 کامپوننت‌های Blade در لاراول

1. ایجاد کامپوننت Blade

برای ایجاد یک کامپوننت Blade جدید، می‌توانید از دستور Artisan استفاده کنید.

ساخت کامپوننت:

bash
php artisan make:component Alert

این دستور دو فایل را ایجاد می‌کند:

  1. یک کلاس کامپوننت در app/View/Components/Alert.php.

  2. یک فایل Blade در resources/views/components/alert.blade.php.

1.1. فایل کلاس کامپوننت

در فایل کلاس Alert.php، می‌توانید داده‌های مورد نیاز برای کامپوننت خود را تعریف کنید. برای مثال، اگر می‌خواهید یک پیغام هشدار را از طریق کامپوننت نمایش دهید:

php
namespace App\View\Components;

use Illuminate\View\Component;

class Alert extends Component
{
    public $type;
    public $message;

    public function __construct($type = 'info', $message = '')
    {
        $this->type = $type;
        $this->message = $message;
    }

    public function render()
    {
        return view('components.alert');
    }
}

در اینجا:

  • $type و $message به عنوان ویژگی‌های کامپوننت تعریف شده‌اند.

  • متد render مشخص می‌کند که کدام فایل Blade باید برای این کامپوننت استفاده شود.

1.2. فایل Blade کامپوننت

در فایل alert.blade.php، می‌توانید کد HTML کامپوننت را بنویسید. در این مثال، کد برای نمایش یک پیغام هشدار به این صورت است:

blade
<div class="alert alert-{{ $type }}">
    {{ $message }}
</div>

در اینجا:

  • از متغیرهای $type و $message که در کلاس کامپوننت تعریف کرده‌ایم، استفاده می‌کنیم.

  • می‌توانید استایل‌ها را با توجه به نوع هشدار (مثل info, warning, success) تنظیم کنید.

2. استفاده از کامپوننت Blade در ویوها

پس از ایجاد کامپوننت، می‌توانید آن را در هر جایی از ویوهای خود فراخوانی کنید. برای استفاده از کامپوننت‌ها در Blade، از دستور <x-component-name /> استفاده می‌شود.

برای مثال، برای نمایش کامپوننت Alert در یک فایل Blade دیگر:

blade
<x-alert type="success" message="Your action was successful!" />

در اینجا:

  • از type="success" برای تعیین نوع هشدار استفاده شده.

  • message="Your action was successful!" پیامی است که در کامپوننت نمایش داده می‌شود.

3. کامپوننت‌های Blade با داده‌های دینامیک

کامپوننت‌ها می‌توانند پارامترهای دینامیک بگیرند. برای ارسال داده به کامپوننت، می‌توانید از ویژگی‌های کامپوننت استفاده کنید.

مثلاً اگر بخواهید یک کامپوننت برای نمایش یک فرم ایجاد کنید:

blade
<x-form :action="route('submit')" :method="'POST'">
    <input type="text" name="name" placeholder="Enter your name">
    <button type="submit">Submit</button>
</x-form>

در اینجا:

  • از :action و :method برای ارسال مقادیر دینامیک به کامپوننت استفاده شده.

  • در فایل کلاس کامپوننت Form، شما می‌توانید این پارامترها را دریافت کرده و به فایل Blade خود منتقل کنید.

4. ایجاد کامپوننت‌های پیچیده‌تر با حالت‌ها

برای ایجاد کامپوننت‌های پیچیده‌تر با حالت‌های مختلف (مثلاً نمایش یا عدم نمایش بخش‌هایی از کامپوننت)، می‌توانید از Blade Directives مانند @if, @foreach یا @isset در داخل کامپوننت‌های خود استفاده کنید.

برای مثال، فرض کنید یک کامپوننت داشبورد داریم که اطلاعات مختلفی را نمایش می‌دهد. می‌توانید به این صورت عمل کنید:

php
// Dashboard.php
public function render()
{
    $notifications = Notification::all();
    return view('components.dashboard', compact('notifications'));
}

در فایل dashboard.blade.php:

blade
<div class="dashboard">
    @foreach($notifications as $notification)
        <div class="notification">
            {{ $notification->message }}
        </div>
    @endforeach
</div>

5. استفاده از slot‌ها در کامپوننت‌ها

Slot‌ها به شما این امکان را می‌دهند که قسمت‌هایی از HTML کامپوننت را از بیرون (از جایی که کامپوننت را فراخوانی کرده‌اید) تعیین کنید.

برای استفاده از slot در یک کامپوننت، به این صورت عمل کنید:

5.1. تغییر کد کامپوننت:

blade
<div class="alert alert-{{ $type }}">
    {{ $message }}
    <div class="alert-details">
        {{ $slot }}  <!-- اینجا slot را نمایش می‌دهیم -->
    </div>
</div>

5.2. استفاده از slot در ویو:

blade
<x-alert type="info" message="This is an alert!">
    <p>This is some extra details for the alert.</p>
</x-alert>

در اینجا، محتوای <p> به طور دینامیک در داخل کامپوننت قرار می‌گیرد.

6. کامپوننت‌های Blade به عنوان فرم

شما می‌توانید کامپوننت‌های Blade را برای ایجاد فرم‌های قابل استفاده مجدد استفاده کنید. برای مثال، فرض کنید می‌خواهید یک فرم ایجاد کنید که در پروژه‌های مختلف قابل استفاده باشد.

6.1. کامپوننت فرم:

php
// php artisan make:component Form

در فایل form.blade.php:

blade
<form action="{{ $action }}" method="{{ $method }}">
    {{ $slot }}
</form>

6.2. استفاده از فرم در دیگر ویوها:

blade
<x-form :action="route('submit')" method="POST">
    <input type="text" name="username" placeholder="Username">
    <button type="submit">Submit</button>
</x-form>

💡 جمع‌بندی

کامپوننت‌های Blade در لاراول یک روش قدرتمند برای ایجاد کدهای قابل استفاده مجدد و سازمان‌دهی بهتر ویوها هستند. با استفاده از کامپوننت‌ها می‌توانید قسمت‌های مختلف صفحات خود را به راحتی مدیریت کنید و از تکرار کد جلوگیری کنید.

اگر سوالی درباره‌ی کامپوننت‌ها دارید یا نیاز به کمک در ایجاد یک کامپوننت خاص دارید، می‌توانید سوال کنید! 😎