Dosya Seçerken Filtreleme İşlemi Yapmak (accept)

Örneğin fotoğraf yükleteceğiniz bir alanda gözat butonuna bastığında bilgisayarda ki tüm dosyaların değilde sadece fotoğraf olan görsellerin listelenmesi her zaman yükleyen kişiye bir avantaj sağlar ve buda sitenizde olumlu feedback’ler demektir ???? Bu yüzden sitenizi kullanan kişileri fazla yormamak en sağlıklısıdır. Yani bir profil fotoğrafı yüklemek için binlerce dosyanın içerisinde küçücük bir imaj dosyasını aratmaktansa sadece imaj dosyalarını göstermek çok daha mantıklıdır öyle değil mi?

İşte bunu html‘de bulunan accept niteliği ile yapabiliyoruz.

Alabileceği değerler

  • audio/* —— Tüm ses dosyaları
  • video/* —— Tüm video dosyaları
  • image/* —— Tüm resim dosyaları
  • Mime Tipleri —— Gözatmak için tıklayın!


Kullanımı

<input type="file" accept="image/*" />
ya da 
<input type="file" accept="text/html, image/png" />

PHP’de Sınıf Metodlarını Öğrenmek (get_class_methods)

get_class_methods() fonksiyonu ile bir sınıfa ait tüm public metodları görüntüleyebiliriz.
Ancak private ya da protected olanları listelememektedir.

Örnek kullanımı;

<?php

	class test {

		public function __construct(){}
		protected function setName(){}
		private function getName(){}
		public function erbilen(){}

	}

	$methods = get_class_methods('test');
	print_r($methods);

?>


Ya da örneğin PDO sınıfının public metodlarına bir göz atalım;

<?php
$methods = get_class_methods('PDO');
print_r($methods);
?>

Font Awesome ve Diğer İkon Fontları

Font Awesome için, ikon fontları arasında en çok kullanılanı diyebiliriz. Bootstrap‘ta bir süre font awesome kullanarak bu popüleriteyi arttırdı sanıyorum. Ancak şuanda kullandıkları (yanılmıyorsam) sadece Glyphicons. Bu yazımda bunlardan da bahsedeceğim sizlere.

İkon Fontları Nedir?

Özel olarak font kullanmak istediğimizde bildiğiniz gibi @font-faceyöntemini kullanıyoruz. Bu arkadaşlarda ikonları bir font haline getirmiş ve bize font şeklinde ikonları kullanma imkanı sunuyorlar. Oldukça kullanışlı değil mi?

Font Awesome

Yazı başında da söylediğim gibi, bana kalırsa en yaygın kullanılan ikon fontlarından bir tanesi. Github üzerinden yayınlanan, ücretsiz bir ikon font servisi.

Nasıl Kullanılır?

İlk olarak aşağıdaki bağlantıdan dosyalarını indirin;
http://fortawesome.github.io/Font-Awesome/assets/font-awesome.zip

Eğer Sass ya da Less kullanıyorsanız gerekli dosyalar sass ve less klasörlerinde. Biz normal olanı kullanacağımız için css ve font klasörlerini almamız yeterli. Daha sonra index sayfamızda çağırmamız gerekenler şöyle;

<!-- gerekli dosyalar -->
<link rel="stylesheet" href="css/font-awesome.min.css" />
<!-- ie7 fix -->
<link rel="stylesheet" href="css/font-awesome-ie7.min.css" />

Eğer IE7 sizin için önemli değilse, sadece ilk css dosyasını çağırmanız yeterli olacaktır.

Buradan sonra yapmanız gereken ikonları seçip kullanmak.. İkonların tamamına aşağıdaki bağlantıdan ulaşabilirsiniz;
http://fortawesome.github.io/Font-Awesome/icons/

Örneğin popüler ikonlardan windows ikonunu kullanalım;

<i class="icon-windows"></i>

İşte kullanımı bu kadar basit ???? İsterseniz başka bir nesne ilede kullanabilirsiniz, örneğin span gibi. Tercih size kalmış, önemli olan sınıf ismini doğru yazmanız.

Animasyonlu İkonlar: Eğer ikonlara animasyon katmak isterseniz 2. bir sınıf olarak “icon-spin” atamanız gerekir.. Yani;

<i class="icon-windows icon-spin"></i>

İkon’a border eklemek: Yuvarlak şekilde düzgün gözükmesi için önceden tanımlı şu sınıfı verebilirsiniz; “icon-border“.. Yani;

<i class="icon-off icon-border"></i>

İkon Boyutları: İkon boyutlarını font-size ile belirleyebileceğiniz gibi, font awesome’ın önceden tanımlı şu sınıflarını da kullanabilirsiniz;
– icon-large
– icon-2x
– icon-3x
– icon-4x

Örnek bir kullanım;

<i class="icon-camera-retro icon-4x"></i>

Diğer İkon Font Siteleri;

Font Awesome hariç birkaç tane daha popüler ikon font sitesi bulunuyor.. Bunlarında çalışma mantığı birbiriyle aynı, kullanımıda aynı şekilde, biraz incelerseniz eminim anlayacaksınızdır;

CSS ile Çevirme (Flip) Animasyonu Yapalım

Fare ile üzerine geldiğimizde yatay ya da dikey olarak çevrilen ve ön arka yüzleri olan animasyonları nasıl yapacağımızı bu derste öğreneceğiz. Yararlı olması dileğiyle..

İlk olarak html yapımızı oluşturalım;

<div class="flipper">
    <div class="flip-content">
    
        <!-- ön yüzü -->
        <div class="front">
          ön yüzü :)
        </div>
    
        <!-- arka yüzü -->
        <div class="back">
          arka yüzü :(
        </div>
    
    </div>
</div>

İlk olarak nesnelerimize genişlik ve yükseklik verelim;

.flip-content, .front, .back {
     width: 300px;
     height: 300px
}

Şimdi ise dönüş hızını ayarlayalım;

.flip-content {
    transition: 0.6s;
    transform-style: preserve-3d;
    position: relative
}

ön ve arka yüze position değerleri verelim, daha sonra dönüş esnasında arka yüzü gizleyelim;

.front, .back {
     position: absolute;
     top: 0;
     left: 0;
     backface-visibility: hidden;
     background-color: #eee
}

Ön yüzün önde durması için z-index değerini artıralım;

.front {
     z-index: 1
}

arka yüzü y ekseninde 180 derece döndürelim;

.back {
     transform: rotateY(180deg)
}

Ve şimdi nesnenin üzerine geldiğimizde ön yüzü gizleyip arka yüzü ön plana çıkartalım;

.flipper:hover .flip-content {
     transform: rotateY(180deg)
}

Son olarak daha iyi bir dönüş için perspektifini ayarlayalım;

.flipper {
    perspective: 1000px
}

İşte bu kadar ???? Demoya göz atabilir, kaynak dosyaları indirip inceleyebilirsiniz.Not: Tarayıcı uyumluluğu için prefixleri eklemeyi unutmayın. Tek tek uğraşmak yerine prefixfree eklentisini kullanabilirsiniz;
https://leaverou.github.io/prefixfree/

Dikey Çevirme

Eğer yatay değilde dikey olarak çevirmek isterseniz aşağıda şekilde değiştirmeniz yeterli;

.back {
    transform: rotateX(180deg)
}
.flipper:hover .flip-content {
    transform: rotateX(-180deg)
}

Eksi değerini kaldırırsanız tam tersi dikey çevirme olacaktır.

Denetim Yapıları için Alternatif Sözdizimi

Tipik olarak kullandığımız söz dizimi dışında birde alternatif bulunmaktadır. Normal şartlarda şöyle yazdığımız bir kodu;

if ( $a == 5 ){
// kodlar
}

Şu şekilde de yazabiliriz;

if ( $a == 5 ):
// kodlar
endif;

Ayrıca elseif kullanmak istersek şöyle yapıyoruz;

if ( $a == 5 ):
// kodlar
elseif ( $a == 6 ):
// kodlar
else:
// kodlar
endif;

Elbette bu alternatif sözdizimi (syntax) sadece if için geçerli değil. Aynı zamanda while, for, foreach, switch içinde geçerli. Bu yapı için hepsinin kullanımı standarttır. Örnek vermek gerekirse;

for ( $i = 1; $i <= 10; $i++ ):
// kodlar
endfor;

foreach ( $arr as $arg ):
// kodlar
endforeach;

while ( $i < 10 ):
// kodlar
endwhile;

Switch ( $par ):
// kodlar
endswitch;

Özellikle wordpress ile uğraşan arkadaşların dikkatini çekmiştir bu şekilde yazım.. Ancak aklınıza bu yazım diğerinden daha iyi gibi bir düşünce gelmesin, çünkü bunun böyle olmadığını php.net kendi sitesinde belirtiyor. Alternatif denmesinin bir sebebi var ????

PHP ile Dinamik Form İşlemleri (Bölüm 3 / 3)

Dinamik form işlemlerinin son bölümünde bir hatamızı düzelttikten sonra birkaç kişinin isteği üzerine verot.net’deki upload sınıfını kullanarak yükleme işlemini gerçekleştirdik.. Pekiştirmek içinde ders sonunda bir slider yönetimi hazırladık.. Yararlı olması dileğiyle..

Önceki dersler;
http://www.erbilen.net/php-dinamik-form-bolum-1
http://www.erbilen.net/php-dinamik-form-bolum-2

İndir
http://yadi.sk/d/h0mED2yMAUo4X

PHP ile Dinamik Form İşlemleri (Bölüm 2 / 3)

Bir önceki dersimde dinamik form işlemlerini görmeye başlamıştık.. Bu bölümde textarea, select ve multi select özelliklerinin kullanımını göreceğiz. Yararlı olması dileğiyle.

Not: Ses ile ilgili bazı sorunlar olabillir. Örneğin ses kısık olabilir, sadece sağ ya da sol kulaktan geliyor olabilir. Ya da hiçbir sorun yoktur, sizin bilgisayarınızı camdan atmanız gerekir.