Kotlin: Temel Sözdizimine Genel Bakış

Kotlin ile ilk uygulamamızı yazalım ve temel seviyede Kotlin sözdizimine genel bir göz gezdirelim.

Merhaba Dünya

Yazılım dillerinin başlangıç klasiği “Hello World” ile başlayalım uygulamamıza. Öncelikle Intellij IDEA yazılımını çalıştıralım.

Create New Project ‘e tıklayalım ve açılan arayüzde Java sekmesi altında Kotlin (Java) seçeneğini işaretleyerek next diyelim.

Bir sonraki aşamada Project name  alanına ilkuygulama yazarak finish  diyorum.

Gerekli modüller yüklendiğinde bizleri sade bir arayüz karşılamakta.

Project  sekmesi altında yer alan uygulama dizininin altında yer alan src dizinine sağ tıklayalım ve New  ve Kotlin File/Class  yönergelerini takip edelim.

Öncelikle JAVA’da bunu nasıl yaparız ona bakalım, hemen ardından Kotlin ile yazalım.

Java ile “Merhaba Dünya”

Kotlin ile “Merhaba Dünya”

Kotlin’de bir diğer yazım biçimi olarak da {} kullanmak yerine =  operatörü ile daha kısa ifadeler elde edebiliriz. Intellij IDEA üzerine ilgili satırın üzerine alt+enter  kombinasyonları ile karşınıza çıkan seçenekte “Conver to expression body” seçeneği ile bu düzenlemeyi otomatik olarak gerçekleştirebilirsiniz.

Kotlin ile “Merhaba Dünya”

Kotlin’de Veri Tipleri

Kotlin’de veri tiplerinde ondalık sayı, tam sayı ve string ifadeleri inceleyelim. Burada ek anektod olarak değişken tanımlamalarında kullanacağımız val ve var farkına da değineceğim.

Burada myDecimal ondalık veri tipimizi, myNumber tam sayı veri tipimizi ve myString string veri tipimizi temsil etmektedirler.

Bir değişkeni tanımlarken var kullandığımızda mutable (değişken/değişebilir), val kullandığımızda ise immutable (değişmez) olmaktadır.

Kod bloğumuzun en sonunda, print(myString)  dediğimizde bizlere “En azından hayattayız…” çıktısını verir. Fakat böyle bir şeyi val  ile yapamayız.

Burada noktalı virgül kullanımı opsiyoneldir.

Kotlin’de Class ve Fonksiyon Yapısı

Kotlin üzerinde basit bir örnek bloğu yazdım. Eminim, zihninizde sözdizimi ve işleyiş biçimi adına faydası olacaktır. Bir class içerisinde fonksiyon tanımladım.

Burada Inmutable (değişmez) val ile name değişkenimin String bir ifade olduğunu belirttim ve değerine ismimi yazdım. Bir satır altında obj değişkenimin içerisinde Person classının içerisinde bulunan Disp fonksiyonuna değer gönderdik.

Class Person‘ın içerisinde tanımladığımız Disp fonksiyonunda ise gelen değeri print  fonksiyonu ile yazdırdık.

Burada dikkat ederseniz ${name} tarzında bir ifade kullandım. String bir ifade içerisinde değişken tanımlamanız için $ kullanmanız gerekmektedir. Peki, {} kullanmamızın amacı nedir?

${} ifadesini name.lastname tarzında birden fazla dizinin yazılmasında kullanıyoruz.

Bir Class Oluşturalım

Peki, harici bir Class nasıl oluşturabiliriz? Proje dizinimizde src üzerinde New diyelim ve yeni bir Package oluşturalım. Oluşturduğumuz Package’nin ismi com.persons olsun.

Oluşturduğumuz com.persons ‘ın içerisine yine New diyerek Kotlin File/Class diyelim ve Kind seçeneğinde Class‘ı seçelim.

Person içerisinde bulunan Person Class’ımızı bu dosyanın içerisinde tanımlayalım ve Person içerisinde import edelim.

Bu sayede harici Class‘lar üzerinde de çalışabiliriz.

Kotlin’de Yorum Satırları

Birçok yazılım dilinde de kullandığımız sözdizimi burada da geçerli. Burada iki farklı şekilde  // Yorum ve  /* Yorum */ olmak üzere yorum satırlarını tanımlayabiliriz.

Kotlin: JAVA JDK ve IntelliJ IDEA Yükleyelim

Kotlin için ihtiyacımız olan yazılımları yükleyelim. JAVA JDK ve Intellij IDEA kurulumlarını gerçekleştireceğiz.

Java JDK

Google’da JAVA JDK araması yaptığımda karşıma çıkan ilk sonuca tıklıyorum. Buradan kendi işletim sisteminizi göz önünde bulundurarak Java SE Development Kit ‘i indirelim.

Linux’ta indirilen klasörde uçbirim açalım.

Eğer ki lib  dizini altında jvm  dizini yok ise mkdir komutu ile oluşturabilirsiniz.

JDK dizinimizin yollarını tanımlayalım. Uçbirimde /etc/profile dosyasını metin editörü ile açalım ve aşağıdaki komutları dosyanın en sonuna ekleyelim.

Cihazımızı yeniden başlatalım. Uçbirimde java -version komutunu girelim. Çıktımız aşağıdakine benzer olmalıdır.

IntelliJ IDEA

Kotlin için kullanacağımız IntelliJ IDEA yazılımını kendi sitesinden indirelimCommunity sürümü ücretsiz olarak yayınlanmakta.

Linux için, bin  dizini içerisinde idea.sh  dosyasını uçbirimde çalıştırmak yeterlidir.

Kotlin için ihtiyacımız olan her şeye sahibiz.

 

Kotlin’e Giriş

Merhabalar, Kotlin derslerine başlamadan önce basit ama anlaşılır bir girizgah yazmak istedim. Buna bağlı olarak; aşağıda bazı maddelere yer verdim. Kısa cümlelerle konuya az çok hakim olmanızı amaçlayan bir konsept üzerinde ilerleyeceğim.

  • Google I/O (Innovation in the Open/Açık Yenilik) 2017 toplantısında Android‘in resmi dili seçilmiştir.
  • JetBrains tarafından geliştirilmektedir.
    • Kotlin yazarken kullanacağımız IDE (IntelliJ IDEA) JetBrains geliştirmektedir.
    • Android Studio, IntelliJ IDEA’nın üzerine inşaa edilmiştir.
  • Java’dan daha esnek ve güçlü bir yapıya sahip.
    • Sözdizimi daha anlamlı ve kısa.
    • Güvenlik özellikleri uygulamalarınızı daha sağlıklı geliştirebilirsiniz.
    • Uygulamalarınızda daha fazla performans elde edebilirsiniz.
  • Java Sanal Makinesı’ni kullanır.
  • Matematik ve bilgisayar bilimleri üzerine (High Order Functions) destekler.
  • Kotlin ve Java birlikte çalışabilirler.

Kotlin ve Java üzerine daha birçok madde yazılabilir ve irdelenebilir belki ama şimdilik bizlere bu kadar maddenin yeterli olacağını düşünmekteyim.

Ben Kotlin dersleri sürecinde Linux işletim sistemi ile devam edeceğim. Sizin kullanıdığınız sistemlerle bazı farklılıklar olabilir. Bunları araştırarak öğrenebilirsiniz.

 

Linux Manjaro 17 I3WM Topluluk Sürümü Çözümleri

Esenlikler, Linux Manjaro topluluğunun geliştirdiği ve konfigüre ettiği I3WM (pencere/dizin) yöneticisine dair çözümlerimi aktarmaya çalışacağım. Bu makale ben çözümler buldukça güncellenecektir.

Ekran Çözünürlüğü

Kullanıdığınız dahili ya da harici monitörün çözünürlüğünü güncellemek ve tanımlamak için xrandr komutunu kullanacağız.

Klavyeden ctrl+enter  kombinasyonunu kullanarak uçbirimi açalım.

Komutun çıktısı aşağıdakine benzer olmalıdır:

Şu an cihazımın tanımladığı iki adet aygıt bulunmaktadır. Bunlar yukarıda da görülebileceği üzere DP1 ve eDP1 (birincil)‘dir. Bizim tanımlamak ve konfigüre etmek istediğimiz aygıtın isminin DP1 olduğunu öğreniyoruz.

Ben harici ekranımın çözünürlüğü için 1366x768  tercih ediyorum. Bu çözünürlüğü tanımlamak için yeni bir mod tanımlamamız gerekmektedir. Uçbirimden aşağıdaki komut ile devam edelim.

Komutun çıktısı aşağıdakine benzer olmalıdır:

Yeni modumu tanımlayalım.

Tanımladığımız modu ekleyelim. Kullanılan addmore  parametresinde DP1 aygıtını tanımladım. Siz, xrandr çıktınızda hangi aygıtı kullanmak istiyorsanız onu yazmalısınız.

Ekrana çıkışını verelim. Bu kez output  parametresini kullanalım.

Tanımladığımız harici monitörde görüntünün gelmesi gerekmektedir. Linux’ta xrandr komutunu kullanarak cihazımıza bağlı olan bir monitöre ilgili çözünürlüğü tanımladık ve görüntü çıkışı verdik.

Bu işlemi Linux Manjaro topluluğu I3WM sürümünde mod+ctrl+b kombinasyonları ile kullanabileceğimiz bir menüde de gerçekleştirebiliriz.

Otomatik Tanımlama

Linux Manjaro Gnome 3.22 Çözümleri yazımda da kullandığım bir yöntemi tercih edebiliriz. Yalnız fark ettiğim sorun şudur ki XFCE ve Gnome masaüstlerinde cihazı başlattıktan sonra harici monitörü taktığımızda tanımlama ve çözünürlük ayarları başarılı bir şekilde bize yansısa da I3WM‘de yukarıdaki yöntemi kullanmanız gerekmektedir.

Uçbirimde aşağıdaki dosyayı görüntüleyelim.

Yukarıda yer alan komutları ekleyelim ve dosyamızı güncelleyelim. Orijinal yazıda ilgili konunun kaynakları yer almaktadır.

Ekran Yırtılması

Genel ağ (internet) üzerinde bir tarayıcıda gezinirken farenizin tekerleği ile yukarı-aşağı yaptığınızda ekrandaki yırtılmaları fark edebilirsiniz. Bunun için Compton kullanacağız.

Linux Manjaro topluluğu I3WM sürümünde bizler için bir alias (takma ad) atamış. Uçbirimi açalım ve comp komutunu girelim. Karşımıza topluluğun yazdığı komutlar çıkmaktadır. Ben bunları kullanmak istemediğim için tamamını sildim ve sadece yırtılmaları önlemek için tanımlanan komutları kullandım.

Uçbirimde direkt olarak görüntülemek isterseniz ~/.config/compton.conf  dosya uzantısını bir metin editörü olarak görüntülemeniz yeterlidir.

Yukarıda yer alan komutları dosyamıza ekleyelim ve yeniden başlatalım. Yırtılmaların düzeldiğini fark edeceksinizdir.

Klavyede mod+t  ile compton‘u devre dışı bırakabilir, mod+ctrl+t  ile de tekrar devreye alabilirsiniz. Uçbirimde ise compton -b  komutunu kullanarak başlatabilirsiniz.

Ve yine topluluğun geliştirdiği compton-conf  paketini kurarak grafiksel bir arayüz ile de ayarlarınızı gerçekleştirebilirsiniz.

Olası Sorunlar

Uçbirimde compton komutunu uyguladığınızda glx_init(): No GLX extension.  çıktısını alabilirsiniz.

Çözümüne dair edindiğim bilgilere dayanarak söyleyebilirim ki; Bumblebee ve ekran kartı kulumunu başalarılı bir şekilde gerçekleştirdiğinizde sorun düzelecektir. Bu konuda daha ayrıntılı araştırma için ilgili kaynakları aşağıya bırakıyorum.

Touchpad (dokunmatik fare)

Touchpad (dokunmatik fare) üzerinde XFCE ve Gnome masaüstlerinde grafiksel arayüz ile dokunmatik ayarlarını düzenleyebiliyorduk. Ben I3WM‘de bunu bulamadığım için bazı düzenlemeler ile sorunu çözeceğiz.

Öncelikle uçbirimi açalım.

Yukarıdaki komutları ilgili dosyamızda tanımlayalım ve cihazı yeniden başlatalım. Tüm fonksiyonların başarılı bir şekilde çalıştığını görebilirsiniz.

Bununla ilgili birkaç kaynak bırakıyorum.

Harici Klavye Ayarları

Linux’ta klavye ayarları için setxkbmap kullanılmaktadır. Benim dizüstü bilgisayarımda harici klavye kullanırken karakter hatası almaya başladım. Bu sorunu çözmek için uçbirimde setxkbmap tr  komutunu çalıştırdım. Başarılı bir şekilde Türkçe karakter tanımlaması gerçekleştirildi. Bunu başlangıçta çalıştırmak için ise;

I3WM için tanımlı config dosyamızı bir metin editörü ile görüntüleyelim ve dosyaya aşağıdaki komutu ekleyelim:

Bilgisayarımızı yeniden başlatabiliriz. Klavye ayarlarımız Türkçe karakter seti ile güncellenmiştir.

ASUS K555U Realtek ALC256 Linux Mikrofon Sorunu

Güncelleme: Linux Kernel 4.12

Linux Kernel 4.12 ile birlikte ses ve mikrofon sorunlarının tamamı giderildi.


Esenlikler herkese. Eğer bu yazıya Google’da yaptığınız araştırmalar sonucunda geldi iseniz; Tanrı şimdiden sabır versin. Belirtmek isterim ki bu yazıda umduğunuzu bulamayacaksınız, zira ben de çaresizim.

Bilgisayarımı ilk aldığımda blogumda Windows 10’da yaşanan uyku sorunundan bahsetmiştim. Bu yazıdan kısa bir süre sonra Linux kullanmaya başladım. Ubuntu, Mint, OpenSUSE, Linux Lite, Arch Linux ve Manjaro dağıtımlarını kullandım. KDE, XFCE ve Gnome masaüstü ortamları ile çalıştım. Şu an sabit olarak Manjaro I3WM kullanmaktayım. Sözün özü şu ki; Linux’ta Realtek ALC256 ses kartının mikrofon ayarlarında sorun oluşmakta maalesef.

Bu konu ile ilgili Google ve diğer arama motorlarında yaptığınız araştırmalarda sayısız forumda sayısız konu okuyacak ama çözüme yüksek ihtimal ulaşamayacaksınız. Jack girişinden ve dahili kemara mikrofonundan bir türlü ses kaydedemeyeceksiniz. Alsamixer, PulseAudio gibi binbir çeşit araç deneyecek, paket depolarında sörf yapacaksınız. Biliyorum, biliyorum çünkü ben bunları yaşadım. Tüm Facebook gruplarına konu açtım. Farklı dağıtımlarda uzman kişilerden görüş aldım. Bu sorunun bir çözümü yok ve kronik bir sorun.

Geçici ve ideal olmayan bir çözüm buldum neyse ki. Çok içime sinmese de paylaşmak istedim. Bir Jack dönüştürücüye ihtiyacımız var. Google’da USB Ses Kartı olarak arama yaptığınınızda görebilirsiniz. Ben denemek için en kalitesiz olanlarından bir tane aldım. Bu arada  mikrofon olarak da Snopy’nin Sn-330M mikrofonunu satın aldım. Uygun fiyatına nazaran harika verim aldım. Satın aldığım kalitesiz Jack dönüştürücü biraz daha sağlam olsa çok daha güzel bir ses kalitesi alacağımı tahmin ediyorum. Eğer ciddi anlamda bu konuda bir çalışmanız olacaksa Creative’nin X-Fi Go Pro modelini tavsiye ederim. Henüz denemedim ama okuduğuma göre alınası bir cihaz.

Bir diğer alternatif ise USB çıkışlı bir mikrofon satın almanız. Ses kalitesi ne kadar iyi olur orası tartışılır, bilemeyeceğim.

Bu arada yeri gelmişken yeni bir kulaklık almayı düşünüyorum. Pioneer’in SE-MJ591 modelini beğendim. Satın aldığımda deneyimimi burada güncellerim.

Güncelleme

Uzun bir aradan sonra beni tam olarak tatmin etmese de bir çözüm buldum. Linux Arch tabanlı dağıtımlarda hda-jack-retask-bz paketini yükleyelim ve üçbirimde hda-jack-retask  komutu ile çalıştıralım.

Muhtemelen her cihazda farklı olacaktır bu sorun ve çözümü. Ben deneyerek buldum. Select a codec menüsünden ses kartım olan Realtek ALC256‘yı seçtim. Sağ menüden ise show unconnected pins seçeneğini işaretledim.

Pin ID:0x18 olanı override olarak işaretledim ve Microfone seçtim. Install boot override seçeneği ile başlangıçta ayarların yapılandırılmasını sağladım.

Uçbirimde bir metin editörü ile aşağıdaki dosyayı görüntüleyelim.

İçerisinde bulunan satırları silelim ve aşağıdaki komutla değiştirelim.

Yedeklemeyi unutmayın.

Bilgisayarımı yeniden başlattığımda uçbirimde pavucontrol ile ses ayarlarımı görüntüledim. Çıkış ayarlarından dahili mikrofonumu seçtim.

Bu yöntemle dizüstü bilgisayarınızdaki dahili mikrofonu kullanabilirsiniz. Bazılarında Pin ID:0x19 çalışmış. Siz denemelisiniz kendiniz için.

Olası Sorunlar

Uçbirimde pavucontrol  yazdığınızda Establishing connection toPulseAudio. Please wait ..” hatası alabilirsiniz.

Çözüm olarak rm -r ~/.pulse komutunu uçbirimde çalıştırın. Bunun ardından pulseaudio -k komutu ile servisi durduralım ve pulseaudio --start ile yeniden başlatalım.

Uçbirimde tekrar pavucontrol komutunu girdiğinizde gerekli ses ayarlarınızı yapabilirsiniz.

Pioneer SE-MJ591

Piooner SE-MJ591 modelini Idefix üzerinden satın aldım. Yanınızda taşımak için harika bir taşıma kutusu mevcut. Müzikleri tüm detayları ile hissedebilirsiniz.

Uzun kullanımda rahatsız etmekte. Ben en fazla iki saat aralıksız kullanabildim. Biraz çıkartıp dinlenmek gerekiyor.

Onun dışında çok memnunum.

Linux Arch & Manjaro Yaourt Onay Kaldırma

Linux Arch ve Manjaro kullanıcıları uçbirimden paket yüklemek istediklerinde paketin düzenlenmesi ve derlenmesine yönelik bir dizi soru ile karşılaşmakta. Bunu seri bir hale getirmek için birkaç parametrede değişiklik yapmak gerek. Ben kullanıyorum ve çok memnun kaldım.

Uçbirimde yukarıdaki komutu çalıştıralım ve aşağıdaki yönergeleri takip edelim.

Nano  için konuşuyorum, CTRL+W ile NOCONFRIM  satırını bulalım. 0 olan değerini bir yapalım.

Ve yine EDİTFILES  satırını bulalım; 1  olan değerini   ile güncelleyelim.

CTRL+X ile kaydedip kapatalım.

Kaynak

Npm Mddir Paketi ile Dosya Dizin Diyagramı

Bilişim alanında kullanılan paket, eklenti ve uygulama dökümanlarında sıkça kullanılan dizin diyagramını Node Package Modules’in mddir paketi ile yapabiliriz. Laravel derslerine başladığımda ihtiyacım oldu.

Kullanım

Çıktısı

Src dizinimizde directoryList.md dosyamızı açalım. Bulunduğu dizinde yazma izninin olduğuna emin olalım.

 

Linux Manjaro XFCE Spotify Kurulumu

Linux Manjaro XFCE sistemimde son güncellemeden sonra Spotify kurulumunda hata aldım.

Olası Hata Çıktısı

Bulunamayan bağımlılıkları yalın halde yüklemek istediğimde ise paket hatası aldım.

Çözüm

Manjaro forumunda konu ile ilgili bir çözüm buldum.

Olası Hata Çıktısı

Çözüm

 

Kaynak

Laravel 5.4 Eloquent Sluggable Kullanımı

Laravel 5.4 ile Eloquent Sluggable paketininin kullanımını inceleyeceğiz. Eloquent Sluggable, bizlere “SEO” dostu link yapısı oluşturmaktadır.

Öncelikle Laravel kurulumumuzu gerçekleştirelim. “Laravel” yazısını gördükten sonra Eloquent Sluggable kullanımına geçebiliriz. Makalede döküman olarak GitHub adresini kullancağım. Sizler de GitHub adresinden Eloquent Sluggable kullanımına dair çok daha fazla bilgiyi edinebilir, projelerinizde kullanabilirsiniz.

Eloquent Sluggable

Laravel‘in kurulu olduğu dizine eriştikten sonra uçbirimde

komutunu çalıştıralım. Ve hemen ardından config/app.php dosyamızı güncelleyelim.

Son olarak; tekrar uçbirimde Laravel’in kurulu olduğu dizinde aşağıda yer alan komutu çalıştıralım.

Buna benzer bir çıktı aldıysanız kurulumu başarıyla tamamlamışsınız demektir.

Modelimizi Güncelleyelim

Modelimizi güncellememiz gerekmektedir. Tabii bunun için öncelikle bir model dosyasına ihtiyacımız var. Uçbirimde, Laravel‘in kurulu olduğu dizinde aşağıdaki komutu çalıştıralım.

Sonundaki -m parametresi aynı zamanda ismini Article olarak tanımladığımız model dosyasına ait bir “Migrate” dosyası da oluşturmaktadır.

Buna benzer bi çıktı aldıysak başarılı bir şekilde model ve migrate dosyalarımız oluşmuş demektir.

Laravel dizinimizde bulunan App klasöründe “Article” isminde model dosyamızın başarılı bir şekilde oluşturulduğunu görüyoruz ve dosyanın en üstüne; namespace App;  satırının hemen altına şu kodu ekliyoruz:

Model dosyamızın devamını ise aşağıda gösterildiği şekilde güncelliyoruz.

Buradaki değerlerin anlamlarını irdelemek ve konfigüre etmek için yukarıda paylaştığım pakete ait GitHub bağlantısını inceleyebilirsiniz. Burada title  alanını döndürmesini sağladık.

Migrate

Model dosyamızı oluşturken aynı zamanda migrate dosyamızı da oluşturmuştuk. Şimdi içerisinde ufak bir güncelleme yapalım.

Burada slug  olarak tanımladığım alanıma kullanacağımız bağlantı adresimiz eklenecektir. Tabii ki title  alanını referans almak şartı ile.

Tablomuzu veritabanına tanımlamadan önce pek tabii bir veritbanımızın olması gerekmekte ve bunu Laravel‘e bildirmek durumundayız.

Laravel ana diziminizde bulunan .env dosyasını açalım ve ilgili kısımları aşağıdaki gibi düzenleyelim. Ben slug  isminde bir veritabanı oluşturdum.

Benim kullanıcı ismim root ve parolam bulunmamakta. Siz kendinize göre düzenlemeyi unutmayın!

Bu ayarlarımı kaydettikten sonra Laravel dizinimizde açtığımız uçbirimde aşağıdaki komutu çalıştırarak config  ayarlarımızı güncelleyelim.

Şimdi veritabanımıza tablolarımızı ekleyebiliriz.

Ben bu komutu çalıştırdığımda Laravel 5.4 ile bir hata aldım. Siz almadı iseniz devam edin. Benim aldığım hata şu şekilde:

Çözüm olarak, AppServiceProvider.php dosyamızın en üstüne aşağıdaki kodu ekleyelim.

Ve devamında;

Dosyamızda bulunan boot  fonksiyonunu güncelleyelim. Tekrar deniyorum.

Eğer aşağıdakine benzer bir çıktı aldıysanız tablolarınız başarılı bir şekilde eklenmiş demektir.


Laravel 5.4 Türkçe Karakter Sorunu

1. Yöntem:

Laravel 5.4 sürümünde str_slug ‘ta karakter hatası mevcut. Şöyle ki;

‘ö’ harfimiz ‘oe’, ‘ü’ harfimiz ise ‘ue’ şeklinde çıkmaktadır. Bunu düzeltmek için sluggable.php dosyamızda kırk yedinci satırda güncelleme yapalım.

2. Yöntem:

Laravel‘de karakter setleri üzerine Slugify paketini kullanabiliriz.

Model dosyamızı açalım.

Yukarıdaki satırı tanımladıktan sonra model dosyamıza aşağıdaki satırları ekleyelim.

Hangi yöntemi kullanacağınız size kalmış.

Slugify GitHub ve bu sorun üzerine gelişmeleri buradan takip edebilirsiniz.

Test Edelim

Laravel dizinimizde açtığımız uçbirimde php artisan tinker komutunu çalıştıralım ve sırası ile aşağıdaki komutları takip edelim.

Article::all() komutumuzun çıktısı aşağıdakine benzer olacaktır.

Görüldüğü üzere; slug  alanımız title  alanını referans alarak bizlere SEO dostu bir link oluşturdu.

 

Herkese iyi çalışmalar.

 

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.

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:

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

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.

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.

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.

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.

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.

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.

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.

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.

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