ヘルニアクソ野郎エンジニアblog

~ヘルニアでHell near~

PHPとMySQLでECサイトをフルスクラッチ開発!⑧商品修正画面の作成

calendar

前回、商品一覧画面とページ遷移画面を作成しました。↓

今回は商品情報の修正画面を作成します。

商品修正表

☆マークがついている部分がすでに完成したページになります。

今回は、雲マークのpro_edit.php pro_edit_check.php pro_edit_done.php を作成したいと思います。

 

スポンサーリンク

商品情報修正入力画面

pro_edit.php

productフォルダ内にpro_edit.phpを作成します。

このページは、pro_branch.phpより受け取った商品コードをもとに、カテゴリー、商品名、価格、画像、商品の紹介文、の修正情報を入力する画面になります。pro_list.phpから任意の商品の修正ボタンを押せば、下のような商品の詳細が反映されている画面に飛ぶはずです。各項目を変更できるように、textboxに値が入っています。

商品修正画面

スタッフ修正画面や今までの応用になりますので、ポイントを絞って説明します。

まず、$_GET[“code”] でpro_branch.phpからget送信されたスタッフコードを受け取ります。このデータはテキスト入力されたものではないので、クロスサイトスクリプティングの対策は施しません。

続いて、商品情報を表示させるためにデータベース接続します。

SQLのSELECT文で受け取った商品コードをもとに、選択した商品情報のレコードを取り出します。

その後if文がありますが、ここは「画像の有無」によって実行する内容を記述しています。というのも、今回作成している商品管理システムでは、画像は「無し」でも登録が可能であるからです。

画像が無しの場合、取り出した空の情報をprintすると、空白にはならず小さな四角いマークが表示されてしまします。(画像が参照できない時に出るマーク)

これを防ぐために、emptyで引数にレコードのgazouカラムを選択し、もし空(画像がない)の場合は「””」、つまり空白を新たに作成した変数$disp_gazouに代入しています。こうすることによって、$disp_gazouをprintさせれば空白の状態になります。

逆に、画像がある場合は表示させたいので、elseの部分で$disp_gazouにimg srcの格納先を代入しておきます。これで後はprintさせれば画像が表示されます。

最後にformタグ(画像データも扱うのでenctype..も必要です)で各種textboxを作成し、valueで現在の情報を指定しておけば、デフォルトその情報が反映されます。

変更した内容はsubmitボタンで次ページのpro_edit_check.phpにpost送信されます。

また、商品codeと変更前の画像をhiddenでpostします。

変更前の画像をpostするのは、後のページで削除するかどうか判断するため必要だからです。

それでは、各種内容を適当に変更しておきます。

 

修正入力チェック画面

pro_edit_check.php

productフォルダ内にpro_edit_check.phpを作成します。

こちらはpro_add_check.phpとほぼ同じ内容になります。

このページでは入力された内容に、空白や半角数字以外の入力、画像のサイズオーバーがあればそのコメントと前のページに戻るように誘導し、問題なければ修正しますか?のコメントを表示させてsubmitで値をpostさせています。

($_FILESやpreg_match正規表現、で画像のアップロード、mb_strlenについては以前に説明したので割愛します。)

pro_add_check.phpから追加になっている点は、画像のチェック部分です。画像のサイズが0より大きく1MBより小さい、つまりprp_edit.phpで画像が選択されていてアップロード可能な場合はgazouフォルダにアップロードさせて、そのまま表示させます。

続いてのif文では、新しい画像を選択していない空の場合、かつ古い画像が空でない場合、つまり画像の変更を行っていない場合は変更前の画像であるold_gazouをprintして表示させています。

OKボタンを押せば、hiddenでname,code,passの情報がstaff_edit_done.phpにpost送信されます。

後はformタグのhiddenで商品の値を全てpostします。

今回、全ての項目を変更してみようと思います。

商品チェック

修正内容をデータベースに登録する画面

pro_edit_done.php

productフォルダ内にpro_edit_done.phpを作成します。

このページでは、商品の修正された情報をデータベースへ上書き登録するだけではなく、「画像を更新した場合はgazouフォルダから古い画像を消去する」記述も入れています。

postでデータを受け取った後、最初のif文では今回登録した画像が空、かつ以前の画像が有り、の場合は$gazouに以前の画像を代入しています。つまり、商品修正の際に画像は変更していない場合に真となり実行されるプログラムなります。

続くif文は、以前の画像が有り、かつ今回登録した画像と以前の画像が異なる場合、「gazouフォルダにある古い画像を消去する」プログラムです。つまり商品の画像を変更すれば、過去の画像は必要ないので消去するプログラムです。

ただし、そもそも過去の画像が存在しなければ消す必要はないので、その辺りも加味した記述になっています。

フォルダにアップロードしている画像を消去する記述は、

unlink(“./gazou/”.$pro_gazou_old); の部分になります。

unlinkは消去する命令、引数の(“./gazou/”.$pro_gazou_old); は、消去したいデータの格納先になります。

その後はデータベースに接続、UPDATEのSQL文でテーブルの情報を更新します。

商品修正実行

最後に、データベースのテーブルと、gazouフォルダを確認してみましょう。データベースがちゃんと入力した通り変更されていて、画像を更新した場合は、gazouフォルダから過去の画像が消去されていればOKです。(過去画像が有る場合)

商品テーブル更新

 

画像更新

次回は、商品情報の削除(テーブルから削除)のページを作成して、商品管理画面を完成させたいと思います。