Счетчик кликов на сайте (примеры)
Примеры реализации счётчика кликов. Простой пример счётчика кликов. Сохранение результата в файле или базе данных 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;