Blog Yazarı Olmak İster misin?
Kaleminize güveniyorsanız, bloğumuzda özgürce web, hosting, teknoloji ve programlama dilleri üzerine makale yazabilirsiniz. Bizde sizi sürekli hediye kuponlar ile ödüllendiririz. Blog Yaz!
Chart. Js Ve Php İle Dinamik Ziyaretçi Grafiği
Tahmini okuma 3 dakika 42 saniye Görüntülenme: 1208Chart.js ve Php kullanarak dinamik ziyaretçi grafiği nasıl yapılır onu anlatacağız. Chart.js kullanmak için öncelikle https://www.chartjs.org/docs/latest/getting-started/ sayfasından cdn script dosyasını projemize dahil edelim. Ardından jquery kullanacağımız için jquery kütüphanesini dahil ediyoruz. Bu dosyanın adı index.php olsun.
index.php
<!DOCTYPE html>
<html>
<head>
<title> Char.js</title>
<button onclick="showGraph()">Yenile</button>
<canvas id="ziyaretciler" style="height:350px; width:auto;"></canvas>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
</body>
</html>
ziyaretciler adlı veritabanı
| id | ip | tarih | ziyaret |
|---|---|---|---|
| auto increment primary key | varchar(200) | date | integer |
Ben bu projede veritabanı işlemleri için basic.db sınıfını kullanacağım. Bu sınıfı https://github.com/tayfunerbilen/basicdb bağlantısından projenize dahil edebilirsiniz.
İp adresi ve ziyaretçiler sitemizi ziyaret ettiğinde veritabanına ekleme yapmak için iki adet fonksiyon yazacağız. Bunun için bir fonksiyon.php dosyası oluşturalım.
fonksiyon.php
function ziyaretci(){
global $db;
$ziyaretciler = $db->from('ziyaretciler')
->where('ip',gercekip())
->where('YEAR(tarih)',date('Y'))
->where('MONTH(tarih)',date('m'))
->where('DAY(tarih)',date('d'))
->first();
if ($ziyaretciler) {
//BUGÜN BU İP DEN ZİYARETÇİ VARSA
$db->update('ziyaretciler')
->where('ip',gercekip())
->where('YEAR(tarih)',date('Y'))
->where('MONTH(tarih)',date('m'))
->where('DAY(tarih)',date('d'))
->set([
'ziyaret' => $ziyaretciler['ziyaret']+1
]);
}else{
$db->insert('ziyaretciler')
->set([
'ip' => gercekip(),
'ziyaret' => 1,
'tarih' => date('Y-m-d')
]);
}
}
function gercekip() {
if (!empty($_SERVER['HTTP_CLIENT_IP'])) {
$ip=$_SERVER['HTTP_CLIENT_IP'];
} elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) {
$ip=$_SERVER['HTTP_X_FORWARDED_FOR'];
} else {
$ip=$_SERVER['REMOTE_ADDR'];
} return $ip;
}
fonksiyon.php dosyamızı index.php dosyasına dahil etmemiz gerek ve bu sayfa her ziyaret edildiğinde ziyaretçileri alabilmek için fonksiyonun çalışmasını sağlamalıyız. Şimdi de ziyaretçi verilerini grafik üzerinde kullanabilmek için json formatta bir veri üreteceğiz. Bu sayfaya istekte bulunup grafik içerisinde çağıracağız. Verileri alacağımız dosyayı oluşturuyoruz.
data-ajax.php
header('Content-Type: application/json');
date_default_timezone_set('Europe/Istanbul');
$ziyaretciler = $db->from('ziyaretciler')
->groupby('tarih')
->orderby('tarih','desc')
->select('sum(ziyaret) as cogulziyaret, date_format(tarih,\'%d.%m.%Y\') as tarih, count(ip) as tekilziyaret')
->limit(0,30) //Son 30 günü verir değiştirebilirsiniz.
->all();
$data = array();
foreach ($ziyaretciler as $row) {
$data[] = $row;
}
echo json_encode($data);
data-ajax.php sayfasını tarayıcıda ziyaret ettiğinizde https://webdolabi.com/ziyaretciler-grafik-ajax bu linkteki gibi bir sonuç vermeli
Bu işlemin ardından index.php dosyamıza dönelim ve data-ajax.php dosyasına istek atalım.
index.php
<?php
require "fonksiyon.php";
ziyaretciler();
?>
<!DOCTYPE html>
<html>
<head>
<title> Char.js</title>
<button onclick="showGraph()">Yenile</button>
<canvas id="ziyaretciler" style="height:350px; width:auto;"></canvas>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@2.8.0"></script>
<script>
$(document).ready(function () {
showGraph();
});
function showGraph()
{
{
$.post("data-ajax.php",
function (data)
{
console.log(data);
var tarih = [];
var cogulziyaret = [];
var tekilziyaret = [];
for (var i in data) {
tarih.push(data[i].tarih);
cogulziyaret.push(data[i].cogulziyaret);
tekilziyaret.push(data[i].tekilziyaret);
}
var chartdata = {
labels: tarih,
datasets: [
{
label: 'Tekil Hit',
backgroundColor: '#9b59b6',
borderColor: '#8e44ad',
data: tekilziyaret
},
{
label: 'Çoğul Hit',
backgroundColor: '#34495e',
borderColor: '#2c3e50',
data: cogulziyaret
}
]
};
var graphTarget = $("#ziyaretciler");
var barGraph = new Chart(graphTarget, {
type: 'bar',
data: chartdata
});
});
}
}
</script>
</body>
</html>
4 yıl önce Web Dolabi tarafından yazıldı. Son güncelleme 09.12.2020 04:37
