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

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

## 開発環境
- Windows8.1
- XAMPP
- PhpStorm

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

#### PhpStromの環境設定
[Joyful Development with Symfony 3 Video](https://knpuniversity.com/screencast/symfony/phpstorm-git)

## ページ作成

### srcの中身
controllerのclassがおいてある
### app
設定ファイルや表示するテンプレートファイル、表示するファイルがおいてある

```php: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](https://qiita-image-store.s3.amazonaws.com/0/206600/069d0ca2-915f-b8ee-3a06-4778c67fe4ef.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](https://knpuniversity.com/screencast/symfony/first-page)

また作成した結果簡易的なページを作成することができた
![image.png](https://qiita-image-store.s3.amazonaws.com/0/206600/cd33c322-20ed-632f-f5a9-a3a310c4717c.png)

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

## controllerの操作

```php: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](https://qiita-image-store.s3.amazonaws.com/0/206600/9512e96e-e4cc-6f1b-d5fb-cff1789c4ecb.png)

でも日本語でも可能
![image.png](https://qiita-image-store.s3.amazonaws.com/0/206600/c9b2a67d-0f8c-dc1d-629c-e88d9c04dd81.png)

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

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

## view(twigファイル)に操作

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

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

![image.png](https://qiita-image-store.s3.amazonaws.com/0/206600/671ba636-d0d9-acab-c758-80f2ca85a007.png)

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

{% %}タグで使えるものは数多くあるため知りたい方はこちらを参照
[Twig](https://twig.symfony.com/doc/2.x/)

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

```twig: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>

```

```twig: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](https://qiita-image-store.s3.amazonaws.com/0/206600/c5ad893c-3ddc-7e2d-ea62-66d7f62f05b4.png)

動画で流れを確認したい人はこちら
[Joyful Development with Symfony 3 Video](https://knpuniversity.com/screencast/symfony/services-useful-objects)