Laravel教學, PHP教學, 網頁後端教學
Laravel教學, PHP教學, 網頁後端教學

[ Laravel ] 初心者之路#06 – Views, Blade Templates

前言

之前在Laravel專案結構中跟各位介紹過MVC的概念，View就是在MVC中的V，負責的是網站界面的呈現，也是我們所熟知的前端。今天要來跟各位介紹的就是在Laravel中怎麼管理View，以及相當強大且實用的Blade Template

 

Laravel的Views放在哪裡？

還記得我們之前改過一個檔案叫做welcome.blade.php嗎？沒錯，在/resources/views底下，而這裡就是Laravel專門存放view資料夾

view location

 

如何召喚使用寫好的View？

還記得web.php這個route裡面寫些什麼嗎？讓我們打開它看看:

route content

有沒有看到一個方法:

view('welcome');

這個就是我們召喚view的方式！

view($view_name) 是一個全域的方法，你可以在任何地方呼叫它，它會傳回在/views下的view

$view_name 是你想要使用的view的名字，像是如果你想要使用welcome.blade.php，它的名字就會是’welcome’

 

如果今天/views底下的view開始變多，勢必需要以資料夾去進行分類、管理。讓我們來試試看建立一個資料夾，命名為frontend，並且將welcome.balde.php放入frontend之中

 

這時，如果只是直接重新整理頁面，可就會顯示找不到view的錯誤囉！這是因為當view的路徑變化時， $view_name 也必須做一些小小的改變讓我們把web.php做一些修正:

Route::get('/', function () {
    return view('frontend.welcome');
});

此時重新整理一下你的頁面，就可以看見原本的welcome畫面啦！

所以當我們改變了view的路徑時，我們就必須去根據view的路徑變更傳給view()的名稱，資料夾可用斜線/或是點.來區隔都可以，我個人覺得斜線有點不方便閱讀，所以都是採用點.的方式

view('frontend/welcome');
view('frontend.welcome');

 

傳參數給View

為了讓頁面可以動態變換一些內容，我們會傳一些變數給View讓它顯示出來，讓我們來動手試試看！

將web.php做點小修改:

Route::get('/', function () {
    return view('frontend.welcome', ['name' => '大帥哥']);
});

然後將welcome.blade.php也修改一下:

<div class="title m-b-md">
    很高興見到你，{{$name}}
</div>

重新整理頁面後是不是看到很有趣的畫面呢XD

這就是傳遞參數的有趣厲害之處，你可以根據後端的資料，動態顯示前端的頁面

讓我們仔細看看它的內容:

view($view_name, $data)

要特別注意的是， $data 必須是一個鍵值對應(key/value pairs)的陣列，一個key對應到一個value，讓你在view中可以用 {{$key}} 的方式使用，像是範例中的’name’對應到’大帥哥’，然後在view中便可用 {{$name}} 去印出’大帥哥’

 

Blade Template簡介

Blade是Laravel的樣板引擎，Blade可以讓頁面有繼承的概念，讓頁面能夠輕易地拆分成區塊(section)，並且重複使用，減少一般寫前端時可能會有許多重複的內容。

舉個例子來說，讓我們看看這個網頁(這也是我們之後將採用的前端樣板)

https://blackrockdigital.github.io/startbootstrap-business-casual/

page

根據它的頁面，我們可以將它劃分出幾個區塊，Header, Navigation, Content, Footer。其中Header, Footer在每個頁面都是一樣的，Navigation會根據在哪個頁面，將那個頁面的文字Highlight，Content則是每個頁面都是不一樣的內容

 

當我們應用Blade Template之後，它可以被這樣劃分

blade template

這有點像是物件導向中繼承的概念

有一個master.blade.php，它先include header, navbar, footer，留下一個content等著被實作(@yield)

而頁面home, about, product, store去繼承master(@extends)，再各自去實作出content的內容

 

如此一來，可以大幅減少重複的內容，並且各個檔案都清楚被劃分，相當方便維護

 

Blade 語法

按照上面的範例，我這邊實際寫出簡單的架構給各位看看

master.blade.php

<!DOCTYPE html>
<html lang="zh-TW">
<head>
    <title>Coffee Shop-@yield('title')</title>
</head>
<body>
    @include('frontend.layouts.header')
    @include('frontend.layouts.navbar')
    @yield('content')
    @include('frontend.layouts.footer')
</body>
</html>

 

home.blade.php

@extends('frontend.layouts.master')

@section('title', 'Home')   {{-- 因應不同頁面給予不同title --}}

@section('content')
    {{-- 這邊放Home頁面的內容 --}}
@endsection

@include($name) – 插入 $name view

@yield($name) – 等待被繼承後填入內容

@extends($name) – 繼承 $name view

@section($name) – 將內容填入 @yield($name) ，繼承的樣板中必須要有對應的yield

 

以上就是基礎的blade樣板語法，我們會在下一篇文章實際練習一次！

 

Blade控制語法

除了上述的基本語法之外，還有其他進階的語法可以使用，像是我們熟知的if判斷式、loop迴圈等等，以下就列出範例給各位參考

  • if判斷
@if (count($records) === 1)
    I have one record!
@elseif (count($records) > 1)
    I have multiple records!
@else
    I don't have any records!
@endif

 

  • switch判斷
@switch($i)
    @case(1)
        First case...
        @break

    @case(2)
        Second case...
        @break

    @default
        Default case...
@endswitch

 

 

  • Loop迴圈，有基本的for, foreach, while，還有比較特別的forelse
@for ($i = 0; $i < 10; $i++)
    The current value is {{ $i }}
@endfor

@foreach ($users as $user)
    <p>This is user {{ $user->id }}</p>
@endforeach

@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>No users</p>
@endforelse

@while (true)
    <p>I'm looping forever.</p>
@endwhile

 

  • 當然迴圈中也有continue跟break
@foreach ($users as $user)
    @continue($user->type == 1)
    <li>{{ $user->name }}</li>
    @break($user->number == 5)
@endforeach

 

總結

好的，這次的教學就到這邊結束！

讓我們複習一下今天的內容

  • view在Laravel的位置
  • 用全域方法view()呼叫view的
  • view()配合參數傳遞
  • Blade Templates介紹
  • Blade的基本語法
  • Blade的控制語法

我們下一篇將會帶各位實際操作，以Laravel的Blade Templates去製作我們這系列網站的前端。

關於Blade語法有興趣的，可以到官方文件去看看唷～

https://laravel.com/docs/5.5/blade

 

See you!

Leave a Comment