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