Category Archives: Ders

PHP ile Bir Dosyanın Karakter Kodlamasını Öğrenmek

yorum yok

Geçenlerde altyazıları yüklerken aklıma takıldı. Bazı altyazılar UTF-8, bazıları ise ISO-8859-9. Bu yüzden yazdığım kodlar birini düzgün gösterirken diğerini göstermiyordu. Bu yüzden dosyanın hangi karakter kodlamasına ait olduğunu öğrenmem gerekiyordu. Ve şöyle bir kod yazdım;

$open = file_get_contents('test.srt');
$enc = mb_detect_encoding($open, mb_list_encodings(), true);

echo $enc; // örnek çıktı: UTF-8 ya da ISO-8859-9

Peki bunu bulmak benim ne işime yaradı? Bu sayede header ile karakter setini belirleyebildim şu şekilde;

if ($enc == "UTF-8") {
    header('Content-type: text/vtt; charset=utf8');
} else {
    header('Content-type: text/vtt; charset=iso-8859-9');
}

Buda karakter problemlerimi çözmüş oldu. Bir gün böyle bir hata ile karşılaşırsanız artık çözümünü biliyorsunuz, kolay gelsin.

Konuyu görmek için tıklayın

PHP cURL ile JSON Data Göndermek

2 yorum

Bazen API’ler sizden json data göndermenizi isteyebiliyor, bu gibi durumda cURL ile post işleminde ufak birkaç eklemek yapmak gerekiyor. İlgili kod parçacağına aşağıdan bakabilirsiniz. Ayrıca post edilen yerde alma yöntemi de biraz farklı, onuda 2. kısımda bulabilirsiniz 🙂

$data = array("name" => "Tayfun", "age" => "24");                                                                    
$data_string = json_encode($data);                                                                                   
                                                                                                                     
$ch = curl_init('http://localhost/b.php');                                                                      
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");                                                                     
curl_setopt($ch, CURLOPT_POSTFIELDS, $data_string);                                                                  
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                                                                      
curl_setopt($ch, CURLOPT_HTTPHEADER, array(                                                                          
    'Content-Type: application/json',                                                                                
    'Content-Length: ' . strlen($data_string))                                                                       
);                                                                                                                   
                                                                                                                     
$result = curl_exec($ch);

echo $result;

isteği yaptığımız b.php’de ise json data’yı $_POST ile almaktan biraz daha farklı alıyoruz. Oda şöyle;

$posts = file_get_contents('php://input');
$jsonData = json_decode($posts, true);
print_r($jsonData);

Kolay gelsin 🙂

Konuyu görmek için tıklayın

CSS Flex ile Sticky Footer Yapmak

3 yorum

Bu dersimde son zamanlarda sıkça kullandığım css’in flex özelliğini kullanarak sticky (yapışkan) footer yapımını göstermek istiyorum. Temel anlamda aslında kodlarım şunlardan ibaret;

<body>
<div class="header">header</div>
<div class="content">content</div>
<div class="footer">footer</div>
</body>

<style>
body {
   height: 100%;
   display: flex;
   flex-direction: column;
}
.content {
   flex: 1;
}
</style>

Daha detaylı görmek isterseniz aşağıdaki örneği inceleyebilirsiniz;

See the Pen Sticky footer with CSS Flex – Erbilen.net by Tayfun Erbilen (@tayfunerbilen) on CodePen.

Konuyu görmek için tıklayın

CSS :nth-child() Örnekleri

8 yorum

Daha önce mutlaka :nth-child() filtresini kullanmışsınızdır css yazarken. Ancak bu filtrenin bazı güzel ipuçları var, işimize yarayacak. Bu yazıda size hızlıca bunları göstermek istiyorum. Önce basit bir html yapısı kuralım;

<ul>
  <li>kutu 1</li>
  <li>kutu 2</li>
  <li>kutu 3</li>
  <li>kutu 4</li>
  <li>kutu 5</li>
  <li>kutu 6</li>
  <li>kutu 7</li>
  <li>kutu 8</li>
  <li>kutu 9</li>
  <li>kutu 10</li>
</ul>

<style>
ul, li {
  list-style: none;
  margin: 0;
  padding: 0;
}
ul {
  overflow: hidden;
}
ul li {
  list-style: none;
  float: left;
  width: 100px;
  height: 100px;
  display: flex;
  text-align: center;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
}
</style>

Şimdi gelelim örneklerimize..

İlk 5’i seçmek (:nth-child(-n+5))

Burada 5 yerine kaç yazarsanız ilk o kadarı seçilecektir.

ul li:nth-child(-n+5) {
   background-color: yellow;
}

Son 5’i seçmek (:nth-child(n+6))

Burada dikkat etmeniz gereken son kaçı seçecekseniz her zaman bir fazlasını yazmanız.

ul li:nth-child(n+6) {
   background-color: yellow;
}

3 ile 8 aralığındakileri seçmek (:nth-child(n+3):nth-child(-n+8))

ul li:nth-child(n+3):nth-child(-n+8) {
   background-color: yellow;
}

3’er 3’er seçmek (:nth-child(3n))

Ayrıca odd ve even ile de kullanımı var. Her ikisini de aşağıda gösteriyorum.

ul li:nth-child(3n) {
   background-color: yellow;
}


Her 3’ü ama sadece çift olanlar olsun istersek. Yani her 3’ü seçecek ama çift olan 6. oluyor. Dolayısı ile 3. yü atlayacak 6’yı seçecek 9. yu atlayacak 12’yi seçecek.

ul li:nth-child(3n):nth-child(even) {
   background-color: yellow;
}


Tam tersinde ise tekleri seçecek. Yani 3’ü seçecek 6’yı atlayacak 9’u seçecek…

ul li:nth-child(3n):nth-child(odd) {
   background-color: yellow;
}

4. den başlayıp 3’er 3’er seçmek (:nth-child(3n+4))

Burada eğer 2. den başlayıp 4’er 4’er seçmesini isterseniz 4n+2 demeniz yeterli 🙂

ul li:nth-child(3n+4) {
   background-color: yellow;
}

Daha fazla örnek görmek isterseniz, şuraya bir gözatın: http://nthmaster.com/

Konuyu görmek için tıklayın

Iframe ve parent ilişkisi

3 yorum

Günün birinde iframe içerisindeki fonksiyona erişmeniz ya da iframe’den parent’a değer göndermeniz gerekirse bu videoyu hatırlayınız efendim 🙂 İyi seyirler.

Ek bilgi;
Eğer iframe’de parent’da oluşturduğunuz bir fonksiyonu çalıştırmak isterseniz. Örneğin test() fonksiyonunu parent’da oluşturduğunuzu varsayalım, iframe’de şu şekilde çağırabilirsiniz;

parent.test();
Konuyu görmek için tıklayın

PHP ile Sıfırdan Proje Oluşturmak

51 yorum

Bugün bir seriye başlamaya karar verdim. Aslında ilk bölümü çektiğimde bunun bir seri olmasını beklemiyordum ancak zaten eski PHP derslerim eskidiği için yenisini bunun ile çekebilirim.

İlk ders bir projenin altyapısı nasıl olmalı onunla ilgili. Yaklaşık 1 saatten uzun ve bir çok aksiliklerle dolu videoya aşağıdan ulaşabilirsiniz;

Güncelleme: .htaccess dosyanızda RewriteRule kuralının sonuna [QSA] ekleyin. Aksi taktirde $_GET parametrelerini çalıştıramazsınız. Örnek dosyalarda ben değişikliği yaptım, seviliyorsunuz.

Veritabanı sınıfı: https://github.com/tayfunerbilen/BasicDB
Permalink fonksiyonu: http://www.erbilen.net/php-sef-link-fonksiyonu
BasicDB Kullanımı: https://www.youtube.com/watch?v=RX7YxiMYzfA
Örnek dosyalar: https://yadi.sk/d/tt86xMDcxPYFc

Konuyu görmek için tıklayın

Tasarımlarda Standart Sistem Fontunu Kullanmak

1 yorum

Kodladığımız tasarımlarda farklı işletim sistemlerinde farklı font görüntüleri alıyoruz. Çünkü ne olursa olsun hepsinin kendine göre kriterleri var ve aynı sonucu göstermiyor. Ancak sistemlerin kendi standart fontları yeterince tutarlı öyle değil mi? O halde bootstrap 4’ün yaptığı gibi bizde hangi işletim sisteminden girildiyse o işletim sistemine ait standart fontu gösterebiliriz.

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

Bunu kullandıktan sonra farklı işletim sistemlerinden deneyerek sonuca ulaşabilirsiniz.

Konuyu görmek için tıklayın

Zincirleme (Chain) Metodu

3 yorum

Bir çoğunuz yazılmış sınıfları incelediğinizde şu şekilde bir yazım tarzıyla karşılaşmış olabilirsiniz.

$text = new Text();
echo $text->write('Tayfun Erbilen')->color('red')->fontSize('20px')->show();

Bu örneğe ait sınıfımızı oluşturalım hemen.

class Text {
	
	private $text;
	private $style;

	public function write($text)
	{
		$this->text = $text;
	}

	public function color($color)
	{
		$this->style .= 'color: ' . $color . ';';
	}

	public function fontSize($size)
	{
		$this->style .= 'font-size: ' . $size . ';';
	}

	public function show()
	{
		return '<div style="' . $this->style . '">' . $this->text . '</div>';
	}

}

Ancak bu örnek hata verecektir. Çünkü bu şekilde bir yazım tarzı için yapmanız gereken $this objenizi geriye döndürmek. Yani sınıfımızı şu şekilde düzenlersek eğer;

class Text {
	
	private $text;
	private $style;

	public function write($text)
	{
		$this->text = $text;
		return $this;
	}

	public function color($color)
	{
		$this->style .= 'color: ' . $color . ';';
		return $this;
	}

	public function fontSize($size)
	{
		$this->style .= 'font-size: ' . $size . ';';
		return $this;
	}

	public function show()
	{
		return '<div style="' . $this->style . '">' . $this->text . '</div>';
	}

}

Artık bu şekilde bir kullanımı yapmaya hazırız.

Chain (zincirleme) metodu aynı zamanda jQuery içinde aynı mantıkta çalışır. Muhtemelen her dil için bu mantıktadır. Örneğin jQuery’de bir örnek vermem gerekirse, basit bir eklenti hazırlayalım.

$.fn.Text = function(text){
  $(this).html(text);
};

$('body').Text('Tayfun Erbilen').css({
    'color': 'red',
    'font-size': '20px'
  });

Bu şekilde bir zincirleme kullanımda çalışmayacaktır. Çünkü bir this objesi döndürmedik eklentimizde geriye. Eğer geriye this’i döndürürsek geriye kalan jQuery metodlarını da zincirleme olarak kullanabilirsiniz. O halde buna göre düzelttiğimizde son kod parçamız şöyle olacak;

$.fn.Text = function(text){
  $(this).html(text);
  return this;
};

$('body').Text('Tayfun Erbilen').css({
    'color': 'red',
    'font-size': '20px'
  });
Konuyu görmek için tıklayın

JavaScript Object Length Kullanımı

yorum yok

Bir dizinin boyutunu öğrenmek için length özelliğini kullanabilirsiniz. Örneğin;

var arr= ['Tayfun', 'Murat'];

alert(arr.length); // Output: 2

Ancak bunu bir object için yapmak istediğimizde biraz daha farklı şekilde kullanıyoruz;

var obj = new Object();
obj['name'] = 'Tayfun';
obj['surname'] = 'Erbilen';

alert(Object.keys(obj).length); // Output: 2

Kaynak: http://stackoverflow.com/a/6700

Konuyu görmek için tıklayın

OS X El Capitan Sass Kurulum Hatası ve Çözümü

yorum yok

Yakın zamanda mac’de işletim sistemimi güncelledim.
Ancak daha sonra sass’ı kullanamaz oldum.
Kurulum yaparken ise şöyle bir hata alıyordum;

ERROR:  While executing gem ... (Errno::EPERM)
Operation not permitted - /usr/bin/sass

Daha sonra biraz araştırınca benim gibi bir çok kişi el capitan’da sorun yaşamış.
Şöyle bir issue‘ya denk geldim ve çözümünü burada buldum. Sorun yaşayanlar için çözüm;

sudo gem install sass

yerine

sudo gem install -n /usr/local/bin sass

şeklinde kurulum yapmak.

Sorun yaşanlar olursa diye blog’da bulundurmak istedim bu konuyu 🙂
Bol kodlamalı günler.

Konuyu görmek için tıklayın