Laravel 5 :（4）Blade Template

Laravel 範例實作

此筆記主要紀錄學習以下 Laravel 的範例教學

Laravel 範例

樣板繼承

樣板繼承(Template inheritance)讓我們預先定義一個 Master layout

而其他頁面可以繼承此樣板，簡單的說就是類似切版

先切出每一頁都會用到的 layout (類如 Header,footer)

之後每一個 web page 去繼承此 layout 就好，類似 include 的概念

Master layout

1.在resources\views建立layouts資料夾

2.在layouts資料夾中建立master.blade.php

3.master.blade.php內容如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
    <head>
        <title>@yield('title')</title>
    </head>
    <body>
        @section('sidebar')
            This is the master sidebar.
        @show

        <div class="container">
            @yield('content')
        </div>
    </body>
</html>

擴展 Master layout

  1. 建立/resources/views/page.blade.php
1
2
3
4
5
6
7
8
9
10
11
@extends('layouts.master')

@section('title', 'Page Title')

@section('sidebar')
    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
    <p>This is my body content.</p>
@endsection

解釋如下

1
2
3
4
5
6
@extends('layouts.master')      擴展 Master layout
@section('title', 'Page Title') 將 title section 設定為 Page Title
@section('sidebar')             定義 sidebar section
@endsection                     sidebar section 結束
@section('content')             定義 content section
@endsection                     content section 結束

2.打開 /routes/web.php，後面加上

1
2
3
Route::get('/blade', function () {
    return view('page');
});

3.瀏覽http://localhost/larashop/public/blade，會出現

1
2
3
This is appended to the master sidebar.      // page.blade.php

This is my body content.                     // page.blade.php

你可以打開原始碼來看

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<html>
    <head>
        <title>Page Title</title>  // page 覆寫 master 的 @yield('title')
    </head>
    <body>
            

    <p>This is appended to the master sidebar.</p>

        <div class="container">
                <p>This is my body content.</p>
        </div>
    </body>
</html>

在 blade template 顯示變數

1.修改/routes/web.php

1
2
3
4
5
6
7
Route::get('/blade', function () {
    return view('page');
});
改為
Route::get('/blade', function () {
    return view('page',array('name' => 'The Raven'));
});

2.修改page.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
@extends('layouts.master')

@section('title', 'Page Title')

@section('sidebar')
    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
    <p>This is my body content.</p>
@endsection
改為
@extends('layouts.master')

@section('title', 'Page Title')

@section('sidebar')
    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
<h2>{{$name}}</h2>   
<p>This is my body content.</p>
@endsection

條件判斷

1.打開web.php，修改為

1
2
3
Route::get('/blade', function () {
    return view('page',array('name' => 'The Raven','day' => 'Friday'));
});

2.修改page.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
@extends('layouts.master')

@section('title', 'Page Title')

@section('sidebar')
    

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
<h2>{{$name}}</h2>    
<p>This is my body content.</p>
<h2>If Statement</h2>
@if ($day == 'Friday')
    <p>Time to party</p>
@else
    <p>Time to make money</p>
@endif
@endsection

迴圈

1.打開web.php，修改為

1
2
3
4
Route::get('/blade', function () {
    $drinks = array('Vodka','Gin','Brandy');
    return view('page',array('name' => 'The Raven','day' => 'Friday','drinks' => $drinks));
});

2.修改page.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
@extends('layouts.master')

@section('title', 'Page Title')

@section('sidebar')
    

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
<h2>{{$name}}</h2>    
<p>This is my body content.</p>
<h2>If Statement</h2>
@if ($day == 'Friday')
    <p>Time to party</p>
@else
    <p>Time to make money</p>
@endif

<h2>Foreach Loop</h2>
@foreach ($drinks as $drink)
{{$drink}} <br>
@endforeach
@endsection

呼叫 PHP Function

1.修改page.blade.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
@extends('layouts.master')

@section('title', 'Page Title')

@section('sidebar')
    

    <p>This is appended to the master sidebar.</p>
@endsection

@section('content')
<h2>{{$name}}</h2>    
<p>This is my body content.</p>
<h2>If Statement</h2>
@if ($day == 'Friday')
    <p>Time to party</p>
@else
    <p>Time to make money</p>
@endif

<h2>Foreach Loop</h2>
@foreach ($drinks as $drink)
{{$drink}} <br>
@endforeach

<h2>Execute PHP Function</h2>
<p>The date is {{date(' D M, Y')}}</p>
@endsection

整合美術樣板

1.建立/resources/views/layouts/layout.blade.php

1
2
3
4
5
6
7
<!--Header HTML code from E-Shopper Template-->
{{asset('css/name.css')}}
{{url('products')}}

@yield('content')

<!--Footer HTML code from E-Shopper Template-->

解釋如下

1
2
{{asset('css/name.css')}} 會呼叫 http://localhost/larashop/public/css/name.css
{{url('products')}}       會呼叫 http://localhost/larashop/public/products

2.子頁面

在/resources/views/底下建立

1
2
3
4
5
6
7
8
9
blog.blade.php
blog_post.blade.php
cart.blade.php
checkout.blade.php
contact_us.blade.php
home.blade.php
login.blade.php
product_details.blade.php
products.blade.php

每一個檔案內容如下

1
2
3
4
5
6
7
8
9
@extends('layouts.layout')

@section('content')

<!--HTML code from E-Shopper Template-->
@include('shared.sidebar')
<!--HTML code from E-Shopper Template-->

@endsection

3.修改 controller

打開app/Http/Controllers/Front.php，修改為

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
class Front extends Controller {

    public function index() {
        return view('home', array('page' => 'home'));
    }

    public function products() {
        return view('products', array('page' => 'products'));
    }

    public function product_details($id) {
        return view('product_details', array('page' => 'products'));
    }

    public function product_categories($name) {
        return view('products', array('page' => 'products'));
    }

    public function product_brands($name, $category = null) {
        return view('products', array('page' => 'products'));
    }

    public function blog() {
        return view('blog', array('page' => 'blog'));
    }

    public function blog_post($id) {
        return view('blog_post', array('page' => 'blog'));
    }

    public function contact_us() {
        return view('contact_us', array('page' => 'contact_us'));
    }

    public function login() {
        return view('login', array('page' => 'home'));
    }

    public function logout() {
        return view('login', array('page' => 'home'));
    }

    public function cart() {
        return view('cart', array('page' => 'home'));
    }

    public function checkout() {
        return view('checkout', array('page' => 'home'));
    }

    public function search($query) {
        return view('products', array('page' => 'products'));
    }

}

4.複製資源檔案

將下載下來的

1
2
3
4
css
fonts
images
js

覆蓋到public資料夾下