phpで掲示板の実装・jsでいいねボタンの実装

Question

実現したいこと

phpで掲示板を実装し、投稿されたコメントにはjsで実装したいいねボタンを付けたいです。
（いいねボタンの回数制限はなし）

発生している問題・分からないこと

掲示板といいねボタンが押されると各コメントごとに回数が増えていくところまでは実装しました。

しかし、リロードをした際にクリック回数がリセットされてしまうので、ローカルストレージでクリック回数を保存して対応しようと思ったのですが、count[i]のような変動値を複数保存する記述が分かりませんでした。

該当のソースコード

/* 
index.phpには「投稿内容一覧」と「投稿フォーム」を表示
★テーブル情報
    name : 投稿者名
    created_at : 日付
    message : 投稿内容
    good : いいね回数
*/

$_SESSION['csrf-good'] = bin2hex(random_bytes(32));

try {
      $pdo = 'DB接続の記述';
      $sql = "SELECT * FROM net";
　　
　　//●追加start
　　if($_SESSION['csrf-good'] === $_POST['csrf-good']) {
	　$sql = "
		　UPDATE net
		　SET good = good + 1
		　WHERE id = :id"
	　;

　　　$stmt = $pdo->prepare($sql);
　　　$stmt->bindValue(':id' , $_POST['id'] , PDO::PARAM_INT);
　　　$stmt->execute();
　　}
　　//追加end


      $stmt = $pdo->prepare($sql);
      $stmt->execute();
  }catch (PDOException $e) {
    $msg = '接続失敗';
  }


//「class="count-txt"」にいいね回数表示
foreach($stmt as $row) {
   echo '<p>ID:' . $row['id'] . '-' . $row['name'] . '-' . $row['created_at'] . '</p>';
   echo '<p>' . $row['message'] . '</p>';

　//●変更・追加start
　echo '<form method="post">';
　echo '<input type="hidden" name="csrf-good" value="' . $_SESSION['csrf-good'] .'">';
　echo '<input type="hidden" name="id" value="' . $row['id'] . '">' . $row['good'];
　echo '<input type="submit" name="good" value="いいね">';
　echo '</form>';
　//変更・追加end

</button>';
}


<form action="insert.php" method="post">
   お名前<input type="text" name="name"><br>
   投稿内容<textarea name="message"></textarea>
   <input type="submit" name="insert" value="投稿">
</form>

//投稿完了画面
$pdo = 'DB接続の記述';

if(empty($_POST['name'] === null)) {
    $_POST['name'] = '名無し';
}

$sql = "INSERT INTO net(name , message)  
            VALUES(:name , :message)";

$stmt = $pdo->prepare($sql);

$stmt->bindValue(':name' , $_POST['name'] , PDO::PARAM_STR);
$stmt->bindValue(':message' , $_POST['message'] , PDO::PARAM_STR);
        
$stmt->execute();

let goodBtn = document.querySelectorAll('.js-good-btn');
let countTxt = document.querySelectorAll('.count-txt')

let count = {};

for(let i = 0; i < goodBtn.length; i++) {
  count[i] = 0;
  btnAll[i].addEventListener('click' , (e) => {
    count[i] ++;
    countTxt[i].textContent = count[i];
  });
}

試したこと・調べたこと

• teratailやGoogle等で検索した
• ソースコードを自分なりに変更した
• 知人に聞いた
• その他

上記の詳細・結果

forのiに左右されてどうにもうまくいきませんでした。

補足

特になし

Answer 1

単にカウントだけ保存するのであれば、 net テーブルにいいね数のカラムを追加し、いいねボタンがおされたらリクエストを送信、カウントアップする形になるかと思います。
ユーザー自身がいいねを押したかどうかわかるようにし、いいねの取り消し操作も実装するのであればユーザーを判定できる要素も保存する必要が出てくるでしょう。

Comments

[krnkn6]

回答ありがとうございます。
今回はいいねの取り消し等はないものとして一旦作ろうと考えています。

ご指摘いただいた通り、いいねのカラム（good)といいねボタン用のformを追加し、リクエスト送信でカウントアップする方法で実装しました。

しかし、新たな問題点が2つ出てきたので、もしよければご教示いただきたいです。

新たな問題点というのが、「リロード時の二重送信」と「いいねを押す度にページがリロードされてしまう」という点です。

リロード時の二重送信はいつもだと別ページに飛ばしているので、トークンを生成して対策できるのですが、同一ページだとどのように対策すればよいのか分かりません。

twitterなどのようにいいねを押してもカウントアップ処理だけが行われるようにするにはどうすればよいのでしょうか。
jsでイベントキャンセルを試してみましたが、送信自体キャンセルされてしまいます。

[krnkn6]

新たに追加したコードをphpに追加したのでご確認いただけると幸いです。

[Eggpan]

他の人が見た際、質問に対する回答が意味わからないものになるので、全く違う質問に変更するのは控えて欲しいです

[krnkn6]

すみません。
以後気を付けます！
ありがとうございました。