Laravel 5.4 ile Blog Yapalım – Bölüm 1

Bir önceki yazımızda Laravel ve Laravel kurulumu hakkında bilgi vermiştik. Bkz: laravel başlangıçBlog projemizin için Bootstrap 4 ile geliştirilmiş ücretsiz bir blog teması beğendim ben. Bu bölümde genel olarak Blade şablon yapısını inceleyeceğiz. Siz de hazırsanız dersimize başlayalım. Noktalı virgülünüz bol olsun.

Birinci Bölüm:

  • Clean Blog şablonunu inceleyelim ve konfigüre edelim.
  • HTML arayüzümüzü parçalayalım.
    • Parçalar
    • Bölümler
  • Blade şablon yapısını ve kullanımını inceleyelim.
    • include
    • yield
    • extends
    • section
  • Route düzeni hakkında bilgi edinelim.
  • Laravel’de Clean Blog şablonumuzu görüntüleyelim.

Clean Blog Teması

Start Bootstrap’ın ücretsiz olarak paylaştığı Clean Blog şablonunu sadeliği için tercih ettim. Bizim çalışmamız için uygun olacağını düşünüyorum. Gereksiz kodlardan arınmış bir şablon ile Laravel mantığını daha net anlayabiliriz. Toplamda dört ana HTML sayfasından oluşan Clean Blog şablonu Bootstrap 4 Framework ile geliştirilmiştir.

Clean Blog Bağlantısı:

Clean Blog şablonunu edinmek için aşağıda yer alan bağlantıya tıklayabilirsiniz. Ben bu seride Bootstrap 4 Alpha sürümünü kullanacağım. Siz dilediğiniz sürümü indirebilirsiniz.

Şablon dosyalarımızı kendi işletim sisteminize uygun bir arşiv yöneticisi ile dışarıya çıkartalım.

Şablon Dosyalarını Konfigüre Edelim:

Laravel’de arayüz bileşenlerimiz public dizininde, HTML kodlarımız ise resources dizini altında bulunan views klasöründe; Blade şablon yapısı ile yer almalıdır.

Ben, Clean Blog‘un dosyalarını, Laravel‘de işlevsel biçimde kullanmamı sağlayacak şekilde konfigüre ettim.

|-- clean-blog
    |-- about.html
    |-- contact.html
    |-- index.html
    |-- post.html
    |-- css
    |   |-- bootstrap.min.css
    |   |-- clean-blog.css
    |-- font-awesome
    |   |-- css
    |   |   |-- font-awesome.css
    |   |   |-- font-awesome.min.css
    |   |-- fonts
    |       |-- FontAwesome.otf
    |       |-- fontawesome-webfont.eot
    |       |-- fontawesome-webfont.svg
    |       |-- fontawesome-webfont.ttf
    |       |-- fontawesome-webfont.woff
    |       |-- fontawesome-webfont.woff2
    |-- img
    |   |-- about-bg.jpg
    |   |-- contact-bg.jpg
    |   |-- home-bg.jpg
    |   |-- post-bg.jpg
    |   |-- post-sample-image.jpg
    |-- js
        |-- bootstrap.min.js
        |-- clean-blog.js
        |-- contact_me.js
        |-- jqBootstrapValidation.js
        |-- jquery.min.js

Parçalayalım ve Bölümleri Tanıyalım

Clean Blog arayüzümüzü Laravel’de dinamik bir yapıda kullanmak için kodlarımızı parçalamamız gerekmektedir. Bu düzenin mantığı başlarda karışık gelse de aslında çok basit. Tüm önyargılarımızdan arınalım ve şevkle okumaya devam edelim. Uykusu gelenler, mayışanlar, esneyenler; kendinize bir kahve alın!

Kullanılan arayüzlerde dinamik olması istenilen her bir bölüm, bir parça olmak zorundadır. Bunu görsel bir şekilde ifade etmeye çalışayım zira bu şekilde tam anlaşılmadı.

GIMP konusundaki yeteneksizliğim sizi “Bu da ne şimdi?” tarzında sorulara yöneltmiş olabilir. Biliyorum. Şu şekilde açıklayayım bunu da. Kırmızı bölgemiz şablonumuzun alt bölümünü oluşturacak ve footer ismini alacaktır. Sarı bölgelerimiz, şablonumuzun içerik bölümünü oluşturacak ve content ismini alacaktır. Son olarak; parlak turkuaz bölgemiz şablonumuzun üst bölümünü oluşturacak ve header ismini alacaktır. Şimdi zihninizde şablon parçalama olayının örtüştüğüne inanıyorum. Bunu yapıyoruz ki; şablonumuzu dinamik bir tema haline getirebilelim ve MVC deseninde sağlıklı bir sistem kurabilelim. Eğer halen sorularınız varsa bu konuda araştırmalar yapabilirsiniz.

Blade şablon yapısı ile bölümlendirmeyi hedeflediğimiz alanların kodlarını ayrıştıracağız. Sabırla devam edelim.

Blade Şablon Yapısı

Öncelikle genel bir tanım yapalım. Ben Blade şablon yapısı olarak adlandırıyorum. Türkçe karşılığı “Tema motoru” anlamlarına da gelmektedir. Front-End (arayüz) çalışmalarımızda kodlarımızın okunabilirliğini sağlar. Yukarıda da bahsetmiştim. Laravel‘de resources dizini altında views klasöründe yer almaktadırlar. Önemli bir nokta ise dosya uzantılarımızı “.blade” olarak belirlemeliyiz. Blade şablon motoruna yazdığımız tüm kodlar PHP üzerinden yorumlanır. Blade sözdizimine kısaca değineceğim. Konudan fazla sapmak istemiyorum. Blade hakkında daha fazla detayı dökümandan bulabilirsiniz.

Blade Sözdizimi

Blade şablon motoru ile ekrana bir veri basmak istediğinizde PHP‘deki print fonksiyonunun yerini küme parantezi almakta. Bir diğer deyişle süslü parantez.

Kısaca örnek verelim:

{{ "Merhaba" }}

Yukarıdaki komutumuz Blade ile yorumlandığında şu şekilde algılayacaktır:

<? echo "Merhaba"; ?>

Peki.. XSS açıklarından korunmak için PHP’de htmlspecialchars fonksiyonunu kullanıyoruz. Blade ile bu fonksiyon varsayılan olarak kullanılır. Bazı istisnai durumlarda ise bunu devre dışı bırakmak isteyebiliriz. Bunun için küme parantezleri arasına ünlem işareti tanımlıyoruz.

{!! "Merhaba" !!}

Bunun yanısıra bazı JavaScript çatıları da küme parantezi kullanmakta. Bu tarz bir çatıyı Blade şablon motoru ile kullanmak istersek ne yapmalıyız? Çözüm pek tabii basit. @ bizim kaçış operatörümüz olacak. Tekil kullanımlarda @ kullanırken, uzun kod bloklarında @verbatim kullanacağız.

Merhaba, @{{ name }}
@verbatim
    <div class="container">
        Merhaba, {{ name }}.
    </div>
@endverbatim

Blade Include

PHP‘de kullandığımız include ya da require_include fonksiyonlarını hatırladınız mı? Blade üzerinde include kullanımından hiçbir farkı yok. Belirlenen dosyayı, hedef dosyaya dahil eder.

@include('nav.menu')

Blade Extends

Extends kullanımı ile @section mirasına erişir, @yield tutucusu ile alanlarımızı bölümlendirebiliriz. Yukarıda açıkladığım bölümlendirme kısmının kod üzerindeki mantığı burada başlar.

@extends('layouts.app')

Blade Yield

Yield ile oluşturduğumuz bölümlerde belirli alanları dinamikleştiririz. Yield, bir yer tutucudur. Bizim için o bölümü tutar ve dilediğimiz sayfada farklı değerlerde kullanmamıza imkan verir. En temel örnek site başlığımızdır.

@yield('Başlığım',$title)

Kısaca Blade kullanımından söz ettiğimize göre Clean Blog şablonumuzu Blade şablon motorumuza entegre edebiliriz.

Blade üzerinde Clean Blog

Öncelikle hazırladığım dizin yapısını diyagram ile görelim.

|-- view
    |-- about.blade.php
    |-- contant.blade.php
    |-- detail.blade.php
    |-- index.blade.php
    |-- layouts
    |   |-- master.blade.php
    |-- partials
        |-- footer.blade.php
        |-- header.blade.php
        |-- header
            |-- head.blade.php
            |-- masthead.blade.php
            |-- nav.blade.php

Biz çalışmalarımızda genelde Türkçe kullanmayı tercih etsek de yazılım sektörü global bir alandır. Buna dayanarak klasör ve dizin isimlerimiz herkesin anlayabileceği standartlarda olmalıdır. Buna dayanarak isimlendirme ve konfigüre işlemlerimize devam edeceğiz.

Laravel‘de, Layouts klasörümüz içerisinde şablonumuzun master dosyası bulunmalıdır. Master dosyasından kastımın ne olduğunu kodları paylaştığımda daha net anlayacaksınız. Partials klasörümüzde ise şablonumuzun bölümleri bulunmalıdır. Bu bölümleri sizlerle yukarıda parçalamıştık. Unutmayın, ne kadar düzenli ve parçalı ilerlerseniz ilerde o kadar rahat edersiniz. Blog gibi basit içerikli çalışmalarda sorun olmasa da büyük projelerde çalışırken bu alışkanlığı edinmeniz size artı kazandıracaktır.

Partials içerisinde oluşturduğum header klasöründe ise şablonumuzun üst bölümünü parçaladım. Şablon iskeletimizde head bölümünü, menu bölümünü ve şablonumuza ait olan masthead bölümünü ayrıştırdım.

Kodlarımızı GitHub üzerinden görüntüleyebilirsiniz

Route Yapılandırması

Tema dosyalarımızı konfigüre ettiğimize göre şimdi yönlendirmelerimizi yapalım.

Laravel‘de yönlendirme kodlarımız web dosyasında düzenlenmektedir. Yine ilerleyen derslerde yeri geldiğinde detaylı olarak göreceğiz. Laravel dökümanlarından daha geniş bilgilere erişebilirsiniz.

Route::get('/', function () {
    return view('index');
});
Route::get('about', function () {
    return view('about');
});
Route::get('detail', function () {
    return view('detail');
});
Route::get('contant', function () {
    return view('contant');
});

PHP Artisan ve Laravel’de Görüntüleme

PHP Artisan komutlarını yine Route gibi ilerleyen derslerde detaylı olarak göreceğiz. Şimdilik sadece sanal sunucumuzu başlatalım. Laravel‘in kurulu olduğu dizine terminal kullanarak gelelim ve php artisan serve komutunu çalıştıralım.

[mksglu@mksglu blog]$ php artisan serve
Laravel development server started: <http://127.0.0.1:8000>

Bu çıktıyı gördükten sonra tarayıcıda

  • localhost:8000/
  • localhost:8000/about
  • localhost:8000/detail
  • localhost:8000/contant

Bağlantılarını kullanarak şablonumuzun çalıştığını görebilirsiniz. Laravel ders serisinde bölümleri daha kısa tutarak daha çok bilgi vermeyi amaçlıyorum. Her şey iç içe gözükse de dikkatle takip ettiğinizde üstesinden geleceğinize eminim.

GitHub

1 thought on “Laravel 5.4 ile Blog Yapalım – Bölüm 1

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

This site uses Akismet to reduce spam. Learn how your comment data is processed.