Skip to content

Latest commit

 

History

History
604 lines (453 loc) · 26.2 KB

File metadata and controls

604 lines (453 loc) · 26.2 KB
layout default
title リストを編集しよう

{{ page.title }}

本章メニュー

  • 本章では以下を行います。

    1. FrontControllerProviderに編集用のルーティングを設定します。

    2. ルーティングでURLパラメーターを取得します。

    3. コントローラーに編集用のメソッドを追記します。

    4. フォームビルダーで既存フォーム項目の削除・追加を行います。

    5. フォームビルダーの追加時の設定項目でhtmlタグのオプションを設定します。

    6. エンティティマネージャーで登録・編集処理が共通で行われている事を確認します。

    7. 編集用の画面を作成します。

    8. リダイレクトを利用します。

条件検索とアップデート処理

  • 前章では、レポジトリを用いた、検索・登録について学びました。

  • 本章では、ここまで学んだ事を応用して、更新処理を実装します。

編集画面のルーティング

  • まずはFrontControllerProviderルーティングを定義します。

ルーティングの設定

  • FrontControllerServiceProviderを開きます。

    • /src/Eccube/ControllerProvider/FrontControllerProvider.php
    1. 以下を追記します。

      • FrontControllerProvider.php
<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_12/FrontControllerProvider_add_crud_edit.php"></script>
  • 上記の説明を行います。

    1. まず「Tutorial」を検索します。

    2. 以前追記した、チュートリアル登録画面用のルーティングが記述されています。

    3. その下に編集画面用のルーティングを追記します。

    4. 今回のルーティングには、コントローラー・メソッド名のほか、URLパラメーター名 + URLパラメーターバリデートが追記されています。

    5. 以下で詳細を説明します。

$c->match('/[Twigで設定したルーティング名]/{id}', '[コントローラー名]::[メソッド名]')->bind('[ルーティング名(twigのurlで呼び出す値)]')->assert('[URLパラメーターキー名称]', '[バリデーション(正規表現)]');

  • matchメソッドの第二引数bindメソッドのルーティング名は、以前と同じです。
  • matchメソッドの第一引数の最後に**{id}**と記述しています。
    • これは、URLパラメーターのキーの設定で、ここでView側で付与した値を受け取る事を示しています。
    • ルーティング定義したコントローラーメソッド内で、今回の例であれば、$idでURLパラメーター値を利用します。
  • 今回新たにassertメソッドが記述されています。
    • assertメソッドは、URLパラメーターに対して、バリデーション設定を行います。
    • 今回は正規表現で、0以外で始まる正の整数のみ受け付ける様にしています。

画面へのルーティングの追加

  • crud_top.twig編集ボタンを追加し、先程定義したルーティング名を設定します。

  • 以下のファイルを確認します。

    • /src/Eccube/Resource/template/default/Tutorial/crud_top.twig
    1. ファイルを開いて以下の様に修正します。

      • crud_top.twig
<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_12/crud_top_add_edit.twig"></script>
  • 上記説明を行います。
  1. テーブルの見出しに編集の項目を追記します。

    • 本例ではテーブルタグを用いず、divタグtdクラスを追加する事で、テーブル形式の表示を行なっています。
  2. テーブル項目の最後に編集ボタンを追記します。

    • 「a」タグを用い、CSSでボタン形状に成形しています。
  3. 先程追加した**「a」タグリンク部URLですが、以前利用したTwig関数url()**でを用いています。

    • 今回のルーティング先で編集処理を行うため、レコードの特定が行えるIDを、URLパラメーターとして付与しています。

    • 構文は以下の通りです。

    url([ル-ティング名, ['キー(ルーティングで定義した内容)' : [実際のID]])
    
    • 以前は第一引数のみの記述でしたが、今回は第二引数に、URLパラメーターである対象レコードのIDを渡しています。

    • IDはキーと値を「:(コロン)」で区切り、第二引数全体をブラケットで囲みます。

編集処理用メソッドの定義

  • CrudController.php編集処理用メソッドを定義します。

メソッドの追記

  • CrudController.phpを開きます。
    • /src/Eccube/Controller/CrudController.php

      1. indexメソッドの下以下を追記します。
      • CrudController.php
<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_12/CrudController_add_edit.php"></script>
  • 上記を説明します。

    1. メソッド名をルーティングで設定した「edit」とします。

    2. 引数は「$app・$request」に加え、「id」を追記します。

      • 遷移元のViewからURLパラメーターとして、渡ってきた値です。
      • 今回の編集対象レコードの、idを保持しています。
    3. 処理冒頭で、渡されたidを条件に編集対象レコードを取得しています。

      • レポジトリのメソッドは後で追記、説明します。
    4. 取得値のエラーハンドリングとして、レコードが取得出来なかった際は、不正なアクセス及びエラーとみなし、登録画面へ強制遷移します。

    5. 取得レコード、フォームタイプをもとに、フォームを生成します。

    • レコード情報がフォーム項目に紐付き、値が保持された状態となります。
    1. 登録時とボタンの文言を変えたいために、以下メソッドで、登録ボタンをフォームビルダーから削除します。

      [フォームビルダー]->remove([削除対象項目name属性]);
      
    2. 次にaddメソッドを用い、編集登録用のボタンと、戻るボタンを追加しています。

      • addメソッドで以下の新しい、オプションが追加されています。
      'attr' => array(
          [htmlオプション名] => [設定値],
          'onClick' => 'javascript:history.back();'
      )
      
      • 上記のattrオプションでhtmlのオプション属性を設定します。
      • htmlのオプションであれば、「id・class」など自由に設定可能です。
      • 今回は戻るボタンのイベントとして、「onClick」属性を指定しています。
      • ※通常はJavaScriptのイベントをフォームビルダーで記述しません、あくまで参考としてください。
    3. フォームビルダーで項目の削除・追加を終えた後で、フォームオブジェクトを生成しています。

    • フォームタイプで定義した内容を、この様に動的に変更する事も可能です。
    1. サブミット値・入力値判定後の成功処理内で、登録処理を行なっていましたが、今回の更新でも処理は同一です。
    • これは前述した通り、エンティティマネージャーが今回のフォームに紐付いたエンティティが更新対象と自動で判断したからです。
    • エンティティマネージャーが、登録か更新か判断する基準は、「プライマリキー」に値が設定されているかどうかで判断されます。
    1. レンダリングでは、更新処理用のtwigをレンダリングしています。

    2. レンダリングメソッドの第二引数に、取得レコードを渡しています 。

    3. 更新処理成功時に、登録画面に画面遷移しています。

    • 画面遷移をさせるためには、以下メソッドを利用します。
    return $app->redirect($app->url([ルーティング名]));
    
    • $appからredirectメソッドの引数にurlを指定すると、指定URLに遷移が行われます。
    • redirectメソッドの前には必ずreturnを記述してください。
    • もう一つのメソッドとしてurlメソッドが利用されています。
    • これは、Twig内で利用してたものと同様で、ルーティング名を引数として渡すと、該当URLが返却されます。

編集用Twigの定義

  • コントローラーメソッドのレンダリングで呼び出しているTwigを作成します。

ファイルのコピーと作成

  • crud_top.twigをコピー・リネームします

  • /src/Eccube/Resource/template/default/Tutorial/crud_top.twig

    1. リネームしたcrud_edit.twigに以下を追記しています。
    • crud_edit.twig
<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_12/crud_edit_before.twig"></script>
  • 上記を説明します。
  1. 基本的な内容は、crud_top.twigと同様です。

    • 違いは、一覧表示がない事です。
  2. Formのaction属性値編集画面に遷移する様に設定しています。

    • urlメソッド利用していますが、第二引数にはURLパラメーターを設定しています。
    • URLパラメーター値を渡すため、コントローラーから受け取ったレコードのオブジェクトのidを書き出しています。

レポジトリに条件検索メソッドを追加する

  • idをもとにdtb_crudからレコードを取得するメソッドを追記します。

ファイルの修正

  • CrudRepository.phpを開きます。
    • /src/Eccube/Repository/CrudRepository.php

      1. getAllDataSortByUpdateDateメソッドの下に以下の様にメソッドを追記します。
      • CrudRepository.php
<script src="http://gist-it.appspot.com/https://github.com/EC-CUBE/ec-cube.github.io/blob/master/Source/tutorial_12/CrudRepository_add_edit.php"></script>
  • 上記説明を行います。
  1. メソッドの引数として取得レコードのidを定義します。

    • ここで受け取るidURLパラメーターから渡されてきた編集対象レコードidです
    • idデフォルト値として、nullを指定しています。
    • nullの指定エラーハンドリングのために設定しています。
  2. 引数のデフォルト値を利用して、エラーハンドリングを行なっています。

    • コントローラー側で判断するため、falseを返却するだけとしています。
  3. 次にクエリビルダーでSQLを構築しています。

    • 今回新たに記述されている内容として、以下があります
    ->where('dc.id = :Id')
    ->setParameter('Id', $id);
    
    • 上記は通常のSQLのwhere構文と同義です。
    • カラムに対して条件判定を行なっています。
    • 今回は、dtb_crudのカラムidに対して、引数のidが同じレコードを取得する条件を記述しています。
    • またクエリビルダーの条件指定では、プリペアドステートメントが用いられており、以下の用に記述します。
    ->where('[エイリアス + カラム名] = :[任意の名称]')
    ->setParameter('[where句で設定した任意の名称]', [条件とする値(変数でも可)]);
    
    • もうひとつ新たな記述があります。
    return $qb->getQuery()->getSingleResult();
    
    • 上記ですが、以前の章で説明した通りDQLでの結果取得には複数のメソッドが用意されています。
    • 今回のメソッド「getSingleResult()」では、レコード取得時は、**該当レコードオブジェクトのみ(オブジェクト配列ではない)**が返却されます。
    • またレコードが見つからない際は、NoResultExceptionがスローされます。
    • そのために try ~ catch を用い、レコードがない際は、falseを返却する様にしています。

表示内容の確認

  • 最後に確認のためにブラウザにアクセスしてみましょう。

初期画面

  1. ブラウザのURLに「http://[ドメイン + インストールディレクトリ]/tutorial/crud」を入力してください。

  2. 登録画面の一覧リストに「編集ボタン」が表示されています。

    • レコードは必ず一件以上ある状態で確認してください。

一覧画面編集ボタン


編集画面の表示

  1. 初期画面で表示されている、「編集ボタン」をクリックしてください。

  2. 編集画面が表示され、フォームに値が保持されています。

  3. フォーム項目値を適当に編集してみてください。


編集画面トップ


登録画面へ遷移

  1. 「編集を確定するボタン」をクリックすると、登録画面に画面遷移します。

  2. 該当レコードに編集内容が反映されています。


編集完了


本章で学んだ事

  1. ルーティングでURLパラメーターを渡す方法を説明しました。
  2. ルーティングでURLパラメーターのバリデーションを行う方法を説明しました。
  3. Twigのurl関数の第二引数の設定でURLパラメーター付きリンクが作成出来る事を説明しました。
  4. 編集処理用のコントローラーメソッドを追記しました。
  5. 編集処理用コントローラーメソッドの引数で、URLパラメーターを取得する方法を説明しました。
  6. ridirectの方法を説明しました。
  7. コントローラーでもurl関数が利用出来る事を説明しました。
  8. テーブルから取得したデータモデルオブジェクトをフォームビルダーと紐付ける方法を説明しました。
  9. フォームビルダーで動的にフォーム項目を変更できる事を説明しました。
  10. フォーム項目のオプション値にattrでhtmlオプション属性を設定出来る事を説明しました。
  11. レポジトリの登録処理にプライマリーキーがセットされたデーターモデルオブジェクトを渡すだけで自動で更新処理が行われる事を説明しました。
  12. 編集画面用のTwigを作成しました。
  13. レポジトリに追加したメソッドでwhere句を用いたDQLの構築方法を説明しました。
  14. DQLの結果取得にgetSingleResultを用いました。
  15. getSingleResultでは、データーモデルオブジェクト単体が返却される事を説明しました。
  16. getSingleResultでは、該当レコードが存在しない場合NoResultExceptionがスローされる事を説明しました。
  17. クエリビルダーのwhere句ではプリアドステートメントが用いられていることを説明しました。