今回は在庫管理システムを作る事を目指して、在庫一覧に登録したデータを表示する画面を作ろうと思います。
（こちらの記事の続きとなっています。）
商品情報をデータベースに登録する必要がありますので、xamppのMySQLを起動しておきます。
以前に起動する方法を記事にしているので、こちらもご参照ください。
メニュー画面を修正する
前回までの記事でメニュー画面を作りましたが、今回作成するItemList.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>
<p><input type="button" onclick="location.href='NewItemAdd.html'" value="新規在庫登録"></p>
<p><input type="button" onclick="location.href='ItemList.html'" value="在庫情報一覧"></p>
</body>
</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>
<form method="post" action="NewItemAdd_check.php" enctype="multipart/form-data">
<p>登録日<input type="date" name="Add_date" value='<?=date('Y-m-d')?>' readonly></p>
<p>★商品名<input type="text" name="GoodsName" required></p>
<p>仕入先(URL)<input type="url" name="Supplier"></p>
<p>仕入価格<input type="number" name="PurchasePrice" min="0" value="0">円</p>
<p>販売価格<input type="number" name="Price" min="0" value="0">円</p>
<p>在庫数<input type="number" name="Inventory" min="0" value="0"></p>
<p>保管場所<input type="text" name="Place"></p>
<p>画像<input type="file" name="upload_file" accept="image/*"></p>
<p>★は入力必須項目</p>
<p><input type="submit" value="登録"></p>
</form>
<hr>
<p><input type="button" onclick="location.href='MainMenu.html'" value="メインメニュー"></p>
<p><input type="button" onclick="location.href='NewItemAdd.html'" value="新規在庫登録"></p>
<p><input type="button" onclick="location.href='ItemList.html'" value="在庫情報一覧"></p>
</body>
</html>
在庫一覧画面
在庫一覧画面は、その名の通り、前回作成した登録画面で登録した情報を画面に表示する画面です。
goodsテーブルの全レコードを画面に表示させようと思いますが、全カラムを表示させようとすると情報が多いので、商品名と画像のみ表示させようと思います。
在庫一覧画面のコード
在庫一覧画面のコードを記載します。
@charset "UTF-8";
figure {
display: inline-block;
margin: 0px 5px 10px 0px;
background-color: gray;
}
figure img {
display: block;
margin: 0px 0px 5px 0px;
}
figcaption {
text-align: center;
}
<?php
session_start();
if( !isset( $_SESSION['login_flg'] ) ) {
print 'ログインしてください。<a href="index.html">ログイン</a>';
exit();
}
/* 外部ファイル読み込み */
require_once('common/common.php');
/* データベース関係の処理 */
get_database_data($dsn,$user,$password);
$dbh = new PDO($dsn,$user,$password);
$dbh->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
?>
<!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>
<?php
/* 在庫一覧表示処理 */
$sql = 'SELECT * FROM goods WHERE 1';
$godds_stmt=$dbh->prepare($sql);
$godds_stmt->execute();
while(true)
{
$goods_rec = $godds_stmt->fetch(PDO::FETCH_ASSOC);
if($goods_rec==false) break;
print '<figure><img src="./image/'.$goods_rec['Image'].'" height="100px", width="100px"><figcaption>'.$goods_rec['GoodsName'].'</figcaption></figure>';
}
?>
<hr>
<p><input type="button" onclick="location.href='MainMenu.html'" value="メインメニュー"></p>
<p><input type="button" onclick="location.href='NewItemAdd.html'" value="新規在庫登録"></p>
<p><input type="button" onclick="location.href='ItemList.html'" value="在庫情報一覧"></p>
</body>
</html>
データベースに対して、SQLのSELECTで全レコード表示します。
表示するカラムは画像(Image)と商品名(GoodsName)だけにしています。
今回の記事は表示するだけですが、画像または商品名をクリックしたら編集画面を表示するように、今後修正したいと思います。
試しに、在庫登録画面で適当に商品登録した後、在庫一覧画面を表示してみました。
ここまでのファイル・フォルダ構成の確認
ここまでで作成したファイルは下記画像を参照ください。
