Web Dev. GökhanKR

Kişisel web tasarım ve kodlama blogu. Web tasarımı ve kodlama araçları ile ilgili bilgiler ve yardımcı dökümanlar.

Kod yazmak sanattır...

gokhankr.com

Blogger tarafından desteklenmektedir.

Vuex Store - Giriş ve Konu Anlatımı

  Nisan 07, 2021    

Vue.js ile beraber Vuex'e girmeye karar verdiyseniz yada ne olduğunu merak ediyorsanız, buradan itibaren temiz bir giriş yapacağız. Temelden derinlere doğru inerek Vuex içerisindeki tüm konulara ve alanlara değinmek istiyorum. Hazırsanız başlayalım.

Vuex Kullanım Amacı

Vue.js de dikkat ettiyseniz component yapısı içerisinde veriyi içerden dışarıya, yani alt component'ten üst component'e göndermek zor ve karmaşık bir durum. Ayrıca verinin alt component'te sürekli değişimini ve bunun gibi onlarca component olduğunu düşünün.

Tam olarak burada Vuex veriyi merkezi bir yerde birleştirip tüm component'ler arasında paylaşmayı ve daha dinamik bir yapıyı sağlamayı amaçlıyor. 

Vuex Kullanımına Giriş

Kurulumdan bahsetmeyeceğim, yeni bir Vue örneği ile beraber gelen seçenekler arasında direk kurabiliyorsunuz veya vâr olan bir projeye dahil etmek istiyorsanız netten dökümantasyon incelemek durumundasınız.

Vuex projenizde kuruysa veya kurduysanız ilk olarak /store dizinindeki index.js'i inceleyelim.

import Vue from 'vue' 
import Vuex from 'vuex'

Vue.use(Vuex) 

const store = new Vuex.Store({ 
  state: { 
    count: 0 
  },
  getters: {
  
  }   
  mutations: { 
    increment (state) { 
      state.count++ 
    } 
  },
  actions: {

  }
})

Burada gördüğünüz üzere bir Vuex Store nesnesi oluşturulmuş gözükmekte. Bölümleri şu şekilde.

State: Store verilerinin tutulduğu alan. Store'a ait tüm veriler State içerisinde barındırılır. Yani kaynak burasıdır.

Getters: State içerisindeki veriyi hem direk State üzerinden hem de buradan alabilirsiniz. Ancak Getters'ın farkı veriye mesela "State.kullanicilar.map( ... return x ...)" gibi bir değişiklik yaparak çıktı almak istediğiniz durumlarda kullanılır.

Mutations: State üzerindeki bir veriyi güncellemek istediğiniz zaman Mutations'ları kullanıyoruz. Yani bu demek oluyor ki State üzerindeki veriyi doğrudan değiştiremezsiniz.

Actions: Bazen çok daha detaylı işlemler yapmanız gerekir, mesela form isteği atıp gelen veriyi işlemek gibi. Bunun için Mutations değil Actions'ları kullanırsınız. Sonra veriyi yine değiştirmek için Actions üzerindeki işleminiz bitince, yine Actions içerisinde Mutations'ları çağırır veri güncellemeyi aynı metot ile yaparsınız.


Bu yazımda inceleyeceklerimiz bu kadardı. Bir sonraki yazımda Vuex Store üzerindeki State özelliğine değineceğiz. Teşekkürler.

   / /

  Yorum Yok

PHP ile Site Adresini ve Dosya Dizinini Yazdırmak

  Mart 16, 2021    

 


PHP ile çalıştığınız URL'i ve dosya dizin yolunu almak için $_SERVER global değişkeninden yararlanmanız gerekir.

Bir çok değeri bünyesinde barındıran bu değişkende site adresi "HTTP_HOST" üzerinde barınır.

echo $_SERVER['HTTPS'] ?? 'http' . '://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];

Yukardaki kodun çıktısı aşağıdaki şekilde görünecektir.

http://siteadresi.com/calisma-dizini/
$_SERVER["HTTPS"] değeri eğeri eğer var ise tanımlı olacaktır, yok ise hata vereceği için nullsafe operatörü ile kontrol ettirip olmadığında yerine "http" yazdırıyoruz.

   /

  Yorum Yok

Git 'in Linux üzerinde sürekli şifre isteme sorunu.

  Şubat 08, 2021    



Git 'i Linux üzerinde kullanmak ta farklı bir deneyim oldu benim için. Bu durum ilk defa Visual Studio Code üzerinde karşıma çıktı. Çözümü oldukça basit aslında ama böyle işlemleri araştırmak ve bulmak bazen zaman alabiliyor.

Çözümü yine git komutları ile yapacağız. Aşağıdaki komutu terminaliniz üzerinden çalıştırın. Komut sonrası sizden VS Code üzerinde güncelleme yapmak istediğinizde yine şifre isteyecek ama bu girişten sonra bir daha girmeyeceksiniz.

git config --global credential.helper store

Bu komutun amacı da tahmin edebileceğiniz gibi Ev Dizininizde bir dosya oluşturup git kullanıcı bilgilerinizi saklı tutmasıdır.

   / /

  Yorum Yok

Vue.js Lifecycle Hooks Anlatımı

  Haziran 20, 2019    

Vue.js Lifecycle Hooks

Türkçesi biraz değişik gelebilir ama aslında çok net ve anlaşılabilir bir çevirisi var. "Lifecycle Hooks" yani "Yaşamdöngüsü Kancaları" nedir bunu işleyeceğiz.

Bir örnek ile anlamaya çalışalım, elinizde bir çark var. A, B, C, D noktaları var ve çark döndükçe bu noktalara temas edecek. İşte bu noktaları programın içerisinde çalışan kod blokları olarak alın.

Mesela A fonksiyonu, B fonksiyonu olacak şekilde kabul edelim. A 'ya geldiğinde A içerisindeki kodlar işlenecek sonra da diğerleri. Buna Yaşamdöngüsü diyelim. Şimdi de kodlar çalışırken A ' veya B 'ye uğramadan veya her ikisi arasında bir işlem yapmak istiyorsak ne yaparız ?

Yaşamdöngüsünü bir anlık ta olsa durdurmamız gerekir. İşte burada Kancalar devreye giriyor. Yani A, B, C fonksiyonları çalışırken araya A > A 'dan önce bunu yap > B > C > D 'den önce bunu yap > E şeklinde bu döngüye müdahalede bulunuyoruz.

İşte her Vue örneği aslında bu Yaşamdöngüsü şeklinde çalışıyor ve bizlere bu döngü içerisinde çeşitli yerlere müdahale etme imkanı sunuyor.

Lifecycle Hooks Diyagramı
Öncelikle diyagrama bir göz atalım.

Yukarıdaki diyagram herşeyi açıklıyor aslında. Aşağıda bu diyagram içerisindeki fonksiyonları açıklamasıyla verdim. "before", önce ve "after", sonra demek.

// Uygulama oluşturulmadan önce
beforeCreate()
// Uygulama oluşturulduktan sonra
created()
// Uygulamaya bir etiket mount edilmeden hemen önce
beforeMount()
// Mount edildikten sonra
mounted()
// DOM verisi güncellenmeden hemen önce
beforeUpdate()
// DOM güncellendikten sonra
updated()
// beforeDestroy yani uygulama dağıtılmadan önce
beforeDestroy()
// Uygulama dağıtıldıktan sonra çalışır
destroyed()
Bunların ne olduklarını açıkladık listeledik şimdi detaylarına inelim ve aşama aşama görelim.


  1. beforeCreated() ile uygulama henüz oluşturulmadan önce yani data 'lar ve event 'lerden önce istediğinizi bu fonksiyon içerisinde çalıştırabilirsiniz. 
  2. Bundan sonra da created() yani uygulama oluşturuldu ve bu fonksiyon içerisinde uygulama oluşturulduktan sonra yapılacak bir şey varsa kullanılır.
  3. ve aşağı doğru inerken program bir soru soruyor: "el" var mı? Görüyoruz uygulamada ilk olarak "el" degerini girip etikete bağlıyorduk. Peki ya bağlı değilse ? O zaman program diyor ki uygulama.$mount("#etiket") girildiği zaman devam et. (Hani mount etmenin ikinci yöntemiydi bu($mount("#etiket")))
  4. "el" işlemini sorguladıktan sonra bir soru soruyor "template" degeri ile bir şablon girilmiş mi. Eğer varsa render fonksiyonu ile derle, yoksa "el" ile bağlı olan etikete derle. (Biz başladığımızdan bu yana hep "el" kullandık)
  5. Mount edilmeden hemen bir tık öncesinde beforeMount() fonksiyonuna geçiyor.
  6. Ardından $mount işlemi yapılıyor. DOM verisi listeleniyor ve sonrasında mounted() fonksiyonuna geçiyor. Eğer listeleme tarzında işlemler kullanacaksanız sık kullanacağınız aşama.
  7. Şimdi mounted 'den sonra süreç ikiye ayrılıyor. Birisi diyagramda gördüğünüz üzere beforeUpdate() -> Update(), diğeri de beforeDestroy() -> destroyed()
  8. sayfada bir update işlemi yaparsanız, mesela ürün listelediniz ve "Sil" deyip listeyi db 'den tekrar çekip listelediniz. Sonuç olarak veri değişikliği oldu o zaman beforeUpdate() yani güncellemeden hemen önce ve sonrasında updated() fonksiyonu ile DOM verisi tekrar güncellendikten hemen sonra.
  9. Yukardakilerin hepsi anlaşılır fakat destroy görmediğiniz bir şey. Destroy bir Vue uygulaması üzerinden tüm direktiflerinin, eylemlerinin(events) ve alt çocuk örneklerinin dağıtılması yani kaldırılmasıdır. Örneğin açtığınız etiket içerisindeki tanımladığınız hiç bir eylemi bir daha kullanamazsınız. Ancak bu etiketin boşalması, silinmesi vs. durumu değil. Sadece o etiket üzerindeki işlemlerinizi kullanamazsınız. Listelediğiniz veriler son haliyle orada kalır.

Bir uygulama aşağıdaki şekilde dağıtılır.

uygulama.$destroy()

Bir örnek uygulama ile bu anlatımı da bitireceğim. Baştan aşağı lifecycle hooks ile tasarlanmış bir uygulama hazırladım. Aşağıya kodları ve jsfiddle önizlemesini paylaştım. Sayfa ilk açıldığında beforeCreate -> created çalışacak, "Başlat" dediğimizde $mount edecek, "Değiştir" dediğimizde veri değeri değişecek ve beforeUpdate -> updated çalışacak ardından "Uygulamayı dağıt" denildiğinde $destroy devreye girecek.

Ek olarak belirteyim ben alert() kullandığım için veri değeri güncellenmeden önce uyarı çıkıyor gibi duruyor ancak alert() güncelleme işlemine paralel değil daha erken davranıyor. Bu yüzden veri güncellemesi sonra yapılıyor gibi duruyor.

Bu yazımda burada bitmiş bulunuyor. Bir sonraki yazımda görüşmek üzere...

   / / / /

  Yorum Yok

Vue.js Bileşenler

  Haziran 19, 2019    

Vue.js Bileşenler

Bu yazımda Vue Bileşenleri 'ni anlatacağım. Bileşenler sayfa içerisinde kullandığımız hazır şablonlardır. Bileşenler tıpkı bir Vue uygulaması gibi çalışır ancak amaçları farklıdır.
Klasik bir bileşen yapısı aşağıdaki gibidir.
Aslında düşündüğümüz zaman bir web sayfasında her alan bir bileşendir. Mesela sayfanın header kısmı yani <header> etiketi içerisindekiler ile beraber bir bileşendir.

Bileşenleri oluşturur ve tekrar tekrar sayfada kullanırız. Örneğin bir e-ticaret sitesini düşünün her zaman ürünlerin listelendiği bir sayfası ve bu ürünleri sayfa içerisinde bir kart içerisinde göstermek zorunda. Ancak bu kartları hem anasayfada hem de herhangi bir ürün sayfasının alt kısmında diğer ürünler olarak göstermek zorunda. Bunun için her sayfaya bu bileşeni kopyala yapıştır yapmak mı daha doğru yoksa tek bir bileşen haline getirip istediği yere sadece <urun-karti> şeklinde listelemesi mi ?

Tab ki bileşen sistemi öte yandan bu bileşeni tekrar tekrar düzenlediğinde tüm sayfadaki ürün kartları da eşzamanlı olarak bu değişimle birlikte görüntülenecek. Böyle de bir avantajı var.

Bir bileşen aşağıdaki gibi oluşturulur:

Vue JS
Vue.component('urun-karti',
{ 
template: '<li>Yepyeni mobilyalar</li>' 
})

<ol>
<!-- Burada urun-karti çağırılacak ve <li> elementi dönecek -->
 <urun-karti></urun-karti>
</ol>


Bu kullanım sade ve sadece tek bir "Yepyeni mobilyalar" çıktısını üretmekten öteye geçemez. İşimizi daha da profesyonelleştirelim.

Burada prob özelliğini kullanacağız ve bir Vue uygulaması içerisindeki bir data 'yı önce bileşen etiketi içerisinde v-bind:xxx şeklinde bağlayacağız ve bunu probs['xxx'] şeklinde bileşen içerisine alacağız.
Tam olarak anlamadıysanız örneği inceleyin.

Vue JS Bileşeni
// Bileşeni oluşturduk
Vue.component('urun-karti', 
{ 
// probs ile etiket üzerindeki "veri" attribute 'unu aldık.
props: ['veri'], 
template: '<li>{{ veri.urunIsmi }}</li>' 
})

HTML
<!-- Listelenecek etiketimizi oluşturduk -->
<div id="urunleri-listele">
<ol> 
<!-- Burada önce v-for ile verileri urun 'e attık sonra da v-bind ile "veri" attribute 'una bağladık -->
 <urun-karti v-for="urun in urunler" v-bind:veri="urun"></urun-karti>
</ol>
</div>

Vue JS
//Uygulamamızı oluşturduk ve ürünler adında dizimizi oluşturduk
var uygulama = new Vue({
el: '#urunleri-listele', 
data: { 
urunler: [ 
{ id: 0, urunIsmi : 'Dolap' }, 
{ id: 1, urunIsmi : 'Sandalye' }, 
{ id: 2, urunIsmi : 'Yeni masa gıcır gıcır' } 
] 
} 
})

Bu örneğin çıktısını aşağıdan inceleyebilirsiniz
probs içerisinde farklı attribute 'lar da çağırıp bileşen içerisinde kullanabilirsiniz. Örneğin probs['id','value','class'] şeklinde kullanabilirsiniz.

Bileşenler yazım bu kadar, bundan sonra Lifecycle Hooks(Yaşamdöngüsü Kancaları) 'u anlatacağım. Görüşmek üzere...

   / / /

  Yorum Yok

Vue.js Koşullar ve Döngüler

  Haziran 19, 2019    

Vue.js Koşullar ve Döngüler

Vue içerisindeki Koşulları ve Döngüleri anlatmaya çalışacağım. Daha önce direktiflerden bahsetmiştim. Şimdi bu iki özellik de birer direktif olarak çalışmakta. Ancak bunlar Vue içerisinde tanımlanmış direktiflerdir.

Koşullar
İf direktifini inceleyelim.

Vue JS
var uygulama = new Vue(
{
el: '#icerik',
data: {
goster: true
}
})
HTML
<div id="icerik">
<span v-if="goster">Görüntüleniyor</span> 
</div>

Yukarıdaki "v-if" örneği:


En basit kullanımı budur. Peki devamını getirelim, yani else, else if kullanalım.

HTML
<div id="icerik">
<span v-if="goster == 1">Deger: 1</span> 
<span v-else-if="goster == 2">Deger: 2</span>
<span v-else">Ne 1, ne de 2</span>
</div>

Döngüler
Döngüleri gösterelim. Uygulama içerisinde bir dizi tanımlayalım ve içerisindeki verileri HTML etiketi içerisinde döndürelim.

Vue JS
var uygulama = new Vue({
el: '#icerik', 
data: { 
veriler: [ 
{ isim: 'Ali' }, 
{ isim: 'Veli' }, 
{ isim: 'Metin' } 
] 
} 
})

HTML
<div id="icerik">
<ol> 
<li v-for="veri in veriler"> {{ veri.isim}} </li> 
</ol>
</div>
yukarıdaki örnekte de verileri içerisindeki veriyi <li> olarak listeleme etiketi içerisinde yazdırdık. Örneği aşağıdan inceleyebilirsiniz.

İsterseniz diziyi anahtarlarıyla beraber yazdırabilirsiniz.

HTML
<div id="icerik" class="p-4">
<p v-for="(veri, key) in veriler">
  <b>{{key}}.</b> {{ veri.isim}} </p>
</div>
Yukarıdaki örneğin çıktısı:

Son olarak söylemek istediğim aynı etiket içerisinde v-if ve v-for direktiflerini beraber kullanmayın.

Tasarımcılara bu konuda cazip gelen iki durum var:

  • <li v-for="kullanıcı in kullanıcılar" v-if="kullanıcı.aktifMi"> bunu bu şekilde değil de kullanıcılar verisini döndürmeden önce aktifKullanicilar diye bir değer oluşturup listelenecekler buraya filtre ile atılabilir sonra listelenebilir.(filterelere değineceğiz anlaşılması açısından değindim)
  • ikincisi bir li elemanında if ve for kullanacaksanız öncesinde bir etiket açın if direktifini girin daha sonrasında li içerisinde for kullanarak verilerinizi listeleyin. Örn:

<ul v-if="goster">
      <li v-for="kullanici in kullanicilar">{{kullanici.isim}}</li>
</ul>


Bu dersimiz de burada bitti. Bundan sonra Components yani Bileşenleri işleyeceğiz. Görüşmek üzere...


   / / / /

  Yorum Yok

Kaydol: Kayıtlar (Atom)