PHPでAjaxを使ったCSV更新機能を作る方法【サンプルコード付き】

PHPでAjaxを使ったCSV更新機能を作る方法

PHPでAjaxを使ったCSV更新機能を作る方法を紹介します。Ajaxとは、ページを再読み込みせずにJavaScriptからサーバーへ通信する仕組みです。このサンプルでは、CSVファイルに保存されたデータを非同期で更新できます。設定画面や簡易管理画面、メモ編集機能などを作成したい場合に利用できます。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

Ajax CSV更新フォーム

ID	テキスト	操作
1	サンプルテキスト1
2	サンプルテキスト2
3	サンプルテキスト3

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

<?php

// CSVファイル名です
$csv_file = 'data.csv';

// CSVデータを読み込む関数です
function load_csv_data($csv_file) {

    $rows = [];

    if (!file_exists($csv_file)) {
        return $rows;
    }

    $fp = fopen($csv_file, 'r');

    if ($fp) {

        // 1行目の見出しを読み飛ばします
        fgetcsv($fp);

        while (($data = fgetcsv($fp)) !== false) {

            if (count($data) >= 2) {
                $rows[] = [
                    'id' => $data[0],
                    'text' => $data[1]
                ];
            }

        }

        fclose($fp);
    }

    return $rows;
}

// Ajax更新時の処理です
if (
    $_SERVER['REQUEST_METHOD'] === 'POST' &&
    isset($_POST['id']) &&
    isset($_POST['text'])
) {

    $id = trim($_POST['id']);
    $text = trim($_POST['text']);

    if ($id === '' || $text === '') {
        echo '更新内容を入力してください。';
        exit;
    }

    $rows = load_csv_data($csv_file);
    $updated = false;

    // 指定されたIDの行だけ上書きします
    foreach ($rows as &$row) {

        if ($row['id'] === $id) {
            $row['text'] = $text;
            $updated = true;
            break;
        }

    }

    unset($row);

    if ($updated) {

        $fp = fopen($csv_file, 'w');

        if ($fp) {

            // 見出し行を書き込みます
            fputcsv($fp, ['id', 'text']);

            foreach ($rows as $row) {
                fputcsv($fp, [
                    $row['id'],
                    $row['text']
                ]);
            }

            fclose($fp);

            echo 'CSVを更新しました。';

        } else {
            echo 'CSVの更新に失敗しました。';
        }

    } else {
        echo '更新対象のデータが見つかりません。';
    }

    exit;
}

// 画面表示用にCSVを読み込みます
$rows = load_csv_data($csv_file);

?>

<!DOCTYPE html>
<html lang="ja">
<head>

<meta charset="UTF-8">

<title>Ajax CSV更新</title>

<style>
body{
    font-family:sans-serif;
    background:#f8fafc;
    margin:40px;
}

.php-ajax-csv-update_wrap{
    max-width:700px;
    margin:0 auto;
    padding:24px;
    border:1px solid #e5e7eb;
    border-radius:18px;
    background:#ffffff;
}

.php-ajax-csv-update_title{
    font-size:22px;
    font-weight:bold;
    margin-bottom:20px;
}

.php-ajax-csv-update_table{
    width:100%;
    border-collapse:collapse;
    margin-bottom:20px;
}

.php-ajax-csv-update_table th,
.php-ajax-csv-update_table td{
    border:1px solid #d1d5db;
    padding:10px;
    text-align:left;
}

.php-ajax-csv-update_table th{
    background:#f1f5f9;
}

.php-ajax-csv-update_active{
    background:#fff8c5;
}

.php-ajax-csv-update_edit{
    border:none;
    background:#0b6bff;
    color:#ffffff;
    padding:8px 14px;
    border-radius:8px;
    cursor:pointer;
}

.php-ajax-csv-update_now{
    display:none;
    margin-bottom:12px;
    padding:10px;
    background:#eff6ff;
    border:1px solid #bfdbfe;
    border-radius:10px;
    color:#1d4ed8;
    font-weight:bold;
}

.php-ajax-csv-update_input{
    width:100%;
    box-sizing:border-box;
    padding:12px;
    border:1px solid #d1d5db;
    border-radius:10px;
    margin-bottom:12px;
}

.php-ajax-csv-update_save{
    width:100%;
    height:46px;
    border:none;
    border-radius:10px;
    background:#16a34a;
    color:#ffffff;
    font-weight:bold;
    cursor:pointer;
}

.php-ajax-csv-update_result{
    display:none;
    margin-top:16px;
    padding:14px;
    border:1px solid #bbf7d0;
    border-radius:12px;
    background:#f0fdf4;
    color:#15803d;
}
</style>

</head>
<body>

<div class="php-ajax-csv-update_wrap">

    <div class="php-ajax-csv-update_title">
        Ajax CSV更新フォーム
    </div>

    <table class="php-ajax-csv-update_table">

        <tr>
            <th>ID</th>
            <th>テキスト</th>
            <th>操作</th>
        </tr>

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

            <tr>
                <td><?= htmlspecialchars($row['id'], ENT_QUOTES, 'UTF-8') ?></td>
                <td class="dataText"><?= htmlspecialchars($row['text'], ENT_QUOTES, 'UTF-8') ?></td>
                <td>
                    <button
                        class="php-ajax-csv-update_edit"
                        type="button"
                    >
                        編集
                    </button>
                </td>
            </tr>

        <?php endforeach; ?>

    </table>

    <div
        id="editInfo"
        class="php-ajax-csv-update_now"
    ></div>

    <input
        id="editText"
        class="php-ajax-csv-update_input"
        type="text"
        placeholder="編集するテキスト"
    >

    <button
        id="updateButton"
        class="php-ajax-csv-update_save"
        type="button"
    >
        Ajaxで更新する
    </button>

    <div
        id="result"
        class="php-ajax-csv-update_result"
    ></div>

</div>

<script>

let currentId='';
let currentCell=null;
let currentRow=null;

// 編集ボタン押下時の処理です
document.querySelectorAll('.php-ajax-csv-update_edit').forEach(function(button){

    button.addEventListener('click',function(){

        document.querySelectorAll('.php-ajax-csv-update_table tr')
            .forEach(function(tr){
                tr.classList.remove('php-ajax-csv-update_active');
            });

        currentRow=this.closest('tr');
        currentRow.classList.add('php-ajax-csv-update_active');

        currentId=currentRow.children[0].textContent;
        currentCell=currentRow.querySelector('.dataText');

        document.getElementById('editInfo').style.display='block';
        document.getElementById('editInfo').textContent='編集中：ID ' + currentId;

        document.getElementById('editText').value=currentCell.textContent;
        document.getElementById('editText').focus();

    });

});

// AjaxでCSVを更新します
document.getElementById('updateButton').addEventListener('click',function(){

    const text=document.getElementById('editText').value.trim();
    const result=document.getElementById('result');

    if(currentId===''){

        result.textContent='編集する行を選択してください。';
        result.style.display='block';
        return;

    }

    if(text===''){

        result.textContent='テキストを入力してください。';
        result.style.display='block';
        return;

    }

    fetch(location.href,{

        method:'POST',

        headers:{
            'Content-Type':'application/x-www-form-urlencoded'
        },

        body:new URLSearchParams({
            id:currentId,
            text:text
        })

    })

    .then(response=>response.text())

    .then(data=>{

        result.textContent=data;
        result.style.display='block';

        if(currentCell){
            currentCell.textContent=text;
        }

    });

});

</script>

</body>
</html>

id,text
1,サンプルテキスト1
2,サンプルテキスト2
3,サンプルテキスト3