index.php
<?php
session_start();
require_once("config.php");
$sql="SELECT 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>
<?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>
user_form.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>ユーザフォーム</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="container">
<h1>ユーザー登録</h1>
<form method="post" action="make_user.php">
<table>
<tr>
<th><label for="u_id">ユーザ名</label></th>
<td><input type="text" name="u_id" id="u_id"></td>
</tr>
<tr>
<th><label for="pass">パスワード</label></th>
<td><input type="password" name="pass" id="pass"></td>
</tr>
<tr>
<th><label for="nickname">ニックネーム</label></th>
<td><input type="text" name="nickname" id="nickname"></td>
</tr>
</table>
<p><button type="submit">登録</button></p>
</form>
</div>
</body>
</html>
make_user.php
<?php
session_start();
require_once("config.php");
$sql="INSERT INTO users(u_id,pass,nickname) VALUES(:u_id,:pass,:nickname)";
$stmt=$pdo->prepare($sql);
$stmt->bindValue(":u_id",$_POST["u_id"],PDO::PARAM_STR);
//passwordのハッシュ
$pass=password_hash($_POST["pass"],PASSWORD_DEFAULT);//第二引数を定数で指定（時代が変わってもOK)
$stmt->bindValue(":pass",$pass,PDO::PARAM_STR);
$stmt->bindValue("nickname",$_POST["nickname"],PDO::PARAM_STR);
$stmt->execute();
//ログインしたことにして、タイムラインにダイレクトに転送
$_SESSION["login"]=true;
$_SESSION["u_id"]=$_POST["u_id"];
$_SESSION["nickname"]=$_POST["nickname"];
//ページに留まるのは危険なので移動
header("Location: index.php");
exit();
?>
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();
?>
style.css
body{
background-image: url("../../img/fish_kue2.png");
color:#333;
}
#container{
width:80%;
margin: auto;
background:#fff;
padding:0.5rem;
border-left:solid 1px #eee;
border-right:solid 1px #eee;
}
table{
border-collapse:collapse;
}
th,td{
border:solid 1px #333;
padding: 0.2rem 0.3rem;
text-align: left;
}
th{
background:#eee;
}
h1{
border-left:10px solid #ffa50a;
/*border-radius:2rem;*/
padding:0.5rem;
color:#ffa50a;
}
/*タイムライン*/
article{
margin:2rem;
border-bottom:dotted 2px #ffa50a;
}
article p{
margin:0.5rem 0;
}
article header{
font-weight:bold;
font-size:0.8rem;
}
article div{
color:#333;
font-size:0.8rem;
text-align:right;
}
article div span{
color:#ffa50a;
padding-right:1.5rem;
}
article div span img{
width:20px;
}
#tweetform img{
width:30px;
}
#tweetform textarea{
font-size:1.2rem;
padding:0.3rem;
border-radius:0.2rem;
}
tweet.js
$(function(){
//console.log("hoge");
$('article div span').on('click',function(){
var t_id=$(this).data();//クリックされた場所のdataを取得
console.log(t_id);
});
});
