Back to menu
SVG Rating with PHP and Jquery 0 375

SVG Rating system made with Jquery and PHP Rating System monitors and manages your product's Ratings & Reviews and/or Questions and Answers to ensure perfect quality and accuracy - you are always in control.

Create rating.php

                            
                                


<link rel="stylesheet" href="star-rating-svg.css">   

<div class="my-rating-4"></div>
<span id="messagerate" class='p-2'>

</span>
<script src='jquery.min.js'></script>
<script src='jquery.star-rating-svg.min.js'></script>
<script src='jquery.star-rating-svg.js'></script>



                            
                        

Create style.css

                            
                                
.jq-stars {
  display: inline-block;
}

.jq-rating-label {
  font-size: 22px;
  display: inline-block;
  position: relative;
  vertical-align: top;
  font-family: helvetica, arial, verdana;
}

.jq-star {
  width: 100px;
  height: 100px;
  display: inline-block;
  cursor: pointer;
}

.jq-star-svg {
  padding-left: 3px;
  width: 100%;
  height: 100% ;
}

.jq-star:hover .fs-star-svg path {
}

.jq-star-svg path {
  /* stroke: #000; */
  stroke-linejoin: round;
}

/* un-used */
.jq-shadow {
  -webkit-filter: drop-shadow( -2px -2px 2px #888 );
  filter: drop-shadow( -2px -2px 2px #888 );
}

Create script.js

                            
                                
var product = 'thisproduct';
var user = 'thiuser';
$(".my-rating-4").starRating({
totalStars: 5,
emptyColor: 'lightgray',
hoverColor: 'salmon',
activeColor: 'cornflowerblue',
initialRating: 0,
strokeWidth: 0,
useGradient: false,
callback: function(star){
    $.ajax({
        url: "backend.php",
        type: "POST",
        data: { "product" : product, 
                "star" : star ,
                "user" : user },
        success:function(response){
            $('#messagerate').html(response);
       
        }
    });

}
});                            
                        

Create backend.php

                            
                                
<?php 

if(isset($_POST['product']) && isset($_POST['star']) && isset($_POST['user']) ){

    $product = $_POST['product'];
    $star = $_POST['star'];
    $user = $_POST['user'];
    
    echo 'THANK YOU '.$user.' FOR RATING '.$star.' IN '.$product;

    // your backend code here 
}
    ?>