Category Archives: Ders

Centos Sunucu üzerinde Apache, PHP, Mysql ve phpMyAdmin Kurulumu ve Cloudflare Ayarları

5 yorum

Merhaba arkadaşlar, ben sunucu için digitalocean’ı kullanıyorum. Bu yüzden videoda digitalocean’dan ilk olarak centos sunucu alarak başlıyorum. Daha sonra sunucuma ssh ile bağlanıyorum ve aşağıdaki adımlar ile gerekli pakelerimi kuruyorum…

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

PHP ile Hex Renk Kodunun Doğruluğunu Kontrol Etmek

7 yorum

Yakın zamanda hazırladığım filmzeo.com adlı projemde, kullanıcıların renkleri kendileri seçmesi için bir servis hazırladım. Dışarıdan hex değeri alıyor buna göre renklendiriyor. Ancak sadece hex kodu girmeleri gerekiyordu, örneğin “red” ya da renkle alakasız değerler girdiklerinde css’de sorunlara yol açıyordu. Bunun önüne geçmek için girilen renk değerinin hex olup olmadığını doğrulamam gerekiyordu. Ufak bir araştırma sonucunda ise aşağıdaki kodlar ile doğrulama işlemi yaptım. Birgün size de lazım olabilir diye paylaşıyorum.

$color = 'fa6582';
if (ctype_xdigit($color) && (strlen($color) == 6 || strlen($color) == 3)){
   echo 'geçerli hex renk kodu';
} else {
   echo 'geçersiz bir hex kodu';
}

kolay gelsin 🙂

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

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