Asp.Net ile etiket bulutu (tag cloud) hazırlayalım
Tarih 24 Ocak 2010 Pazar, 16:27 | Etiket(ler) Asp.Net
Bu yazımda çoğumuzun en az bir kere yapmayı denediği etiket bulutunun (Tag Cloud) nasıl yapıldığını anlatmaya çalışacağım. Bir çok sitede gördüğümüz ve web 2.0 ile hayatımıza girmiş etiket sistemi, güzel bir görüntü vermesinin yanı sıra kategorizasyon konusunda çok işe yarayan bir uygulama. Verilerin girilmesinden değil, database yapısı ve gösterilmesi üzerinde duracağım yazıma ilk olarak database yapısını ve çalışma mantığını anlatarak başlayayım.
Biliyoruz ki veritabanına girilen kayıtların (ürün,makale vb.) etiketler ile eşleştirilmesi için ait olduğu kaydın ID değerine ihtiyacı var. Bunun için oluşturacağımız
tbl_etiket adındaki tablomuz 3 alandan oluşacak.
EID, ETIKET ve ID isimli alanlarımız isimlerinden de anlaşılacağı gibi,
1) EID (autonumber) Etiketin ID numarası
2) ETIKET (string) Etiketin ta kendisi
3) ID (integer) Hangi kayıt ile ilişkili olduğu
şeklinde basit bir yapıya sahip ve aşağıdaki gibi görünüyor.
Tablomuzu oluşturduktan sonra etiketletimizi göstermek için css dosyamızı hazırlayalım.
.etiketler {
width: 200px;
list-style-type: none;
margin: 0;
padding: 0; }
.etiketler li {
display: inline;
margin-right: 8px; }
.etiket-1 {
font-size: 11px; }
.etiket-2 {
font-size: 14px; }
.etiket-3 {
font-size: 18px; }
.etiket-4 {
font-size: 22px; }
.etiket-5 {
font-size: 24px; }
Css dosyamızı sayfamıza bağladıktan sonra etiket gösterimi için kodlarımızı yazmaya başlayabiliriz. İlk olarak sayfamıza bir adet literal kontrolü koyuyoruz. Etiketlerimizi bu kontrole yazdıracağız.
<asp:Literal ID="ltrEtiketler" runat="server"></asp:Literal>
Etiketleri getiren yordamımız ise şöyle
ltrEtiketler.Text = String.Empty
Dim sbEtiket As New StringBuilder()
sbEtiket.AppendLine("<ul class=""etiketler"">")
' Etiketlerimizi datasete aktarıyoruz
Dim Sql As String = "SELECT tbl_etiket.ETIKET, COUNT(x.EID) AS TOPLAM FROM tbl_etiket "
Sql += "LEFT OUTER JOIN tbl_etiket AS x ON tbl_etiket.EID = x.EID "
Sql += "GROUP BY tbl_etiket.ETIKET;"
Dim Veritabani As New OleDbConnection("Data Source=" & Server.MapPath("App_Data/etiketBulutu.mdb") & ";Provider=Microsoft.Jet.OLEDB.4.0;")
Dim Veriler As New OleDbDataAdapter(Sql, Veritabani)
Dim Cenk As New DataSet
Veriler.Fill(Cenk, "ETIKETLER")
' Etiketler tablosunda veri varsa bu işlemleri yap
If Cenk.Tables("ETIKETLER").Rows.Count > 0 Then
' Etiketlerimizi dataview e aktarıyoruz
Dim etiketVerileri As DataView = Cenk.Tables("ETIKETLER").DefaultView
' Etiketlerimizin boyutlarını tanımlıyoruz
Dim fontBoyutu() As String = {"etiket-1", "etiket-2", "etiket-3", "etiket-4", "etiket-5"}
' Etiketlerimizin boyutlarını bulmaya başlıyoruz, minimum boyut
Dim minBoyut As Decimal = Decimal.MaxValue, maxBoyut As Decimal = Decimal.MinValue
' Bu döngü ile en küçük ve en büyük boyutta olacak etiketlerimizi buluyoruz
For Each row As DataRowView In etiketVerileri
' Her bir etiketten kaç tane var
Dim etiketToplami As Object = row("TOPLAM")
If Not Convert.IsDBNull(etiketToplami) Then
Dim etiketToplamiDec As Decimal = Convert.ToDecimal(etiketToplami)
If etiketToplamiDec < minBoyut Then minBoyut = etiketToplamiDec
If etiketToplamiDec > maxBoyut Then maxBoyut = etiketToplamiDec
End If
Next
' Etiketlerimizi boyutlandırmaya devam ediyoruz
Dim etiketBoyutlandir As Decimal = (maxBoyut - minBoyut + 1) / Convert.ToDecimal(fontBoyutu.Length)
' Etiketlerimizi formatlayıp yazdırmaya hazır hale getiriyoruz
For Each row As DataRowView In etiketVerileri
Dim etiketToplami As Object = row("TOPLAM")
If Not Convert.IsDBNull(etiketToplami) Then
Dim etiketToplamiDec As Decimal = Convert.ToDecimal(etiketToplami)
Dim boyutDegeri As Integer = Math.Truncate((etiketToplamiDec - minBoyut) / etiketBoyutlandir)
sbEtiket.AppendLine("<li class=""" & fontBoyutu(boyutDegeri) & """><a href=""Etiket/" & row("ETIKET").ToString & """>" & row("ETIKET").ToString & "</a></li>")
End If
Next
End If
sbEtiket.AppendLine("</ul>")
' Etiketlerimizi yazdırıyoruz
ltrEtiketler.Text = sbEtiket.ToString
Projemiz bittiğinde şöyle görünüyor olacak. Siz stil dosyası yardımı ile daha güzel görünür hale getirebilir ve etiketlerinizi renklendirebilirsiniz.
Projemizin çalışan halini aşağıdaki linkten indirebilirsiniz. Kolay çalıştırabilmeniz için access database kullandım. Siz SQL server veya başka bir veritabanı kullanabilirsiniz.
Projenin çalışan halini indirmek için tıklayınız
Yorumlar
Tarih 11 Nisan 2011 Pazartesi, 14:14 | Yazan Cenk SARI

http://www.developerfusion.com/tools/convert/vb-to-csharp/ adresinden çevirebilirsiniz.
Tarih 10 Nisan 2011 Pazar, 19:56 | Yazan murat mert

güzel calısma yanlız c# halinide yazabilirseniz mükemmel olucak...
Tarih 26 Mart 2011 Cumartesi, 12:23 | Yazan Cenk SARI

Teşekkürler. Google'da indexlenmemesi için hiçbir neden yok. Linklerden oluşan bir tasarım olduğu için hiçbir sakıncası yok. Sonuç olarak zaten olmayan bir içeriğe yönlendirme yapılmadığı için arama motorları tarafından bir sıkıntı olacağını düşünmüyorum.
Tarih 26 Mart 2011 Cumartesi, 01:23 | Yazan antalyadailan

çok güzel bir çalışma.
ancak sormak istediğim birşey var. cehaletimi de mazur görün...
atiket bulutları google tarafından indexleniyor mu?
eğer indexleniyor ise bu bulutları sayfalarımızda kullandığımız zaman google'ın şu meşhur banlanama durumu ile karşı karşıya kalır mıyız?
Tarih 02 Haziran 2010 Çarşamba, 19:45 | Yazan Cenk SARI

Bunun için ya da diğer kodlar için http://www.codechanger.com/ adresindeki kod çeviricisini kullanabilirsiniz. Çok işe yarıyor bazı zamanlarda.
Tarih 02 Haziran 2010 Çarşamba, 17:56 | Yazan Nedim Erdoğan

etiket bulutu süper olmuş ama ben c# la yazmaya çalıştım olmadı.
bu konuda yardımcı olabilirseniz çok sevineceğim(acil)
ellerinize sağlık.
Tarih 24 Ocak 2010 Pazar, 17:14 | Yazan Cenk SARI

Teşekkür ederim. Bende umarım ki yararlı oluyordur...
Tarih 24 Ocak 2010 Pazar, 17:07 | Yazan Muhammet Atilla

Tebrik ederim gerçekten çok işe yarar konulara değiniyorsun ve öğretiyorsun. Okumaktan ve takip etmekten zevk alıyorum. Umarım bu şekilde devam edersin.
Yorum yazın
Geri Dön | Ana Sayfaya Dön