Cara menampilkan rating rata-rata di php

Tutorial sistem peringkat bintang 5 PHP;

Peringkat bintang biasanya digunakan untuk memberikan peringkat pada skala tertentu. Ini terutama digunakan oleh pengulas untuk memberi peringkat hal-hal seperti film, acara TV, restoran, hotel, dan produk di situs web eCommerce

Idealnya, sistem bintang satu hingga lima umumnya digunakan dalam penilaian hotel, dengan bintang lima sebagai yang tertinggi dan bintang satu dianggap sebagai yang terendah.

Plugin jQuery bar rating adalah paket mengagumkan yang hadir dengan ciri kuat untuk menampilkan peringkat dalam aplikasi berbasis php, yang minimal dan ringan dan terbaik untuk mengimplementasikan peringkat di PHP

Kami akan membuat peringkat bintang sederhana menggunakan php, dan ini akan berguna untuk menampilkan peringkat rata-rata di php untuk produk dan barang Anda

Tutorial ini akan menggunakan plugin bar jQuery, yang menawarkan ulasan PHP dan skrip peringkat dan fleksibilitas yang mulus untuk membangun sistem peringkat Bintang 5 di PHP

Selanjutnya kami juga akan menjelaskan cara menyimpan nilai rating bintang di database MySQL melalui request AJAX. Selain itu, nilai ini akan terus berubah jika pengguna memperbarui peringkat

Buat Sistem Peringkat Bintang 5 PHP MySQL dengan AJAX

• Langkah 1. Buat Database dan Tabel
• Langkah 2. Koneksi Server PHP MySQL/li>
• Langkah 3. Siapkan Plugin Peringkat Bar jQuery
• Langkah 4. Menampilkan Peringkat Bintang dan Peringkat Rata-Rata
• Langkah 5. Terapkan Peringkat Bintang 5 di PHP

Buat Database dan Tabel

Buka PHPMyAdmin dan buka tab SQL;

Jalankan perintah berikut untuk menghasilkan struktur tabel untuk tabel `produk`

CREATE TABLE `products` (
  `id` int(11) NOT NULL,
  `name` varchar(100) NOT NULL,
  `description` text NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
INSERT INTO products VALUES (1, 'New Balance CK4040 V5', 'Phasellus at scelerisque eros, elementum congue leo.');
INSERT INTO products VALUES (2, 'SS Players Series - Chest Guard', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.');
INSERT INTO products VALUES (3, "Shrey Supporters - TRUNK", "Ut ultrices nibh non orci sollicitudin.");
INSERT INTO products VALUES (4, "New Balance - Batting Inners", "Sed sed magna consequat, cursus felis.");
INSERT INTO products VALUES (5, "Gray-Nicolls TEST Arm Guard", "Etiam vulputate condimentum facilisis.");
INSERT INTO products VALUES (6, "SS Ton Vintage MSD 4.0 - Cricket Bat", "Aliquam nec tortor porttitor, mollis quam sit amet.");
INSERT INTO products VALUES (7, "Shrey Pro Guard - Titanium", "Vivamus lacinia augue id ipsum luctus molestie.");

Jalankan perintah untuk membuat struktur tabel untuk tabel `product_rating`

CREATE TABLE `product_rating` (
  `id` int(11) NOT NULL,
  `user_id` int(11) NOT NULL,
  `product_id` int(11) NOT NULL,
  `rating` int(2) NOT NULL,
  `timestamp` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

Koneksi Server PHP MySQL

Masuk ke folder proyek Anda, buat folder database dan beri nama seperti db. php, tambahkan nama database, username dan password untuk menghubungkan PHP ke server

Untuk membuat koneksi database PHP dan MySQL, perbarui database/db. file php

<?php
    $servername = 'localhost';
    $username = 'root';
    $password = '';
    $dbname = "php_db";
    $connection = mysqli_connect($servername, $username, $password, $dbname);
      
    // Validate database connection
    if(!$connection){
        die('Database connection error : ' .mysql_error());
    }
    
?>

Siapkan Plugin Peringkat Bar jQuery

Pada langkah ini, kita akan menginstal dan mengonfigurasi plugin bar jQuery ke dalam proyek PHP MySQL;

Kemudian, Anda perlu membuat folder aset dan unzip paket rating bar di dalam direktori assets/jquery-bar-rating-master

Dari direktori ini Anda harus mengimpor dan menambahkan CSS dan library paket rating dan font awesome

Menampilkan Peringkat Bintang dan Peringkat Rata-Rata

Pada langkah ini, kami akan menunjukkan kepada Anda cara mengambil produk dari database, mendapatkan peringkat dari tabel peringkat produk, dan menghitung serta menampilkan peringkat numerik di kartu produk

Pastikan untuk membuat show_star_ratings. php juga menambahkan semua kode berikut di dalam file

<?php
    $user_id = 1;
    $query = "SELECT * FROM products";
    $result = mysqli_query($connection, $query);
    
    while($row = mysqli_fetch_array($result)){
        $product_id = $row['id'];
        $name = $row['name'];
        $description = $row['description'];
        // Star rating
        $query = "SELECT * FROM product_rating WHERE product_id = " . $product_id . " and user_id = " . $user_id;
        $productResult = mysqli_query($connection, $query);
        $getRating = mysqli_fetch_array($productResult);
        $rating = $getRating['rating'];
        // Rating
        $query = "SELECT ROUND(AVG(rating), 1) as numRating FROM product_rating WHERE product_id=".$product_id;
        $avgresult = mysqli_query($connection, $query);
        $fetchAverage = mysqli_fetch_array($avgresult);
        $numRating = $fetchAverage['numRating'];
        if($numRating <= 0){
            $numRating = "Not ratings given.";
        }
?>
<div class="card mb-3">
    <div class="card-body">
        <h2 class="card-title"><?php echo $name; ?></h2>
        <p class="card-text">
            <?php echo $description; ?>
        </p>
        <!-- 5 Star Rating -->
        <select name="star_rating_option" class="rating" id='star_rating_<?php echo $product_id; ?>'
            data-id='rating_<?php echo $product_id; ?>'>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select>
        Rating : <span id='numeric_rating_<?php echo $product_id; ?>'><?php echo $numRating; ?></span>                
    </div>
</div>
<?php } ?>

jQuery Bar Rating Plugin mengonversi bidang opsi pilihan biasa menjadi widget peringkat. Anda juga dapat memperluas desain sistem peringkat bintang ini menggunakan CSS

Terapkan Peringkat Bintang 5 di PHP

Selanjutnya, Anda harus membuat ajax_star_rating. php di root proyek php Anda segera setelah membuka file ini dan menambahkan kode yang disarankan di dalamnya

Terutama, melalui file ini, kami memeriksa peringkat di dalam tabel product_rating. Jika kami tidak menemukan peringkat apa pun di tabel, maka kami memasukkan peringkat tersebut, dan jika ditemukan peringkat yang ada, maka perbarui atau ganti dengan peringkat saat ini

Selain itu, kami juga menghitung nilai rata-rata melalui Fungsi SQL ROUND(AVG).

<?php
include "./database/db.php";
$user_id = 1;
$product_id = $_POST['product_id'];
$rating = $_POST['rating'];
// Check rating inside the table
$query = "SELECT COUNT(*) AS countProduct FROM product_rating WHERE product_id = " . $product_id . " and user_id = " . $user_id;
$result = mysqli_query($connection, $query);
$getdata = mysqli_fetch_array($result);
$count = $getdata['countProduct'];
if($count == 0){
 $insertquery = "INSERT INTO product_rating(user_id, product_id, rating) values(". $user_id .", ". $product_id .", ". $rating .")";
 mysqli_query($connection, $insertquery);
}else {
 $updateRating = "UPDATE product_rating SET rating=" . $rating . " where user_id=" . $user_id . " and product_id=" . $product_id;
 mysqli_query($connection, $updateRating);
}
// fetch rating
$query = "SELECT ROUND(AVG(rating),1) as numRating FROM product_rating WHERE product_id=".$product_id;
$result = mysqli_query($connection, $query) or die(mysqli_error());
$getAverage = mysqli_fetch_array($result);
$numRating = $getAverage['numRating'];
$return_arr = array("numRating"=>$numRating);
echo json_encode($return_arr);

Akhirnya, Anda perlu membuat index. php dan impor file koneksi database, jQuery dari CDN, import bar rating JavaScript, bootstrap CSS, dan fontawesome dan fontawesome-stars CSS

Jangan lupa tambahkan script bar rating di bagian bawah untuk menginisialisasi sistem rating bintang di aplikasi PHP

Perbarui indeks. php dengan kode yang disarankan

<?php include "./database/db.php"; ?>
<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/latest/css/font-awesome.min.css">
    <link href='./assets/jquery-bar-rating-master/dist/themes/fontawesome-stars.css' rel='stylesheet' type='text/css'>
    <link href="./styles.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <div class="content container mt-5">
       <?php include "./show_star_ratings.php"; ?>
    </div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./assets/jquery-bar-rating-master/dist/jquery.barrating.min.js"></script>
<!-- Invoke star rating -->
<script type='text/javascript'>
    $(document).ready(function(){
        $('#star_rating_<?php echo $product_id; ?>').barrating('set',<?php echo $rating; ?>);
    });
    $(function () {
        $('.rating').barrating({
            theme: 'fontawesome-stars',
            onSelect: function (value, text, event) {
                
                var el = this;
                var el_id = el.$elem.data('id');
                
                if (typeof (event) !== 'undefined') {
                    var split_id = el_id.split("_");
                    var product_id = split_id[1];
                    $.ajax({
                        url: './ajax_star_rating.php',
                        type: 'post',
                        data: {
                            product_id: product_id,
                            rating: value
                        },
                        dataType: 'json',
                        success: function (data) {
                            var average = data['numRating'];
                            $('#numeric_rating_' + product_id).text(average);
                        }
                    });
                }
            }
        });
    });
</script>
</html>

Kami sengaja meneruskan $user_id secara statis, namun Anda dapat mengatur variabel $session untuk $user_id untuk mengelola sistem peringkat dengan sempurna

Kesimpulan

Jadi itu saja untuk saat ini;

Kami harap tutorial ini akan membantu Anda memahami segala hal yang terkait dengan topik dengan lebih baik. Namun, bukan hanya peringkat bintang, tetapi Anda juga dapat membuat peringkat persegi, peringkat pil, peringkat terbalik, peringkat horizontal, dan peringkat film dengan plugin yang luar biasa ini

Digamber

Saya Digamber, full-stack developer dan pecinta kebugaran. Saya membuat situs ini untuk memberikan pengalaman coding saya dengan programmer pemula. Saya suka menulis di JavaScript, ECMAScript, React, Angular, Vue, Laravel

Posting yang Direkomendasikan

PHP 8 AJAX Live Data Search dengan MySQL TutorialPHP 8 Select2 Multi Select dengan jQuery AJAX TutorialPHP 8 JSON Data Encode and DecodeContoh Tutorial Validasi Formulir PHP 8 Server SideFormulirMengintegrasikan Google reCAPTCHA di PHP 8 Formulir KontakCara Membuat Captcha di Formulir Kontak PHPBuat Formulir Kontak di PHP 8 . Dapatkan Nilai yang Dipilih dan Tambahkan GayaCara Mendapatkan Nilai yang Dipilih dari Opsi Pilih di PHP 8Dapatkan Banyak Nilai dari Kotak Centang yang Dipilih di PHP 8Buat Paginasi di PHP 8 dengan MySQL dan BootstrapBangun Formulir Pendaftaran Pengguna (Pendaftaran) PHP 8 dengan MySQL

Bagaimana cara menemukan peringkat rata-rata di PHP?

Bagaimana cara menampilkan peringkat bintang di PHP?

Bagaimana cara menghitung nilai rata-rata dari 5 di PHP?

Bagaimana Anda menghitung peringkat rata-rata untuk sebuah pertunjukan?