ASP.NET Web Uygulamalarında JQUERY TIME AGO

Asp.net Web uygulamalarında Facebook, Twitter gibi Sosyal Medya sitelerinde X dakika önce, X saat önce gibi zaman diliminin anlık olarak ifade eden zaman eklentisi olan jquery.timeago.js (jquery time ago plugin) eklentisini inceleyeceğiz.

19.11.2013

Yazar: Muhammed ÖNAL (Google+)

Kategori: Javascript / JQuery

4964

ASP.NET ile JQUERY TIME AGO

Merhaba Yazılımcı dostlarım;

Uzun bir zamanın ardından teknik yazıma sizlere selam vererek başlamak oldukça mutluluk verici bir duygudur benim için. Takipçi dostlarım çok iyi bileceklerdir ki uzun zamandır sizlerden ve Yazılım Dilleri ailesi platformundan uzak kaldım ve bu süre zarfında da hemen hemen hiç teknik yazı yazamadım.

Bundan dolayı yeni bir teknik yazıyla karşınıza çıkarken hem kolay hem de gelen bir çok maile cevap olarak JQUERY’nin TIME AGO eklentisini ASP.NET ortamına aktararak anlaşılır bir makaleyle çıkmak istedim.

Peki, nedir? bu JQUERY Kütüphanesine ait TIME AGO eklentisi diye soracak olan arkadaşlara şunu söylemek mümkündür. Hepimizin bildiği üzere FACEBOOK, TWITTER başta olmak üzere birçok SOSYAL Medya sitelerinde göndermiş olduğunuz Postların, yazıların yayınlandığı zaman dilimi olarak söyleyebiliriz. Örnek verecek olursak;

Facebook-tieago

twitter-timeago

Şekilde de gördüğünüz gibi günlük hayatta bir çoğumuzun Facebook ,Twitter aracılığıyla gönderdiğimiz anlık postlarımızın yayınlandığı zaman dilimini göstermektedir. Örnekleri çoğaltmak mümkündür. Her ne kadar Sosyal medya sitelerinin web ara yüzleri için PHP web dili kullanılsa da, okuyucularımız ve takipçilerimiz arasından da zaman zaman ASP.NET teknolojisiyle bu olayın nasıl yapıldığına dair sorular gelmektedir. Zaten ASP.NET’i orta ve iyi derecede kullanan yazılımcı arkadaşlarımız nasıl kullanıldığına dair bilgileri olduğundan, bu teknik yazımızın daha çok başlangıç aşamasında olup bu olayı merak edenler için kaleme alınmıştır diyebilirim.

Zaman kaybetmeden ASP.NET ile programatik olarak kod bloklarımıza nasıl ekleyeceğimizi gösterelim:

ADIM 1:

İlk önce JQUERY Kütüphanesine ait olan jquery.timeago.js dosyasını indirmeniz gerekmektedir. İlgili JScript dosyasını http://timeago.yarp.com/ linkinden indirebilirsiniz. Dosyamızı indirdikten sonra bir sonraki adıma geçebiliriz.

Diğer yandan JQuery sayfasından, yine indireceğiniz bir başka dosya ise jquery-1.9.1.min.js dosyasıdır. Tabiki üst sürümlerinden herhangi birini de indirebilirsiniz. Ben örnek teşkil etmesi açısından 1.9.1 sürümünü gösterdim.

ADIM 2:

İndirdiğimiz dosyamızı Projemizin Root’un da herhangi bir JSCRIPT ya da JS klasörünün içine kopyalayalım. Örnek ekran görüntüsü aşağıdaki gibidir:

asp-net-proje-dizini-root

ADIM3:

Proje dizinimize kopyaladığımız dosyamızı; Projemizde bulunan herhangi bir .aspx uzantılı Web Formunun <HEAD></HEAD> tagları arasına sürükle bırak yöntemiyle bırakabilirsiniz.
Örneğin projemizin Default.aspx web formumuza yol olarak gösterirsek;

<script type="text/javascript" src="jscript/jquery.timeago.js"></script>
<script type="text/javascript" src="jscript/jquery-1.9.1.min.js"></script>

Şeklinde jquery.timeago.js dosyamızı proje dizinimizde bulunan Jscript kaynağından çağırmış olduk.

Sonrasında ise

Aynı taglar arasına küçücük bir JQUERY kodu yazarak jquery.timeago.js dosyası içinde bulunan timeago sınıfımızı aktif ederiz.

İlgili Jquery kodlarımız aşağıdaki gibidir:

<script type="text/javascript">

               jQuery(document).ready(function () {
                   jQuery('abbr.timeago').timeago();
               });

  </script>

Burada, Timeago sınıfının etki edeceği alanları yukarıda vermiş olduğumuz JQUERY kodlarımızla belirlemekteyiz. Yani kısaca, timeago abbr tagının altında bulunan ve timeago ile sınıflandırılmış bütün ilgili alanları idare edecektir.

Son adım olarak;
İlgili abbr etiketi içinde timeago ile sınıflandırılmış alanları idare etmesi için .aspx uzantılı web formlarımızda aşağıdaki gibi entegre etmiş oluruz:

ADIM4:

Dediğimiz gibi burada default.aspx web formumuzda örnek olarak göstermiştik. Sizler de dilediğiniz herhangi bir sayfada ve Tarih-Zaman olarak gösterdiğiniz alanda bu işlemi yapmanız mümkündür.

Bizim uygulamamız; örneğin bir bloğunuz var veya haber sitesi/duyuru sayfası da olabilir. Burada yayınladığınız haberler, makaleler, yazılar, vb. eklemek istediğiniz herhangi bir postta EklenmeTarihi veya YayinlamaTarihi gibi alanları veri tabanınızda tutmanız gerekmektedir.

Örneğin;

Uygulamamızda tblYazilar adlı bir tablomuz olsun. Ve bu tablomuzda
YazarAdi,
YazarSoyAdi,
YazarKullaniciAdi,
EklenmeTarihi …

gibi alanlar olsun. Eklenme Tarihini ise veri tabanımızın MsSQL olduğunu farz ederek, Management Studio tarafında getdate() olarak alınız.

Yani Eklediğiniz Tarih ve saati otomatik olarak ilgili sütuna kaydettiriyoruz

Web ara yüzünde göstermek istediğimiz alanlarımızı veri tabanından çektiğimiz de ilgili Yazımıza ait EklenmeTarihi’ni veri tabanından çekeriz.

<abbr class="timeago"  title="<%# string.Format("{0:o}", Eval("EklenmeTarihi")) %>" >
</abbr>

Etiketi arasında belirttiğimiz timeago sınıfımız title ile Zaman dilimi formatımızı Yazının Veri tabanına eklenme tarih ve saat dilimini timeago sınıfı vasıtasıyla istediğimiz formatta gösterecektir.

asp-net-html-abbr tag-title - timeago class-time ago aspnet ile gösterilmesi

Şeklindedir.

Hepsi bu kadar.

Sizlerde jquery.timeago.js eklentisini Türkçe yapmak adına ilgili JavaScript dosyasındaki alanları aşağıdaki gibi değiştirebilirsiniz.

tmeago.js türkçe

Ve böylece JScript eklentisini de Türkçeleştirmiş olduk.

Son olarak Örnek olması açısından Yayınladığımız bir Postu ya da Yazının Web ara yüzünde nasıl göründüğüne bakacak olursak aşağıdaki ekran görüntüsünü inceleyebilirsiniz…

asp.net ile jquery timeago ile örnek gösterilmesi

Muhammed ÖNAL
Bilgisayar Mühendisi
RFID Sistemleri Uzmanı
BT Yönetişimcisi

Blog: http://www.muhammedonal.com
Web : http://www.yazilimdilleri.net

Yazar Hakkında

Muhammed ÖNAL

www.muhammedonal.com

Bilgisayar Mühendisi | RFID Sistemleri Uzmanı | BT Yönetişimcisi | Strateji Planlama ve İş Geliştirme 2015 itibariyle sağlık sektöründe Bilgi Sistemleri Yöneticisi ve Üst yönetim Stratejik Planlama ve İş Geliştirme Koordinatörü pozisyonunda çalışmaktadır.

ASP.NET ile JQUERY TIME AGO

Yazar Hakkında

Sosyal Medya

0 Yorum

Yorum Yaz / Soru Sor

Son Yorumlar

En Güncel Sorular

En Son Cevap Verilen Sorular

Twitter

En Çok Okunanlar

Sponsorlar