Submit Search
Upload
View 與 Blade 樣板引擎
•
9 likes
•
41,960 views
Shengyou Fan
Follow
在 2015 年 7 月至新北市樹林國小舉辦 Laravel 工作坊,讓參與的學員在 30 個小時內學會使用 Laravel 建置一個具 Open ID 認證功能的網路應用程式。
Read less
Read more
Technology
Report
Share
Report
Share
1 of 40
Download now
Download to read offline
Recommended
給你一個使用 Laravel 的理由
給你一個使用 Laravel 的理由
Shengyou Fan
Package 安裝與使用
Package 安裝與使用
Shengyou Fan
Route 路由控制
Route 路由控制
Shengyou Fan
開發環境建置
開發環境建置
Shengyou Fan
專案啟動與環境設定
專案啟動與環境設定
Shengyou Fan
Model 設定與 Seeding
Model 設定與 Seeding
Shengyou Fan
使用 laravel 的前與後
使用 laravel 的前與後
Shengyou Fan
使用 Controller
使用 Controller
Shengyou Fan
Recommended
給你一個使用 Laravel 的理由
給你一個使用 Laravel 的理由
Shengyou Fan
Package 安裝與使用
Package 安裝與使用
Shengyou Fan
Route 路由控制
Route 路由控制
Shengyou Fan
開發環境建置
開發環境建置
Shengyou Fan
專案啟動與環境設定
專案啟動與環境設定
Shengyou Fan
Model 設定與 Seeding
Model 設定與 Seeding
Shengyou Fan
使用 laravel 的前與後
使用 laravel 的前與後
Shengyou Fan
使用 Controller
使用 Controller
Shengyou Fan
開發環境建置
開發環境建置
Shengyou Fan
Route路由控制
Route路由控制
Shengyou Fan
Eloquent ORM
Eloquent ORM
Shengyou Fan
應用程式佈署
應用程式佈署
Shengyou Fan
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
Shengyou Fan
工作坊簡介
工作坊簡介
Shengyou Fan
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
Shengyou Fan
啟動 Laravel 與環境設定
啟動 Laravel 與環境設定
Shengyou Fan
Model 設定與 Seeding
Model 設定與 Seeding
Shengyou Fan
使用者認證
使用者認證
Shengyou Fan
COSCUP 2016 Laravel 部署工作坊 - 部署指南
COSCUP 2016 Laravel 部署工作坊 - 部署指南
Shengyou Fan
驗證與訊息
驗證與訊息
Shengyou Fan
Composer 套件管理
Composer 套件管理
Shengyou Fan
使用 Controller
使用 Controller
Shengyou Fan
CRUD 綜合運用
CRUD 綜合運用
Shengyou Fan
PHP 語法基礎與物件導向
PHP 語法基礎與物件導向
Shengyou Fan
工作坊總結
工作坊總結
Shengyou Fan
課程簡介
課程簡介
Shengyou Fan
LaravelConf Taiwan 2017 單頁面應用與前後端分離開發
LaravelConf Taiwan 2017 單頁面應用與前後端分離開發
俊仁 陳
工作坊總結
工作坊總結
Shengyou Fan
Migrations 與 Schema 操作
Migrations 與 Schema 操作
Shengyou Fan
整合 Open ID
整合 Open ID
Shengyou Fan
More Related Content
What's hot
開發環境建置
開發環境建置
Shengyou Fan
Route路由控制
Route路由控制
Shengyou Fan
Eloquent ORM
Eloquent ORM
Shengyou Fan
應用程式佈署
應用程式佈署
Shengyou Fan
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
Shengyou Fan
工作坊簡介
工作坊簡介
Shengyou Fan
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
Shengyou Fan
啟動 Laravel 與環境設定
啟動 Laravel 與環境設定
Shengyou Fan
Model 設定與 Seeding
Model 設定與 Seeding
Shengyou Fan
使用者認證
使用者認證
Shengyou Fan
COSCUP 2016 Laravel 部署工作坊 - 部署指南
COSCUP 2016 Laravel 部署工作坊 - 部署指南
Shengyou Fan
驗證與訊息
驗證與訊息
Shengyou Fan
Composer 套件管理
Composer 套件管理
Shengyou Fan
使用 Controller
使用 Controller
Shengyou Fan
CRUD 綜合運用
CRUD 綜合運用
Shengyou Fan
PHP 語法基礎與物件導向
PHP 語法基礎與物件導向
Shengyou Fan
工作坊總結
工作坊總結
Shengyou Fan
課程簡介
課程簡介
Shengyou Fan
LaravelConf Taiwan 2017 單頁面應用與前後端分離開發
LaravelConf Taiwan 2017 單頁面應用與前後端分離開發
俊仁 陳
工作坊總結
工作坊總結
Shengyou Fan
What's hot
(20)
開發環境建置
開發環境建置
Route路由控制
Route路由控制
Eloquent ORM
Eloquent ORM
應用程式佈署
應用程式佈署
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
工作坊簡介
工作坊簡介
View 與 Blade 樣板引擎
View 與 Blade 樣板引擎
啟動 Laravel 與環境設定
啟動 Laravel 與環境設定
Model 設定與 Seeding
Model 設定與 Seeding
使用者認證
使用者認證
COSCUP 2016 Laravel 部署工作坊 - 部署指南
COSCUP 2016 Laravel 部署工作坊 - 部署指南
驗證與訊息
驗證與訊息
Composer 套件管理
Composer 套件管理
使用 Controller
使用 Controller
CRUD 綜合運用
CRUD 綜合運用
PHP 語法基礎與物件導向
PHP 語法基礎與物件導向
工作坊總結
工作坊總結
課程簡介
課程簡介
LaravelConf Taiwan 2017 單頁面應用與前後端分離開發
LaravelConf Taiwan 2017 單頁面應用與前後端分離開發
工作坊總結
工作坊總結
Viewers also liked
Migrations 與 Schema 操作
Migrations 與 Schema 操作
Shengyou Fan
整合 Open ID
整合 Open ID
Shengyou Fan
工作坊簡介
工作坊簡介
Shengyou Fan
Route 機制
Route 機制
Shengyou Fan
使用 Eloquent ORM
使用 Eloquent ORM
Shengyou Fan
Schema & Migration操作
Schema & Migration操作
Shengyou Fan
開發流程與工具介紹
開發流程與工具介紹
Shengyou Fan
開發環境建置
開發環境建置
Shengyou Fan
專案啟動與設定
專案啟動與設定
Shengyou Fan
Model & Seeding整合
Model & Seeding整合
Shengyou Fan
使用者認證
使用者認證
Shengyou Fan
CRUD 綜合應用
CRUD 綜合應用
Shengyou Fan
Viewers also liked
(12)
Migrations 與 Schema 操作
Migrations 與 Schema 操作
整合 Open ID
整合 Open ID
工作坊簡介
工作坊簡介
Route 機制
Route 機制
使用 Eloquent ORM
使用 Eloquent ORM
Schema & Migration操作
Schema & Migration操作
開發流程與工具介紹
開發流程與工具介紹
開發環境建置
開發環境建置
專案啟動與設定
專案啟動與設定
Model & Seeding整合
Model & Seeding整合
使用者認證
使用者認證
CRUD 綜合應用
CRUD 綜合應用
Similar to View 與 Blade 樣板引擎
Drupal 版型設計 - 瞭解版型程式
Drupal 版型設計 - 瞭解版型程式
Chris Wu
HTML 語法教學
HTML 語法教學
Shengyou Fan
高效率的、可维护的Css
高效率的、可维护的Css
simaopig
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
jeannewoo
【 I Love Joomla 】- Joomla!佈景製作教學
【 I Love Joomla 】- Joomla!佈景製作教學
ilovejoomla
Migrations 與 Schema操作
Migrations 與 Schema操作
Shengyou Fan
Inside the browser
Inside the browser
otakustay
I Love Joomla! 佈景製作教學 0212
I Love Joomla! 佈景製作教學 0212
Asika Simon
Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式
Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式
Justin Lin
How to ASP.NET MVC4
How to ASP.NET MVC4
Daniel Chou
Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.x
Bo-Yi Wu
Template mb-kao
Template mb-kao
xwcoder
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Ailsa126
Razor_MVC3_Quick_Reference
Razor_MVC3_Quick_Reference
振林 谭
Word press theme主题制作教程
Word press theme主题制作教程
pangyuxing
Php
Php
paitoubing
4. Go 工程化实践-0124-v2.pdf
4. Go 工程化实践-0124-v2.pdf
ssuserd6c7621
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC
Php study.20130110
Php study.20130110
bngoogle
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
Anthony Chen
Similar to View 與 Blade 樣板引擎
(20)
Drupal 版型設計 - 瞭解版型程式
Drupal 版型設計 - 瞭解版型程式
HTML 語法教學
HTML 語法教學
高效率的、可维护的Css
高效率的、可维护的Css
[译]Efficient, maintainable CSS
[译]Efficient, maintainable CSS
【 I Love Joomla 】- Joomla!佈景製作教學
【 I Love Joomla 】- Joomla!佈景製作教學
Migrations 與 Schema操作
Migrations 與 Schema操作
Inside the browser
Inside the browser
I Love Joomla! 佈景製作教學 0212
I Love Joomla! 佈景製作教學 0212
Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式
Servlet & JSP 教學手冊第二版 - 第 1 章:簡介Web應用程式
How to ASP.NET MVC4
How to ASP.NET MVC4
Introduction to MVC of CodeIgniter 2.1.x
Introduction to MVC of CodeIgniter 2.1.x
Template mb-kao
Template mb-kao
浅析浏览器解析和渲染
浅析浏览器解析和渲染
Razor_MVC3_Quick_Reference
Razor_MVC3_Quick_Reference
Word press theme主题制作教程
Word press theme主题制作教程
Php
Php
4. Go 工程化实践-0124-v2.pdf
4. Go 工程化实践-0124-v2.pdf
twMVC#01 | ASP.NET MVC 的第一次親密接觸
twMVC#01 | ASP.NET MVC 的第一次親密接觸
Php study.20130110
Php study.20130110
2011 JavaTwo JSF 2.0
2011 JavaTwo JSF 2.0
More from Shengyou Fan
[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式
[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式
Shengyou Fan
[JCConf 2023] 從 Kotlin Multiplatform 到 Compose Multiplatform:在多平台間輕鬆共用業務邏輯與 U...
[JCConf 2023] 從 Kotlin Multiplatform 到 Compose Multiplatform:在多平台間輕鬆共用業務邏輯與 U...
Shengyou Fan
[Kotlin 讀書會第五梯次] 深入淺出 Kotlin 第一章導讀
[Kotlin 讀書會第五梯次] 深入淺出 Kotlin 第一章導讀
Shengyou Fan
[WebConf Taiwan 2023] 一份 Zend Engine 外帶!透過 Micro 讓一次打包、多處運行變得可能
[WebConf Taiwan 2023] 一份 Zend Engine 外帶!透過 Micro 讓一次打包、多處運行變得可能
Shengyou Fan
How I make a podcast website using serverless technology in 2023
How I make a podcast website using serverless technology in 2023
Shengyou Fan
[Effective Kotlin 讀書會] 第八章 Efficient collection processing 導讀
[Effective Kotlin 讀書會] 第八章 Efficient collection processing 導讀
Shengyou Fan
[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台
[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台
Shengyou Fan
[JCConf 2022] Compose for Desktop - 開發桌面軟體的新選擇
[JCConf 2022] Compose for Desktop - 開發桌面軟體的新選擇
Shengyou Fan
Using the Exposed SQL Framework to Manage Your Database
Using the Exposed SQL Framework to Manage Your Database
Shengyou Fan
[COSCUP 2022] 讓黑畫面再次偉大 - 用 PHP 寫 CLI 工具
[COSCUP 2022] 讓黑畫面再次偉大 - 用 PHP 寫 CLI 工具
Shengyou Fan
[COSCUP 2022] Kotlin Collection 遊樂園
[COSCUP 2022] Kotlin Collection 遊樂園
Shengyou Fan
初探 Kotlin Multiplatform
初探 Kotlin Multiplatform
Shengyou Fan
簡化 JVM 上雲 - 透過 Azure Spring Cloud 提升開發、發佈及服務監控效率
簡化 JVM 上雲 - 透過 Azure Spring Cloud 提升開發、發佈及服務監控效率
Shengyou Fan
[PHP 也有 Day #64] PHP 升級指南
[PHP 也有 Day #64] PHP 升級指南
Shengyou Fan
以 Kotlin Multiplatform Mobile (KMM) 開發跨平台行動應用
以 Kotlin Multiplatform Mobile (KMM) 開發跨平台行動應用
Shengyou Fan
Composer 經典食譜
Composer 經典食譜
Shengyou Fan
老派浪漫:用 Kotlin 寫 Command Line 工具
老派浪漫:用 Kotlin 寫 Command Line 工具
Shengyou Fan
[Kotlin Serverless 工作坊] 單元 4 - 實作 RSS Aggregator
[Kotlin Serverless 工作坊] 單元 4 - 實作 RSS Aggregator
Shengyou Fan
[Kotlin Serverless 工作坊] 單元 3 - 實作 JSON API
[Kotlin Serverless 工作坊] 單元 3 - 實作 JSON API
Shengyou Fan
[Kotlin Serverless 工作坊] 單元 2 - 簡介 Kotlin Serverless
[Kotlin Serverless 工作坊] 單元 2 - 簡介 Kotlin Serverless
Shengyou Fan
More from Shengyou Fan
(20)
[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式
[GDG Kaohsiung DevFest 2023] 以 Compose 及 Kotlin Multiplatform 打造多平台應用程式
[JCConf 2023] 從 Kotlin Multiplatform 到 Compose Multiplatform:在多平台間輕鬆共用業務邏輯與 U...
[JCConf 2023] 從 Kotlin Multiplatform 到 Compose Multiplatform:在多平台間輕鬆共用業務邏輯與 U...
[Kotlin 讀書會第五梯次] 深入淺出 Kotlin 第一章導讀
[Kotlin 讀書會第五梯次] 深入淺出 Kotlin 第一章導讀
[WebConf Taiwan 2023] 一份 Zend Engine 外帶!透過 Micro 讓一次打包、多處運行變得可能
[WebConf Taiwan 2023] 一份 Zend Engine 外帶!透過 Micro 讓一次打包、多處運行變得可能
How I make a podcast website using serverless technology in 2023
How I make a podcast website using serverless technology in 2023
[Effective Kotlin 讀書會] 第八章 Efficient collection processing 導讀
[Effective Kotlin 讀書會] 第八章 Efficient collection processing 導讀
[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台
[MOPCON 2022] 以 Kotlin Multiplatform 制霸全平台
[JCConf 2022] Compose for Desktop - 開發桌面軟體的新選擇
[JCConf 2022] Compose for Desktop - 開發桌面軟體的新選擇
Using the Exposed SQL Framework to Manage Your Database
Using the Exposed SQL Framework to Manage Your Database
[COSCUP 2022] 讓黑畫面再次偉大 - 用 PHP 寫 CLI 工具
[COSCUP 2022] 讓黑畫面再次偉大 - 用 PHP 寫 CLI 工具
[COSCUP 2022] Kotlin Collection 遊樂園
[COSCUP 2022] Kotlin Collection 遊樂園
初探 Kotlin Multiplatform
初探 Kotlin Multiplatform
簡化 JVM 上雲 - 透過 Azure Spring Cloud 提升開發、發佈及服務監控效率
簡化 JVM 上雲 - 透過 Azure Spring Cloud 提升開發、發佈及服務監控效率
[PHP 也有 Day #64] PHP 升級指南
[PHP 也有 Day #64] PHP 升級指南
以 Kotlin Multiplatform Mobile (KMM) 開發跨平台行動應用
以 Kotlin Multiplatform Mobile (KMM) 開發跨平台行動應用
Composer 經典食譜
Composer 經典食譜
老派浪漫:用 Kotlin 寫 Command Line 工具
老派浪漫:用 Kotlin 寫 Command Line 工具
[Kotlin Serverless 工作坊] 單元 4 - 實作 RSS Aggregator
[Kotlin Serverless 工作坊] 單元 4 - 實作 RSS Aggregator
[Kotlin Serverless 工作坊] 單元 3 - 實作 JSON API
[Kotlin Serverless 工作坊] 單元 3 - 實作 JSON API
[Kotlin Serverless 工作坊] 單元 2 - 簡介 Kotlin Serverless
[Kotlin Serverless 工作坊] 單元 2 - 簡介 Kotlin Serverless
View 與 Blade 樣板引擎
1.
View 與 Blade
樣板引擎 范聖佑 Shengyou Fan 新北市樹林國⼩小 (2015/07/08) 適 ⽤用 5.1 版
2.
單元主題 • MVC 架構是什麼?什麼是View? •
使⽤用View 與 樣板引擎在開發上的好處 • 學習 Blade 樣板語法 • ⽰示範如何從網路上下載樣板並使⽤用 Laravel 樣板引擎 整合進實作專案前台內
3.
MVC 裡的 View ★
參考⽂文件:http://laravel.com/docs/5.1/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,並將要顯⽰示動態資料的部份留下來,等待被 呼叫的時候由外部傳⼊入 • 如此即可讓商業邏輯 (M)、顯⽰示 (V) 與程式控制 (C) 三者獨⽴立開來,彼此分⼯工、互相合作
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 底下 • 移除預設的 resources/views/welcome.blade.php • 更新 app/Http/routes.php 內的設定成回傳 view • 修正連結路徑 (⾴頁⾯面內 css、js、img 的路徑) • 確認每⼀一個 route 回傳的⾴頁⾯面內容
13.
存檔點 • 試著把現在已經可以運作的程式碼加⼊入版本控制內 • 流程提醒: -
working directory > staging area > commit
14.
Blade 樣板引擎 ★ 參考⽂文件:http://laravel.com/docs/5.1/blade
15.
為什麼需要樣板? • 在實作⾴頁⾯面時,很多⾴頁⾯面的 HTML
其實是重複的, 為減少維護多份重複的原始碼,並讓開發更簡便, 我們希望將⾴頁⾯面相同的區塊獨⽴立出來,重覆使⽤用 • 其實 PHP 本⾝身就是⼀一個樣板語⾔言,內建就有 include 語法,可以⽤用這個⽅方式來將其他⾴頁⾯面檔案嵌⼊入⾄至當 前畫⾯面內 <!-‐-‐ index.php -‐-‐> <body> <?php include("inc/header.php"); ?> <div class="container"> <!-‐-‐ 略 -‐-‐> </div> <?php include("inc/footer.php"); ?> </body>
16.
include 概念圖 index.php news.php contact.php header.php sidebar.php include('header.php') include('sidebar.php') include('header.php') include('sidebar.php') include('header.php') include('sidebar.php')
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> @endsection
24.
Blade 語法 • @
開頭 - 樣板控制 @yield、@extends… - 程式邏輯控制 @if、@foreach… • { 開頭 - 輸出內容 {{、{!! - 註解 {{-‐-‐
25.
Blade 樣板語法 • @yield
('{section name}') • @include('{view name}') • @extends('{view name}') • @section('{yeild name}', '{ string }') • @section('{yeild name}') • @endsction
26.
Blade 邏輯控制 • 邏輯控制 -‐
@if、@elseif、@else、@endif • 迴圈 -‐ @for($i = 0; $i < 10; $++)、@endfor -‐ @foreach($posts as $post)、@endforeach -‐ @forelse($posts as $post)、@empty、@endforelse
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 裡放⼊入 {partial}.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> @foreach(range(1, 5) as $number) <h2>⽂文章 -‐ {{ $number }}</h2> @endforeach @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 歡迎提問討論
Download now