Wordpress İle Özel Bir Dinamik Veri Görselleştirme Paneli Nasıl Yapılır?

Gereksinimler ve Ön Hazırlık

Projeye başlamadan önce geliştirme ortamınızın güncel olduğundan emin olmalısınız. WordPress 6.x ve üzeri sürümler, modern PHP standartlarını tam desteklediği için önerilir. İhtiyacınız olan temel araçlar şunlardır:

• PHP 8.2+: Daha hızlı ve güvenli veritabanı işlemleri için güncel sürüm.
• Chart.js: Dinamik grafikler oluşturmak için kullanılan hafif ve popüler bir JavaScript kütüphanesi.
• WordPress Child Theme: Kodlarınızın ana tema güncellemelerinden etkilenmemesi için zorunludur.
• Veritabanı Erişimi: Özel tablolarınız veya standart WordPress tabloları (wp_posts, wp_postmeta) üzerinde sorgu yapma yetkisi.

Veritabanından Dinamik Veri Çekme

WordPress veritabanından veri çekmek için $wpdb sınıfını kullanırız. Güvenlik için SQL Injection saldırılarına karşı her zaman prepare() metodunu kullanmalısınız. Aşağıdaki örnek, belirli bir tarih aralığındaki satış verilerini çekmek için tasarlanmıştır.

function get_custom_data_for_chart() {
    global $wpdb;
    $table_name = $wpdb->prefix . 'custom_sales_data';
    
    // SQL Injection koruması ile güvenli sorgu
    $results = $wpdb->get_results(
        $wpdb->prepare("SELECT date, amount FROM $table_name WHERE status = %s", 'completed'),
        ARRAY_A
    );
    
    return $results;
}

Bu fonksiyon, veritabanından tamamlanmış satışları dizi formatında döndürür. Veriyi JSON formatına çevirerek JavaScript tarafına aktarmak için WordPress'in wp_localize_script() fonksiyonunu kullanacağız.

WordPress AJAX API ile Veri İletişimi

Sayfayı yenilemeden veriyi anlık olarak güncellemek için WordPress AJAX yapısını kullanırız. Bu yöntem, kullanıcı deneyimini artırır ve sunucu yükünü optimize eder. Öncelikle PHP tarafında AJAX aksiyonumuzu tanımlayalım.

add_action('wp_ajax_get_chart_data', 'get_chart_data_callback');

function get_chart_data_callback() {
    $data = get_custom_data_for_chart(); // Yukarıdaki fonksiyonu çağırır
    wp_send_json_success($data);
}

Bu işlem, istemciden gelen isteği karşılar ve veriyi JSON olarak tarayıcıya gönderir. wp_send_json_success fonksiyonu, verinin yanında otomatik olarak başarı durumu da ekler.

Chart.js ile Görselleştirme Paneli Oluşturma

Veriyi JavaScript tarafına aldığımıza göre, artık görselleştirme aşamasına geçebiliriz. Chart.js kütüphanesini temanıza ekledikten sonra, veriyi işleyen ve grafiği çizen JavaScript kodunu yazalım.

// AJAX ile veriyi çekme ve grafiği oluşturma
fetch(ajaxurl + '?action=get_chart_data')
    .then(response => response.json())
    .then(data => {
        const ctx = document.getElementById('myChart').getContext('2d');
        new Chart(ctx, {
            type: 'line',
            data: {
                labels: data.data.map(item => item.date),
                datasets: [{
                    label: 'Satış Miktarı',
                    data: data.data.map(item => item.amount)
                }]
            }
        });
    });

Bu kod bloğu, sunucudan gelen veriyi haritalandırarak (map) Chart.js'in anlayacağı bir formata dönüştürür ve DOM üzerindeki canvas elementine çizer.

Yöntemlerin Karşılaştırılması

Güvenlik ve Performans Optimizasyonu

Kritik Uyarı: Dinamik veri panelleri oluştururken veritabanı sorgularınızı mutlaka önbelleğe (transients API) almalısınız. Aksi takdirde, her sayfa yenilenmesinde veritabanına ağır sorgular atarak sitenizin yavaşlamasına neden olursunuz.

Ayrıca, kullanıcı yetkilendirmesini kontrol etmeyi unutmayın. current_user_can('manage_options') kontrolü ile sadece yöneticilerin bu verileri görmesini sağlayın.

function get_chart_data_callback() {
    if (!current_user_can('manage_options')) {
        wp_send_json_error('Yetkisiz erişim');
    }
    // Veri çekme işlemleri...
}

Sıkça Sorulan Sorular

Chart.js yerine hangi kütüphaneleri kullanabilirim?

Daha karmaşık ve interaktif grafikler için D3.js veya ApexCharts kütüphanelerini tercih edebilirsiniz. Ancak basit paneller için Chart.js en optimize olanıdır.

Verilerim neden grafikte görünmüyor?

Öncelikle tarayıcı konsolunu (F12) kontrol edin. AJAX isteği 403 veya 404 hatası veriyorsa, ajaxurl değişkeninin tanımlı olduğundan ve aksiyon isminin eşleştiğinden emin olun.

Veritabanı sorgularım siteyi yavaşlatır mı?

Evet, eğer sorgularınız optimize edilmemişse yavaşlatır. TRANSIENTS API kullanarak veriyi belirli bir süre (örneğin 1 saat) bellekte tutmanız performansı ciddi oranda artıracaktır.

Mobil uyumluluk için ne yapmalıyım?

Chart.js varsayılan olarak responsive'dir. Canvas elementini kapsayan bir div oluşturup ona maksimum genişlik vererek mobil cihazlarda düzgün görünmesini sağlayabilirsiniz.

Özel tabloları WordPress'e nasıl tanıtırım?

WordPress'in $wpdb nesnesi, veritabanındaki tüm tablolara erişebilir. Özel bir tablo oluşturduysanız, sadece tablo adını doğru tanımlamanız yeterlidir.

Dinamik Veri Panellerinde İleri Seviye Filtreleme: Tarih Aralığı Entegrasyonu

Kullanıcıların veriler üzerinde kontrol sahibi olmasını sağlamak, panelinizin etkileşimini artırır. Bir tarih aralığı filtresi eklemek için hem ön yüzde bir tarih seçici (datepicker) kullanmalı hem de bu veriyi AJAX isteği ile sunucuya güvenli bir şekilde iletmelisiniz.

Öncelikle, HTML tarafında basit bir form yapısı oluşturalım:

    
    
    Filtrele

JavaScript tarafında ise bu tarihleri alıp AJAX isteğine parametre olarak eklememiz gerekir:

document.getElementById('apply-filter').addEventListener('click', function() {
    const startDate = document.getElementById('start-date').value;
    const endDate = document.getElementById('end-date').value;

    fetch(ajaxurl, {
        method: 'POST',
        headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
        body: new URLSearchParams({
            action: 'get_filtered_data',
            start: startDate,
            end: endDate,
            nonce: my_vars.nonce
        })
    })
    .then(response => response.json())
    .then(data => updateChart(data));
});

Veri Görselleştirme Panellerinde Hata Ayıklama (Debugging) Stratejileri

Dinamik panellerde veri akışı kesintiye uğradığında sorunu tespit etmek için sistematik bir yaklaşım izlemelisiniz. Genellikle hata, veritabanı sorgusunun yanlış tarih formatı döndürmesi veya JSON yanıtının bozuk olmasından kaynaklanır.

Sunucu Tarafı Hata İzleme

WordPress hata ayıklama modunu aktif ederek, AJAX isteği sırasında oluşan PHP hatalarını wp-content/debug.log dosyasında görebilirsiniz. wp-config.php dosyanıza şu satırları ekleyin:

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false );

İstemci Tarafı (Console) Kontrolleri

Tarayıcı konsolunda gelen veriyi incelemek, grafik kütüphanesinin neden render edilmediğini anlamanızı sağlar. Özellikle console.log(response) kullanarak sunucudan dönen ham veriyi kontrol edin:

// AJAX success callback içinde
.then(data => {
    if (data.success) {
        console.log('Veri alındı:', data.data);
        renderChart(data.data);
    } else {
        console.error('Sunucu hatası:', data.message);
    }
})

Veri Doğrulama Tablosu

Grafiğinize veri göndermeden önce verinin yapısını şu kriterlere göre doğrulamanız önerilir:

Bu kontrolleri yaparak, panelinizin beklenmedik veri girişlerinde çökmesini engelleyebilir ve kullanıcıya daha kararlı bir deneyim sunabilirsiniz.

Sonuç

WordPress ile özel bir dinamik veri görselleştirme paneli oluşturmak, veritabanı yönetimi ve ön yüz geliştirme becerilerinizi birleştiren harika bir projedir. Bu rehberde öğrendiğiniz AJAX entegrasyonu, güvenli sorgulama ve grafik kütüphanesi kullanımı, modern bir dashboard oluşturmanız için gereken temel taşlardır.

Bir sonraki adım olarak, grafiğinize "tarih aralığı seçme" filtresi ekleyerek kullanıcıların veriler üzerinde daha fazla kontrol sahibi olmasını sağlayabilirsiniz. Başarılı kodlamalar dilerim.

Yasal Uyarı: Bu rehberdeki kod örnekleri eğitim amaçlıdır. Üretim ortamında (production) kullanmadan önce mutlaka SQL Injection ve XSS saldırılarına karşı verilerinizi sanitize edin ve yetkilendirme kontrollerini (nonces) eksiksiz uygulayın. Yazılım güvenliği sorumluluğu geliştiriciye aittir.