CKEditor ve reCaptcha

 bcakir
 31 Ocak 2012

Merhaba arkadaşlar bu yazımda CKEditor ve reCaptcha kullanımını anlatacağım. Bu yazıyla birlikte uygulamalarınıza kolaylıkla Html düzenleyici ve spama karşı doğrulama kodu ekleyebileceksiniz. Eğer bu uygulamaları WordPress, Drupal gibi hazır sistemlere eklemek isterseniz de eklentilerden aratarak kurabilirsiniz. Ben bu yazımda sadece sıfırdan yapacağınız uygulamalarda nasıl kullanabileceğinizi anlatacağım. Her ikisi için de örnek yapacağız. Şimdi, CKEditor kütüphanesini buradan indirerek uygulamamıza başlayalım. Bu arada iki uygulamayı da yazının sonunda indirebileceksiniz.

<!DOCTYPE html>
<html>
<head>
<title>CKEditor Kullanımı</title>
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
<script type="text/javascript">
window.onload = function(){
    CKEDITOR.replace('editor',{
        language: 'tr',
        extraPlugins : 'uicolor',
        uiColor: '#14B8C4',
        toolbar:[
                    [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
                    [ 'UIColor' ]

                ]
    });
}
</script>
</head>
<body>
<div id="kapsayici" style="width:600px">
<textarea id="editor" name="editor" cols="50" rows="5">Yazılan içeriği düzenle.</textarea>
</div>
</body>
</html>

Yukarıda Html düzenleyici uygulamamızı yaptık. Siz CKEditor dosyalarını karıştırarak farklı hazır tasarımları kullanabilirsiniz. Uygulamanın tollbar kısmından istediğiniz elemanları ekleyebilir ya da tamamiyle kaldırarak bütün elemanların eklenmesini sağlayabilirsiniz. Şimdi ise spamdan korunmak için kullanılan reCaptcha uygulamasını yapalım. Ama ilk önce buradan kullanacağınız site için public ve private key alın ve kütüphaneyi bedava indirin.

<!DOCTYPE html>
<html>
<head>
<title>reCaptcha Kullanımı</title>
</head>
<body>

<form action="" method="post">
Ad: <input type="text" name="ad" /> Soyad: <input type="text" name="soyad" />
<?php
//captcha kütüphanesini dahil etme
require_once('recaptcha/recaptchalib.php');

//captcha api key girin
$publickey = "public key girin";
$privatekey = "private key girin";

//değişkenleri sıfırlama
$resp = null;
$error = null;

//eğer değer gönderildiyse
if (isset($_POST["recaptcha_response_field"])){
    $resp=recaptcha_check_answer(
		$privatekey,
        $_SERVER["REMOTE_ADDR"],
        $_POST["recaptcha_challenge_field"],
        $_POST["recaptcha_response_field"]
	);

    if($resp->is_valid) {
        //doğrulama kodu doğruysa burayı çalıştır
		$ad=addslashes(strip_tags(trim($_POST['ad'])));
		$soyad=addslashes(strip_tags(trim($_POST['soyad'])));
		//ekrana_yaz fonksiyonunu çalıştır
		ekrana_yaz($ad,$soyad);
    }else{
        //doğru değilse hatayı göster
        $error = $resp->error;
    }
}
//ekranda captcha gösterme
echo recaptcha_get_html($publickey, $error);
?>
<input type="submit" value="Gönder" />
</form>

</body>
</html>

<?php
function ekrana_yaz($ad,$soyad){
	echo 'Adınız: '.$ad.' Soyadınız: '.$soyad;
}
?>

Yukarıdaki uygulamada ise bütün kodun, girilen doğrulama kodu doğru ise çalıştır kısmında olması gerektiğidir. Uygulamaları buradan indirebilirsiniz. Böylece bir uygulamamızın daha sonuna gelmiş olduk. Yararlı olması dileğiyle.

 973 Okunma

Bu yazıya 8 yorum yapılmış.

  1. garip bir şekilde bütün gün onlinetext editor ve file manager ile uğraştıktan sonra sizin yazınızı okuyorum ve karşıma yazı düzenleme çıkıyor, teşekkür ederim bunun için. file manager ve editorleri birleştirmeye çalışacağım jquery ile yardımcı olursanız sevinirim. tekrar teşekkürler : ))

  2. Çok iyi oldu bu. Tamda bu konu ilgili bir iş üzerinde çalışken faydalı oldu. Teşekkürler.

  3. Iyi günler,
    Ben CKEditor ile html dosyasini online görüntüleyip desigiklikleri yaptiktan sonra kaydetmek istiyorum, sadece bit tane html sayfasi umarim yardimci olabilirsiniz.
    Tesekkürler

    • CKEditor, zaten anlık değişikliklikleri görüntülemenize olanak sağlıyor. Sizin sadece yapmanız gereken; form elemanlarından POST edilen verileri (ad, soyad, başlık, içerik gibi girilen bilgileri) alıp, gerekli işlemleri (veritabanına kaydetme, mail atma gibi işlemler) yapmak.

  4. Hizli cevap icin tesekkürler,
    ben bir cms system kullanmiyorum sadece bir html dosyasinin editorü actigimda icinde yüklenmesini ve submitelde kaydolmasini istiyorum ornegin anadizindeki /index.html

    • Yukarıda yer alan örnekler hazır cms sistemler için değildir. Yukarıdaki örneklere eklemeniz gereken tek şey, submit edilince form elemanlarından (CKEditor) verileri alıp veritabanına kaydetmek.

  5. Konuyla çok ilgili değil ama sıfırdan php site oluşturuyorum. tinymce gibi bir editör. sizin şuan kullandığınız editör hakkında bilgi verirmisiniz. expand source diyince kodların açılmasını ve renkli olmasını istiyorum. çok bilgim yok bu konuda. acaba bilgi verir misiniz?

  6. Merhaba

    Öncelikle Elinize Saglık Çok Güzel Bir Anlatım Olmuş, Recaptcha Forma Mail Özelliği Nasıl Ekleyebilirim

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JavaScript, Php
Kapat