CKEditor Kullanımı – Dosya Yöneticisi

Marhabalar,

CKEditor Kullanımı  yazı dizisine Dosya yöneticisi ile devam ediyoruz.Metin  editöründe en çok  ihtiyacımız olan şeylerden biride ortam dosyalarımızın yani resim,video,müzik ,vb.  dosyaların yönetilmesini saplayan dosya yöneticidir. Dosya yöneticisi ile dosyalarınızı tek bir noktadan yönetebilirsiniz.Yeni dosya yükleme düzenleme silme ve gönderilerinize ekleme işlemlerini  dosya yöneticisi ile kolayca yapabilirsiniz.Herhangi bir dosya yöneticiniz yoksa CKEditor de yazınıza resim  eklemek istediğinizde resmin url adresi ile resmi  ekleyebileceksiniz bunun için resmi  daha önceden sizin internete yükleyip url  adresini kaydetmeniz  gerekiyor, bu şekilde  kullanım hiç kullanışlı değil.

[caption id="attachment_2105" align="aligncenter" width="527"]ckeditor-resim-upload Resim yüklemek için herhangi bir buton yok[/caption]

Bu yazımda ücretsiz olarak dağıtılan Roxy Fileman isimli  dosya yöneticisinin CKEditor ile  bağlantısının nasıl  yapılacağını  anlatacağım.İlk olarak  Roxy Fileman ı  sitesinden indiriyoruz ve sitemizin  ana dizinine yüklüyoruz.

[box type="download"]Roxy Fileman Download[/box]

fileman klasörü içindeki  Upload dizininin sunucu tarafından yazılabilir olduğuna dikkat ediyoruz. Sonrasında CKEditor e dosya işlemlerinde fileman ı kullanması  için bir kaç  tanımlama yapmamız gerekiyor.Bunu CKEditor config dosyasında yada CKEditor u  eklediğimiz sayfadan yapabiliriz.

CKEditor config dosyası ile :

[code lang="js"]
/**
 * @license Copyright (c) 2003-2014, CKSource - Frederico Knabben. All rights reserved.
 * For licensing, see LICENSE.html or http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function( config ) {
    config.language = 'tr'; //CKEDITOR arayüz dili
    config.uiColor = '#9AB8F3';// CKEDITOR arayüz rengi
    config.colorButton_colors = '000000,FF0000,00FF00,0000FF';//yazı renk butonunun renkleri
    config.colorButton_enableMore = false; //belirtilenler dışında renk  seçimini  engelleme
    config.contentsLanguage = 'tr';//Editör içeriği oluşturmak için kullanılan yazı dilinin dil kodu.
    
//Dosya Yöneticisi
    config.filebrowserBrowseUrl = '/fileman/index.html';// Öntanımlı Dosya Yöneticisi
    config.filebrowserImageBrowseUrl = '/fileman/index.html?type=image'; // Sadece Resim Dosyalarını Gösteren Dosya Yöneticisi
    config.removeDialogTabs = 'link:upload;image:upload'; // Upload işlermlerini dosya Yöneticisi ile yapacağımız için upload butonlarını kaldırıyoruz
    //---------
};
[/code]

Config dosyası  ile yaptığımız  tanımlama tüm editor leri  etkiler.

HTML içerisinde :

[code lang="html"]<!DOCTYPE html>
<html>
<head>
<title>CKEditor Örnek</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!--Ckedtor ana dosyasını  ekleyelim-->
<script src="ckeditor/ckeditor.js"></script><!--ckeditor dosyaları  bu  dosya ile aynı  dizinde-->
</head>
<body>
<form method="post" action="">
<textarea name="editor1" id="editor1" rows="10" cols="80">
Gelişmiş elemanları bulunan metin alanı
</textarea>
<input type="submit" value="Kaydet">
</form>
<script>
CKEDITOR.replace('editor1',{
filebrowserBrowseUrl:'/fileman/index.html', // Öntanımlı Dosya Yöneticisi
filebrowserImageBrowseUrl:'/fileman/index.html?type=image', // Sadece Resim Dosyalarını Gösteren Dosya Yöneticisi
removeDialogTabs: 'link:upload;image:upload' // Upload işlermlerini dosya Yöneticisi ile yapacağımız için upload butonlarını kaldırıyoruz
});
</script>
</body>
</html>[/code]

Bu değişiklikleri  yaptıktan sonra CKEditor ile yazılarınıza resim eklemek çok kolay bir hal  alacak:

ckeditor-resim-upload1ckeditor-resim-upload2

 

[box type="tick" style="rounded"]
Diğer yazılar:

CKEditor Kullanımı – Kurulum
CKEditor Kullanımı – Ayarlar
CKEditor Kullanımı – Toolbar Düzenlemesi
CKEditor Kullanımı – Ajax Post
[/box]

 

 

Devam

Foto Galeri

PortfolioImageNavigation

Bir sitemde beğenerek  kulandığım Codrops ekibinin hazırladığı Portfolio Image Navigation with jQuery fotograf galerisini daha rahat bir şekilde kullanama fikriyle  kodlamaya başladığım foto galeri uygulamasını sizlerle paylaşmak istedim .

Orijinal  versiyon demo:http://tympanus.net/Tutorials/PortfolioImageNavigation/

Normal şartlarda bu galeriyi kendi sitenizde kullanmak istediğinizde resimleri uygun boyutlara getirmeniz, resimleri sitenize ftp ile yüklemeniz ve fotogaleri index sayfasının html kodlarını düzenlemeniz gerekmekte.Bu işlerde bilgisi az olan biri için yeteri kadar zor ve uğraştırıcı bir durum.

Yazdığım uygulama ile bu galeriyi kullanmak gayet kolay bir hale geliyor.Kurulumu ile anlatmaya başlıyayım.

[box type="download"]FotoGaleri[/box]

Yukarıdaki  linkten fofoGaleri dosyasını indirin.indirdiğiniz zip dosyasının içindeki tüm dosyaları sitenizde foto galerinin gözükmesini istediğiniz yere yükleyin.www.siteniz.com/galeri şeklinde gözükmesi için sitenizin ana dizininde galeri isminde bir klasör açın ve dosyaları o klasöre yükleyin.

Burada önemli olan şey foto galeriyi  yüklediğiniz dizinin sahibi ve grubu için yazma  iznine sahip olması gerekiyor bunun için dosya izinlerini 0775 şeklinde ayarlayabilirsiniz.(Nasıl yapılacağına dair bu yazımı inceleyebilirsiniz.).Kurulum işlemi  bu  kadar.

Şimdi  galerinin ayarlarını yapmak ve resim yüklemek için sitenizde galeriyi yüklediğiniz dizini açın(www.siteniz.com/galeri).İlk açılışta karşınıza şeyle bir ekran gelecek:

fotogaleri1

Şifre olarak  123456 yazıp Doğrula dediğinize karşınıza galerinin ayar sayfası gelecek ilk  seferde şifre değiştirmeniz gerekmektedir.

fotogaleri

Yeni şifre belirledikten sonra artık fotoğraf yükleme işlemine gelebiliriz.

rsim ekle

Fotoğraf yüklemek çok basit üstteki resimde gördüğünüz  gibi ekle butonuna tıklayıp resminizi seçmek dışında uğraşmanız gereken herhangi bir şey yok.Fotoğrafınız yüklenip otomatik olarak boyutlandırılacak ve galerinizdeki yerini alacak. Bu şekilde yan yana 10 tane fotoğraf ekleyebilirsiniz.

fotodeğiştirsil

Eklediğiniz bir resmi silmek yada bir başka bir fotoğrafla değiştirmek için yapmanız gereken sadece değiştirmek yada silmek istediğiniz fotoğrafın üstüne gelip uygun butona basmanız.

[box type="info"]İlgilenenler için github linki: https://github.com/sametatabasch/Foto-galeri [/box]

Karşılaştığınız hataları bana bildirmekten çekinmeyin 🙂

Devam

PHP upload_max_filesize Değerini Değiştirme – Linux

PHP ile kullanıcının siteye dosya yüklemesini sağlayabiliyoruz bunu yaparken en çok kullanılan ve en basit metot post metodu ile sunucuya dosya yükletmek. Basit bir html form ile kullanıcın kendi bilgisayarından seçtiği bir dosyayı sitemize yüklemesini sağlayabiliriz.file_uploda_formPHP  de güvenlik tehditlerinin en çok yaşandığı durumda dosya upload işlemidir. Upload işlemi ile dosyalar denetlenmeden sunucuya yüklenirse ciddi sorunlara yol açabilir.Upload işleminde bir diğer sıkıntı ise büyük dosyalar yüklenerek sunucunun kilitlenmesi. Bu durumu önlemek için php post metodu ile yüklenecek dosyanın boyutuna sınır koymuştur bu sınır php.ini (php ayar dosyası) dosyasında upload_max_filesize değeri ile belirlenir.

Upload_max_filesize değeri ön tanımlı olarak 2mb olarak belirlenmiştir.Bu değer çoğu zaman kullanıcıya az gelir. Günümüzde fotoğraf makineleri ile çekilen resimler  3-5 mb arasında oluyorlar.Kullanıcı çektiği bir resmi siteye yüklemeye çalıştığı zaman 2mb sınırı ile karşılaşıyor ve bu hoş bir durum olmuyor.

Bu durumdan kurtulmak için iki yöntemden bahsedeceğim birinci yöntem sunucu yönetimini elinde barındıran kullanıcılar için .

PHP.ini dosyasını düzenlemek

php.ini dosyası  PHP nin ayarlarının bulunduğu dosyadır. Bu dosya ile upload_max_filesize değerini değiştirebiliriz. Bu işlemi  yapabilmemiz için sunucumuza SSH bağlantısı ile bağlanmamız gerekiyor.Eğer localhost ile çalışıyorsanız direk konsoldan komutları  girebilirsiniz. Bu  işlemleri  yapabilmeniz için sunucuda root yetkinizin olması gerekiyor. SSH bağlantımızı  kurduktan sonra root yetkisine erişmek için “su” komutunu  verin ve root şifresini  yazıp enter a basın. root şifresini  bilimiyorsanız yada belirlemediyseniz her komutun başına “sudo” eklemeniz gerekiyor sudo  ekledikten sonra sizden şifre girmezin istenecek  aktif kullanıcının şifresini yazıp enter a basın.

Şimdi php.ini dosyamızın konumunu görmek için

[code]locate php.ini[/code]

Komutunu  çalıştıralım .Buna benzer bir sonuç alacaksınız:

[code]/etc/php5/apache2/php.ini
/etc/php5/cli/php.ini
/usr/share/php5/php.ini-development
/usr/share/php5/php.ini-production
/usr/share/php5/php.ini-production-dist
/usr/share/php5/php.ini-production.cli[/code]

Sonrasında php.ini dosyasının içeriğini  değiştirmek için konsol üzerinde çalışan bir metin editörü olan nano  programını kullanacağız.

[code]nano /etc/php5/cli/php.ini[/code]

Bu  komut ile “/etc/php5/cli/php.ini” yolundaki php.ini dosyasının içeriği açılmış olacak. php.ini dosyasının içinde bir çok ayar mevcut upload_max_filesize değerini bulmak için “Ctlr+w” tuş  kombinasyonuna basarak arama yapabiliriz.Arama kısmına upload_max_filesize yazıp istediğimiz değere kolayca ulaşabiliriz. buradaki  2M değerini 8M yada 10M gibi değerlerle değiştirebilirsiniz.

İstediğiniz gibi değişimi yaptıktan sonra “Ctrl+x” ve “y” yi tuşlayarak dosyayı kaydedin.Ayarın uygulanması için apache sunucusunu yeniden başlatılmalı bunun için

[code]service apache2 restart[/code]

komutunu yazıp enter a basmanız yeterli.

.htaccess dosyası ile bilirleme

Eğer sunucuya erişiminiz yoksa .htaccess dosyası ile upload_max_filesize değerini belirtebilirsiniz. Host unuzda bulunan  .htaccess dosyasını n içerisine aşağıdaki  satırları  ekleyecek upload limitinizi  düzenleyebilirsiniz.

[code]#Upload limiti Blirle

php_value post_max_size 10M

php_value upload_max_filesize 10M[/code]

Devam