Счетчик кликов на сайте (примеры)

Примеры реализации счётчика кликов. Простой пример счётчика кликов. Сохранение результата в файле или базе данных MySQL (или SQLite). Подсчёт кликов по ссылке, кнопке или по картинке.

Простой пример счётчика на JavaScript

HTML:

<div class="counter">Clicked: <span id="counter">0</span></div>
<a href="#" title="Click me" id="link">Click me</a>

JavaScript:

var link = document.getElementById("link"),
 counter = document.getElementById("counter"),
 count = 0;
link.onclick = function() {
 count++;
 counter.textContent = count;
};

Простой пример счётчика на jQuery

Разметка из предыдущего примера. Скрипт jQuery:

$( document ).ready(function() {
 var link = $("#link"),
  counter = $("#counter"),
  count = 0;
 link.on('click', function(e) {
  e.preventDefault();
  count++;
  counter.html(count);
 });
});

Счётчик кликов с сохранением в текстовый файл

Примеры выше работают не полноценно, при обновлении страницы счётчик перегрузится снова в 0. Нам необходимо сохранять показатель счётчика при его обновлении. Информацию из js будем передавать в PHP посредством AJAX запроса.

Там, где выводим счётчик добавляем код PHP:

<?
$file = "counter.txt";
if(!is_file($file)){
 $fh = fopen($file, 'w');
 fwrite($fh, 0);
 fclose($fh);
}
$data = (int)file_get_contents($file);
?>
<div class="counter">Clicked: <span id="counter"><?= $data ?></span></div>
<a href="#" title="Click me" id="link">Click me</a>

jQuery:

$( document ).ready(function() {
 var link = $("#link"),
     counter = $("#counter");
 link.on('click', function(e) {
  e.preventDefault();
  var ajax = $.ajax({
   method : 'post',
   url : 'counter.php',
   dataType : 'text',
   data : { 'count' : 1 }
  });
  ajax.done(function(data){
   data = JSON.parse(data);
   counter.html(parseInt(data));
  }) ;
 });
});

PHP:

<?php

declare(strict_types=1);
error_reporting(E_ALL);

if (isset($_POST['count']) && (int)$_POST['count'] === 1):
 try {
  $file = "counter.txt";
  $data = (int)file_get_contents($file);
  $data++;
  $fh = fopen($file,'w');
  fwrite($fh, (string)$data);
  fclose($fh);
  echo json_encode($data);
 } catch (Exception $e) {
  echo $e->getMessage();
 }
endif;

Счётчик кликов с сохранением в базу данных SQLite

Пример реализации счётчика кликов с сохранением в базу данных SQLite с помощью PDO. Кликать теперь будем по кнопке.

Разметка с выводом результата:

<?php
// Счётчик для кликов по кнопке
$db = 'counter.db';
$pdo = new PDO("sqlite:" . $db);

if (!filesize($db)):
 $commands = [
  "CREATE TABLE IF NOT EXISTS counter (
    `id` INTEGER PRIMARY KEY, 
    `name` TEXT NOT NULL, 
    `value` INTEGER NOT NULL)",
  "INSERT INTO counter (`name`, 'value') VALUES ('link', 0)"
 ];
 foreach ($commands as $command) {
  $pdo->exec($command);
 }
endif;
$stmt = $pdo->query("SELECT `value` FROM counter WHERE `id` = 1");
$data = (int)$stmt->fetchColumn();

// HTML
<div class="counter">Clicked: <span id="counter_bnt"><?= $data ?></span></div>
<button type="button" class="btn btn-default" id="button">Click me</button>

jQuery:

$( document ).ready(function() {
 var button = $("#button"),
     counter = $("#counter_bnt");
 button.on('click', function(e) {
  e.preventDefault();
  var ajax = $.ajax({
   method : 'post',
   url : 'counter.php',
   dataType : 'text',
   data : { 'count' : 1 }
  });
  ajax.done(function(data){
   data = JSON.parse(data);
   counter.html(parseInt(data));
  }) ;
 });
});

counter.php:

<?php

declare(strict_types=1);
error_reporting(E_ALL);

if (isset($_POST['count']) && (int)$_POST['count'] === 1):
 try {
  define('SQLITE_FILE', 'counter.db');
  $pdo = new PDO("sqlite:" . SQLITE_FILE);
  $stmt = $pdo->query("SELECT `value` FROM counter");
  $data = (int)$stmt->fetchColumn();
  $data++;
  $command = "UPDATE counter "
  . "SET `value` = {$data} "
  . "WHERE id = 1";
  $pdo->exec($command);
  echo json_encode($data);
 } catch (Exception $e) {
  echo $e->getMessage();
 }
endif;

Счётчик кликов с сохранением в базу данных MySQL

Пример реализации счётчика кликов с сохранением в базу данных MySQL с помощью PDO. Кликать будем по картинке.

Для дальнейшей работы нам необходима база данных с таблицей counter. Скачать можно здесь.

Разметка с выводом результата:

<?php
// Счётчик для кликов по изображению
$mysql = new PDO('mysql:host=localhost;dbname=test', 'root', 'root');
$statement = $mysql->query("SELECT `value` FROM counter WHERE `id` = 1");
$data3 = (int)$statement->fetchColumn();

// HTML
<div class="counter image_counter">Clicked: <span id="counter_image"><?= $data3 ?></span></div>
<img src="image/image.jpg" alt="Click me" class="img-responsive" id="image" title="Click me">

jQuery:

$( document ).ready(function() {
 var image = $("#image"),
     counter = $("#counter_image");
 image.on('click', function(e) {
  var ajax = $.ajax({
   method : 'post',
   url : 'counter.php',
   dataType : 'text',
   data : { 'count' : 1 }
  });
  ajax.done(function(data){
   data = JSON.parse(data);
   counter.html(parseInt(data));
  }) ;
 });
});

counter.php:

<?php

declare(strict_types=1);
error_reporting(E_ALL);

if (isset($_POST['count']) && (int)$_POST['count'] === 1):
 try {
   $mysql = new PDO('mysql:host=localhost;dbname=test', 'root', 'root');
   $stmt = $mysql->query("SELECT `value` FROM counter WHERE `id` = 1");
   $data = (int)$stmt->fetchColumn();
   $data++;
   $query = "UPDATE `counter` SET `value` = :value WHERE `id` = :id";
   $params = [
     ':id' => 1,
     ':value' => $data
   ];
   $stmt = $mysql->prepare($query);
   $stmt->execute($params);
    echo json_encode($data);
 } catch (Exception $e) {
  echo $e->getMessage();
 }
endif;