LoginSignup
2
0

More than 5 years have passed since last update.

Symfonyのお勉強2 ~ページ作成~

Last updated at Posted at 2017-11-17

「Welcome Page」が表示できたので、今度は新しいページを作成しようと考える

開発環境

  • Windows8.1
  • XAMPP
  • PhpStorm

IDE、エディタについて

今回コードを書くにあたって、PhpStormを使用した理由については、
このIDEにSymfonyのプラグインが存在し、それを使うことにより
Symfonyフレームワークで扱うコードの補完機能であったりと様々な機能が存在するため、
使用することをオススメする。
ただし、無料期間は30日間のため注意が必要
PhpStorm

PhpStromの環境設定

Joyful Development with Symfony 3 Video

ページ作成

srcの中身

controllerのclassがおいてある

app

設定ファイルや表示するテンプレートファイル、表示するファイルがおいてある

TestController.php
<?php
//1
namespace AppBundle\Controller;

//2
use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Component\HttpFoundation\Response;

//3
class TestController
{

    //4
    /**
     * @Route("/test/")
     **/

    //5
    public function showAction()
    {
        //6
        return new Response('Hello World!');
    }
}

1.namespaceを指定

名前の衝突を避けるために使用
使用しない場合namespaceエラーを吐く
phpstormではファイル作成時に自動的に作成される

2.use指定

名前空間の別名を作成、クラス、関数、定数などをインポートするために使用
使用しない場合useでエラーを吐く

3.クラスを指定

一般的なphpのクラス指定
phpstormではファイル作成時に自動的に作成される

4.routeの指定

URLを指定するためのルート
image.png
上の画像のようにwebで表示する際のURLに使用する
そのためこれがなければこのControllerのphpを表示させることができない

5.メソッドの作成

この中に処理の内容を書く

6. return文

phpの一般的なreturn文だが、「new Response」がないと
レスポンスが返ってこないとエラーを吐くので注意

手順

手順としては、
ファイルを作成し、namespaceとクラスは自動的に作成されるので、
1,3→4→5→2→6
の順番で作成してくのが妥当だと考える

作成結果

動画で流れを確認したい人はこちら
Joyful Development with Symfony 3 Video

また作成した結果簡易的なページを作成することができた
image.png

viewとcontrollerに分けてみる

MVCフレームワークではViewの部分にあたるファイルでtwigファイルにコードを書くことによって
Web上に表示することができる
またhtmlタグを使用してWeb表示させることができる
twigファイルと連携させるにはControllerの処理を変更しないといけない

controllerの操作

TestContoller.php
<?php
namespace AppBundle\Controller;

use Sensio\Bundle\FrameworkExtraBundle\Configuration\Route;
use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Response;

//7
class TestController extends Controller
{

    //8
    /**
     * @Route("/test/{genusName}")
     **/

    public function showAction($genusName)
    {
        //9
        $templating = $this->container->get('templating');
        //10
        $html = $templating->render('test/test.html.twig', array(
            'name' => $genusName
        ));
        return new Response($html);
    }
}

7.Controller

extens Controllerによりコントロールクラスを拡張する

8.ルート

{genusName}と設定することでurlに任意のアドレスを指定できる
image.png

でも日本語でも可能
image.png

9.テンプレート

テンプレートサービスを取得するためのコード

10.送信

テンプレートサービスからviewsファイル中にあるtestファイルのtest.html.twigファイルに
配列の中にある変数に名前を付けて送信する
今回の場合$genusNameをnameと付けて送信している
このnameはtwigファイルで操作する際に使用する

view(twigファイル)に操作

test.html.twig
<h1>{{ name }}</h1>

twigファイルでは処理を書く際に'{{ }}'と'{% %}'のどちらかで囲まなければならない(ただしhtmlタグは別)
{{ }} → 変数などを表示する際に使用する
{% %} →for文やif文など処理を行う際に使用する
今回は送られてきたデータをそのまま表示するだけなので{{}}だけを使用した

image.png

実際にWeb上に変数の中身を表示させることができた

{% %}タグで使えるものは数多くあるため知りたい方はこちらを参照
Twig

また...

twigファイルで表示する際にblockを使用することでテンプートファイルを継承することができる
今回一応使ってみたが多分使い方が間違っていると思われる...

base.html.twig
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>{% block title %}Welcome!{% endblock %}</title>
    {% block stylesheets %}{% endblock %}
    <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}"/>
</head>
<body>
{% block body %}{% endblock %}
{% block javascripts %}{% endblock %}
</body>
</html>

test.html.twig
{% extends 'base.html.twig' %}
{% block title %}テスト{% endblock %}
{% block body %}
    <ul>
        {% for array in arrays %}
            <li>{{ array }}</li>
        {% endfor %}
    </ul>
{% endblock %}

bodyの中は次のお話で...
今回はブロックを使ってタイトルを継承した
一度baseのtwigに定義しなければいけないが処理量が増えた時により使えるかと考える

あいう.png

動画で流れを確認したい人はこちら
Joyful Development with Symfony 3 Video

2
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0