前提・実現したいこと
PHPで投稿機能を実装する際に評価機能を追加で実装している。
DBに登録した投稿データをforeach文で表示する際に評価機能の
星マークを表示させたい。しかし二つ投稿があるのに対して一つしか表示しない。
foreach文ですべての投稿に評価機能を表示させたい。
発生している問題・エラーメッセージ
php
1 2<!DOCTYPE html> 3<html lang="en"> 4<head> 5 <meta charset="UTF-8"> 6 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8 <link rel="stylesheet" href="/css/sanitize.css"> 9 <link rel="stylesheet" href="/css/style.css"> 10 <title>投稿トップ</title> 11</head> 12 13<body> 14 <main class="top_box"> 15 <?php foreach ($result as $review): ?> 16 <div class=tweetBox> 17 <div class="tweetUser"> 18 <p class="userName"><?php echo h($review['user_name']); ?></p> 19 </div> 20 <div class=tweetFlex> 21 <div class="tweetImage"> 22 <img src="<?php echo h($review['image']); ?>" alt="..."> 23 </div> 24 <div class="tweetText"> 25 <p class="tweetTitle" ><?php echo h($review['title']); ?></p></p> 26 <!-- ここに星評価を表示したいデータは1~5のint型で登録済み --> 27 <p>おすすめ度</p> 28 <!-- <div id="star" data-score="<?php echo h($review['recommends']); ?>"></div> --> 29 <div id= '<?php echo h($review['recommends']); ?>'class="raty<?php echo h($review['recommends']); ?>"></div> 30 </div> 31 </div> 32 33 </div> 34 <?php endforeach; ?> 35 </main> 36 <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script> 37 <script src="/js/jquery.raty.js"></script> 38 <script src="/js/jquery.js"></script> 39 <script type="text/javascript"> 40 $('.raty<?php echo h($review['recommends']); ?>').raty({ 41 readOnly: true, 42 number: 5, 43 score:<?php echo h($review['recommends']); ?>, 44 }); 45 </script> 46</body> 47</html>
試したこと
php
1<body> 2 <?php 3 // header部分 4 include 'templates/header.php'; ?> 5 <main class="top_box"> 6 <?php foreach ($result as $review): ?> 7 <div class=tweetBox> 8 <div class="tweetUser"> 9 <p class="userName"><?php echo h($review['user_name']); ?></p> 10 </div> 11 <div class=tweetFlex> 12 <div class="tweetImage"> 13 <img src="<?php echo h($review['image']); ?>" alt="..."> 14 </div> 15 <div class="tweetText"> 16 <p class="tweetTitle" ><?php echo h($review['title']); ?></p></p> 17 <!-- ここに星評価を表示したいデータは1~5のint型で登録済み --> 18 <p>おすすめ度</p> 19 <div id="star" data-score="<?php echo h($review['recommends']); ?>"></div> 20 </div> 21 </div> 22 23 </div> 24 <?php endforeach; ?> 25 </main> 26 <script type="text/javascript" src="/js/jquery-3.6.0.min.js"></script> 27 <script src="/js/jquery.raty.js"></script> 28 <script src="/js/jquery.js"></script> 29 <script type="text/javascript"> 30 $(function() { 31 $('#star').raty( { 32 readOnly: true, //閲覧者によるスコアの変更不可 33 score: function() { 34 return $(this).attr('data-score'); 35 }, 36 path: '/img/' //サーバ上のRaty画像のパス 37}); 38 }); 39</script> 40</body>
追記
php
1// DBから取得 2public function reviewAll($page = 0): array 3 { 4 $sql = 'SELECT u.name AS user_name, s.* FROM Shrines_review AS s JOIN users AS u on u.id = s.user_id ORDER BY id DESC'; 5 $sql .= ' LIMIT 10 OFFSET '.(10 * $page); 6 $sth = $this->dbh->prepare($sql); 7 $sth->execute(); 8 $result = $sth->fetchAll(PDO::FETCH_ASSOC); 9 10 return $result; 11 } 12// 取得結果 13var_dump($result); 14array(2) { 15 [0]=> 16 array(9) { 17 ["user_name"]=> 18 string(27) "テスト管理ユーザー" 19 ["id"]=> 20 string(1) "4" 21 ["title"]=> 22 string(12) "テスト2" 23 ["recommends"]=> 24 string(1) "4" 25 ["description"]=> 26 string(12) "テスト2" 27 ["image"]=> 28 string(52) "img/20220120103123084AME0226_TP_Vのコピー.jpg" 29 ["created_at"]=> 30 string(19) "2022-01-20 10:31:23" 31 ["updated_at"]=> 32 string(19) "2022-01-20 10:31:23" 33 ["user_id"]=> 34 string(2) "35" 35 } 36 [1]=> 37 array(9) { 38 ["user_name"]=> 39 string(27) "テスト管理ユーザー" 40 ["id"]=> 41 string(1) "3" 42 ["title"]=> 43 string(12) "テスト3" 44 ["recommends"]=> 45 string(1) "3" 46 ["description"]=> 47 string(12) "テスト3" 48 ["image"]=> 49 string(34) "img/20220119050135python_18894.png" 50 ["created_at"]=> 51 string(19) "2022-01-19 17:01:35" 52 ["updated_at"]=> 53 string(19) "2022-01-20 14:00:32" 54 ["user_id"]=> 55 string(2) "35" 56 } 57}
あるサイトにて見つけたコードを参考にし表示させようとしたが
今度は星マークすら表示されなくなった。
画像のルートパス
リンク先
ご助力をお願いします。
補足情報(FW/ツールのバージョンなど)
MAMP
PHP 7.4.21
phpMyAdmin 5.1.0
回答1件
あなたの回答
tips
プレビュー