CSVファイルをMYSQLテーブルへインポートして表示する

2025年1月13日

import.csv 鳥の名称と科名・分布するCSVファイル

名称,科名,分布
ヤマドリ,キジ科,本州、四国、九州
ヤンバルクイナ,クイナ科,沖縄島
アマミヤマシギ,シギ科,奄美諸島
アオゲラ,キツツキ科,本州、四国、九州、屋久島、種子島
ノグチゲラ,キツツキ科,沖縄島
ルリカケス,カラス科,奄美諸島

index.php

2行目データベースに接続するファイルを読み込む

4行目-25行目インポート結果を表示させるPHPプログラムコード
$_GET['status']をIF関数判定して空でなければ、SWITCH関数にてインポート処理結果を変数へ代入
インポートを行った場合、必ず変数へ代入される。
switch関数による値の切り替え
表示させるメッセージ変数 : $statusMsg
divクラスに代入する値により色を変えるための変数 : $statusType
45行目にメッセージを表示する

77行目-92行目 birdsテーブルをSELECT文クエリー、件数が0より多ければWHILE文を処理をして一件ずつ最終列までテーブルのタグ内に変数を代入する、「件数が0ならデータが見つかりません」と表示する。

<?php
include "db.conn.php";

if(!empty($_GET['status'])){
switch($_GET['status']){

 case 'succ':
     $statusType = 'alert-success';
     $statusMsg = 'インポートに成功しました';
     break;
 case 'err':
     $statusType = 'alert-danger';
     $statusMsg = 'インポートに失敗しました';
     break;
 case 'invalid_file':
     $statusType = 'alert-danger';
     $statusMsg = 'CSVファイルをアップロードしてください';
     break;

 default:
     $statusType = '';
     $statusMsg = '';
}
}
?>

<!DOCTYPE html>
<html lang="ja">
<head>
<script>red text</script>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js"></script>

<script src="script.js"></script>
<body class="mt-5">
<div class="container-sm">
 <h2 class="text-center text-light bg-dark rounded-4">鳥類リスト</h2>

 <?php if(!empty($statusMsg)){ ?>
     <div class="col-xs-12">
         <div class="alert" <?= $statusType ?><?= $statusMsg?></div>
     </div>
 <?php } ?>
 <div class="row">

 <div class="col-md-12 head">
                 
     <div class="float-right m-3">
         <a href="javascript:void(0);" class="btn btn-dark" onclick="formToggle('importFrm')";><i class="plus"></i> インポート</a>
     </div>
 </div>

 <div class="col-md-12 p-3  m-2 border border-info text-center" id="importFrm" style="display: none;">
     <form action="importData.php" method="post" enctype="multipart/form-data">
         <input type="file" name="file">
         <input type="submit" class="btn btn-dark" name="importSubmit" value="登録">
     </form>
 </div>
     <table class="table table-hover">

         <thead>
             <tr class="table-info">
                 <th>ID</th>
                 <th>名称</th>
                 <th>科名</th>
                 <th>分布</th>
             
             </tr>
         </thead>
         <tbody>
             <?php
             
             $result = $conn->query("SELECT * FROM birds ORDER BY id DESC");
             if($result->num_rows > 0){
                 while($row = $result->fetch_assoc()){  ?>
                 <tr>
                     <td><?= $row['id']?></td>
                     <td><?= $row['name']?></td>
                     <td><?= $row['family_name']?></td>
                     <td><?= $row['distribution']?></td>
                  
                 </tr>
                <?php 
                 }
             }else{ ?>
             <tr><td colspan="5">No member(s) found...</td></tr>
             <?php } ?>
         </tbody>
     </table>
 </div>
</div>

</body>
</html>

idb.conn.php

importata.php

インポートファイルの処理

4行目登録ボタンをクリックときの判定
5行目登録を許可するファイルの種類を変数へ代入（CSVファイル判定）

6行目インポートファイルの変数存在しているとファイルの種類を判定

7行目サーバー側にファイル送信されているかを判定

8行目-10行目ファイルを読み込み権限で開いて行を取得、CSVをフィールドを処理する

12行目-31行目 while文でCSVファイルのデータを1つずつ繰り返し読み込む変数へ代入してWHERE文から同じ名称を検索する成功したフラグに、$_GET変数を代入

21行目-25行目すでに同名称が存在すればCSVファイルへ新たに更新処理をする同じ名称が存在しないならINSERT文を行う

33行目 WHILE文で失敗した場合のフラグを$_GETへ代入

35行目ファイルの読み込みが失敗した処理を$_GETへ代入

39行目 index.phpへページを移動と$_GETを一緒に送る

script.js

function formToggle(ID) {     
        var element = document.getElementById(ID);
        if(element.style.display === "none"){
            element.style.display = "block";
        }else{
            element.style.display = "none";
        }
    }