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

~ヘルニアでHell near~

PHPとMySQLでECサイトをフルスクラッチ開発!⑥商品管理のデータベース、追加のPHPファイル作成

calendar

reload

PHPとMySQLでECサイトをフルスクラッチ開発!⑥商品管理のデータベース、追加のPHPファイル作成

前回、スタッフ削除画面を作成し、スタッフ管理画面が完成しました。↓

 

今回より、商品管理ページの作成にはいります。

基本的にはスタッフ管理ページの応用でPHPファイルが作れますが、新たに「画像」データの登録がありますので、データベースへのファイルのアップロードや上書き、削除の仕組みが学べるかと思います。また、価格を半角数字のみ受け付ける「正規表現」も登場します。

それでは初めに、商品管理画面の作成の流れから説明しようと思います。

スポンサーリンク

商品登録画面作成の流れ

商品追加表

図のような流れの登録画面を作成します。スタッフ管理画面の構図とほぼ同じです。

星マークのログインページは作成済みですので、とりあえず今回は、雲マークの商品追加ページとなるpro_add.php~pro_add_done.phpまでを作成します。

まだdbに商品登録のテーブルがないので、とりあえずテーブルから作成します。

テーブルの作成

それでは商品の登録テーブルを作成します。

ここに登録された商品が、最終的には公開するECサイトに表示されるようになります。

XAMPPのMySQLを立ち上げて、データベース「shop」配下に商品管理のテーブルを作成します。

テーブル名は「mst_product」とします。

商品テーブル

カラムは6とし、下図のように「code」「category」「name」「price」「gazou」「explanation」のカラム名、データ型、AI(AUTO_INCREMENT)を設定します。

カラム名データ型その他
codeintAI
categoryvarchar 値10
namevarchar 値30
priceint
gazouvarchar 値30
explanationvarchar 値100

codeにプライマリkeyを設定、これが商品コードになります。categoryは商品のカテゴリ、nameは商品名、priceは商品の価格、gazouは商品のイメージ画像、explanationは商品の紹介文を入れることとします。

PHPファイルの作成場所

スタッフ管理画面のフォルダと同じく、xamppのApacheのドキュメントルートhtdocs配下に「product」フォルダを作成します。

商品管理ページは「product」フォルダ配下にどんどんphpファイルを作成していきます。

あと、productフォルダ内に、「gazou」というフォルダも作成しておいてください。これは画像データのアップロード先として使用します。

それでは、今回はまず「pro_add.php」~「pro_add_done.php」のファイルを作成します。

追加商品情報入力画面

pro_add.php

productフォルダに、pro_add.phpを作成します。

pro_add.phpにアクセスすると下のような画面が表示されます。

※まだログインのページからつながっていないので、ログイン確認のsession記述はコメントアウトしておくといいでしょう。このあと作成する2つのページも、コメントアウトしておいてください。

商品追加入力

追加する商品のカテゴリ、商品名、価格、画像、商品の説明文、を入力するページになります。

formタグで各種入力欄を表示させますが、今回は「画像」のアップロードボタンを加えているので、formタグに新しい記述が増えています。

enctype=”multipart/form-data”> 

の部分ですね。これを記述しなければ、submitボタンを押した時に画像のデータがpost送信されません。そしてformタグの配下に、

<input type=”file” name=”gazou”> を記述しています、これが「ファイルを選択」のボタンになります。

したがって、画像などのデータをアップロードする際には、この2つの記述がformタグで必要になります。

あと、textareaタグですが、これはコメントなどの比較的長い文章を入力したい時に使用します。デフォルトのボックスサイズが小さいので、今回はcssを埋め込んで広げていますが、外部で読み込ませても問題ありません。

最後に、カテゴリのプルダウンメニューですが、こちらは関数が入っているcommonファイルをインクルードして、新しく作成したpulldown_cate();の関数を実行させています。今後もプルダウンメニューがちょくちょく出てきますので、関数にしておくと便利です。それでは、commonファイルに下記コードを追加してください。

関数名はpulldown_cate() とします。引数は空白としているので、関数名()だけで登録しているプルダウンメニューが表示されます。

プルダウンメニューは <serect>タグで<option>タグを囲むことで表示されます。

valueは値で、optionタグの間にある文字は、そのまま画面に表示される文字列です。

したがって、selectのnameがcateになっているので、submitを押せばプルダウンで選択しているvalueがpostで送信されます。

今回は5つのカテゴリを作成しました。

商品入力チェック(半角数字正規表現チェック)

pro_add_check.php

productフォルダに、pro_add_check.phpを作成します。

このページでは、商品名、価格、コメントが入力されているか、価格が半角数字であるか、コメントが100文字以内であるか、アップロードしたい画像のサイズ(容量)が1MB以下であるか、をチェックし、問題なければ次ページへ内容をpost送信するページです。

まず、お馴染みのsanitize関数でpostのデータをエスケープします。

画像のデータは、$_FILES[] で受け取れます。そしてこの$_FILSE[]には、データだけでは無く、画像サイズ(容量)、画像データの名前、送り元のフォルダ名、等が格納されています。

はじめのif文で、商品の名前が入力されているかの確認をしています。

続いてのif文ですが、これは「正規表現」と呼ばれるもので、今回は「半角数字」が入力されているかの確認をしています。正規表現されていれば1となり、NGなら0、となります。

記述の詳細については、preg_match(正規表現、正規表現したい値)となります。したがって、$priceが半角数字で入力されているかの確認になります。上のコードでは¥標記が\になっていますが、どちらでも問題はありません。¥に直すと、半角数字の正規表現は、

“/¥A[0-9]+¥z/” になります。

続くif文は、画像アップロードされていれば、サイズが1MB以下であるかの確認をしています。1MB以上なら、NGとなるようになっています。

前途したように、$_FILES[]には多くの情報が入っているので、画像のサイズを確認したい場合は、$_FILES[“size”]とすれば分かります。今回は$gazouに代入しているので、$gazou[“size”]ですね。

その後、画像データがあり、かつ1MB以下ならば、gazouフォルダへデータをアップロードする記述に入ります。

move_uploaded_file($gazou[“tmp_name”],”./gazou/”.$gazou[“name”]); の部分ですね。

少しややこしいですが、move_uploaded_file がアップロードの命令文で、引数には、

(元の保存場所、アップロード先、ファイル名)を指定しなければなりません。したがって、

($gazou[“tmp_name”],(元の保存場所)”./gazou/”(保存先).$gazou[“name”](ファイル名)); となります。

アップロードが出来れば、そのまま画像を表示させたいので、htmlのimg src で表示させます。

prinr “<img src=’./gazou/”.$gazou[‘name’].”‘>”;

./は、同じ階層を表しています。このように画像のやり取りの記述は、ドットやクオーテーションにクセがあります。少しややこしいですが、間違えると正しくプログラムが動きません。

続いて、コメントが入力されているかを確認し、コメントがあれば100文字以下であるか、を確認しています。

mb_strlen($comments) > 100 の部分ですね。

mb_strlenは、引数にいれた値の文字列の長さを計算します。

そして、名前の入力、価格の正規表現、画像のサイズ、コメントの入力をチェックし、一つでもNGがあれば前のページへ戻るように誘導しています。

全てクリアできれば、formタグで入力した情報をhiddenで次ページのpro_add_done.phpへpost送信します。

画像については、無しでも登録できるようになっています。

長くなりましたが、pro_add.phpで適当に商品を入力してみて、正規表現でちゃんと半角以外はNGなるか、コメントは100文字以上でNGになるか、など、試してみて下さい。

OKなら、下のような感じになります。

商品追加チェック

商品をデータベースに追加

pro_add_done.php

productフォルダに、pro_add_done.phpを作成します。

ここまでくれば簡単ですね。

postデータをエスケープして受け取ります。

データベース接続後、SQLのINSERT文で各カラムの値を登録し、実行するだけです。

登録できれば、追加した旨のコメントを表示させて、商品一覧ページへ誘導します。

次回、商品一覧ページを作成しますので、今の段階で各項目ごとに2商品づつ、登録しておいてください。

追加後、データベースに登録されているかも確認しておきます。

商品追加DB