# Laravel Blade ile Veritabanından Alınan Çalışan Saati, İzin ve Vardiya Verilerini ApexCharts ile Görselleştirme: AJAX ve Filtre Destekli Örnek Proje Anlatımı

Laravel, modern web projelerinde tercih edilen popüler bir PHP framework’üdür. Uygulamanızda çalışanların saat, izin ve vardiya gibi verilerini yönetmek ve görselleştirmek istiyorsanız, hem kullanıcı deneyimini artırmak hem de veri analizini kolaylaştırmak için raporlama çözümleri devreye girer. Bu yazıda, **Laravel Blade tabanlı bir rapor sayfasında veritabanından alınan çalışan saatleri, izin ve vardiya verilerinin ApexCharts ile dinamik, filtrelenebilir ve AJAX destekli olarak nasıl görselleştirileceğini** baştan sona anlatacağız.

## İçindekiler

– [Projenin Amaç ve Kapsamı](#projenin-amaç-ve-kapsamı)
– [Kullanılan Teknolojiler ve Kütüphaneler](#kullanılan-teknolojiler-ve-kütüphaneler)
– [Veritabanı Tasarımı ve Modeller](#veritabanı-tasarımı-ve-modeller)
– [Controller ve Raporlama Mantığı](#controller-ve-raporlama-mantığı)
– [Blade Tabanlı Rapor Sayfasının Tasarımı](#blade-tabanlı-rapor-sayfasının-tasarımı)
– [ApexCharts ile Veri Görselleştirme](#apexcharts-ile-veri-görselleştirme)
– [Filtreleme Özellikleri (Tarih Aralığı, Çalışan, Vardiya Tipi)](#filtreleme-özellikleri-tarih-aralığı-çalışan-vardiya-tipi)
– [AJAX ile Dinamik Veri Güncelleme](#ajax-ile-dinamik-veri-güncelleme)
– [Gelişmiş Özellikler ve İyileştirme İpuçları](#gelişmiş-özellikler-ve-iyileştirme-ipuçları)
– [Sonuç ve Değerlendirme](#sonuç-ve-değerlendirme)

—

## Projenin Amaç ve Kapsamı

Bu örnek projede, **çalışanların iş saatleri, izin süreleri ve vardiya türleri** gibi performans ve katılım verilerinin görsel olarak raporlanması hedeflenmektedir. Hem insan kaynakları ekiplerinin hem de yöneticilerin, çalışan verilerini hızlıca analiz edebilmesi için pratik ve interaktif bir rapor ekranı oluşturulacaktır. Mevcut kullanıcı dostu arayüz ve hızlı veri güncellemesi için AJAX ile filtreleme ve tekrar sayfa yüklemesi olmadan güncel veriye ulaşım sağlanacaktır.

—

## Kullanılan Teknolojiler ve Kütüphaneler

Proje kapsamında kullanılacak başlıca yazılım bileşenleri ve kütüphaneler şunlardır:

– **Laravel:** PHP ile yazılmış, güçlü, ölçeklenebilir web uygulamaları oluşturmak için kullanılan popüler framework.
– **MySQL:** Verilerin saklandığı ilişkisel veritabanı yönetim sistemi.
– **Laravel Eloquent ORM:** Veritabanı işlemlerini kolaylaştırmak için Laravel’in sunduğu nesne ilişkisel haritalama aracı.
– **Laravel Blade:** Laravel’in kendi şablon motoru.
– **ApexCharts:** Modern, dinamik ve etkileşimli grafikler oluşturmak için JavaScript tabanlı açık kaynak kütüphane.
– **jQuery veya Fetch API:** AJAX isteklerine uygun, hızlı ve kolay veri alışverişi için (isteğe bağlı).
– **Bootstrap ve/veya Tailwind CSS:** Arayüzü hızlıca stilize etmek için kullanışlı CSS framework’leri.

—

## Veritabanı Tasarımı ve Modeller

Başlangıçta, çalışanların saat bilgilerini ve izinlerini tutacak sade ama işlevsel bir veritabanı şeması gereklidir. İşte temel tablolar:

1. **employees** (Çalışanlar)
– `id` (primary key)
– `name` (isim)
– `department` (departman)
– `created_at`, `updated_at`

2. **shifts** (Vardiyalar)
– `id`
– `employee_id` (foreign key)
– `shift_type` (örn. “Gündüz”, “Gece”)
– `start_time` (vardiya başlangıç)
– `end_time`
– `date` (vardiya yapılan gün)
– `created_at`, `updated_at`

3. **attendances** (Katılım/Saat Bilgisi)
– `id`
– `employee_id`
– `date`
– `check_in` (giriş saati)
– `check_out` (çıkış saati)
– `total_hours`
– `created_at`, `updated_at`

4. **leaves** (İzinler)
– `id`
– `employee_id`
– `leave_type` (örn. “Yıllık”, “Hastalık”)
– `start_date`
– `end_date`
– `duration`
– `created_at`, `updated_at`

Her tabloya karşılık gelen **Eloquent model**’leri de oluşturulmalıdır:
– `Employee`, `Shift`, `Attendance`, `Leave`

> **Not:** Mevcut projenizde isimlendirme ve alanlarda ihtiyaca göre özelleştirme yapabilirsiniz.

—

## Controller ve Raporlama Mantığı

### RaporController.php

Kullanıcıdan filtreler (tarih, çalışan, vardiya türü…) alınacak ve sorgular dinamik şekilde oluşturulacak. Filtre parametreleriyle birlikte ilişkili veriler çekilerek JSON ya da Blade ile ön tarafa gönderilecek.

“`php
use App\Models\Employee;
use App\Models\Shift;
use App\Models\Attendance;
use App\Models\Leave;
use Illuminate\Http\Request;

class ReportController extends Controller
{
public function index()
{
$employees = Employee::all();
$shiftTypes = Shift::select(‘shift_type’)->distinct()->pluck(‘shift_type’);
return view(‘reports.index’, compact(’employees’, ‘shiftTypes’));
}

public function fetchData(Request $request)
{
$query = Attendance::query()
->with([’employee’, ’employee.shifts’, ’employee.leaves’]);

if ($request->has(’employee_id’) && $request->employee_id != ‘all’) {
$query->where(’employee_id’, $request->employee_id);
}

if ($request->has(‘start_date’) && $request->has(‘end_date’)) {
$query->whereBetween(‘date’, [$request->start_date, $request->end_date]);
}

$attendances = $query->get();

$data = []; // Verileri ApexCharts formatında işleyin
// (Örneğin: toplam saat, izin süresi, vardiya tipi bazında gruplama vb.)

foreach ($attendances->groupBy(’employee_id’) as $employeeId => $days) {
$totalHours = $days->sum(‘total_hours’);
$totalLeaves = $days->first()->employee->leaves
->whereBetween(‘start_date’, [$request->start_date, $request->end_date])
->sum(‘duration’);
$shiftTypes = $days->pluck(’employee.shifts.*.shift_type’)->flatten();

$data[] = [
’employee’ => $days->first()->employee->name,
‘total_hours’ => $totalHours,
‘total_leaves’ => $totalLeaves,
‘shift_types’ => $shiftTypes->unique()->toArray(),
];
}

return response()->json($data);
}
}
“`

—

## Blade Tabanlı Rapor Sayfasının Tasarımı

Ana sayfa, filtre komponentleri ve görselleştirmenin yerleştirileceği bölümlere ayrılır. Ayrıca AJAX ile dinamik veri güncelleme desteklenmelidir.

### resources/views/reports/index.blade.php

“`blade
@extends(‘layouts.app’)

@section(‘content’)