円グラフのプラグイン Circliful：進み具合をデータベースに保存する

<?php
// レッスンの完了状態を読み書きする関数
// 見本なので、データベースの代わりに「セッション」に保存します
// （セッション＝サーバーが、見ている人ごとに用意してくれる一時的な保存場所）

const LESSON_COUNT = 4;

if (session_status() === PHP_SESSION_NONE) {
    session_start();
}

// 保存されている完了状態を読む（まだ何もなければ、全部「未完了」）
function lessons_load(): array
{
    $saved = $_SESSION['lessons'] ?? null;
    if (!is_array($saved) || count($saved) !== LESSON_COUNT) {
        $saved = array_fill(0, LESSON_COUNT, false);
    }
    return array_map('boolval', array_values($saved));
}

// $no 番目（0 から数える）のレッスンの完了状態を保存する
function lessons_save(int $no, bool $done): void
{
    $lessons = lessons_load();
    $lessons[$no] = $done;
    $_SESSION['lessons'] = $lessons;
}

// 全部「未完了」に戻す
function lessons_reset(): void
{
    $_SESSION['lessons'] = array_fill(0, LESSON_COUNT, false);
}

// 画面に必要な数字をまとめて返す
function lessons_summary(): array
{
    $done  = lessons_load();
    $count = count(array_filter($done));
    return [
        'done'  => $done,                                     // 例: [true, false, true, false]
        'count' => $count,                                    // 完了した数
        'ratio' => (int)round($count / LESSON_COUNT * 100),   // 進み具合（%）
    ];
}

<?php foreach ($titles as $i => $title): ?>
<?php   $on = $state['done'][$i]; ?>
      <li>第<?= $i + 1 ?>回 <?= htmlspecialchars($title, ENT_QUOTES, 'UTF-8') ?>
        <button type="button" class="btn switch<?= $on ? ' ON' : '' ?>" data-no="<?= $i ?>"><?= $on ? '完了済' : '未完了' ?></button></li>
<?php endforeach; ?>

  // ① 円グラフを作る（PHP が読み込んだ、保存済みの進み具合から始める）
  $("#circle").circliful({
    percent: <?= $state['ratio'] ?>
  });

  // ② 完了ボタンを押したら、新しい状態を save.php に送る
  $("button.switch").on("click", function(){
    var done = $(this).hasClass("ON") ? 0 : 1;   // 今と反対の状態にする
    send({ action: "save", no: $(this).data("no"), done: done });
  });

<?php
// ajax で受け取った完了状態を保存して、今の状態を JSON で返す
require_once __DIR__ . '/lesson_store.php';
header('Content-Type: application/json; charset=UTF-8');

$action = $_POST['action'] ?? '';

if ($action === 'save') {
    // レッスンの番号が 0〜3 の整数かどうか確かめる
    $no = filter_var($_POST['no'] ?? '', FILTER_VALIDATE_INT,
        ['options' => ['min_range' => 0, 'max_range' => LESSON_COUNT - 1]]);
    if ($no === false) {
        http_response_code(400);
        echo json_encode(['error' => 'レッスンの番号が正しくありません'], JSON_UNESCAPED_UNICODE);
        exit;
    }
    lessons_save($no, ($_POST['done'] ?? '') === '1');
} elseif ($action === 'reset') {
    lessons_reset();
}

echo json_encode(lessons_summary(), JSON_UNESCAPED_UNICODE);

  // ④ サーバーに送り、返ってきた状態で画面を作り直す
  function send(data) {
    $.post("save.php", data, null, "json")
      .done(function(res){
        $("button.switch").each(function(i){
          $(this).toggleClass("ON", res.done[i]).text(res.done[i] ? "完了済" : "未完了");
        });
        $("#circle .circle").attr("stroke-dasharray", (res.ratio * 3.6) + ", 20000");
        $("#circle .number").text(res.ratio);
        $("#cmp").text(res.count);
        $("#ratio").text(res.ratio);
        $("#msg").text("保存しました");
      })
      .fail(function(){
        $("#msg").text("保存できませんでした。時間をおいて試してください。");
      });
  }

CREATE TABLE lesson_progress (
  user_id   INT NOT NULL,        -- 会員の番号
  lesson_no INT NOT NULL,        -- レッスンの番号（0〜3）
  done      TINYINT(1) NOT NULL, -- 完了なら 1
  PRIMARY KEY (user_id, lesson_no)
);

function lessons_save(int $no, bool $done): void
{
    $stmt = db()->prepare(
        'INSERT INTO lesson_progress (user_id, lesson_no, done) VALUES (:user, :no, :done)
         ON DUPLICATE KEY UPDATE done = VALUES(done)'   // あれば書き換え、なければ追加
    );
    $stmt->execute([':user' => current_user_id(), ':no' => $no, ':done' => (int)$done]);
}