PHPとMySQLでECサイトをフルスクラッチ開発！⑦商品一覧、ページ遷移先指定画面の作成

前回、商品追加画面の作成をしました。↓

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

https://denkenmusic.com/phpとmysqlでecサイトをフルスクラッチ開発！⑥商品管理

前回、スタッフ削除画面を作成し、スタッフ管理画面が完成しました。↓　今回より、商品管理ページの作成にはいります。基本的にはスタッフ管理ページの応用でPHPファイルが作れますが、新たに「画像」データの登録がありますので、データベースへのファイルのアップロードや上書き、削除の仕組みが学べるかと思います。また、価格を半角数字のみ受け付ける「正規表現」も登場します。それでは初めに、商品管理画面の作成の流れから説明しようと思います。商品登録画面作成の流れ図のような流れの登録画面を作成します。スタッフ管理画...

今回は、データベースを参照し、登録商品の一覧表示させる画面と、そこから修正、追加、詳細、削除、などのページへ値を渡しつつページ移動するページ遷移先指定画面を作成します。

星マークのページは前回までで作成済みになります。今回は雲マークのpro_list.php pro_branch.php pro_ng.php を作成します。

※あらかじめ、pro_add.phpにアクセスして各カテゴリ別で２つずつ位商品を登録しておいてください。

1 商品一覧画面
- 1.1 pro_list.php
2 ページ遷移先指定画面
- 2.1 pro_branch.php
3 商品選択ＮＧ画面
- 3.1 pro_ng.php

商品一覧画面

pro_list.php

<?php

session_start();
session_regenerate_id(true);
if(isset($_SESSION["login"]) === false) {
    print "ログインしていません。<br><br>";
    print "<a href='staff_login.html'>ログイン画面へ</a>";
    exit();
} else {
    print $_SESSION["name"]."さんログイン中";
    print "<br><br>";
}
?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品一覧</title>
<link rel="stylesheet" href="../style.css">
</head>
    
<body>
    
<?php
try{
    
$dsn = "mysql:host=localhost;dbname=shop;charset=utf8";
$user = "root";
$password = "";
$dbh = new PDO($dsn, $user, $password);
$dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
    
$sql = "SELECT code,name,price FROM mst_product WHERE1";
$stmt = $dbh -> prepare($sql);
$stmt -> execute();
    
$dbh = null;
    
print "商品一覧<br><br>";
print "<form action='product_branch.php' method='post'>";
    
while(true) {
    $rec = $stmt -> fetch(PDO::FETCH_ASSOC);
    if($rec === false) {
        break;
    }
    print "<input type='radio' name='code' value='".$rec['code']."'>";
    print $rec["name"];
    print "---";
    print $rec["price"]."円";
    print "<br>";
}
print "<br>";
print "<input type='submit' name='disp' value='詳細'>";
print "<input type='submit' name='add' value='追加'>";
print "<input type='submit' name='edit' value='修正'>";
print "<input type='submit' name='delete' value='削除'>";
}
catch(Exception $e) {
    print "只今障害が発生しております。<br><br>";
    print "<a href='../staff_login/staff_login.html'>ログイン画面へ</a>";
}
?>
<br><br>
<a href="../staff_login/staff_login_top.php">管理画面TOPへ</a>
    
</body>
</html>

<?php

session_start();

session_regenerate_id(true);

if(isset($_SESSION["login"]) === false) {

print "ログインしていません。<br><br>";

print "<a href='staff_login.html'>ログイン画面へ</a>";

exit();

} else {

print $_SESSION["name"]."さんログイン中";

print "<br><br>";

}

<!DOCTYPE html>

<head>

</head>

<body>

<?php

try{

$dsn = "mysql:host=localhost;dbname=shop;charset=utf8";

$user = "root";

$password = "";

$dbh = new PDO($dsn, $user, $password);

$dbh -> setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

$sql = "SELECT code,name,price FROM mst_product WHERE1";

$stmt = $dbh -> prepare($sql);

$stmt -> execute();

$dbh = null;

print "商品一覧<br><br>";

print "<form action='product_branch.php' method='post'>";

while(true) {

$rec = $stmt -> fetch(PDO::FETCH_ASSOC);

if($rec === false) {

break;

}

print "<input type='radio' name='code' value='".$rec['code']."'>";

print $rec["name"];

print "---";

print $rec["price"]."円";

print "<br>";

}

print "<br>";

print "<input type='submit' name='disp' value='詳細'>";

print "<input type='submit' name='add' value='追加'>";

print "<input type='submit' name='edit' value='修正'>";

print "<input type='submit' name='delete' value='削除'>";

}

catch(Exception $e) {

print "只今障害が発生しております。<br><br>";

print "<a href='../staff_login/staff_login.html'>ログイン画面へ</a>";

}

<a href="../staff_login/staff_login_top.php">管理画面TOPへ</a>

</body>

</html>

このページのプログラムが走れば下図のような表示になります。

以前作成したスタッフ一覧画面（staff_list.php）とほとんど同じ内容ですね。プログラムもほぼ同じです。

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

このページでは、データベースに登録されている全ての商品を一覧表示させたいので、まずデータベースに接続をします。

SQLのSELECT文でmst_productテーブルからcode,name,price,を選択しています。レコードはWHERE1ですので、全てのレコードが対象になります。

$sql = “SELECT code,name FROM mst_staff WHERE1”;　は、SELECT文です。WHERE1は全てのレコードを指定する事になるので、この場合は「mst_staffテーブルのすべてのレコードのcodeとnameカラムを選択」になります。

SQLを実行した後、データベースを閉じます。

この後、商品を一覧表示させるループ文に入るので、その前にhtmlのformタグを作成しておきます。

print “<form…　飛び先はpro_branch.php でpost送信。

ここから、画面にスタッフ全員を一覧表示させるプログラムに入ります。

while(true){}は、永久ループになります。

$rec = $stmt -> fetch(PDO::FETCH_ASSOC);　は、SQLで取り出した全レコードの情報を、プライマリkeyの昇順に１つずつ抜き出し、$recに格納しています。

if($rec === false) { break; }　は、つまり全てのレコードを取り出したあと、$recは空の値となるので、その場合はbreak;でループから抜け出すといったプログラムです。

したがって、$recに値がある（レコードの情報がある）場合、商品情報を表示させるプログラムが繰り返されます。

表示された商品を選択出来るようにするため、ラジオボタンを付けています。

input type=”radio”(ラジオボタン) name=”code”(sumitで渡す値の名前) value=”.$rec[‘code’].”(submitで渡す値)　になります。したがって、今回のラジオボタンは、商品codeをpost送信するために付けています。

$rec[“name”]で商品名が表示されるので、ラジオボタンの隣にスタッフ名が表示される形になります。

$rec[“price”]で商品価格が表示されるので、商品名の隣に商品価格が表示される形になります。

<br>で改行なので、ループすれば上図のような表示になります。

ループから抜け出した後、今後作成するスタッフ編集画面に飛ぶための４つのsubmitボタンを作成します。（詳細、追加、修正、削除）

submitにnameを付けていますが、これはページ移動後、押されたsubmitボタンの識別を付けるためです。

最後に、管理トップ画面のリンクを貼っておきます。

ページ遷移先指定画面

pro_branch.php

<?php
session_start();
session_regenerate_id(true);
if(isset($_SESSION["login"]) === false) {
    print "ログインしていません。<br><br>";
    print "<a href='staff_login.html'>ログイン画面へ</a>";
    exit();
}

if(isset($_POST["add"]) === true) {
    header("Location:product_add.php");
    exit();
}

if(isset($_POST["disp"]) === true) {
    if(isset($_POST["code"]) === false) {
        header("Location:product_ng.php");
        exit();
    } 
    $code = $_POST["code"];
    header("Location:product_disp.php?code=".$code);
    exit();
}

if(isset($_POST["edit"]) === true) {
    if(isset($_POST["code"]) === false) {
        header("Location:product_ng.php");
        exit();
    } 
    $code = $_POST["code"];
    header("Location:product_edit.php?code=".$code);
    exit();
}

if(isset($_POST["delete"]) === true) {
    if(isset($_POST["code"]) === false) {
        header("Location:product_ng.php");
        exit();
    } 
    $code = $_POST["code"];
    header("Location:product_delete.php?code=".$code);
    exit();
}
?>

<?php

session_start();

session_regenerate_id(true);

if(isset($_SESSION["login"]) === false) {

print "ログインしていません。<br><br>";

print "<a href='staff_login.html'>ログイン画面へ</a>";

exit();

}

if(isset($_POST["add"]) === true) {

header("Location:product_add.php");

exit();

}

if(isset($_POST["disp"]) === true) {

if(isset($_POST["code"]) === false) {

header("Location:product_ng.php");

exit();

}

$code = $_POST["code"];

header("Location:product_disp.php?code=".$code);

exit();

}

if(isset($_POST["edit"]) === true) {

if(isset($_POST["code"]) === false) {

header("Location:product_ng.php");

exit();

}

$code = $_POST["code"];

header("Location:product_edit.php?code=".$code);

exit();

}

if(isset($_POST["delete"]) === true) {

if(isset($_POST["code"]) === false) {

header("Location:product_ng.php");

exit();

}

$code = $_POST["code"];

header("Location:product_delete.php?code=".$code);

exit();

}

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

こちらのプログラムも、以前作成したstaff_branch.phpとほぼ同じ内容です。

このページは、リスト画面から４つのsubmitボタンのいずれかが押された際、指定作のページへ自動的に飛ぶようにプログラムされています。header(“location..があるので、htmlは記述せず、画面にはなにも表示されません。

※headerの命令文は、htmlの配下に記述出来ない仕様となっています。

一つ抜粋して説明すると、例えば商品修正のボタンを押したならば、isset($_POST[“edit”]) === true　になるので、ここのif文のプログラムが実行されます。

続く　if(isset($_POST[“code”]) === false)　は、これはラジオボタンが押されたかどうかの確認になります。したがって、falseならスタッフが選択されていないので強制的にheaderでpro_ng.phpのページへ飛ばします。

ラジオボタンが押されていれば、$code = $_POST[“code”];　でスタッフコードを$codeに代入します。

その後、headerでstaff_edit.phpに飛ばしますが、ここがポイントで、urlの後に「?code=”.$code」と続いています。

これは、「get送信」しているのです。

このページでは、目に見えるボタンを装飾出来ないので、post送信ができません。（$_SESSION[]で賄うこともできそうですが、、)しかし、urlに値を乗せる「ＧＥＴ送信」なら可能になります。

したがって、スタッフ情報の核となるスタッフコードを、headeのurlに乗っけてしまえばいいんですね。

パスワードなどの情報であれば、目に見えてしまうurlに乗せるget送信はいけませんが、スタッフコードであれば特段問題ないので、見えても良いような情報の場合、get送信も使います。

記述は、pro_edit.php?code=”.$code　のように、飛び先のURLの？の後がGETの値になります。

code=は名前で、そこに.$code　で値をつなげば、後のページで$_GET[“code”]で商品コードが受け取れます。

商品選択ＮＧ画面

pro_ng.php

<?php

session_start();
session_regenerate_id(true);
if(isset($_SESSION["login"]) === false) {
    print "ログインしていません。<br><br>";
    print "<a href='staff_login.html'>ログイン画面へ</a>";
    exit();
} else {
    print $_SESSION["name"]."さんログイン中";
    print "<br><br>";
}
?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品選択NG</title>
<link rel="stylesheet" href="../style.css">
</head>
    
<body>
    
商品を選択して下さい<br><br>
<a href="product_list.php">商品一覧へ</a>

</body>
</html>

<?php

session_start();

session_regenerate_id(true);

if(isset($_SESSION["login"]) === false) {

print "ログインしていません。<br><br>";

print "<a href='staff_login.html'>ログイン画面へ</a>";

exit();

} else {

print $_SESSION["name"]."さんログイン中";

print "<br><br>";

}

<!DOCTYPE html>

<head>

<title>商品選択NG</title>

</head>

<body>

商品を選択して下さい<br><br>

<a href="product_list.php">商品一覧へ</a>

</body>

</html>

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

商品リスト画面で、ラジオボタンにチェックなくsubmitボタンを押したときに表示される画面です。

商品が選択されていないので、その旨を伝えるだけのページですね。とくに説明はありません。

こちらもstaff_ng.phpと同じです。

ここまで作成できれば、ログイン後の商品管理トップページから商品追加画面へ飛べるようになるので、pro_add..のページのコメントアウトしておいたsessionの記述部分を解除しておいてください。

次回は商品の修正ページを作成します。

商品一覧画面

pro_list.php

ページ遷移先指定画面

pro_branch.php

商品選択ＮＧ画面

pro_ng.php

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル