Rate image system

Question

So I've created this function where you upload an image to the server together with some information. The text information is saved to a database while the image is saved to a folder. Then I echo out the image together with the information that was stored in the database. But I want to enchance it some by adding a rating system.

The rating system that I have created store the stastistics inside a txt-file. What I need help with is to swap the saving with statistics from the txt-file and store it inside the database instead.

This is how I echo out the image, along with the information and star function:

<?php
//Sortering

$order = "";
if(isset($_GET['order'])){

    if($_GET['order'] == "date"){
        $order = " ORDER BY date DESC";
    }
}
if(isset($_GET['order'])){
    if($_GET['order'] == "uppladdare"){
        $order = " ORDER BY uppladdare";
    }
}
//Database connection
$dbcon = mysqli_connect("");
$selectall = "SELECT * FROM mountains $order";
$result = mysqli_query($dbcon, $selectall);

while($row = mysqli_fetch_array($result)){

$information =  ' Titel: ' . $row['titel'] . ' Uppladdare: ' . $row['uppladdare'] . ' Filnamn: ' . $row['filname'] . ' History: ' .$row['History'] . ' Datum: ' . $row['date']; 

//Print out correct information to the uploaded image
echo "<br>";
echo "Title: " . $row['titel'] . "<br>";
echo "Uploader: " . $row['uppladdare'] . "<br>";
echo "Imagename: " . $row['filname'] . "<br>";
echo "History: " . $row['History'] . "<br>";
echo "Date: " . $row['date'] . "<br>";
echo "Image:";
echo "<br>";
echo "<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>";
?>
<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>
<script>
   $(document).ready(function(){
     setInterval(function(){
     $('#resultat').load('ajax.php');

       },500);

   });
 </script>
 <?php

$original = $row['filname'];

echo "<a class='fancybox' rel='massoravbilder' href='bilder/$original'> <img src='bilder/thumb_" . $row['filname'] . "' alt='$information' /></a>" . "<br>";

}

?>
<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>

Im still quite a beginner so I would appreciate if anyone could show me an easy way to solve this. Prefer it to be simple, like without restrictions when it comes to the vote.

Just upload each rate-onclick and echo the average of all the votes right beneath the stars.

Notes: The rating system works fine when just using textfile. ajax.php is the calculation master behind the function. And post.php sends the rating statistics to the tex-file.

Answer 1

You should do something like this. I don't know if fields exist but it's the way to follow. I hope it's give you an idea.

In your form

//...
while($row = mysqli_fetch_array($result)){

    $information =  ' Titel: ' . $row['titel'] . ' Uppladdare: ' . $row['uppladdare'] . ' Filnamn: ' . $row['filname'] . ' History: ' .$row['History'] . ' Datum: ' . $row['date']; 

    //Print out correct information to the uploaded image
    echo "<br>";
    echo "Title: " . $row['titel'] . "<br>";
    echo "Uploader: " . $row['uppladdare'] . "<br>";
    echo "Imagename: " . $row['filname'] . "<br>";
    echo "History: " . $row['History'] . "<br>";
    echo "Date: " . $row['date'] . "<br>";
    echo "Image:";
    echo "<br>";

    // Add the input with image id value (I suppose it exist) 

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


      <input type='hidden' name= 'image_id' value = $row[image_id]>


      <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>";

Ajax

<script>
    jQuery('div#rating-area img').click(function(e){
        // serialize the form and retrieve all value in PHP with $_POST['theNameOfInput']
        jQuery.post('post.php',{ form : $(this).serialize() },function(data,status){
            console.log('data:'+data+'/status'+status) ;
        }) ;
    }) ;

</script>

post.php

<?php

    $imageId = (int) $_POST['image_id'];
    // ... Your database treatments
    $sql = "UPDATE image SET image_rating = image_rating + 1 WHERE image_id = $imageId";
    //... Your code