PHPでCSV編集フォームを作る方法【サンプルコード付き】

php

PHPでCSV編集フォームを作る方法【サンプルコード付き】

PHPでCSVファイルのデータを編集するフォームを作る方法を紹介します。CSVに保存されているデータをフォームへ表示し、内容を変更して更新できます。データベースを使わずに、CSVだけで編集機能を実装したい場合に使えるサンプルコードです。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

更新が完了しました。
名前 カテゴリー メールアドレス 操作

コードをコピーして使おう！

<?php

$message = '';

$rows = [];

if (($fp = fopen('data.csv', 'r')) !== false) {

    while (($data = fgetcsv($fp)) !== false) {
        $rows[] = $data;
    }

    fclose($fp);

}

$edit_index = isset($_GET['id'])
    ? (int)$_GET['id']
    : 0;

if (
    $_SERVER['REQUEST_METHOD'] === 'POST' &&
    isset($rows[$edit_index])
) {

    $rows[$edit_index] = [
        trim($_POST['name']),
        trim($_POST['category']),
        trim($_POST['email'])
    ];

    $fp = fopen('data.csv', 'w');

    foreach ($rows as $row) {
        fputcsv($fp, $row);
    }

    fclose($fp);

    $message = '更新が完了しました。';

}

$current = $rows[$edit_index] ?? ['', '', ''];

?>

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>CSV編集フォーム</title>

<style>

body{
    font-family:sans-serif;
    margin:20px;
}

.form-wrap{
    border:1px solid #e5e7eb;
    border-radius:20px;
    padding:24px;
    margin-bottom:24px;
}

.form-group{
    margin-bottom:16px;
}

label{
    display:block;
    margin-bottom:6px;
    font-weight:700;
}

input,
select{
    width:100%;
    padding:14px 16px;
    border:1px solid #d1d5db;
    border-radius:10px;
    box-sizing:border-box;
}

.save-btn{
    border:none;
    background:#ff6a00;
    color:#fff;
    padding:14px 24px;
    border-radius:10px;
    cursor:pointer;
    font-weight:700;
}

.success{
    margin-top:16px;
    padding:12px 16px;
    background:#ecfdf5;
    border:1px solid #86efac;
    border-radius:10px;
}

.table-wrap{
    border:1px solid #e5e7eb;
    border-radius:20px;
    overflow:hidden;
}

table{
    width:100%;
    border-collapse:collapse;
}

th{
    background:#f7f2e5;
}

th,
td{
    padding:16px;
    border-bottom:1px solid #e5e7eb;
    text-align:left;
}

.edit-link{
    display:inline-block;
    border:none;
    background:#2563eb;
    color:#fff;
    padding:8px 14px;
    border-radius:8px;
    text-decoration:none;
    font-weight:700;
}

</style>

</head>
<body>

<div class="form-wrap">

    <form method="post">

        <div class="form-group">
            <label>名前</label>
            <input
                type="text"
                name="name"
                value="<?= htmlspecialchars($current[0], ENT_QUOTES, 'UTF-8') ?>"
                required>
        </div>

        <div class="form-group">
            <label>カテゴリー</label>

            <select name="category">
                <option value="営業" <?= ($current[1] ?? '') === '営業' ? 'selected' : '' ?>>営業</option>
                <option value="企画" <?= ($current[1] ?? '') === '企画' ? 'selected' : '' ?>>企画</option>
                <option value="開発" <?= ($current[1] ?? '') === '開発' ? 'selected' : '' ?>>開発</option>
                <option value="デザイン" <?= ($current[1] ?? '') === 'デザイン' ? 'selected' : '' ?>>デザイン</option>
            </select>
        </div>

        <div class="form-group">
            <label>メールアドレス</label>
            <input
                type="email"
                name="email"
                value="<?= htmlspecialchars($current[2], ENT_QUOTES, 'UTF-8') ?>"
                required>
        </div>

        <button type="submit" class="save-btn">
            更新
        </button>

    </form>

    <?php if ($message): ?>
    <div class="success" id="successMessage">
        <?= htmlspecialchars($message, ENT_QUOTES, 'UTF-8') ?>
    </div>
    <?php endif; ?>

</div>

<div class="table-wrap">

<table>

    <tr>
        <th>名前</th>
        <th>カテゴリー</th>
        <th>メールアドレス</th>
        <th>操作</th>
    </tr>

    <?php foreach ($rows as $index => $row): ?>

    <tr>
        <td><?= htmlspecialchars($row[0], ENT_QUOTES, 'UTF-8') ?></td>
        <td><?= htmlspecialchars($row[1], ENT_QUOTES, 'UTF-8') ?></td>
        <td><?= htmlspecialchars($row[2], ENT_QUOTES, 'UTF-8') ?></td>
        <td>
            <a href="?id=<?= $index ?>" class="edit-link">
                編集
            </a>
        </td>
    </tr>

    <?php endforeach; ?>

</table>

</div>

<script>
setTimeout(function(){
    const message = document.getElementById('successMessage');

    if(message){
        message.style.display = 'none';
    }
}, 3000);
</script>

</body>
</html>

ファイル構成と設置方法

このサンプルで使用するファイル構成です。
下記のファイルを同じフォルダ（同じ階層）へ配置してください。 

sample/
├─ index.php
└─ data.csv

index.php がCSV編集フォーム本体です。data.csv に保存されているデータを一覧表示し、編集ボタンから内容を更新できます。

サーバーへ設置する場合は、上記ファイルを同じフォルダ（同じ階層）へアップロードしてください。別フォルダへ配置する場合は、コード内のCSVファイルパスを変更してください。

PHPはサーバー上で実行されるため、PHPファイルをダブルクリックしても動作しません。動作確認はレンタルサーバーへアップロードするか、PHPが利用できるローカル環境で行ってください。

コメント