آموزش Laravel قسمت چهارم: Template Engine و مدیریت قالب با Blade

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

Template Engine یا موتور قالب یک سیستم حرفه‌ای برای مدیریت قالب برنامه‌هایی است که می‌نویسیم. با یک موتور قالب می‌توانید راحت تر قالب‌های خود را برنامه نویسی کرده و از مزایای متعددی بهره مند شوید.

Template Engine استفاده شده در لاراول، Blade نام دارد که از قدرت بالایی برخوردار است. این موتور قالب حرفه‌ای مزایای متنوعی دارد که در اینجا به چند مورد اشاره می‌کنیم:

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

در مثال زیر Controller متغیر $name را برای فایل پوسته با نام show.blade.php ارسال می‌کند:

public function show()
{
    return view('show', ['name' => 'hitos']);
}

در پایین کدی را می‌بینید که در آن متغیر $name به نمایش در می‌آید:

{{$name}}

همانطور که در بالا و در مزایای Blade گفتیم که شما در این موتور قالب می‌توانید از کدهای PHP نیز استفاده کنید. بنابراین اگر در show.blade.php از کد echo $name; استفاده کنیم همان خروجی قبل را دریافت می‌کنیم.

برای کامنت کردن بخشی از قالب‌های لاراول، سورس کد خود را بین --}} و {{-- قرار دهید:

{{-- کد این بخش توسط موتور قالب نادیده گرفته می‌شود --}}

در قالب‌های پیشرفته باید بتوانیم درون قالب متغیرهایی را بوجود آورده و یا ویرایش کنیم. برای تعریف یک متغیر جدید دستورات را بین {{--*/ و /*--}} قرار می‌دهیم. مانند:

{{--*/ $variable = 0 /*--}}

حال متغیر فوق را به سادگی و در هر جایی از قالب به صورت {{ $variable }} استفاده می‌کنیم.

استفاده از حلقه‌ها در قالب‌های Blade و لاراول

در پایین قصد داریم استفاده از حلقه‌های زیر را به شما آموزش دهیم:

• foreach: تکرار تا تکمیل تمام عناصر
• for: تکرار به تعدادی معین و با وجود شرط
• while: تکرار تا جایی که شرط خاصی برقرار باشد

آموزش استفاده از دستور Foreach

دستور Foreach برای نمایش آرایه‌ها بسیار کاربردی و ضروری است. فرض کنید در Controller یک تابع با دستورات زیر دارید:

class MainController extends Controller
{
    public function index()
    {
        $names= ["Ali", "Hasan", "Alireza", "Mohsen"];
        return view('show', ['names' => $names]);
    }
}

فایل show.blade.php به شکل زیر است:

<ul>
@foreach($names as $name)
    <li>{{ $name }}</li>
@endforeach
</ul>

خروجی این فایل را در پایین می‌بینید:

آموزش استفاده از دستور For

برای آشنایی با دستور for قصد داریم تابع index موجود در controller ذکر شده برای مثال foreach بالا را برای نمایش حلقه for استفاده کنیم:

<ul>
@for ($i = 0; $i < 4; $i++)
    <li>{{ $names[$i] }}</li>
@endfor
</ul>

آموزش استفاده از دستور While

در پایین نیز تابع index را با دستور while نمایش می‌دهیم:

<ul>
{{--*/ $i = 0 /*--}}
@while ($i < 4)
    <li>{{ $names[$i] }}</li>
{{--*/ $i = $i + 1 /*--}}
@endwhile
</ul>

طرز عملکرد حلقه while:

• در خط 2 متغیر $i را مقدار دهی کردیم.
• در خط 3 با شرط $i < 4 وارد حلقه شدیم.
• در خط 4 مقدار موجود در آرایه $names را با اندیس $i که در خط 2 ایجاد کردیم چاپ می‌کنیم.
• در خط 5 شمارنده $i را یکی اضافه می‌کنیم.
• در خط 6 با دستور $endwhile به حلقه می‌فهمانیم اگر شرط حلقه بر قرار نبود به بعد از endwhile مراجعه کن.

پیمایش آرایه‌ها و یا شیء ها در Blade

گاهی ممکن است در Blade بخواهید یک آبجکت و یا آرایه را نمایش دهید. به عنوان مثال فرض کنید آرایه زیر را با Controller به Blade ارسال کردیم:

$posts= array(1=> array('title' => 'post1', 'body' => 'body of post1'), 2=>array('title' => 'post2', 'body' => 'body of post2'));

برای فراخوانی به عنوان مثال title آرایه اول به شکل زیر عمل می‌کنیم:

{{ $posts[1]['title'] }}

در دستور فوق اعلام می‌کنیم آرایه‌ای درون آرایه posts هست با نام 1 که قصد داریم آیتم title آن را نمایش دهیم.

اگر یک شیء با نام posts داشته باشیم که دارای یک title است با روش زیر آن آن را در blade صدا می‌زنیم:

{{ $posts->title }}

دستورات شرطی در Blade

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

در پایین سعی در پیاده سازی دستور شرطی if را داریم. در ابتدا یک Controller می‌سازیم که یک عدد را به لایه نمایش ارسال کند:

public function index()
{
    return view('show', ['number' => 5]);
}

در بالا عدد 5 را برای پوسته show ارسال کردیم. دستور شرطی در پوسته show به شکل زیر است:

@if($number > 6)
    This number is bigger than 6
@else
    This number is not bigger than 6
@endif

طبیعتا شرط فوق با This number is not bigger than 6 اجرا می‌شود.

دستور if empty در Blade به صورت زیر پیاده می‌شود. با فرض استفاده از Controller فوق می‌توانید از دستور زیر استفاده کنید:

@if(empty($number))
    Empty Number
@else
    Not Empty
@endif

در Controller فوق چون عدد 5 را برای قالب ارسال کردیم طبیعتا متن Not Empty را نمایش می‌دهد.

نکته: با کلمه کلیدی count می‌توانید تعداد آیتم‌های موجود را شمرد، مثلا تعداد Object‌ها یا آرایه ها:

@if(count($users) === 10)
    I have ten user!
@endif

نکته: دستوری در Blade وجود دارد که معادل if(! است و آن unless می باشد، و به شکل زیر استفاده می‌شود:

@unless($number)
@endunless

نمایش مقادیر پیش فرض با Blade در لاراول

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

{{ $username or 'کاربر نا شناس' }}

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

کد فوق معادل سورس زیر است:

{{{ isset($username) ? $username : 'کاربر نا شناس' }}}

فراخوانی CSS ها، JS‌ها و عکس‌ها با استفاده از Blade

همانطور که در قسمت دوم آموزش لاراول به آن اشاره شد، پوشه public موجود در مسیر اصلی فریم‌ورک حاوی اطلاعات نمایشی سایت مانند فایل اصلی index.php و یا عکس‌ها و CSS‌ها و JS هاست.

پیشنهاد می‌شود اطلاعات را در این پوشه مرتب و دسته بندی شده قرار دهید، مثلا:

/public/css
/public/js
/public/images

به عنوان مثال اگر فایلی در مسیر /public/css/style.css داشته باشید با دستور زیر که در بالای دستورات html و در بلاک head قرار می‌گیرد می‌توانید به این فایل دسترسی داشته باشید:

<link href="/css/style.css" rel="stylesheet" />

لایه بندی صفحات در لاراول

در بالا قالب فرضی یک سایت را می‌بینید که حاوی سه بخش  هدر، بدنه اصلی و فوتر. طبیعتا تنها Body این سایت با توجه به محتوای صفحات متغیر است و Footer و Header در تمام صفحات یکسان است.

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

فایل main.blade.php:

<!DOCTYPE html>
<html>
    <head>
        <title>Hitos:Laravel</title>
    </head>
    <body>
      <div style="text-align: center; font-weight: bold; font-size: 30px; background-color: green;">
          Header In My Site
      </div>
      @yield('content')
      <div style="text-align: center; font-weight: bold; font-size: 30px;background-color: gray;">
          Footer In My Site
      </div>
    </body>
</html>

همانطور که در بالا می‌بینید ما یک صفحه HTML داریم که از سه بخش هدر، فوتر و کانتنت تشکیل شده است. هدر و فوتر به صورت کامل نوشته شده اند و تنها بخش Content به صورت @yield('content') معرفی شده است. با کلمه کلیدی @yield اعلام می‌کنید که در این بخش کدهای بخش content تزریق خواهد شد.

فایل aboutus.blade.php:

@extends('main')
@section('content')
<div style="text-align: center; font-weight: bold; font-size: 30px;background-color: gold; height: 230px; padding-top: 230px;">
    Content In About Us Page
</div>
@stop

سورس کدهای فوق متعلق به صفحه About Us سایت است. با عبارت @extends('main') اعلام می‌کنید که این قالب فرزندی از قالب main است. دستور @section('content') اعلام می‌کند از این به بعد قرار است کدهای بخش content قالب والد ذکر شوند. دستور @stop اعلام می‌کند فرایند تزریق کدهای بخش content به قالب main تمام شده است.

حال در controller اگر قالب aboutus.blade.php را درخواست دهید نتیجه مانند زیر خواهد بود:

حال می‌توانیم صفحه contact us را نیز مانند فوق ایجاد کنیم، که این کار را به عنوان تمرین به شما واگذار می‌کنیم.

var_dump در Blade و نمایش کلیه اطلاعات در لایه نمایش

در PHP دستوری با نام var_dump داریم که مسئولیت نمایش کلیه اطلاعات موجود در آرایه و یا شی را بر عهده دارد. برای انجام عملیات var_dump درون قالب blade از دستور dd استفاده می‌کنید. مانند:

{{ dd($posts) }}

اگر مشکلی در آموزش‌ها دیدید و یا سوالی داشتید خوشحال می‌شیم در بخش نظرات با ما در ارتباط باشید.

مطالب پرطرفدار مرتبط

مطالب عمومی برنامه نویسی

مقایسه Python با هشت زبان برنامه نویسی مطرح جهان

برنامه نویسی php

دوره آموزش PHP قسمت اول: آشنایی و تاریخچه زبان PHP

برنامه نویسی php

composer چیست و چرا باید از آن استفاده کنیم

برنامه نویسی php

انتخاب فریم‌ورکِ PHP مناسب از بین Laravel و Symfony و Yii