Yine blogla fazla ilgilenemediğimden dem vurmaktansa yazıya balıklama bir dalış yapayım. Efendim bundan sonra gördüğüm güzel WordPress temalarını Türkçeleştirmeye karar verdim ve ilk olarak da Hamus diye anılan bu garip isimli tema ile başlıyorum. Sizlerin de beğendiğiniz ve henüz Türkçeye çevrilmemiş WordPress temaları gözünüze çarparsa zaman buldukça onlarla da ilgilenmeye çalışacağım.

Tema ile Test Sürüşü

Türkçe Hamus İndir

Alfabetik Liste

• [RSS] 5 Posta
• [RSS] biraz ki$isel
• [RSS] bobiler.org
• [RSS] CatyCat
• [RSS] CESETİZLERİ ♀
• [RSS] Diyomki
• [RSS] eburhan.com
• [RSS] eczahaneci
• [RSS] Eleştirel Günlük
• [RSS] Evli Adam’ın halleri
• [RSS] Fatih Hayrioğlu’nun not defteri
• [RSS] Fikir Atölyesi
• [RSS] GÜNEŞİN TAM İÇİNDE – Sarışın Site
• [RSS] Gürkan OLUÇ
• [RSS] hastalardan öğrendiklerim
• [RSS] Hello! My name is Harun – Sen zahmet etme, ben Google’larım
• [RSS] Her Boku Bilen Adam
• [RSS] kalemzede
• [RSS] KISA Bİ ARA…
• [RSS] LAMP for WEB
• [RSS] M. Serdar Kuzuloğlu
• [RSS] Madde Bağımlısı
• [RSS] Mengu
• [RSS] MFYZ.Com Günlük Girdileri
• [RSS] Muhammet Sevim
• [RSS] Muharrem ERİN
• [RSS] Neticat
• [RSS] Nucro Blog
• [RSS] OKAN ARI – SEO – Linux – PHP – WEB – GÜVENLİK
• [RSS] Okunası Notlar
• [RSS] Onlayn.org
• [RSS] Otobus
• [RSS] oztecnic – XHTML, CSS, JavaScript, Fireworks, Web Standartları, Erişilebilirlik
• [RSS] piç güveysinden hallice

Öncelikle bir hayran sayfanız olmalı ki blog girdilerinizi veya FriendFeed, Twitter gibi sosyal paylaşım ortamlarındaki iletilerinizi hayran sayfanıza ekleyebilesiniz. Benim hala bir hayran sayfam yok diyenler için geliyor: Facebook Hayran Sayfası Oluşturma

Bu işlemleri hallettiğiniz farz ederek devam ediyoruz. Sayfanızın düzenleme(edit) bölümünden “Notes” başlığına giriyoruz.

Sonrasında sağ taraftaki “Import a Blog” linkine tıklayıp istediğiniz RSS adresini girerek yazılarınızı, iletilerinizi hayran sayfanıza otomatik olarak ekleyebilir hale geliyorsunuz.

Konumuz genel hatlarıyla bu şekildeydi. Başka RSS adreslerini de aynı işlemi tekrar etmek suretiyle ekleyebilir, sayfanızı güncelliğini artırabilirsiniz.

1. Acer Aspire 5520G

2008 Şubat ayı civarlarında aldığım, aynı zamanda ilk dizüstü bilgisayarımdır kendileri. Şu ana kadar AMD işlemcisinin aşırı ısınması dışında hiçbir sorunla karşılaşmadım. Hatta yakın zamanda yaptığım fan temizliği sonrasında PES 2009, NFS Carbon, Call OF Duty 4 gibi oyunları zorlanmadan çalıştırdı. 1.9 Ghz AMD işlemcisi, GeForce 8400M ekran kartı, 2 GB Ram, 15.4” ekranı ve 160 GB sabit diskiyle en az 2 sene daha kullanılabilir görünüyor. 3 kanal ses çıkışı ve çok sağlam bir ethernet kartına sahip. Bataryası ise genel olarak elektrikte kullanmama rağmen 2 saat gidiyor ancak. Fiyat/performans açısından gayet alınabilir bir üründü ve genel olarak memnunum.

2. Nokia N79

Yaklaşık 4 aydır kullandığım ilk kameralı telefonum olan Nokia N79′a alışmam uzun zaman almadı. Zira daha önce hep Nokia telefonlar kullanmıştım. Özelliklerine gelecek olursak 5 Mp ama gece çekimi iyi olmayan bir kameraya sahip. 3G desteği, Wi-Fi bağlantısında sorunsuz olması ve navigasyon özelliği benim için kafi derecede yeterli. Şarj süresi kullanıma göre değişsede 3-4 gün civarı gidiyor. Görünümünün şık olması ve hafifliği güzel bir stil katıyor. Yanında gelen 4Gb hafıza kartı işimi fazlasıyla görüyor ve hız açısından bir sorun yaratmıyor. Geniş ekranı sayesinde video izlemede sorun yaratmıyor ve akselometre özelliği sayesinde ekran dikey ve yatay kullanılabiliyor. N79′un en beni benden alan özelliği ise harika bir müzik-çalar olması. Yanında gelen kulaklık çok kaliteli ve harika bir müzik keyfi sunuyor. Kulaklık çıkışının 3.5 mm olması müzikleri hoparlörden dinleme imkanı sağlıyor ve ses kalitesi de çok iyi.

3. Canon PowerShot A570 IS

Yaklaşık 6-7 ay önce aldığım fotoğraf makinamı fazla kullanmadım ama yeni başlayanlar için tavsiye edebilirim. 7.1 Mp görüntü kalitesi ve DIGIC III motora sahip. Yüz tanımlama sistemi, 4x optik zoom, ISO 1600 çekim değeri ve yarı-manuel kullanım imkanı çekim yapmayı kolaylaştırıyor. Yanında 8 Gb hafıza kartıyla beraber kullanıyorum. Tek sorunum pille çalışıyor olması ve almayı düşünenlere tavsiyem kaliteli piller ve şarj cihazı almaları. Onun dışında çekim kalitesi çok güzel ve Canon olması cihazın sağlamlığını ortaya koyuyor.

4. SmartDisk 250 Gb HDD

1 seneye geçkin bir süredir kullandığım harici sabit diskimden gayet memnunum. İçerisinde Samsung marka disk bulunuyor ve Samsung bu işte belli başlı oyunculardan biri.  Okuma-yazma hızı gayet iyi ve hiç yarı yolda bıraktığı olmadı. Tek tuşla yedekleme özelliğini pek kullanmasam da kullanmak isteyenler için yararlı olduğu bir gerçek. 2.5” ve 5400 Rpm kendileri. Yanında gelen deri kılıfı da gayet şık bir görünüm veriyor. Kasasının aliminyum olması ısınma problemlerini engelliyor.

5. OCZ Diesel 8 Gb

Daha önceden kullandığım 512 Mb Kingston flash belleğim artık miadını doldurunca yenisini almaya karar vermiştim. Kısa bir araştırmadan sonra tercihimi OCZ Diesel’den yanan kullandım ve aldığıma pişman olmadım. Öncelikle boyutu çok küçük ve görünümü çok şık. Yazma-okuma hızı çok iyi ve 8 Gb kapasitesi işimi fazlasıyla görüyor. Tak-çıkarlı kapağının şeffaf renkli olması sık sık kaybolmasını yol açsa da onun haricinde kaliteli bir ürün.

Bu 5 araç günlük teknoloji ihtiyacımı gidermeye yetiyor. Genelde bir ürün almadan önce kısa bir araştırma yaparım ve şimdiye kadar aldığım üründen memnun olmadığım pek olmadı. Benden bu kadar diyor, memnun teknolojik alışverişler diliyorum.

functions.php

<?php
function toplam ($sayi_1, $sayi_2 ) {
$sonuc = $sayi_1 + $sayi_2;
echo $sonuc;
}
?>

Burada toplam isminde bir fonksiyon oluşturduk. Dikkat ederseniz fonksiyon isminin başına $ işareti eklemedik. toplam isimli fonksiyon 2 değerle çalışıyor ve gelen değerleri $sonuc değişkeniyle topladık ve sonucu ekrana yazdırdık.

Fonksiyonumuzu bir kere oluşturduktan herhangi bir sayfada istediğimiz kadar çağırabiliriz(kullanabiliriz). Kullanım örneği için index.php isminde bir sayfa oluşturalım.

index.php

<?php
include 'functions.php'; // functions.php sayfasını çağırdık.
toplam (15, 20); // toplam isimli fonksiyonumuzu 15 ve 20'yi toplaması için çağırdık.
?>

Tarayıcımızda index.php’yi çalıştırdığımızda 35 yazdığını göreceğiz.
İlk örneğimiz anlaşılır olması için nispeten basitti. İkinci örneğimizde örnek olarak bir yorum ekleme formunu fonksiyon olarak oluşturcağız. Aşağıdaki kodları functions.php sayfasına ekliyoruz.

functions.php

<?php
function yorum_formu($y_isim, $y_mail, $y_website, $y_yorum) {
?>
<form name="form1" action="<?php echo $PHP_SELF; ?>" method="post">
<table>
<tr>
<td>İsim</td>
<td><input type="text" name="isim" value="<?php echo $y_isim; ?>" /></td>
</tr>
<tr>
<td>E-Mail</td>
<td><input type="text" name="mail" value="<?php echo $y_mail; ?>" /></td>
</tr>
<tr>
<td>Website</td>
<td><input type="text" name="website" value="<?php echo $y_website; ?>" /></td>
</tr>
<tr>
<td>Yorum</td>
<td><textarea name="yorum" rows="5" cols="20"><?php echo $y_yorum ?></textarea></td>
</tr>
<tr>
<td></td>
<td><input type="submit" name="submit" value="Gönder"></td>
</tr>
</table>
</form>
<?
}
?>

yorum_formu isimli fonksiyonumuzu 4 değer kullanarak oluşturduk. Fonksiyonu çağırırken 4 değer göndermemiz gerekiyor. Fonskiyona gelen 4 değer sırasıyla uygun bölümlere ekleniyor. Şimdi sıra geldi fonksiyonu çağıracağımız sayfayı oluşturmaya.

yorum_ekle.php

<?php
include 'functions.php'; // fonksiyonlarımızın bulunduğu sayfayı çağırıyoruz.
if ($submit == false) {
yorum_formu ('', '', '', ''); // yorum formunu kullanıcı ilk defa kullanacağı için boş değerler gönderip çağırıyoruz.
}
if ($submit == true) {
// burada form kontrollerini yapıyoruz ve örneğin herhangi bir alan boş bırakıldıysa kullanıcıya formu doldurduğu şekliyle ikinci kez gösteriyoruz.
yorum_formu ($isim, $mail, $website, $yorum);
}
?>

Bu örnekte formu çağırıldığı sayfanın içinde dönderdik. Formları sayfa içerisinde döndermeyle ilgili yazıya göz atabilirsiniz.

Fonksiyonların PHP’de kullanılması kabaca bu şekildeydi. Örneklerde konunun özünü kaybetmemek için güvenlik önlemleri vs. dikkate almadım. Konuyla ilgili soru, görüş ve önerilerinize elimden geldiğince cevap vermeye çalışacağım.

Örneklerin Çalışan Hali
Dosya Olarak İndirin

Tynt Tracer servisini kullanmak için öncelikle kayıt olmak gerekiyor.

Kayıt işlemi tamamlandıktan sonra karşınıza 3 aşamalı bir bölüm geliyor.

1. “Attribution Link” kutucuğunu işaretleyerek kopyalanan içeriğinizin sonuna sayfanızın linkini ekliyorsunuz.
   İçeriğinizi Creative Commons lisansı ile koruyorsanız “Add Creative Commons License” kutucuğunu işaretleyebilirsiniz.
2. Bu adımda size verilen kodu sayfanızdaki

   </body>

   etiketinin üstüne ekliyorsunuz. WordPress için footer.php içerisindedir.

3. Son olarak “Test Your Script” butonuna tıklayarak, kodu doğru yerleştirip yerleştirmediğinizi test ediyorsunuz.

WordPress, Blogger, TypePad gibi sistemler için kodu nasıl ekleyeceğinize dair görsel anlatımlar da mevcut.

Hal böyleyken biz de boş durmadık ve WordPress için geliştirilen WordPress Mobile Pack eklentisi sayesinde CatyCat Mobil Versiyon an itibariyle yayında.

Özellikle yönetim paneline mobil olarak erişim ve farklı tema seçenekleriyle eklenti gayet başarılı denebilir.

Test etmek için cep telefonunuzdan http://www.catycat.net adresine girebilir, görüşlerinizi mobil olarak gönderebilirisiniz.

Biz de bu sevindirici haberden sonra, bloglarımızda en çok değer verdiğimiz yorum bölümünü Twitter ile entegre ederek bu değişime bi nebze olsun ayak uydurmuş olacağız.

Tabii ki çoğu durumda olduğu gibi bu konuyla da ilgili bir Wordpress eklentisi mevcut. Twit Connect isimli eklentiyi indirip, blogumuza kuruyoruz.

Eklentimizi kurup, etkinleştirdikten sonra şu adrese girip, blogumuz için bir Twitter uygulaması yaratıyoruz.

Uygulamamızı hazırladıktan sonra “Consumer key” ve “Consumer secret” anahtarlarını kaybetmiyoruz.
Yönetim Paneli –> Ayarlar –> Twit Connect bölümünde üst taraftaki ilgili alanlara anahtarlarımızı ekliyoruz.
En üstteki “Self-Hosted oAuth requires PHP 5.” kutucuğunu işaretliyip bize sunulan butonlardan beğendiğimiz birini seçtikten sonra ayarlarımızı kaydediyoruz.

Son olarak da kullandığımız temanın comment.php dosyasında aşağıdaki kodu buluyoruz.

<div id="author_info">

Yukarıdaki kodu bulduysak hemen üstüne aşağıdaki kod parçacığını ekliyoruz.

<?php if(function_exists('twit_connect')){twit_connect();} ?>

Yapmanız gerekenler bunlardı. Artık ziyaretçileriniz yorum yaparken Twitter hesaplarını kullanabilecek, avatarları görünecek ve Twitter adresleri link olarak yer alacak. Test sürüşü yapmak isterseniz hemen aşağıdaki yorum bölümünü kullanabilirsiniz.

• Facebook Fan Page ile blogunuz için oluşturduğunuz hayran sayfasına bağlantı.
• Twitter hesabınıza bağlantı ve ziyaretçilerinizin postlarınızı görüp, yorum yapabilecekleri bir bölüm.
• Okuyucularınızın yazılarınızı Facebook, FriendFeed, Twitter, del.icio.us gibi sitelerde paylaşabilmeleri için bir buton.
• Google Translate ile sayfalarınızın farklı dillere çevrilmesini sağlayan bir buton.
• Flicker‘daki fotoğraf albümleriniz için bir kısayol.
• Heyzap flash oyun sitesinden oyunlar.
• Blog yazılarınız için kısayol.
• Blog araması.

Araç çubuğumuzun marifetleri bunlar. Gelelim blogumuza nasıl ekleyeceğimize.

1. Öncelikle Wibiya şu an için beta ve servisi kullanabilmeniz için şuradaki sayfada sağ bölümdeki alanlara gerekli bilgilerimizi girerek davetiyemizin gelmesini bekliyoruz. Benimki 1 gün içinde gelmişti.
2. Verdiğimiz e-posta adresine Wibiya’dan gelen linke tıklayıp 4 adımda kayıt işlemini hallediyoruz. Hesap oluşturma, tema seçimi, kullanacağınız araçlar ve son olarak blogunuza ekleyeceğiniz kod.
3. Wordpress, Blogger ve TypePad için özel olarak hazırlanmış eklentileri kullabileceğiniz gibi, kodu manuel olarak da ekleyebiliyoruz. Bunun için son adımda “Install on other blog platforms” u seçiyoruz.
4. Sağ tarafta bizim için özel bir kod oluşturuluyor ve bu kodu temamızın

   </body>

   etiketinin hemen üzerine ekliyoruz.
   Not: Bu kod Wordpress için temanızın footer.php sayfasında Blogger’da ise kullandığınız şablonunun alt kısmındadır.

Örnek:

<script src="http://toolbar.wibiya.com/toolbarLoader.php?toolbarId=your_id" type="text/javascript">
</script>
</body>

your_id yazan bölümü kendi kodunuza göre uyarlamanız gerekiyor.

Uygulamanın bir örneğini sayfanın altında görebilir, soru, görüş ve yorumlarınızı gönderebilirsiniz.

<html>
<head>
<title>PHP ile Title, Description, Keywords, Thumbnail Alma - CatyCat</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body>
<script language="javascript" src="eyceks/eyceks.js"></script>
<script type="text/javascript">
function get_url(){ 
	var url1 = document.getElementById('url').value;
	url2 = fc_(url1);
	var sc = 'url3='+ url2;
		JXP(1, "info", "get_url.php", sc);
   }
</script>
    <table>
	<tr>
	<td>Website URL:</td>
	</tr>
	<tr>
	<td>http://<input type="text" name="url" id="url"></td>
	<!– Butona tıklandığında get_url() fonksiyonuna değer gönderiyoruz. –>
	<td><input type="button" value="Send" onClick="get_url()"></td>
	</tr>
	</table>
	<span id="info"></span>
</body>
</html>

Oluşturduğumuza sayfada url id’sine sahip input alanındaki değeri “get_url()” isimli fonksiyona gönderdik. Girilen değer fonksiyona girdikten sonra AJAX yardımıyla bu değeri “get_url.php” sayfasına gönderiyoruz. Şimdi get_url.php sayfasını oluşturalım.

<?php
// temizlik
$url3=strip_tags($url3);
 
// http:// kontrolü
$url_control=substr($url3,0,7);
 
if ($url_control!="http://") {
$url3="http://".$url3;
}
 
// title bilgisini alıyoruz.
$file = file($url3);
$file = implode("",$file);
 
if(preg_match("/<title>(.+)<\/title>/i",$file,$m))
        echo '<b>Title:</b> '.$m[1].'<br />';
else
    echo "The page doesn't have a title tag!<br />";
 
// keyword bilgilerini alıyoruz.    
function keywords($site) {
 $metetags = get_meta_tags($site, 1);
 $key = $metetags[keywords];
    if ($key=="") {
        $metetags = get_meta_tags($site, 1);
        $key = $metetags[keyword];
   }
 return $key;
}  
 
// description bilgisini alıyoruz.
 $metetags = get_meta_tags($url3);
 $desc = $metetags['description'];
 
echo '<b>Description:</b> '.$desc.'<br />';
echo '<b>Keywords:</b> '.keywords($url3).'<br />';
 
// website thumbnail
echo "<b>Thumbnail:</b><br />";
$thumboo_api = "your_thumboo_code_here";
$thumboo_url = $url3;
$thumoo_params = "u=".urlencode("http://".$_SERVER["HTTP_HOST"].
$_SERVER["REQUEST_URI"])."&su=".urlencode($thumboo_url)."&c=medium&api=".$thumboo_api;
@readfile("http://counter.goingup.com/thumboo/snapshot.php?".$thumoo_params);
 
?>

Bu sayfada öncelikle girilen adresteki başlık bilgilerini okumak için “file” fonksiyonunu kullandık. Sonrasında sayfada

<title></title>

arattık ve arasında kalanları okuyup sayfanın başlığını öğrenmiş olduk.

İkinci olarak sayfadaki anahtar kelimler için “get_meta_tags” fonksiyonunu kullandık ve bu sayede sayfanın anahtar kelimelerini(keywords) öğrendik. Yine aynı fonksiyon yardımıyla sayfanın açıklama(description) bilgilerini öğrenmiş olduk.

Son olarak sayfanın bir önizleme resmini ekrana dökmek için çeşitli servisler mevcut. Bu uygulama için Thumboo isimli bir aracı kullandım. Aracı kullanmak için servise kayıt olduktan sonra “My Account” bölümünde sizin için oluşturulmuş kodu sağ tarafta “Your API Key” bölümünde görebilirsiniz. O kodu kopyalayıp “your_thumboo_code_here” bölümüne yapıştırıyoruz ve artık girilen adresin önizleme resmini alabiliyoruz.

Uygulamanın bir örneğini CatyCat’te test edebilir dilerseniz bilgisayarınıza indirebilirsiniz.

Test Sürüşü

Download

• Topluluğunuza katılan kullanıcılar yorum yaparak ve puan vererek sitenizin zenginleşmesine imkan veriyor.
• Katılımcılar arkadaşlarını da davet ederek daha çok kişi tarafından tanınmanızı sağlıyor.

Konuyla ilgili bir video da hali hazırda bulunmakta. Youtube’a erişebiliyorsanız aşağıdan izleyebilirsiniz.

Google Friend Connect

Aklınızı çelmeyi başardıysam sizi kurulum ve kullanım aşamasına alabiliriz demektir.

Öncelikle şu adresten Google hesabınızla giriş yapıyorsunuz ve “Set up new sites” butonuna tıkladıktan sonra karşınıza iki seçenek geliyor. Eğer Blogger üzerinden yayın yapıyorsanız “Friend Connect for Blogger blogs” linkine, Wordpress veya normal bir web siteniz varsa da “Friend Connect for standart web sites” linkine tıklıyoruz.

Biz burada normal web siteleri için kurulum aşamasını anlatacağız. Blogger için olanının pek farklı olduğunu sanmıyorum. Bu yol ayrımından sonra 4 adımda kurulum aşamasını bitirmiş olacağız.

Kurulum Aşaması

1. İlk adımda “Site Name” yazan yere sitemizin ismini, “Home URL” yazan bölüme de sitemizin adresini yazıyoruz.
2. Bu adımda rpc_relay.html ve canvas.html adında oluşturulan dosyaları sitemizin ana dizinine yüklüyoruz. Örnek olarak http://www.example.com/rpc_relay.html olacak şekilde.
3. Bu adımda yüklediğimiz dosyaların kontrolü yapılıyor. “Test to finalize setup” butonuna tıklayıp kontorlü yaptırıyoruz.
4. Son adımda ise Google tarafından oluşturulmuş widgetların kodarını (rengini, yazını tipini isteğimize göre düzenleyip) sitemizin istediğimiz bir bölümüne yerleştiriyoruz.

Kurulum aşaması bu kadar basitti.

Social Bar

Google Friend Connect’in sol bölümündeki menüde Social Bar ibaresini görecekseniz. Bu şekilde bir bar yerleştirmek isterseniz yine aynı bölümden ayarlarını yaparak oluşturulan HTML kodunu sitenize yerleştirerek kullanabilirsiniz.

Social Gadgets

Yine aynı menüden Social Gadget’ı seçerek kullanıcılarınızın yorum yazabilecekleri bir duvar uygulaması (Wall Gadget), yıldız derecelendirme sitemi ekleyebileceğiniz Rewrite/Rate Gadget veya dinlediğiniz müzikleri gösterebileceğiniz Playlist Gadget gibi uygulamaları aynı yöntemle ekleyebilirsiniz.

Uygulamanın bir örneğini CatyCat’de görebilir, dilerseniz CatyCat topluluğuna katılarak dünyayı beraber keşfetmeye çıkabiliriz.

Güncelleme (24.07.2009):
Google Friend Connect – WordPress entegrasyonu için bir eklenti mevcut. Ayrınıtlı bilgi almak ve indirmek için buradan.

Blog Ödülleri

CatyCat’e oy vermek için buradan

Teknoloji Blogları kategorisine göz atmak için buradan

Facebook Connect

Eklentiyi indirip, kurulum işlemlerini bitirdikten sonra blogumuzun yönetim panelinden ayarlar bölümüne Facebook Connect sekmesi eklenmiş olması gerekiyor. Ayarlar sayfasında bizden bir API Key ve Secret Key istiyor. Bu keyleri alabilmek için bir Facebook hesabımızın olması gerekiyor. Sonrasında Facebook Uygulama Oluşturma sayfasına giderek yeni bir uygulama oluşturuyoruz.

Facebook uygulamamızı oluşturduktan sonra ekranda bize özel API Key’i ve Secret Key’i Wordpress admin panelindeki Facebook Connect bölümüne giriyoruz.

Bu bilgileri girdikten sonra Facebook uygulamamızın olduğu sayfada Connect bölümünde Connect URL bölümüne blogumuzun urlsini giriyoruz.

Bu uğraştırıcı hareketlerden sonra blogumuzda kullandığımız temanın comment.php dosyasını açıyoruz ve yorum gönderme formunun uygun bir yerine aşağıdaki kodları ekliyoruz.

<?php do_action('fbc_display_login_button') ?>

Eğer yorum gönderme formunu bulamdıysanız eklediğiniz kodun şu şekilde bir görünümde olması gerekiyor.

<?php if ( $user_ID ) : ?>
 
... <?php else : ?> .... <?php endif; ?>
<?php do_action('fbc_display_login_button')  ?>

Evet yapmamız gereken bu kadardı. Artık kullanıcılarınız yorum yapmak için Facebook hesaplarını kullanabilirler. Örnek bir uygulama için bu sayfanın yorum gönderme bölümünü deneyebilirsiniz

• Herşeyden önce ücretsiz bir servis.
• Bana göre çok işlevsel görünen bir özelliği var ki, websitelerine eklenen bu servis sayesinde önceden taranmış kitapların dijital ortama aktarılmasına yardımcı oluyorsunuz. Ayrıntılı bilgi için buradan.
• Kullanıcılar kelimleri okuyamadığında ses desteği de mevcut.
• Güvenilirdir. Diğer CAPTCHA yöntemleri kırılabilirmiş.
• 100.000′ e yakın websitesi reCAPTCHA’ yı kullanıyor. En bilinenleri ise Facebook, Ticketmaster ve Craigslist.
• Son olarak kullanımı kolay ve çeşitli diller için dökümanlar mevcut.

Evet bu kadar hikayeden sonra gelelim servisi nasıl kullanacağımıza. Öncelikle buraya tıklıyoruz ve formu doldurduktan sonra servise üye oluyoruz. Sonrasında karşımıza gelen ekranda Domain yazan bölüme sitemizin adresini (eğer birden fazla websiteniz var ve hepsinde kullanmak istiyorsanız “Enable this key on all domains (global key)” yazan kutucuğu işaretliyoruz.) yazıyoruz ve “Create Key” yazan butona tıklıyoruz. Bu işlemleri bitirdikten sonra daha sonra kullanacağımız Public Key ve Private Key bilgileri ekrana geliyor.

Bu işlemleri de bitirdikten sonra bizim için asıl önemli aşamaya geçiyoruz. Websitenizde kullandığınız programlama diline göre veya kullandığınız sisteme göre reCAPTCHA’yı nasıl ekleyeceğiniz kaynaklar bölümünde detaylıca verilmiş.

Biz PHP dili için örnek bir uygulama yapalım.

İlk adımda PHP reCAPTCHA kütüphanesini indiriyoruz. Download

Sonrasında sıkıştırılmış dosyayı açıyor ve formun barındığı dizine kopyalıyoruz.

Şimdi formun bulunduğu PHP sayfasına aşağıdaki kodları ekleyeceğiz. Bu güvenlik kodunun görünmesini sağlayacak.

require_once('recaptchalib.php');
$publickey = "..."; // servise üye olduktan sonra aldığımız Public Key
echo recaptcha_get_html($publickey);

Tabii bir de bunun doğruluğunu kontrol etmemiz gerekiyor. Formu kontrol ettiğimiz PHP sayfasına da aşağıdaki kodları ekliyoruz.

require_once('recaptchalib.php');
$privatekey = "..."; // Servise üye olduktan sonra aldığımız Private Key
$resp = recaptcha_check_answer ($privatekey,
                                $_SERVER["REMOTE_ADDR"],
                                $_POST["recaptcha_challenge_field"],
                                $_POST["recaptcha_response_field"]);
 
if (!$resp->is_valid) {
  die ("Güvenlik kodu doğru  girilmedi. Geri dönün ve tekrar deneyin" .
       "(reCAPTCHA said: " . $resp->error . ")");
}

Örnek bir uygulama için buradan.
Örneği dosya halinde indirmek isteyenler için. Download

Güncelleme(23.07.2009):
WordPress – reCAPTCHA entegrasyonu için bir eklenti hali hazırda mevcut. reCAPTCHA ile oluşturulmuş güvenlik kodunu yorum göndermede, sayfalarda veya yazılarınızda kullanabilirsiniz. Eklenti ile ilgili ayrınıtılı bilgi almak ve indirmek için buradan.

Soru, görüş ve önerileriniz için ne yapmanız gerektiğini biliyorsunuz

under-construction

Uzun uzun zaman oldu blogla ilgilenmeyeli. Hızlı başlamıştım ve haliyle bir zaman sonra bıkkınlık gelmişti ama nihayet döndüm ki ne döndüm. Biliyorum yine hızlı bir dönüş oldu ama aylardan sonra gelen isteğimi kaçırmak istemedim. Neyse bu kadar edebiyat yeter. Gelelim neler yaptığıma.

• Öncelikle daha önce kullandığım Blogger hesabımın yedeğini aldım ve kendi host ve alanıma geçmemin iyi olacağını düşünerek Turhost ‘dan 1000 Mb kapasiteli bir alan satın aldım. Kendilerine güvenli ve hızlı servisleri için teşekkür ediyorum.
• Sonrasında efendim zamanında az biraz ilgilendiğim Wordpress’ e dönüş yaptım ve bildiğiniz gibi kolay bir kurulumdan sonra düzenlemeye geçtim.
• Birkaç denemeden sonra ZinePress temasında karar kıldım ve Türkçeleştirmeyi de RSS-EMS‘ nin katkılarıyla düzenleyerek yayınladım.
• Tema işini de bitirdikten sonra anasayfada yazıların solundaki resimleri düzenledim.
• Malum arada PHP ile ilgili yazılar da yazıyorum ve kodların düzenli ve anlaşılır görünmesi için WP Syntax eklentisi kurdum.
• Weblogların olmazsa olmazı iletişim formunu da WP Contact Form eklentisini Türkçeleştirerek bloga ekledim.
• Yine Wordpress’in önemli eklentilerinden WP Page Navi’ yi bloga entegre ettim.
• SEO için de All in One SEO Pack eklentisini kurdum ve gerekli ayarlarını yaptım.
• Sitemap için de Google XML Sitemap eklentisini kurdum ve aktifleştirdim.

Evet, yaptıklarım genel hatlarıyla bu şekildeydi. Ama bitti mi? Tabii ki hayır. Daha yapılacak çok iş var ama zamanla onları da halledeceğim. Bunlardan en göze çarpanı ise Logo. İğrenç göründüğünün farkındayım ama malum Photoshopla ilgilenmek gerekiyor.

Şimdilik benden bu kadar. Eklentilerle ve diğer bahsettiklerimle ilgili sormak istediklerinizi yorumla veya iletişim sayfasını kullanarak sorabilirsiniz. Sağlıcakla kalın…

PHP uygulama geliştiricileri için Localhost’da çalışmanın vazgeçilmez olduğu bir gerçektir. Projelerimizi hazırlarken olmazsa olmazlardan birisi deneme aşamasıdır ki bu noktada bizlerin imdadına Local’de çalışan PHP sunucuları yetişir. Normal bir PHP + MySQL sunucusu kurmak bir hayli zahmetli olduğundan, farklı işletim sistemlerinde çalışabilen hazır PHP + MySQL sunucuları piyasada cirit atıyor. Bunlardan en bilinenleri Easy PHP ve XAMPP.

Ben yine bunlar kadar popüler olmamasına rağmen, gerek PHP ve MySQL’in en son sürümlerini barındırması, gerekse işlevselliği bakımından AppServ‘ü tercih ediyorum ve sizlere de kullanmanızı tavsiye ediyorum. Bu kadar açıklamadan sonra ikna olduysanız sizleri kurulum ve kullanım aşamasına alabiliriz.

Öncelikle şu adresten AppServ’ ün 2.5.10 sürümünü indiriyoruz. Bu sürümün barındırdığı özellikler ise şöyle:

• Apache 2.2.8
• PHP 5.2.6
• MySQL 5.0.51b
• phpMyAdmin-2.10.3

Programın kurulumu gayet basit. Normal bir program kurar gibi ilk 4 adımda “Next” diyerek ilerliyoruz. 5. adımda ise bizi aşağıdaki gibi bir pencere karşılıyor.

Server Name: localhost

Administrator’s Email Address: sallama bir e-posta adresi yazalım.

Apache HTTP Port: Zaten 80 olarak geliyor, dokunmayalım.

6. adımda ise bizi aşağıdaki gibi bir pencere karşılıyor.

Bu adımda bizden MySQL hesabımız için şifre isteniyor. Şifremizi iki defa yazdıktan sonra karakter setine de dokunmadan kurulum işlemini hallediyoruz. Bu arada phpMyAdmin için varsayılan kullanıcı adımız “root” ve şifremiz ise bu ekranda yazdığımız şifre.

Kurulum işlemi gördüğünüz gibi bu kadar basit. Şimdi projelerimizde AppServ’ ü nasıl kullanacağımıza bakalım.

AppServ’ e ait tüm dosyalar C:\AppServ klasörü içerisinde. Bu klasörlerden bizim işimize en çok yarayacak olan “www” klasörü. Tavsiyem bu klasörü masaüstüne kısayol olarak gönderip, zaman kaybından kurtulmanız.

“www” klasörü içerisine projemize ait dosyaları kopyaladıktan sonra tarayıcımızın adres satırına http://127.0.0.1/ veya http://localhost/ yazarak ana dizinimize ulaşabiliyoruz. Eğer projenizi “www” klasörü içerisinde “deneme” isimli bir klasörde topladıysanız yazmamız gereken adres http://127.0.0.1/deneme.

phpMyAdmin kontrol paneline ulaşmak içinse tarayıcımızın adres satırına http://127.0.0.1/phpmyadmin/ veya http://localhost/phpmyadmin/ yazıyoruz. Varsayılan kullanıcı adımız root ve şifremiz ise kurulumda girdiğimiz şifre.

Artı olarak programın bir destek forumu bulunuyor ve forumun Türkçe Destek bölümüne şu adresten ulaşabilirsiniz.

AppServ kurulumu ve kullanımı özet olarak bu şekilde. Biraz kurcalayarak programın ayrıntılarını öğrenebilirsiniz. Bu kadar anlatımdan sonra sıra projelerimizi oluşturmaya geldi. İşin en kolay kısmı bitti. Zor yanı ise daha yeni başlıyor

Google bir süredir beklenen web tarayıcısını nihayet kullanıma sundu. Önceleri işletim sistemi, daha sonraları cep telefonu derken Google Chrome ile bu sefer tarayıcı alanında bir yenilikle bizlere çeşitlilik sağlandı.

Şu anda bu yazıyı Google Chrome kullanarak yazıyorum ve ufak tefek hatalar dışında biraz Firefox biraz Safari karışımı bir tarayıcı gibi görünüyor. Bu kadar genel bilgi yeterliyse ayrıntılara geçme vakti gelmiştir.

Öncelikle yeni tarayıcımız açık kaynak ve tüm uygulama geliştiricilere sunulmuş durumda. Bu alanda deneyimli olanlar, inceleyip daha detaylı bilgiyi verebilirler.

Google Chrome şu an için Beta aşamasında ve henüz Linux ve Mac uyumlu değil. Sadece Windows ortamında deneme imkanına sahibiz.

Kişisel fikrim bu taraycının zamanla kendini kabul ettireceği ve Firefox kadar olmasa da özellikle açık kaynak taraftarlarınca destekleneceği yolunda.

Google Chrome’u İndir

Google web geliştiricileri de düşünmüş ve sık sorulan sorular (SSS) hakkında bir sayfa hazırlamış. [şuradan]

Benim Google Chrome ile ilgili bildiklerim, düşündüklerim bunlar. Peki siz nasıl buldunuz yeni nesil tarayıcımızı?

Bu aralar Blogger‘ da hareketlilik var sanki. Önce yazılara yıldız derecelendirme özelliği geldi ve ardından yazılara yönelik tepkileri ölçmek için hazırlanan “Tepkiler (Reactions)”, Blogger‘ ın yapım aşamasında olan özelliklerini anlattığı Blogger in Draft blogunda duyuruldu. [kaynak] Bol bağlantılı girizgahtan sonra gelelim bu özelliği nasıl kullanmamız gerektiğine. Yazının orjinaline şu adresten ulaşabilirsiniz. Öncelikle bu özellik halen Beta aşamasında olduğu için Blogger kontrol paneli olarak Blogger Taslak‘ ı kullananlar görebilir. Normla kontrol panelini kullananlar Blogger Taslak adresinden aynı kullanıcı adı ve şifresiyle giriş yaparak Beta özellikleri kullanmaya başlayabilirler. Bu aşamayı geçtikten sonra Kontrol Paneli -> Yerleşim -> Blog Yazılarını Düzenle linkine tıklayıp, çıkan pencereden Tepkiler kutucuğunu işaretleyip, yandaki alana da seçenekleri girdiğinizde işlem tamam olacak.

Eğer benim gibi varsayılan temalardan değil de özelleştirilmiş Blogger temalarından kullanıyorsanız bu işlemi yaptıktan sonra şu yönergeleri izleyin. 1. Öncelikle “Widget Şablonlarını Genişlet” kutucuğunu işaretliyoruz. 2. Şablonda aşağıdaki kodun geçtiği yeri buluyoruz. Bulamazsanız aradığımız yer yazıların bitip, yorumların başladığı alan.

<data:post.body>

3. Yukarıdaki kodu veya aradığımız yeri bulduktan sonra aşağıdaki kodu hemen altına ekliyoruz.

1

 <span class="reaction-buttons"> <table border="0" cellpadding="0" width="100%"> <span class="reactions-label"> <data:top.reactionsLabel/> </span></td> <td> <iframe allowtransparency='true' class='reactions-iframe' expr:src='data:post.reactionsUrl' frameborder='0' name='reactions' scrolling='no'/> </td></tr></table></b:if></span>

+ olarak eğer şablonunuz renk seçimlerini düzenlemeye müsait ise siz de aşağıdaki örneklerde olduğu gibi farklı tasarımlar geliştirebilirsiniz.

Bu özellikle ilgili kişisel görüşümü soracak olursanız, bir yazıya birden fazla tepki verilebilmesi, futbolda bir tabir vardır hani “düşünce güzel”, demekten öteye gitmez. Yine de güzel bulanlar, yukarıda anlatılan şekilde dilediklerince kullanabilirler.

Web projeleri geliştirme aşamasında sıfırdan metin düzenleme fonksiyonları yazmak zor gelir. Üstelik üst düzey işlemler (tablo, renk vb.) için vakit harcamak gereksizdir. Dünyayı yeniden keşfetmenin gereksiz olduğuna inananlardansanız, daha önceden hazırlanmış zengin metin editörlerini kullanabilirsiniz. Bunlardan en bilinenleri TinyMCE ve FCKeditor‘ dür.

openWYSIWYG ise az bilinmesine rağmen, gerek  hız gerekse işlevsellik bakımından anlatmayı uygun gördüğüm kullanışlı bir metin editörü. Bu kadar bilgiden sonra gelelim kurulumuna ve nasıl kullanmamız gerektiğine.

Öncelikle şu adresten editörümüzün dosyalarını indiriyoruz ve sıkıştırılmış klasörü açıp projemizin uygun bir yerine yerleştiriyoruz. Daha sonra hangi sayfada textarea etiketini zenginleştirmek istiyorsak, o sayfadaki herhangi bir yere aşağıdaki kodları ekliyoruz.

1
2
3
4

<script language="JavaScript" type="text/javascript" src="scripts/wysiwyg.js"></script>
<script language="javascript1.2">
   WYSIWYG.display('all');
</script>

Unutmamanız gereken sayfanızdaki textarea elementine id değeri vermeniz. Örnek kullanım için aşağıdaki örneğe bakabilirsiniz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<html>
<head>
<title>
openWYSIWYG Kurulumu-Kullanımı - ERsin HAN
</title>
<script language="JavaScript" type="text/javascript" src="scripts/wysiwyg.js"></script>
<script language="javascript1.2">
   WYSIWYG.attach('all');
</script>
</head>
<body>
<form action="kaydet.php" name="form1" method="post">
<textarea id="textarae1" name="textarea1" width="20" height="100">
</textarea>
</form>
</body>
</html>

Bu şekilde standart olarak gelen fonksiyonları kullanabiliriz. Gelelim editörümüzü özelleştirmeye.

Özelleştirmelere başlamadan önce kodlarda ufak değişiklikler yapmamız gerekiyor. Önceden eklediğimiz

1

<script language="JavaScript" type="text/javascript" src="scripts/wysiwyg.js"></script>

kodunun hemen altına aşağıdaki kodu ekliyoruz.

1

<script language="JavaScript" type="text/javascript" src="scripts/wysiwyg-settings.js"></script>

Daha sonra yine önceden eklediğimiz

1
2
3
4

</script>
<script language="javascript1.2">
   WYSIWYG.attach('all');
</script>

bu kodu da aşağıdaki şekilde değiştiriyoruz.

1
2
3
4
5

<script language="javascript1.2">
var ayarlar = new WYSIWYG.Settings();
ayarlar.addToolbarElement("<element>", <toolbar>, <position>);
WYSIWYG.attach('all', ayarlar);
</script>

Yukarıda örnek olarak editörümüzdeki butonların yerlerini ayarladık. Örnek olarak “Kalın” butonunun yerini 3. satır 1. sıraya almak istersek aşağıdaki değerleri giriyoruz.

ayarlar.addToolbarElement(“bold”, 3, 1);

Editörünüzden herhangi bir butonu kaldırmak isterseniz eklemeniz gereken kod şu şekilde:

mysettings.removeToolbarElement(“<element>”);

Kullanabileceğiniz tüm butonların isimleri:

font, fontsize, bold, italic, underline, forecolor, backcolor, justifyleft, justifycenter, justifyright, unorderedlist, orderedlist, outdent, indent, subscript, superscript, cut, copy, paste, removeformat, undo, redo, inserttable, insertimage, createlink, seperator, undo, redo, seperator, preview, print, viewSource, help

openWYSIWYG standart olarak resim yükleme özelliğini barındırmıyor. Ancak son sürümle beraber gelen bir eklentisi sayesinde bir kaç ufak kod değişikliği ile resim yükleme özelliğini kazandırabiliyoruz. Yine standart scriptimiz wysiwyg.js ve özellik değiştirme scripti wysiwyg-settings.js’ yi çağırdıktan sonra bu koldarın altına aşağıdaki kodları ekliyoruz.

1
2
3
4
5
6
7
8
9
10
11
12

<script language="javascript1.2">
var ayarlar = new WYSIWYG.Settings();
 
// openImageLibrary eklentisinin konumunu belirtiyoruz.
ayarlar.ImagePopupFile = "addons/imagelibrary/insert_image.php";
// Resim yükleme ekranının genişliği.
ayarlar.ImagePopupWidth = 600;
// Resim yükleme ekranının yüksekliği.
ayarlar.ImagePopupHeight = 245; 
// textarea1 elementine ayarları uygulatıyoruz.
  WYSIWYG.attach('textarea1', ayarlar);
</script>

Resim yükleme ile ilgili dizin, dosya boyutu, uzantı kontrolü gibi ayarları addons/imagelibrary/config.inc dosyasından düzenleyebilirsiniz.

Örnekleri dosya halinde indirmek için buradan.

Özgün web sitelerinde sık kullanılan bir özellik olmamasına rağmen, bazı sitelerde – özellikle forumlarda – birden fazla logo veya banner dönüşümlü olarak gösteriliyor. Kendi adıma pek tavsiye etmesemde, üzerinde epey zaman harcayıp, emek verip hazırladığınız üstelik hangisini seçeceğinize karar veremediğiniz bir durumda kullanmanızın bir sakıncası yoktur.

Rastgele logo veya banner gösteriminde PHP ve kankası MySQL’i kullanacağız. Sözü daha fazla uzatmadan kolları sıvayıp, kodlarımızı yazmaya başlayalım.

Daha basit olarak elimizdeki logoların URL’ lerini bir diziye aktarıp, diziden rastgele bir logo seçerek de, dönüşümlü logo yayınlayabiliriz. Ancak ileride logo gösterimleriniz için (düzenleme, silme, ekleme vb.) yönetici arayüzü tasarlamak isterseniz, logoların URL’ lerini veritabanına kaydetmenin faydalarını görürsünüz.

Öncelikle phpMyAdmin’ de logo isminde bir tablo yarartıyoruz ve içerisine id ve url isimli 2 sütun ekliyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

CREATE TABLE `logo` (
`id` int(10) NOT NULL AUTO_INCREMENT,
`url` varchar(100) NOT NULL,
PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=5 ;
 
-- 
-- Tablo döküm verisi `logo`
-- 
 
INSERT INTO `logo` VALUES (1, 'logo/logo1.jpg');
INSERT INTO `logo` VALUES (2, 'logo/logo2.jpg');
INSERT INTO `logo` VALUES (3, 'logo/logo3.jpg');
INSERT INTO `logo` VALUES (4, 'logo/logo4.jpg');

Tablomuzu oluşturduktan sonra sıra geliyor PHP ile bu logoları rastgele yayınlamaya. Aşağıdaki örneği incelersek, ne kadar basit ve kısa bir uygulama olduğunu görebiliriz.

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?
 
$db_host = "localhost"; // Genelde localhost
$db_kullanici = "root"; // Veritabanı kullanıcı adı
$db_sifre = "******";   // Veritabanı şifresi
$db_adi = "deneme";     // Veritabanı adı
 
$baglanti=mysql_connect($db_host, $db_kullanici, $db_sifre);
mysql_select_db($db_adi);
 
if(mysql_errno())
{
echo 'Veritabanına bağlanılamıyor ...';
exit;
}
 
$sorgu=mysql_query ("SELECT * FROM logo ORDER BY RAND() LIMIT 1"); 
// Tablodaki logolardan rastgele 1 tane seçtik.
$dizi=mysql_fetch_array ($sorgu);
echo "<a href='http://www.siteismi.com/'><img src='$dizi[url]' alt='Anasayfa' /></a>";
 
mysql_close($baglanti);   
?>

Burada önemli olan ORDER BY RAND() LIMIT 1 ifadesi. ORDER BY RAND(), SQL dilinde tablodaki kayıtları rastgele sıralamamızı sağlıyor. LIMIT 1 ifadesi ise sıralanan kayıtlardan birincisini seçmemize yarıyor.

Konu ana hatlarıyla bu şekilde ve geliştirilmeye müsait. Soru, görüş ve önerilerinizi yorum olarak gönderip, mümkün olan en kısa zaman içerisinde yanıt alabilirsiniz.

Uzun bir aradan sonra nihayet yeni bir yazı yazıp, sizlerle paylaşma fırsatı buldum. Hemen konuya geçecek olursak PHP ile ilgilenmeye yeni başlayanların sık karşılaştığı bir sorun olan sayfalama tekniği. Google‘ dan aşina olduğumuz bu teknik, özellikle forumların ülkemizde yaygınlaşmasıyla heryerde görünür hale geldi. Çok fazla veri içeren tabloların ekrana sunumunda kullanıcıya büyük kolaylık sağlayan bu tekniği bir örnekle anlamaya çalışalım.

İlk olarak phpMyAdmin’de  id, başlık ve metin alanları bulunan basit bir tablo yaratıyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

CREATE TABLE `veriler` (
  `id` int(10) NOT NULL AUTO_INCREMENT,
  `baslik` varchar(100) NOT NULL,
  `metin` text NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=7 ;
 
-- 
-- Tablo döküm verisi `veriler`
-- 
 
INSERT INTO `veriler` VALUES (1, 'selam', 'selam selam');
INSERT INTO `veriler` VALUES (2, 'merhaba', 'merhaba merhaba');
INSERT INTO `veriler` VALUES (3, 'naber', 'naber naber');
INSERT INTO `veriler` VALUES (4, 'iyidir', 'iyidir iyidir');
INSERT INTO `veriler` VALUES (5, 'görüşürüz', 'görüşürüz görüşürüz');
INSERT INTO `veriler` VALUES (6, 'tamam', 'tamam tamam');

Tablomuzu oluşturduktan sonra aşağıdaki örneği inceleyerek basit bir sayfalamanın nasıl yapıldığını görebilirsiniz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<?
 
  $db_host = "localhost"; // Genelde localhost
  $db_kullanici = "root"; // Veritabanı kullanıcı adı
  $db_sifre = "******";   // Veritabanı şifresi
  $db_adi = "deneme";     // Veritabanı adı
 
  $baglanti=mysql_connect($db_host, $db_kullanici, $db_sifre);
  mysql_select_db($db_adi);
 
  if(mysql_errno())
  {
    echo 'Veritabanına bağlanılamıyor ...';
    exit;
  }
 
  if (empty($sayfa)) { // İlk açılışta sayfayı 1 yapıyoruz.
  $sayfa=1;
  }
  $sayfa=$sayfa-1;
  $kayit=5; // Her sayfada kaç kayıt olacağını belirtiyoruz.
  $baslangic=$sayfa*$kayit; 
  $bitis=$baslangic+$kayit;
 
  $sorgu=mysql_query ("SELECT * FROM veriler LIMIT $baslangic, $bitis");
  echo "<div id='sonuclar' style='width:500px;'>
  <h3>Veriler</h3>";
  while ($dizi=mysql_fetch_array($sorgu)) { // Bu bölümde verileri sıralıyoruz.
  echo "<b>$dizi[baslik]</b>
  <br />$dizi[metin]<br /><hr>";
  }
  echo "</div>";
 
  $sorgu2=mysql_query ("SELECT * FROM veriler");
  $say=mysql_num_rows($sorgu2); // Toplam kayıt sayısını buluyoruz.
 
  $j=1;
  for ($i=0; $i<$say; $i=$i+$kayit) { // Döngü sayfada gösterilecek veri sayısı kadar artıyor.
  echo "<a href='index.php?sayfa=$j'>$j</a> ";
  $j++;
  }
 
  mysql_close($baglanti);    
?>

Örneği indirmek için

Konu hakkında soru, görüş ve önerilerinizi ısrarla bekliyorum.

blogger logo

Blogger ile ilk ilgilenmeye başladığım sıralarda bu kadar fazla özelliği olduğunu düşünmüyordum. Ücretsiz bir servis olduğu için istediğim değişiklikleri yapamayacağımı düşünürken birazcık araştırmayla birçok özelliği bloga ekleyebileceğimi gördüm. Temalar, eklentiler, widgetler, hack vb. yöntemleri ile dilediğiniz gibi blogunuzu özelleştirebiliyorsunuz.

Bu yazıda blogda ne gibi düzenlemeler yaptım onlardan bahsedeceğim.

• Öncelikle blogumu Google Web Yöneticisi Araçları‘ na kaydettim. Bu sayede ziyaretçilerin hangi anahtar kelimeler ile bloga ulaştıklarını görebiliyor, hangi yazıların sisteme eklendiğini, hatalı sayfaları vb. görebiliyorum. Ayrıca RSS sayesinde sitemap ekleyip, yazılar yayınlandığı anda sisteme ekleniyor.
• Sonrasında bloguma Google Analytics kodlarını ekledim. Bu sayede bloga giren ziyaretçilerin ayrıntılı olarak sayısını, tarayıcılarını, konumlarını, blogda kalma süreleri gibi birçok detayı görebiliyorum.
• JotForm‘ u kullanarak bloga bir iletişim formu ekledim. Blogger’ ın bence önemli bir eksikliği bu.
• favicon.ico Generator kullanarak bir favicon ekledim fakat biraz acemice göründüğünün farkındayım
• Şurada hakkında bilgi verdiğim Logoease‘ yi kullanarak bir logo hazırladım. Fena da durmadı hani.
• SEO uyumluluğu açısından tavsiye edilen “Devamını Oku” şeklinde bir bağlantı vererek yazıların bir kısmını anasayfada yayınlamayı şu adresteki yönergeler sayesinde uyguladım.
• Yayınladığım yazılara oy vererek derecelendirme sistemini woork‘ un şu adresteki yazısından bloga uyarladım.
• Artık hemen hemen her yerde bahsedilen “Yorum formunu sayfa içine alma” yı kullandığım temada varsayılan olarak gelmesine rağmen biraz düzenleyerek hallettim.
• Blogda yayınlanan son yazılar ve son yorumları blogun RSS adresinden çekmek suretiyle sağ sütuna ekledim.
• Son olarak aslında ilk yaptığım şeylerden biri olan kullandığım temayı Türkçeleştirdim ve bazı ufak hatalarını gidermeye çalıştım hatta bazı eksiklikleriyle hala uğraşıyorum. Örneğin İnternet Explorer’ da sağ üstteki RSS ikonu görünmüyor.

Bu kadar düzenlemeden sonra bayağı bir süre tema işleriyle uğraşmam artık diye içimden geçiriyorum ama gözüme kullanışlı bir eklenti çarptığı anda yine el atacağım gibi görünüyor. Sıraladığım eklenti veya düzenlemelerden anlatmamı istediğiniz olursa ayrı bir yazıda bu konulardan bahsedebilirm. Benden bu kadar, sağlıcakla kalın.

contact form

index.html

1
2
3
4
5
6
7
8
9
10
11
12
13

<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>PHP ile Formları Aynı Sayfada Dönderme - ERsin HAN</title>
  </head>
  <body>
<form name="form1" action="kaydet.php">
<input type="text" name="isim" value="">
<input type="submit" name="submit" value="Gönder!">
</form>
  </body>
</html>

Formumuzu oluşturduktan sonra bu formdaki değerlerin okunacağı kaydet.php sayfasını oluşturalım.

kaydet.php

1
2
3
4
5
6

<?php
$isim=$_POST["isim"];
$soyisim=$_POST["soyisim"];
...
// Değişkenlerimizi aldıktan sonra işlemlerimiz buradan devam ediyor.
?>

Gördüğünüz gibi normal bir formdan verileri aldık ve işlemleri yaptık ama bu basit işlem için 2 ayrı sayfa kullanmış olduk. Şimdi bu iki sayfayı nasıl birleştirip, işlemleri tek bir sayfada halledebiliriz ona bakalım.

birlesmis.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

<?php
if ($submit==false) { // Submit isimli buton tıklanmamışsa formu ekrana basıyoruz.
?>
<form name="form1" action="<? echo $PHP_SELF; ?>" method="post">
İsim: <input type="text" name="isim" value="">
Soyisim: <input type="text" name="soyisim" value="">
<input type="submit" name="submit" value="Gönder!">
</form>
<?
}
if ($submit==true) { // Submit isimli buton tıklanmışsa işlemlerimi yapıyoruz.
$isim=$_POST["isim"];
$soyisim=$_POST["soyisim"];
...
// Değişkenlerimizi aldıktan sonra işlemlerimiz buradan devam ediyor.
}
?>

Örnekte görüldüğü gibi formdaki submit butonuna verdiğimiz isimle formun gönderilip($submit==true) gönderilmediğini ($submit==false) anlayabiliyoruz. Submit butonu tıklanmadıysa formu gösteriyoruz. Tıklandıysa yani form gönderildiyse, işlemlerimizi yapıyoruz.

Bu işlem genel hatlarıyla bu şekilde. Soru, görüş ve önerilerinizi yorum olarak gönderebilirsiniz.

Logoease online olarak logo veya banner oluşturabileceğiniz bir site. 3 adımda size özel logonuzu yaratabilirsiniz. İlk olarak çeşitli kategoriler altında size sunulan seçeneklerden en uygununu seçiyorsunuz. Daha sonra düzenleme ekranında renk, yazı ve arkaplan öğelerini düzenledikten sonra son olarak çalışmanızı kayıt olurken verdiğiniz e-posta adresine .jpg, .png, .tiff formatlarında 3 farklı boyutta gönderiyorlar. Örnek görmek isterseniz şu adresteki daha önceden hazırlanmış logolara bakabilirsiniz. İlaveten bu blogda gördüğünüz logo da Logoease kullanılarak hazırlandı.

Stripemania

Stripemania web siteleri için genellikle arkaplanlar için kullanılan resimleri oluşturabileceğiniz kullanışlı bir araç. Size uygun olan renkleri (background color), çizgi kalınlığını (stripe width), çizgiler arasındaki boşluğu (spacing width) seçtikten sonra, hazırladığınız arkaplanı normal veya transparan hallerini bloglarınızda veya sitelerinizde kullanabilirsiniz. Örnekler için buradan, nasıl kullanabileceğiniz öğrenmek için ise Tutorials linkine bakabilirsiniz.
Form Style Generator

Form Style Generator ile formlarınıza güzellik katabilir, Web 2.0 görünümüne sokabilirsiniz. Sol taraftaki “design” bölümünden formunuzun rengini (design.your background), çizgi stilini (design.your border), formunuzun yazı tipini (design.your font and text) kendinize uygun biçimde seçebilirsiniz. Ayrıca form elamanlarınızın onHover ve onFocus olaylarında arkaplan rengi, çizgi rengi vb. özelliklerini değiştirerek kullanıcı dostu bir görünüm sağlayabilirsiniz.

Tüm işlemlerinizi bitirdikten sonra “Download” linkine tıklayarak CSS kodunuzu alıp kendi CSS kodlarınızı altına ekleyip, gerekli düzenlemeleri yaptıktan sonra istediğiniz gibi kullanabilirsiniz.

My Cool Button

My Cool Button isminden de anlaşılacağı gibi bir buton oluşturma aracı. Bu tip sitelerdeki genel kurala uygun olarak önce butonunuzun şeklini (shape) seçiyorsunuz. Daha sonra Web 2.0 renklerinden veya kendi HEX kodunuzu girerek renginizi (colors) belirtiyorsunuz. Son olarak ise kullanacağınız yazı fontunu (text) seçtikten sonra butonunuz hazır hale geliyor. Artı olarak butonunuza ikon eklemek isterseniz (Örneğin RSS, Youtube, Flicker vb.) hazır ikonlardan birini seçebilir veya kendi ikonunuzu upload edebilirsiniz. Örnekleri görmek isterseniz Demo bölümüne bakabilirsiniz.

NOT: Butondan kasıt resim tabanlı link vermedir. Ayrıntılı bilgi için aşağıdaki örneği inceleyebilirsiniz.

<a href="http://feeds.feedburner.com/ersinhan">
<img src="http://www.host.com/rozet.png" title="RSS ile takip et!" />
</a>

Yukarıdaki kodların ekran çıktısı yandaki gibi olacaktır.

Web 2.0 Badges

Web 2.0 Badges siteleriniz için “badge” olarak adlandırılan rozetler hazırlamanızı sağlayan web tabanlı bir araç. Önceden hazırlanmış şekillerden birini seçerek rozetinizi hazırlamaya başlıyorsunuz. Daha sonra içerisine ekleyeceğiniz yazıyı, yazının fontu rengi vb. özellikleri ayarladıktan sonra önizlemede baktığınız resme “sağ tıklayıp” kaydedebilirsiniz. Örnekler için sitenin en altına bakabilir veya eburhan‘ ın 2. versiyon temasına bakabilirsiniz. Hazırladığınız rozeti sürükle-bırak tekniğiyle nasıl oluşturacağınızı ise buradaki yazısında anlatmış.

Sanırım bugünlük bu kadar araç tanıtımı yeterli. Bu araçları tanıyın, kullanan kullana eskitin o zaman alternatiflerini, daha yenilerini anlatmaya, bulmaya çalışırım. Şimdiden hepinize kolay gelsin.

Artık arama formunu içeren sayfamızı oluşturmanın vakti geldi.

index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title>Arama Formlarına Anahtar Kelime Önerileri Ekleme - ERsin HAN</title>
  <script language="javascript" src="eyceks.js"></script>
<script type="text/javascript">
function oneriler(){ 
    var gelen = document.ara.aranan.value;
    var gelen = fc_(gelen);
    var sc = 'ara='+ gelen;
        JXP(1, "sonuclar", "oneriler.php", sc);
        e=document.getElementById('sonuclar');
        e.style.display="block";
   }
</script>
  </head>
  <body>
<form name="ara" method="post" action="ara.php">
<input type="text" name="aranan" onkeyup="oneriler()"> <!-- Fonksiyonumuzu çağırıyoruz. -->
<input type="submit" value="Ara">
</form>
<div id='sonuclar'></div> <!-- Fonksiyondan gelen kelimelerin gösterileceği alan. -->
  </body>
</html>

Sayfamızı oluşturduktan sonra formun anlık okunacağı oneriler.php sayfasını oluşturmadan önce anahtar kelimeler içeren tablomuzu veritabanında oluşturuyoruz.

CREATE TABLE `a_kelime` (
  `id` int(5) NOT NULL AUTO_INCREMENT,
  `icerik_id` int(4) NOT NULL,
  `a_kelime` varchar(20) NOT NULL,
  PRIMARY KEY  (`id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 AUTO_INCREMENT=36 ;
 
--
-- Tablo döküm verisi `a_kelime`
-- 
 
INSERT INTO `a_kelime` VALUES (1, 1, 'elma');
INSERT INTO `a_kelime` VALUES (2, 2, 'armut');
INSERT INTO `a_kelime` VALUES (3, 2, 'kiraz');
INSERT INTO `a_kelime` VALUES (4, 2, 'karpuz');
INSERT INTO `a_kelime` VALUES (5, 2, 'ayva');

Veritabanında anahtar kelime tablomuzu oluşturduktan sonra sıra geldi PHP sayfamıza.

oneriler.php

<?php
  $db_host = "localhost"; // Genelde localhost
  $db_kullanici = "root"; // Veritabanı kullanıcı adınız
  $db_sifre = "******";   // Veritabanı şifreniz
  $db_adi = "deneme";     // Veritabanı adınız
 
  mysql_connect($db_host, $db_kullanici, $db_sifre);
  mysql_select_db($db_adi, $baglanti);
 
  if(mysql_errno())
  {
    echo 'Veritabanına bağlanılamıyor ...';
    exit;
  }
$ara=strip_tags($aranan); // Gelen değişkeni temizliyoruz.
$sorgu=mysql_query ("SELECT DISTINCT a_kelime FROM a_kelime WHERE a_kelime LIKE '".$aranan."%'");
if($say=mysql_num_rows($sorgu)>0) {
if (strlen($aranan)>0) {
echo "<ul>";
while($dizi=mysql_fetch_array($sorgu)) {
$ekle=$dizi[a_kelime];
echo "<li><a href='ara.php?aranan=$ekle'><small>$dizi[a_kelime]</small></a></li>";
}
echo "</ul>";
}
}
?>

Temel olarak yapılan işlemler bu kadar. CSS ile önerileren kelimeleri arama formunun altına getirebilirsiniz. Uygulamayı geliştirdikten sonra, yaptığınız örnekleri ve adreslerini yorum olarak gönderebilirsiniz.

Uygulamayı indirmek için:

Arama Formu Önerileri

blogger logo

Kısa bir girizgahtan sonra gelelim asıl meseleye. Öncelikle eburhan’ın da yazısında belirttiği gibi kod renklendirmede kullanabileceğiniz çeşitli scriptler mevcut. Biz bu scriptlerden SyntaxHighlighter‘ı kullanacağız.

Öncelikle şu adresten dosyamızı indiriyoruz. Bizim işimize yarayacak olanlar şunlar.

• Scripts -> clipboard.swf
• Scripts -> shCore.js
• Styles  -> SyntaxHighlighter.css

Bunların haricinde hangi dilde kod renklendirme yapmak istiyorsak o dilin JavaScript dosyasını Script klasöründen buluyoruz. Örneğimizde HTML ve PHP dillerini kullanacağız.

Blogger’ın barındırma hizmeti olmadığı için kullanabileceğimiz en iyi barındırma servisi Google Pages. Dosyalarımızı Google Pages veya başka bir servise yükledikten sonra Blogger Kontrol Panelinden Yerleşim -> HTML’yi Düzenle sekmesine geliyoruz. Bir sorun oluşmaması için kullandığınız şablonu yedeklemenizi öneririm. Şablonda

1

</body>

etiketinin hemen üzerine aşağıdaki kodları yapıştırıyoruz.

1
2
3
4
5
6
7
8
9
10
11
12

<link href='http://username.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script src='http://username.googlepages.com/shCore.js' type='text/javascript'/>
 
<script src='http://username.googlepages.com/shBrushSql.js' type='text/javascript'/>
<script src='http://username.googlepages.com/shBrushPhp.js' type='text/javascript'/>
<script src='http://username.googlepages.com/shBrushXml.js' type='text/javascript'/>
 
<script class='javascript'>
  dp.SyntaxHighlighter.ClipboardSwf = "http://username.googlepages.com/clipboard.swf";
  dp.SyntaxHighlighter.BloggerMode();
  dp.SyntaxHighlighter.HighlightAll("code");
</script>

Kodlardaki username‘i kendi kullanıcı adınızı yazarak düzeltmelisiniz. Hepsi bu kadar. Kullanmak için ise yazılarınızı yazarken HTML’yi Düzenle sekmesine gelip kodlarımızı şu şekilde giriyoruz.

• HTML Kod Renklendirmesi İçin Örnek:

  1	<pre class="html" name="code">HTML kodlar buraya.

• PHP Kod Renklendirmesi İçin Örnek:

  1	<pre class="php" name="code">PHP Kodları Buraya.

Yazıyı mümkün olduğunca kısa ve anlaşılır tutmaya çalıştım. Soru, görüş ve önerilerinizi yorumlamaktan çekinmeyin.

ciao

Selamlar
Blog dünyasına yeni adım atmanın verdiği heyecanla karaladığım ilk yazım umarım amacına ulaşır. Öncelikle neden yazmaya başladığımı kısaca açıklamam gerekiyor. Uzun zamandır bilgisayar dünyası ile haşır ve de neşirim. Son 3 yıldır ise web teknolojileri ile uğraşıyorum ve artık öğrendiklerimi anlatmanın zamanı geldi diye düşünüyorum. Belki bu düşüncem geçici bir heves olabilir diyerek blogger’ı tercih ettim. Şimdilik de ihtiyaçlarımı karşılayack gibi görünüyor. Yok eğer yazılarım web aleminde çığır açar, ” Artık kendi sunucuna geç ! ” sesleri çoğalmaya başlarsa o zaman birşeyler düşünürüz.
Neden yazmaya başladığımı açıkladıktan sonra blog içeriğinde ne olacağından kısaca bahsedeyim. Efendim öncelikle herkesin bildiği konuda ahkâm kesmesi taraftarı olduğum için PHP-MySQL ikilisi major konular olacak. Bunların haricinde AJAX, CSS ve az biraz da Web 2.0 konularına zamanım yettiğince değinmeyi düşünüyorum.

Yazılara gönderebileceğiniz yorumlarda görüşlerinizi, sorularınızı, eklemek istediklerinizi, varsa hatalarımı çekinmeden iletebilirsiniz. Uzun soluklu bir serüven olması ümidiyle, bir sonraki yazıda görüşmek üzere…