基礎から応用まで ~EC-CUBEカスタマイズの全て~ STEP2.1:会員登録・編集カスタマイズ 【アイピーロジック株式会社】

小髙 知彦

EC-CUBEの開発を始めたい方必見!
当社で行っているEC-CUBE研修を不定期で紹介させていただきます。

今回は「STEP2.1:会員登録・編集カスタマイズ」を紹介します。

基礎から応用まで ~EC-CUBEカスタマイズの全て~ STEP1.3:フロント商品詳細カスタマイズ
https://ecnomikata.com/column/9410/

基礎から応用まで ~EC-CUBEカスタマイズの全て~ STEP1.2:商品検索カスタマイズ
https://ecnomikata.com/column/8974/

基礎から応用まで ~EC-CUBEカスタマイズの全て~ STEP1.1:商品登録・編集カスタマイズ
https://ecnomikata.com/column/8959/

基礎から応用まで ~EC-CUBEカスタマイズの全て~ 序章
https://ecnomikata.com/column/8635/

課題紹介

研修課題は以下になります。

【課題】
管理画面の会員登録画面に全てのinput項目(text,select,radio,checkbox)を追加し、登録・更新できるようにする。

【追加項目】
text - ニックネーム
select - 住まい(アパート、マンション、戸建て)
radio - ダイレクトメール(希望する、希望しない)
check - 趣味(スポーツ、アウトドア、グルメ、読書、音楽鑑賞、車、ゲーム)

会員情報の項目追加を行う研修内容となっています。内容は「STEP1.1:商品登録・編集カスタマイズ」と大きく変わることはありません。復習を兼ねて学習してみましょう。


ポイント① 選択項目はマスターデータで管理する

EC-CUBEでは、select、radio、checkboxの選択肢はマスターデータで管理しています。新しい項目となりますので、マスターテーブルの追加が必要となります。MySQLに新しいマスターテーブルを作成しましょう。

▼住まいマスター - mtb_house.sql

▼ダイレクトメールマスター - mtb_direct_mail.sql

▼趣味マスター - mtb_hobby.sql


テーブルの構成は「ID」「名前」「表示順」の3項目です。マスターテーブルの作成が完了すると、管理画面「システム設定>マスターデータ管理」よりデータの追加が可能となります。早速データを登録してみましょう。

▼マスターデータ管理画面


次にPHPからマスターデータを取得するプログラムを書いてみましょう。会員登録のプログラムは data/class/pages/admin/customer/LC_Page_Admin_Customer_Edit.php になります。エディタ等で開き、init関数のプログラムを見て下さい。以下のように書かれていると思います。
※init処理のみを抜粋しています。

▼会員登録PHP - LC_Page_Admin_Customer_Edit.php


注目すべきは、上記13~20行目になります。SC_DB_MasterDataクラスはマスターデータを操作するための汎用的なクラスになります。インスタンス化し、getMasterData関数の引数にマスターテーブル名を設定すると、マスターデータ内の値が配列で取得できます。取得後は会員登録ページに表示が必要なため、変数はクラス変数として定義してください。それでは、今回追加するマスターデータを取得してみましょう。下記22~25行目で追加項目のマスターデータを取得しています。

▼会員登録PHP - LC_Page_Admin_Customer_Edit.php


※注意点※
マスターデータを登録する際は、必ず「システム設定>マスターデータ管理」より登録を行って下さい。上記のgetMasterData関数は、マスターデータをdata/cache/マスター名.serial ファイルより取得しています。「システム設定>マスターデータ管理」からマスターデータを編集すると、必ずserialファイルも上書きされますので、SQLで直接編集することは避けたほうがよいです。

次に、取得したマスターデータを管理画面で表示させてみましょう。会員登録画面のSmartyテンプレートは、data/Smarty/templates/admin/customer/edit.tpl ファイルになります。任意の位置に、以下のプログラムを追加して下さい。

▼会員登録画面テンプレート - edit.tpl


上記8~33行目までが選択項目になります。select項目のoption値は、上記14行目のように「html_options」関数を用いて定義します。options属性には、先ほどPHPでマスターデータを取得したクラス変数を定義します。radioやcheckboxも同様に、「html_radios」「html_checkboxes」関数を用いて定義します。実装後に下記の項目が追加されていれば成功です。
(select項目の選択肢も設定されていることを確認して下さい。)

▼会員登録画面(抜粋)



ポイント② Formクラスへの項目追加

管理項目を追加した場合、Formクラスへの項目追加が必要となります。Formクラスへの項目追加を行っているプログラムは、 data/class/helper/SC_Helper_Customer.php になります。今回は、sfCustomerRegisterParam関数に項目を追加します。

▼会員情報の登録・編集・検索ヘルパークラス - SC_Helper_Customer.php


$objFormParamは、data/class/SC_FormParam.php をインスタンス化した変数です。SC_FormParamクラスは、汎用的なFormクラスです。addParam関数で項目名、文字列長、全角/半角変換ルール、エラーチェック内容を定義し、setParam関数でPOST値の設定、convParam関数で文字列の全角/半角変換、checkError関数でエラーチェックを行います。画面から入力されたPOST値は、必ずSC_FormParamクラスを経由してデータ処理を行います。

追加項目は、上記28~32行目に定義しています。文字列長の「INT_LEN」「STEXT_LEN」は、「システム設定>パラメーター設定」で定義されている定数を用いています。全角/半角変換の「KVa」「n」は、mb_convert_kana関数の変換オプションになります。エラーチェックの「EXIST_CHECK」「NUM_CHECK」などは、data/class/SC_CheckError.php に関数が定義されていますので、どのような処理を行っているか確認してください。

【参考】mb_convert_kana - Manual - PHP
http://php.net/manual/ja/function.mb-convert-kana.php

ポイント③ 会員データ登録、更新

画面項目の追加を行いましたので、MySQLのテーブルにも追加が必要となります。以下、追加内容になります。

▼会員情報テーブル - dtb_customer.sql

▼趣味テーブル - dtb_hobby.sql


dtb_customerテーブルは、会員情報を格納するテーブルになります。text、select、radio項目はdtb_customerテーブルにカラムを追加します。checkbox項目については、複数選択が可能であるため、dtb_hobbyテーブルを新設し、dtb_customerと「n:1」の関係になるようにしています。

テーブルの設定が完了したら、まず「登録画面 -> 確認画面」までの遷移を実装しましょう。登録画面で「確認ページへ」ボタンを押下すると、LC_Page_Admin_Customer_Edit.php の action関数に大きなswitch文があると思いますが、$mode変数には「confirm」が設定されます。confirmモードのプログラム中に遷移先である確認画面のSmartyテンプレートを下記のように定義しています。

$this->tpl_mainpage = 'customer/edit_confirm.tpl';

よって、確認画面のSmartyテンプレートが、data/Smarty/templates/admin/customer/edit_confirm.tpl であることが理解できると思います。確認画面の役割は、登録画面で入力および選択をしたデータの表示になります。任意の位置に、以下のプログラムを追加して下さい。

▼会員登録確認画面テンプレート - edit_confirm.tpl


checkboxは複数選択が可能なため、foreachでループ処理を行っています。表示のみですので、特に難しいことはありませんが、各項目の変数の後ろに |h が付いていると思います。これは、サニタイジング(エスケープ)と言われ、クロスサイトスクリプティング(XSS)への対策となります。詳細は以下を参照して下さい。

【参考】サニタイジング(エスケープ)とは?HTML特殊文字を無害化しない事による脅威と対策のまとめ
http://viral-community.com/blog/html-sanitizing-escape-1859/

実装後、登録画面から確認画面に遷移し、登録画面で設定したデータが確認画面で表示確認できればOKです。

▼会員登録確認画面(抜粋)


確認画面までの遷移が確認できましたら、データベースへのデータ登録の実装を行いましょう。確認画面から完了画面までの遷移時には、$mode変数には「complete」が設定されます。データ登録はcompleteモードから呼び出される lfRegistData関数で行われます。

▼会員登録PHP - LC_Page_Admin_Customer_Edit.php


上記をパッと見る限り、STEP1の商品登録時のような処理が行われていませんが、上記24行目で SC_Helper_Customer.php の sfEditCustomerData関数が呼び出されています。会員登録処理は、sfEditCustomerData関数で行われています。

▼会員情報の登録・編集・検索ヘルパークラス - SC_Helper_Customer.php


追記箇所は、上記64~66行目および85~86行目となります。64~66行目は、$arrDataという連想配列にcheckboxの趣味データも格納されていますが、checkboxの趣味データはdtb_customerテーブルではなく、dtb_hobbyテーブルに登録されるデータであるため、$arrHobbyという配列に趣味データを退避し、$arrData変数から削除しています。$arrDataに趣味データが残っていると、71行目や82行目で行われるdtb_customerテーブルへの登録・更新時にエラーとなります。85~86行目は、checkboxの趣味データを登録するための関数を呼び出しています。同クラスにsetHobby関数を追加しましたので、以下を確認してください。

▼会員情報の登録・編集・検索ヘルパークラス - SC_Helper_Customer.php


dtb_hobbyテーブルに対し、既存レコードのdelete後、新規レコードをinsertしています。SC_Queryクラスは、SQLの構築および実行を行ってくれる汎用クラスです。delete関数の引数には「テーブル名」「where条件」「プレースホルダへのバインド値」を設定し、insert関数の引数には「テーブル名」「カラム名と値の連想配列」を設定し実行します。

会員の登録が完了しましたら、画面およびデータベースから登録が成功しているか確認して下さい。


ポイント④ 戻る処理

確認画面から登録画面に戻った際に、以前に入力および選択したデータが保持されていなければなりません。そのため、edit_confirm.tpl の上部にhidden項目を設定している部分があると思いますが、少し追加が必要になります。

▼会員登録確認画面テンプレート - edit_confirm.tpl


checkbox項目は複数選択が可能なため、配列でデータを保持しています。そのままhiddenで表示すると、value値が「array」となってしまうため、配列の要素を1つずつhidden項目として設定しています。


ポイント⑤ 会員一覧から編集モードで遷移

最後になりますが、会員一覧画面から「編集」リンクを押下し、会員登録画面に遷移する際に、既存の会員のデータを検索し、編集画面を初期表示します。追加した項目についても検索する必要がありますので、プログラムの修正が必要になります。会員一覧から「編集」リンクを押下した場合、$mode変数には「edit_search」が設定されます。edit_serarchモード内にSC_Helper_Customer.php の sfGetCustomerData関数が呼び出されていますが、会員の検索処理は、この関数内で行われています。

▼会員情報の登録・編集・検索ヘルパークラス - SC_Helper_Customer.php


上記8行目でSELECT句に「*」を指定していますので、text、select、radio項目については修正の必要がありません。checkbox項目はテーブルが異なりますので、上記27~29行目で検索を行っています。検索については、同クラスにgetHobby関数を追加しましたので、下記をご参照下さい。

▼会員情報の登録・編集・検索ヘルパークラス - SC_Helper_Customer.php


会員IDをキーに、趣味IDを取得し返却しています。複数の会員を検索する作りになっていますが、特にそのようなことを考える必要がない場合は、1会員の検索に対応した作りでも全く問題ありません。


次回

以上で「STEP2.1:会員登録・編集カスタマイズ」は終了となります。
次回は「STEP2.2:会員検索カスタマイズ」を紹介させていただきます。


著者

小髙 知彦 (Tomohiko Kodaka)

2000年、システムエンジニアとしてSI企業に新卒入社。オープン系、Web系における大小様々なシステム開発に携わった後、新人教育専任者として約200名のエンジニア育成に勤しむ。退社後、フリーエンジニアを経て、2013年にアイピーロジックに入社。ECサイト構築におけるプロジェクトマネージャー兼EC-CUBEエンジニアの育成責任者としても活躍中。

アイピーロジック株式会社:http://www.iplogic.co.jp/