kangjaz

detail_rating

Oct 1st, 2020
836
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <?php
  2. //validasi url, jika tidak ada id maka kembalikan ke index
  3. if (!is_numeric($_GET['id'])) {
  4.     header('location:./');
  5. }
  6. //include koneksi
  7. require_once('./connect.php');
  8.  
  9. //ambil data content
  10. $get = $con->query("SELECT c.id_content AS id_content, judul, isi, AVG(rating) AS rate, gambar FROM tbl_content c LEFT JOIN tbl_rating r ON(c.id_content = r.id_content) WHERE c.id_content = '" . $_GET['id'] . "' GROUP BY c.id_content");
  11.  
  12. //cek apakah Content ditemukan, jika tidak maka kembalikan ke index
  13. if ($get->num_rows < 1) {
  14.     header('location:./');
  15. }
  16.  
  17. //fetch data
  18. $d = $get->fetch_assoc();
  19.  
  20. //buat looping untuk rating
  21. $star = '';
  22.  
  23. for ($i = 1; $i <= 5; $i++) {
  24.     if ($i <= ceil($d['rate'])) {
  25.         //masukkan rating ke variabel $star
  26.         $star .= '<span class="on"><i class="fa fa-star"></i></span>';
  27.     } else {
  28.         //masukkan rating ke variabel $star
  29.         $star .= '<span class="off"><i class="fa fa-star"></i></span>';
  30.     }
  31. }
  32.  
  33. //cek rating yang diberikan user berdasarkan ip user
  34. $cek    = $con->query("SELECT * FROM `tbl_rating` WHERE ipuser = '" . md5($_SERVER['REMOTE_ADDR']) . "' AND id_content = '" . $_GET['id'] . "'");
  35.  
  36. if ($cek->num_rows > 0) {
  37.     $cek = $cek->fetch_assoc();
  38.     $c   = $cek['rating'];
  39. }
  40.  
  41. ?>
  42. <!DOCTYPE html>
  43. <html lang="en">
  44.  
  45. <head>
  46.     <meta charset="UTF-8">
  47.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  48.     <title>Detail Content</title>
  49.     <!-- bootstrap css versi 4 -->
  50.     <link rel="stylesheet" href="./css/bootstrap.css">
  51.     <!-- custom css -->
  52.     <style>
  53.         @import url(./fonts/font-awesome/css/font-awesome.css);
  54.  
  55.  
  56.         form,
  57.         label {
  58.             margin: 0;
  59.             padding: 0;
  60.         }
  61.  
  62.         .rating {
  63.             border: none;
  64.             float: left;
  65.         }
  66.  
  67.         .rating>input {
  68.             display: none;
  69.         }
  70.  
  71.         .rating>label::before {
  72.             margin: 5px;
  73.             font-size: 1.25em;
  74.             font-family: FontAwesome;
  75.             display: inline-block;
  76.             content: "\f005";
  77.         }
  78.  
  79.         .rating>label {
  80.             color: #ddd;
  81.             float: right;
  82.         }
  83.  
  84.         .rating>input:checked~label,
  85.         .rating:not(:checked)>label:hover,
  86.         .rating:not(:checked)>label:hover~label {
  87.             color: #f7d106;
  88.         }
  89.  
  90.         .rating>input:checked+label:hover,
  91.         .rating>input:checked~label:hover,
  92.         .rating>label:hover~input:checked~label,
  93.         .rating>input:checked~label:hover~label {
  94.             color: #fce873;
  95.         }
  96.  
  97.         .star {
  98.             float: left;
  99.             padding-right: 20px;
  100.         }
  101.  
  102.         .star span {
  103.             padding: 3px;
  104.             font-size: 20px;
  105.         }
  106.  
  107.         .on {
  108.             color: #f7d106
  109.         }
  110.  
  111.         .off {
  112.             color: #ddd;
  113.         }
  114.     </style>
  115. </head>
  116.  
  117. <body>
  118.     <div class="container">
  119.  
  120.         <div class="row mt-4">
  121.             <div class="col-md-3">
  122.                 <img src="./img/<?php echo $d['gambar']; ?>" width="100%">
  123.             </div>
  124.             <div class="col-md-9">
  125.                 <h4><?php echo $d['judul']; ?></h4>
  126.                 <div class="star">
  127.                     <?php echo $star; ?> (<?php echo ($d['rate'] != '') ? (int)$d['rate'] : 0; ?>/5)
  128.                 </div>
  129.                 <div class="clearfix"></div>
  130.                 <p class="lead"><?php echo $d['isi']; ?></p>
  131.                 <a href="./" class="btn btn-secondary">Kembali</a>
  132.             </div>
  133.         </div>
  134.  
  135.         <div class="row mt-4">
  136.             <h4>Silahkan Berikan penilaian anda</h4>
  137.         </div>
  138.  
  139.         <div class="row">
  140.             <form id='rating' class="rating">
  141.                 <input type="hidden" name="id_content" id="IDContent" value="<?php echo $d['id_content']; ?>">
  142.  
  143.                 <input type="radio" class="rate" id="star5" name="rating" value="5" <?php if (isset($c) && $c == '5') {
  144.                                                                                         echo 'checked';
  145.                                                                                     } ?> />
  146.                 <label for="star5" title="Sempurna - 5 Bintang"></label>
  147.  
  148.                 <input type="radio" class="rate" id="star4" name="rating" value="4" <?php if (isset($c) && $c == '4') {
  149.                                                                                         echo 'checked';
  150.                                                                                     } ?> />
  151.                 <label for="star4" title="Sangat Bagus - 4 Bintang"></label>
  152.  
  153.                 <input type="radio" class="rate" id="star3" name="rating" value="3" <?php if (isset($c) && $c == '3') {
  154.                                                                                         echo 'checked';
  155.                                                                                     } ?> />
  156.                 <label for="star3" title="Bagus - 3 Bintang"></label>
  157.  
  158.                 <input type="radio" class="rate" id="star2" name="rating" value="2" <?php if (isset($c) && $c == '2') {
  159.                                                                                         echo 'checked';
  160.                                                                                     } ?> />
  161.                 <label for="star2" title="Tidak Buruk - 2 Bintang"></label>
  162.  
  163.                 <input type="radio" class="rate" id="star1" name="rating" value="1" <?php if (isset($c) && $c == '1') {
  164.                                                                                         echo 'checked';
  165.                                                                                     } ?> />
  166.                 <label for="star1" title="Buruk - 1 Bintang"></label>
  167.             </form>
  168.         </div>
  169.  
  170.     </div> <!-- end container -->
  171.  
  172.     <script type="text/javascript" src="./js/jquery-2.1.4.min.js"></script>
  173.     <script type="text/javascript">
  174.         $(document).ready(function() {
  175.             $("#rating .rate").click(function() {
  176.  
  177.                 $.ajax({
  178.                     url: "./proses.php",
  179.                     method: "POST",
  180.                     data: {
  181.                         rate: $(this).val(),
  182.                         id: $('#IDContent').val()
  183.                     },
  184.                     success: function(obj) {
  185.                         var obj = obj.split('|');
  186.  
  187.                         $('#star' + obj[0]).attr('checked');
  188.                         $('#hasil').html('Rating ' + obj[1] + '.0');
  189.                         $('.star').html(obj[2]);
  190.                         alert("terima kasih atas penilaian anda");
  191.                     }
  192.                 });
  193.             });
  194.         });
  195.     </script>
  196. </body>
  197.  
  198. </html>
RAW Paste Data