PHP Laravel - View 及 blade 應用與介紹 - 筆記長也NotesHazuya

PHP Laravel - View 及 blade 應用與介紹

2020-06-05 13:19:12   Laravel

View

過去在寫 PHP 應用程式的時候,html 與 PHP 程式碼都是混在一起的,相當混亂。而本篇將會介紹如何使用 laravel 的 blade 樣板,脫離混亂的苦海。

新增樣板

laravle 中的樣板存在 resources/views 當中,所以我們先在 resources/views 新增一個名為 news.blade.php 的檔案。

命名規則: 樣板名稱.blade.php

內容則是 html

<!doctype html>
<html>
    <head>
        <title>Laravel</title>

        <!-- Styles -->
        <style>
            
        </style>
    </head>
    <body>
        <h1>hello world</h1>
    </body>
</html>

Controller 回傳 View

到你要回傳相關資料的 Controller 裡面

return view('news');

回傳 view方法,參數是你模板的名稱。

如果沒有問題,執行 php artisan serve  進行測試,你應該可以看到畫面~

傳值給 View

上面的範例已經可以回傳 view,但是沒有回傳變數,如果要回傳變數給 view 可以這樣做

$val = 'val';
$abc = 'abc';
return view('news', ['val' => $val, 'abc' => $abc]);

或是

$val = 'val';
$abc = 'abc';
return view('news') -> with('val', $val) -> with('abc', $abc);

或是

$val = 'val';
$abc = 'abc';
return view('news', compact('val', $val), compact('abc', $abc));

可以回傳多個變數、物件、陣列等任何型態的資料。

回到模板部分,在模板取出變數使用 {{ }} 兩層大括號。

<!doctype html>
<html>
    <head>
        <title>Laravel</title>

        <!-- Styles -->
        <style>

        </style>
    </head>
    <body>
        <h1>hello world</h1>
        <hr>
        <h1> {{ $val }} </h1>
        {{$abc}}
    </body>
</html>

沒意外的話可以看到這樣的效果~

laraval 預設會轉譯 html 代碼,變成純文字吐出來避免 XSS 攻擊,如果你需要呈現 html 原本的效果,可以這樣做

{!! $htmlCode !!}

這樣就會直接顯示,不會轉譯。

模板繼承

模板會有許多共同需要使用到的部分,像是 header 或是 footer等,如果要在每一個模板檔案都放進去一樣的程式碼,後續要修改也會非常麻煩。

主模板(要被繼承的模板)

命名一個名為 main.blade.php 的主模板

<!doctype html>
<html>
    <head>
        <title>Laravel -  @yield('title')</title>

        <!-- Styles -->
        <style>

        </style>
    </head>
    <body>
        <div name="sidebar">
            @section('sidebar')
                這是主要的側邊欄。
            @show
        </div>
        <div name="content">
            @section('content')
            dasfsd
            @show
        </div>
    </body>
</html>

@yield

用來顯示給定區塊的內容,顯示的內容不支援 html 輸出,只支援純文字。用於被繼承的模板當中。

@section ... @show

定義內容區塊,用於被繼承的模板當中

繼承頁面佈局(繼承自 main.blade.php )

名為 news.blade.php,繼承 main.blade.php

@extends('main')
@section('title', 'What\'News')
@section('sidebar')
 @parent
 <h1>hello world</h1>
 <hr>
@endsection

@section('content')
<h1> {{ $val }} </h1>
{{$abc}}
@endsection

@extends

繼承自哪一個模板

@sedtion、@section ... @endsection

定義內容區塊,用於繼承的模板當中。

@parent

加上這個之後,會顯示被繼承模板原本區塊當中的內容,反之則否。而 @yield 不能使用。

這裡我覺得很難解說,當初看了很久都看不懂,不過歸納出來大概是這樣:

1.在父模板(要被繼承的)中使用 @yield 、 @section ... @show 定義區塊,而 @yield 僅支援文字,用於簡單的文字。

2.在子模板(繼承的模板)中使用 @section 來給 @yield 指定內容;使用 @section ... @endsection 來指定 @section ... @show 的內容。 可以使用 @parent 來顯示原本父模板區塊的內容。

控制結構

由於前端也需要做一些簡單的判斷以及陣列資料的輸出,所以也有跟 PHP 一樣的控制結構可以使用,用法基本上跟 PHP 原生的差不多。

IF 結構

@if ($a == 1)
    <h1>1</h1>
@elseif ($a == 2)
    <h1>2</h1>
@else
    <h2>?</h2>
@endif

迴圈結構

//for
@for ($i = 0; $i < 10; $i++)
    目前的值為 {{ $i }}
@endfor
//foreach
@foreach ($value as $array)
    <p>$value</p>
@endforeach                      
//forelse
@forelse ($users as $user)
    <li>{{ $user->name }}</li>
@empty
    <p>沒有使用者</p>
@endforelse
//while
@while (true)
    <p>zzzzz</p>
@endwhile

截至目前為止,讀到本篇文章應該可以寫出一個基本的網站了,下一篇文章將會介紹 laravel 的 session 用法。


長也

我只專注做好自己能做的事情,別人要做什麼我無法干涉。