CODEWITHSUNDEEP
javascriptphphtmlcss
Guillaume Duhan
Guillaume Duhan

Reputation: 252

PHP Like button counter in a file.txt

I would like to recreate several like button that saves count in a file.txt but that doesn't work :/

<?php

function getClickCount()
{
    return (int)file_get_contents("counter.txt");
}

function incrementClickCount()
{
    $counter = getClickCount() + 1;
    file_put_contents("counter.txt", $counter);
}
?>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
<script type="text/javascript">
  var clicks = 0;

  function onClick() {
    clicks = 1;
    document.getElementById("clicks").innerHTML = clicks;
  };

</script>
<button type="button" onClick="onClick()" title="Vous aimez la couverture?" class="btn"><img id="heart" src="https://trello-attachments.s3.amazonaws.com/568304b85fa72dcb958a1edf/584acfc48b82595af77f2030/6257bf1efec79d5baf22309f8f327ce5/favorite.png" /></button>
<p><a id="clicks"><?php echo getClickCount(); ?></a></p>

DEMO HERE

Thanks in advance for your help, I am looking since days on the web to find it but I don't...

Alexander

Upvotes: 0

Views: 2333

Answers (2)

Erik Kalkoken
Erik Kalkoken

Reputation: 32737

At first glance, I see 3 problems with your script.

1) You are mixing JavaScript and PHP. JavaScript runs on browsers and PHP runs on servers. If you want to exchange data between those parts of your script you need to make a server call from the JS part to the server, e.g. by using AJAX. A simple HTML request in JavaScript to a PHP script will work too.

2) Also your <button> tag needs to be embedded in a <form> should point to a script to be executed (can be the same script).

3) You never seem to call incrementClickCount(), at least not in the part shown here.

Suggestions

The would code everything in PHP and then address the other two points. Or you need to implement some form of client / server communication.

Upvotes: 0

Wolverine
Wolverine

Reputation: 1702

counter.php 

<?php

    function getClickCount() {
        return (int)file_get_contents("counter.txt");
    }

    function incrementClickCount() {
        $counter = getClickCount() + 1;
        file_put_contents("counter.txt", $counter);
    }

    if(!empty($_POST)) {
        if($_POST['click'] == 'true') {
            incrementClickCount();
            echo getClickCount();
        } else {
            echo getClickCount();
        }
    }

?>

counter.txt

0

index.php

<html>
   <head>
      <title>Click Counter</title>
   </head>
   <body>
      <button type="button" onClick="onClick()" title="Vous aimez la couverture?" class="btn"><img id="heart" src="https://trello-attachments.s3.amazonaws.com/568304b85fa72dcb958a1edf/584acfc48b82595af77f2030/6257bf1efec79d5baf22309f8f327ce5/favorite.png" /></button>
      <p><a id="clicks"></a></p>

      <script>
          function onClick() {
              loadClicks(true);
          }

          function loadClicks(isClicked) {
              var click = isClicked === true ? true : false;
              $.ajax({
                 url: 'counter.php',
                 type: 'POST',
                 data: {
                   'click': click
                 },
                 success: function(response) {
                   $('#clicks').text(response);
                 }
              });
          }

          loadClicks(false);
      </script>
   </body>
</html>

Code Explanation

Whenever you click the button, there is an ajax request sent asynchronously in the background to counter.php. This PHP file receives request and process accordingly.

Here in the code, we send a single data to the PHP file in the ajax POST request which is a boolean data that is set based on the condition like if the button is clicked.

In PHP file, you will check a condition if the request is happened by button click or else other. If it is by button, you will increment the click and send the click counter value in response else you will only send the value.

You will notice I've called loadClicks function with the parameter true in onClick function and false outside the function meaning that I first call the loadClicks(false) as soon as the script is started its execution to load only the clicks value and later when I click the button loadClicks(true) is invoked meaning increment and fetch the value.

You will understand the code when you go through them carefully.

Upvotes: 3

Related Questions