ポートフォリオを作っている駆け出しのものです。いいね機能を実装したいためwhile文で複数のfavorite_idカラムをもつbuttonを作って、クリックしたらJSでpostしてPHP側のPDOクラスでINSERT INTO favorites (favorite_id ,user, favorite) VALUES (?, ?, ?) ON DUPLICATE KEY UPDATE favorite = ? をexecute()して値が存在してなければ新しくINSERTする。存在していればfavoriteカラムだけ更新する機能を実装できました。
ただこれでは違うidをもつbuttonクリックしても新しくINSERTされないので 、$_POST['favorite_id']で送られてきたidがもともと存在するfavorite_idカラムと違っていれば ON DUPLICATE KEY UPDATE favorite = ?を機能させない条件分岐てきなことをしたいのですが、行き詰まったので回答の方を頂きたいと思ってます。よろしくお願いします。
HTML
1コード 2<?php while ($post = $posts->fetch()) : ?> 3<?php if ($post['user'] !== $member['user']) : ?> 4 <form id="like_form" action="" method="post"> 5 <input type="hidden" name="favorite_id" value="<?php echo $post['id']?>"> 6 <input type="hidden" name="user" value="<?php echo $member['user']?>"> 7 </form> 8 <button class="like__btn"> 9 <span class="icon"><i class="far fa-thumbs-up"></i></span> 10 Like 11 </button> 12 <?php endif; ?> 13<?php endwhile; ?>
SQL
1コード 2テーブル名 favorites 3カラムid, favorite_id, user, favorite
PHP
1コード 2if ($_POST['favorite'] === 'favorite') { 3 $likes = $db->prepare('INSERT INTO favorites (favorite_id ,user, favorite) VALUES (?, ?, ?) ON DUPLICATE KEY UPDATE favorite = ?'); 4 $likes->bindParam(1, $_POST['favorite_id'], PDO::PARAM_INT); 5 $likes->bindParam(2, $_POST['user'], PDO::PARAM_STR); 6 $likes->bindParam(3, $_POST['favorite'], PDO::PARAM_STR); 7 $likes->bindParam(4, $_POST['favorite'], PDO::PARAM_STR); 8 $likes->execute(); 9 } else { 10 $likes = $db->prepare('INSERT INTO favorites (favorite_id ,user, favorite) VALUES (?, ?, ?) ON DUPLICATE KEY UPDATE favorite = ?'); 11 $likes->bindParam(1, $_POST['favorite_id'], PDO::PARAM_INT); 12 $likes->bindParam(2, $_POST['user'], PDO::PARAM_STR); 13 $likes->bindParam(3, $_POST['favorite'], PDO::PARAM_STR); 14 $likes->bindParam(4, $_POST['favorite'], PDO::PARAM_STR); 15 $likes->execute(); 16 }
javascript
1コード 2 const likeBtn = document.querySelectorAll('.like__btn'); 3 let likeIcon = document.querySelectorAll('.icon'); 4 5 for (let i = 0; i < likeBtn.length; i++) { 6 likeBtn[i].addEventListener('click', () => { 7 const postForm = new FormData(document.forms.like_form); 8 if (!clicked) { 9 clicked = true; 10 likeIcon[i].innerHTML = `<i class="fas fa-thumbs-up"></i>`; 11 postForm.set('favorite', 'favorite'); 12 const form = { 13 method: 'post', 14 body: postForm 15 }; 16 17 fetch('index.php', form) 18 .then((res) => { 19 if (res.status !== 200) { 20 throw new Error("system error."); 21 } 22 return res.text(); 23 }).then((text) => { 24 console.log(text); 25 }).catch((e) => { 26 console.log(e.message); 27 }).finally(() => { 28 console.log('done!') 29 30 }); 31 } else { 32 clicked = false; 33 likeIcon[i].innerHTML = `<i class="far fa-thumbs-up"></i>`; 34 postForm.set('favorite', 'notFavorite'); 35 const form = { 36 method: 'post', 37 body: postForm 38 }; 39 40 fetch('index.php', form) 41 .then((res) => { 42 if (res.status !== 200) { 43 throw new Error("system error."); 44 } 45 return res.text(); 46 }).then((text) => { 47 console.log(text); 48 }).catch((e) => { 49 console.log(e.message); 50 }).finally(() => { 51 console.log('done!') 52 53 }); 54 } 55 });
回答1件
あなたの回答
tips
プレビュー