View 與 Blade 樣板引擎
2 likes•7,975 views
本文讨论了MVC架构及其在Laravel中如何实现视图（view）的处理，特别强调了Blade模板引擎的使用。通过示例说明了如何定义视图结构、使用模板继承以及Blade语法的基本用法。最后，提供了模板作业和版本控制的建议，帮助开发者高效地管理和维护代码。
![沒有導⼊入 MVC 的話…
• 傳統直譯式的 PHP 寫法，往往將程式運作邏輯和
HTML 混雜在⼀一起，也就是所謂義⼤大利麵式程式碼
• 這樣的寫法除了難以閱讀外，更難以維護…
<?php
//
連線資料庫
$mysqli
=
new
mysqli('localhost',
'root',
'root',
‘demo');
/*
中間略
*/
?>
<html>
<!-‐-‐
中間略
-‐-‐>
<ul>
<?php
$query
=
"SELECT
*
FROM
posts
ORDER
BY...";
?>
<?php
foreach($mysqli-‐>query($query)
as
$row):
?>
<li><?=$row['title']?></li>
<?php
endforeach;
?>
</ul>](https://image.slidesharecdn.com/5-viewblade-150622091839-lva1-app6891/85/View-Blade-5-320.jpg)
![傳遞資料⾄至View 顯⽰示
• 把變數傳給View，讓View 顯⽰示動態資料
//
app/Http/routes.php
Route::get('/',
function()
{
$data
=
['name'
=>
'Simon'];
return
view('home.index',
$data);
});
//
resources/views/home/index.blade.php
<!doctype
html>
<html>
<head><!-‐-‐
略
-‐-‐></head>
<body>
<h1>My
name
is
{{$name}}</h1>
</body>
</html>](https://image.slidesharecdn.com/5-viewblade-150622091839-lva1-app6891/85/View-Blade-29-320.jpg)
View 與 Blade 樣板引擎
- 1. View 與 Blade 樣板引擎 范聖佑 Shengyou Fan 臺中科⼤大資⼯工系 (2015/05/31) 適 ⽤用 5.0 版
- 2. 單元主題 • MVC 架構是什麼？什麼是View？ • 使⽤用View 與 樣板引擎在開發上的好處 • 學習 Blade 樣板語法 • ⽰示範如何從網路上下載樣板並使⽤用 Laravel 樣板引擎 整合進實作專案前台內
- 3. MVC 裡的 View ★ 參考⽂文件：http://laravel.com/docs/5.0/views
- 4. Laravel 的 MVC 分⼯工 Route Controller ModelView index.php Server Request Response Client app init ★ 參考說明：http://laravel-recipes.com/recipes/52/understanding-the-request-lifecycle
- 5. 沒有導⼊入 MVC 的話… • 傳統直譯式的 PHP 寫法，往往將程式運作邏輯和 HTML 混雜在⼀一起，也就是所謂義⼤大利麵式程式碼 • 這樣的寫法除了難以閱讀外，更難以維護… <?php // 連線資料庫 $mysqli = new mysqli('localhost', 'root', 'root', ‘demo'); /* 中間略 */ ?> <html> <!-‐-‐ 中間略 -‐-‐> <ul> <?php $query = "SELECT * FROM posts ORDER BY..."; ?> <?php foreach($mysqli-‐>query($query) as $row): ?> <li><?=$row['title']?></li> <?php endforeach; ?> </ul>
- 6. 什麼是 MVC 的View？ • MVC 設計架構裡，M 代表 Model 負責處理資料；V 代表View 負責顯⽰示⾴頁⾯面；C 代表 Controller 負責控 制 M 及V 間的溝通並回傳結果 • 在此架構設計下，View 的功能就是負責儲存 HTML，並將要顯⽰示動態資料的部份留下來，等待被 呼叫的時候由外部傳⼊入 • 如此即可讓 顯⽰示 (V) 與 程式控制 (C)、商業邏輯 (M) 三者獨⽴立開來，彼此分⼯工、互相合作
- 7. Laravel 裡的View • Laravel 本⾝身就是⼀一個以 MVC 為基底設計的框架，所 有的View 都統⼀一放在 resources/views 資料夾底下 • 所有View 的檔名皆以 *.php 做為結尾，檔案內容就 是⼀一般的 HTML 程式碼 • 當要顯⽰示對應的⾴頁⾯面時，只要透過 view() 這個 helper function 就可以將內容從 Route 回傳⾄至使⽤用者 端 Route::get('{uri}', function() { return view('{path/view_file_name}'); });
- 8. 先定義View 的內容 • 先將 HTML 寫在 resources/views/ 底下 • 所有View 的副檔名皆為 *.php • 若有分類的需求，可任意開⼦子資料夾整理 // resources/views/home/index.php <!doctype html> <html> <head><!-‐-‐ 略 -‐-‐></head> <body> <h1>Home</h1> </body> </html>
- 9. 直接從 Route 回傳 • 在這個階段，先直接從 Route 將View 回傳⾄至使⽤用者 端 (後續會再應⽤用 Controller、Model) • 在 Route 裡 使⽤用 view() 這個 helper function 直接 回傳，特別注意路徑要設定正確，中間資料夾可⽤用 「.」區隔，且不需要加副檔名 (*.php) // app/Http/routes.php Route::get('/', function() { return view('home.index'); });
- 10. 引⼊入樣板
- 11. 下載樣板 • 在本⼯工作坊裡，我們將使⽤用 Start Bootstrap 的樣板 來快速建置我們需要的所有⾴頁⾯面，請參考講義內容 下載樣板原始檔： - Clean Blog：http://startbootstrap.com/template- overviews/clean-blog/ - Blog Post：http://startbootstrap.com/template- overviews/blog-post/ ★ P.S 當然！您可以使⽤用⾃自⼰己喜歡的樣板
- 12. 整合樣板⾄至框架內 • 把不重複 assets 放到 public 資料夾內 • 把樣板內的 *.html 依需求命名成 *.php 放到 resources/views 底下 • 並移除預設的 app/home/welcome.blade.php • 更新 app/Http/routes.php 內的設定成回傳 view • 修正連結路徑 (⾴頁⾯面內 anchor、css 和 js 的路徑) • 確認每⼀一個 route 回傳的⾴頁⾯面內容
- 13. 存檔點 • 試著把現在已經可以運作的程式碼加⼊入版本控制內 • 流程提醒： - working directory > staging area > commit
- 15. 為什麼需要樣板？ • 在實作⾴頁⾯面時，很多⾴頁⾯面的 HTML 其實是重複的， 為減少維護多份重複的原始碼，並讓開發更簡便， 我們希望將⾴頁⾯面相同的區塊獨⽴立出來，重覆使⽤用 • 其實 PHP 本⾝身就是⼀一個樣板語⾔言，內建就有 include 語法，可以⽤用這個⽅方式來將其他⾴頁⾯面檔案嵌⼊入⾄至當 前畫⾯面內 <!-‐-‐ index.php -‐-‐> <body> <?php include("inc/header.php"); ?> <div class=“container"> <!-‐-‐ 略 -‐-‐> </div> <?php include("inc/footer.php"); ?> </body>
- 17. include 的極限 • include 只是單純的把指定的檔案內容如同複製貼上 的⽅方式放到當前的檔案內，本⾝身並沒有容器的概念。 換句話說，還是會有部份的內容是無法完美共⽤用的 • include 也無法將動態資料傳遞進去，只能把檔案的 內容單純的執⾏行出來 • 因此，單純的 include 對開發來說是不夠⽤用的，我們 需要更好⽤用的樣板引擎來控制⾴頁⾯面的顯⽰示
- 18. Laravel 的樣板引擎 • Laravel 的樣板引擎名為 Blade • 透過 Blade 語法，可以讓⾴頁⾯面有親屬關係，讓樣板繼 承 (template inheritance) 變得簡單，且可將⾴頁⾯面重複 的部份拆分成區塊 (section)，再引⼊入⾄至⾴頁⾯面對應的 位置即可 • 可以傳遞參數到任⼀一 Blade 樣板裡，在 Blade 樣板內 也可以執⾏行所有 PHP 內建的函數及 Laravel 的語法
- 19. 使⽤用 Blade Layout 後 index.blade.php news.blade.php contact.blade.php @yield header.blade.php sidebar.blade.php master.blade.php @include @include @extends
- 20. 怎麼⽤用 Blade？ • 使⽤用 Blade ⾮非常的容易，只要將原本放在 resources/ views 底下的 *.php 的檔名改成 *.blade.php。在畫⾯面 輸出時，Laravel ⾃自動就會使⽤用 Blade 語法分析器來 處理這些檔案的內容 • Blade 規劃流程： - 先定義主 Layout - 定義共⽤用區塊的內容 - 再定義⼦子 Layout 裡使⽤用主 Layout 做延伸
- 21. 定義主 Layout • 在 resources/views 建⽴立⼀一個 layouts/master.blade.php • 主 Layout 裡定義全站樣板的結構，以及要讓⼦子 Layout 繼承填充的區塊位置 {{-‐-‐ resources/views/layouts/master.blade.php -‐-‐}} <html> <head> <title>App Name -‐ @yield('title')</title> </head> <body> @include(‘layouts.partials.navigation’) <div class="container"> @yield('content') </div> </body> </html>
- 22. 定義共⽤用區塊 • 每個⾴頁⾯面都會使⽤用到的共⽤用區塊，可以再單獨拆分 出來成單獨的 Blade 樣板 • 在 resources/views/layouts 底下新增 partials，裡⾯面新 增 navigation.blade.php 檔，並填⼊入導覽列內容 {{-‐-‐ resources/views/layouts/partials/navigation.blade.php -‐-‐}} <ul> <li> <a href="#">Item 1</a> </li> <li> <a href="#">Item 2</a> </li> </ul>
- 23. 定義⼦子 Layout • 在 resources/views 裡新增 *.blade.php • ⼦子 Layout 要先宣告繼承的主 Layout，並將要填充的 區塊內容覆寫進去 @extends('layouts.master') @section('title', 'Page Title') @section('content') <p>This is my body content.</p> @stop
- 24. Blade 語法 • @ 開頭 - 樣板控制 @yield、@extends… - 程式邏輯控制 @if、@foreach… • { 開頭 - 輸出內容 {{、{!! - 註解 {{-‐-‐
- 25. Blade 樣板語法 • @yield ('{section name}') • @include('{view name}', $data) • @extends('{view name}') • @section('{yeild name}')、@endsction • @stop • @show • @parent
- 26. Blade 邏輯控制 • 邏輯控制 -‐ @if、@elseif、@else、@endif • 迴圈 -‐ @for($i = 0; $i < 10; $++)、@endfor -‐ @foreach($posts as $post)、@endforeach -‐ @forelse($posts as $post)、@empty、@endforelse -‐ @unless(Auth::check())、@endunless
- 27. 輸出資料 • {{ $string }} - 輸出前會做跳脫，安全預設 -‐ {{ $name or 'Default' }} • {!! $html !!} - 輸出不會做跳脫，可⽤用於印出 HTML • 萬⼀一真的要顯⽰示 {{ 的時候怎麼辦？ - ⽤用 @{{ raw data }} 輸出
- 28. Blade 命名慣例 • 慣例僅供參考，Laravel 沒有強制規定要怎麼使⽤用， 只要符合 Laravel 原⽣生設定就可以了 - 主樣板放在 layouts 資料夾內 - 區塊樣板放在 partials 資料夾內 - ⼦子樣板放在 {resources} 資料夾內
- 29. 傳遞資料⾄至View 顯⽰示 • 把變數傳給View，讓View 顯⽰示動態資料 // app/Http/routes.php Route::get('/', function() { $data = ['name' => 'Simon']; return view('home.index', $data); }); // resources/views/home/index.blade.php <!doctype html> <html> <head><!-‐-‐ 略 -‐-‐></head> <body> <h1>My name is {{$name}}</h1> </body> </html>
- 30. 樣板製作/抽離
- 31. 調整 views 結構/命名 • 新增 layouts、partials 資料夾 • 在 layouts 裡放⼊入 master.blade.php • 在 layouts/partials 裡放⼊入 {share_section}.blade.php • 新增需要的各 {resource} 資料夾 • 把對應的 view 重新命名為 *.blade.php
- 32. 設定主樣板 • 先將樣板內的總體 HTML 結構設定為主樣板 <!-‐-‐ resources/views/layouts/master.blade.php -‐-‐> <!DOCTYPE html> <html> <head> {{-‐-‐ 略 -‐-‐}} <title>@yield('title') | Blog</title> </head> <body> {{-‐-‐ 略 —}} @include('layouts.partials.navigation') @yield('content') {{-‐-‐ 略 -‐-‐}} </body> </html>
- 33. 拔出重複的區塊 • 重複共⽤用的區塊拔出來放到 partials 裡 <!-‐-‐ resources/views/layouts/partials/navigation.blade.php -‐-‐> <div class="navigation"> {{-‐-‐ 略 -‐-‐}} </div>
- 34. 設定⼦子樣板 • ⼦子樣板繼承主樣板，並填上/覆寫需要增加的區塊 • 可以使⽤用 PHP 內建的函式來產⽣生重覆的資料 <!-‐-‐ resources/views/home/index.blade.php -‐-‐> @extends('layouts.master') @section('title', '⾸首⾴頁') @section('content') <h1>Home Page</h1> @forelse(range(1, 5) as $number) <h2>⽂文章 -‐ {{ $number }}</h2> @empty <h2>⺫⽬目前還沒有任何⽂文章</h2> @endforelse @stop
- 35. 修改 Route 路徑 • 因為調整過 views 資料夾內的檔名及資料夾結構，所 以部份的 Route 可能也需要調整 • 全部完成後，請在瀏覽器裡驗證所有的修改都是正 確無誤的 // app/Http/routes.php Route::get('/', function() { return view('home.index'); });
- 36. route('{name}', {prama}) • Laravel 提供的 helper function 之⼀一 • 在其中指定 route 的名稱，就會⾃自動回傳 URL • 範例： <a href="{{ route('home.index') }}">回⾸首⾴頁</a>
- 37. asset('{path}') • Laravel 提供的 helper function 之⼀一 • 在其中輸⼊入素材的位置，就會⾃自動回傳完整的 URL • 範例： <img src="{{ asset('img/logo.png') }}">
- 38. 存檔點 • 試著把現在已經可以運作的程式碼加⼊入版本控制內 • 流程提醒： - working directory > staging area > commit
- 39. 單元總結 • 在這個單元裡我們學到了些什麼？ - MVC 基本概念及 Laravel 如何處理View - Laravel 的 Blade 樣板語法 - 整合專案樣板⾄至 Laravel 內
- 40. Q & A 歡迎提問討論