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

نوشته شده توسط:
قسمت های دیگر این مطلب:

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

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

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

در مثال زیر 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

دستور 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:

پیمایش آرایه‌ها و یا شیء ها در 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/> داشته باشید با دستور زیر که در بالای دستورات html و در بلاک head قرار می‌گیرد می‌توانید به این فایل دسترسی داشته باشید:

<link href="/css/>

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

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

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

فایل main.blade.php:

<!DOCTYPE html>
<html>
    <head>
        <title>Hitos:Laravel</title>
    </head>
    <body>
      <div >

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

فایل aboutus.blade.php:

@extends('main')
@section('content')
<div >

سورس کدهای فوق متعلق به صفحه 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) }}

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

تگ ها: لاراول / Laravel html css javascript MVC
نظر خود را برای این مطلب وارد کنید
دریافت خبرنامه
وحید
وااااقعا عالی. من به php مسلط هستم. الان با مطالب سایت شما فکر کنم تا حدودی زیادی لاراول رو یاد گرفتم، واقعا سادست این فریمورک
somy

سلام. مرسی بابت مطالب خوبتون

من متاسفانه هر جا از کد {{--*/ /*--}} برای تعریف متغیر استفاده میکنم، کار نمیکنه. من از laravel 5.4 استفاده میکنم

پاسخ:

سلام. نمونه کدتون رو ارسال کنید.

somy

راستش کد خاصی ننوشتم درحال یادگیری هستم ولی همین کدای ابتدایی رو هم جواب نمیگیرم

@extends('master');
@section('title','video')

@section('body')

{{--*/ $i = 0 /*--}}
@while ($i < 4)

{{ $names[$i] }}

{{--*/ $i = $i + 1 /*--}}
@endwhile 
@stop

با این خطا مواجه میشه

Undefined variable: i (View: C:\laravel\blog\resources\views\pages\video.blade.php)
پاسخ:

کدهاتون مشکلی ندارن، حتما مشکل از جای دیگست.

sajjad

من طبق اموزش جلو رفتم

منتها موقعی اجرای فایل aboutus.blade.php به صورت زیر

http://localhost/lara/resources/views/aboutus.blade.php

پیغام زیر رو نشون میده

یعنی فقط دستور css/html این فایل اجرا میشه یعنی یه باکس زرد رنگ و بقیه دستورات به صورت زیر در خروجی مینویسه

@extends('main') @section('content')

مشکل از کجاست مهندس

پاسخ:

سلام

باید کل سورس رو ببینم تا بتونم راهنمایی کنم.

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