Laravel ile Veri Listeleme: Veritabanından Admin Paneline (Gün 7)

 Parçaları Birleştirme Vakti

Merhaba dostlar! Ben Uğurcan. Bir haftayı geride bıraktık ve bugün emeklerimizin karşılığını alıyoruz.

Dün fabrikalarımızla (Factory) veritabanına 50 tane sahte müşteri basmıştık. Ama bu veriler şu an sadece veritabanında "hapsolmuş" durumda. Bugün onları özgür bırakacağız ve Admin Panelimizde şık bir tablo halinde listeleyeceğiz.

Adım 1: Yeni Controller (Yönetici) Oluşturma

Müşteri işlemleri için genel DashboardController kullanmak amatörce olur. Her işin kendi yöneticisi olmalı.

Terminali açın:

php artisan make:controller ClientController

Adım 2: Verileri Çekmek (Backend)

app/Http/Controllers/ClientController.php dosyasını açın. Veritabanından müşterileri çekeceğiz ve kutulayıp (compact) görünüme (view) göndereceğiz.

namespace App\Http\Controllers;

use App\Models\Client; // Modelimizi çağırmayı unutmayın!
use Illuminate\Http\Request;

class ClientController extends Controller
{
    public function index()
    {
        // Tüm müşterileri al (En son eklenen en üstte olacak şekilde)
        $clients = Client::latest()->get();

        // 'clients' klasöründeki 'index' dosyasına veriyi gönder
        return view('clients.index', compact('clients'));
    }
}

Adım 3: Rotayı Tanımlamak

routes/web.php dosyasını açın. Yeni sayfamızın adresini belirleyelim.

use App\Http\Controllers\ClientController;

// Müşteri Listesi Rotası
Route::get('/musteriler', [ClientController::class, 'index'])->name('clients.index');

Adım 4: View ve Blade Döngüsü (Frontend)

Şimdi görsel şölen zamanı.

1. resources/views içinde clients adında bir klasör açın.
2. İçine index.blade.php dosyasını oluşturun.
3. Aşağıdaki kodları yapıştırın. Burada @foreach yerine @forelse kullanacağız. Bu profesyonel bir yöntemdir; eğer hiç veri yoksa otomatik olarak "Veri bulunamadı" kısmını çalıştırır.

@extends('layouts.admin')

@section('title', 'Müşteri Listesi')

@section('content')
<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h2>Müşteri Listesi</h2>
        <a href="#" class="btn btn-primary">+ Yeni Müşteri</a>
    </div>

    <div class="card shadow">
        <div class="card-body">
            <table class="table table-hover table-striped">
                <thead class="table-dark">
                    <tr>
                        <th>#ID</th>
                        <th>İsim Soyisim</th>
                        <th>Email</th>
                        <th>Telefon</th>
                        <th>Bütçe</th>
                        <th>İşlemler</th>
                    </tr>
                </thead>
                <tbody>
                    {{-- Sihirli Döngü Başlıyor --}}
                    @forelse($clients as $client)
                    <tr>
                        <td>{{ $client->id }}</td>
                        <td class="fw-bold">{{ $client->name }}</td>
                        <td>{{ $client->email }}</td>
                        <td>{{ $client->phone ?? '-' }}</td> {{-- Telefon yoksa tire koy --}}
                        <td>
                            <span class="badge bg-success">{{ number_format($client->budget, 2) }} ₺</span>
                        </td>
                        <td>
                            <button class="btn btn-sm btn-info text-white">Düzenle</button>
                            <button class="btn btn-sm btn-danger">Sil</button>
                        </td>
                    </tr>
                    @empty
                    {{-- Veritabanı boşsa burası çalışır --}}
                    <tr>
                        <td colspan="6" class="text-center py-4">
                            <div class="text-muted">Henüz hiç müşteri kaydı yok.</div>
                        </td>
                    </tr>
                    @endforelse
                </tbody>
            </table>
        </div>
    </div>
</div>
@endsection

Tarayıcıda /musteriler adresine gidin. Dün oluşturduğumuz o 50 kişinin orada listelendiğini görünce hissedeceğiniz duygunun adı: Zafer. 🏆

VS Code İpucu 💡

HTML yazarken tablonun içine girip çıktığınızda kodlar karışabilir.

• Format Document: Kodlarınızın otomatik hizalanması için Shift + Alt + F (Mac: Shift + Option + F) tuşlarına basın. VS Code sizin için girintileri (indentation) mükemmel hale getirir.

Adım 5: Save Point (Git Commit)

İlk modülümüzün listeleme özelliği bitti.

git add .
git commit -m "Gün 7: Müşteri listeleme sayfası yapıldı (Controller + View)"
git push

🎯 GÜNÜN GÖREVİ (Challenge)

Bakarak öğrenilmez, yaparak öğrenilir!

1. ProjectController oluştur.
2. /projeler rotasını tanımla.
3. projects/index.blade.php sayfasını oluştur.
4. Projeleri listele ama bir farkla: Status (Durum) sütununda;
   • Eğer durum "bekliyor" ise Sarı Badge (bg-warning),
   • "tamamlandi" ise Yeşil Badge (bg-success) kullanacak bir @if yapısı kur.
5. Sonucun ekran görüntüsünü veya kod bloğunu yorumlarda paylaş!