Asp.Net
24
May
2012
Mvc 3 Etiket Bulutu
Kategori : Mvc
Ekleyen : Admin
Merhaba Arkadaşlar, Bugünkü Makalemde Mvc 3 ile " Blogların hatta sitelerin olmassa olmazlarından olan Etiket Bulutu ( Tag Cloud ) " yapımı hakkında bilgiler vereceğim. Projemde Sql Veritabanı kullanacağım projenin bitmiş halini makalemin sonundaki download linkinden indirebilirsiniz. Etiket bulutundan bahsedecek olursak, Etiketler örneğin bir blogta; yazılan makalelerin içerdiği konu hakkında bilgi sahibi olmamıza fayda sağlar. Makaleler içinde nekadar çok bir kelime geçiyorsa etiket sistemine göre o kelime diğer kelimelere göre daha büyük fontlarla bulut içinde yer alır, bu da bloğun en çok hangi konuya veya konulara değindiğini gösterir.
Öncelikle tablomuzu oluşturuyoruz. Tablomuz EtiketId, EtiketAdi, MakaleId kolonlarından oluşuyor.
Etiket sınıfımız.
   1:  public class KeyAndValue
   2:  {
   3:      public object Key { get; set; }
   4:      public object Value { get; set; }
   5:      public List<KeyAndValue> EtiketModel { get; set; }
   6:  }
Bulut içindeki kelimelerimizin css sitillerine eklenecek ve fontlar ile renkleri ayarlayacak olan, geriyede string değer döndürecek metodumuz. (Bu bölüme istediğiniz şekilde müdehale edebilirsiniz)
   1:  public static class BulutModels
   2:      {
   3:          public static string EtiketBoyu(double fontBoyu)
   4:          {
   5:              if (fontBoyu >= 100)
   6:              {
   7:                  return "22px; color:#bd5300; font-weight:bold; ";
   8:              }
   9:              else if (fontBoyu >= 80)
  10:              {
  11:                  return "20px; color:#950707;";
  12:              }
  13:              else if (fontBoyu >= 70)
  14:              {
  15:                  return "18px; color:#bd7100; font-weight:bold;";
  16:              }
  17:              else if (fontBoyu >= 60)
  18:              {
  19:                  return "16px; color:#52031b;";
  20:              }
  21:              else if (fontBoyu >= 50)
  22:              {
  23:                  return "14px; color:#c78028; font-weight:bold;";
  24:              }
  25:              else if (fontBoyu >= 40)
  26:              {
  27:                  return "12px; color:#1f020d;";
  28:              }
  29:              else if (fontBoyu >= 20)
  30:              {
  31:                  return "11px; color:#bd7400; font-weight:bold;";
  32:              }
  33:              else
  34:              {
  35:                  return "10px; color:#bd5200;";
  36:              }
  37:          }
Tablomuzdaki etiketlerimizi, gruplayıp count'unu alan ve geriye static bir List döndüren, Gelenler isimli sınıfımız.
   1:  public static List<KeyAndValue> Gelenler()
   2:  {
   3:      BlogDataContext db = new BlogDataContext();
   4:   
   5:      var etiketBulutu = from e in db.Etiketlers
   6:                          group e by e.etiketAdi into etiketgrubu
   7:                          select new
   8:                          {
   9:                              Etiket = etiketgrubu.Key,
  10:                              counts = etiketgrubu.Count(),
  11:                          };
  12:   
  13:      List<KeyAndValue> Sonuc = new List<KeyAndValue>();
  14:   
  15:      foreach (var item in etiketBulutu)
  16:      {
  17:          Sonuc.Add(new KeyAndValue() { Key = item.counts, Value = item.Etiket });
  18:      }
  19:   
  20:      return Sonuc;
  21:  }
Etiket boyutunu integer olarak döndüren EtiketBoyutu metodumuz.
   1:  public static int etiketBoyutu()
   2:  {
   3:      int EtiketBoyutu = (from e in Gelenler().ToList() select (int)e.Key).Max();
   4:   
   5:      return EtiketBoyutu;
   6:  }
HomeController sınıfımızdaki; Index sayfamızda kullandığımız ve geriye etiketModelini döndüren Metodumuz.
   1:  public ActionResult Index()
   2:  {
   3:      BlogDataContext db = new BlogDataContext();
   4:   
   5:      var bulut = from e in db.Etiketlers
   6:                  group e by e.etiketAdi into etiketGrubu
   7:                  select new
   8:                  {
   9:                      Tag = etiketGrubu.Key,
  10:                      Yukseklik = (double)etiketGrubu.Count() / BulutModels.etiketBoyutu() * 100,
  11:                  };
  12:   
  13:      List<KeyAndValue> donenSonuc = new List<KeyAndValue>();
  14:   
  15:      foreach (var item in bulut)
  16:      {
  17:          donenSonuc.Add(new KeyAndValue() { Key = item.Yukseklik, Value = item.Tag });
  18:      }
  19:   
  20:      KeyAndValue model = new KeyAndValue();
  21:      model.EtiketModel = donenSonuc.ToList();
  22:   
  23:      return View(new KeyAndValue() { EtiketModel = model.EtiketModel });
  24:  }
Index.aspx sayfamız
   1:  <div class="greymenu">
   2:      <h2>MVC 3 ETİKET BULUTU</h2>
   3:      <ul>
   4:   
   5:          <% foreach (var item in Model.EtiketModel) { %>
   6:              <li><a href="#" style="font-size:<%: BulutModels.EtiketBoyu(Convert.ToDouble(item.Key)) %>"><%: item.Value %></a></li>
   7:          <% } %>
   8:          
   9:      </ul>
  10:  </div>
Başka bir Makalede görüşmek dileiyle, sağlıcakla kalın.

Örnek Proje : Etiket Bulutu
24 Mayıs Per, 2012 Serkan Topkan
Örnek proje ile makaleleri her zaman tutmuşumdur. Aksi halde anlatımı unutulan yerler proje incelenerek anlaşılabilinir. Teşekkürler.
25 Mayıs Cum, 2012 Zekeriya ALAN
Evet Serkan, Bazen en kritik yerler atlanabiliyor. O yüzden kaynak Dosyalarıda paylaşmayı tercih ediyorum. Projenin çalışır halini görmek daha faydalı oluyor.
Ben Teşekkür eder, İyi Çalışmalar Dilerim.