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

Chart. Js Ve Php İle Dinamik Ziyaretçi Grafiği

Tahmini okuma 3 dakika 42 saniye Görüntülenme: 1145

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/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://websoft.com.tr/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>

 


1 yıl önce Web Soft tarafından yazıldı. Son güncelleme 09.12.2020 04:37
Blogtan Son Yazılar
Yükleniyor

Yeni Ürünlerden İlk Siz Haberdar Olun!

Şimdi abone olarak yeni ürün ve indirim kampanyalarından anında faydalanın!

veya üye olmak isteyebilirsiniz

Üye Ol