DRY Prensibi (Kendini Tekrar Etme)
Merhaba dostlar! Ben Uğurcan. 30 günlük LaraFreelancer serimizin 3. günündeyiz.
Eğer her HTML sayfasında <html>, <head>, <nav> kodlarını kopyala-yapıştır yapıyorsanız, gelecekteki kendinize büyük bir eziyet hazırlıyorsunuz demektir. Yazılımda altın kural şudur: DRY (Don't Repeat Yourself - Kendini Tekrar Etme).
Bugün Laravel'in güçlü motoru Blade'i kullanarak, projemizin Ana İskeletini (Master Layout) oluşturacağız.
VS Code İpucu 💡
HTML yazarken hızlanmak ister misiniz?
- VS Code'da div.container>div.row>div.col*3 yazıp Tab tuşuna basarsanız, anında iç içe geçmiş div yapıları oluşur. Buna Emmet denir ve hayat kurtarır.
Adım 1: Klasör Düzeni
Önce şablon dosyamızı koyacağımız yeri hazırlayalım.
- VS Code'da resources/views klasörüne gidin.
- Burada layouts adında yeni bir klasör oluşturun.
- Bu klasörün içine admin.blade.php adında bir dosya açın.
Adım 2: Master Page (Ana İskelet) Oluşturma
Bu dosya bizim "Kalıbımız" olacak. Hızlıca güzel bir görünüm elde etmek için Bootstrap 5 CDN kullanacağız (CSS ile uğraşmayalım, işimiz Backend).
layouts/admin.blade.php içine şu kodları yapıştırın:
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@yield('title', 'LaraFreelancer')</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
body { display: flex; min-height: 100vh; flex-direction: column; }
.wrapper { display: flex; flex: 1; }
.sidebar { min-width: 250px; background: #343a40; color: white; padding: 20px; }
.sidebar a { color: #cfd2d6; text-decoration: none; display: block; padding: 10px 0; }
.sidebar a:hover { color: white; }
.content { flex: 1; padding: 20px; background: #f8f9fa; }
</style>
</head>
<body>
<nav class="navbar navbar-dark bg-dark px-3">
<span class="navbar-brand mb-0 h1">LaraFreelancer v1.0</span>
<span class="text-white">Merhaba, Kral</span>
</nav>
<div class="wrapper">
<div class="sidebar">
<h5>Menü</h5>
<a href="/panel">🏠 Panel (Dashboard)</a>
<a href="/projelerim">🚀 Projelerim</a>
<a href="#">⚙️ Ayarlar</a>
</div>
<div class="content">
@yield('content')
</div>
</div>
<footer class="bg-light text-center py-3 mt-auto">
<p class="mb-0">© 2025 LaraFreelancer - Tüm Hakları Saklıdır.</p>
</footer>
</body>
</html>
Kodun Mantığı Nedir?
- @yield('title'): Sayfa başlığının dinamik gelmesini sağlar.
- @yield('content'): İşte sihirli nokta burası! Diğer sayfalardaki içerikler gelip tam buraya oturacak. Header ve Sidebar sabit kalacak.
Adım 3: Dashboard Sayfasını Bağlama
Şimdi dün oluşturduğumuz resources/views/dashboard.blade.php dosyasını açın. İçindeki tüm HTML kodlarını silin. Sadece şunları yazın:
@extends('layouts.admin')
@section('title', 'Yönetim Paneli')
@section('content')
<div class="card shadow-sm">
<div class="card-header bg-primary text-white">
<h5 class="mb-0">Hoşgeldin Uğurcan!</h5>
</div>
<div class="card-body">
<p class="lead">LaraFreelancer sistemine hoşgeldin. Sol menüden işlemlere başlayabilirsin.</p>
<button class="btn btn-success">Yeni Proje Ekle</button>
</div>
</div>
@endsection
Tarayıcıda /panel sayfasına gidin. Bam! Artık profesyonel görünümlü, sol menüsü ve üst barı olan bir paneliniz var.
Adım 4: Günü Kaydetmek (Git Commit)
Büyük bir değişiklik yaptık. Hemen yedekliyoruz. VS Code terminalini açın:
git add . git commit -m "Gün 3: Blade layout yapısı kuruldu ve Bootstrap entegre edildi" git push
🎯 GÜNÜN GÖREVİ (Challenge)
"Ben anladım" demek yetmez, yapman lazım!
- /projelerim rotası için dün oluşturduğun View dosyasını aç.
- Tıpkı dashboard gibi onu da @extends('layouts.admin') kullanarak ana şablona bağla.
- İçeriğine "Projelerim burada listelenecek" yazan şık bir Bootstrap kartı (Card) ekle.
- Değişikliği GitHub'a pushla.
- Ekran görüntüsünü veya Repo linkini yorumlara at. Bakalım kimlerin paneli daha şekil duruyor?