CakeShop/イテレーション/3-A3 商品をカートに入れる

3-A3 商品をカートに入れる

前回の反省から、画面実装の見積もりをきっちり行って進めることにする。
期間中は、別案件の作業も必要なため、作業ボリュームが少なくなってしまう。

カテゴリ構造の設計

• 商品をカテゴリ分けして表示するためのテーブル構造を設計する。
  CakeShop/テーブル設計
• 商品は、複数カテゴリに属することができる。
• カテゴリは、トップカテゴリとサブカテゴリとトピックスカテゴリの３種類が存在する。
• トップカテゴリは、ショップのメインとなるカテゴリ紹介ページとして使う。
• サブカテゴリは、商品の一覧を表示するページとして使う。
• トピックスカテゴリは、決められた順番で商品を表示する時に使用し、主におススメ商品や人気商品などのランキング表示に用いる。
• ER図を作成した。
  DBDesigner 4 日本語化サイト
  を参考にDBDesigner4をインストールした。
  下記の設定を変更した
  • フォントをMSゴシック 9
  • モデル設定で、「参照元テーブルに外部キーカラムのインデックスを。。。」と「外部キーカラム名の接頭辞に参照先テーブル名を追記」にチェックを入れる。
• 作業時間＝2時間

サブカテゴリページ設計

• サブカテゴリページは、商品一覧を表示する。
• 商品の並び替えを指定することができる。
• 商品の表示モード（一覧／サムネイル）を指定することができる。
• 商品の１ページ表示件数を指定することができる。
• １ページに表示しきれない場合は、ページ切り替えができる。
• サブカテゴリの中にサブカテゴリが存在する場合は、配下のサブカテゴリをメニューで表示し、商品一覧には配下のサブカテゴリ全ての商品を一覧表示する。
• CakeShop/画面設計/商品一覧(CategoryItems)に画面設計内容を書く。
• 作業時間＝45分

ツリー形式のデータ表示

• 下記のページを参考に、Treeヘルパーを作る。
  Threaded Lists | The Bakery, Everything CakePHP : Articles

  <?php 
  class TreeHelper extends Helper
  {
    var $tab = "  ";
    
    function show($name, $data)
    {
      list($modelName, $fieldName) = explode('/', $name);
      $output = $this->list_element($data, $modelName, $fieldName, 0);
      
      return $this->output($output);
    }
    
    function list_element($data, $modelName, $fieldName, $level)
    {
      $tabs = "\n" . str_repeat($this->tab, $level * 2);
      $li_tabs = $tabs . $this->tab;
      
      $output = $tabs. "<ul>";
      foreach ($data as $key=>$val)
      {
        $output .= $li_tabs . "<li>".$val[$modelName][$fieldName];
        if(isset($val['children'][0]))
        {
          $output .= $this->list_element($val['children'], $modelName, $fieldName, $level+1);
          $output .= $li_tabs . "</li>";
        }
        else
        {
          $output .= "</li>";
        }
      }
      $output .= $tabs . "</ul>";
      
      return $output;
    }
  }
  ?>

• コントローラ側で、ツリーデータを取得してセットする。

  $this->set('data', $this->Section->findAllThreaded(null, null, 'name'));

• ビューでツリーを表示できる。

  <?php echo $tree->show('Section/name', $data); ?>

カテゴリ管理ページ実装

• decorateで下記のテーブルのCRUDページを用意する。
  • Categories
  • CategoryItems
• カテゴリテーブルでは、親カテゴリIDを持っているので、管理画面で設定しやすくするために、カテゴリ名のプルダウンを表示するようにした。
  categories_controller.phpのadd()メソッドの先頭部分に下記を追加

  $sectionArray = $this->Category->generateList(null, 'id ASC');
  $this->set('sectionArray', $sectionArray);

  これで、カテゴリリストのidとnameの連想配列を取得できる。
  それをセットして、ビュー側でプルダウン表示させればOK！

  <?php echo $html->selectTag('Category/parent_id', $sectionArray);?> 

  同様に、edhit()メソッドでも同じように処理する。
  ただし、この時に親カテゴリIDが自カテゴリIDとならないように条件を加える。

  $sectionArray = $this->Category->generateList("id != $id", 'id ASC');
  $this->set('sectionArray', $sectionArray); 

  これで、自カテゴリID以外の連想配列が返ってくる。
• 次にカテゴリ商品テーブルも同様に、カテゴリIDと商品IDをプルダウンで選択できるようにする。
• しかし、categoryitems_controller.phpのデフォルトで使えるモデルクラスは、CategoryItemクラスのみなので、CategoryクラスとItemクラスを使う場合には、$uses変数に設定する必要がある。

  var $uses = array('Categoryitem', 'Category', 'Item');

  このように設定すると、$this->Categoryとか$this->Itemとかにアクセスできるようになった。
• CategoryItemsテーブルは、カテゴリと商品の関連付けを管理するためのテーブルなので、hasAndBelongsToMany(HABTM)のアソシエーションと思ったのだが、実がCategoryItemsテーブルに表示順などのフィールドを後で持たせようとすると、JOINテーブルではなくなってしまう。
  そこで、CategoryItemsテーブルからCategoriesテーブルとItemsテーブルをbelongsTo(〜に属している)の関係にして管理することにする。
• Categoryitemモデルクラスに下記のアソシエーション設定を入れる。

  var $belongsTo = array(
    'Category' =>
      array('className' => 'Category',
        'conditions' => '',
        'order' => '',
        'foreignKey' => 'id'
      ),
  
    'Item' =>
      array('className' => 'Item',
        'conditions' => '',
        'order' => '',
        'foreignKey' => 'id'
      ),
    );

  すると、SQLはCategoryとItemテーブルがJOINされて取得できる。
• categoryitems/index.thtmlのテンプレートを下記のように修正する。

  <td>&nbsp;<?php echo $categoryitem['Categoryitem']['category_id'] ?>：<?php echo $categoryitem['Category']['name'] ?></td>
  <td>&nbsp;<?php echo $categoryitem['Categoryitem']['item_id'] ?>：<?php echo $categoryitem['Item']['name'] ?></td>

  これで、管理画面にはID:名前のように表示されるので見やすくなった。
  同様にview.thtmlも修正する。

サブカテゴリページ実装

• カテゴリ情報を取得して、商品一覧情報を表示する部分のみ完成。
• ページング機能などは、未実装

トップカテゴリページ

• トップカテゴリページでは、配下のサブカテゴリをどのように見せるかを決めることができる。
• 左右のメニュー領域と中央にウィジェット(Widget)を並べて表示する。
• どのウィジェットを表示するかは、自由に設定できる。
• 固定的に表示するもの（例えばお買いもの方法についての説明ウィジェットなど）は、予めテンプレートで設定されている
• 未着手

トピックスカテゴリ

• お気に入り商品や人気商品などのカテゴリとして用いる。
• ウィジェットとしてトップカテゴリで表示する。
• トピックスカテゴリには、商品を予め指定しておく方法と、売れ筋商品のように注文状況によって自動的にランキング表示する方法との２パターンがある。
• トピックスカテゴリの全てを見るを選択された場合の挙動として２パターンある。
  • 別のサブカテゴリの商品一覧を表示する場合
  • トピックスカテゴリ内の商品を並び替え指定できないようにして表示する場合
• 未着手

ウィジェットの管理

• ウィジェットは左右メニュー領域や中央のどの場所に表示するか自由に設定できる。
• ウィジェットのデザイン（テンプレート）を切り替えることができる。
• ウィジェットには、トピックスカテゴリとサブカテゴリリストの2種類を用意しておく。
• 自分でウィジェットテンプレートを個別に作ることもできる。
• 未着手

ふりかえり

Keep（よかったこと）

• 管理ページの作り方がわかってきた。
• アソシエーションの仕組みや使い方がわかってきた。

Problem（わるかったこと）

• また、また予定していた画面実装ができなかった。
• 作業時間のトラッキングが難しい。

Try（次回挑戦）

• フロントの画面実装の前に管理画面の実装時間を考慮すること。
• 作業時間を測るツールを探す。

イテレーション評価・得点

今回のイテレーションでは、実際の作業にとりかかれる時間が少なすぎたのが問題だった。しかし、他の作業を行っていてもPHPの知識がついてきたので、よかったと思う。60点

関連ページ

コメント