TEMMUZ4
Google TermCloud AJAX Api'si ile Etiket bulutu yapımı
Google'ın apilerini inceledikçe google'a olan sempatim daha da artıyor. Ajax Vizualization Api galerisini incelerken, web 2.0 ile web sitelerin özellikle blogların neredeyse hepsinde gördüğümüz "Etiket Bulutu" (Tag Clouds) uygulaması konusunda bir ajax api olduğunu gördüm.
Bir çok webmaster forumunda bu konu hakkında sorular, çözüm önerileri, ücretli ve ücretsiz birçok uygulama/kod gördüm. Ama bu işin bu kadar rahat bir şekilde yapılabilmesi çok hoşuma gitti.
Aşağıda, termcloud isimli ajax apisinin kullanımı için bir örnek hazırladım. Normalda apinin kullanılması için asp yada php gibi dillerden birisine ihtiyaç duyulmuyor.
Ama ben kendi etiket sistemimi de paylaşmış olmak amacıyla asp ile birleştirdim ve çok güzel çalıştığını gördüm.
Gelelim kod yapısına
ilk olarak aşağıdaki kod bloğunu <head>..</head> etiketleri arasına yerleştiriyoruz.
// normalde css dosyası da direk google'dan çalışabiliyor fakat ben renkleri istediğim gibi düzenlemek amaçlı kendi hostumda tutmayı uygun gördüm
<link rel="stylesheet" type="text/css" href="tc.css"/>
<script type="text/javascript" src="http://visapi-gadgets.googlecode.com/svn/trunk/termcloud/tc.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
Daha sonra aşağıdaki javascript + asp karışımı kodu <body> ... </body> tagları arasında etiket bulutunuzun görünmesini istediğiniz yere yerleştiriyoruz.
<div id="tcdiv"></div>
<script type="text/javascript">
google.load("visualization", "1");
google.setOnLoadCallback(draw);
function draw() {
data = new google.visualization.DataTable();
data.addColumn('string', 'Label'); // etiketimiz
data.addColumn('number', 'Value'); // etiketin hiti, kullanım sayısı ... gibi rakamsal bilgi
data.addColumn('string', 'Link'); // tıklanması durumunda gidilecek url
<%
' // Aşağıda etiketleri tuttuğum tablodan rastgele 50 etiketi seçip kullanmak için yazdığım döngü bulunuyor.
' // bu arada veritabanındaki bir tablodan verileri rastgele almak için gereken koduda paylaşmış olduk :)
Set objRs = Server.CreateObject("ADODb.RecordSet")
strSQL = "SELECT TOP 50 * FRom tblEtiketler ORDER BY Rnd(-(1000*fldEtiketID)*Time())"
objRs.Open strSQL, objConn, 1, 3
if Not objRs.EOF Then
%>
// aşağıda etiket bulunda kaç etiket kullanacağımızı belirtiyoruz
data.addRows(<% =objRs.RecordCount %>);
// ayrıca bir döngüyle apiye vermek istediğimiz bilgileri oluşturuyoruz
// 3 parametre kullanıyoruz. Yukarıda belirtmiştik.
// ilk parametre "etiketimiz",
// 2. parametre "Etiketin hit, yada kullanım sayısı" - Rakamsal veri olacak
// 3. ve son parametre "Etikete tıklanınca gidilecek url"
<%
i = 0
Do While Not objRs.EOF
%>
data.setValue(<% =i %>, 0, '<% =objRs("fldEtiket") %>');
data.setValue(<% =i %>, 1, <% =objRs("fldEtiketSayac") %>);
data.setValue(<% =i %>, 2, 'http://www.ismailkaplan.com/etiket/<% =objRs("fldEtiket") %>');
<%
objRs.MoveNext
i = i+1
Loop
end if
objRs.Close
Set objRs =nothing %>
// etiket bulutumuzu oluşturacak bölüm bitti
// aşağıda bulutumuzun görüntüleneceği div'in adını yazıyoruz.
// div'in adını değiştirmeniz durumunda css dosyasındada ilgili alanı değiştirmek gerekir
var outputDiv = document.getElementById('tcdiv');
var tc = new TermCloud(outputDiv);
tc.draw(data, null);
}
</script>
bu kadar.
Bu işlemleri bitirdiğiniz zaman neye sahip olacaksınız ?
- Kodların çalışan halini görmek için tıklayın.
- Kodların çalışan halini indirmek için tıklayın. (Veritabanı, ve diğer gerekli dosyalar içindedir, Lütfen virüz programınız ile kontrol ediniz. Ben kontrol ettim ama bu günlerde pek güven olmuyor)
Elimden geldiğince google'ın bu işleri kolaylaştıran apileri ve diğer uygulamalarını paylaşmaya devam edicem.
