Your SlideShare is downloading. ×
0
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
第4回Symfony2勉強会 基礎編ワークショップ.1
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

第4回Symfony2勉強会 基礎編ワークショップ.1

7,805

Published on

第4回Symfony2勉強会 基礎編ワークショップで使用したスライドです。Symfony2のTwigを使うためのステップです。

第4回Symfony2勉強会 基礎編ワークショップで使用したスライドです。Symfony2のTwigを使うためのステップです。

Published in: Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
7,805
On Slideshare
0
From Embeds
0
Number of Embeds
7
Actions
Shares
0
Downloads
30
Comments
0
Likes
5
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Symfony2勉強会#4基礎編ワークショップ.1<br />2011.06.04<br />上野裕介<br />
  • 2. 目次<br />ディレクトリ構成(10分)<br />バンドルの作成と登録(10分)<br />ルーティングの登録(10分)<br />Twig構文を試す(15分)<br />Twigテンプレートの継承(20分)<br />Twigのキャッシュを見る(10分)<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />2<br />
  • 3. ワークショップの参考URL<br />Creating Pages in Symfony2 (バンドル作成方法)<br />http://symfony.com/doc/current/book/page_creation.html<br />Creating and using Templates (Sf2とTwigの連携)<br />http://symfony.com/doc/current/book/templating.html<br />Twig Documentation (Twigの基本構文とか)<br />http://www.twig-project.org/documentation<br />Twigと他のテンプレートエンジンの比較<br />http://fabien.potencier.org/article/34/templating-engines-in-php<br />http://fabien.potencier.org/article/35/templating-engines-in-php-follow-up<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />3<br />
  • 4. 目次<br />ディレクトリ構成(10分)<br />バンドルの作成と登録(10分)<br />ルーティングの登録(10分)<br />Twig構文を試す(15分)<br />Twigテンプレートの継承(20分)<br />Twigのキャッシュを見る(10分)<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />4<br />
  • 5. ディレクトリ構成<br />web<br />src<br />vendor<br />app<br />(bin)<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />5<br />
  • 6. 目次<br />ディレクトリ構成(10分)<br />バンドルの作成と登録(10分)<br />ルーティングの登録(10分)<br />Twig構文を試す(15分)<br />Twigテンプレートの継承(20分)<br />Twigのキャッシュを見る(10分)<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />6<br />
  • 7. バンドルの作成と登録<br />バンドル<br />フレームワーク<br />自分のプログラム<br />外部プラグイン<br />バンドルの粒度<br />symfony 1.x と比較<br />frontend application … FrontendBundle<br />blog module … BlogBundle<br />sfWebBrowserPlugin … WebbrowserBundle<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />7<br />
  • 8. バンドルの作成と登録<br />app/consoleコマンド<br />init:bundleコマンド<br />作成されたフォルダを見てみよう<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />8<br />$ php app/console init:bundle “MyWorkshopBundle” src<br />
  • 9. バンドルの作成と登録<br />名前空間の登録(app/autoload.php)<br />AppKernelへの登録(app/AppKernel.php)<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />9<br />$loader->registerNamespaces(array(<br />// ...<br />'My' => __DIR__.'/../src',<br />));<br />public function registerBundles()<br />{<br /> $bundles = array(<br />// ...<br />new MyWorkshopBundleMyWorkshopBundle(),<br /> );<br />// ...<br />return $bundles;<br />}<br />
  • 10. 目次<br />ディレクトリ構成(10分)<br />バンドルの作成と登録(10分)<br />ルーティングの登録(10分)<br />Twig構文を試す(15分)<br />Twigテンプレートの継承(20分)<br />Twigのキャッシュを見る(10分)<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />10<br />
  • 11. ルーティングの登録<br />app/config/routing.yml<br />src/My/WorkshopBundle/Resources/config/routing.yml<br />コメントアウトをはずす+名前変更<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />11<br />workshop:<br /> prefix: /workshop<br /> resource: “@MyWorkshopBundle/Resources/config/routing.yml”<br />workshop_homepage:<br />pattern:/<br />defaults:{ _controller:MyWorkshopBundle:Default:index }<br />バンドル名:コントローラ名:アクション名<br />
  • 12. ルーティングの登録<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />12<br />http://localhost/Symfony/web/app_dev.php/workshop/<br />自動生成されたアクションとテンプレートがあるので、<br />Hello!と表示されます<br />
  • 13. 目次<br />ディレクトリ構成(10分)<br />バンドルの作成と登録(10分)<br />ルーティングの登録(10分)<br />Twig構文を試す(15分)<br />Twigテンプレートの継承(20分)<br />Twigのキャッシュを見る(10分)<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />13<br />
  • 14. Twig構文を試す – for文<br />src/My/WorkshopBundle/Resources/views/Default/index.html.twig<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />14<br /><ul><br />{% for key, user in users %}<br /><li>No.{{ key }}: {{ user.name}} </li><br /> {% endfor%}<br /></ul><br />
  • 15. Twig構文を試す – for文<br />DefaultController::indexAction()<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />15<br />public function indexAction()<br />{<br />$users = array(<br />‘1’ => array(‘name’=>‘鹿目まどか', 'age'=>14),<br />‘5’ => array(‘name’=>‘<b>めんま</b>', 'age'=>’?'),<br />);<br />return $this->render('MyWorkshopBundle:Default:index.html.twig',<br />array('users' => $users));<br />}<br />
  • 16. Twig構文を試す<br />{{ ... }}<br />値や式の結果をテンプレートに出力するための文法<br />{% ... %}<br />テンプレート内でロジックを制御するための文法<br />{# ... #}<br />コメントを表すための文法<br />複数行にわたって使用可能<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />16<br />
  • 17. Twig構文を試す - include<br />src/My/WorkshopBundle/Resources/views/menu.html.twig<br />src/My/WorkshopBundle/Resources/views/Default/index.html.twig (の冒頭に追加)<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />17<br /><ul><br /><li>メニュー1</li><br /><li>メニュー2</li><br /><li>メニュー3</li><br /></ul><br />{% include 'MyWorkshopBundle::menu.html.twig'%}<br />
  • 18. Twig構文を試す - raw<br />src/My/WorkshopBundle/Resources/views/Default/index.html.twig<br />にrawフィルタを付ける<br />エスケープされなくなる<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />18<br /><li>No.{{ key }}: {{ user.name}}({{ user.age }})</li><br /><li>No.{{ key }}: {{ user.name|raw}}({{ user.age }})</li><br />
  • 19. Twig構文を試す - format<br />src/My/WorkshopBundle/Resources/views/Default/index.html.twig<br />をformatフィルタで書き直すと<br />printf()関数の様なもの<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />19<br /><li>No.{{ key }}: {{ user.name}}({{ user.age }})</li><br /><li>{{ "No.%d: %s(%s)"|format(key, user.name, user.age) }}</li><br />
  • 20. Twig構文を試す – その他<br />例だけ紹介<br />date … DateTime::format()のラッパー(書式はdate())<br />default … 空要素の初期値を指定(beta3バグあり)<br />「空」と判定される値は、falseまたは0以外のempty()値<br />if/elseif/else/endif … 条件分岐<br />http://www.twig-project.org/doc/templates.html<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />20<br />{{ “now”|date(‘Y-m-dH:i:s’) }} {{ user.createdAt|date(‘Y/m/d’) }}<br />{{ user.birthday|default(‘----/--/--’) }}<br />{% if users %}<br />…<br />{% endif%}<br />
  • 21. 目次<br />ディレクトリ構成(10分)<br />バンドルの作成と登録(10分)<br />ルーティングの登録(10分)<br />Twig構文を試す(15分)<br />Twigテンプレートの継承(20分)<br />Twigのキャッシュを見る(10分)<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />21<br />
  • 22. Twigテンプレートの継承<br />app/Resources/views/<br />base.html.twig<br />src/My/WorkshopBundle/Resources/views/<br />layout.html.twig<br />Default/<br />index.html.twig<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />22<br />元からある<br />継承<br />今から作る<br />さっき弄ってた<br />継承<br />
  • 23. Twigテンプレートの継承<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />23<br />base.html.twig<br />layout.html.twig<br /><!DOCTYPE html><br /><html><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>{%block title %}Welcome!{%endblock%}</title><br />{%block stylesheets%}{% endblock%}<br /><link rel="shortcut icon" href="{{asset('favicon.ico')}}" /><br /></head><br /><body><br />{%block body %}{%endblock%}<br />{% block javascripts%}{% endblock%}<br /></body><br /></html><br />titleブロック<br />index.html.twig<br />{% extends '::base.html.twig' %}<br />{% block title %}WorkShop{% endblock%}<br />{% block body %}<br />{% include 'MyWorkshopBundle::menu.html.twig' %}<br />{% endblock%}<br />継承<br />継承<br />titleブロック<br />{% extends 'MyWorkshopBundle::layout.html.twig' %}<br />{% block body %}<br />{{ parent() }}<br /><!– ここから--><br />中身<br /><!– ここまで<br />{% endblock%}<br />親のblock呼び出し<br />bodyブロック<br />bodyブロック<br />bodyブロック<br />
  • 24. Twigテンプレートの継承<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />24<br />base.html.twig<br /><!DOCTYPE html><br /><html><br /><head><br /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /><title>{%block title %}Welcome!{%endblock%}</title><br />{%block stylesheets%}{% endblock%}<br /><link rel="shortcut icon" href="{{asset('favicon.ico')}}" /><br /></head><br /><body><br />{%block body %}{%endblock%}<br />{% block javascripts%}{% endblock%}<br /></body><br /></html><br />
  • 25. Twigテンプレートの継承<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />25<br />layout.html.twig<br />{% extends '::base.html.twig' %}<br />{% block title %}WorkShop{% endblock%}<br />{% block body %}<br />{% include 'MyWorkshopBundle::menu.html.twig' %}<br />{% endblock%}<br />
  • 26. Twigテンプレートの継承<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />26<br />index.html.twig<br />{% extends 'MyWorkshopBundle::layout.html.twig' %}<br />{% block body %}<br />{{ parent() }}<br /><!– ここから--><br />中身<br /><!– ここまで<br />{% endblock%}<br />
  • 27. 目次<br />ディレクトリ構成(10分)<br />バンドルの作成と登録(10分)<br />ルーティングの登録(10分)<br />Twig構文を試す(15分)<br />Twigテンプレートの継承(20分)<br />Twigのキャッシュを見る(10分)<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />27<br />
  • 28. Twigのキャッシュを見る<br />app/cache/dev/twig/*<br />Php codeにコンパイルされている<br />意外ときれいなphp-code<br />シンプルだけど、機能を満たす<br />元のコードとの対応関係がおおよそ分かる<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />28<br />
  • 29. \(^o^)/おわり\(^o^)/<br />Next step…<br />ブログチュートリアル<br />http://doc.symfony.gr.jp/blog-tutorial/<br />Symfony2 Book<br />http://symfony.com/doc/current/book/index.html<br />2011.06.04<br />Symfony2勉強会#4 基礎編ワークショップ<br />29<br />

×