Making like buttons for multiple images

Question

I'm pretty new to php and MySql and am trying to make an image uploading website where the users upload the images. I'm storing all the images in a directory and storing the path to the images in my database.

Since I shall not know the number of images that have been uploaded, I am using a while loop to display them.

Now, I need to create "like" buttons for every image. Although I am able to create like buttons for every image, I am not able to understand how php will know the like button for which image has been pressed and once a like button has been pressed, how I should increment the "number of likes" value for that particular image not just in the database but also on the webpage itself.

I understand that I shall have to use php, MySql and Ajax for this. It could be great if you could help me with the code. Thanks a lot! :)

Here is the code that I have been able to write so far(in the code, I have not shown the creation of the like button for I am totally confused about it....the code only contains the displaying of images..it could be great if you could help me out with how to proceed with the creation of the like button and further of how to update the database and print the number of likes on the webpage without refreshing the whole page) :

$sql= "SELECT * FROM imagestable ";
$result=mysqli_query($conn,$sql);
//printing all the images one by one
while($row=mysqli_fetch_assoc($result)){

    $imagelocation=$row['imageDestination'];
    $imagetitle=$row['imagetitle'];
    $uploader=$row['uploader'];
    echo '<h1>'.$imagetitle.'</h1>
         <img src="'.$imagelocation.'" style="width:600px;height:100%;">
         <h1>Uploaded by:'.$uploader.'</h1>
         <br>
         ';          
}

Thanks!

Answer 1

You should probably have an Id column in your database to uniquely identify each image (they are usually automatically generated and incremented without you having to do anything, though I havent used MySql in ages).

$sql= "SELECT * FROM imagestable ";
$result=mysqli_query($conn,$sql);
//printing all the images one by one
while($row=mysqli_fetch_assoc($result)){

    $imagid = $row['imageid'];
    $imagelocation=$row['imageDestination'];
    $imagetitle=$row['imagetitle'];    
    $uploader=$row['uploader'];
    echo '<h1>'.$imagetitle.'</h1>
         <img src="'.$imagelocation.'" style="width:600px;height:100%;">
         <h1>Uploaded by:'.$uploader.'</h1>
         <br>
         // Here you add the button with the id from the database to identify the image
         // Here likeimage(id) is assumed to be a javascript function that somehow updates 
         // the server that someone clicked the like button (and possibly updates the html DOM
         // to the new number of likes.
         <input type="button" onclick="likeimage($imageid);" />
         ';          
    }

Answer 2

If you don't have autoincrement field then please run this query, then 2 new fields will be added in your imagestable.

ALTER TABLE imagestable add column `id` int(11) unsigned NOT NULL AUTO_INCREMENT,add column totlikes INT(11) default 0;

Form where you want to like this image just pass the id (see auto increment field in ALTER script); NOTE :- I have used POST method here.

$id=$_POST['id'];
mysqli_query($conn, "UPDATE imagestable set totlikes=totlikes+1 where id=$id");