Bu yazımızda Laravelin Template motoru olan Blade TEmplate ile şablon oluşturmaya değineceğiz.
Çoğu web sayfasında master page düzeni vardır. View dosyaları belli parçalara bölünür ve çağırılırlar. Böylelikle kod tekrarının önüne geçilmiş olunur. Eğer bu yapıyı kullanmazsak prjemizde aynı kodlardan defalarca kez yazmak zorunda kalırdık. Bu da projemizin boyutunu büyütür ve performansını da olumsuz etkilerdi. LAravelde bu yapıyı bir kere oluşturup defalarca kullanmak mümkündür.
Laravel ile bir to do list uygulaması yaptığınızı düşünün. Temel olarak şu şekilde yapımızı oluşturabiliriz.
<!-- resources/views/components/layout.blade.php -->
<html>
<head>
<title>{{ $baslik?? 'Todo List Uygulaması' }}</title>
</head>
<body>
<h1>Yapılacaklar</h1>
<hr/>
{{ $slot }}
</body>
</html>
Çoğu web sayfası tüm yapılarda temel bir düzen kullanır. Mesela header footer kısmı her sayfada sabittir ama content kısmı yani içerik kısmı her sayfada değişir. Bunun için şöyle bir yapı kullanabiliriz.
<!-- resources/views/layouts/app.blade.php -->
<html>
<head>
<title>Uygulama Adı - @yield('title')</title>
</head>
<body>
@section('header')
uygulamamızın header kısmı
@show
<div class="container">
@yield('content')
</div>
@section('footer')
This is the master sidebar.
@show</body>
</html>
Gördüğünüz gibi bu sayfa tipik bir html sayfasıdır. Bu sayfa diğer dosyalarda extend edilerek kullanılır. @section alanı içerisine kodlar yazarız. @yield komutu ile ise master page sayfasından türettiğimiz sayfalarda @section() şeklinde kullanarak içerisine kodlar yazabiliriz. Bu sayede her sayfada yield farklı bir şekilde çalışır ve uygulamamız dinamik bir hal almış olur.
Bir sayfa türetirken alt sayfanın nereden türetileceğini belirlemek için @extend ifadesini kullanırız. @yield ile master page sayfasında tanımladığımız bir değeri extend ettiğimiz sayfada @section şeklinde kullanırız.
Şimdi sizlerle basit bir örnek yapalım. Sayfamıza ait header ve footer alanları sabit olan bir yapı oluşturalım. Başlık ve içerik kısmını yield ile tanımlayarak dinamik bir hal almasını sağlayalım.
Bunun için resources/views klasörüne include adında bir klasör oluşturup içerisine header.blade.php ve footer.blade.php adında 2 dosya oluşturuyoruz. resources/views klasöüne ise master.blade.php ve index.blade.php adında 2 dosya oluşturuyoruz. master.blade.php dosyamız alt sayfalarımızı türeteceğimiz dosya olacak. index.blade.php dosyamız ise master sayfamızdan türetilen bir sayfa olacak. Klasör yapımız şu şekilde olacak.
web.php dosyamız (Route)
<?php
use Illuminate\Support\Facades\Route;
use Illuminate\Http\Request;
use App\Http\Controllers\UserController;
Route::get('/',[UserController::class,'index']);
UserController.php Dosyamız.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Hash;
class UserController extends Controller
{
public function index()
{
$baslik = "Kişi Listesi";
return view('index',['baslik'=>$baslik]);
}
}
master.blade.php dosyamız
@include('include.header')
@yield('content')
@include('include.footer')
header.blade.php dosyamız
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<title>{{$baslik}}</title>
</head>
footer.blade.php dosyamız
<body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html><body>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
index.balde.php dosyamız
@extends('master')
@section('content')
<div class="container mt-5">
<div class="col-md-6">
<h4>Kişi Listesi</h4> <hr>
<table class="table">
<thead class="thead-dark">
<tr>
<th scope="col">Ad Soyad</th>
<th scope="col">Yaş</th>
<th scope="col">Meslek</th>
</tr>
</thead>
<tbody>
<tr>
<td>Zafer Yıldız</td>
<td>26</td>
<td>Mühendis</td>
</tr>
<tr>
<td>Ayhan Yıldız</td>
<td>53</td>
<td>Mühendis babası</td>
</tr>
</tbody>
</table>
</div>
</div>
@endsection
26 Yaşında. Araştırmayı seven, bir şeyler öğretmeye meraklı bir Bilgisayar Mühendisi
Yakup Akdin
14-April-2022Gerçekten anlaşılır olmuş. Elinize emeğinize sağlık