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

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

2011.06.04上野裕介

2

目次

• ディレクトリ構成 (10 分 )• バンドルの作成と登録 (10 分 )• ルーティングの登録 (10 分 )• Twig 構文を試す (15 分 )• Twig テンプレートの継承 (20 分 )• Twig のキャッシュを見る (10 分 )

2011.06.04 Symfony2 勉強会 #4 基礎編ワークショップ

3

ワークショップの参考 URL

• Creating Pages in Symfony2 ( バンドル作成方法 )– http://symfony.com/doc/current/book/page_creation.html

• Creating and using Templates (Sf2 と Twig の連携 )– http://symfony.com/doc/current/book/templating.html

• Twig Documentation (Twig の基本構文とか )– http://www.twig-project.org/documentation

• Twig と他のテンプレートエンジンの比較– http://fabien.potencier.org/article/34/templating-engines-in-php– http://fabien.potencier.org/article/35/templating-engines-in-php-foll

ow-up2011.06.04 Symfony2 勉強会 #4 基礎編ワーク

ショップ

http://symfony.com/doc/current/book/page_creation.html

http://symfony.com/doc/current/book/templating.html

http://www.twig-project.org/documentation

http://fabien.potencier.org/article/34/templating-engines-in-php

http://fabien.potencier.org/article/35/templating-engines-in-php-follow-up

http://fabien.potencier.org/article/35/templating-engines-in-php-follow-up

4

目次



5

ディレクトリ構成

• web• src• vendor• app• (bin)


6

目次



7

バンドルの作成と登録

• バンドル– フレームワーク– 自分のプログラム– 外部プラグイン

• バンドルの粒度– symfony 1.x と比較• frontend application … FrontendBundle• blog module … BlogBundle• sfWebBrowserPlugin … WebbrowserBundle


8


• app/console コマンド

• init:bundle コマンド

• 作成されたフォルダを見てみよう


$ php app/console init:bundle “My\WorkshopBundle” src

9


• 名前空間の登録 (app/autoload.php)

• AppKernel への登録 (app/AppKernel.php)


$loader->registerNamespaces(array( // ... 'My' => __DIR__.'/../src',));

public function registerBundles(){ $bundles = array( // ... new My\WorkshopBundle\MyWorkshopBundle(), ); // ... return $bundles;}

10

目次



11

ルーティングの登録

• app/config/routing.yml

• src/My/WorkshopBundle/Resources/config/routing.yml– コメントアウトをはずす + 名前変更


workshop: prefix: /workshop resource: “@MyWorkshopBundle/Resources/config/routing.yml”

workshop_homepage: pattern: / defaults: { _controller: MyWorkshopBundle:Default:index }

バンドル名 : コントローラ名 : アクション名

12

ルーティングの登録


http://localhost/Symfony/web/app_dev.php/workshop/

自動生成されたアクションとテンプレートがあるので、Hello! と表示されます

13

目次



14

Twig 構文を試す – for 文

• src/My/WorkshopBundle/Resources/views/Default/index.html.twig


<ul>{% for key, user in users %}<li>No.{{ key }}: {{ user.name }} </li> {% endfor %}</ul>

15

Twig 構文を試す – for 文

• DefaultController::indexAction()


public function indexAction() { $users = array( ‘1’ => array(‘name’=>‘鹿目まどか ', 'age'=>14), ‘5’ => array(‘name’=>‘<b>めんま </b>', 'age'=>’?'), ); return $this->render('MyWorkshopBundle:Default:index.html.twig', array('users' => $users)); }

16

Twig 構文を試す

• {{ ... }}– 値や式の結果をテンプレートに出力するための文

法• {% ... %}– テンプレート内でロジックを制御するための文法

• {# ... #}– コメントを表すための文法– 複数行にわたって使用可能


17

Twig 構文を試す - include

• src/My/WorkshopBundle/Resources/views/menu.html.twig

• src/My/WorkshopBundle/Resources/views/Default/index.html.twig ( の冒頭に追加 )


<ul> <li> メニュー 1</li> <li> メニュー 2</li> <li> メニュー 3</li></ul>

{% include 'MyWorkshopBundle::menu.html.twig' %}

18

Twig 構文を試す - raw


• に raw フィルタを付ける

• エスケープされなくなる


<li>No.{{ key }}: {{ user.name }}({{ user.age }})</li>

<li>No.{{ key }}: {{ user.name|raw }}({{ user.age }})</li>

19

Twig 構文を試す - format


• を format フィルタで書き直すと

• printf() 関数の様なもの


<li>No.{{ key }}: {{ user.name }}({{ user.age }})</li>

<li>{{ "No.%d: %s(%s)"|format(key, user.name, user.age) }}</li>

20

Twig 構文を試す – その他

• 例だけ紹介– date … DateTime::format() のラッパー ( 書式は

date())

– default … 空要素の初期値を指定 (beta3 バグあり )• 「空」と判定される値は、 false または 0 以外の

empty() 値

– if/elseif/else/endif … 条件分岐

• http://www.twig-project.org/doc/templates.html2011.06.04 Symfony2 勉強会 #4 基礎編ワークショップ

{{ “now”|date(‘Y-m-d H:i:s’) }} {{ user.createdAt|date(‘Y/m/d’) }}

{{ user.birthday|default(‘----/--/--’) }}

{% if users %}…{% endif %}

21

目次



22

Twig テンプレートの継承

• app/Resources/views/–base.html.twig

• src/My/WorkshopBundle/Resources/views/– layout.html.twig–Default/• index.html.twig


元からある

今から作る

さっき弄ってた

継承

継承

23

<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>{% block title %}Welcome!{% endblock %}</title> {% block stylesheets %}{% endblock %} <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" /> </head> <body> {% block body %}{% endblock %} {% block javascripts %}{% endblock %} </body></html>

title ブロック



base.html.twig

body ブロック

layout.html.twig{% extends '::base.html.twig' %}

{% block title %}WorkShop{% endblock %}

{% block body %}{% include 'MyWorkshopBundle::menu.html.twig' %}{% endblock %}

body ブロック

継承

title ブロック

index.html.twig{% extends 'MyWorkshopBundle::layout.html.twig' %}{% block body %}{{ parent() }}<!– ここから -->中身<!– ここまで {% endblock %}

継承

body ブロック親の block 呼び出し

24



<!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>{% block title %}Welcome!{% endblock %}</title> {% block stylesheets %}{% endblock %} <link rel="shortcut icon" href="{{ asset('favicon.ico') }}" /> </head> <body> {% block body %}{% endblock %} {% block javascripts %}{% endblock %} </body></html>

base.html.twig

25



layout.html.twig{% extends '::base.html.twig' %}

{% block title %}WorkShop{% endblock %}

{% block body %}{% include 'MyWorkshopBundle::menu.html.twig' %}{% endblock %}

26



index.html.twig{% extends 'MyWorkshopBundle::layout.html.twig' %}{% block body %}{{ parent() }}<!– ここから -->中身<!– ここまで {% endblock %}

27

目次



28

Twig のキャッシュを見る

• app/cache/dev/twig/*– Php code にコンパイルされている– 意外ときれいな php-code• シンプルだけど、機能を満たす• 元のコードとの対応関係がおおよそ分かる


29

• ＼ (^o^) ／おわり＼ (^o^) ／

• Next step…– ブログチュートリアル• http://doc.symfony.gr.jp/blog-tutorial/

– Symfony2 Book• http://symfony.com/doc/current/book/index.html


http://doc.symfony.gr.jp/blog-tutorial/

http://symfony.com/doc/current/book/index.html

http://symfony.com/doc/current/book/index.html

Technology

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

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