How can I use PHP and JavaScript to make an image clickable, and increment a counter stored as a flat file?

Question

Im trying to find a php/js script that will let me take an image, and when clicked, increase the number in a flat file, and save that file.

I know how to include the file to get the vote total.

Im going insane trying to find this to plug and play into my website. Id love to have ip logging, and a cool fade in/out refresh update thing. But at this point ill settle for basics.

Id like to avoid using MySQL, but if its necessary i can work with it.

Answer 1

Your best bet is to use the AJAX support in jQuery to access, but not load to the user, some kind of URL that writes the increment to the file. If you're using any kind of a thorough platform, you should consider doing in the with your database. However, it'd be simple enough to use jQuery's $.get() function to access the URL /increment_number.php?image=whatever.jpg. If you ever start using a database, you'd just have to change this script to perform a DB query. For your case, you'd have a simple script like this (which has been in no way optimized or has any security considerations whatsoever):

$image = $_GET['image'];
$number = file_get_contents('tracker_for_{$image}.txt');
if ($number != ''){
    $number = (int) $number + 1
}
$file = fopen('tracker_for_{$image}.txt', 'w');
fwrite($file, $number);
fclose($file);

And just remember to have the following bit of JS on the page with the image:

$(document).ready(function(){
     $('img.incrementme').click(function(){
         $.get('/increment.php?'+$(this).attr('src'));
     });
);

I haven't tested this code so it might not work, but it's in the spirit of what you'd have to do.