index_new_rating

<?php
//include file koneksi
require_once('./connect.php');
?>
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Star Rating System</title>
    <!-- bootstrap css versi 4 -->
    <link rel="stylesheet" href="./css/bootstrap.css">
    <!-- custom css -->
    <style>
        @import url(./fonts/font-awesome/css/font-awesome.css);

        .star {
            float: left;
            padding-right: 20px;
        }

        .star span {
            padding: 3px;
            font-size: 20px;
        }

        .on {
            color: #f7d106
        }

        .off {
            color: #ddd;
        }
    </style>
</head>

<body>
    <div class="container">

        <h4 class="display-4">Star Rating System</h4>
        <hr />

        <div class="row">
            <div class="col-md-6">
                <?php
                //ambil data content beserta rating
                $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) GROUP BY c.id_content");

                //cek jumlah data
                if ($get->num_rows > 0) {

                    //looping untuk membaca data
                    while ($d = $get->fetch_assoc()) {
                        //buat looping untuk rating
                        $star = '';

                        for ($i = 1; $i <= 5; $i++) {
                            if ($i <= ceil($d['rate'])) {
                                //masukkan rating ke variabel $star
                                $star .= '<span class="on"><i class="fa fa-star"></i></span>';
                            } else {
                                //masukkan rating ke variabel $star
                                $star .= '<span class="off"><i class="fa fa-star"></i></span>';
                            }
                        }

                        //tampilkan content
                        echo '<div class="card mb-3">
                        <div class="row no-gutters">
                            <div class="col-md-4">
                                <img src="./img/' . $d['gambar'] . '" class="card-img">
                            </div>
                            <div class="col-md-8">
                                <div class="card-body">
                                    <h5 class="card-title my-1">' . $d['judul'] . '</h5>
                                    <div class="star">' . $star . '</div>
                                    <div class="clearfix"></div>
                                    <p class="card-text">' . substr($d['isi'], 0, 100) . '...</p>
                                    <a href="./detail.php?id=' . $d['id_content'] . '" class="btn btn-primary">Detail</a>
                                </div>
                            </div>
                        </div>
                    </div>';
                    }
                }
                ?>
            </div>
        </div>
    </div>
</body>

</html>