DataTables ile PHP Modal Editör Kullanım Örneği

Veri ızgaraları ya da data grid’ler veritabanı tablolarının listelenmesi, filtrelenmesi ve düzenlenmesi amacıyla programlamayı oldukça kolaylaştıran web nesneleridir. Örneğin bir grid ile ürünleri listeletebilir, istediğiniz ürünleri filtreleyebilir ya da sıralayabilirsiniz. Emin Kadığlu dostumun katkıları ile paylaştığım aşağıdakiörnek uygulaması, bu özelliklerin yanında modal form aracılığı ile canlı düzenlemeyi de desteklemesi açısından güzel bir örnek oldu. Ayrıca, bu örnek Bootstrap kullandığından kolayca farklı temalara da uyarlanabilir.

Örnek uygulama çatı olarak datatables ve jquery kütüphanelerini kullanıyor. Datatables listeleme ve filtreleme özelliklerini kullanabilmek için bir PHP betiği sağlıyor fakat modal form ile canlı düzenleme için Datatables Editor eklentisinin satın alınmasını gerektiriyor. Emin dostumun kendi yazdığı editör kısmı da bu anlamda temel ihtiyaçları giderecek özellikte. Aşağıda uygulamanın ekran görüntüsünü ve kodlarını paylaşıyorum. Umarım faydalı olur.

Nesne yönelimli JavaScript öğreniyoruz

Javascript’te object oriented nedir ne değildir iyice öğrenmek isterseniz, Douglas Crawford’un 4 serilik eğitim videosunu yahoo’da izlemenizi tavsiye ederim. Onu mutlaka izleyin, izletin. Object oriented javascript çok güçlü bir dildir, inanamayacaksınız.

Part 1 – http://video.yahoo.com/watch/111593
Part 2 – http://video.yahoo.com/watch/111594/1710553
Part 3 – http://video.yahoo.com/watch/111595/1710607
Part 4 – http://video.yahoo.com/watch/111596/1710658

Insan doğrulama için değişik bir yöntem

CAPTCHA insan doğrulama için ençok kullanılan yöntem. CAPTCHA resimli yöntemde (bu sene OSYM sonuçları açıklamak için de kullandı) eğri büğrü (robotik bir yazılımın okuyabilmesi çok güçtür) harfleden oluşan bir kelimeyi kutuya girmemizi istiyor. Kodu doğru olarak okumayı başarır ve gönderirseniz karşı taraftaki yazılım isteği yapanın bir program değil de gerçek bir bir insan olduğuna karar veriyor. Aksi takdirde ilgili servisi kullanmanıza izin vermiyor. Web in kirlenmesi ve haksız web servisi kullanmanın önüne geçmek adına, robot yazılımların kolaylıkla çözemeyeceği bu resim kodları kullanmak son zamanlarda çok işe yarıyor.

Resim kodu kullanmanın yanında daha basit ilginç bir çözüm ise tarayıcı tarafında javascript kullanarak insan etkileşimi teyit etmek. Örnek vermek gerekirse bir insan formu dolduruken kutuların içine tuş basımı gerçekleştirir (onkeydown-onkeyup) veya formu gönderirken submit düğmesinin tıklama (onmousedown-onmouseup-onmousemove) olayını tetikler. Ancak robotik bir yazılım bunların hiçbirini yapmayacağından fark kolaylıkla tespit edilebilir. Javascript ile onKeyDown ve onMouseMove olayları yardımıyla forma verisine bir onay kodu eklenebilir.

Kaynak: http://www.0x000000.com/?i=224

Google javascript ‘i dikkate alıyor

Burada söylendiğine göre;

“/human”+Math.round(99999*Math.random())+”.png”

gibi bir javascript kodu ile dosya ismi olusturulan bir sayfa var diyelim. Bilinenin aksine arama motorları bu sayfadaki javascript’i görmezden gelmiyor (1).  Web sunucusunun kayıtlarından google bot’unun javascript kodu bulunan sayfayı taradıktan sonra aşağıdaki gibi bir istekte bulunduğu görülüyor. Bir ölçüde de olsa javascript içeriğinin taranması güzel bir durum.

66.249.66.73 crawl-66-249-66-73.googlebot.com – -[29/Jul/2007:15:54:11 +0100]
GET /human HTTP/1.1 404 211

[1] Googlebot’unun javascript içeriği de bir ölçüde de olsa taradığını görmüş olmak güzel. [1] – Burada ve burada da geçtiği üzere javascript arama motorları tarafından tanınmayan bir öğe olarak bildirilmiş. Ayrıca javascipt li içerik varsa <noscript> tag’i ile tekrar sunulması tavsiye edilmiş.

uncaught exception: XMLHttpRequest.open methodunun çağrılması için gerekli izniniz yok.

Gece vakti aşırı korumacı bir tarayıcıyla başım dertte. Firefox yerel bir dosyadaki XMLHttpRequest kodu ile uzak bir siteden veri çekeceğinde bu hatayı verdi. Aslında uyarı demek daha doğru olacak. Bununla karşılaşana kadar Internet Explorer 6 da böyle bir durumun varlığından bile haberim yoktu. İşin aslı burada yazdığına göre yüce tarayıcı Firefox’un bir güvenlik özelliği. Kısaca Firefox çapraz-alan adı (cross-domain) sorgulamalarına izin vermiyor. Yani isteyensiten.com alan adından baskabirsite.com adresindeki bir veri kaynağından AJAX ile XML olarak veri istemek pek mümkün değil. Denerseniz şöyle bir hata mesajı alıyorsunuz, benden söylemesi ;)

Error: uncaught exception: 
Permission denied to call method XMLHttpRequest.open

Gece vakti aşırı korumacı bir tarayıcıyla başım dertte. Firefox yerel bir dosyadaki XMLHttpRequest kodu ile uzak bir siteden veri çekeceğinde bu hatayı verdi. Aslında uyarı demek daha doğru olacak. Bununla karşılaşana kadar Internet Explorer 6 da böyle bir durumun varlığından bile haberim yoktu. İşin aslı burada yazdığına göre yüce tarayıcı Firefox’un bir güvenlik özelliği. Kısaca Firefox çapraz-alan adı (cross-domain) sorgulamalarına izin vermiyor. Yani isteyensiten.com alan adından baskabirsite.com adresindeki bir veri kaynağından AJAX ile XML olarak veri istemek pek mümkün değil. Denerseniz şöyle bir hata mesajı alıyorsunuz, benden söylemesi ;)

Error: uncaught exception: Permission denied to call method XMLHttpRequest.open

Continue reading “uncaught exception: XMLHttpRequest.open methodunun çağrılması için gerekli izniniz yok.”

Extract URLs in text data with Javascript

Daha önce sitede duyurduğum bağlantı (link) arşivi projesi için hazırladığım kullanışlı javascript programcığı. readClipboardData(), parseURL() ve pasteFromClipboard() fonksiyonlarından oluşan programcık panodaki metin verisi içerisinde yer alan URL’leri tespit edip ayıklıyor ve tamamını string olarak geri döndürüyor. Ana fonksiyon olan pasteFromClipboard() ilkönce panodaki  metin verisini readClipboardData() fonksiyonu yardımıyla okuyor (IE ve FF farketmiyor) ardından parseURL() içindeki regex (Regular Expression) cümlesi yardımıyla özyinelemeli (Recursive) olarak teker teker elde ettikten sonra string olarak ana fonksiyona aktarıyor.  pasteFromClipboard() fonksiyonu ise son olarak URL’ler arasına newline (\n) yerleştirerek string formunda tekrar geri döndürüyor. Kodları buradan test edip indirebilirsiniz.

Read Clipboard & Set Clipboard

Javascript ile panoya metin kopyalamak ve panodaki metni almak için kullanılabilecek fonksiyonlar. Internet Explorer (IE) ve Firefox (FF) web tarayıcılarını da destekliyor.

Javascript ile panoya metin kopyalamak ve panodaki metni almak için kullanılabilecek fonksiyonlar. Internet Explorer (IE) ve Firefox (FF) web tarayıcılarını da destekliyor.
Continue reading “Read Clipboard & Set Clipboard”

Javascript ile port tarama

“Myspace.com gibi sosyal bir siteyi ziyaret ederken veya yahoo webmail ile e-postalarınızı kontrol ettiğinizi hayal edin. Siz web sayfalarını okurken web sayfasındanki javascript kodu indirilmiş doğal olarak tarayıcınız tarafından otomatik olarak çalıştırılmış. Script tüm yerel ağınızı tarıyor, linksys modeminizin model numarasını öğreniyor modeminize komutlar göndererek kablosuz ağınızı aktive ederek şifrelemeyi devre dışı bırakıyor. Şimdi bunun 24 saatte 1 milyon kişiye olduğunu düşünün.” diyor tanıtım yazısında.

Deneysel bir güvenlik çalışmasının girişi böyle başlıyor. Javascript kullanarak basit bir port tarayıcısı yapmışlar. Tarayıcıları bir ip aralığındaki web hizmeti veren bilgisayarları tarayıp, sunucu yazılımını teşhis edebiliyor (Şimdilik sadece IIS ve Apache) ve herhangi bir yazılım açığını kullanmadığı için de kötüye kullanımını engellemenin pratik bir yolu yok. Daha fazla bilgi için bu pdf dosyasına veya sitelerine göz gezdirebilirsiniz. Tarayıcıyı denemek için buradan buyrun.

Kaynak: http://www.spidynamics.com

JScript(R) mi, JavaScript(R) mi?

HTML icinde script bloklari yazarken language ozelligi ile kullanacağımız kodun türünü belirtiyoruz JScript veya JavaScript olarak. Sisteme erişim gerekiyorsa VBScript’de olabiliyor.

JScript ile JavaScript arasinda bazi farklar var. JScript(R) Mikrosoftun implementasyonu, JavaScript(R) ise Netscape’in. Ikisi arasinda compatibility’den bahsedilmiyor, daha dogrusu firmalarin boyle bir gayretleri yok. Aynen DOM modelini yorumlamalarında olduğu gibi farklar var. Ama ikisinin de implementasyonu ECMA 622 adindaki bir kodlama standartına dayaniyor. ECMA-622, ECMA isimli sirketin script implementasyonunun adı. JScript(R) ve JavaScript(R) ECMA-622 den türetildiği için uyumlulugu garanti ediyor ama kendi aralarında aynı şey geçerli değil. JScript(R), Windows Scripting icin genisletmeler iceriyor, VBS (Visual Basic Script) tadinda genişletmeler içerdiğini söyleyebiliriz. Örneğin ActiveX nesnelerini dahil edip kullanabiliyorsunuz, do-while ve swtich gibi kontrol ve döngü deyimleri, hata yakalama (try-catch,throw) ve düzenli ifadeler (Regular Expressions) gibi… JScript’in temel ECMA implementasyonundan olan diğer farklarini gormek isterseniz buraya tiklayin. 

JScript’de  dogal olarak JavaScript’de bulumayan bazi methodlar var. Web de dahacok Netscape in JavaScript’i ragbet goruyor. Google da boyle soyluyor. "language=JavaScript" 4M sonuc dondururken "language=JScript" 9K donduruyor.

Yazan: Tankado

GeSHi – Generic Syntax Highlighter

PHP’de geliştirilmiş sintaks renklendirici. Sayfalarınızda kullanıcıdan gelen program kodlarını dilin yazım kurallarına uygun olarak renklendirermek istiyorsanız GeSHi’yi kullanabilirsiniz. 50’ye yakın programlama diline destek veriyor ve bir sf.net projesi. Yazılımın PHP içindeki kullanımı aşağıdaki gibi. Çok kısa.

$geshi =& new GeSHi($source, $language);
$geshi->setTheme(‘yourIDE’);
echo $geshi->parseCode();

Demo adresinden örnekleri inceleyebilirsiniz.
GeSHi’nin ana sayfasına buradan ulaşabilirsiniz.

FCKEditor Web için metin editörü

 Metin kutuları ile dışarıdan veri girişi yapılan web uygulamalarında mutlaka kullanılması gereken bir metin editörü. Şuan siteye yazı girişinde de bu editörü kullanıyorum. Javascript yeteneklerinin sonuna kadar kullanıldığı popüler ve başarılı bir proje. Şuan ayda 50.000 kopyası indiriliyor.  

Metin kutuları ile dışarıdan veri girişi yapılan web uygulamalarında mutlaka kullanılması gereken bir metin editörü. Şuan siteye yazı girişinde de bu editörü kullanıyorum. Javascript yeteneklerinin sonuna kadar kullanıldığı popüler ve başarılı bir proje. Şuan ayda 50.000 kopyası indiriliyor.
Continue reading “FCKEditor Web için metin editörü”