WYSIWYG Editör Yapımı

Öncelikle WYSIWYG nedir, bunu öğrenelim..

WYSIWYG, uzun adıyla What You See IWhat You Get kısaltması olup türkçe karşılığı “Ne Görüyorsan Onu Alırsın” dır..
Bunda olay, editörde yazdığınızı çıktı aldığınızda neredeyse birebir benzerlikte olmasıdır.. [Kaynak: Wikipedia]

Bir nesnenin düzenlenebilir olması için contenteditable niteliği eklenmelidir..

<div style="width: 100px; height: 100px; border: 1px solid #ddd" contenteditable="true">bu yazı düzenlenebilir..</div>

Düzenlenebilir nesneye komut uygulamak için execCommand() metodu kullanılır.. Mevcut komutların tüm listesini aşağıdaki bağlantıdan görüntüleyebilirsiniz;
https://developer.mozilla.org/en-US/docs/Rich-Text_Editing_in_Mozilla#Executing_Commands

Sayfa Yenilenmeden Link Yapısını Değiştirmek (history.pushState)

Modern tarayıcılarda çalışan HTML5’in güzel nimetlerinden olan history.pushState metodu ile, sayfa yenilenmeden link yapımızı dinamik olarak değiştirebileceğiz.. Ve ajax’ın da işin içine girmesi ile baştan aşağı dinamik ve hiç yenilenmeden içerik ve linklerin değiştiği bir site hazırlayacağız.. Yararlı olması dileğiyle..

Düzelme Videosu

Ders bittikten sonra bir hatayı farkettim, ve hemen bir düzeltme videosu hazırladım.. Ben kaynak dosyaları bu şekilde güncelledim, eğer bundan önce indirenleriniz var ise, tekrar indirmeleri rica olunur ????

jQuery ile Sürükleme (Drag) İşlemi

Aslında başlık tam olarak durumu özetlemiyor.. Ancak en genel tanım bu şekilde sanıyorum ???? Biz dersimizde bir nesnenin genişlik ve yüksekliği yeniden boyutlandırsakta aslında yaptığımz şey fare olaylarıydı.. Yararlı olması dileğiyle..Dikkat: Firefox’da drag içinde a olduğunda sorun veriyor.. Direk drag nesnesi ile yaparsanız sorun çözülecektir.

Ajax Hatalarını Bulmak

Bazen jquery’de ajax ile çalışırken hata yapıyoruz.. Özellikle json formatında geriye değer döndürmeye çalıştığımızda ve php dosyasında bir hata yaptığımızda hatanın nerede olduğunu bulamıyoruz.. En azından dosyayı açıp bakmadığımız sürece.. Bu gibi durumlarda ne yapmalı, hataları nasıl kolayca tespit edebilir ve giderebiliriz bu videoda bunları anlatmaya çalıştım..

Hex ve RGB Değerlerini Dönüştürme (JavaScript)

Bugün prototürk’ün yeni halini hazırlarken bir hex değerini rgb’ye dönüştürme ihtiyacı duydum.. Biraz araştırdıktan sonra bu işin o kadarda zor olmadığını anladım, bulduğum fonksiyonları sizlerle de paylaşmak istiyorum, eminim bir gün işinize yarar ????

RGB to HEX

Elinizde bulunan RGB değerini HEX değerine çevirmek için gerekli fonksiyon;

function hex(c) {
    var hex = c.toString(16);
    return hex.length == 1 ? "0" + hex : hex;
}

function rgb2hex(r, g, b) {
    return "#" + hex(r) + hex(g) + hex(b);
}

alert( rgb2hex(12, 47, 112) ); // #0c2f70

Sırasıyla Red, Green ve Blue değerlerini yazmanız yeterlidir.

HEX to RGB

Elinizde bulunan HEX değerini RGB değerine çevirmek için gerekli fonksiyon;

function hex2rgb(hex) {
  return ['0x' + hex[1] + hex[2] | 0, '0x' + hex[3] + hex[4] | 0, '0x' + hex[5] + hex[6] | 0];
}

alert( hex2rgb('#0c2f70') ); // 12,47,112

İyi çalışmalar herkese.

Xampp’da Port Değişimi

Ben sunucu programı olarak Xampp’ı kullanıyorum.. Ve çoğu zaman 80 portunu kullanan bir başka program açık olduğundan localhost’u başlatabilmek için önce o programları kapatmak zorunda kalıyorum ???? Ancak bundan sıkıldığım için xampp’da nasıl port değiştirebileceğimizi biraz araştırdım, öğrendim ve sizlerede göstermek istiyorum..

Yapılacaklar;

1) [XAMPP_KURULU_DIZIN]/etc/httd.conf dosyasını herhangi bir editör ile açın.
2) Daha sonra Listen 80 diye aratın.. Buradaki 80 değerini herhangi bir sayı ile değiştirin, bu sizin yeni portunuz olacak.. Örneğin Listen 31 yapın.
3) Ve tekrar aynı dosyada ServerName diye aratın.. Muhtemelen onun değeri localhost ya da localhost:80 olacaktır.. Siz bunu 2. maddede belirlediğiniz port olarak değiştirin.. Yani ServerName localhost:31şeklinde.
4) Xampp’ı yeniden başlatın ve servisleri çalıştırın.
5) http://localhost:31 ya da http://127.0.0.1:31 şeklinde localhostunuza giriş yapabilirsiniz ????

PHP ve JSON

Bugün sizlere PHP ve JSON ilişkisini anlatacağım.. JSON’ı temel olarak öğrendikten sonra, PHP’de bulunan JSON fonksiyonlarını ve ne işe yaradıklarını öğreneceğiz..Öncelikle JSON nedir sorusuna basit bir cevap verelim.. JSON, javascript Object Notation’ın kısaltması olup tıpkı XML gibi bir veri değişim formatıdır.

JSON Yapısı

jSON, object (nesne) ve array (dizi) olmak üzere 2 temel yapı içerir. Bu temel yapılar evrensel yapılardır ve tüm modern programlama dillerinde mevcuttur.

Object Yapısı

Bir nesne (object), { (süslü parantez) ile başlar ve } (süslü parantez) ile biter. Anahtar ve değer şeklinde tanımlanırlar.. Her anahtardan sonra : (iki nokta üstüste)kullanılır.. Anahtar/değer çiftleri birbirinden , (virgül) ile ayrılırlar.

Aşağıdaki resim object yapısını temsil etmektedir.

PHP ve JSON

Gördüğünüz gibi o kadarda karmaşık bir yapı değil.. Daha iyi pekiştirmek için hemen ilk örneğimizi yapalım ve bir nesne oluşturalım.

{
    "yeniNesne" : "nesne değeri"
}

Tebrikler, ilk json nesnemizi oluşturduk ???? Şimdi diğer yapıya (array) göz atalım..

Array Yapısı

Bir dizi (array), [ (köşeli parantez) ile başlar ve ] (köşeli parantez) ile biter. Sadece değer şeklinde tanımlanır.. Değerler birbirinden , (virgül) ile ayrılır.

Aşağıdaki resim array yapısını temsil etmektedir.

PHP ve JSON

Gördüğünüz gibi object yapısından biraz farklı.. Köşeli parantezlerle başlayıp bittiği gibi bir anahtar tanımlaması yok.. Yani dizi yapısında sadece değerleri bir arada tutuyoruz.. Bununla ilgili küçük bir örnek yapalım hemen.

["test1","test2"]

Örnekte gördüğünüz gibi dizi içerisinde 2 değer ve bu değerleri virgül ile ayırdık.

Value

Bir değer, çift tırnak içinde şu türleri barındırabilir.
string (yazı), true, false, null (boş değer), number (sayı), object (nesne) ve array (dizi)

PHP ve JSON

Bizim için şimdilik bu kadar bilgi yeterli.. Daha fazla bilgi edinmek için resmi adresine başvurabilirsiniz;
http://json.org/json-tr.html

PHP’de JSON Fonksiyonları

PHP bize JSON ile ilgili 2 fonksiyon sunuyor.. Bunların ilki json_encode()yani bir json formatı dönüştürücüsü ve ikincisi ise json_decode() yani bir json formatı çözücüsü.. Zaten temelde json işlemi içinde bu 2 fonksiyon yeterlidir.

json_encode()

Bir dizi ifadeyi json formatına dönüştürür.. Küçük bir örnek ile kullanımını görelim;

$array = array(
    "kadi" => "tayfun erbilen",
    "sifre" => "123456"
);
$json = json_encode($array);

echo $json;

Bu örneğin çıktısı aşağıdaki gibi olacaktır;

{
    kadi: "tayfun erbilen,
    sifre: "123456"
}

Bu fonksiyona ait birde 2. parametre vardır ancak zorunlu değildir.. 2. parametre değerleri parse etmek için kullanılan tip atamalarıdır.. Sırasıyla aşağıda inceleyelim;

JSON_HEX_TAG
Bütün < ve > karakterleri \u003C ve \u003E karakterlerine dönüştürülürler.

JSON_HEX_AMP
Bütün & karakterleri \u0026 karakterlerine dönüştürülürler.

JSON_HEX_APOS
Bütün ‘ karakterleri \u0027 karakterlerine dönüştürülürler.

JSON_HEX_QUOT
Bütün “ karakterleri \u0022 dönüştürülürler.

JSON_FORCE_OBJECT
İlişkisel olmayan dizi kullanıldığında çıktıların dizi yerine nesne olmasını sağlar.

json_decode()

JSON formatındaki veriyi çözer ve php’de kullanabileceğimiz hale getirir.. Yapısal olarak obje ve dizi halinde çevrilir. 3 parametre alır ancak sadece ilk parametre zorunludur. Bir örnek ile daha anlaşılır hale getirelim;

$json = '{"kadi" : "tayfun erbilen", "sifre" : "123456"}';
var_dump( json_decode($json) );

Yani biz bu değerlere tam olarak şu şekilde erişebiliriz;

$json = '{"kadi" : "tayfun erbilen", "sifre" : "123456"}';
$data = json_decode($json)
echo $data->kadi; // tayfun erbilen
echo $data->sifre; // 123456

Fonksiyona 2. parametreyi true olarak atarsak nesne değil dizi olarak çözme işlemi yapacaktır.. O zamanda veriye erişimimiz yukarıdaki gibi değil aşağıdaki gibi olacaktır.

$json = '{"kadi" : "tayfun erbilen", "sifre" : "123456"}';
$data = json_decode($json, true)
echo $data['kadi']; // tayfun erbilen
echo $data['sifre']; // 123456

json_last_error()

JSON işleminde bir hata oluşup oluşmadığını bu fonksiyon ile kontrol edebiliriz. Bir hata olduğunda sayısal değer döndürecektir.. Bu sayısal değerler sırasıyla aşağıdaki sabitleri temsil etmektedir.

JSON_ERROR_NONE – Hata bulunamadı
JSON_ERROR_DEPTH – Azami yığın derinliği aşıldı (?)
JSON_ERROR_CTRL_CHAR – Denetim karakteri hatası, muhtemelen yanlış kodlanmış
JSON_ERROR_SYNTAX – Sözdizimi hatası
JSON_ERROR_UTF8 – UTF-8 karakter kodlama hatası, muhtemelen yanlış kodlanmış (Geçerlilik : PHP 5.3.1)

JSONView Eklentisi

PHP ve JSON

Tarayıcılarınız için JSON görüntüleme eklentisini kullanabilirsiniz.

Chrome: https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc
Firefox: https://addons.mozilla.org/en-US/firefox/addon/jsonview/

Örnekler

İlk olarak bu sitedeki rss.xml’in json halini yazalım..
http://www.erbilen.net/rss.xml

{
"rss" : {
"version" : "2.0",
"channel" : {
"title" : "Tayfun Erbilen",
"link" : "http://www.erbilen.net/",
"language" : "tr",
"item" : [
{
"title" : "ComarSever.Net",
"link" : "http://www.erbilen.net/projeler/482-comarsevernet.html",
"description" : "
	

jQuery Hedef Dışı Tıklama

Mevcut nesnemiz dışında herhangi bir yere tıklandığında bunu yakalayıp işlem yapmak için yani hedef dışı tıklamayı yakalamak için nasıl bir yol izleyeceğimizi bu derste sizlere anlatmaya çalıştım.. Yararlı olması dileğiyle..

İNDİR

Derste dosyalarına aşağıdaki bağlantıdan indirebilirsiniz;
http://yadi.sk/d/M988C-Vq4P518