CODEWITHSUNDEEP
phpjqueryajax
Bucatini
Bucatini

Reputation: 49

Click an image to increment counter + store to server so all users see how many times it has been liked.

This is kind of a difficult question to pose as I don't have a lot of backend knowledge so forgive me if my jargon is not up to par.

Basically, I have a gallery of images and I need users to be able to "like" an image and have that increment a counter which then is stored to the server. So, if say 50 users liked a particular image, it would show "50" on that image to all users.

I'm assuming php and ajax are the best bet here.

Any help would be greatly appreciated.

Upvotes: 1

Views: 160

Answers (1)

enno.void
enno.void

Reputation: 6579

Okay, here an example for a very simple like mechanism.

NOTE:

  • This example use jQuery.
  • For simplicity there is no Database, as db it use a simple json store.
  • There is no "unlike" function, it always increase the likes...

First we need our Gallery Markup:

<ul>
    <li><a class="likeLink" data-imageid="1"><img src="https://dummyimage.com/100x100/000/fff" /><span class="likes">0</span></a></li>
    <li><a class="likeLink" data-imageid="2"><img src="https://dummyimage.com/100x100/000/fff" /><span class="likes">0</span></a></li>
    <li><a class="likeLink" data-imageid="3"><img src="https://dummyimage.com/100x100/000/fff" /><span class="likes">0</span></a></li>
    <li><a class="likeLink" data-imageid="4"><img src="https://dummyimage.com/100x100/000/fff" /><span class="likes">0</span></a></li>
</ul>

data-imageid: This is our reference for the likes set on an image

< span class="likes" >: just a litte container that show likes for an image

Now we need a "store", in this example case a simple json object:

{
    "images":[
                {"imageId":1,"likes":0},
                {"imageId":2,"likes":0},
                {"imageId":3,"likes":0},
                {"imageId":4,"likes":0}
             ]
}

Next we need is a bit JavaScript:

$(document).ready(function(){

    // Initial loading likes for images
    $.ajax({ 
        type: 'GET', 
        url: 'setlike.php?getAllLikes', 
        success: function (data) { 
            $.each(data.images, function(index, value){
                $('.likeLink[data-imageid="'+ value.imageId +'"]').find('.likes').html(value.likes);
            });
        }
    });

    // Set a like for an image
    $('.likeLink').on('click', function(){

        var imageId = $(this).attr('data-imageid');

        $.ajax({ 
            type: 'POST', 
            url: 'setlike.php', 
            data: { imageId: imageId }, 
            success: function (data) { 
                $('.likeLink[data-imageid="'+ data.imageId +'"]').find('.likes').html(data.likes);
            }
        });
    })
})

Last but not least, we need a php script that handle our ajax requests:

header('Content-Type: application/json');
$data = file_get_contents('store.json'); // In this file is our json object



if(isset($_GET['getAllLikes'])) {
    echo $data;
}

if(isset($_POST['imageId']))
{
    $jsonObj = json_decode($data);
    $likedImg = null;
    foreach($jsonObj->images as $v)
    {
        if($v->imageId == $_POST['imageId'])
        {
            $v->likes++;
            $likedImg = $v;
        }
    }

    file_put_contents('store.json', json_encode($jsonObj));
    echo json_encode($likedImg);
}

Upvotes: 1

Related Questions