Asp ile renk geçişli bir etiket bulutu yapımından bahsetmek istiyorum. Etiket bulutu, Web 2.0 ile gelen ve sitelerdeki klasik kategori mantığının çok önünde işlevsel bir araç. Özellikle daha çok bloglarda baş gösteren bu olgu, artık her türlü site yapısı içerisinde kendisine yer bulabilmekte. Etiket bulutlarının işlevselliğinin farkına varan birçok webmaster yayınlamakta olduğu sitelerine bu yapıyı entegre etmek konusunda fazlası ile duyarlı. Çünkü bu sistem ziyaretçilere hem arama motorları ile ulaşımda, hemde site içerisinde dolaşım konusunda büyük kolaylıklar getirmekte. Bizde kendi çapımızda bir etiket bulutu sisteminin nasıl oluşturulabileceğini irdeleyeceğiz. Ayrıca biraz görsellik katmak adına da, sistemimize renk geçişi ve ölçü değişimi uygulayacağız.

   Öncelikle ihtiyacımız olan style kodlarımızı sitemize entegre ediyoruz.

/************ Tags *************/
 ul#tagcloud { padding:0; margin:0; text-align:center; list-style:none;}
 ul#tagcloud li { display:inline; color:#ccc; background: none; padding: 0;}
 ul#tagcloud li a, ul#tagcloud li a:link { font-family:"Courier New", Courier, monospace; text-decoration:none; }
 ul#tagcloud li a:hover {background:#E1E1DF; text-decoration:none; }

    Style kodlarımızı sitemize entegre ettikten sonra, etiket sistemimizi oluşturan kodları yazıyoruz.

<% 
rem Geliştirici Uğur Özşahin
rem http://www.walleq.com
%>
<ul id="tagcloud"><%
 siteadresi = "http://www.siteadresiniz.com/"
 Set con = Server.createObject("Adodb.RecordSet")    ’Veritabanımızdan veri çekebilmek için yeni bir Recordset tanımlıyoruz.
 sql = "select id,etiket,pop From tbl_etiket Order By pop Desc" ’Etiketlerin popülerliğine göre verileri çekmeye yarayan sql kodumuzu oluşturuyoruz.
 con.Open sql, condb, 1, 3
 y = 1    ’font ölçümüzün değişimini sağlayacak olan y değişkenimizin ilk değerini 1 olarak atıyoruz.
 for i = 1 to 36    ’etiket sistemimizde 36 etiket yer alması için 1 den 36 ya kadar gereken döngüyü oluşturuyoruz
 if con.eof then exit for ’Eğer kayıt boş ise döngüden çıkılmasını sağlıyoruz
 if i > 1 And i < 5 Then y = y + 13    ’Döngümüzün 1 den büyük ve 5 ten küçük olduğu durumlar için font ölçüsü değişimini tanımlıyoruz
 if i > 5 And i < 30 Then y = y + 2    ’Döngümüzün 5 den büyük ve 30 dan küçük olduğu durumlar için font ölçüsü değişimini tanımlıyoruz
 %> <li><a href="<%=siteadresi%>etiket/<%=con("id") & "-" & con("etiket")%>/" style="font-size: <%=Cstr(184-y)%>%; color: rgb(<%=Cstr(119+(i*2))%>, <%=Cstr(183+(i))%>, <%=Cstr(50-(i))%>);"><%=con("etiket")%></a></li><%
 con.MoveNext    ’Bir sonraki kayıta geçiyoruz
 next
 con.Close    ’Recordset i kapatıyoruz
 Set con = Nothing
 %></ul>

    Yukarıdaki kodu ASP ile hazırlamış olduğumuz sitemize yerleştirdirdiğimizde artık bizde popülerliğe göre belirlenen renk geçişi ve font boyutunun otomatik olarak değiştiği bir etiket sistemine sahip oluyoruz. Ancak bu durum veritabanı hazır olan ve içerisine bir kaç adet etiket girişi yapmış olan arkadaşlar için geçerli.

    ASP ile çalıştığınızı varsayarak kısaca veritabanını nasıl konfigüre edebileceğiniz hakkında örneğimizi baz alarak bilgi vermeye çalışacağım. Etiket bulutu sistemimizde yer aldığı üzere etiketlerimizi çekmiş olduğumuz tablonun adı "tbl_etiket" ve bu tablonun 3 adet kendine özgü alanı bulunmakta. Bu alanlardan ilki etiketlerimizi kimliklendirebilmemizi sağlayan "id" alanı. Bu alanın özelliği otomatik sayı ve birincil anahtar olmalı. Bu sayede etiket sistemimiz içerisinde yer alan linklerde bu alandan yararlanacağız. Yani etiket ile ilgili olan içeriği veritabanımızdan çekerken bu id alanını kullanarak sorgu oluşturacağız. "etiket" alanımız içeriğimiz ile ilişkilendirmek istediğimiz etiketimizin kendisini barındıracak olan tablo alanı. Bu alanın özelliği metin olmalı ve 50 karakter gibi bir uzunluk değeri bu alan için büyük ölçüde yeterli olacaktır. Üçüncü alanımız "pop" alanı bu alanda sorguda etiketlerimiz için bir sıralama kriterini meydana getirecek. Etiketimiz her çağırıldığında "pop" değerini 1 arttırarak, etiketin popülerliğini belirlemiş olacağız. Bu alanın özelliğininde sayı ve tür olarakta long integer olması yeterli olacaktır. Veritabanımızda bu tabloyu oluşturduktan sonra geriye tabloya birkaç adet etiket eklemekten başka bir şey kalmıyor. Tabi bu işi içerik eklerken nasıl yapabileceğiniz konusu da biraz farklı, yani şöyleki içeriğiniz ile etiketlerimizin "id" lerini ilişkilendirmek zorundayız. Ziyaretçilerimiz bu sayede etiket ile ilişkili içeriğe ulaşabileceklerdir. Ayrıca yeni etiketlerin online olarak veritabanımıza eklenebilmesi için küçük bir içerik yönetim sistemi geliştirmeliyiz. Ancak bunları yapabilmek için biraz daha ayrıntılı bir yazıya ihtiyaç var.

    Eğer renk geçişli bir etiket sistemi yazmak istiyor ve veritabanı işlemleri için yeterli bilgiye sahipseniz yukarıdaki 2 kod bloğu size yetecektir. Dilediğiniz gibi kodları editleyebilirsiniz. Bilgilerinin eksik olduğunu düşünen arkadaşlar için veritabanı işlemleri konusunda kendilerini geliştirmelerini öneriyorum. Veritabanı ile kayıt ve sorgu işlemlerini yapabildiklerinde yukarıdaki kodlarda pek bir şey olmadığını onlarda anlayacaklardır.

    Unutmadan şunuda belirteyim, yukarıdaki kodda yer alan font ölçüsünü ve renk parametrelerini kendi sitenize göre düzenlemeniz gerekmektedir. Yoksa bu hali ile etiket sistemi sağ sütunda yer alan etiket bulutsusu ile aynı olacaktır. Kendi sitenize göre düzenlemenizin, sitenizin görünümü açısından önemli olacağını düşünüyorum. Renk kodları (R,G,B) formatındadır. Bu konuda bazı grafik editörlerinden yardım alabilirsiniz.

    Etiket bulutu yapmanın çokta zor olmadığı aşikar. Umarım yukarıdaki kodlar işinize yarar.

---