Cara Membuat Star Rating Menggunakan Jquery, PHP dan Mysql

Assalmualaikum Warahmatullahi Wabarakatu
Bismillahirrahmanirrahiim

Sebelum kita memulai membuat star rating menggunakan jquery, php dan mysql kita terlebih dahulu harus tau apa itu rating?.

Rating adalah suatu penilaian atau evaluasi yang dilakukan oleh individu atau pihak-pihak tertentu terhadap suatu hal. Rating diukur dengan berbagai skala atau scale menggunkan indikator tertentu, disini kita menggunakan indikator star atau bintang yang berupa font dari glypicon. Oke langsung saja ....

Langkah Pertama
Download library file yang dibutuhkan disini.

Langkah Kedua
Extractlah library file yang sudah didownload kedalam local folder root aplikasi sobat, pada tutorial ini saya menggunakan nama folder rating, kemudian ketikalah kode dibawah ini

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Star Rating Menggunakan Jquery, PHP dan Mysql</title>
<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/star-rating.min.css" media="all" rel="stylesheet" type="text/css" />
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/star-rating.min.js"></script> 
</head>
<body>
<?php include_once('rating.php') ?>

  <!-- Fixed navbar -->
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Star Rating</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav>

    <div class="container theme-showcase" role="main">

      <div class="jumbotron" style="margin-top:100px;">
        <h2>Star Rating</h2>
        <p>Cara membuat star rating Menggunakan Jquery, PHP dan Mysql</p>
      </div>

       <div class="col-md-12">
          <div class="col-md-6">
            <center>
              <img src="img/codeigniter.png" height="180">
              <input value="<?= getRatingByProductId(connect(), 1); ?>" type="number" class="rating" min=0 max=5 step=0.1 data-size="md" data-stars="5" productId=1>
              </center>
          </div>
          <div class="col-md-6">
           <center>
            <img src="img/laravel.png">
            <input value="<?= getRatingByProductId(connect(), 2); ?>" type="number" class="rating" min=0 max=5 step=0.1 data-size="md" data-stars="5" productId=2>
            </center>
          </div>
        </div>

    </div>

  <script type="text/javascript">
    $(function(){
      $('.rating').on('rating.change', function(event, value, caption) {
      productId = $(this).attr('productId');
      $.ajax({
            url: "rating.php",
            dataType: "json",
            data: {vote:value, productId:productId, type:'save'},
            success: function( data ) {
            alert("rating saved");
          },
        error: function(e) {
        console.log(e);
      },
        timeout: 30000  
      });
    });
  });
  </script>
</body>
</html>

Langkah Ketiga
Buatlah database dengan nama dbrating, atau sesuai dengan keinginan sobat, kemudian buat tabel seperti schema tabel dibawah ini

1234567CREATE TABLE IF NOT EXISTS `rating` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `product_id` int(11) NOT NULL,
  `vote` float NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB  DEFAULT CHARSET=latin1

Langkah Keempat
Buatlah file dengan nama rating.php, kemudian ketiklah code dibawah ini.

123456789101112131415161718192021222324252627282930313233343536<?php
function connect() {
$hostname = "localhost";
$username = "root";
$password = "";
$dbname = "dbrating";
  $con = mysqli_connect($hostname, $username, $password, $dbname); 
  return $con;
}

function getRatingByProductId($con, $productId) {
 $query = "SELECT SUM(vote) as vote, COUNT(vote) as count from rating WHERE product_id = $productId";

      $result = mysqli_query($con, $query);
      $resultSet = mysqli_fetch_assoc($result);
      if($resultSet['count']>0) {
       return ($resultSet['vote']/$resultSet['count']);
      } else {
       return 0;
      }
 
}

if(isset($_REQUEST['type'])) {
 if($_REQUEST['type'] == 'save') {
  $vote = $_REQUEST['vote'];
  $productId = $_REQUEST['productId'];
       $query = "INSERT INTO rating (product_id, vote) VALUES ('$productId', '$vote')";
       $con = connect();
       $result = mysqli_query($con, $query);
       echo 1; exit;
 } 
}

?>

Langkah Kelima
Jalankan script star rating yang telah sobat buat, jika semuahnya berjalan dengan baik maka sobat akan melihat tampilah seperti gambar dibawah ini.

Sampai disini dulu tutorial dari saya , Semoga tutorial ini bermanfaat bagi sobat, atas segala kekuranganya mohon dimaafkan dan di beri saran untuk source codenya silahkan download dari link dibawah ini.