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.

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

Vue.js Direktifler

  Haziran 19, 2019    

Vue.js Direktifler

Vue.js ile bir elemente özellik atamak veya kontrol sağlamak için direktifler kullanılır. Mesela önceki dersimizde method 'lardan bahsetmiştim. onclick ve onfocus gibi özellikleri direktif olarak kullanıyoruz.

v-html
Örneğin bir Vue uygulamasında bir data içerisinde bir HTML kodu bulunsun.

Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
      veriHTML: "<b>Gökhan</b>"
}
})
Şimdi veriHTML değerini {{ veriHTML }} olarak yazdırabiliriz ancak sayfada HTML olarak değil string olarak görüntülenecektir. Bunun için "v-html" direktifini kullanacağız.

HTML
<div id="anasayfa">
      <p v-html="veriHTML"></p>
</div>
Böylece değeri HTML kodu olarak p etiketi içerisinde görüntüledik.

v-show
Bir başka direktif de "v-show" dur. Eğer veri true dönerse etiketi görüntüleyecektir, false dönerse etiket yok olacaktır. v-show ekranda display:block|none; işlemi görecektir. v-if gibi etiketi komple ortadan kaldırmaz.

Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
      veri1: "Merhaba",
      veri2: true,
      veri3: false
}
})
HTML
<div id="anasayfa">
      <p v-show="veri1">{{ veri1 }}</p>
      <p v-show="veri2">{{ veri2}}</p>      <p v-show="veri3">Çalışmayacak</p>
</div>
  • veri1 görüntülenecek ve Merhaba yazacaktır.
  • veri2 görüntülenecek ve true yazacaktır.
  • veri3 ise false olduğu için görüntülenmeyecektir.

v-model
Bir diğer direktif v-model bu direktif ile reaktif olarak input girişi yapılmaktadır.

Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
      inputGiris: "Merhaba"
}
})
HTML
<div id="anasayfa">
      <input type="text" v-model="inputGiris" />
      <p>{{ inputGiris }}</p>
</div>

v-model input örneği:
v-bind
Son olarak yoğun olarak kullanacağımız v-bind direktifinden bahsedeceğim. v-bind ile bir element içerisinde istediğimiz attribute 'a işlem yapabiliyoruz ve istersek isteğe bağlı attr değeri ekleyebiliyoruz.

Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
      sinifAdi: "Merhaba",
      idDegeri: "paragrafim"
}
})

HTML
<div id="anasayfa">
<p v-bind:class="sinifAdi" v-bind:id="idDegeri">Gökhan Korul</p>
</div>

İstersek class ataması yaparken bir if koşulu da kullanabiliriz. Mesela 2 adet butonumuz var hangisi tıkalırsa ona aktif(active) sınıfı eklemek istiyoruz.

Vue JS
var uygulama = new Vue({
el: "#anasayfa",
data:{
      btn1:1,
      btn2:2
},
methods: {
aktifEt(id) {
      if (id == 1) {
        this.btn1 = 1
        this.btn2 = 0
        } else if (id == 2) {
        this.btn2 = 1
        this.btn1 = 0
        }
      }
}
})
HTML
<div id="anasayfa" class="p-2">
   <a href="#"
   v-bind:class="[btn1 == 1 ? 'active' : '']"
   v-on:click="aktifEt(1)"
   class="btn btn-primary btn-lg">
      Anasayfa
   </a>
   <a href="#"
   v-bind:class="[btn2 == 1 ? 'active' : '']" 
   v-on:click="aktifEt(2)"
   class="btn btn-primary btn-lg">
      Ürünler
   </a>
</div>

Burada btn1 ve btn2 adında iki data verisi oluşturduk ve bunlardan hangisi 1 ise o class içerisinde active yazacak şeklinde a etiketi v-bind:class içerisinde koşul oluşturduk. Tabiiki böyle kullanmayın :) Sadece örnek olsun diye böyle kodladım sizin daha usta örnekler yapacağınızdan eminim.

Butonu akif et örneği:


Bir sonraki yazımda Koşullardan ve Döngülerden bahsedeceğim. Görüşmek üzere...

   / / / /

  Yorum Yok

Kaydol: Kayıtlar (Atom)