php

Star Rating System in jQuery PHP MYSQL

This tutorial will teach you how to make Star Rating System in jQuery PHP MYSQL. The rating management system is made to rate an individual’s skillset accordingly.

Database connection

db_connection.php

<?php


$servername = "localhost";//Server Name
$username = "root";//Server User Name
$password = "";//Server Password
$dbname = "billdb";//Database Name

//Create DB Connection
$conn = mysqli_connect($servername,$username,$password,$dbname);

?>

 

add_rate.php

<html>
<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.0/css/bootstrap.min.css" integrity="sha384-SI27wrMjH3ZZ89r4o+fGIJtnzkAnFs3E4qz9DIYioCQ5l9Rd/7UAa8DHcaL8jkWt" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.css">
</head>
<body>
<div class="container">
    <div class="row">

<form action="add_rate.php" method="post">

    <div>
        <h3>Student Rating System</h3>
    </div>

    <div>
         <label>Name</label>
        <input type="text" name="name">
    </div>

         <div class="rateyo" id= "rating"
         data-rateyo-rating="4"
         data-rateyo-num-stars="5"
         data-rateyo-score="3">
         </div>

    <span class='result'>0</span>
    <input type="hidden" name="rating">

    </div>

    <div><input type="submit" name="add"> </div>

</form>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/rateYo/2.3.2/jquery.rateyo.min.js"></script>

<script>


    $(function () {
        $(".rateyo").rateYo().on("rateyo.change", function (e, data) {
            var rating = data.rating;
            $(this).parent().find('.score').text('score :'+ $(this).attr('data-rateyo-score'));
            $(this).parent().find('.result').text('rating :'+ rating);
            $(this).parent().find('input[name=rating]').val(rating); //add rating value to input field
        });
    });

</script>
</body>

</html>
<?php
require 'db_connection.php';
if ($_SERVER["REQUEST_METHOD"] == "POST")
{
    $name = $_POST["name"];
    $rating = $_POST["rating"];

    $sql = "INSERT INTO ratee (name,rate) VALUES ('$name','$rating')";
    if (mysqli_query($conn, $sql))
    {
        echo "New Rate addedddd successfully";
    }
    else
    {
        echo "Error: " . $sql . "<br>" . mysqli_error($conn);
    }
    mysqli_close($conn);
}
?>

i have attached the video link below. which will do this tutorials step by step.

admin

Recent Posts

Fish Inventory Shop Management System in Angular

This article explain how to make a Fish Inventory Management App in Angular.this app explain…

6 days ago

Fish Inventory Management with React

Introduction to Fish Inventory Management In the aquaculture industry, managing fish inventory is crucial for…

1 week ago

Java GUI CRUD for Beginners

Introduction to Java GUI CRUD Java is a powerful programming language widely used for building…

1 week ago

Creating Beautiful Login Form Design Using React

Introduction to Login Form Design Designing an effective and beautiful login form is crucial for…

2 weeks ago

Creating Responsive Login Form with React

Introduction In today creating a responsive login form is essential for providing a seamless user…

2 weeks ago

Master React Inventory Management System Development

Introduction to Inventory Management Systems In today's fast-paced digital environment, businesses require efficient inventory management…

3 weeks ago