Login

03-11-2011, 06:27 AM

[eluser]javer[/eluser]
Hi all,

recently I needed to implement star rating, but I didnt know how. I was quite unhappy with google results. I have found some articles but they are unusable for me.
http://ellislab.com/forums/viewthread/71620/P50/ - this was too complicated and I didnt find demo files
http://net.tutsplus.com/tutorials/html-c...x-and-php/ - this was pain to follow. Sometimes I had no idea whats going on there.
http://webtint.net/tutorials/5-star-rati...nd-jquery/ - this wasnt working well

So I took last one and modified it little bit and Im here to share what I've done. So lets start. Oh I almost forget This is my first tutorial and Im pretty new to all php, mysql, javascript stuff, so be nice to me Smile

1.
GO here http://webtint.net/wp-content/uploads/20...estars.zip and dowlnoad it. You are going to need only png files: star and blank_star.

2.
Go to your view (where you want to have stars) and place there this code:

Code:
$rating = (int)$question_row['rating'];

    echo  $rating;

    ?&gt;

    <div class="floatleft">

    <div id="star_container_&lt;?php echo $question_row['id']; ?&gt;">

    <div id="rating_&lt;?php echo $question_row['id']; ?&gt;">

    <span class="star_1"><img src="&lt;?php echo base_url() ?&gt;assets/images/star_blank.png" alt=""class='hover_star' /></span>

    <span class="star_2"><img src="&lt;?php echo base_url() ?&gt;assets/images/star_blank.png" alt=""class='hover_star' /></span>

    <span class="star_3"><img src="&lt;?php echo base_url() ?&gt;assets/images/star_blank.png" alt=""class='hover_star' /></span>

    <span class="star_4"><img src="&lt;?php echo base_url() ?&gt;assets/images/star_blank.png" alt=""class='hover_star' /></span>

    <span class="star_5"><img src="&lt;?php echo base_url() ?&gt;assets/images/star_blank.png" alt=""class='hover_star' /></span>

    </div>

    </div>

    </div>

Note 4 things:
1. FU()K IT, this forum sucks so much that its not even possible. The code above is wrong because this stupid forum dont allow me to insert to code everything i want. YOU CAN DOWNLOAD RIGHT CODE FROM THE ATTACHEMENT IN THIRD POST.
2. The name of div is made from name star_container_ and a id number:

Code:
&lt;?php echo $question_row['id']; ?&gt;

I have database of questions and to each question I want to have a rating stars. So each question should have its own rating stars.
3. Im using there this code

Code:
&lt;?php echo base_url() ?&gt;

In my case its pointing here http://localhost/test
4. In the begining there is

Code:
$rating = (int)$question_row['rating'];

. This load how many stars should be shown in that question. It loads rating of that question. In my case its from database of questions.

3.
Now we are going to modify css. Add this code to your css file:

Code:
.hover_star {

    background: url('images/star.png'); 

    z-index: 1;

}

.hover_star_rated {

    background: url('images/star.png'); 

    z-index: 1;

}

span {

    float: left;

    cursor: pointer;

}

.clearleft {

    clear: left;

}

.asddiv { 

    display: block;

    width: 120px;

    padding-top: 10px;

    height: 16px;

    margin: 0;

}

.floatleft {

    float: left;

}

.highlight {

    font-family: Arial, sans-serif;

    font-size: 14px;

    position: relative;

    bottom: 9px;

    color: #93784b;

    font-weight: bold;

}

.star_rating {

    font-family: Arial, sans-serif;

    font-size: 14px;

    color: #93784b;

    float: left;

    width: 100px;

    position: relative;

    top: 10px;

}

Its quite messy, probably you can delete most of it Smile

4.
Now we are going to use jquery. So go to your header and place between tags <HEAD> </HEAD> this code

Code:
&lt;!-- JQUERY --&gt;

<skript src="http://code.jquery.com/jquery-latest.js"></skript>

Note two things:
a) replace K in skript to c, so its SCRIPT not SKRIPT. This forum doesnt allow script tags, it thinks its xss or something.
b) u should be connected to net because this is downloading from net. If you arent, download jquery-latest.js, place it somewhere and and reference it from there.

CONTINUE IN NEXT POST

03-11-2011, 07:09 AM

[eluser]javer[/eluser]
5.
And now we are going to add our own javascript code. here it is.
Add this in header, between HEAD tags:

Code:
&lt;!-- STAR RATING SCRIPT --&gt;

<skript type="text/javascript">

$(document).ready(function() {

        $('[class^=star_]').mouseenter(

        function() {

            if($(this).parent().data('selected') == undefined) {

                var selectedStar = $(this).parent().find('.hover_star').length - 1;

                $(this).parent().data('selected', selectedStar)

            }

            $(this).children().addClass('hover_star');

            $(this).prevAll().children().addClass('hover_star');

            $(this).nextAll().children().removeClass('hover_star');

        });

    $('[id^=rating_]').mouseleave(

        function() {

            var selectedIndex = $(this).data('selected');

            if  (selectedIndex == -1)

            {

                $(this).children("[class^=star_]").children('img').removeClass("hover_star");

            }

            var $selected = $(this).find('img').eq(selectedIndex).addClass('hover_star').parent();        

            $selected.prevAll().children().addClass('hover_star');

            $selected.nextAll().children().removeClass('hover_star');

    });

    $("[id^=rating_]").children("[class^=star_]").click(function() 

    {

        var current_star = $(this).attr("class").split("_")[1];

        var rid = $(this).parent().attr("id").split("_")[1];

        $('#star_container_'+rid).load('&lt;?php echo base_url() ?&gt;questions/submitRating', {rating: current_star, id: rid});

    });

});

</skript>

If you dont know whats going on in this scipt go here http://webtint.net/tutorials/5-star-rati...nd-jquery/ and here http://stackoverflow.com/questions/23519...heir-curso for some information.

Note: Replace K to C again in word SCRIPT
Note: in click function $("[id^=rating_]").children("[class^=star_]").click(function() there is this code

Code:
$('#star_container_'+rid).load('&lt;?php echo base_url() ?&gt;questions/submitRating', {rating: current_star, id: rid});

It means when you click on star it loads a method submitRating in controller questions with parameters rating (which star you clicked) and id number (which question it was) ( It doesnt need to be controller there can be also a php file as it is in original post:http://webtint.net/tutorials/5-star-rating-system-in-php-mysql-and-jquery/ ). So change it to your needs.

6.
So by now you should have stars in each question and stars should react on mouse hover, Now lets add rating code.
This is in my submitRating method in controller questions

Code:
function submitRating()

    {    

            // This was sent by JS, which question was rated and how.

            $rating = (int)$_POST['rating'];

            $id = (int)$_POST['id'];

            // get from database this one question

            $records = $this->question_model->getOneQuestion($id);

            foreach ($records->result_array() as $question_row)

            {            

                if($rating > 5 || $rating < 1) 

                {

                        echo"Rating cant be more than 5 or less than 1";

                        break;

                }

                // If you have already voted

                if(isset($_COOKIE['rated'.$id])) 

                {

                        echo"<div class='highlight'>You already voted</div>";

                        break;

                }

                // Set coockie, that you have voted

                setcookie("rated".$id, $id, time()+60*60*24*365);

                $this->question_model->updateRating($id,$rating);

                echo 'done';

                //Show stars again, but this time, dont allow vote

                // get question and its rating from db again

                $records = $this->question_model->getOneQuestion($id);

                foreach ($records->result_array() as $question_row)

                {

                    $rating = (int)$question_row['rating'];        

                }

                            ?&gt;

            <div class="floatleft">

                <div id="star_container_&lt;?php echo $id; ?&gt;">

                    <div id="rated_&lt;?php echo $id; ?&gt;">

                        <span class="rated_star_1"><img src="&lt;?php echo base_url() ?&gt;assets/images/star_blank.png" alt="" > 0) { echo"class='hover_star_rated'"; } ?&gt; /></span>

                        <span class="rated_star_2"><img src="&lt;?php echo base_url() ?&gt;assets/images/star_blank.png" alt="" > 1.5) { echo"class='hover_star_rated'"; } ?&gt; /></span>

                        <span class="rated_star_3"><img src="&lt;?php echo base_url() ?&gt;assets/images/star_blank.png" alt="" > 2.5) { echo"class='hover_star_rated'"; } ?&gt; /></span>

                        <span class="rated_star_4"><img src="&lt;?php echo base_url() ?&gt;assets/images/star_blank.png" alt="" > 3.5) { echo"class='hover_star_rated'"; } ?&gt; /></span>

                        <span class="rated_star_5"><img src="&lt;?php echo base_url() ?&gt;assets/images/star_blank.png" alt="" > 4.5) { echo"class='hover_star_rated'"; } ?&gt; /></span>

                    </div>

                </div>

            </div>

            <div class="starl_rating">

                (22Rated <strong>&lt;?php echo $rating; ?&gt;</strong> Stars)

            </div>                

            &lt;?php

            }

    }

03-11-2011, 07:24 AM

[eluser]javer[/eluser]
7.

Its all. I show you how looks my updateRation in questionmodel:

Code:
function updateRating($p_id, $p_rating)

    {                    

        $query = $this->db->query("UPDATE questions SET number_of_voting = number_of_voting+1, sum_of_votes = sum_of_votes+'".$p_rating."',rating= sum_of_votes/number_of_voting WHERE '".$p_id."'=id;");

        return $query;

    }

and thats really all. Hope it helps somebody. Please try it somebody if it works, if I didnt forget anything.

THIS STUPID F(u)CKING FORUM SHOW SOME PIECES OF CODE WRONG. SO ALL PIECES CAN BE DOWNLOADED AS TXT FILE IN THE ATTACHEMENT