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

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

on

  • 7,936 views

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

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

Statistics

Views

Total Views
7,936
Views on SlideShare
4,665
Embed Views
3,271

Actions

Likes
5
Downloads
28
Comments
0

12 Embeds 3,271

http://manjiro.net 2072
http://labs.uechoco.com 455
http://blog.livedoor.jp 428
http://hiroki.jp 236
http://webcache.googleusercontent.com 48
url_unknown 17
http://blog.bakorer.com 10
http://www.sfexception.com 1
http://old.hiroki.jp 1
http://www.hiroki.jp 1
http://webdav.hiroki.jp 1
http://news.google.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

    • Symfony2勉強会#4基礎編ワークショップ.1
      2011.06.04
      上野裕介
    • 目次
      ディレクトリ構成(10分)
      バンドルの作成と登録(10分)
      ルーティングの登録(10分)
      Twig構文を試す(15分)
      Twigテンプレートの継承(20分)
      Twigのキャッシュを見る(10分)
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      2
    • ワークショップの参考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-follow-up
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      3
    • 目次
      ディレクトリ構成(10分)
      バンドルの作成と登録(10分)
      ルーティングの登録(10分)
      Twig構文を試す(15分)
      Twigテンプレートの継承(20分)
      Twigのキャッシュを見る(10分)
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      4
    • ディレクトリ構成
      web
      src
      vendor
      app
      (bin)
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      5
    • 目次
      ディレクトリ構成(10分)
      バンドルの作成と登録(10分)
      ルーティングの登録(10分)
      Twig構文を試す(15分)
      Twigテンプレートの継承(20分)
      Twigのキャッシュを見る(10分)
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      6
    • バンドルの作成と登録
      バンドル
      フレームワーク
      自分のプログラム
      外部プラグイン
      バンドルの粒度
      symfony 1.x と比較
      frontend application … FrontendBundle
      blog module … BlogBundle
      sfWebBrowserPlugin … WebbrowserBundle
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      7
    • バンドルの作成と登録
      app/consoleコマンド
      init:bundleコマンド
      作成されたフォルダを見てみよう
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      8
      $ php app/console init:bundle “MyWorkshopBundle” src
    • バンドルの作成と登録
      名前空間の登録(app/autoload.php)
      AppKernelへの登録(app/AppKernel.php)
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      9
      $loader->registerNamespaces(array(
      // ...
      'My' => __DIR__.'/../src',
      ));
      public function registerBundles()
      {
      $bundles = array(
      // ...
      new MyWorkshopBundleMyWorkshopBundle(),
      );
      // ...
      return $bundles;
      }
    • 目次
      ディレクトリ構成(10分)
      バンドルの作成と登録(10分)
      ルーティングの登録(10分)
      Twig構文を試す(15分)
      Twigテンプレートの継承(20分)
      Twigのキャッシュを見る(10分)
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      10
    • ルーティングの登録
      app/config/routing.yml
      src/My/WorkshopBundle/Resources/config/routing.yml
      コメントアウトをはずす+名前変更
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      11
      workshop:
      prefix: /workshop
      resource: “@MyWorkshopBundle/Resources/config/routing.yml”
      workshop_homepage:
      pattern:/
      defaults:{ _controller:MyWorkshopBundle:Default:index }
      バンドル名:コントローラ名:アクション名
    • ルーティングの登録
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      12
      http://localhost/Symfony/web/app_dev.php/workshop/
      自動生成されたアクションとテンプレートがあるので、
      Hello!と表示されます
    • 目次
      ディレクトリ構成(10分)
      バンドルの作成と登録(10分)
      ルーティングの登録(10分)
      Twig構文を試す(15分)
      Twigテンプレートの継承(20分)
      Twigのキャッシュを見る(10分)
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      13
    • Twig構文を試す – for文
      src/My/WorkshopBundle/Resources/views/Default/index.html.twig
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      14
      <ul>
      {% for key, user in users %}
      <li>No.{{ key }}: {{ user.name}} </li>
      {% endfor%}
      </ul>
    • Twig構文を試す – for文
      DefaultController::indexAction()
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      15
      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));
      }
    • Twig構文を試す
      {{ ... }}
      値や式の結果をテンプレートに出力するための文法
      {% ... %}
      テンプレート内でロジックを制御するための文法
      {# ... #}
      コメントを表すための文法
      複数行にわたって使用可能
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      16
    • Twig構文を試す - include
      src/My/WorkshopBundle/Resources/views/menu.html.twig
      src/My/WorkshopBundle/Resources/views/Default/index.html.twig (の冒頭に追加)
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      17
      <ul>
      <li>メニュー1</li>
      <li>メニュー2</li>
      <li>メニュー3</li>
      </ul>
      {% include 'MyWorkshopBundle::menu.html.twig'%}
    • Twig構文を試す - raw
      src/My/WorkshopBundle/Resources/views/Default/index.html.twig
      にrawフィルタを付ける
      エスケープされなくなる
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      18
      <li>No.{{ key }}: {{ user.name}}({{ user.age }})</li>
      <li>No.{{ key }}: {{ user.name|raw}}({{ user.age }})</li>
    • Twig構文を試す - format
      src/My/WorkshopBundle/Resources/views/Default/index.html.twig
      をformatフィルタで書き直すと
      printf()関数の様なもの
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      19
      <li>No.{{ key }}: {{ user.name}}({{ user.age }})</li>
      <li>{{ "No.%d: %s(%s)"|format(key, user.name, user.age) }}</li>
    • Twig構文を試す – その他
      例だけ紹介
      date … DateTime::format()のラッパー(書式はdate())
      default … 空要素の初期値を指定(beta3バグあり)
      「空」と判定される値は、falseまたは0以外のempty()値
      if/elseif/else/endif … 条件分岐
      http://www.twig-project.org/doc/templates.html
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      20
      {{ “now”|date(‘Y-m-dH:i:s’) }} {{ user.createdAt|date(‘Y/m/d’) }}
      {{ user.birthday|default(‘----/--/--’) }}
      {% if users %}

      {% endif%}
    • 目次
      ディレクトリ構成(10分)
      バンドルの作成と登録(10分)
      ルーティングの登録(10分)
      Twig構文を試す(15分)
      Twigテンプレートの継承(20分)
      Twigのキャッシュを見る(10分)
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      21
    • Twigテンプレートの継承
      app/Resources/views/
      base.html.twig
      src/My/WorkshopBundle/Resources/views/
      layout.html.twig
      Default/
      index.html.twig
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      22
      元からある
      継承
      今から作る
      さっき弄ってた
      継承
    • Twigテンプレートの継承
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      23
      base.html.twig
      layout.html.twig
      <!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ブロック
      index.html.twig
      {% extends '::base.html.twig' %}
      {% block title %}WorkShop{% endblock%}
      {% block body %}
      {% include 'MyWorkshopBundle::menu.html.twig' %}
      {% endblock%}
      継承
      継承
      titleブロック
      {% extends 'MyWorkshopBundle::layout.html.twig' %}
      {% block body %}
      {{ parent() }}
      <!– ここから-->
      中身
      <!– ここまで
      {% endblock%}
      親のblock呼び出し
      bodyブロック
      bodyブロック
      bodyブロック
    • Twigテンプレートの継承
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      24
      base.html.twig
      <!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>
    • Twigテンプレートの継承
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      25
      layout.html.twig
      {% extends '::base.html.twig' %}
      {% block title %}WorkShop{% endblock%}
      {% block body %}
      {% include 'MyWorkshopBundle::menu.html.twig' %}
      {% endblock%}
    • Twigテンプレートの継承
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      26
      index.html.twig
      {% extends 'MyWorkshopBundle::layout.html.twig' %}
      {% block body %}
      {{ parent() }}
      <!– ここから-->
      中身
      <!– ここまで
      {% endblock%}
    • 目次
      ディレクトリ構成(10分)
      バンドルの作成と登録(10分)
      ルーティングの登録(10分)
      Twig構文を試す(15分)
      Twigテンプレートの継承(20分)
      Twigのキャッシュを見る(10分)
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      27
    • Twigのキャッシュを見る
      app/cache/dev/twig/*
      Php codeにコンパイルされている
      意外ときれいなphp-code
      シンプルだけど、機能を満たす
      元のコードとの対応関係がおおよそ分かる
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      28
    • \(^o^)/おわり\(^o^)/
      Next step…
      ブログチュートリアル
      http://doc.symfony.gr.jp/blog-tutorial/
      Symfony2 Book
      http://symfony.com/doc/current/book/index.html
      2011.06.04
      Symfony2勉強会#4 基礎編ワークショップ
      29