いいねはAjaxでコントロールしましょう
index.phpに
<script src="../jquery-3.4.1.min.js"></script>
<script src="tweet.js"></script>
を追加
<span id="likes">いいね<img src="img/heart_small.png"> <?php echo $row["likes"] ?></span>
とspan idでくくる
tweet.jsを作る
なにはなくとも
$(function(){
console.log("hoge");
});
で、先ほどのspan id="likes"がクリックされたときに動作する
Ajaxはデータを変更させたりもできる。
何かをセレクトするだけじゃなく
処理そのものを行うこともできるのでちょいとおそろしい。
そのための処理はAPIで事前に用意する必要があるらしい。
APIを作る
しかしその前に、
どのレコードのどのカラムを書き換えたらいいかということになる。
クリックする場所がどこだか予想はつかない。（どのツイートかわからない）
ところが何番の記事なのかがいまどこにもない。
その情報を含ませておかないといけない。
タイムラインのID（t_id）を取ってくる必要がある。
(そもそもindex.phpに表示させる段階で。)
いま<span id="likes">としているがlikes（記事）は1つじゃないはずなので変更する
<span data-t.id="">
データ属性（HTML5から追加）
ユニバーサル属性
・頭がデータ（ハイフン）から始まっていること
・ハイフンの後は好きに使っていい
プログラマに自由にゆだねられた唯一の属性である。
逆にデータメソッドというJクエリのメソッドがあって
ここに書かれている値を取得できるらしい
<span data-t.id="">という形
このなかにechoを仕込む。
→
<span data-t.id="<?php echo $row["t_id"]; ?>">
いいねがクリックされる場所はツイートの数だけある。
クリックされたツイートのID番号をコンソールに出してみましょうか
var t_id=$(this).data();//クリックされた場所のdataを取得
はじめてつかう
dataメソッド
textメソッドと同じ。ゲッターとして機能している
いっこいっこプロパティと値（＝オブジェクト）として取得しているらしい。
これで何番の値を＋＋しろと指示ができるようになった
APIの側に行く
いいねが押されたときにうごくphpのプログラムを作る
新規→
update_likes.php
クリックされたらその指定されたID番号のいいねをインクリメントする
UPDATE文は、必ず最後に条件文をつけましょう
<?php
require_once("config.php");
$sql="UPDATE tweets SET likes=likes+1 WHERE t_id=:t_id";
?>
① WHERE句をつけないと全部のツイートにいいねが1増えるよ
②t_idはget通信で送られてくるはずなのでプレースホルダにしておく
ここまで
--->update_likes.php
<?php
require_once("config.php");
$sql="UPDATE tweets SET likes=likes+1 WHERE t_id=:t_id";
$stmt=$pdo->prepare($sql);//構文を焼く
$stmt->bindValue(":t_id",$_GET["t_id"],PDO::PARAM_INT);//番号だからINT
$stmt->execute();
?>
いまのが動くかテストする
DBの1番のいいねの数を確認したら、
http://localhost/php/makino/twitter/update_likes.php?t_id=1;
これを窓に入力
↓
データベースを更新
増えていますね。
