CODEWITHSUNDEEP
javascriptphpjquerysqlajax
Winterwind
Winterwind

Reputation: 117

Rating an image

Im doing a tutorial where you can upload image and information about the image to the site. The image will be saved to a folder while the information will be stored inside a database.

It exists a function that also creates thumbnails of each uploaded image. Next to this thumbnail you will find the uploaded image's information that was stored inside the database.

Now I want to enchance it some and add a rating system to it. I've already created a ratingsystem that sends a number (1-5), depending on which starimage that was clicked, and stores it inside a txt file.

So my question is, what is the easiest way to connect the rating to each image? I want the rating to appear next to the thumbnail, just as the image information.

EDIT: Image upload:

<div id="uploadform">
                <form action="laddaupp.php" method="post" enctype="multipart/form-data">
                    <input type="hidden" name="MAX_FILE_SIZE" value="500000" />
                    <label for="file"><strong>Filename:</strong></label>
                    <input type="file" name="file" id="file" />
                    <input type="text" name="uppladdare" placeholder="Uploader:" title="What's your name?"/>
                    <input type="text" name="titel" placeholder="Title" title="Give a title to your piece of work"/>
                    <input type="text" name="history" placeholder="History" title="Tell us the story behind your image. Where is it taken, etc."/>
                    <input type="submit" name="submit" value="Upload" />    
                </form>


 //Send data to database
            if(isset($_POST['submit']))
            {   
$dbcon = mysqli_connect("localhost","user1","test1","tutorial");



$stored_file = $_FILES["file"]["name"];
$file = "";

$query="INSERT INTO mountains (filname, uppladdare, titel, History) 
VALUES ('$stored_file','$_POST[uppladdare]','$_POST[titel]','$_POST[history]')";
if(!mysqli_query($dbcon ,$query));
            }

Star rating:

<form name="rating" id="rating">    
    <div id="rating-area" class="shadow">   

    <img src="stjärna.png" id="thumb1" data-value="1" />
    <img src="stjärna.png" id="thumb2" data-value="2" />
    <img src="stjärna.png" id="thumb3" data-value="3" />
    <img src="stjärna.png" id="thumb4" data-value="4" />
    <img src="stjärna.png" id="thumb5" data-value="5" />

    </div>


</form>
<!--Skickar information till textfilen när man klickar på en stjärna-->
<script>
    jQuery('div#rating-area img').click(function(e){
        var val = jQuery(this).data('value') ;
        console.log(val) ;
        jQuery.post('post.php',{ rating : val },function(data,status){
            console.log('data:'+data+'/status'+status) ;
        }) ;
    }) ;

</script>

Upvotes: 0

Views: 164

Answers (2)

ponciste
ponciste

Reputation: 2229

You can create another table on the DB related to your current (i suppose) Image table. Let's say ImageRate

Since you send 1-5 value as rate you can build your Table this way

Table ImageRate

ID    Rate    ImageID (FK)
1     3       50
2     5       50
3     2       50

each vote/rate will be a row into ImageRate with a auto-incremental ID, the Rate value and the ImageID as foreign key, which is the primary key of the table Image.

So when a user rates an image you'll have to do a insert into this table this way:

INSERT INTO ImageRate(ID, RATE, ImageID) VALUES(null, ?, ?);

where the first ? will be the rate value and the second ? the image id that has been rated.

then to get the effective rate of a image you can simply do

SELECT AVG(rate) from imagerate where ImageID = 50

NOTE

this is a very basic way to do what you need. However, this table could be extended with few more useful columns, for example a timestamp, the User id, in order to prevent that a user can vote twice, and so on... you need to consider all these things depending on your specific case.

Upvotes: 1

Pred
Pred

Reputation: 9042

The easyest way is to store the votes in the database. You can connect them to an image by the image's ID.

You have to consider a few things:

  • Do you want to prevent multiple votes from a unique user? -> If yes, you have to store all votes individually
  • Do you only need the AVG of the votes? - If yes (and no for the others), you can store the count of votes and the sum of points. (AVG will be the points / count)
  • Do you want to check the trends? - If yes, you should store all votes individually and a timestamp for each vote.

Personally I do NOT recommend to store the votes in a text file! There are too much problems to solve (concurency for example).

Upvotes: 0

Related Questions