##はじめに
今回の内容は
PHPで簡単なレビューサイト作成する際に星評価機能を実装するために
jQueryのプラグインを使用した際に表示画面と編集、投稿画面の時に苦労したので
後で見返せるように記述していきたいと思います。
初めて投稿するので至らないところがあると思いますがよろしくお願いします。
##表示画面
一覧画面などでforeach文を使い各評価毎に表示する方法
PHP
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/sanitize.css">
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<?php foreach ((array) $tweets as $tweet): ?>
<div class="tweetText">
<p class="tweetTitle" ><?php echo $tweet['title']; ?></p>
<p class="tweetLevel">おすすめ度</p>
<!-- 星評価機能部分 -->
<div class="raty" name="<?php echo $tweet['recommends']; ?>"></div>
</div>
<?php endforeach; ?>
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
<script src="../js/jquery.raty.js"></script>
<script type="text/javascript">
$('.raty').each(function(){
$(this).raty({
// readOnlyで読み込み専用
readOnly: true,
// 星の表示個数
number: 5,
//スコアは対象になっているclass「raty」の「name」
score: $(this).attr('name'),
path: '/img/' //サーバ上のRaty画像のパス
});
});
</script>
</body>
</html>
foreach文などで繰り返し評価を表示するにはHTMLのname属性のところに変数を入れる。
そしてJavaScriptのところではeachを使用する。scoreの部分でnameの値を読み込み表示させる。
これにより一覧表示画面などで複数での表示が実装できました。
##投稿画面
PHP
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<!-- リセット CSS -->
<link rel="stylesheet" href="/css/sanitize.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<!-- 星評価部分 -->
<div id="targetType"></div>
<input name="score" id="hint" type="hidden" />
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script src="../js/jquery.raty.js"></script>
<script>
// 星評価部分
$('#targetType').raty({
target: '#hint',
targetType: 'score',
targetKeep: true,
path: '/img/' //サーバ上のRaty画像のパス
});
</script>
</body>
</html>
重要なのはJavaScriptの部分でtargetとすることでvalue値を数値で出すことができます。
type="hidden"とすることで数値が画面に表示されずに済み星のみで操作できます。
またtargetKeep:true,とすることでクリック内容が保持されformボタンを押して数値を送ることができます。
##編集画面
PHP
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0"
<!-- リセット CSS -->
<link rel="stylesheet" href="/css/sanitize.css">
<link rel="stylesheet" href="/css/style.css">
</head>
<body>
<!-- 星評価部分 -->
<div id="star" class="stars edit raty"></div>
<input name="score" id="hint" type="hidden" />
<script type="text/javascript" src="../js/jquery-3.6.0.min.js"></script>
<script src="../js/jquery.raty.js"></script>
<script type="text/javascript">
$('#star').raty({
// cancelButton: true,
target: '#hint',
targetType: 'score',
targetKeep: true,
size: 36,
number: 5, //星全体の表示数
score: <?php echo h($review['recommends']); ?>,
path: '/img/' //サーバ上のRaty画像のパス
});
</script>
</body>
</html>
投稿の時と似ていますが表示させる時にはscoreに変数を入れ表示させます。
そして後は投稿のように記述することで変更した値が送られます。
##最後に
今回、初めて投稿させていただきました。
これからもプログラミングの勉強した際の備忘録的な活用ができたらなと思います。
最後まで見ていただきありがとうございました。