View 與 Blade 樣板引擎

Laravel ޻࡞๥ View ᢛᒬ൘Ҿ№ shengyou @ জࢣେࢿ޻ܥላ။ (2014.12.13)

֊ஈ೚຿ • ྃղ MVC ཫత View ٴ Laravel 㚎 Response
తӡ࡞ݪཧ • ላश೗Կ࢖༻ Laravel తᒬ൘Ҿ№ Blade ٴ ଖޠ๏ • ࢖༻ bootstrap ٴ startbootstrap తᒬ൘੡ ࡞ሢҊท໘

Views & Responses

Request ӡߦिظ Route Controller Model View index.php Server Request Response
Client app init ˒ ჩߟ㘸໌ɿhttp://laravel-recipes.com/recipes/52/understanding-the-request-lifecycle

Response • Laravel ਑ሣॴ༗త Request తճጯ౎ੋճ ၚҰݸ Response ෺݅ •
ࡏલ໘తൣྫཫɼզ၇ࡏ㑌Ұݸ Route ౎ ௚઀ճၚ ࣈ۲ (string) Route::get(‘/’, function() { return 'Home Page'; }); ˒ ׭ํจ݅ɿhttp://laravel.tw/docs/4.2/responses#basic-responses

ࣗఆ Response 㚎༰ • एੋधཁࣗఆ Response త contentɺ header ٴ
status code త࿩ɿ Route::get(‘/’, function() { $response = Response::make($contents, $statusCode); $response-‐>header(‘Content-‐Type’, $value); return $response; });

ճၚ Redirect • Ұݸ Response ໵ՄҎੋҰݸ Redirect • ҃ੋಋ޲ጯ༻ఔࣜత㠥֎Ұݸ route
Route::get(‘google’, function() { return Redirect::to(‘{url}’); }); Route::get(‘redirect’, function() { return Redirect::route(‘{name}’, $params); }); ˒ ׭ํจ݅ɿhttp://laravel.tw/docs/4.2/responses#redirects

ճၚ View • େଟᏐ࣌ީଖመ౎ੋճၚҰݸ View Route::get(‘view’, function() {
return Response::view(‘{view name}’); }); Route::get(‘view’, function() { return View::make(‘{view name}’); });

Views • ࡏ MVC ՍߏԼɼViews తޭೳबੋෛ੹ Ṷଘ HTMLɼᩋᰖࣔ (V) ᢛఔࣜ߇੍
(C) ɺ঎ۀᬓा (M) ෼։ • Laravel త Views ౎์ࡏ app/views ࢿྉᇄ ఈԼɼॴ༗䈕໊օҎ *.php ၏ҝ݁ඌɼ䈕 Ҋ㚎༰बੋ HTML

View ࢖༻ൣྫ • ࡏ Route ཫఆٛ࢖༻త View ໊᜝ • View
ཫ໘बੋᄸ७త HTML // routes.php Route::get('/', function() { return View::make('home'); }); // app/views/home.php <!doctype html> <html> <head><!-‐-‐ ུ -‐-‐></head> <body> <h1>Home</h1> </body> </html> ˒ ׭ํจ݅ɿhttp://laravel.tw/docs/4.2/responses#views

ᩋ View ಈଶᰖࣔࢿྉ • ೺ࢿ㘤ၚڅ Viewɼᩋ View ᰖࣔಈଶࢿྉ // routes.php
Route::get('/', function() { $data = [‘name’ => ‘Simon’]; return View::make('home', $data); }); // app/views/home.php <!doctype html> <html> <head><!-‐-‐ ུ -‐-‐></head> <body> <h1>My name is <?=$name?></h1> </body> </html>

Լࡌᒬ൘ • ࡏຊ޻࡞๥ཫɼզ၇ሡ࢖༻ bootstrap લ ୺ᐽՍٴ startbootstrap తᒬ൘ɼշ଎ݐ ஔզ၇धཁతท໘ -
ओท໘ᒬ൘ɿhttp://bit.ly/1BCfEWB - ৄࡉทᒬ൘ɿhttp://bit.ly/12AIBTP - ొೖทᒬ൘ɿhttp://bit.ly/1yFUdD3 ˒ P.S ᙛવʂ䓟ՄҎਘፙࣗݾتᓣతᒬ൘

੔߹ᒬ൘ࢸᐽՍ㚎 • ೺ෆॏෳ assets ์౸ public ࢿྉᇄ㚎 • ೺ *.html
ґधٻ໋໊੒ *.php ์౸ app/ views ఈԼɼฒҠআ༬ઃटท hello.php • ߋ৽ routes.php 㚎తઃఆ • मਖ਼ cssɺjs ࿈݁࿏ኸ • ֬ೝ㑌Ұݸ route ճၚతท໘㚎༰

ଘ䈕ᴍ • ࢼஶ೺ݱࡏቮៃՄҎӡ࡞తఔࣜᛰՃೖ൛ ຊ߇੍㚎 • ྲྀఔఏ੧ɿ - working directory >
staging area > commit

࢖༻ᒬ൘Ҿ№

ҝॄኄधཁᒬ൘Ҿ№ʁ • ࡏመ࡞ท໘࣌ɼ኷ଟท໘త HTML ଖመੋ ॏෳతɼҝݮগҡޢଟ㟨ॏෳతݪ࢝ᛰɼ ฒᩋ։ᚙߋ؆ศɼզ၇धཁಁաᒬ൘ሡท ໘૬ಉతეմᘐཱग़ိ • ᒬ൘Ҿ№ఏڙզ၇؅ཧᒬ൘తػ੍ɼڠॿ
զ၇㗞ੜఔࣜճၚతท໘ٴࡨޡ႔ཧ౳

Laravel తᒬ൘Ҿ№ • Laravel తᒬ൘Ҿ№ҝ Blade • ಁա Blade ޠ๏ɼՄҎᩋท໘༗਌ሱ᮫
܎ɼᩋᒬ൘៺ঝ (template inheritance)Ꮣಘ ؆ᄸɼ׌Մሡท໘ॏෳత෦㟨፥෼੒ეմ (section)ɼ࠶Ҿೖࢸท໘ሣጯతҐஔଈՄ ˒ ჩߟɿhttp://laravel.tw/docs/4.2/templates

ዎኄ༻ Bladeʁ • ׳ྫɿ(ჩߟɼෆҰఆཁর၏) • ओᒬ൘์ࡏ layouts ࢿྉᇄ㚎 • ეմᒬ൘์ࡏ
partials ࢿྉᇄ㚎 • ࢠᒬ൘์ࡏ {resources} ࢿྉᇄ㚎 • ॴ༗ blade ෭䈕໊౎ཁҝ *.blade.php

Blade ޠ๏نଇ • @։಄ - ᒬ൘߇੍ @yieldɺ@extends… - ఔࣜᬓा߇੍ @ifɺ@foreach…
• {{ɺ{{{ɺ{{-- ։಄ • ᒬ൘্༌ग़㚎༰ɺḼղ༻

ௐ੔ views ݁ߏ • ৽⃧ layoutsɺpartials ࢿྉᇄɼฒࡏଖத์ master.blade.php ٴ sidebar.blade.php
• ৽⃧ homeɺcategoriesɺpostsɺlogin • ೺ሣጯత view ൖਐሣጯతࢿྉᇄɼฒॏ ৽໋໊ҝ *.blade.php

ઃఆओᒬ൘ • ઌሡҰݸجຊత HTML ݁ߏઃఆҝओᒬ൘ <!-‐-‐ app/views/layouts/master.blade.php -‐-‐> <!DOCTYPE html>
<html> <head> <!-‐-‐ ུ -‐-‐> <title> @section(‘title’) | Blog @show </title> </head> <body> @yield('content') </body> </html>

ઃఆࢠᒬ൘ • ࢠᒬ൘៺ঝओᒬ൘ɼฒర্/෴ሜधཁ⃧Ճ తეմ <!-‐-‐ app/views/home/index.blade.php -‐-‐> @extends('layouts.master') @section('title') Home
Page @parent @stop @section('content') <h1>Home Page</h1> @stop

፝ग़ॏෳతეմ <!-‐-‐ app/views/partials/sidebar.blade.php -‐-‐> <div class=”sidebar”> {{-‐-‐
ུ -‐-‐}} </div> <!-‐-‐ app/views/home/index.blade.php -‐-‐> @extends('layouts.master') @section('title') Home Page @parent @stop @section('content') <h1>Home Page</h1> @include(‘partials.sidebar’) @stop

मվ Route ࿏ኸ • Ҽҝௐ੔ա views ࢿྉᇄ㚎త䈕໊ٴࢿྉ ᇄ݁ߏɼॴҎሣጯత Route ໵ཁ᪑ஶௐ੔
// routes.php Route::get('/', function() { return View::make('home.index'); });

Blade ᒬ൘ޠ๏ • @yield • @extends(‘{view}’) • @section(‘{section}’) • @include(‘{view}’,
$data) • @parent • @stopɺ@show ˒ ჩߟɿhttp://laravel.tw/docs/4.2/templates#blade-templating

Blade ᬓा߇੍ • ᬓा߇੍ -‐ @ifɺ@elseifɺ@elseɺ@endif • ᫮ᅲ -‐ @for($i
= 0; $i < 10; $++)ɺ@endfor -‐ @foreach($posts as $post)ɺ@endforeach ˒ ჩߟɿhttp://laravel.tw/docs/4.2/templates#other-blade-control-structures

খఏࣔ • {{ $string }} ࿨ {{{ $string }}} ༗ॄኄෆಉʁ
• {{ తޠ๏ᔒ༗ escapedɺ{{{ త༗ escaped • ᤈҰզਅతཁଧ {{ ࿨ {{{ త࣌ީዎኄ㭎ʁ • ༻ @{{ raw data }} ༌ग़

FormɺHTMLɺHelper

༻ Laravel 㗞ੜ HTML • Laravel ఏڙᏐݸ Facade ٴ helperɼՄ㢨ॿ
զ၇㗞ੜሣጯత HTML DOM • ຊ޻࡞๥။༻౸త - Form Builder - HTML Builder - Helpers

࢖༻ HTML ࿈ assets • ࢖༻ HTML Builder ࿈ css
• ࢖༻ HTML Facade ࿈ js HTML::style('{path}'); // generate <link media=”all” type=”text/css” rel=”stylesheet” href=”{path}”> HTML::script('{path}'); // generate <script href=”{path}”></script> ˒ ჩߟɿhttp://cheats.jesse-obrien.ca/#html

࢖༻ url ၏ท໘࿈݁ • Laravel ఏڙҰܥྻత helper function Մࡏ ᐽՍత೚Ұ஍ํݺڣ࢖༻
• ࢖༻ url(‘path’) बՄҎ㗞ੜ૝ཁత URL <a href=”{{ url(‘/’) }}”>Home</a> // generate <a href=”http://localhost:8000/”>Home</a> ˒ ჩߟɿhttp://laravel.tw/docs/4.2/helpers#urls

։啟/᮫ดදᄸ • ։啟දᄸ • Model 綁ఆ • ᮫ดදᄸ ˒ ჩߟɿhttp://laravel.tw/docs/4.2/html#opening-a-form
Form::open(array('url' => '{foo/bar}', 'method' => 'put')) Form::model($post, array('route' => array(‘{route.name}’, $post-‐>id))) Form::close() Form::open(array('route' => '{route.name}'))

㗞ੜදᄸݩૉ • 㗞ੜ InputɺLabelɺTextarea • 㗞ੜ Submit ҈ᭃ Form::label(‘{input name}’,
‘{display text}’) Form::text(‘{field name}’, ‘{value}’, [{opts array}]) Form::email(‘{field name}’, ‘{value}’, [{opts array}]) Form::textarea(‘{field name}’, ‘{value}’, [{opts array}]) Form::submit(‘{field name}’, [{opt_array}])

׬੒ create/edit ท໘ • ར༻ Form Builder ೺ create/edit ౳ท໘ݐ
ߏग़ိɼฒमվ route ઃఆ - categories.createɺ categories.edit - posts.createɺposts.edit - categories.showɺposts.show - home.index

֊ஈᒾ查ද • ֬ೝ㑌Ұݸ route ౎ՄҎਖ਼֬తᰖࣔท໘ • ֬ೝ໢᜾্త㑌Ұݸ࿈݁౎ՄҎਖ਼֬త࿈ ݁ࢸሣጯతท໘ • ֬ೝॴ༗తදᄸ౎Մӡ࡞
(P.S ૹग़ޙᚙੜ ࡨޡᔒ᮫܎)

ࢼࢼ؃ • ࢼஶ౟༻ෆಉతᒬ൘ɺ҃ੋ೺ᒬ൘վಘߋ ٵҾਓʁ • login ทᔒ༗࢖༻ master ᒬ൘ɼ૝૝؃೗ Կಁաଟॏ៺ঝᩋᒬ൘ॏෳత㚎༰ߋগʁ
• จষฤा୞༗ textarea ɼ㢨๩Ճݸ WYSIWYG ฤाثʁ

໰ᢛ౴ ላһՄ։࢝࿅शɺመ࡞

ᄸݩখ݁ • ࡏṜݸᄸݩཫɼզ၇㘸໌ Laravel త Response ػ੍ɺላश೗Կ࢖༻ View ٴ BladeɼฒሡሢҊधཁతท໘੔߹׬ඟ
• ԼҰݸᄸݩɼզ၇ሡላश೗Կ࿈݁ RouteɺView ٴ Controller

View 與 Blade 樣板引擎

View 與 Blade 樣板引擎

More Decks by Shengyou Fan

Other Decks in Programming

Featured

Transcript