اتفاقات روزمره ، اخبار مهم و دیگر مطالب میهن وب هاست را می توانید در این قسمت مطالعه کنید

لاراول Blade و موتورهای قالب لاراول از React، Vue و کتابخانه های دیگر پشتیبانی می کنند. با این حال، توسعه دهندگان Laravel علاقه زیادی به قالب های Blade دارند زیرا به آنها امکان می دهد تا ظاهری ماژولار و با قابلیت استفاده مجدد ایجاد نمایند. لاراول Blade به شما امکان می دهد چیدمان را به راحتی گسترش دهید، بخش ها را تعریف کنید و از ساختارهای کنترلی برای تولید محتوای داده محور استفاده نمایید. این مقاله کاربردی به بررسی این موضوع می پردازد که Blade چیست، چگونه کار می کند و چگونه برنامه های لاراول شما را بهبود می بخشد.

تصویر(1)

هر آنچه برای استفاده از لاراول Blade نیاز دارید

لاراول Blade موتور قالب پیش فرض برای فریم ورک لاراول است. Blade به شما امکان می دهد از متغیرها، حلقه ها، عبارات شرطی و سایر ویژگی های PHP به طور مستقیم در کد HTML خود استفاده کنید. برای ایجاد یک فایل Blade، باید فایلی جدید با پسوند .blade.php در دایرکتوری resources/views پروژه Laravel خود ایجاد نمایید. سپس، می توانید از این فایل برای پیکربندی صفحات پویا بهره ببرید.

چرا باید از Blade استفاده کنید؟

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

encapsulation یا "کپسوله سازی" کد یکی دیگر از مزایای Blade است. Blade به کپسوله سازی توابع کمک می کند که آزمایش، اشکال زدایی و نگهداری کد را مدیریت پذیرتر می نماید. این روش برای برنامه های بزرگتر مفید است زیرا مدیریت برنامه های نامنظم می تواند بسیار دشوار شود. موتور قالب لاراول Blade کد PHP را به صورت پویا کامپایل کرده و سپس آن را در کش ذخیره می کند. این کار باعث می شود که موتور قالب Blade بسیار سریعتر از سایر فریم ورک های PHP باشد.

نحوه استفاده از لاراول Blade

در این آموزش موارد زیر توضیح داده می شوند:

• ایجاد یک اپلیکیشن Laravel و استفاده عملی از قالب های Blade 
• نحوه چیدمان Blade و گسترش آنها
• انتقال داده ها بین نماهای لاراول Blade
• استفاده از ساختارهای کنترلی موجود و ساخت Blade های شخصی برای خود

پیش نیازها

برای درک این آموزش، مطمئن شوید که با موارد زیر آشنایی دارید:

• آشنایی قبلی با PHP
• نصب Composer: با اجرای دستور composer -V مطمئن شوید که Composer روی سیستم شما نصب می باشد.

نحوه ایجاد اپلیکیشن لاراول

برای ایجاد یک نمونه اپلیکیشن لاراول، دستور زیر را اجرا کنید:

composer create-project laravel/laravel my-app

با اجرای مجموعه دستورالعمل‌ها در ترمینال، ایجاد اپلیکیشن را به اتمام برسانید.

در مرحله بعد، وارد دایرکتوری اپلیکیشن شوید و آن را با این دستور اجرا کنید:

cd my-app
php artisan serve

روی لینک موجود در ترمینال کلیک کنید تا ز لاراول در مرورگر شما باز شود.

تصویر(2)

نحوه تعریف Layout در لاراول Blade

Layouts به شما امکان می دهد تا بخش هایی از اپلیکیشن تحت وب خود را برای اشتراک گذاری در چندین صفحه پیکربندی کنید. به عنوان مثال، اگر اپلیکیشن شما دارای یک نوار ناوبری و پاورقی ثابت در سراسر صفحات باشد، یک بار ایجاد آن کارآمدتر از ساخت مجدد برای هر صفحه است.

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

<!-- Page 1 -->
<nav>. . . </nav>
  Content for page 1
<footer> . . . </footer>

<!-- Page 2 -->
<nav>. . . </nav>
  Content for page 2
<footer> . . . </footer>

در عوض، می‌توانید به راحتی برنامه خود را با استفاده از Layouts بسازید. این کار باعث می شود کد شما منظم تر شده و خوانایی بیشتری داشته باشد:

<!-- Main layout code -->
<nav>. . . </nav>
{slot}
<footer> . . . </footer>

پس از تعریف Layout های خود، می توانید از آن در هر صفحه ای که تمایل دارید استفاده نمایید:

<!-- Page 1 or Page n -->
<main-layout>
  Content for page n
</main-layout>

در نسخه های قدیمی لاراول، شما باید با استفاده از ارث بری قالب، اجزا را ایجاد می کردید. با این حال، زمانی که لاراول ویژگی کامپوننت را اضافه کرد، ایجاد اجزا بسیار آسان‌تر شد. برای ایجاد یک طرح جدید با لاراول Blade، ابتدا این دستور را اجرا کنید تا کامپوننت layout ایجاد شود:

php artisan make:component Layout

این دستور یک فایل layout.blade.php جدید ایجاد می کند که در یک پوشه جدید به نام components در دایرکتوری resources/views/ قرار دارد. فایل ذکر شده را باز کنید و کد زیر را در آن قرار دهید:

<html>
  <head>
    <title>{{ $title ?? 'Example Website' }}</title>
    <link rel="stylesheet" href="{{ asset('/css/app.css') }}">
  </head>
  <body>
    <nav>
      <h3>Welcome to my website</h3>
      <hr>
    </nav>
    {{ $slot }}
    <footer>
      <hr />
      © 2023 example.com
    </footer>
  </body>
</html>

این کد یک کامپوننت layout ایجاد می کند که دارای یک نوار ناوبری و پاورقی ساده است. تابع slot مکانی می باشد که می توانید محتوای اصلی را در آن قرار دهید.

نحوه گسترش اجزا

با استفاده از تگ <x-component-name> به راحتی می توانید یک کامپوننت را در View لاراول Blade قرار دهید. این روش برای کامپوننت اجزایی که قبلاً ایجاد کرده‌اید نیز اعمال می‌شود. برای مشاهده خروجی طرح، فایل esources/views/welcome.blade.php پیش فرض را باز کنید و محتوای فایل را با این کد جایگزین نمایید:

<x-layout>
  <div>
<h1>Hello World!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
    <button class="btn">Get Started</button>
  </div>
</x-layout>

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

در کدی که layout ها را تعریف کرده، می‌توانید مشاهده نمایید که اگر کد محتوای title را ارسال نکند، داده title با مقدار پیش‌فرض «Example Website» لود می‌شود. می توانید داده ها را به منطقه ای خاص از یک View منتقل کنید. برای این کار، از کد <"x-slot name="title> استفاده نمایید. در این مورد، نام اسلات "title" است. فایل welcome.blade.php را با کد زیر بروز کنید و صفحه را مجددا لود نمایید:

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <div>
  <h1>Hello World!</h1>
  <p>Lorem ipsum dolor sit amet consectetur adipiscing elit. Hic, aut?</p>
    <button class="btn">Get Started</button>
  </div>
</x-layout>

در مرحله بعد، برای بهبود ظاهر اپلیکیشن خود، استایل ها را اضافه کنید. یک فایل app.css جدید در پوشه /public/css ایجاد و سپس کد موردنظر را در آن درج نمایید. با اعمال این بروز رسانی ها، در پیش نمایش برنامه خود باید خروجی زیر را مشاهده کنید.

تصویر(3)

نحوه افزودن داده های Backend در لاراول Blade

در مثال قبلی، شما به راحتی داده ها را بین اجزا و نماها از طریق slot ها به اشتراک گذاشتید. با این حال، برای لود داده ها از پایگاه داده یا سایر منابع خارجی، روش های بهتری نیز وجود دارد. اگر تمایل دارید داده ها را مستقیماً از پوشه routes خود لود و منتقل کنید، می توانید این کار را با باز کردن فایل routes/web.php و جایگزینی محتویات آن با کد زیر انجام دهید:

<?php
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
  $name = "John Doe";
  return view('welcome', ['name' => $name]);
});

در کد بالا، مسیر وب خود را بروزرسانی کرده‌اید تا نام «John Doe» را به View خوش‌آمدگویی اضافه نمایید. اکنون در خروجی لاراول Blade خود به این مقدار دسترسی خواهید داشت:

<div>
  Hello, {{ $name }}
  <!-- Outputs: Hello, John Doe -->
</div>

می توانید از این روش برای لود داده ها از پایگاه داده استفاده نمایید. به عنوان مثال، فرض کنید یک جدول to-do دارید که حاوی لیست کارها است. می توانید از رابط کاربری DB برای لود این کارها و ارسال آنها به لیست خود استفاده نمایید:

<?php
use Illuminate\Support\Facades\DB; // Import DB Facade
use Illuminate\Support\Facades\Route;
Route::get('/', function () {
  $todos = DB::table('todos')->get();
  return view('welcome', ['todos' => $todos]);
});

با این حال، اگر پایگاه داده ندارید، مسیر ورود به وب را برای ارسال آرایه ای از کارهای ثابت بروز کنید. فایل routes/web.php را باز کرده و مسیر پیش فرض (/) را با کد زیر بروز نمایید:

Route::get('/', function () {
  $todos = ['Learn Laravel', 'Learn Blade', 'Build Cool Stuff'];
  return view('welcome', ['todos' => $todos]);
});

برای اینکه بتوانید لیست کارها را به‌عنوان یک آرایه JSON مشاهده کنید، باید کد زیر را در فایل welcome.blade.php قرار دهید.

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <p>{{ json_encode($todos) }}</p>
  <!-- Output:  ["Learn Laravel","Learn Blade","Build Cool Stuff"] -->
</x-layout>

نحوه استفاده از میانبرهای کنترل

موتور قالب لاراول Blade نیز از دستورالعمل‌های متعدد برای ارائه انواع داده‌های مختلف به صورت مشروط پشتیبانی می‌کند. برای مثال، اگر می‌خواهید آرایه to-do بازگشتی را که به صفحه خوش‌آمدگویی خود ارسال کرده اید، تکرار کنید، می‌توانید یک حلقه foreach را در فایل welcome.blade.php قرار دهید:

<x-layout>
  <x-slot name="title">
    Home | Example Website
  </x-slot>
  <ul>
    @foreach ($todos as $todo)
      <li>{{ $todo }}</li>
    @endforeach
  </ul>     
</x-layout>

این تغییر باید لیست کارهای شما را مانند تصویر زیر نمایش دهد.

تصویر(4)

برای ساخت بلوکی از دستورات شرطی، از دستورات if، @elseif، @else و endif@ استفاده کنید. به عنوان مثال:

@if (count($todos) === 1)
  <p>I have one task!</p>
@elseif (count($todos) > 1)
  <p>I have multiple tasks!</p>
@else
  <p>I don't have any tasks!</p>
@endif

محتوای فایل welcome.blade.php را با کد بالا جایگزین کنید. با توجه به اینکه بیش از یک کار در لیست کارهای خود دارید، باید «I have multiple tasks!» را در مرورگر مشاهده نمایید.

نحوه ایجاد یک پسوند سفارشی در لاراول Blade

شما هم می‌توانید مشابه مثال قبلی یک دستور دلخواه بنویسید. جهت آشنایی با این تکنیک، دستوری برای کوتاه کردن متن ایجاد کنید. ابتدا با اجرای دستور زیر، یک سرویس دهنده جدید بسازید:

php artisan make:provider TruncateTextServiceProvider

این دستور یک فایل سرویس‌دهنده جدید در app/Providers/TruncateTextServiceProvider.php ایجاد می‌کند. این فایل را باز کنید و محتوای آن را با کد زیر جایگزین کنید:

<?php
namespace App\Providers;
use Illuminate\Support\Facades\Blade;
use Illuminate\Support\ServiceProvider;
class TruncateTextServiceProvider extends ServiceProvider
{
  public function register()
  {
    //
  }
  public function boot()
  {
    Blade::directive('truncate', function ($expression) {
      list($text, $length) = explode(',', $expression);
      return "<?php echo Str::limit($text, $length); ?>";
    });
  }
}

این کد یک دستور جدید به نام truncate@ برای قالب های لاراول Blade تعریف می کند. این دستور می تواند برای کوتاه کردن متن به طول مشخص استفاده شود. در نهایت، باید سرویس‌دهنده را با افزودن آن به آرایه providers در فایل پیکربندی config/app.php ثبت کنید.

'providers' => [
  // Other service providers
  App\Providers\TruncateTextServiceProvider::class,
],

از دستورات دلخواه، در قالب‌های Blade خود (welcome.blade.php) با فراخوانی آن از طریق دستور truncate@ استفاده کنید.

<div>
  @truncate('Lorem ipsum dolor sit amet', 10)
  <!-- Outputs: Lorem ipsu... -->
</div>

سخن پایانی 

این مقاله به بررسی این موضوع پرداخته است که چگونه لاراول Blade شما را قادر می‌سازد تا فرآیند توسعه خود را ساده کنید و در عین حال نماهای ماژولار و با قابلیت استفاده مجدد را برای اپلیکیشن های تحت وب ایجاد نمایید. با این حال، دانش شما در خصوص توسعه لاراول نباید به این بخش ختم گردد. زیرساختی که اپلیکیشن در آن راه اندازی می شود، به اندازه فرآیند توسعه پروژه، برای موفقیت شما حیاتی است. برای اینکه اپلیکیشن لاراول خود را به سطح بالاتری ارتقا دهید، به یک پلتفرم میزبانی معتبر نیاز دارید تا بتواند نیازهای آن را برطرف کند.

میهن وب هاست سرویس های میزبانی را برای ارائه عملکرد، امنیت و مقیاس پذیری بهتر، بهینه می کند و به شما امکان می دهد اپلیکیشن خود را در بهترین محیط ممکن رشد دهید.