website-developer-in-meerut
website-designer-in-meerut
freelance-webite-developer

Need an Eye-caching Website - Contact Me Today !

user-rating-with-review-system-in-php-mysql-using-ajax

User Rating with Review System in PHP Mysql Using Ajax

  • 289
  • 31-Mar-2022
  • Details

    index.php
    <!DOCTYPE HTML>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>Review & Rating System in PHP & Mysql using Ajax</title>
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" />
        <link rel="stylesheet"   href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
        <!-- jQuery library -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <!-- Popper JS -->
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
        <!-- Latest compiled JavaScript -->
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
        <style>
            .progress-label-left {
                float: left;
                margin-right: 0.5em;
                line-height: 1em;
            }
            .progress-label-right {
                float: right;
                margin-left: 0.3em;
                line-height: 1em;
            }
            .star-light {
                color: #e9ecef;
            }
            .bg-danger {
                background-color: #25b311 !important;
            }
            .btn-primary {
                color: #fff;
                background-color: #004cff;
                border-color: #004cff;
                outline: none !important;
                border-radius: 0 !important;
            }
            .btn-primary:hover {
                color: #fff;
                background-color: white;
                color: #004cff;
                outline: none !important;
            }
            .card-header {
                background-color: rgba(253, 229, 137, 0.86);
                border-radius: 0 !important;
            }
            .card {
                border: 1px solid rgba(253, 232, 153, 0.4);
            }
            .text-success {
                color: #95ee6c !important;
            }
            .bg-success {
                background-color: #95ee6c !important;
            }
            .card-footer {
                padding: .75rem 1.25rem;
                background-color: rgba(253, 232, 153, 0.13);
                border-top: 1px solid rgba(253, 232, 153, 0.4);
            }
        </style>
    </head>
    <body>
        <div class="container mt-5">
            <div class="card">
                <div class="card-header">Review</div>
                <div class="card-body">
                    <div class="row">
                        <div class="col-sm-4 text-center">
                            <h1 class="text-success mt-4 mb-4">
                                <b><span id="average_rating">0.0</span> / 5</b>
                            </h1>
                            <div class="mb-3">
                                <i class="fas fa-star star-light mr-1 main_star"></i>
                                <i class="fas fa-star star-light mr-1 main_star"></i>
                                <i class="fas fa-star star-light mr-1 main_star"></i>
                                <i class="fas fa-star star-light mr-1 main_star"></i>
                                <i class="fas fa-star star-light mr-1 main_star"></i>
                            </div>
                            <h3><span id="total_review">0</span> Review</h3>
                        </div>
                        <div class="col-sm-4">
                            <p>
                            <div class="progress-label-left"><b>5</b> <i class="fas fa-star text-success"></i></div>
                            <div class="progress-label-right">(<span id="total_five_star_review">0</span>)</div>
                            <div class="progress">
                                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="five_star_progress"></div>
    
                            </div>
                            </p>
                            <p>
                            <div class="progress-label-left"><b>4</b> <i class="fas fa-star text-success"></i></div>
                            <div class="progress-label-right">(<span id="total_four_star_review">0</span>)</div>
                            <div class="progress">
                               <div class="progress-bar bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="four_star_progress"></div>
                            </div>
                            </p>
                            <p>
                            <div class="progress-label-left"><b>3</b> <i class="fas fa-star text-success"></i></di>
                            <div class="progress-label-right">(<span id="total_three_star_review">0</span>)</div>
                            <div class="progress">
                                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="three_star_progress"></div>
                            </div>
                            </p>
                            <p>
                            <div class="progress-label-left"><b>2</b> <i class="fas fa-star text-success"></i></div>
                            <div class="progress-label-right">(<span id="total_two_star_review">0</span>)</div>
                            <div class="progress">
                                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="two_star_progress"></div>
                            </div>
                            </p>
                            <p>
                            <div class="progress-label-left">
    <b>1</b>
    <i class="fas fa-star text-success"></i>
    </div>
                            <div class="progress-label-right">(<span id="total_one_star_review">0</span>)</div>
                            <div class="progress">
                                <div class="progress-bar bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" id="one_star_progress"></div>
                            </div>
                            </p>
                        </div>
                        <div class="col-sm-4 text-center">
                            <h3 class="mt-4 mb-3">Write Review Here</h3>
                            <button type="button" name="add_review" id="add_review" class="btn btn-primary shadow-none">Review</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="mt-5" id="review_content"></div>
        </div>
    </body>
    </html>
    <div id="review_modal" class="modal fade" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Submit Review</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
    
                <div class="modal-body">
                    <h4 class="text-center mt-2 mb-4">
                        <i class="fas fa-star star-light submit_star mr-1" id="submit_star_1" data-rating="1"></i>
                        <i class="fas fa-star star-light submit_star mr-1" id="submit_star_2" data-rating="2"></i>
                        <i class="fas fa-star star-light submit_star mr-1" id="submit_star_3" data-rating="3"></i>
                        <i class="fas fa-star star-light submit_star mr-1" id="submit_star_4" data-rating="4"></i>
                        <i class="fas fa-star star-light submit_star mr-1" id="submit_star_5" data-rating="5"></i>
                    </h4>
                    <div class="form-group">
                        <input type="text" name="user_name" id="user_name" class="form-control" placeholder="Enter Your Name" />
                    </div>
                    <div class="form-group">
                        <textarea name="user_review" id="user_review" class="form-control" placeholder="Type Review Here"></textarea>
                    </div>
                    <div class="form-group text-center mt-4">
                        <button type="button" class="btn btn-primary btn-block shadow-none" id="save_review">Submit</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
    
        $(document).ready(function() {
            var rating_data = 0;
            $('#add_review').click(function() {
                $('#review_modal').modal('show');
            });
    
            $(document).on('mouseenter', '.submit_star', function() {
                var rating = $(this).data('rating');
                reset_background();
                for (var count = 1; count <= rating; count++) {
                    $('#submit_star_' + count).addClass('text-success');
                }
            });
    
            function reset_background() {
                for (var count = 1; count <= 5; count++) {
                    $('#submit_star_' + count).addClass('star-light');
                    $('#submit_star_' + count).removeClass('text-success');
                }
            }
    
            $(document).on('mouseleave', '.submit_star', function() {
                reset_background();
                for (var count = 1; count <= rating_data; count++) {
                    $('#submit_star_' + count).removeClass('star-light');
                    $('#submit_star_' + count).addClass('text-success');
                }
            });
    
            $(document).on('click', '.submit_star', function() {
                rating_data = $(this).data('rating');
            });
    
            $('#save_review').click(function() {
                var user_name = $('#user_name').val();
                var user_review = $('#user_review').val();
                if (user_name == '' || user_review == '') {
                    alert("Please Fill Both Field");
                    return false;
                } else {
                    $.ajax({
                        url: "submit_rating.php",
                        method: "POST",
                        data: {
                            rating_data: rating_data,
                            user_name: user_name,
                            user_review: user_review
                        },
                        success: function(data) {
                            $('#review_modal').modal('hide');
                            load_rating_data();
                            alert(data);
                        }
                    })
                }
            });
            load_rating_data();
            function load_rating_data() {
                $.ajax({
                    url: "submit_rating.php",
                    method: "POST",
                    data: {
                        action: 'load_data'
                    },
                    dataType: "JSON",
                    success: function(data) {
                        $('#average_rating').text(data.average_rating);
                        $('#total_review').text(data.total_review);
                        var count_star = 0;
                        $('.main_star').each(function() {
                            count_star++;
                            if (Math.ceil(data.average_rating) >= count_star) {
                                $(this).addClass('text-success');
                                $(this).addClass('star-light');
                            }
                        });
                        $('#total_five_star_review').text(data.five_star_review);
                        $('#total_four_star_review').text(data.four_star_review);
                        $('#total_three_star_review').text(data.three_star_review);
                        $('#total_two_star_review').text(data.two_star_review);
                        $('#total_one_star_review').text(data.one_star_review);
                        $('#five_star_progress').css('width', (data.five_star_review / data.total_review) * 100 + '%');
                        $('#four_star_progress').css('width', (data.four_star_review / data.total_review) * 100 + '%');
                        $('#three_star_progress').css('width', (data.three_star_review / data.total_review) * 100 + '%');
                        $('#two_star_progress').css('width', (data.two_star_review / data.total_review) * 100 + '%');
                        $('#one_star_progress').css('width', (data.one_star_review / data.total_review) * 100 + '%');
                        if (data.review_data.length > 0) {
                            var html = '';
                            for (var count = 0; count < data.review_data.length; count++) {
                                html += '<div class="row mb-3">';
                                html += '<div class="col-2 col-sm-1 col-md-1 "><div class="rounded-circle bg-danger text-white pt-2 pb-2"><h3 class="text-center">' + data.review_data[count].user_name.charAt(0) + '</h3></div></div>';
                                html += '<div class="col-10 col-md-11">';
                                html += '<div class="card">';
                                html += '<div class="card-header"><b>' + data.review_data[count].user_name + '</b></div>';
                                html += '<div class="card-body">';
                                for (var star = 1; star <= 5; star++) {
                                    var class_name = '';
                                    if (data.review_data[count].rating >= star) {
                                        class_name = 'text-success';
                                    } else {
                                        class_name = 'star-light';
                                    }
                                    html += '<i class="fas fa-star ' + class_name + ' mr-1"></i>';
                                }
                                html += '<br />';
                                html += data.review_data[count].user_review;
                                html += '</div>';
                                html += '<div class="card-footer text-right">On ' + data.review_data[count].datetime + '</div>';
                                html += '</div>';
                                html += '</div>';
                                html += '</div>';
                            }
                            $('#review_content').html(html);
                        }
                    }
                })
            }
        });
    </script>

    submit_rating.php
    <?php
    $connect = new PDO("mysql:host=localhost;dbname=rating-system", "root", "");
    if(isset($_POST["rating_data"]))
    {
        $data = array(
            ':user_name'        =>  $_POST["user_name"],
            ':user_rating'      =>  $_POST["rating_data"],
            ':user_review'      =>  $_POST["user_review"],
        );
        $query = "
        INSERT INTO reviews
        (user_name, user_rating, user_review)
        VALUES (:user_name, :user_rating, :user_review)";
        $statement = $connect->prepare($query);
        $statement->execute($data);
        echo "Your Review & Rating Successfully Submitted";
    }
    if(isset($_POST["action"]))
    {
        $average_rating = 0;
        $total_review = 0;
        $five_star_review = 0;
        $four_star_review = 0;
        $three_star_review = 0;
        $two_star_review = 0;
        $one_star_review = 0;
        $total_user_rating = 0;
        $review_content = array();
        $query = "
        SELECT * FROM reviews
        ORDER BY id DESC
        ";
        $result = $connect->query($query, PDO::FETCH_ASSOC);
        foreach($result as $row)
        {
            $review_content[] = array(
                'user_name'     =>  $row["user_name"],
                'user_review'   =>  $row["user_review"],
                'rating'        =>  $row["user_rating"],
                'datetime'      =>  date($row["datetime"])
            );
            if($row["user_rating"] == '5')
            {
                $five_star_review++;
            }
            if($row["user_rating"] == '4')
            {
                $four_star_review++;
            }
            if($row["user_rating"] == '3')
            {
                $three_star_review++;
            }
            if($row["user_rating"] == '2')
            {
                $two_star_review++;
            }
            if($row["user_rating"] == '1')
            {
                $one_star_review++;
            }
            $total_review++;
            $total_user_rating = $total_user_rating + $row["user_rating"];
        }
        $average_rating = $total_user_rating / $total_review;
        $output = array(
            'average_rating'    =>  number_format($average_rating, 1),
            'total_review'      =>  $total_review,
            'five_star_review'  =>  $five_star_review,
            'four_star_review'  =>  $four_star_review,
            'three_star_review' =>  $three_star_review,
            'two_star_review'   =>  $two_star_review,
            'one_star_review'   =>  $one_star_review,
            'review_data'       =>  $review_content
        );
        echo json_encode($output);
    }
    ?>

whatsapp

Sagar Kumar
Typically replies within an hour

Atechseva
Hi there 👋

How can I help you?
×
Chat