Laravel 5.2 MasterPage & Layout Sayfası

Merhaba değerli arkadaşlarım :) Laravel hakkında yazdığım son 1 kaç ders view üzerineydi benim gözümde biraz sıkıcı aslında ama bunlarda gerekli :) Bu dersimiz Master Page veya Layout Page olarak adlandırılan her sayfada kullandığımız aynı html kodlarını tekrar tekrar yazmaktan kurtaran bir mantık olayı aslında. PHP içerisinde include kullanmamızla aynı mantık sadece include yerine extends kodunu kullanıyoruz. Bu dersimiz içerisinde aynı zamanda en popüler css framework olan Bootstrap'ıda dahll edeceğiz.

Şimdi uygulamaya başlayalım. Uygulama için Laravel 5.2 View dersimizde kullandığımız yapıyı kullanacağız. View dersini okumasanız bile en azından yapıya göz atmanız bu dersi daha iyi anlamanızda yardımcı olacaktır.

İlk olarak Bootstrap sitesine girerek bootstrap dosyalarını indirelim. Daha sonra Laravelin Public dizinine girip css ve js klasörleri oluşturup bootstrap dosyalarını uygun klasörlere yerleştirelim. Ayrıyeten jQuery dosyamızıda unutmamalıyız tabi ki

Daha sonra ise resources / views içerisine masterpage.blade.php dosyası oluşturalım. İçeriğini ise aşağıdaki gibi yapalım.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>@yield('title')</title>
    <meta name="keywords" content="@yield('keywords')">
    <meta name="description" content="">

    <link rel="stylesheet" href="{{asset('css/bootstrap.min.css')}}"/>
</head>
<body>

<nav class="navbar navbar-default">
    <div class="container-fluid">

        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href ="{{asset("/")}}">Ana Sayfa</a>
        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="{{url('/hakkimizda')}}">Hakkımızda</a></li>
                <li><a href="{{url('/iletisim')}}">İletişim</a></li>
                <li><a href="{{url('/parametreDenemesi')}}">Parametresiz Parametre Denemesi</a></li>
                <li><a href="{{url('/parametreDenemesi/47')}}">47 Parametreli Parametre Denemesi</a></li>
            </ul>
        </div>

    </div>
</nav>

<div class="container">
    @yield('content')
</div>

<script type="text/javascript" src="{{asset('js/jQuery.js')}}"></script>
<script type="text/javascript" src="{{asset('js/bootstrap.min.js')}}"></script>
</body>
</html>

Gördüğünüz gibi her sayfada bulunacak kodları yani html , head , css , body , nav ve js kodlarını masterpage dosyamızda yazdık. Madem bootstrap kullanıyoruz düzgün anlaşılır bir tasarımla çalışalım diye nav kodlarını düzenledik :) İçeriğe küçük bir göz atarsak 2 farklı kod bulunmakta. bunlar @yield , {{asset ('') }} . Öncelikle asset kodundan başlayalım. Zaten yield kodunu kullandığımızda hemen anlayacaksınız :)

Bildiğiniz gibi html sayfalarımız resources / views klasörü içerisinde , css , js , font , images gibi dosyalarımız ise public klasörü içerisinde yer almaktadır. Bu durumda html sayfasından örneğin bir css dosyasını sayfamıza çekebilmek için

<link rel="stylesheet" href="../../public/css/cssdosyasi.css"/>

şeklinde çağırmamız gerekir. Ama bu şekilde bir kullanım her düşünceyi bir kenara atsak bile görüntü olarak güzel gözükmüyor bence :) İşte bu durumda asset kodu bizim yardımımıza yetişiyor. Öncelikle sadece asset kodunu ele alalım.

<link rel="stylesheet" href="{{asset('css/bootstrap.min.css')}}"/>

Aslında olay direkt bellli asset kodu bizi public klasörünün içerisine götürüyor. ../../public yazmadan asset ile public klasörüne gideceğini belirliyoruz ve public içerisinde bulunan css klasörünün içindeki bootstrap.min.css css dosyasını sayfamıza çekeceğini kolaylıkla belirtiyoruz. Doğal olarak public içerisinde yer alan font , js , images dosyalarını da bu şekilde sayfamıza çağıracağız.

Şimdi yield kodunu anlatabilmek için uygulamayı gerçekleştirmeliyiz. Zaten uygulama ile anlayacağınızdan eminim ama tabi ki açıklamayıda yapacağım. Öncelikle bizim 4 sayfamız vardı bunlar anasayfa.blade.php , hakkimizda.blade.php , iletisim.blade.php , parametredenemesi.blade.php. Her birinin Kodunu sırayla aşağıda bulabilirsiniz.

anasayfa.blade.php :

@extends('masterpage')
@section('title', 'Anasayfa')
@section('keywords', 'Anasayfa Anahtar Kelimeler')

@section('content')

    Ana Sayfadayız

@endsection

hakkimizda.blade.php :

@extends('masterpage')
@section('title', 'Hakkımızda')
@section('keywords', 'Hakkımızda Anahtar Kelimeler')

@section('content')

    {{ $sayfaIsmi }}

@endsection

iletisim.blade.php :

@extends('masterpage')
@section('title', 'İletişim')
@section('keywords', 'İletişim Anahtar Kelimeler')

@section('content')

    {{ $sayfa }}

@endsection

parametredenemesi.blade.php :

@extends('masterpage')
@section('title', 'Parametre Denemesi')
@section('keywords', 'Parametre Denemesi Anahtar Kelimeler')

@section('content')

    {{ $sayfa }}

    <br/><br/><br/>

    <strong>Parametre Değerimiz :</strong> {{$deger}}

@endsection

Öncelikle @extends kodu ile masterpage olan sayfamızı tanımladık. Herhangi bir dizinde olmadığı için sadece masterpage sayfasının ismini yazdık ve yine .blade uzatsını kullanmamıza gerek kalmadan laravel bunu kendisi tanımlıyor. işte şimdi @yield kodunun önemini göreceğiz. Masterpage sayfamızda bir çok şey sabittir fakat bazı şeyler sayfadan sayfaya değişiklik sağlamaktadır. Tekrar masterpage.blade.php sayfamıza göz atarsak Title , Keywords ve Content değerlerini @yield olarak yani sayfadan sayfaya değişebileceğini belirtiyoruz. masterpage içeriğini @extends ettiğimiz sayfalarda ise @yield kodunun değerinin ne olacağını @section ile belirliyoruz. Title ve Keywords zaten HTML kodlarından Content ise İçerik anlamında yani sayfanın içeriğini belirlediğimiz yer. Doğal olarak sayfadan sayfaya içerik değişmek zorundadır. Bir nevi @yield değişken belirleme @section ise değişkenin değerini belirlemektedir.

@yield ile belirlediğimiz değerin ismi ne ise @section ile de aynı isimde değeri tanımlamak zorundayız. İsteseydik Title için masterpage sayfamızda @yield('baslik') ve masterpage sayfamızı @extends etitğimiz sayfada ise @section('baslik' , 'Title Değeri') şeklinde belirleyebilirdik. Yani belirleyeceğimiz isim önemli değil sadece isimi doğru yerde belirleyip (Mesela title için <title> @yield('title') </title> gibi) ve @extends sayfasında da aynı isimle değer atamamız olacaktır.

Gördüğünüz gibi kullanım çok basit ama çok fazla işe yarayacak birşey :) View ile ilgil genel kullanım bu ders ile bitti sonunda :) Dersleri tek tek takip edip uyguladıysanız karışacak birşey yok ama yinede şimdiye kadar yaptıklarımızı githuba yükleyeceğim. Bundan sonraki derslerde Paket Yükleme Kullanma hariç farklı bir yapıya en azından menü isimlerini değiştirerek devam edeceğiz.

Beni takip ettiğiniz için teşekkür ederim :)

Github

Proje İnceleme & İndirme : Github

Oğuzhan ÇAKAR

Yorumlar

Bu makaleye ait yorum bulunmamaktadır. İlk yorumu sen yapmalısın :)

Düşünceni Bizimle Paylaş