Go to Qiita Advent Calendar 2024 Top
LoginSignup
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

@Juesa09

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

Last updated at Posted at 2023-01-30

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

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

image.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とかで見た目を華やかにしてみようと思います。

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?