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

前回、ログイン画面の作成をしました。↓

PHPとMySQLでECサイトをフルスクラッチ開発！②スタッフログイン、ログアウト画面の...

https://denkenmusic.com/phpとmysqlでecサイトをフルスクラッチ開発！②スタッフ

前回はスタッフの追加画面を作成しました。↓　今回は、「ログイン画面」を作成します。ログインについての仕組みが分かると思いますので、結構重要な部分になります。☆が前回作成したページです。先頭の雲マークの「スタッフログイン」の部分を今回作成します。ログインの流れとしては、①ログイン情報入力②ログイン情報チェック③ログイン後の管理画面に遷移となります。ついでに④ログアウトまで作成しようと思います。　ログイン情報入力画面staff_login.html

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

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

※あらかじめ、staff_add.phpにアクセスして数名のスタッフを追加しておいてください。

1 スタッフ一覧画面
- 1.1 staff_list.php
2 ページ遷移先指定画面
- 2.1 staff_branch.php
3 スタッフ選択ＮＧ画面
- 3.1 staff_ng.php

スタッフ一覧画面

staff_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 FROM mst_staff WHERE1";
$stmt = $dbh -> prepare($sql);
$stmt -> execute();
    
$dbh = null;
    
print "スタッフ一覧<br><br>";
print "<form action='staff_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 "<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>

<title>スタッフ一覧</title>

</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 FROM mst_staff WHERE1";

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

$stmt -> execute();

$dbh = null;

print "スタッフ一覧<br><br>";

print "<form action='staff_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 "<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フォルダ内にstaff_list.phpを作成します。

先頭のsession部でログインの有無を確認しています。今後のページでは全てログインしたスタッフのみ操作の権限を持たせたいので、このログイン確認のif文を記述しています。

isset()は、引数に値が入っているかのチェックが出来ます。つまりisset($_SESSION[login]) === true)なら値が空なのでログインしていない事になります。ログインしてない場合、ログイン画面へ誘導し、exit()で制終了させます。

ログインしていれば、スタッフ名を表示させてプログラムを進めます。

このページでは、データベースに登録されているスタッフ全員の一覧表示をさせたいので、まずデータベースに接続をします。（29~33行目）

35~37がSQLになります。

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

レコード指定のWHEREに「？」の条件を渡していないので、$data[]は必要ありません。

したがって今回のような場合、SQL実行のexecute();のように、引数に$dataは入りません。

SQLはこのページではもう実行しないので、データベースを閉じます。

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

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

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

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

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

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

したがって、$recに値がある（レコードの情報がある）場合、49~51行目の、スタッフ情報を表示させるプログラムが繰り返されます。

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

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

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

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

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

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

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

ページ遷移先指定画面

staff_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:staff_add.php");
    exit();
}

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

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

if(isset($_POST["delete"]) === true) {
    if(isset($_POST["code"]) === false) {
        header("Location:staff_ng.php");
        exit();
    } 
    $code = $_POST["code"];
    header("Location:staff_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:staff_add.php");

exit();

}

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

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

header("Location:staff_ng.php");

exit();

}

$code = $_POST["code"];

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

exit();

}

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

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

header("Location:staff_ng.php");

exit();

}

$code = $_POST["code"];

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

exit();

}

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

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

header("Location:staff_ng.php");

exit();

}

$code = $_POST["code"];

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

exit();

}

staffフォルダ内にstaff_branch.phpを作成します。

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

先頭のログイン確認の説明は今後省いていきます。

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

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

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

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

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

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

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

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

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

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

スタッフ選択ＮＧ画面

staff_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="staff_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="staff_list.php">スタッフ一覧に戻る</a>

</body>

</html>

staffフォルダ内にstaff_ng.phpを作成します。

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

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

スタッフ一覧画面

staff_list.php

ページ遷移先指定画面

staff_branch.php

スタッフ選択ＮＧ画面

staff_ng.php

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

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