stmtだけはプールされるので、それだけは区別のためにstmt2としないといけない。
揃えてsqlもsql2としただけ。
リアルタイムでいいねを更新しましょう
tweets.jsでしましょう
.doneのところがいま空白
これを使う
ただもうthisが使えないので、（別の関数からはthisがつかえない。この関数をよびだしたやつという意味なので）
変数に入れておきますよ。
var elehoge=$(this);
先生はeleと打っているけど私は勘違いするのであえてelehogeで。
では試しに
.done(function(data){
console.log(data);
とする
いいねを押してみるとひとつずつconsoleで増えている
これをconsoleじゃなくいいねのとこに書き出せばいい
cssでポインターにもする
.done(function(data){
//console.log(data);
elehoge.text("いいね"+'♥'+data);
アイコンの追加
登録済みのu_idと同じ名前のアイコン画像を用意する
画像をDBに登録するにはどうするんだろう？
→いずれ別のタイミングでということ
じゃあいまはアイコン画像をcssフォルダにいれて、
かつ、u_idと同じ名前.pngで保存しておきましょう。
ダブルブッキングしているものを取り出すときは
tweets.u_id AS u
AS句で処理する必要があるらしい
テーブル.カラム名だとfetchしたあとそのまま連想配列に入らないらしい
一般に別名を付けるときはとてもシンプルにする
よって
--->index.php
<?php
session_start();
require_once("config.php");
$sql="SELECT tweets.u_id AS u,nickname,tweet,created,likes,t_id FROM tweets,users WHERE tweets.u_id=users.u_id ORDER BY t_id DESC";
$res=$pdo->query($sql);
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Twitter タイムライン</title>
<link rel="stylesheet" href="css/style.css">
<script src="../jquery-3.4.1.min.js"></script>
</head>
<body>
<div id="container">
<h1>My Twitter</h1>
<!--からっぽでないばあい-->
<?php if(!empty($_SESSION["login"])): ?>
<div id="tweetform">
<form method="post" action="exec.php">
<textarea name="tweet" rows="2" cols="50"></textarea>
<!--<input type="text" name="tweet">-->
<button type="submit">ツイートする<img src="img/player_button08_plus.png"></button>
</div>
<?php else: ?>
<div><a href="login.php">ログインする</a></div>
<?php endif; ?>
<!--ツイートの数だけwhileで繰り返す-->
<?php while($row = $res->fetch(PDO::FETCH_ASSOC)): ?>
<!--articleのくくりが１件のツイートに相当-->
<article>
<header>
<img src="css/<?php echo htmlspecialchars($row["u"],ENT_QUOTES); ?>.png">
<?php echo htmlspecialchars($row["nickname"],ENT_QUOTES); ?>
</header>
<p><?php echo htmlspecialchars($row["tweet"],ENT_QUOTES); ?></p>
<div>
<span data-t_id="<?php echo $row["t_id"]; ?>">いいね<img src="img/heart_small.png"> <?php echo $row["likes"] ?></span>
<?php echo $row["created"]; ?>
</div>
</article>
<?php endwhile; ?>
</div>
<script src="tweet.js"></script>
</body>
</html>
--->style.cssに追加
article header img{
width:60px;
border:3px solid #ddd;
border-radius:9999px;
}
デザイン的にはmarginとpaddingがすべてらしい。
