今回は在庫管理システムを作る事を目指して、まずは入り口となるログイン画面を作ろうと思います。
今回もphpを使用しますので、xamppを起動して、確認の際はlocalhostにアクセスしてください。
もしxampp環境が無い場合または起動方法が分からない場合は、下記記事を参考にインストール・起動できます。
今回作成する在庫管理システムのセキュリティ対策はありません。
ローカルPCで使用することを前提に作成しますので、一般公開する場合はセキュリティ対策を行ってください。
ログイン画面作成
ログイン画面といえば、メールアドレスまたはIDとパスワードを入力して、ログインボタンを押すと、メールアドレスまたはIDに対してパスワードを照合し、合っていたらマイページ等を表示する流れかと思います。
ということで、「IDとパスワードの入力欄を設けて、各欄入力後、「ログイン」をクリックすると、パスワード照合を行う」ページを作成しようと思います。
ログイン画面のコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex" />
<meta name="apple-mobile-web-app-capable" content="yes">
<title>在庫管理システムログインページ</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>在庫管理システム</h1>
<form method="post" action="login_branch.php">
<p>ログインID
<input type="text" name="login_id"></p>
<p>パスワード
<input type="password" name="pass"></p>
<input type="submit" value="ログイン">
</form>
</body>
</html>inputタグで、IDとパスワードを入力する欄を作成しています。
inputタグにtype=”password”を指定すると、入力値を伏字(●●●●●●)にしてくれます。
ログインをクリックすると、formのactionに指定したlogin_branch.phpにIDとパスワードを送信します。
login_branch.php内でIDとパスワードを照合するようにします。
パスワード照合
先ほど作成したログイン画面から、login_branch.phpにIDとパスワードがPOSTされます。
受け取ったIDとパスワードを事前に決めておいたIDとパスワードと比較して、どちらも正しければメインメニュー画面を表示するようにします。
もし、IDまたはパスワードが間違っていたらログイン画面を表示します。
パスワード照合のコード
サンプルコードでは、IDとパスワードをソースコードに直接書いていますが、通常は外部ファイルにしたりデータベースに登録しておきます。
<?php
try{
/* 内部定数定義 */
/* 事前に決めたIDとパスワードを取り込む */
$LOGIN_ID = 'sukimadou';
$LOGIN_PASS = 'password';
/* 内部関数定義 */
/* POSTデータのサニタイズ */
function sanitizing($in_data){
foreach($in_data as $key=>$value){
$out_data[$key]=htmlspecialchars($value,ENT_QUOTES,'UTF-8');
}
return($out_data);
}
/* ログイン処理 */
/* POSTデータのサニタイズ化 */
$post=sanitizing($_POST);
/* POSTデータを内部変数に設定 */
$login_id = $post['login_id'];
$login_pass = $post['pass'];
/* POSTデータが事前に決めたデータと不一致しているか？ */
if(($LOGIN_ID != $login_id) || (md5($LOGIN_PASS) != md5($login_pass))){
/* ログイン画面を表示する */
header('Location:index.html');
exit();
}else{
/* セッション開始/セッション情報更新 */
if( !isset( $_SESSION ) ) {
session_start();
}else{
session_regenerate_id( true );
}
$_SESSION['login_flg']=1;
/* メインメニューを表示 */
header('Location:MainMenu.html');
exit();
}
}catch(Exception $e){
/* ログイン画面を表示する */
header('Location:index.html');
exit();
}
?>index.htmlからPOSTしたデータは、$_POST[‘login_id’]と$_POST[‘pass’]に設定されています。
(キーは、inputタグ内のnameになっている。)
$_POST変数をsanitizing関数で、$post変数に入れなおします。以降は$post変数を使用します。
POSTデータをすべてhtmlspecialcharsでエスケープ(POSTデータがスクリプトだった場合を想定して無効化)しておきます。
事前に用意したIDとパスワードと、$postのIDとパスワードが一致していた場合、MainMenu.htmlを表示します。
メインメニュー
ついでに、簡単なメニュー画面を作成します。
内容に変更はあるかもしれませんので深く考えていません。
“ざっくり”仕様としては、「メニューから各種操作ができるようにしたい！」です。
<?php
session_start();
if( !isset( $_SESSION['login_flg'] ) ) {
print 'ログインしてください。<a href="index.html">ログイン</a>';
exit();
}
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="robots" content="noindex" />
<meta name="apple-mobile-web-app-capable" content="yes">
<title>在庫管理システムメインメニュー</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>メニュー</h1>
<a href="#">新規在庫登録</a>
<a href="#">在庫数変更</a>
<a href="#">在庫情報変更</a>
</body>
</html>htmlファイル内でphpを実行する必要があるので、.htaccessを作成し、下記コードを記入して保存してください。
AddHandler application/x-httpd-php .php .html
メニュー画面を実装することができました。
ここまでのファイル・フォルダ構成の確認
ここまでで作成したファイルは下記画像を参照ください。
cssフォルダとimageフォルダは、今後使うと思いますので、作成しました。
中にファイルはありません。
![いちばんやさしいPHPの教本 第3版 PHP 8対応 人気講師が教える実践Webプログラミング （いちばんやさしい教本） [ 柏岡秀男 ]](https://thumbnail.image.rakuten.co.jp/@0_mall/book/cabinet/2863/9784295012863_1_2.jpg?_ex=128x128)
