公司導入 Laravel 分享 - 4. 視圖

一、繼承

Laravel 的樣板系統有一個很方便的功能是「繼承」，主要是用來定義網站 html 的結構。
通常一個網頁的 page-header、page-footer、側邊選單是一個固定的結構並不常改變，幾乎每一個頁面都是一樣的，這個時候繼承這個功能就很好用。 
<!-- layouts/app.blade.php -->
<html>
    <head>
        <title>應用程式名稱 - @yield('title')</title>
    </head>
    <body>
        <div class="page-header">
            我是 Page Header
        </div>

        <div class="page-sidebar">
            我是側邊攔
        </div>

        <div class="page-body">
            @yield('content')
        </div>

        <div class="page-footer">
            我是 Page Footer
        </div>
    </body>
</html>
有了上面這個檔案，我們其他頁面的樣板要撰寫時就去繼承他 
// 頁面
@extends('layouts.app')

@section('title', '頁面標題')

@section('content')
    <p>頁面內容。</p>
@endsection
所以這樣組裝之後，其實我們得到的是 
<html>
    <head>
        <title>網站名稱 - 頁面標題</title>
    </head>
    <body>
        <div class="page-header">
            我是 Page Header
        </div>

        <div class="page-sidebar">
            我是側邊攔
        </div>

        <div class="page-body">
            <p>頁面內容。</p>
        </div>

        <div class="page-footer">
            我是 Page Footer
        </div>
    </body>
</html>

二、載入

除了可以繼承之外當然我們還有載入可以用。
比如說我們在新增、編輯頁面看到的表單內容幾乎是一樣的，可又有些許不同，可能是 form action 或是 按鈕文字，這時我們可以把中間相同的部分截取出來做成一個新的檔案，讓新增、編輯頁面去載入他。 
<!-- _form.blade.php -->
<div class="form-group">
    <label class="col-sm-2 control-label">標題</label>
    <div class="col-sm-10">
        <input class="form-control" type="text" name="title">
    </div>
</div>

<div class="form-group">
    <label class="col-sm-2 control-label">內容</label>
    <div class="col-sm-10">
        <textarea class="form-control" name="content"></textarea>
    </div>
</div>

<div class="text-center">
    <input type="submit" class="btn btn-primary" name="submit" value="送出">
</div>

// create.blade.php
@extends('layouts.app')

@section('title', '新增')

@section('content')
    <form class="form-horizontal" action="{{ route('post.store') }}" method="post">
        @include('post._form')
    </form>
@endsection

三、顯示變數

在樣板中我們如果要輸出變數可以適用「大括弧」把變數包起來，這會把變數當成「字串」直接輸出在網頁上 
{{ $name }}

{{ <input type="text"> }}
如果我們希望得到的結果是 html，則必須使用： 
{!! <input type="text"> !!}

四、控制結構

1. if else

@if (count($posts) === 1)
    我有一篇文章！
@elseif (count($posts) > 1)
    我有多篇文章！
@else
    我沒有任何文章！
@endif

2. loop

for

@for ($i = 0; $i < 10; $i++)
    目前的值為 {{ $i }}
@endfor

foreach

@foreach ($posts as $post)
    <p>文章標題：{{ $post->title }}</p>
@endforeach

while

@while (true)
    <p>
        我永遠都在跑迴圈。NO~~~
    </p>
@endwhile
迴圈有一個地方很常被應用到，知道是哪裡嗎？

留言

張貼留言