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.

Etiket Bulutu

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.

Etiket Bulutu

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

Capthca Karakterleri kutuya giriniz
Kodu değiştir...


Geri Dön   |   Ana Sayfaya Dön