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

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

on

  • 8,102 views

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

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

Statistics

Views

Total Views
8,102
Views on SlideShare
4,791
Embed Views
3,311

Actions

Likes
5
Downloads
28
Comments
0

12 Embeds 3,311

http://manjiro.net 2101
http://labs.uechoco.com 464
http://blog.livedoor.jp 428
http://hiroki.jp 236
http://webcache.googleusercontent.com 48
url_unknown 17
http://blog.bakorer.com 12
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