【HTML & PHP】在庫管理システム③在庫一覧画面を作ろう

今回は在庫管理システムを作る事を目指して、在庫一覧に登録したデータを表示する画面を作ろうと思います。
（こちらの記事の続きとなっています。）

商品情報をデータベースに登録する必要がありますので、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)だけにしています。

今回の記事は表示するだけですが、画像または商品名をクリックしたら編集画面を表示するように、今後修正したいと思います。

試しに、在庫登録画面で適当に商品登録した後、在庫一覧画面を表示してみました。