【HTML & PHP】在庫管理システム②在庫登録画面を作ろう

PHP HTML5

今回は在庫管理システムを作る事を目指して、在庫に商品を追加する画面を作ろうと思います。
(こちらの記事の続きとなっています。)


商品情報をデータベースに登録する必要がありますので、xamppのMySQLを起動しておきます。
以前に起動する方法を記事にしているので、こちらもご参照ください。

メニュー画面を修正する

前回の記事でメニュー画面を仮で作りましたが、若干変更していますので、再度コードを記載します。
今回作成するNewItemAdd.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" 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" value="在庫情報変更"></p>
</body>
</html>

ログイン画面でも実装したフォームタグで、入力したデータをNewItemAdd_check.phpにPOSTします。

inputタグでtype=”file”を指定すると、ファイルを選択ボタンを押した時にブラウザを表示してファイルを選択できるようになります。

注意点として、ファイルをアップロードする(type=”file”)ときは、formタグにenctype=”multipart/form-data”を忘れずに記載してください。

在庫登録画面

在庫テーブルの作成

在庫登録画面で入力したデータをデータベース上のテーブルに設定しますので、まずはMySQLにてデータベースとテーブルを作成します。
MySQLの操作方法とデータベースの作成方法は割愛しますが、データベースの名前はInventoryControlSystemとし、テーブルは下記SQLを実行して作成します。

CREATE TABLE `goods` (
  `code` int(11) NOT NULL,
  `GoodsName` varchar(128) NOT NULL COMMENT '商品名',
  `Add_date` date NOT NULL COMMENT '登録日',
  `Supplier` varchar(128) NOT NULL COMMENT '仕入先',
  `PurchasePrice` int(11) NOT NULL COMMENT '仕入価格',
  `Price` int(11) NOT NULL COMMENT '販売価格',
  `Inventory` int(11) NOT NULL COMMENT '在庫数',
  `Place` varchar(128) NOT NULL COMMENT '保管場所',
  `Image` varchar(128) NOT NULL COMMENT '画像'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

ALTER TABLE `goods`
  ADD PRIMARY KEY (`code`);

ALTER TABLE `goods`
  MODIFY `code` int(11) NOT NULL AUTO_INCREMENT;
COMMIT;

goodsという名前でテーブルを作成し、各カラムはPOSTするデータと同じ名前で作成しています。

在庫テーブルの作成

POSTデータをデータベース上のテーブルに登録する

NewItemAdd.htmlからNewItemAdd_check.phpPOSTメソッドでデータを渡しているので、NewItemAdd_check.phpには、受け取ったデータをデータベースに登録する処理を記載します。
画像ファイルだけは扱い方が違いますので、注意しながら処理を作成します。

POSTデータをデータベース上のテーブルに登録する処理

POSTデータをデータベース上のテーブルに登録する処理のコードを記載します。

<?php
session_start();
if( !isset( $_SESSION['login_flg'] ) ) {
    print 'ログインしてください。<a href="index.html">ログイン</a>';
    exit();
}
try{
/* 外部ファイル読み込み */
    require_once('common/common.php');
/* 内部関数定義 */
    /* POSTデータのサニタイズ */
    function sanitizing($in_data){
        foreach($in_data as $key=>$value){
            $out_data[$key]=htmlspecialchars($value,ENT_QUOTES,'UTF-8');
        }
        return($out_data);
    }
/* 新規在庫登録処理 */
    /* データベース関係の処理 */
    get_database_data($dsn,$user,$password);
    $dbh = new PDO($dsn,$user,$password);
    $dbh->setAttribute(PDO::ATTR_ERRMODE,PDO::ERRMODE_EXCEPTION);
    
    /* POSTデータのサニタイズ化 */
    $post=sanitizing($_POST);
    /* 商品名が空ではない? */
    if(!empty($post['GoodsName'])){
        /* 添付ファイルを処理する */
        $temp_file_name_org = '';
        if(is_uploaded_file($_FILES['upload_file']['tmp_name'])){
            $finfo = new finfo(FILEINFO_MIME_TYPE);
            $mime_type = $finfo->file($_FILES['upload_file']['tmp_name']);
            $res = finfo_close($finfo);
            /* getimagesize関数で画像情報を取得する */
            list($img_width, $img_height, $mime_type, $attr) = getimagesize($_FILES['upload_file']['tmp_name']);
            switch($mime_type){
                /* jpegの場合 */
                case IMAGETYPE_JPEG:
                    $img_extension = "jpg";
                    break;
                /* pngの場合 */
                case IMAGETYPE_PNG:
                    $img_extension = "png";
                    break;
                /* gifの場合 */
                case IMAGETYPE_GIF:
                    $img_extension = "gif";
                    break;
            }
            /* 拡張子が画像だったか? */
            if(isset($img_extension)){
                /* ファイルのアップロード */
                $temp_file_name_org = $post['GoodsName'].'_'.date('YmdHis') ;
                $temp_file_name     = './image/'.$temp_file_name_org.'.'.$img_extension ;
                move_uploaded_file($_FILES['upload_file']['tmp_name'], $temp_file_name);
            }
        }
        /* POSTデータをデータベースに登録処理 */
        $sql = 'INSERT INTO goods (GoodsName, Add_date, Supplier, PurchasePrice, Price, Inventory, Place, Image) VALUES ("'.$post['GoodsName'].    '","'
                                                                                                                           .$post['Add_date'].     '","'
                                                                                                                           .$post['Supplier'].     '","'
                                                                                                                           .$post['PurchasePrice'].'","'
                                                                                                                           .$post['Price'].        '","'
                                                                                                                           .$post['Inventory'].    '","'
                                                                                                                           .$post['Place'].        '","'
                                                                                                                           .$temp_file_name_org.   '");';
        $result=$dbh->query($sql);
    }
    /* 新規在庫登録画面を表示する */
    header('Location:NewItemAdd.html');
    exit();
}catch(Exception $e){
    /* ログイン画面を表示する */
    header('Location:index.html');
    exit();
}
?>

common/common.phpを作成して、データベースの情報を取得できるようにしました。
sanitizing関数も共通化した方が良いです。)
内容は、下記記事内の要点解説でも行っているデータベースアクセスに関することですので、参考にしてください。

受け取ったデータをデータベースにINSERTするSQLを実行しています。
画像はアップロードを確認した後、jpeg等画像データの時はimageフォルダに移動するようにしています。
テーブルにデータを追加した後は、NewItemAdd.htmlに戻るようにしています。

ここまでのファイル・フォルダ構成の確認

ここまでで作成したファイルは下記画像を参照ください。

在庫登録画面を作ろう(ファイル・フォルダ構成)