<![CDATA[burhantanis.com Blog RSS Feed]]> https://burhantanis.com/ Şehir Notları ve Kod Dünyam adında 2 farklı alanda bilgilerimi paylaşmakta, düşüncelerimi yazmaktayım. Fri, 04 Jan 2019 21:09:00 +0000 en-us burhanmt@outlook.com (Burhan T.) Copyright 2015-2019 3600 <![CDATA[[Laravel & Vue.JS] 1.Video: “Laravel İçinde Vue.JS Kullanımı”]]> https://burhantanis.com/blog_kod_dunyam/2019/02/20/laravel-and-vue-js-1-video-laravel-icinde-vue-js-kullanimi https://burhantanis.com/blog_kod_dunyam/2019/02/20/laravel-and-vue-js-1-video-laravel-icinde-vue-js-kullanimi post Wed, 20 Feb 2019 09:03:00 +0000 Sıfırdan Laravel web uygulaması kurduğunuzda içerisinde VueJS hazır ve entegre şekilde geliyor. Sadece sizin birkaç ufak ayar yapmanız gerekmektedir.

İşte birkaç ufak ayar için küçük bir altın dokunuşa ihtiyaç vardır. Bu dokunuştan sonra tüm uygulama boyunca Vue.JS, Laravel içinde kullanımınıza amade olacaktır.

Buyrun, aşağıdaki videoda detaylı bir şekilde bunu anlattım:

]]>
<![CDATA[Vue.js'i Anlayalım...]]> https://burhantanis.com/blog_kod_dunyam/2019/02/14/vue-js-anlayalim https://burhantanis.com/blog_kod_dunyam/2019/02/14/vue-js-anlayalim post Thu, 14 Feb 2019 00:00:00 +0000 Vue ile ilgili bir yazı dizisine başlamadan önce en temelden bu teknolojiyi tanımalıyız diye düşünüyorum. Bu teknolojiyle yapabileceklerimizin farkında olmalıyız. Bu yüzden Vue ile ilgili bir tanıtım yazısı hazırladım. Bu şekilde bir girizgah yaparak başlamak istedim.

Vue, en basit anlamda kullanıcı arabirimleri tasarlamak için Javascript ile geliştirilmiş bir tür progressive web framework’tür.

Progressive framework’te kastettiğimiz anlam, sitelerin görünümünü, kullanıcı deneyimini mobil uygulamalarla benzer seviyeye getirmeye yarayan framework diyebiliriz.

PWA Günümüzde PWA (Progressive Web Application) dediğimiz web uygulamaları mobil cihazlarda yaygınlaşmıştır.

İşte PWA türü uygulamalar geliştirmek için React, Angular, Vue gibi PWF(Progressive Web Framework)leri kullanmamız bizlere geliştirirken kolaylık sağlayacaktır.

Mobil cihazlarda çalışan bu tür PWA uygulamaları cross-platform uygulamalar olup. “One single code base” denilen yazdığımız tek parça kodun hiç bir değişiklik yapılmadan bir çok platformda çalışması hadisesidir. Bu tek parça koddan kasıt (JavaScript + Html&CSS) dir.

Bu durum birçok firma ve yazılımcının iştahını kabartmıştır. Çünkü hem zaman hem de maliyeti düşürerek birden çok platforma hızlıca uygulama geliştirebilmenin önünü açmıştır.

Günümüzde mobil uygulama geliştirebilmenin 3 yöntemi vardır.

https://burhantanis.com/assets/mobil_u_gelistirme_metodlari.png

1.Yöntem:

Javascript+ HTML&CSS kullanılarak geliştirilen uygulamalardır. Cross-platform uygulamalar diye de anılır. İster herhangi bir browser’dan uygulama çalıştırılarak istersenizde native bir konteynırın içinde javascript+html&css çalıştırılarak elde edilir.

Vue Sample

Progressive Web Framework’ler ile bu yöntemde uygulama geliştirmek hem kolaylaşmıştır hem de native mobil uygulamalara benzer kullanıcı deneyimi oluşturma başarılmıştır.

Vue ile mobil uygulama geliştirebilmek için Vue destekli bir çok mobil hedefli frameworkler vardır.

Bunlardan bazıları:

Artıları:

  • Bir kez yaz tüm mobil cihazlarda çalıştır. (IOS, Android) Bu yüzden hızlı geliştirme yapabilme.
  • HTML&CSS’in verdiği esnek tasarım kabiliyetinden yararlanma.
  • Tek kod parçasıyla tüm platformlar hedef alındığından maliyetleri düşürerek zamandan tasarruf yapıyorsunuz.

Eksileri:

  • Javascript derlenen bir dilden ziyade yorumlanan bir dil olduğu için işlemciye daha fazla işlem yaptıracağından pil enerji kullanımı artacaktır bu da pilin daha hızlı bitmesine sebebiyet verecektir.
  • Native dille geliştirilen uygulamalara göre biraz daha yavaştır.
  • Mobil cihazın sensörlerine, kamerasına, adres defteri vb.. özelliklerine erişim yapamayacağınızdan kısıtlamaları vardır. (Bu durum Javascript’ten kaynaklanıyor.)

2.Yöntem:

Native dillerle geliştirme. IOS için Swift ya da Objective C. Android için Java ya da Kotlin. Veya da piyasada LLVM altyapısını kullanarak native derlenmiş kod üreten Delphi, Xamarin vb. sayabiliriz.

Artıları:

  • Derlenmiş kod olduğundan daha hızlı çalışır.
  • Enerji tüketimi 1. Yönteme göre daha azdır.
  • Çalıştığı cihazın tüm özelliklerine(sensör, adres defteri, kamera vb.) rahatlıkla erişim yaparak ortaya cihazla tam uyumlu ve pürüzsüz çalışan bir uygulama çıkartabilirsiniz.

Eksileri:

  • Her bir platform için o platformu destekleyen dilleri kullanarak ve o platformun UI API’lerini kullanarak uygulama yazmalısınız. Bu da maliyet demektir, daha fazla zaman harcamak demektir. 2 Platformu da(IOS, Android) bilmenizi gerektirir.

3.Yöntem:

Benim gelecek gördüğüm ve ileride kullanımının çok daha yaygınlaşacağına inandığım hibrit yöntemdir.

Bu yöntem 1.ve 2. Yöntemin birleşimi ile oluşmaktadır. Böylece tasarım yaparken Javascript+HTML&CSS’in esnekliğinden ve cross-platform oluşundan yararlanılırken, mobil cihazın sensör, adres defteri, kamera gibi özelliklerine de native apilere native yöntemle erişilerek 2 teknolojinin birbirini tamamlamasıyla meydana geliyor.

Hybrid App Sample

Bu yöntemle geliştirmenin yolları bayağı var. Bazıları:

  • Native Script: https://www.nativescript.org/vue
  • Vue-Native: https://vue-native.io
  • Cordova tabanlı çözüm: https://itnext.io/make-hybrid-platform-cordova-vue-webpack-2fb7031c4f9b
  • Ya da sizin kendi native diller içerisinde webView component kullanarak geliştireceğiniz çözümleri bu kategoride sayabiliriz. ( Sadece konteynır içerisinde webView ile açmanız yetmez. Sensörlere erişim, adres defteri, kamera vs. gibi apilerle erişim yapıp javascript uygulamanızla haberleştirebileceğiniz bir ara katman yazmalısınız. Bunlara ihtiyaç duymuyorsanız hibrit uygulamaya gerek yok. 1. Yöntem işinizi çözecektir.)

Artı Yönleri:

  • 1.yöntemdeki cross-platform tarzı uygulamaların bazı eksiklerini gidermesi. (Cihazın tüm özelliklerine erişebilme gibi. Sensör, kamera vb.)
  • Hızlı geliştirme yapabilme

Eksik Yönleri:

  • Debugging işlemi hybrid uygulamalarda daha karmaşıktır. Çünkü birden fazla farklı teknolojinin birleşimi ile uygulama yaptığınız için her birinin testi de kendi yöntemince olacaktır.

Bazı Meşhur Hybrid Mobil Uygulamalar:

  • Instagram
  • Evernote
  • Baskin Robins
  • Pacifica
  • Remote POS
  • Sworkit
  • UBER
  • Gmail
  • Twitter

VuJS’in tarihçesi

Evan You 2014 yılında eski Google çalışanı Evan You tarafından açık lisanslı olarak geliştirilmiştir. Evan You, Google’dan ayrılmadan önce AngularJS’i geliştirme ekibinde yer alıyordu. Bu yüzden AngularJS’de gördüğü eksikleri ve bazı handikapları VueJS ile gidererek ondan daha gelişmiş bir Javascript framework ortaya koymuştur. (Sonra’dan Google’da AngularJS’i tekrar yazarak Angular 2,3..7 sürümlerini çıkartmıştır.)

Öğrenim kolaylığı, esnek yapısı ve hızından dolayı birçok programcı tarafından sevilerek kullanılmaya başlanmıştır. Halen de kullanımı hızla artarak devam etmekte.

Neden VueJS ?

VueJS’i önemli kılan temel 6 özelliğini sayabiliriz:

  1. Basit yapısı ve öğreniminin kolay olması.
  2. Temel hedefi arabirim tasarlamak için geliştirilmiş olsa da eklentilerle çok yönlü bir frameworke dönüşebilmesi ve component yapısıyla karmaşık ve büyük uygulamalar da hazırlayabilme.
  3. Yüksek performansı. React ve Angular arasında en hızlısı VueJS’dir.
  4. Geliştirmeye açık mimarisi.
  5. Reactive olması.
  6. Test edilebilir olması.

JQuery iş görmüyor mu ki VueJS kullanalım?

Evvela bu soruya cevap vermeden önce ikisi arasındaki farklı irdeleyelim.

JQuery:

  • Jquery özellikle DOM üzerinde HTML/CSS elementlerini seçme(selector) işlemleri yapmak için geliştirilmiş bir Javascript kütüphanesidir.
  • HTML elementlerine her erişim yapacağımız zaman selector ile arayıp,seçip işlem yapmak zorundayız. Bazen bütün bir DOM’da çoklu element güncellemeleri kompleks bir hal alıyor. İşte bu durum JQuery’nin en büyük handikapı.
  • Aynı şekilde mesela bir bilgiyi tek bir alanda göstermeyi rahatlıkla yaparken, aynı bilgiyi aynı anda birçok bölgede göstermeye çalışırsak uygulamamız daha kompleks bir hal alacaktır.
  • Sonradan plugin şeklinde birçok eklenti eklenerek JQuery genel amaçlı dev bir javascript kütüphaneye dönüştürülmüştür.

VueJS:

  • Ana çıkış amacı kullanıcı arabirim/görünüm tasarımları (view) geliştirmektir.
  • Virtual DOM tekniği kullanır. Bu da HTML/CSS üzerinde herhangi bir elementi çağırma ya da güncellemeyi olağanüstü hızlı yapar. Yani kullandığı teknik ile JQuery’den daha hızlıdır.
  • Reactive’dir. Yani yapılan değişikliği hemen yansıtır; Mesela, HTML içerisinde birçok bölgede “isim” adında bir elementimiz(değişkenimiz) olduğunu farz edersek, ve o elemente yeni bir değer atadığımızda eş zamanlı olarak tüm bölgelerde hemen değişiklik gerçekleşir. Bu noktada JQuery’nin handikapını çözer.

Reactive Vue Sample

Reactive Vue Sample

İkisinin arasındaki farkı gördükten sonra cevabı siz verin…

Bazı VueJS ile geliştirilmiş uygulamalar

https://madewithvuejs.com

]]>
<![CDATA[Tailwind CSS tanıtımı ve Laravel'de kullanımı hakkında]]> https://burhantanis.com/blog_kod_dunyam/2019/02/05/tailwindcss-tanitimi-ve-laravelde-kullanimi-hakkinda https://burhantanis.com/blog_kod_dunyam/2019/02/05/tailwindcss-tanitimi-ve-laravelde-kullanimi-hakkinda post Tue, 05 Feb 2019 11:13:00 +0000 Tailwind CSS Nedir?

Laravel camiası içerisinde Adam Wathan öncülüğünde 4 kişilik bir ekiple geliştirlen bir CSS kütüphanesi. Bootsrap, Foundation ve Bulma’dan farklı olarak bir UI Kit değil ve içerisinde hazır bir tema ile de gelmiyor.

Tailwind daha çok özelleştirilebilir bir CSS yardımcı araç kütüphanesi.

Nasıl yani? Bootsrap gibi bir CSS framework bir tür UI Kit’tir. İçerisinde özelleştirilebilir UI elemanları bulunur; Tailwind’de ise UI KIT yerine daha low-level tasarım abstraction’ları vardır. Bunları kullanarak siz kendi birleşenlerinizi(component) oluşturabilirsiniz. Böylece Bootsrap gibi bir framework’ten daha esnek hareket ederek kompleks arabirimler dizayn edebilirsiniz. Üstelik Bootsrap gibi, Bulma gibi frameworklerle de uyum içinde eş zamanlı kullanarak.

O zaman şöyle de diyebiliriz. TailwindCSS; Bootsrap, Bulma ve Foundation CSS framework’lerin rakibi değildir; ama ileride bunlara rakip olacak bir UI KIT TailwindCSS ile geliştirilip karşılarına çıkartılabilir.

Açıkçası ekibin bir sonraki yol haritasında TailwindCSS Core kullanarak Tailwind UI KIT hazırlama da var. Muhtemelen temel yapıdan ayrı olarak UI KIT kategorisinde geliştirilecektir.

Daha Detaylı Çalışabilmeyi Sağladığından Bizlere Daha Fazla Esneklik Veriyor:

Mesela aşağıdaki kart dizayn örneğine bakalım:

<div class="bg-white mx-auto max-w-sm shadow-lg rounded-lg overflow-hidden">
  <div class="sm:flex sm:items-center px-6 py-4">
    <img class="block h-16 sm:h-24 rounded-full mx-auto mb-4 sm:mb-0 sm:mr-4 sm:ml-0" src="https://avatars2.githubusercontent.com/u/4323180?s=400&u=4962a4441fae9fba5f0f86456c6c506a21ffca4f&v=4" alt="">
    <div class="text-center sm:text-left sm:flex-grow">
      <div class="mb-4">
        <p class="text-xl leading-tight">Adam Wathan</p>
        <p class="text-sm leading-tight text-grey-dark">Developer at NothingWorks Inc.</p>
      </div>
      <div>
        <button class="text-xs font-semibold rounded-full px-4 py-1 leading-normal bg-white border border-purple text-purple hover:bg-purple hover:text-white">Message</button>
      </div>
    </div>
  </div>
</div>

Çıktısı:

https://burhantanis.com/assets/tailwind_card.png

Birleşen(Component) oluşturmaya çok elverişli:

Aşağıdaki örnek ile nasıl kendi css komponentlerimizi oluştdurduğumuzu görebilirsiniz.

<!-- Using utilities: -->
<button class="bg-blue hover:bg-blue-dark text-white font-bold py-2 px-4 rounded">
  Button
</button>
<!-- Extracting component classes: -->
<button class="btn btn-blue">
  Button
</button>
<style>
  .btn {
     @apply  .font-bold .py-2 .px-4 .rounded;
  }
  .btn-blue {
     @apply  .bg-blue .text-white;
  }
  .btn-blue:hover {
     @apply  .bg-blue-dark;
  }
</style>

Çıktısı:

https://burhantanis.com/assets/tailwind_button.png

Tüm elementleri responsive dizayna uyumlu:

Tailwind içerisindeki tüm elementler responsive dizayn gözetilerek oluşturulmuş. Kendi tabirleriyle responsive dizayn merkeze alınarak tüm elementler dizayn edilmiş. Ondan cep telefonu ekranından, tablete oradan da masaüstü geniş ekranlara kısaca tüm ekran ebatlarına Tailwind elementleri uyumla adapte olacaktır.

Genişletilebilir ve Özelleştirilebilir:

Bu özelleştirmeye elementlerin renkleri, kenar renkleri, yazı renkleri, font büyüklüğü, gölgeleri ve daha sayılamayacak bir çok özelliğini ekleyebiliriz. Tailwind PostCSS’de yazılmıştır; ama tüm özelleştirmeleri ve genişletme işlemlerini Javascript dosyası içerisinden yönetiyoruz. Genişletme derken kastım şu: “Yeni renkler eklediğinizde otomatik olarak bu bg-renk, text-renk border-renk gibi elementlere uygulanıyor. Sizin ekstradan bir şey yapmanıza gerek yok. Bu durumu aşağıda bir video ile daha detaylı anlatacağım.

Ayrıca Tailwind CSS framework’ten daha ötesini vaadediyor. Bir çeşit dizayn üretici bir araç gibi. Başarılı bir açık lisanslı CSS Utility KIT.

Açıkçaksı ben haz alarak projelerimde kullanıyorum. Bootsrap Framework’ünden vazgeçmeden, bazen ikisini bir arada kullanıyorum.

Laravel’e Tailwind CSS kurulumu ve kullanımı:

Genel bilgiyi İngilizce olarak şu linkte de bulabilirsiniz: https://tailwindcss.com/docs/installation ama ben yine de burada adım adım Türkçe açıklayacağım.

2 tür kurulumu var:

1.CDN ile

Tek yapmanız gereken ana sayfanızın <head></head> tagları arasına CSS CDN adresini yazmanızdır:

<link href="https://cdn.jsdelivr.net/npm/tailwindcss/dist/tailwind.min.css" rel="stylesheet">

2.NPM ya da YARN ile:

Daha fazla özelleştirme seçeneği olduğu için ben bu seçeneği tercih ediyorum. Yükleme yaparken bu 2. seçeneğin bazı adımları var. Şimdi tek tek aşağıda bunları öğrenelim:

A:

//npm ile:
npm install tailwindcss --save-dev
//Yarn ile:
yarn add tailwindcss --dev

B:

B adımı olarak projenizin ana dizinine tailwind.js dosyasını oluşturmaya geldi. Bu dosyayı Tailwind’i özelleştirmek ve yeni renkler vs. eklemek için kullanacağız.

 //npm ile
npx tailwind init
 //Yarn ile:
yarn tailwind init

C:

C adımı olarak; resources/sass klasörü içerisine tailwind.scss adında bir dosya oluşturalım ve içine de şunları yazalım:


@tailwind preflight; @tailwind components; /** * Here you would add any of your custom component classes; stuff that you'd * want loaded *before* the utilities so that the utilities could still * override them. * * Example: * * .btn { ... } * .form-input { ... } * * Or if using a preprocessor or `postcss-import`: * * @import "components/buttons"; * @import "components/forms"; */ @tailwind utilities;

Kendi projemden örnek: https://burhantanis.com/assets/tailwind_sass.png

D:

D adımı: projemizin ana dizininde webpack.mix.js dosyasını bulup en altına şu satırları ekleyelim:

const tailwindcss = require('tailwindcss');

mix.sass('resources/sass/tailwind.scss', 'public/css')
   .options({
       processCssUrls: false,
       postCss       : [tailwindcss('./tailwind.js')],
   }).version();

E:

E adımı olarak Laravel ana layoutumuz(artık master page mi dersiniz) içerisine <head></head> başlıkları arasına tailwind.css dosyasını eklemeyi unutmayalım:

    <link rel="stylesheet" href="{{mix('css/tailwind.css')}}" id="stylesheetLight">

F:

F adımı ise projemizin ana root klasöründe terminalde npm run development diyerek projemizi derleyelim. Bu kadar! Laravel kullananlar çıktılarının public/css içerisinde olacağını bileceklerdir.

Özelleştirme ve Genişletme Hakkında Daha Fazla Bilgi:

Özelleştirme ile ilgili kısa bir video hazırladım. Aşağıda bu videoyu izlerseniz nasıl genişletme ve özelleştirme yapacağımız hakkında fikir sahibi olabilirsiniz:

]]>
<![CDATA[Laravel'de log dosyasına dizi mesajlarını ya da nesneleri yazdırtma.]]> https://burhantanis.com/blog_kod_dunyam/2019/01/03/laravel-de-log-dosyasina-dizi-mesajlarini-ya-da-nesneleri-yazdirtma https://burhantanis.com/blog_kod_dunyam/2019/01/03/laravel-de-log-dosyasina-dizi-mesajlarini-ya-da-nesneleri-yazdirtma post Thu, 03 Jan 2019 20:17:00 +0000 Laravel 5.7’de dump server özelliği gelene kadar hata yakalama için en sık kullandığım yardım fonksiyonu logger olmuştur. Kısayoldan bir değişken içeriğini logger fonksiyonu ile laravel.log dosyasına gönderip orada hata yakalamaya çalışırdım; ama bir değişken değil de bir dizi ya da nesneyi log içine yazdırmaya kalksam ? Şöyle:

$dizi= [‘elma’,’armut’,’uzum’];
logger($dizi);  // hata verecek.

Ya da

$user = User::find(1);
logger($user); // hata verecek.

Bu durumu aşmak için şöyle yapmalıyız:

$dizi= [‘elma’,’armut’,’uzum’];
logger(print_r($dizi,true));  //çalışacak.

ya da

$user = User::find(1);
logger($user->toJson()); // çalışacak
]]>
<![CDATA[Laravel Forge ile DigitalOcean sunucularında subdomain oluşturma]]> https://burhantanis.com/blog_kod_dunyam/2018/12/29/laravel-forge-ile-digitalocean-sunucularinda-subdomain-olusturma https://burhantanis.com/blog_kod_dunyam/2018/12/29/laravel-forge-ile-digitalocean-sunucularinda-subdomain-olusturma post Sat, 29 Dec 2018 14:05:00 +0000 Bu yazımda Laravel Forge kullanarak DigitalOcean sunucularında nasıl bir subdomain oluşturuzu anlatacağım.

Oluşturduğumuz subdomain’e tamamen bağımsız ayrı bir Laravel uygulaması ya da başka bir bağımsız site kurabiliriz. Oluşturma sebebimiz bu olacak.

Şimdi adım adım anlatmaya başlayalım:

1.adım:

www.digitalocean.com sitesine girerek kendi hesabınıza girin ve daha önce kurduğunuz domain sayfasını aşağıdaki gibi açın:

https://burhantanis.com/assets/subdomain1.png

2.adım:

Sonra açtığınız ve içerisinde subdomain oluşturacağınız domain’de aşağıdaki gibi subdomain ismini yazarak bir “A” kaydı oluşturun:

https://burhantanis.com/assets/subdomain2.png

3.adım:

Laravel Forge’ı açın ve servers->domaininizi seçin ve aşağıdaki gibi subdomaini oluşturun:

https://burhantanis.com/assets/subdomain3.png

4.adım:

Oluşturduğunuz subdomain’in aşağıdaki gibi üzerine tıklayarak github ya da diğer repolardan dosyalarınızı çekin:

https://burhantanis.com/assets/subdomain4.png

https://burhantanis.com/assets/subdomain5.png

5.adım:

Son olarak oluşturduğunuz subdomain’e Let’s Encyrpt SSL sertifikası bağlayın:

https://burhantanis.com/assets/subdomain6.png

https://burhantanis.com/assets/subdomain7.png

6.adım:

İşlem bu kadar! Terminalden sunucuya bağlanıp subdomainizi kontrol edebilirsiniz:

https://burhantanis.com/assets/subdomain8.png

]]>
<![CDATA[Singleton Design Pattern (Tasarım Kalıbı) Nedir? Ne Tür Durumlarda Nasıl Kullanılır?]]> https://burhantanis.com/blog_kod_dunyam/2018/12/28/singleton-design-pattern-nedir-ne-tuer-durumlarda-nasil-kullanilir https://burhantanis.com/blog_kod_dunyam/2018/12/28/singleton-design-pattern-nedir-ne-tuer-durumlarda-nasil-kullanilir post Fri, 28 Dec 2018 21:42:00 +0000 Evvela şunu söylemek gerekir ki oluşturulan her bir nesne hafızada yer kaplar. Bazı nesneler var ki her bir defasında ayrı ayrı oluşturulmaya gerek yoktur. Örnek vermek gerekirse db connection nesnesini verebiliriz. Her bir istemcide bu nesneyi tekrar oluşturursak hafızadan ciddi manada yer iştigal etmiş oluruz ve veritabanımızı da boşu boşuna birden fazla connection oluşturarak meşgul ederiz. Kısaca sistemi yavaşlatmış oluruz.

İşte bu tür sorunları aşmak için “Singleton” tasarım kalıbını kullanabiliriz. Böylece bir nesneyi sadece birkez oluşturmuş oluruz. Başka sınıflar o nesneyi tekrar oluşturmak istese de oluşturulmuş nesne üzerinde devam etmesini sağlarız.

Aşağıda genel bir signleton sınıf kalıbı var.

// General singleton class.
class Singleton {
  // Hold the class instance.
  private static $instance = null;
  
  // The constructor is private
  // to prevent initiation with outer code.
  private function __construct()
  {
    // The expensive process (e.g.,db connection) goes here.
  }
 
  // The object is created from within the class itself
  // only if the class has no instance.
  public static function getInstance()
  {
    if (self::$instance == null)
    {
      self::$instance = new Singleton();
    }
 
    return self::$instance;
  }
}

Yukarıdaki Singleton kalıbını incelersek:

Aslında statik metoddan yararlanıyoruz. Nesne yaratma hadisesi private yapılarak dışarıdan engelleniyor. Sadece o nesneyi içeride public static function getInstance() metodu içerisinde yapabiliyoruz ve bu metodda statik metod.

Bu metodun içerisine baktığımızda:

  public static function getInstance()
  {
    if (self::$instance == null)
    {
      self::$instance = new Singleton();
    }
 
    return self::$instance;
  }

Eğer bu sınıf ilk kez oluşturuluyorsa bir kez oluşturacağız ondan sonra oluşturulan nesne üzerinden diğer nesnelerin kullanılmasını sağlayacağız.

Aşağıdaki örneklerde görüldüğü gibi:

// All the variables point to the same object.
$object1 = Singleton::getInstance();
$object2 = Singleton::getInstance();
$object3 = Singleton::getInstance();

$object1 ile birkez sınıf oluşturuluyor ve $object2 , $object3 ‘te $object1 ile oluşturulmuş nesne tekrar kullanılacak. Ayrıyeten oluşuturlmayacak.

Aşağıdaki şemada “Singleton” tekniği ile oluşturulmuş ve oluşturulmamış sınıfların davranış örneklerini göreceksiniz:

Singleton

Gerçek Hayatta kullanım örneğine bakalım:

// Singleton to connect db.
class ConnectDb {
  // Hold the class instance.
  private static $instance = null;
  private $conn;
  
  private $host = 'localhost';
  private $user = 'db user-name';
  private $pass = 'db password';
  private $name = 'db name';
   
  // The db connection is established in the private constructor.
  private function __construct()
  {
    $this->conn = new PDO("mysql:host={$this->host};
    dbname={$this->name}", $this->user,$this->pass,
    array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
  }
  
  public static function getInstance()
  {
    if(!self::$instance)
    {
      self::$instance = new ConnectDb();
    }
   
    return self::$instance;
  }
  
  public function getConnection()
  {
    return $this->conn;
  }
}

Connectiondb’nin oluşturulup oluşturulmadığını kontrol ediyoruz. Oluşturulduysa aynı bağlantı nesnesi tekrar hizmetimize sunuluyor. Ne kadar bağlantı nesnesi kullandığımız önemli değil. Lütfen aşağıya bakın:

$instance = ConnectDb::getInstance();
$conn = $instance->getConnection();
var_dump($conn);

$instance = ConnectDb::getInstance();
$conn = $instance->getConnection();
var_dump($conn);

$instance = ConnectDb::getInstance();
$conn = $instance->getConnection();
var_dump($conn);

Yukarıdaki 3 bağlantı örneği de aynı sonucu verecektir. Singleton(tek nesne) tasarım kalıbı, bir sınıfın tek bir örneğini almak için kullanılır. Amaç oluşturulan nesneye global erişim noktası sağlamaktır. Sistem çalıştığı sürece ikinci bir örnek oluşturulmaz, böylelikle istenen nesnenin tek bir defa oluşturulması garanti altına alınacaktır. Singleton nesneler ilk çağırıldıklarında bir kere oluşturulurlar ve sonraki istekler bu nesne üzerinden karşılanır. Yukarıdaki örnek gibi.

Şimdi bir de Singleton tasarım kalıbını kullanmadan yukarıdaki veritabanı bağlantı sınıfını tasarlayalım:

// Connect db without a singleton.
class ConnectDbWOSingleton {
  private $conn;
  
  private $host = 'localhost';
  private $user = 'db user-name';
  private $pass = 'db password';
  private $name = 'db name';
   
  // Public constructor.
  public function __construct()
  {
    $this->conn = new PDO("mysql:host={$this->host};
    dbname={$this->name}", $this->user,$this->pass,
    array(PDO::MYSQL_ATTR_INIT_COMMAND => "SET NAMES 'utf8'"));
  }
   
  public function getConnection()
  {
    return $this->conn;
  }
}

Şimdi her bir nesne oluşturmada yeni bir veritabanı bağlantısı tanımlamış oluyoruz. Böylece hem hafızadan gidiyor hem de veritabanında birden fazla bağlantı oluşturmuş oluyoruz:

$instance = new ConnectDbWOSingleton();
$conn = $instance->getConnection();
var_dump($conn);
 
$instance = new ConnectDbWOSingleton();
$conn = $instance->getConnection();
var_dump($conn);
 
$instance = new ConnectDbWOSingleton();
$conn = $instance->getConnection();
var_dump($conn);

Yukarıdaki kod sistemimizi hem yavaşlatacak hem de hafıza kullanımını artıracaktır.

]]>
<![CDATA[Yazılım Tasarım Kalıplarına Giriş]]> https://burhantanis.com/blog_kod_dunyam/2018/12/27/yazilim-tasarim-kaliplarina-giris https://burhantanis.com/blog_kod_dunyam/2018/12/27/yazilim-tasarim-kaliplarina-giris post Thu, 27 Dec 2018 01:06:00 +0000 Yazılım tasarım kalıplarına değinmeden önce evvela “Nesne Yönelimli Programlama” kavramını açıklamalıyım. Bildiğiniz üzere yazılım tasarımlarında gerçek hayatı daha iyi modelleyebilme çabası sonucu Nesne Yönelimli Programlama, başka bir tabirle NYP ortaya çıkmıştır.

Nesne yönelimli programlama tekniği bilgisayar uygulamalarını soyut bir olgudan çıkararak insanların daha kolay algılayabileceği hale getirmiştir. Makro düzeyde gerçek hayatı modelleme ile başlayan bu ilişki muhtemelen mikro düzeyde de büyük ses getirecektir.

Yazılımcılar ve programcılar için en önemli olgu şudur ki :

“Gerçek hayatı ne kadar iyi modelleyebiliyorsanız o kadar başarılı sayılırsınız.”

Peki “Yazılım Tasarım Kalıpları” nın (Design Patterns) bununla ilgisi ne? İlgisi çok. Evvela “Yazılım Tasarım Kalıpları”, Nesneye Dayalı Programlama’yı nasıl daha efektif kullanırızın çözüm örnekleridir. Birçok problemin çözümü için birçok kalıp geliştirilmiş. O zaman yazılım tasarım kalıplarının bir çok tecrübeden sonra ortaya çıktığını rahatlıkla söyleyebiliriz.

“Design pattern” kavramı bir kurallar topluluğundan ziyade bir işi nasıl ve en güzel ne şekilde yapabileceğimizi gösteren yöntemler topluluğudur.

Design Pattern” konusunda yazılmış en güzel ve en popüler kaynaklardan biri Erich Gamma, Richard Helm, Ralph Johnson ve John Vlissides tarafından kaleme alınmış “Design Patterns: Elements of Reusable Object-Oriented Software”  kitabıdır. Bu kitapta en popüler tasarım kalıpları anlatılmış ve bu kalıpların çeşitli uygulamalarına yer verilmiştir. “Desgin pattern” guru’ları olarak anılan bu 4 kişi “Gangs Of Four(GOF)” olarak ta bilinmektedir.  Zaten bahsi geçen kitapta anlatılan tasarım kalıplarına da genel olarak GoF tasarım kalıpları denilmektedir.

GOF tasarım kalıpları genel olarak 3 ana grup altında incelenir. Bunları özetle şu şekilde sıralayabiliriz:

Creatinal Patterns:

Bu tasarım kalıpları bir yada daha fazla nesnenin oluşturulması ve yönetilmesi ile ilgilidir. Bu gruptaki kalıplar şunlardır:

  • Abstract Factory
  • Builder
  • Factory Method
  • Prototype

Behavioral Patterns :

Bu gruptaki kalıpların amacı belirli bir işi yerine getirmek için çeşitli sınıfların nasıl birlikte davranabileceğinin belirlenmesidir. Bu gruptakiler:

  • Chain of responsibility
  • Command
  • Interpreter
  • Iterator
  • Mediator
  • Memento
  • Observer
  • State
  • Strategy
  • Template method
  • Visitor 

Structural Patterns:

Bu gruptaki kalıplar ise çeşitli nesnelerin birbirleri ile olan ilişkileri temel alınarak tasarlanmıştır. Bu gruptakiler:

  • Adapter
  • Bridge
  • Composite
  • Decorator
  • Façade
  • Flyweight
  • Proxy

Ben bu yazı dizimde yukarıdaki tüm yazılım kalıplarına değinmeyeceğim. Sadece çok sık kullanılanları seçerek açıklamaya çalışacağım. Ayrıca SOLID Yazılım Prensipleri yazı dizimde bahsettiğim yazılım prensipleri de yukarıdaki bazı tasarım kalıplarından yararlanılarak oluşturulmuştur. Bunu da bir kez daha vurgulamak isterim.

Saygılar.

]]>