Selam,
Laravel’i öğrenmeye View yapısıyla devam ediyorum. Bugünkü konular:
View dosyalarımız, app/views dizininde tutuluyor ve bir view dosyasını geriye döndürmek istediğimiz zaman View classından make metodunu çağırıyoruz. Bu metoda view dosyasının adını argüman olarak veriyoruz.
Route::get('/', function()
{
return View::make('anasayfa');
});
Yukarıdaki kod ile sitenin anasayfa urli için sorumlu olan route, View::make() sayesinde “anasayfa” ismindeki view dosyasını döndürüyor. Zaten bu kısma kadar olan bölümü geçen ders öğrenmiştim.
Eğer Laravel’in Blade template engineını kullanmak istersek view dosyalarımızın uzantısını .blade.php olarak ayarlamamız yeterli. anasayfa.blade.php gibi.
Blade kullanırken <?php echo $degisken; ?> yerine {{ }} kullanabiliriz. Bu Blade’le alakalı çok temel bir komut ama ilerliyen kısımlarda daha karmaşık kısımlara da değineceğiz.
İpucu: Sublime Text kullananlar, Laravel Blade Highligter eklentisi ile view dosyalarında daha rahat çalışabilir.
View dosyalarına veri göndermek için 2 yol tercih edebiliriz.
View dosyalarımızı geriye döndürürken with() metodunu da çağırarak verilerimizi gönderebiliriz. with() 2 parametre alıyor: İlk parametre verimiz için etiket, ikinci parametre ise verimizin değeri.
routes.php:
Route::get('/', function()
{
$hayvan1 = "Balina";
$hayvan2 = "Penguen";
$sehir1 = "İstanbul";
$sehir2 = "Kocaeli";
return View::make('anasayfa')->with("veri", $hayvan1);
});
Böylece anasayfa view dosyamıza veri etiketiyle $hayvan1 değerini göndermiş olduk. Yani balina. View dosyamızda gelen veriyi alıp ekrana yazdırmak istersek:
anasayfa.blade.php:
<h1>{{$veri}}</h1>
View dosyamıza veri göndermenin 2. yolu ise make() metodunu kullanmak. make() ilk parametre olarak view dosyamızın adını alıyor. İstersek 2. parametre olarak verilerimizi bir dizi halinde gönderebiliriz. Bu dizinin anahtarları (key) yine etiket görevinde olacak.
Route::get('/', function()
{
$hayvan1 = "Balina";
$hayvan2 = "Penguen";
$sehir1 = "İstanbul";
$sehir2 = "Kocaeli";
return View::make('anasayfa', array("hayvanIki" => $hayvan2));
});
View dosyasında da yine aynı yöntemle gelen veriyi yazdırabiliriz.
<h1>{{$hayvanIki}}</h1>
Üstteki 2 yöntem ile birden çok veriyi de göndermemiz mümkün.
with() ile bunu yapmak istersek, her veri için with() metodunu çağırmamız gerek.
return View::make('anasayfa')->with("veri", $hayvan1)->with("veri2", $hayvan2);
make() ile çoklu veri göndermek istersek, dizinin eleman sayısını arttırmamız yeterli.
return View::make('anasayfa', array("sehir1" => $sehir1, "sehir2" => $sehir2));
Eğer view dosyasına tek değişken ile veri göndereceksek Laravel’in sihirli metodunu kullanabiliriz. Bunun için yine with() metoduna biraz sihir katmamız lazım (asıl sihri Laravel yapıyor tabii ki)
View::make('anasayfa')->with("veri", $hayvan1);
Bu bildiğimiz with() ile veri gönderme yöntemi. Sihri gerçekleştirmek için, kullandığımız etiketi “with“den sonrasına ekleyerek yeniden isimlendirmemiz yeterli.
View::make('anasayfa')->withHayvan($hayvan1);
camelCase tekniğini kullanmanız şart değil bu arada. Ve tabii ki view dosyasında $hayvan1 in değerini yazdırmak için değişken olarak $hayvan ı kullanmamız gerek.
Sihirli metodu burada da kullanabiliriz:
Route::get('/', function()
{
$hayvan1 = "Balina";
$hayvan2 = "Penguen";
$sehir1 = "İstanbul";
$sehir2 = "Kocaeli";
$dizi = array( $hayvan1, $hayvan2, $sehir1, $sehir2);
return View::make('anasayfa')->withDizi($dizi);
});
Liste ögelerini ise her zamanki gibi indislerine göre yazdırabiliriz.
<h1>{{ $dizi[0]}}</h1>
<h1>{{ $dizi[1]}}</h1>
<h1>{{ $dizi[2]}}</h1>
<h1>{{ $dizi[3]}}</h1>
with() metodu da kullanılabilir tabii ki:
return View::make('anasayfa')->with("dizi", $dizi);
Evet, böyle bir şey de mümkünmüş.
Route::get("yorum/{bisey?}", function($bisey = "")
{
return View::make('anasayfa')->with("data", $bisey);
}
);
Sitenin yorum/ dizini altındaki herhangi bir url gelmesi durumunda, gelen url veri olarak anasayfa view dosyasına gönderiliyor. yani localhost/yorum/abcdefg adresine gittiğimizde anasayfa view dosyasına “abcdefg” verisi yüklenip döndürülecek.
Laravel Blade ile if ve döngüleri nasıl kullanacağımızı öğreneceğimiz bölüme geldik.
Route::get('/', function()
{
$filmler = array("Lord of the Rings");
return View::make("anasayfa") -> withFilmler($filmler);
});
Tek elemanlı bir dizimiz var bunu anasayfa view dosyasına gönderdik. Şimdi anasayfa view dosyamızda Blade ile if kullanarak bunu yazdıralım:
@if (count($filmler) == 1)
Listede tek film var: {{$filmler[0]}}
@endif
@if ile bir if koşulu belirteceğimizi bildiriyoruz. Koşulu sonlandırmak için @endif eklemeliyiz.
else if ya da else kullanmak istersek:
@if (count($filmler) == 1)
Listede tek film var: {{$filmler[0]}}
@elseif(count($filmler) > 1)
İzleyecek birden fazla film birikmiş :)
@else
Listede hiç film yok!
@endif
else if için @elseif, else için @else kullanıyoruz. Tüm bunların sonuna yine @endif eklemeliyiz.
@unless() kontrol ettiğimiz koşulların hatalı olması durumunda çalışıyor. Yani koşul ifadesi false ise.
@unless(count($filmler) == 1)
Listede birden çok film var
@endunless
@for($i = 0; $i < count($filmler); $i++)
Film {{ ($i+1).": ".$filmler[$i]}} </br>
@endfor
<h1>Filmler</h1>
@foreach( $filmler as $film)
{{$film}} <br/>
@endforeach
@while(false)
Böyle bir şey hiç yaşanmadı
@endwhile
Web sitemizin sayfalarını tasarlarken, genel bir şablonumuz vardır ve sitemizin sayfaları bu genel şablona göre tasarlanır. Daha sonra her sayfa için ufak düzenlemeler yapabiliriz.
Şimdi 3 sayfadan oluşan çok basit bir site oluşturacağız. Home, Hakkımızda ve İletişim sayfaları için HTML kodlarını düzenliyorum.
home.blade.php:
<!doctype html>
<html lang="tr">
<body>
<nav>
<a href="/">Anasayfa</a>
<a href="iletisim">İletişim</a>
<a href="hakkimizda">Hakkımızda</a>
</nav>
<img src="http://www.cocotuts.com/images/logo.png"/>
<section>
Hoşgeldiniz!
</section>
</body>
</html>
Anasayfamız bu şekilde tasarlandı. Şimdi kodları kopyalayıp, Hakkımızda ve İletişim için yapıştırıyorum ve sadece <section></section> ile <nav></nav> alanlarını sayfalara göre özelleştiriyorum.
hakkimizda.blade.php:
<!doctype html> <html lang="tr"> <body> <nav> <a href="/">Anasayfa</a> <a href="iletisim">İletişim</a> </nav> <img src="http://www.cocotuts.com/images/logo.png"/> <section> Hakkımızda sayfası </section> </body> </html>
iletisim.blade.php:
<!doctype html>
<html lang="tr">
<body>
<nav>
<a href="/">Anasayfa</a>
<a href="hakkimizda">Hakkımızda</a>
</nav>
<img src="http://www.cocotuts.com/images/logo.png"/>
<section>
İletişim Sayfası
</section>
</body>
</html>
Bu şekilde zahmetlice bunu yapmaktansa ana şablonumuzu belirledikten sonra, alt sayfalara bu ana şablonu aktarabilseydik her şey daha güzel olurdu değil mi? Şimdi bunu nasıl yapacağımıza bakalım.
Önce app/views altına layouts isimli bir klasör oluşturup master.blade.php isimli bir dosya oluşturuyorum. Bu ana şablonumuzu tutacak olan dosya. home.blade.php içindeki kodların hepsini kopyalayıp master.blade.php içine kopyalıyorum. Daha sonra sayfadan sayfaya farklılık gösterebilecek alanları Blade’e bildirmem lazım. Bizim senaryomuzda <section></section> ile <nav></nav>
master.blade.php:
<!doctype html>
<html lang="tr">
<body>
<nav>
@yield("ust-menu")
</nav>
<img src="http://www.cocotuts.com/images/logo.png"/>
<section>
@yield("icerik")
</section>
</body>
</html>
Sayfadan sayfaya farklılık gösterebilecek alanları @yield() kullanıp “entry-point” olarak düzenledim. Daha sonra bu ana şablonu aktaracağım sayfalarda kullanabilmek için bir etiket belirliyorum.
Şimdi Home, Hakkımızda ve İletişim sayfalarını yeniden düzenliyorum. İlk yapmam gereken kullanacağım master.blade.php dosyasını alt sayfalara kalıtım yapmak. Bunun için @extends() komutunu kullanacağız. Bu komuta parametre olarak master.blade.php dosyasının yolunu bildirmemiz gerek.
home.blade.php:
@extends("layouts/master")
@section("ust-menu")
<a href="/">Anasayfa</a>
<a href="iletisim">İletişim</a>
<a href="hakkimizda">Hakkımızda</a>
@stop
@section("icerik")
Hoşgeldiniz!
@stop
Şimdi ne yaptığımıza adım adım tekrar bakalım:
master.blade.php dosyasını kalıtım yapıyoruz. layouts/master yerine layouts.master da kullanabiliriz.@seciton() komutuna argüman olarak “entry-point” için belirlediğimiz etiketi girmemiz gerekli.@stop komutunu kullanmamız gerekti çünkü her @section komutunun bitişine bu komutu yazmamız lazım.@section() komutunu kullanıyoruz.@section() komutunu sonlandırıyoruz.Şimdi master.blade.php dosyamızı hakkimizda ve iletisim için de kalıtım yaparak kullanalım.
hakkimizda.blade.php:
@extends("layouts.master")
@section("ust-menu")
<a href="/">Anasayfa</a>
<a href="iletisim">İletişim</a>
@stop
@section("icerik")
Hakkımızda Sayfası
@stop
iletisim.blade.php:
@extends("layouts.master")
@section("ust-menu")
<a href="/">Anasayfa</a>
<a href="hakkimizda">Hakkımızda</a>
@stop
@section("icerik")
İletişim Sayfası
@stop
Buraya kadar olan kısım Blade ile kalıtım yapmanın temelleriydi. Şimdi öğrendiğim ufak bir numarayı daha paylaşmak istiyorum. Bu yöntemle view dosyaları üzerinde daha fazla kontrole sahip oluyoruz ve “override” yapabiliyoruz.
Bunun için master.blade.php dosyasını şu şekilde düzenliyorum. Ama önce sizin de farkettiğiniz gibi tüm sayfalarımda <a href="/">Anasayfa</a> mevcut. Bu kısmı da master.blade.php içine almam daha mantıklı olacaktır.
master.blade.php:
<!doctype html>
<html lang="tr">
<body>
<nav>
@section("ust-menu")
<a href="/">Anasayfa</a>
@show
</nav>
<img src="http://www.cocotuts.com/images/logo.png"/>
<section>
@yield("icerik")
</section>
</body>
</html>
6.satırda @yield yerine @section() kullanıyorum. Ve @section() komutlarını @show ile sonlandırıyorum. Alt sayfalardaki komutlarda ise herhangi bir değişiklik yapmama gerek yok. Ama şu noktaya dikkat etmek gerek. Alt sayfalarda @section("ust-menu") komutunu kullandığım zaman otomatik olarak override edilmiş olacak. Yani master.blade.php içinde belirlediğim kodlarım değil altsayfada yazdığım kodlar çalışacak. Eğer master.blade.php içindeki @section("ust-menu") içinde yer alan kodların da çalışmasını istersem altsayfada @parent komutunu eklemem gerek. Anlatmak istediklerimi şu şekilde açıklayayım:
hakkimizda.blade.php:
@extends("layouts.master")
@section("ust-menu")
<a href="iletisim">İletişim</a>
@stop
@section("icerik")
Hakkımızda Sayfası
@stop
Eğer bu şekilde yazarsam, master.blade.php içindeki @section("ust-menu") geçersiz sayılıp hakkimizda.blade.php içindeki kodlar çalışacak. Yani Anasayfa için belirlediğimiz link gözükmeyecek.
hakkimizda.blade.php:
@extends("layouts.master")
@section("ust-menu")
@parent
<a href="iletisim">İletişim</a>
@stop
@section("icerik")
Hakkımızda Sayfası
@stop
Eğer hakkimizda.blade.php sayfamı bu şekilde düzenlersem, yani @section("ust-menu") içine @parent komutunu eklersem, master.blade.php içindeki @section("ust-menu") de yer alan kodlar da aktarılacaktır.
Laravel’le gelen HTMLBuilder classı ile view dosyalarımızı oluştururken, HTMLBuilder’ın sunduğu fonksiyonlar ile bazı işlemlerimizi daha pratik ve güvenli bir şekilde gerçekleştirebiliriz. Öğrendiğim birkaç tanesini paylaşıyorum. Tüm fonksiyonlar ve açıklamaları için de buraya link bırakıyorum.
string script(string $url, array $attributes = array(), bool $secure = null)
Javascript dosyalarımız için link oluşturur.
{{ HTML::script("js/bootstrap.min.js") }}
Bu kod ile public/js altındaki bootstrap.min.js dosyasını dahil etmiş olduk.
string style(string $url, array $attributes = array(), bool $secure = null)
CSS dosyalarımız için link oluşturur.
{{HTML::style("css/bootstrap.min.css")}}
public/css altındaki bootstrap.min.css için link hazır.
string link(string $url, string $title = null, array $attributes = array(), bool $secure = null)
HTML linkleri oluşturur.
{{ HTML::link("http://www.cocotuts.com", "Cocotuts!") }}
string ul(array $list, array $attributes = array())
Dizinin elemanlarını sırasız liste şeklinde listeler.
routes.php
Route::get("anasayfa", function()
{
$list = array("A", "B", "C");
return View::make("anasayfa")->withList($list);
});
anasayfa.blade.php
{{ HTML::ul($list) }}
string ol(array $list, array $attributes = array())
Dizi elemanlarını sıralı liste şeklinde listeler.
{{ HTML::ol($list) }}
Sıradaki eğitim konum Form’lar.
Hatırlatma1: Laravel öğrenmek için bu linkteki eğitimi takip ediyorum ve öğrendiklerimi burada paylaşıyorum.Buraya tıklayarak eğitimin anasayfasına ulaşabilir ve kaynak kodlarını indirebilirsiniz.
Hatırlatma2: Lütfen eksik,hatalı ya da düzeltilmesi gereken bir şey farkederseniz bana bildirin.
Celery ile alakalı "best practice"leri ve faydalı araçları bir araya getiren güzel bir checklist'e denk…
Diziler en temel ve sık kullandığımız araçlardan... Kod yazarken işimizi kolaylaştıracak, daha temiz kod yazmamızı…
listve tuple bilginizi test etmek ister misiniz? realpython.com da keşfettiğim ve Türkçe'ye çevirdiğim mini teste…
Rehberlik sağlaması ve bilgi tazelemesi açısından faydalı olduğunu düşündüğüm bir Toptal blog paylaşımınıTürkçe'ye çevirdim.Devamını okuyunBilmeniz…
Angular componentlerine console üzerinden hızlıca erişmek için kullanılan bir teknik. Unutmamak için kendime not düşüyorum.Devamını…
Geçtiğimiz günlerde keşfettiğim ve oldukça da hoşuma giden repoyu paylaşmak istiyorum: lydiahallie/javascript-questions Genel olarak temel…