MysqlのデータをHTML, PHPで表示する（3. Mysqlのデータ書き換え）

お疲れ様です。
真冬でもクーラーガンガンのJuesa09です。

さって今回は、前回第2回から新たに以下機能を追加してみました。


1. 表の状況欄に在庫状況（Y:在庫あり, M:在庫なし）を反映。
2. ”データベースに登録”ボタンを押すと在庫状況Y（在庫あり）でデータベースに登録し、下表にも反映。
3. 下表中の”売れた日”欄に売上日を記入して最右の”売上記録”ボタンを押すと、データベース内の在庫状況をMへ書き換え。また、”売れた日”欄のテキストアエリアと”売上記録”ボタンをクローズする。（下画像中ID8のよう）
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3120035/3397ab35-1532-e1cf-0660-b5e4b5a8061e.png)
コードは以下になります。（データベースのカラムの設定は第2回を見て頂けますと幸いです。）

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title>在庫管理表</title>
</head>
<body bgcolor="#10100E" text="#cccccc">
  <div class = "faq" id = "display">
  <form method="post">
  <font face="ＭＳ 明朝">
<table class="input form" border="3">
    <a>在庫管理表</a>
    <?php

const DB_HOST = '';//HOST名
const DB_NAME = '';//DATABASE名
const DB_USER = '';//USER名
const DB_PASSWORD = '';//パスワード

$host = DB_HOST;
$db = DB_NAME;
$user = DB_USER;
$pass = DB_PASSWORD;

$dsn = "mysql:host=$host;dbname=$db;charset=utf8mb4";

try{
  $pdo = new PDO($dsn, $user, $pass, [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, 
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC 
    ]);
    echo '<p>データベースとの接続: 正常</p>';
}catch(PDOException $e){
    echo '<p>データベースとの接続: 不可</p>'. $e -> getMessage();
    exit();
}
?>
<tr>
      <th>ID</th>
      <th>出品日</th>
      <th>商品名</th>
      <th>在庫量</th>
      <th>定価</th>
      <th>売値</th>
      <th>発送方式</th>
      <th>包装</th>
      <th>包装費</th>
      <th>送料</th>
      <th>手数料</th>
      <th>合計</th>
      <th>状況</th>
      <th>売れた日</th>
      <th>利益</th>
</tr>
<tr>
      <td><?php
      session_start();
      $idno = $_SESSION['idno'];
      echo $idno;
      ?></td>
      <td><?php
      echo date("Y/m/d");
      ?></td>
      <td><input type="text" size="7" name="s3"></td>
      <td><input type="text" size="7" name="s4"></td>
      <td><input type="text" size="7" name="s5"></td>
      <td><input type="text" size="7" name="s6" id="s6"></td>
      <td><input type="text" size="7" name="s7"></td>
      <td><input type="text" size="7" name="s8"></td>
      <td><input type="text" size="7" name="s9"></td>
      <td><input type="text" size="7" name="s10"></td>
      <td><input type="text" size="7" name="s11" id="s11"></td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>
    <tr>
    <td><input type="submit" name="but" value="データベースに登録"/></td>
</tr>
</table>    
<table class="delete form" border="3">
<tr>
<th><input type="text" size="7" name="dels" id="dels" /></th>
<th><input type="submit" name="sch" id="sch" value="削除"/></th>
</tr>
</table>

<?php
   $_SESSION['idno'];
   //$_SESSION['idno'] = 1;//IDリセット時はこちらにする

   $host1 = 'localhost';//localhostで接続の場合。サーバのIPアドレスでも可。
   $username1 = '';//USER名
   $passwd1 = '';//パスワード
   $dbname1 = '';//DATABASE名

   $link = mysqli_connect($host1, $username1, $passwd1);
   if (!$link) {
    print('<p>接続失敗</p>'.mysqli_error());
   } else {
    //print('<p>接続成功</p>');
   }

   $result = mysqli_select_db($link, $dbname1);
   if (!$result) {
    print('<p>データベースの選択失敗</p>');
   } else {
    //print('<p>データベースの選択成功</p>');
   }

   $result = mysqli_query($link, 'SET NAMES utf8');
   if (!$result) {
    print('<p>文字コードの設定失敗</p>');
   } else {
    //print('<p>文字コードの設定失敗</p>');
   }

   $dsn = "mysql:host=$host1;dbname=$dbname1;charset=utf8mb4";

   $pdo = new PDO($dsn, $username1, $passwd1, [
    PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, 
    PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC 
    ]);

    if(isset($_POST['but'])){

    $stmt = $pdo->prepare('INSERT INTO kucun (ID, CSSJ, SPM, KC, DG, CSJ, FSFS, BZFS, BZF, YF, SXF, HJ, QK, XDSJ, YL) VALUES(:id, :cssj, :spm, :kc, :dg, :csj, :fsfs, :bzfs, :bzf, :yf, :sxf, :hj, :qk, :xdsj, :yl)');
    
    $idno = $_SESSION['idno'];
    $ss1 = (string)$idno;
    $ss2 = date("Y/m/d");
    $ss3 = filter_input(INPUT_POST, 's3');
    $ss4 = filter_input(INPUT_POST, 's4');
    $ss5 = filter_input(INPUT_POST, 's5');
    $ss6 = filter_input(INPUT_POST, 's6');
    $ss7 = filter_input(INPUT_POST, 's7');
    $ss8 = filter_input(INPUT_POST, 's8');
    $ss9 = filter_input(INPUT_POST, 's9');
    $ss10 = filter_input(INPUT_POST, 's10');
    $ss11 = filter_input(INPUT_POST, 's11');

    // 値のセット
    $stmt->bindValue(':id', $ss1);
    $stmt->bindValue(':cssj', $ss2);
    $stmt->bindValue(':spm', $ss3);
    $stmt->bindValue(':kc', $ss4);
    $stmt->bindValue(':dg', $ss5);
    $stmt->bindValue(':csj', $ss6);
    $stmt->bindValue(':fsfs', $ss7);
    $stmt->bindValue(':bzfs', $ss8);
    $stmt->bindValue(':bzf', $ss9);
    $stmt->bindValue(':yf', $ss10);
    $stmt->bindValue(':sxf', $ss11);
    $stmt->bindValue(':hj', $ss6 + $ss9 + $ss10 + $ss11);
    $stmt->bindValue(':qk', "Y");
    $stmt->bindValue(':xdsj', "");
    $stmt->bindValue(':yl', $ss6 + $ss10 + $ss11);

    // SQLの実行
    $stmt->execute();
    $_SESSION['idno'] = $idno + 1;
    }

    if(isset($_POST['sch'])){
    $scn = filter_input(INPUT_POST, 'dels');
    echo "最後に消したデータのID: $scn";
    $stmt = $pdo->prepare("DELETE FROM kucun WHERE ID = $scn");
    $stmt->execute();
    }

    if(isset($_POST['xdcl'])){
      $xdcl = filter_input(INPUT_POST, 'xdcl');
      $xdcl = rtrim($xdcl, '. Xiadanchuli');
      $xdcll = "xd" . $xdcl;
      $xdclsj = filter_input(INPUT_POST, $xdcll);
      $stmtg = $pdo->prepare('UPDATE kucun SET QK = :qk , XDSJ = :xdsj WHERE ID = :id');
      $stmtg->bindValue(':qk', 'M');
      $stmtg->bindValue(':xdsj', $xdclsj);
      $stmtg->bindValue(':id', $xdcl);
      $stmtg->execute();
      }

    $sql = "SELECT * FROM kucun";
    $res = mysqli_query($link, $sql);
    echo "<table id='tbl1' border='1'>";
    echo "    <tr>";
    echo "<th>ID</th>";
    echo "<th>出品日</th>";
    echo "<th>商品名</th>";
    echo "<th>在庫</th>";
    echo "<th>定価</th>";
    echo "<th>売値</th>";
    echo "<th>発送方法</th>";
    echo "<th>包装</th>";
    echo "<th>包装費</th>";
    echo "<th>送料</th>";
    echo "<th>手数料</th>";
    echo "<th>合計</th>";
    echo "<th>状況</th>";
    echo "<th>売れた日</th>";
    echo "<th>利益</th>";
    echo "    </tr>";
 
    while($row = mysqli_fetch_assoc($res)) {
      echo "<tr>";
      echo "  <td id='";
      echo $row['ID'];
      echo "'>{$row['ID']}</td>";      
      echo "  <td>{$row['CSSJ']}</td>";
      echo "  <td>{$row['SPM']}</td>";
      echo "  <td>{$row['KC']}</td>";
      echo "  <td>{$row['DG']}</td>";
      echo "  <td>{$row['CSJ']}</td>";
      echo "  <td>{$row['FSFS']}</td>";
      echo "  <td>{$row['BZFS']}</td>";
      echo "  <td>{$row['BZF']}</td>";
      echo "  <td>{$row['YF']}</td>";
      echo "  <td>{$row['SXF']}</td>";
      echo "  <td>{$row['HJ']}</td>";
      echo "  <td>{$row['QK']}</td>";
        if((string)$row['QK'] != "M"){
          echo "  <td><input type='text' size='7' name='xd";
          echo $row['ID'];
          echo "'/></td>";
          echo "  <td>{$row['YL']}</td>";
          echo "  <td id='xdcl'><input type='submit' name='xdcl' id='";
          echo $row['ID'];      
          echo "' value='";
          echo $row['ID'];
          echo ". 売上記録'/></td>";
          echo "</tr>";
        }else{
          echo "  <td></td>";
          echo "  <td>{$row['YL']}</td>";
          echo "  <td></td>";
        };
    }

    $con = mysqli_close($link);
    if (!$con) {
     print('<p>データベースとの通信切断失敗</p>');
   } else {
     print('<p>データベースとの通信切断成功</p>');
   }
   
?>

  </form>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"></script>
<script type="text/javascript">
'use strict';

var dateObj = new Date();
var text = '';

text = dateObj.getFullYear() + '/' + 
       (dateObj.getMonth() + 1) + '/' + 
       dateObj.getDate() 
       
$(document).ready(function() {
    $("#s6").focusout(function() {
      var inputNumber = $("#s6").val(); 
      var resultDivision = inputNumber * -0.1;
      var ssss = Math.floor(resultDivision);
      $("#s11").val(ssss); 
    })
});

$("td").click(function(){
  var click =  $(this).attr('id');
  console.log(String(click));
  if (String(click) != "undefined"){
    if (String(click) != "xdcl"){
  document.getElementById("dels").value = String(click);
  document.getElementById("sch").click();
    }else{
      console.log("error");  
    }
  }
});

</script>
</body>
</html>
```

ご参考になれば幸甚です。