シムノート

PHPフレームワークSymfonyの学習帳

ユーザ用ツール

サイト用ツール


サイドバー

メニュー



このエントリーをはてなブックマークに追加

blog:2015-12-22:symfony入門_todoリストチュートリアル_bootstrap3

Symfony3入門 TODOリストチュートリアル : (3) Bootstrap3

CSSのフレームワークであるBootstrao3を使って画面の見栄えを修正します。

なお、Bootstrap3自体の使い方はここでは説明しないので、詳細は以下のサイトを参照してください。

http://getbootstrap.com

CRUDの修正

最初に、TODOリストではタスクの表示処理に必要性を感じない為、削除してしまいます。

  • task/show.html.twigファイルを削除
  • TaskControllerのshowAction()メソッドを削除

次に、Taskの新規作成後と編集後のリダイレクト先を変更します。

// ...
public function newAction(Request $request)
{
    // ...
    if ($form->isSubmitted() && $form->isValid()) {

        // リダイレクト先を task_index に修正
        // return $this->redirectToRoute('task_show', array('id' => $task->getId()));
        return $this->redirectToRoute('task_index');
    }
    // ...
}
// ...
public function editAction(Request $request, Task $task)
{
    // ...
    if ($editForm->isSubmitted() && $editForm->isValid()) {
        // ...
        
        // リダイレクト先を task_index に修正
        // return $this->redirectToRoute('task_edit', array('id' => $task->getId()));
        return $this->redirectToRoute('task_edit', array('id' => $task->getId()));
    }
    // ...
}

// ...

Viewの修正(Bootstrap3対応)

レイアウトの修正

base.html.twig

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        {# タイトルを変更 #}
        <title>{% block title %}TODOリスト{% endblock %}</title>

        {# BootstrapのCDN参照を追加 #}
        <link  rel="stylesheets" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

        {# アプリケーション専用のCSS参照を追加 #}
        <link rel="stylesheet" href="/css/app.css">

        {% block stylesheets %} {% endblock %}
        <link rel="icon" type="image/x-icon" href="{{ asset('favicon.ico') }}" />
    </head>
    <body>
        {# ナビゲーションバーを追加 #}
        {% include '_navbar.html.twig' %}

        {% block body %}{% endblock %}

        {# JQueryのCDN参照を追加 #}
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        {# BootstrapのCDN参照を追加 #}
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

        {% block javascripts %}{% endblock %}
    </body>
</html>

Bootstrap3のCSS, JavascriptはCDNから読み込むことにします。

_navbar.html.twigを追加します。

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button aria-controls="navbar" aria-expanded="false" class="navbar-toggle collapsed" data-target="#navbar" data-toggle="collapse" type="button">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <a class="navbar-brand" href="{{ path('task_index') }}">Task List</a>
    </div>

    <div class="navbar-collapse collapse" id="navbar">
      <ul class="nav navbar-nav">
        &nbsp;
      </ul>
    </div>
  </div>
</nav>

app.css

app.cssを追加

#task-table .action {
  text-align: right;
}

Task関連のViewの修正

Bootstrap3の書式に合わせてhtmlを修正します。

index.html.twig

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

{% block title %}Task List{% endblock %}

{% block body %}
<div class="container">
  <div class="col-sm-offset-2 col-sm-8">
    <div class="panel panel-default">
      <div class="panel-heading">
        Current Tasks
      </div>
      <div class="panel-body">
        <table id="task-table" class="table table-striped">
          <thead>
            <tr>
              <th>Task</th>
              <th class="action">Actions</th>
            </tr>
          </thead>
          <tbody>
            {% for task in tasks %}
            <tr>
              <td>
                {# リンク先を編集画面にする #}
                <a href="{{ path('task_edit', { 'id': task.id }) }}">
                  {{ task.name }}
                </a>
              </td>
              <td class="action">
                {# TODO一覧で削除出来るようFormを追加 #}
                <form action="{{ path('task_delete', {'id': task.id}) }}" method="post">
                  {# HTTPのDELETEメソッドを指定 #}
                  <input type="hidden" name="_method" value="DELETE">
                  {# CSRF対策のトークンを生成 #}
                  <input type="hidden" name="_token" value="{{ csrf_token('delete_task') }}">

                  <input class="btn btn-danger" type="submit" value="Delete"/>
                </form>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <a class="btn btn-primary" href="{{ path('task_new') }}">Create a new task</a>
  </div>
</div>
{% endblock %}

タスク一覧からタスクを削除出来るようにフォームを追加しました。

new.html.twig

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

{% block title %}Create Task{% endblock %}

{% block body %}
<div class="col-sm-offset-2 col-sm-8">
  <div class="panel panel-default">
    <div class="panel-heading">
      Create Task
    </div>
    <div class="panel-body">
      {{ form_start(form) }}
        {{ form_widget(form) }}
        <input class="btn btn-primary" type="submit" value="Create"/>
      {{ form_end(form) }}
    </div>

  </div>

  <a class="btn btn-default" href="{{ path('task_index') }}">Back to the list</a>
</div>
{% endblock %}

edit.html.twig

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

{% block title %}Edit Task{% endblock %}

{% block body %}
<div class="col-sm-offset-2 col-sm-8">
  <div class="panel panel-default">
    <div class="panel-heading">
      Task Edit
    </div>
    <div class="panel-body">
      {{ form_start(edit_form) }}
        {{ form_widget(edit_form) }}
        <input class="btn btn-primary" type="submit" value="Update"/>
      {{ form_end(edit_form) }}
    </div>
  </div>

  <a class="btn btn-default" href="{{ path('task_index') }}">Back to the list</a>
</div>
{% endblock %}

タスク編集画面からタスクの削除ボタンを削除しました。

コントローラーの修正

ビューの修正に合わせてコントローラも修正します。

public function editAction(Request $request, Task $task)
{
// 削除  $deleteForm = $this->createDeleteForm($task);
    $editForm = $this->createForm(TaskType::class, $task);
    $editForm->handleRequest($request);

    if ($editForm->isSubmitted() && $editForm->isValid()) {
        $em = $this->getDoctrine()->getManager();
        $em->persist($task);
        $em->flush();

        return $this->redirectToRoute('task_edit', array('id' => $task->getId()));
    }

    return $this->render('task/edit.html.twig', array(
        'task' => $task,
        'edit_form' => $editForm->createView(),
// 削除    'delete_form' => $deleteForm->createView(),
    ));
}

/**
 * Deletes a Task entity.
 *
 * @Route("/{id}", name="task_delete")
 * @Method("DELETE")
 */
public function deleteAction(Request $request, Task $task)
{

// 削除
//     $form = $this->createDeleteForm($task);
//     $form->handleRequest($request);

// 変更
//     if ($form->isSubmitted() && $form->isValid()) {
    if ($this->isCsrfTokenValid('delete_task', $request->get('_token'))) {
        $em = $this->getDoctrine()->getManager();
        $em->remove($task);
        $em->flush();
    }

    return $this->redirectToRoute('task_index');
}

// メソッド毎削除します。
//     private function createDeleteForm(Task $task)
//     {
//         return $this->createFormBuilder()
//             ->setAction($this->generateUrl('task_delete', array('id' => $task->getId())))
//             ->setMethod('DELETE')
//             ->getForm()
//         ;
//     }

Formテーマの設定

SymfonyのForm生成機能には、Bootstrap3用のタグを出力する機能があります。
config.ymlでFormのテーマにBootstrap3を使うよう支持します。

# ...

# Twig Configuration
twig:
    form_themes:
        - 'bootstrap_3_horizontal_layout.html.twig'
        # ...
# ...

Formテーマの詳細に関しては以下のサイトを参照ください。

https://symfony.com/doc/master/cookbook/form/form_customization.html

動作確認

http://localhost:8000/task にアクセスしてTaskのCRUDをテストします。一覧表示、追加、変更、削除を実行し、各ページがBoostrap3の画面になっていることを確認します。


Comments



14 +2 = ?
blog/2015-12-22/symfony入門_todoリストチュートリアル_bootstrap3.txt · 最終更新: 2015/12/22 18:20 by tsubo