سلام! من آرش فدایی هستم و تو این قسمت از سری آموزشی لاراول ۱۲ قراره درباره ویوها و Blade، موتور قالب‌سازی قدرتمند لاراول، صحبت کنیم. Blade به شما اجازه می‌ده صفحات پویا و زیبا بسازید، بدون اینکه کدتون شلوغ بشه. تو این مقاله، یاد می‌گیرید چطور ویوهای Blade بسازید، داده‌ها رو نمایش بدید، قالب‌بندی کنید و از قابلیت‌های پیشرفته‌تر مثل کامپوننت‌ها استفاده کنید. بریم شروع کنیم!

Blade: تجربه شخصی من

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

پیش‌نیازها

قبل از شروع، مطمئن بشید که پروژه لاراول‌تون درست تنظیم شده (مثل چیزی که تو قسمت اول گفتیم) و یه کنترلر و مدل (مثل Post از قسمت سوم) دارید. ما تو این آموزش از همون مدل Post استفاده می‌کنیم تا پست‌های وبلاگ رو نمایش بدیم.

ساخت اولین ویوی Blade

ویوهای Blade توی پوشه resources/views ذخیره می‌شن و پسوندشون .blade.php هست. بیاید یه ویو ساده برای نمایش لیست پست‌ها بسازیم. فایل resources/views/posts/index.blade.php رو اینجوری درست کنید:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>لیست پست‌ها</title>
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; }
        h1 { color: #2c3e50; }
        ul { list-style: none; padding: 0; }
        li { margin-bottom: 10px; }
    </style>
</head>
<body>
    <h1>لیست پست‌ها</h1>
    <ul>
        @foreach ($posts as $post)
            <li>
                <strong>{{ $post->title }}</strong>: {{ $post->content }}
            </li>
        @endforeach
    </ul>
</body>
</html>

این ویو یه لیست ساده از پست‌ها رو نشون می‌ده. دستور @foreach یه حلقه تو Blade هست که داده‌ها رو تکرار می‌کنه. من خودم اوایل کار با Blade، عاشق این شدم که چطور می‌تونم کد PHP رو با سینتکس ساده‌تر بنویسم.

اتصال ویو به کنترلر

برای استفاده از این ویو، بیاید متد index تو PostController (که تو قسمت سوم ساختیم) رو چک کنیم:

public function index()
{
    $posts = Post::all();
    return view('posts.index', compact('posts'));
}

اینجا view(‘posts.index’) به فایل resources/views/posts/index.blade.php اشاره می‌کنه و متغیر posts رو به ویو می‌فرسته. یه تجربه از خودم: یه بار اسم ویو رو اشتباه نوشتم و کلی دنبال خطای 404 گشتم. همیشه مطمئن شید اسم فایل ویو و مسیرش درست باشه!

استفاده از Layout برای قالب‌بندی

معمولاً تو پروژه‌ها نمی‌خوایم کدهای HTML تکراری (مثل هدر و فوتر) رو تو هر ویو بنویسیم. Blade یه سیستم Layout داره که این کار رو راحت می‌کنه. بیاید یه Layout اصلی بسازیم تو resources/views/layouts/app.blade.php:

<!DOCTYPE html>
<html lang="fa" dir="rtl">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
    <style>
        body { font-family: Arial, sans-serif; line-height: 1.6; padding: 20px; }
        .container { max-width: 800px; margin: 0 auto; }
        nav { background: #2c3e50; padding: 10px; }
        nav a { color: white; margin: 0 10px; }
    </style>
</head>
<body>
    <nav>
        <a href="{{ route('posts.index') }}">خانه</a>
        <a href="{{ route('posts.create') }}">ایجاد پست</a>
    </nav>
    <div class="container">
        @yield('content')
    </div>
</body>
</html>

حالا ویوی index.blade.php رو اصلاح می‌کنیم تا از این Layout استفاده کنه:

@extends('layouts.app')

@section('title', 'لیست پست‌ها')

@section('content')
    <h1>لیست پست‌ها</h1>
    <ul>
        @foreach ($posts as $post)
            <li>
                <strong>{{ $post->title }}</strong>: {{ $post->content }}
            </li>
        @endforeach
    </ul>
@endsection

دستور @extends می‌گه که این ویو از Layout اصلی استفاده کنه، و @section محتوا رو تو بخش‌های مشخص‌شده (مثل content) قرار می‌ده. من تو یه پروژه داشتم یه سایت چندصفحه‌ای می‌ساختم و این روش کلی تو وقتم صرفه‌جویی کرد چون فقط یه Layout ساختم و همه ویوها ازش استفاده کردن.

فرم برای ایجاد پست

بیاید یه فرم برای ایجاد پست جدید بسازیم تو resources/views/posts/create.blade.php:

@extends('layouts.app')

@section('title', 'ایجاد پست جدید')

@section('content')
    <h1>ایجاد پست جدید</h1>
    @if (session('success'))
        <p style="color: green;">{{ session('success') }}</p>
    @endif
    <form method="POST" action="{{ route('posts.store') }}">
        @csrf
        <div>
            <label for="title">عنوان:</label>
            <input type="text" name="title" id="title" required>
        </div>
        <div>
            <label for="content">محتوا:</label>
            <textarea name="content" id="content" required></textarea>
        </div>
        <button type="submit">ذخیره</button>
    </form>
@endsection

اینجا @csrf یه توکن امنیتی برای فرم تولید می‌کنه. یه تجربه از خودم: یه بار فراموش کردم @csrf رو بذارم و فرم کار نکرد. همیشه یادتون باشه این دستور رو تو فرم‌های POST بذارید!

متد create تو PostController باید ویو رو برگردونه:

public function create()
{
    return view('posts.create');
}

نمایش خطاها

برای نمایش خطاهای اعتبارسنجی، می‌تونید تو ویو از دستور @error استفاده کنید. بیاید فرم رو اصلاح کنیم:

<div>
    <label for="title">عنوان:</label>
    <input type="text" name="title" id="title" required>
    @error('title')
        <p style="color: red;">{{ $message }}</p>
    @enderror
</div>
<div>
    <label for="content">محتوا:</label>
    <textarea name="content" id="content" required></textarea>
    @error('content')
        <p style="color: red;">{{ $message }}</p>
    @enderror
</div>

حالا تو PostController اعتبارسنجی رو به متد store اضافه کنید:

public function store(Request $request)
{
    $request->validate([
        'title' => 'required|string|max:255',
        'content' => 'required|string',
    ]);

    Post::create([
        'title' => $request->title,
        'content' => $request->content,
    ]);

    return redirect()->route('posts.index')->with('success', 'پست با موفقیت ایجاد شد!');
}

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

کامپوننت‌های Blade

لاراول ۱۲ امکان ساخت کامپوننت‌های Blade رو داره که برای بخش‌های تکراری عالیه. بیاید یه کامپوننت برای نمایش پیام موفقیت بسازیم. فایل resources/views/components/alert.blade.php رو بسازید:

<div style="color: green; padding: 10px; border: 1px solid green; margin-bottom: 10px;">
    {{ $slot }}
</div>

حالا تو ویوی create.blade.php ازش استفاده کنید:

@if (session('success'))
    <x-alert>{{ session('success') }}</x-alert>
@endif

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

نکات تکمیلی

  • Blade Directives: Blade کلی دستور مثل @if، @foreach، و @include داره. مستندات لاراول رو چک کنید تا بتونید از همه‌شون استفاده کنید.

  • اشکال‌زدایی: اگه ویوتون کار نکرد، مطمئن شید مسیر فایل درست باشه و متغیرها به درستی به ویو پاس شدن. من یه بار کلی وقت تلف کردم چون یه متغیر رو اشتباه پاس داده بودم!

  • لاراول ۱۲ و بهبودها: تو نسخه ۱۲، Blade رندر سریع‌تری داره و ابزارهای جدید برای کامپوننت‌های پویا اضافه شده. تو قسمت‌های بعدی درباره کامپوننت‌های پیشرفته‌تر صحبت می‌کنیم.

قسمت بعدی قراره درباره احراز هویت (Authentication) صحبت کنیم که چطور می‌تونید سیستم لاگین و ثبت‌نام بسازید. اگه سوالی دارید یا جایی گیر کردید، تو کامنت‌ها بپرسید. من همیشه از بازخوردهای شما کلی چیز جدید یاد می‌گیرم!

تا قسمت بعدی، موفق باشید!