MysqlのデータをHTML, PHPで表示する（2. クリック一回でスピーディーにデータ削除，既登録データへの追記）

先日投稿した在庫管理表に新たに以下機能を追加してみました。

・データ表中のIDの数字をクリックするとそのデータをデータベースから削除（"データベースに登録"ボタンの下のテキストエリアにIDを入力して"削除"ボタンを押しても削除可）
・データ表中の売れた日に日付を入力して最右の"売上の記録"ボタンを押すとデータベースにそのデータを登録

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3120035/6fc78d00-04c7-db53-4da4-5e0effa7b8a1.png)

Mysqlのカラムは以下に設定しています。

```
ID: ID
CSSJ: 出品日
SPM: 商品名
KC: 在庫量
DG: 定価
CSJ: 売値
FSFS: 発送方式
BZFS: 包装
BZF: 包装費
YF: 送料
SXF: 手数料
HJ: 合計
QK: 状況
XDSJ: 売れた日
YL: 利益
```

コードは以下になります。
14-17行目と91-94行目にデータベース情報を入れてください。
また、126, 166, 175, 182行目の"kucun"となっている個所をテーブル名に変更してください。

```
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
<title>在庫管理表</title>
</head>
<body>
  <div class = "faq" id = "display" style = "background-color:#961c6b;">
  <form method="post">
<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><input type='text' size='7' /></td>";
      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>";
    }

    $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>
```

今度はcssとかで見た目を華やかにしてみようと思います。