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 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/[email protected]"></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://sitenisevsinler.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/[email protected]"></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>
Lisans Yönetim Scripti 2
Canlı Radyo Dark Scripti
Canlı Radyo Light Scripti
Rüzgar Radyo Scripti
Radyo Minimal
Ekitap Scripti
Aşk Sevgililer Günü Evlilik
Sohbet Scripti
Dialog Whatsapp Benzeri Sohbet
Firebase Chat
Kurumsal Veya Özel Site Hizmet
Web Ajans Scripti
Tekrar Kurulum Hizmeti
Gümrük Ürün Yönetimi
Ajans Scripti Kolay Kullanım
Ajans Scripti V2
Ajans Scripti V3
Avukat Ve Hukuk Bürosu Scripti
Avukat Ve Hukuk Bürosu Web Tasarım V2
Mobil Uyumlu Çilingir Scripti
Kuaför Güzellik Salonu Spa Merkezi Web Tasarım
Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı
Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V2
İlaçlama Şirketi Web Tasarımı
İlan Web Tasarımı
İlan Web Tasarımı V2
İnşaat Firması Web Tasarımı
İnşaat Firması Tasarımı V2
Kitapçı Kırtasiye Web Tasarımı
Kombi Klima Servisi Web Tasarımı
Korku Evi Eğlence Mekanı Web Tasarımı
Kurumsal Firma Web Tasarımı V2
Kurumsal Firma Web Tasarımı V3
Ajans Web Tasarımı V4
Kurumsal Firma Web Tasarımı V4
Kurumsal Firma Web Tasarımı V5
Kurumsal Firma Web Tasarımı V6
Kurumsal Firma Web Tasarımı V7
Kurumsal Firma Web Tasarımı V8
Mobilya Dekorasyon Web Tasarımı
Nakliyat Taşımacılık Web Tasarımı
Nakliyat Taşımacılık Web Tasarımı V2
Nakliyat Taşımacılık Web Tasarımı V3
Ana Okulu Ve Kreş Web Tasarımı
Otel Pansiyon Web Tasarımı
Özel Oto Servis Web Tasarımı
Rent A Car Araç Kiralama Web Tasarımı
Rent A Car Araç Kiralama Web Tasarımı V2
Restaurant Cafe Bar Lokanta Web Tasarımı
Restaurant Cafe Bar Lokanta Web Tasarımı V2
Teknik Servis Web Tasarımı
Sigorta Acenta Web Tasarımı
Spor Salonu Body Fitness Web Tasarımı
Spor Salonu Body Fitness Web Tasarımı V2
Sürücü Kursu Web Tasarımı
Tek Ürün Satış Web Tasarımı
Tek Ürün Satış Web Tasarımı V2
Tek Ürün Yaprak Web Tasarımı
Tek Ürün Yaprak Web Tasarımı V2
Tek Ürün Satış Web Tasarımı V3
Temizlik Şirketi Web Tasarımı
Temizlik Şirketi Web Tasarımı V2
Ajans Web Tasarımı V5
Ajans Web Tasarımı V6
Werock Radyo Web Tasarımı
Werock Android Radyo Uygulaması
Avukat Ve Hukuk Bürosu Tasarımı V3
Kuaför Güzellik Salonu Spa Merkezi Web Tasarımı V2
Sağlık Güzellik Poliklinik Dişçi Hastane Web Tasarımı V3
İnşaat Firması Web Tasarımı V3
Kurumsal Firma Web Tasarımı V9
Mimarlık Web Tasarımı
Nakliyat Taşımacılık Web Tasarımı V4
Ana Okulu Ve Kreş Web Tasarımı V2
Psikolog Web Tasarımı
Spor Salonu Body Fitness Web Tasarımı V3
Sürücü Kursu Web Tasarımı V2
Teknik Servis Web Tasarımı V3