jQuery ile eklenti yazma

Merhaba arkadaşlar uzun süreden beri kafama takılıyordu bazen sıkıntıda çıkarıyordu yazdığım javascript yada jQuery kodlarını eklenti haline getirmeyi planlıyordum yazdığım kodu kullanmak sıkıntı çıkarıyordu bende oturdum karar verdim hepsini eklenti haline getiricem dedim bunu yaparkende blog'da jQuery ile nasıl eklenti yazılır diye kısa bir özet geçeyim dedim.

Öncelikle yazdığımız yada önce yazılan eklentiler bizi kat kat hızlandırır ilk başta hemen tüm ihtimalleri düşünmek yazmak sıkıcı yada zor gelebilir ama 1 kere yaptıktan sonra gerisi kolay.

Öncelikle eklenti adımızı belirleyelim mesela degistir adında bir eklenti yapalım ve kullanıcı istediği nesneye ister renk ister genişliğini değiştirebilsin.

Hemen başlıyoruz.

$.fn.degistir = function(){

 return $(this).each(function(index, element) {

       //Eklenti ile ilgili kodlar burada yazılır

    });

}

Bu yazdığımız kalıp sabittir $.fn.degistir kırmızı ile yazan 'degistir' kısmı eklentimizin adıdır.
Mesela bir div olsun ve div seçildiğinde rengini değiştirelim.

<div id="kare"></div>

Ardından bu divde fonksiyonumuzu çalıştıralım.

$.fn.degistir = function(settings){
     
var varsayilan = {
     gorev : "renk",
     renk : "#000",
     genislik : "100px",
     zaman : 1000
 }
 
$.extend(varsayilan,settings);
 
return $(this).each(function(index, element) {
if(varsayilan.gorev == "renk") //Eger gorev renk ıse css ıle renk degıstır
{
     $(this).hide().css("background-color",varsayilan.renk).fadeIn();
}
    else //Degılse genıslık degıstır dıyoruz
{
    $(this).animate({"width":varsayilan.genislik},varsayilan.zaman);
}
});
}

$("#kare").degistir();

Şimdi div'imize eklentimizi uyguladık ama eklediğimiz 2 3 satır kod ne işe yarıcak ?
onlar bazı parametreleri kullanıcılardan almamızı sağlar mesela rengi, genişliği yada animasyonun yapılacagı sureyı ayarlamayı kullanıcıya bıraktık kullanıcı ellemez ise varsayılan deger olarak bizim yazdıgımız devreye giricek.

Not: Kod kısmında koyu renkte yazılan yerler birbirleriyle bağlantılıdır.

Fonksiyonumuzdan parametre yollamak için ise

$("#kare").degistir({gorev:"renk",renk:"#CCC"});

Şeklinde kullanabiliriz.
Demo Halini görmek için tıklayın.

jQuery animation kullanımı

Geçen yazıda jQuery ile .css() nasıl kullanılır, ne işe yarar, nerelerde kullanılır gibi yerlere değinmiştik birde örnek olarak div'imizin genişliğini ve rengini değiştirmiştik ama gel gelelim bana tabiri caizse çok odunumsu geldi bastığımız an pat diye rengi değişiyor, büyüyor yada küçülüyor.

Bunlara daha estetik bir görüntü sağlamak için, animasyonla büyüyüp küçülmesi yada renginin değişmesi için .animation() fonksiyonu kullanılır.

Hemen geçen seferki örnek üstünden devam edelim herhangi birşey değiştirmeyelim.

Html kodlarımız:

<a href="#" id="tik">Tıkla</a>

<div id="kare"></div>

jQuery kodlarımız.

<script>

    $(document).ready(function(){

  $("#tik").click(function(){

   $("#kare").animate({

    "background-color":"#000"

    },1000)

   return false;

  });

    });

</script>

şimdi jQuery kodlarımızı açıklayalım hemen, id'si tik olana tıklandığında id'si kare olanın arkaplan rengi siyah olarak değişecek.
Ee sadece tek bir özellik mi verebiliriz ? tabiki hayır aynı anda 5 10 tane özellik değiştirmek için virgül koyup istediğimiz özellik yazılır örnek vermek gerekirse.

$("#kare").animate({

 "background-color":"#000",

 "width":"200px",

 "margin-left":"50px"

},1000);

bunları öğrendik, hoş güzel ama sondaki 1000 sayısı neyi ifade ediyo ? oda animasyonumuzun ne kadar süreceğini söylüyor bize 1000 demek 1 saniye manasına geliyor ordaki değeri düşürerek yada arttırarak animasyon hızını uygun şekilde ayarlayabiliriz.

Demoyu Görmek için tıklayın.

Tabi bu fonksiyon kullanımı bu kadar mı ? tabiki hayır ama ben basit olarak anlattım, detaylarını sonraki yazılarımızda yazıcam selametle.

jQuery ile css değiştirme

Merhaba arkadaşlar bugün html nesnelerimize jquery css'lere müdahele etmeyi göstericem jquery'nin bu özelliği sayesinde direkt olarak nesnelerimizin css özelliklerini değiştirebiliriz.

Mesela bir div'imiz olsun bu div'imizin özelliklerini biz sonradan değiştirelim, Peki nasıl değiştiricez ?

jQuery bunun için bize basit bir fonksiyon hazırlamış ".css()" bu fonksiyon sayesinde istediğimiz nesnenin css özelliğini değiştirebiliriz.

Mesela

<style>
    width:100px;
    height:100px;
    background-color:#CCC;
</style>


<a href="#" id="tik">Tikla</a>

<div id="kare"></kare>

dedik ve standart bir div oluşturduk. Şimdi bu div'in özelliklerini jquery fonksiyonumuz ile değiştirelim.

<script>
    $(document).ready(function(){
		$("#tik").click(function(){
			$("#kare").css({
				"width":"200px",
				"height":"500px",
				"background-color":"#000"
				});
			})	
			
    });
</script>

Dedik ve linke tıklandığı an divimizin css özellikleri değişecektir.
Demo olarak incelemek için tıklayınız.

Peki bu özellik sadece buna mı yarar ? Tabiki hayır.
Ben belki o nesnenin istediğim css değerini öğrenmek istiyorum ve ona göre işlem yapmak istiyorum, bu fonksiyon sayesinde buda mümkün kullanımında ise hiçbir değişiklik yok sadece değer girmiyoruz aynen devam.

$("#tik").click(function(){
     var deger = $("#kare").css("width");
     alert(deger);			
})

dersek bize seçtiğimiz nesnenin css'te tanımlı genişlik değerini verecektir.
Bununda demosuna buradan ulaşabilirsiniz.

jQuery append ile appenTo Arasındaki farklar ve kullanımları

Merhaba arkadaşlar jQuery'e yeni başladığım sıralar kafama hep takılırdı append ile appendTo arasındaki farklar. Ne kadar çözmeye çalışsamda  bir türlü çözemedim taki canıma tak edene kadar.

Şimdi arkadaşlar append kullanımının kısaca türkçesi belirtilen nesneye içine yazılan yazıyı eklemek, appenTo ise belirtilen yazıyı belirtilen yere ekle manasında kullanılır.

Kısaca kodlarla açıklamak gerekirse


append:

$("head").append("<script src="jquery.js"></script>");

Append kullanmış olduk bu şekilde, peki ne oldu ? ne dedik ?
head tagları arasına <script src="jquery.js"></script> yazısını ekle dedik.

Peki appendTo ile nasıl yapıcaktık bunu ?

$("<script src="jquery.js"></script>").appendTo("head");

olarak kullanıcaktık.
Peki burda ne dedik ? <script src="jquery.js"></script> yazısını head taglarına ekle dedik.

Soru ve görüşlerinizi yorumlarda belirtirseniz memnun kalırım.

Php Session Kullanımı

Herkeze selam

Bugun php'de sessionlar nasıl kullanılır bunları göstericem.
Session çoğunlukla oturumlarda kullanılır, kullanıcı oturumu başlattığında tanımlanır ve tarayıcı kapatana kadar kayıtlı kalır.

Peki bunun cookie ile farkı nedir ? Cookie tarayıcı kapansa bile süresi bitmemiş ise hala devam eder fakat session tarayıcı kapandımı kendini siler.

Kullanımına gelelim şimdi.
Kullanımı oldukça basittir.

Sayfanın en üstüne

session_start();

yazmalıyız. Hemen ardından session tanımlayabiliriz.
Tanımlamak için ise

$_SESSION["session_adi"] = $deger;

Şeklinde kullanılır. Bu kadar kolaydır.
Herhangi bir yerde kullanmak için ise

echo $_SESSION["session_adi"];

Şeklinde istediğimiz yerde istediğimiz sayfada çağırabiliriz.

Peki silmek için illa tarayıcıyı mı kapatmak lazım ? Hayır.
Silme kodu ise

session_destroy();

yazarak tarayıcımızdan kökten silebiliriz.

Php ile cookie kullanımı

Selam arkadaşlar şimdi bu cookie nedir ? cookie'yi kısaca açıklamak gerekirse facebooka giriş yaparken 'Beni Hatırla' kutucugunu işaretledik mi sistem arkaplanda bir cookie oluşturur bunları bilgisayarınızda bir yere kayıt eder ve tekrar girişte sizden şifre sormaz.

Peki bu kaydediyo bize parolada sormuyor ama ne kaydediyor ?
cookie'nin içine sizin bilgilerinizi parolanızı mail adresinizi falan kaydediyor ordan otomatik çekiyor.

Peki bu cookie orada sonsuza kadar kalır mı ? Kalmaz, cookieler programcının belirlidiği süre kadar yada siz bilgisayarınızdan silene kadar kalır.

Şimdi gelelim kullanımına, kullanımı ve oluşturması basittir.
Oluşturmak için setcookie() fonksiyonunu kullanırız.

Kullanımı:

setcookie("cookie_adi","Değeri",time()+60*60);

Diyerek cookie'mizi oluşturduk. Şimdi açıklamasına gelirsek cookie_adi yazdığım yere cookie vereceğimiz isim, başka sayfalarda hangi isimle çağırmak istiyorsak onu yazıcaz.
Değeri kısmına ise cookie'nin alacağı degeri yazarız.
time kısmında ise cookie'nin ne kadar kalacağını belirtiriz, şuan biz 1 saatlik bir cookie tanımladık bunu nasıl ayarlıcaz oturup hesaplıcaz mı derseniz tabiki hayır pratik yollarını aşşağıda belirticem.

30 Dakika = 60*30
1 Saat = 60*60
2 Saat = 60*60*2
5 Saat 60*60*5
1 Gün = 60*60*24
1 Ay = 60*60*24*30
2 Ay = 60*60*24*30*2

Süre mantığını kavramışsınızdır umarım. Saatten sonra gün ardından ay ve kaç ay kalcağını söylüyoruz.

Tamam şimdi cookie tanımladık nasıl silicez ?
Silmek tanımlamaktan daha kolaydır.

setcookie("cookie_adi","Değeri",time()-1);

yaparsak cookie silinmiş olur yani zaman kısmına negatif değer vermemiz yeterlidir.

Peki istediğimiz yerde nasıl kullanıcaz bunu ?

echo $_COOKIE["cookie_adi"];

yazdık mı istediğimiz yerde, istediğimiz zaman değerini alıp kullanabiliriz.

Php ile dizi kullanımları

Merhaba bugun php'de dizilerden bahsedeceğiz.

Diziyi kısaca tanımlamak gerekirse önceden tanımlanmış değişkene birden çok sıralı olarak değer atama istendiğinde ise atanan değerleri kullanabilmemizi sağlar.

Diziler tek boyutlu ve çok boyutlu olarak ayrılırlar, standart bir kullanıcı tek boyutlu kullanır.

Tek boyutlu ile çok boyutlu diziler arasındaki fark tek boyutlu dizi 1 tane dizi iken çok boyutlu dizi ise 1 dizinin içinde 2. bir dizi hatta bu 2. dizinin içinde 3. dizi olmasıdır tabi bu sayı ihtiyaçlara göre arttırılabilir.

Kullanımına gelecek olursak php de dizi tanımlamak 2 şekildedir.

1. Yöntem

$dizi = array("elma","armut","karpuz","kavun",1,2,3);

2. Yöntem

$dizi = ["elma","armut","karpuz","kavun",1,2,3];

dizileri direkt olarak echo komutuyla listeletemeyiz tamamını tek bir seferde listeletmek için print_r(); kullanılır.

print_r($dizi);



Çıktısı


Array
(
    [0] => elma
    [1] => armut
    [2] => karpuz
    [3] => kavun
    [4] => 1
    [5] => 2
    [6] => 3

)

olacaktır.

Ekrana "karpuz" yazısını yazdırmak için

echo $dizi[2];

Yani bize vermiş oldugu anahtar yani sıralamadaki sayıyı yazarak erişebiliriz.

Çok boyutlu diziler:

Bu dizilerin kullanımı şu şekildedir.

$dizi = array("meyveler",array("elma","armut"),array("pazartesi","salı","çarşamba"));

Şeklinde tanımlanır. Burada biz bir tane array ile dizi tanımladık ardından içine eleman atamak yerine tekrar array kullanarak dizi tanımladık şuan yaptıgımız 2 boyutlu bir dizi 1 dizi içerisinde birer tane daha dizi tanımladık.

Kullanımı ise

pazartesi yazısına ulaşmak için.
echo $dizi[2][0];

Şeklinde erişebiliriz.

Şimdi biz ne yaptık ?

pazartesi yazısı bizim ilk dizimizin 2. indisinde bulunan dizinin 0. indisinde bulunuyordu o yuzden önce 1. dizimizdeki elemanı bulduk yani 2. indisimizi ardından 2. indiste bulunan dizinin 0. indisine yani pazartesi yazısını ekrana bastırdık.

jQuery Add Class - Remove Class Kullanımı

Merhaba arkadaşlar bugün jQuery'de sık sık kullanabilceniz 2 tane fonksiyondan bahsedicem.

• addClass
• removeClass

Şimdi belki diceksiniz bunlar benim ne işime yarıcak ? kısaca şöyle açıklıyım, sayfayı hiç post etmeden direkt olarak tarayıcı üstünden nesnenize class eklemenize olanak sağlayacak böylelikle aktif olarak sayfanızda nesnelerinize css ile yapabilceğiniz herşeyi ekleyebilirsiniz.

Kullanımına gelirsek öncelikle addClass'tan başlayalım.

addClass:

<div id="baslik">ekipcalismasi.blogspot.com</div>

Css kodlarını ise şu şekilde yapalım

div
{
    background-color:#DDD;
}

standart bir div oluşturduk arkaplan rengini gri yaptık şimdi jquery ile değiştirelim bunları
bir tane buton koyalım butona tıklandımı css ile başka değişiklikler yapalım.

Öncelikle css tanımlayalım

<style type="text/css">
.kirmizi
{
 background-color:#F00;
 width:100px;
 height:100px;
}
</style>

kirmizi diye class tanımladık tıkladımı classımız eklencek arkaplan kırmızı olcak ve yükseklik genişlik değişecek.

Şimdide jquery kodlarımızı ekleyelim

<script type="text/javascript">

$(document).ready(function(e) {
    $("#css").click(function(e){
  $("#baslik").addClass("kirmizi");
  });
});

</script>

Kodumuzda dedik ki id'si css olan butona tıklandıgında id'si başlık olan nesneye kirmizi classını ekle.

Aşşağıdaki demodan inceleyebilirsiniz uygulamamızı

Demo

removeClass:

removeClass ise eklediğimiz herhangi bir classı silmemize yarayan jquery kodudur.

Kullanımı ise basittir.

<script type="text/javascript">

$(document).ready(function(e) {
    $("#css").click(function(e){
  $("#baslik").removeClass("kirmizi");
  });
});

burada ise üstte eklediğimiz classı sildik. Sorularınızı ve görüşlerinizi yorum olarak bildirirseniz memnun kalırız.

HTML5 color girişi kullanımı

Merhaba, size html5 ile color inputunu anlatmaya çalışıcam.

Standart bir inputumuz <input type="text" value="" > şeklinde tanımlanıyor bildiğiniz gibi bir text girişi bu. Color ise kullanımı gayet basit type="text" yerine color yazıcaz yani <input type="color" value="" > şeklinde kullanıcaz.
Kaydettiğimizde karşımıza şu şekil gelecektir.



Siyah kutucuğa tıkladıgımız da ise;

Karşımıza böyle bir ekran gelecektir, buradan istediğimiz rengi seçebiliriz.

Gelelim bunu aktif olarak kullanmaya. Bunu kullanabilmek için biraz javascript bilmemiz lazım

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<script>

$(document).ready(function(e) {

    $("#renk").change(function(){

  

  var renk = $(this).val(); //secilen rengı aldık degıskene atadık

  

  $("#kutu").css({ //Ardından id'si kutu olan div'in css ile background rengını degıstırdık

   "background-color":renk

   });

  });

});

</script>

<input type="color" id="renk" />

<div id="kutu"></div>

Demosunu buradan görebilirsiniz

DEMO

jQuery Göster - Gizle Uygulaması

jQuery web uygulamalarında işimizi kolaylaştıran, çok  kısa kodlar ile bir çok işlem yapmamızı sağlayan bir kütüphanedir.

Bugün bu kütüphanede standart bir div'i gösterip - gizlemesini anlatıcam.

Öncelikle jquery kütüphanesini sitemize ekliyoruz

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

Ardından  divi oluşturuyoruz.

<div id="kutu" style="width:100px;height:100px;background-color:#000;"></div>

Div şuan gözüküyor biz bunu gizlemek için bir link tanımlıcaz ve o linke tıklanınca div kaybolcak kaybolması için ise fadeToggle fonksiyonunu kullanıcaz.

<script>

 $(document).ready(function(e) {

        $("#kapat").click(function(){

   $("#kutu").fadeToggle(500);

   });

    });

</script>

Burda id'si kapat olan linke tıklandığında sitedeki id'si kutu olan divler görünür durumda ise kapanıcak, görünmez ise açılıcaktır.


DEMO

Göster Gizle

Php Xss Açığı Kapatma - Özel karakterleri kırpmak

Php çok esnek bir dildir, sitemize giren kullanıcılar her zaman iyi niyetli olmayabilir.

Bu açık çoğunlukla input kısımlarında görülür yada url'den $_GET metodu ile aldığımız değerler ile saldırı yapılabilabilir. Bu saldırıları engellemek için php'nin bazı fonksiyonlarından faydalanabiliriz.

1. htmlspecialchars
2. strips_tags

htmlspecialchars:

Bu fonksiyon bizim html'de kullandığımız özel karakterleri şifrelemizi sağlar

Mesela: "<" işaretini bize &lt; olarak döndürür bu sayede kullanıcı formlarınızda yada benzer yerlerde özel html kodlarını kullanamaz.

Kullanımı:

$deger = $_POST["value"];

echo htmlspecialchars($deger);


Şeklinde kullanılabilir.

strips_tags:

Bu fonksiyon ise tüm html kodlarını kırpar. Formlarda kullanıcının html kodlarınıkullanmasını engeller.

Kullanımı:

$deger = $_POST["value"];

echo strips_tags($deger);

dersek $deger içindeki tüm html kodlarını kırpar.