Makale Özeti

Bu yazımıda jQuery yardımıyla sitemizde slide şeklinde haber gösteriminin nasıl yapılacağı anlatılmıştır.

Makale

JQuery, normal şartlarda çok fazla kod yazarak yapabileceğimiz bir çok görsel ve fonksiyonel işlemi hem az kodla hem de çok kısa sürede yapan, sitelerimizin daha şık sunulabilmesini sağlayan bir Javascipt kütüphanesidir. Yazımızda temel olarak jQuery'i kullanıp, bir ASP.NET formunda veritabanımıza bağlanarak çektiğimiz haber özetlerini slide(kayan ifadeler) şeklinde sunmaya çalışacağız. Sunucu tarafında Ado.Net disconnected mimariyi kullanarak Access veritabanımızdan çektiğimiz haberleri sayfamızda sunacağız. Örneğimiz için yapılması gerekenleri yazıda adım adım anlatacağım.


Veritabanı için hazırlık:
Microsoft Access kullanarak database’imizi hazırlıyoruz. Ben access 2003 kullandım(Uzantısı .mdb)
Tablomuzun Adı: haberler
Kolonlar:
- ID AutoNumber
- Content Memo
- Durum Text
- thumb Text
- imageURL Text
- Title Text

Kolon Açıklamaları:
- ID kolonu, primary key ile benzersiz id taşır.
- Content, Haber içeriğinin girileceği kolon.
- Durum, Aktif-Pasif olarak haberlerin durumlarının tutulacağı kolon.
- Thumb, Haberlerin ön gösteriminde küçük görsel yolunun tutulacağı kolon.
- imageURL, Haber Detay sayfasında gösterilecek görsel yolunun tutulacağı kolon
- Title, Haber Başlığı kolonu.

Örnek Veriler:

Visual Studio'yu açarak HaberGosterimi isimli bir Asp.Net Web Site oluşturuyoruz. Ekleyeceğimiz klasörler:
1. Scripts
2. Css
3. images
4. App_Data

Scripts klasöründe, slide olayını gerçekleştirecek javascript kodumuz yer alacak.
Css klasöründe, sitemizin tasarımını şekillendirecek olan stylesheet dosyamız olacak.
Images klasöründe, sitede kullanacağımız arka plan ve haberler için ileri-geri oklarımız yer alacak.
App_Data klasöründe veritabanımız olacak.
Solution exporer’ı açtığımızda projemizin son görüntüsü aşağıdaki gibi olacaktır.

 

Slide.js Dosyası:

$(document).ready(function() {

    var currentPosition = 0;

    var slideWidth = 900;

    var slides = $('.slide');

    var numberOfSlides = slides.length;

    //Scrollbarları saklar

    $('#slidesContainer').css('overflow', 'hidden'); 

    // Tüm slide classlarını #slideInner divi içerisine wrap ediyoruz.

    slides

    .wrapAll('<div id="slideInner"></div>')

    // Slide classlarını yatay gösterebilmek için sola yaslarız

       .css({

           'float': 'left',

           'width': slideWidth

       });

 

    $('#slideInner').css('width', slideWidth * numberOfSlides);

    $('#slideshow')

    .prepend('<span class="control" id="leftControl">Clicking moves left</span>')

    .append('<span class="control" id="rightControl">Clicking moves right</span>');

 

    // ilk yüklenmede sol ok'u saklar

    manageControls(currentPosition);

 

    // Event listenerlar oluşturulur

    $('.control')

    .bind('click', function() {

        // Yer belirlenir

        currentPosition = ($(this).attr('id') == 'rightControl') ? currentPosition + 1 : currentPosition - 1;

 

        // Gizle / göster

        manageControls(currentPosition);

        $('#slideInner').animate({

            'marginLeft': slideWidth * (-currentPosition)

        });

    });

 

    // manageControl fonksiyonu: sol ve sağ controlleri pozisyona göre göster / sakla

    function manageControls(position) {

        // ilk sayfada Sol ok kontrolünü sakla

        if (position == 0) { $('#leftControl').hide() } else { $('#leftControl').show() }

        // ilk sayfada sağ ok kontrolünü sakla

        if (position == numberOfSlides - 1) { $('#rightControl').hide() } else { $('#rightControl').show() }

    }

});

slideHaberler.css Dosyası:

/*BODY*/
body {
margin: 0 auto;
font-size: 15px; font-family: "Trebuchet MS" , Arial, Helvetica, sans-serif;
color: #4e729c
}
/*HABERLER BAŞLIK*/
#haberTitle
{
width: 990px
 }
/*HABERLER DIV*/
#haberler
{
width: 990px;
height: 145px;
background: url(../images/haberler_back.png) no-repeat
}
/*HABER METİNLER İÇİN SOL CLASS*/
#haberler .sol
{
float: left;
width: 860px;
padding-top: 18px;
}
/*HABER GÖRSELLER İÇİN SAĞ CLASS*/
#haberler .sag
{
float: right;
width: 130px;
padding-top: 18px;
padding-right: 20px;
}
/*HABER DETAY*/
#container_haberDetay
{
width: 990px;
height: 700px;
 margin: 0 auto;
}
 /*HABER DETAY CONTAINER*/
#ContentHaber
{
background-image: url(../images/detay_back.png);
width: 850px;
height: 700px;
margin-right: 10px;
padding: 15px;
}
/*HABER DETAY METINLER İÇİN SOL CLASS*/
#ContentHaber .ContentSol
{
width: 380px;
float: left;
margin-right: 10px;
 text-align: justify;
color: #4e729c
}
/*HABER DETAY GÖRSEL İÇİN SAĞ CLASS*/
#ContentHaber .ContentSag
{
width: 450px;
float: right
}
/*SLIDESHOW DIV*/
#slideshow
{
margin: 0 auto;
width: 980px;
height: 113px;
position: relative }
#slideshow #slidesContainer
{
margin: 0 auto;
width: 900px;
height: 490px;
overflow: auto;
position: relative
}
#slideshow #slidesContainer .slide
{
margin: 0 auto;
width: 750px;
height: 490px;
font-size: 16px;
text-align: left
}
/* SLIDESHOW KONTROLLERİ */
.control
{
display: block;
width: 39px;
height: 500px;
text-indent: -10000px;
position: absolute;
cursor: pointer;
}
/*SOL OK*/
#leftControl
{
top: 0;
left: 0;
background: transparent url(../images/haber_control_left.jpg) no-repeat 0 0;
}
/*SAĞ OK*/
#rightControl
{
top: 0;
right: 0;
background: transparent url(../images/haber_control_right.jpg) no-repeat 0 0
}

Haber.aspx Sayfası: Bu sayfada daha önceden veritabanına kaydettiğimiz haberlerin ilk birkaç satırını ve eğer varsa yanında görselini göstereceğiz. Kısaca haber başlıkları ve açıklamaları olacak. Kullanıcıyı eğer isterse haberin tamamını okumak için detay sayfasına yönlendireceğiz. Bu nedenle haberin id'sini almalıyız ki, veritabanında o satıra ait tüm bilgilere ulaşabilelim. Gerekli jQuery kütüphanelerinin eklenmesi, sayfa içerisinde HTML elementlerinin jQuery fonksiyonları tarafından yakalanması için gerekli olan id tanımlamaları sayfa içerisinde yapılmıştır. Detaylı tüm bilgileri kodlar içerisine eklediğim yorum satırlardan okuyabilirsiniz.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Haber.aspx.cs" Inherits="Haber" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>HABER GÖSTERİMİ</title>

     <!--Türkçe karakterler için charset kodu-->

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9" />

    <!--Jquery kütüphanesi projeye dahil edilir.Burada google cdn(Content Delivery Network) üzerinden ekledik. Dilerseniz jquery sitesinden indirebilirsiniz de. Ancak bu şekilde eklemeniz, genel olarak sitenizin daha hızlı çalışmasını sağlar, bant genişliğinden tasarruf edersiniz ve bu dosyalar güncellendiğinde sizin sayfalarınız da otomatik olarak güncellenmiş olur. -->

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>

    <!--Slide işlemini gerçekleştirecek olan javascript dosyası dahil edilir-->

    <script type="text/javascript" src="scripts/slide.js"></script>

    <!--Tasarım ve düzenleme için hazırladığımız css dosyası dahil edilir-->

    <link rel="stylesheet" type="text/css" href="css/slideHaberler.css" />

</head>

<body>

    <form id="form1" runat="server">

    <div id="haberTitle" runat="server">

        <h1>HABERLER</h1>

    </div>

    <div id="haberler" runat="server" visible="false">

        <div id="slideshow">

            <div id="slidesContainer" runat="server">

            </div>

        </div>

    </div>

    </form>

</body>

</html>



Haber.aspx.cs Sayfası: Bu dosyamızda ise sunucu tarafında Access'de yer alan tablomuza bağlanıp haber özet bilgilerini çekiyoruz. Çektiğimiz haber bilgilerini ise sayfadaki HTML elementlerimizin içerisine string ifadeler olarak ekliyoruz.

   

    1 using System;

    2 using System.Collections.Generic;

    3 using System.Linq;

    4 using System.Web;

    5 using System.Web.UI;

    6 using System.Web.UI.WebControls;

    7 using System.Data;

    8 using System.Data.OleDb;

    9 

   10 public partial class Haber : System.Web.UI.Page

   11 {

   12     // Access veritabanına ulaşabilmek için using System.Data.OleDb namespace'ini, gelen verileri kullanabilmek için using System.Data namespace'ini ekliyoruz.

   13     //Veritabanımızla bağlantı kuruyoruz. Bağlantımızı Scope alanında tanımlıyoruz ki sayfamızın her yerinden ulaşabilelim. Dilerseniz bağlantıyı web.config içerisindeki connectionstrings düğümü içerisine yazabilir ve bağlantı için bir class hazırlayabilirsiniz.

   14     OleDbConnection con = new OleDbConnection("provider=microsoft.jet.oledb.4.0; data source=" + HttpContext.Current.Server.MapPath("~/App_Data/Haber.mdb"));

   15     protected void Page_Load(object sender, EventArgs e)

   16     {

   17         if (!IsPostBack)

   18         {

   19             //Disconnected mimari kullanarak haberleri getirecek olan sql cümlemiz. Aktif durumdaki haberleri alıyoruz.

   20             OleDbDataAdapter da = new OleDbDataAdapter("Select * from haberler where Durum='Aktif'", con);

   21             //Datatable tanımlıyoruz. Veritabanında gelen verileri tutacak.

   22             DataTable dt = new DataTable();

   23             //Veritabanından gelen bilgileri datatable'a dolduruyoruz.

   24             da.Fill(dt);

   25             //Eğer aktif haber yoksa, runat=server olarak atadığımız iki divimizi (haberler ve slidescontainer) gizleyeceğiz. Bu nedenle satır sayısını alıyoruz.

   26             //Eğer satır sayısı 0'dan büyükse

   27             if (dt.Rows.Count > 0)

   28             {

   29                 //gelen verileri div içerisine yazabilmemiz için, strdata isimli boş bir string tanımlıyoruz.

   30                 string strdata = "";

   31                 //gelen tüm satırların görseli olup olmadığına bakacağız. Bunun için for döngüsü kullanıyoruz. Birinci satırdan başlayarak, toplam satır sayısı kadar döngümüz çalışacak.

   32                 for (int i = 1; i <= dt.Rows.Count; i++)

   33                 {

   34                     //Her kolonun ID'sini alıyoruz ki haberlerin detay sayfasına o ID'yi gönderebilelim. Integer olarak gelenID isimli bir değişken tanımlıyoruz.

   35                     int gelenID = Convert.ToInt32(dt.Rows[i - 1]["ID"]);

   36                     //Burada 2 farklı durum vardır:

   37                     //A. Görselli haber

   38                     //B. Görseli olmayan haber.

   39                     //İkisini farklı farklı almalıyız ki html tarafında oluşturacağımız görsel alanı boş kalmasın.

   40                     //A. Eğer haber görseli varsa;

   41                     if (dt.Rows[i - 1]["thumb"].ToString() != "")

   42                     {

   43                         //Burada ikinci koşulumuz bulunmakta. Haber içeriğinin tamamını haber.aspx sayfasında göstermeyeceğiz. Tüm içeriklere ulaşabilmek için haberdetay.aspx sayfasına yönlendirme yapacağız.

   44                         //Dolayısıyla, "Content" kolonumuzun uzunluğuna ihtiyacımız var. Ben 350 karakter gösteriyorum.

   45                         //string olarak contentUzunluk isimli değişkenimizi tanımladık ve bu değişkene veritabanındaki content kolonunu atadık.

   46                         string contentUzunluk = dt.Rows[i - 1]["Content"].ToString();

   47                         //Eğer 350 karakterden uzun ise; Substring metoduyla 350 karakterlik alanı alıyoruz.

   48                         if (contentUzunluk.Length > 350)

   49                         {

   50                        &n bsp;    strdata = strdata + "<div class=\"slide\" align=\"left\" ><div class=\"sol\" style=\"width:750px;float:left\">" + dt.Rows[i - 1]["Content"].ToString().Substring(0, 350) + ".....<a href=\"haberDetay.aspx?ID=" + gelenID + "\">HABERİN DEVAMI >></a>" + "</div><div class=\"sag\"><img src=\"images/" + dt.Rows[i - 1]["thumb"].ToString() + "\"" + "/></div></div>";

   51                         }

   52                         //Eğer 350 karakterden kısaysa tamamını haberimizin gösteriyoruz.

   53                         else

   54                         {

   55                        &n bsp;    strdata = strdata + "<div class=\"slide\" align=\"left\" ><div class=\"sol\" style=\"width:750px;float:left\">" + dt.Rows[i - 1]["Content"].ToString() + ".....<a href=\"haberDetay.aspx?ID=" + gelenID + "\">HABERİN DEVAMI >></a>" + "</div><div class=\"sag\"><img src=\"images/" + dt.Rows[i - 1]["thumb"].ToString() + "\"" + "/></div></div>";

   56                         }

   57 

   58 

   59                     }

   60                     //B. Eğer haber görseli yoksa;

   61                     else

   62                     {

   63                         //Görselsiz olarak divlerimizi yazdırıyoruz. Aynı şekilde Content alanının uzunluğuna bakıyoruz.

   64                         string contentUzunluk = dt.Rows[i - 1]["Content"].ToString();

   65                         if (contentUzunluk.Length > 350)

   66                         {

   67                        &n bsp;    strdata = strdata + "<div class=\"slide\" align=\"left\" ><div class=\"sol\" style=\"width:750px;float:left\">" + dt.Rows[i - 1]["Content"].ToString().Substring(0, 350) + ".....<a href=haberDetay.aspx?ID=" + gelenID + ">HABERİN DEVAMI >></a>" + "</div><div class=\"sag\"></div></div>";

   68                         }

   69                         else

   70                         {

   71                        &n bsp;    strdata = strdata + "<div class=\"slide\" align=\"left\" ><div class=\"sol\" style=\"width:750px;float:left\">" + dt.Rows[i - 1]["Content"].ToString() + ".....<a href=haberDetay.aspx?ID=" + gelenID + ">HABERİN DEVAMI >></a>" + "</div><div class=\"sag\"></div></div>";

   72                         }

   73 

   74                     }

   75 

   76 

   77                 }

   78                 //Tüm satırları okuduk, 0'dan çok satır döndüğü için; slidesContainer divimiz içerisine strdata olarak tanımladığımız ve yukarıda yazdırdığımız string verilerimizi alıyoruz.

   79                 slidesContainer.InnerHtml = strdata;

   80                 //Ve slidescontainer div'inin içerisinde bulunduğu haberler divini görünür yapıyoruz.

   81                 haberler.Visible = true;

   82             }

   83                 //Diğer durum yukarıda bahsettiğimiz gibi, satır sayısı olarak 0 dönen durumdur. Yani veritabanında hiç aktif haber yoktur.

   84             else

   85             {

   86                 //Haberler divimizi ve başlık divimizi görünmez yapıyoruz.

   87                 haberler.Visible = false;

   88                 haberTitle.Visible = false;

   89             }

   90         }

   91     }

   92 }

   93 

 

 

Haberdetay.aspx Sayfası: Haber sayfasından haberin tamamını okuyabilmesi için kullanıcıyı bu sayfaya yönlendireceğiz. Bu sayfaya QueryString ile bildirilen haber id bilgisini alıp, ilgili haberin detaylarını veritabanından çekip haberin bütün detaylarını göstereceğiz.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="haberDetay.aspx.cs" Inherits="haberDetay" %>

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title>HABER GÖSTERİMİ</title>

    <!--Türkçe karakterler için charset kodu-->

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-9" />

    <!--Tasarım ve düzenleme için hazırladığımız css dosyası dahil edilir-->

    <link rel="stylesheet" type="text/css" href="css/slideHaberler.css" />

</head>

<body>

    <form id="form1" runat="server">

    <div id="container_haberDetay">

        <div id="ContentHaber">

            <h2><asp:Label ID="lblTitle" runat="server" Text="Label"></asp:Label></h2>

            <div class="ContentSol">

                <asp:Label ID="lblContent" runat="server" Text="Label"></asp:Label>

            </div>

            <div class="ContentSag">        

                        <asp:Image ID="imgNews" runat="server" ImageUrl='<%#Eval("imageUrl") %>' />

            </div>

            <br />

            <br />

            <asp:LinkButton ID="LinkButton1" runat="server" PostBackUrl="~/Haber.aspx"><< Geri</asp:LinkButton>

        </div>

    </div>

    </form>

</body>

</html>

 

haberDetay.aspx.cs Sayfası:

    1 using System;

    2 using System.Collections.Generic;

    3 using System.Linq;

    4 using System.Web;

    5 using System.Web.UI;

    6 using System.Web.UI.WebControls;

    7 using System.Data;

    8 using System.Data.OleDb;

    9 

   10 public partial class haberDetay : System.Web.UI.Page

   11 {

   12     // Access veritabanına ulaşabilmek için using System.Data.OleDb namespace'ini, gelen verileri kullanabilmek için using System.Data namespace'ini ekliyoruz.

   13     //Veritabanımızla bağlantı kuruyoruz. Bağlantımızı Scope alanında tanımlıyoruz ki sayfamızın her yerinden ulaşabilelim.

   14     OleDbConnection con = new OleDbConnection("provider=microsoft.jet.oledb.4.0; data source=" + HttpContext.Current.Server.MapPath("~/App_Data/Haber.mdb"));

   15     protected void Page_Load(object sender, EventArgs e)

   16     {

   17         if (!IsPostBack)

   18         {

   19             //Haber sayfasından gönderdiğimiz ID'yi, request.querystring metodu ile alıyoruz.

   20             int gelenID = Convert.ToInt32(Request.QueryString.Get("ID"));

   21             //Veritabanımızda ID'ye ait olan satırdaki haberi alacak olan sql cümlemizi yazıyoruz.

   22             OleDbDataAdapter da = new OleDbDataAdapter("select * from haberler where ID=@ID", con);

   23             //Parametre olarak verdiğimiz ID bilgisine ait haberi getiriyoruz.

   24             da.SelectCommand.Parameters.AddWithValue("@ID", gelenID);

   25             //Verileri tutacak olan database'imizi tanımlıyoruz.

   26             DataTable dt = new DataTable();

   27             //Veritabanından gelen bilgileri tanımladığımız datatable'a dolduruyoruz.

   28             da.Fill(dt);

   29             //lblContent label'ımıza, datatable'ın Content kolonundaki verileri yazdırıyoruz.

   30             lblContent.Text = dt.Rows[0]["Content"].ToString();

   31             //lblTitle label!ımıza datatable'ın Title kolonundaki verileri yazdırıyoruz.

   32             lblTitle.Text=dt.Rows[0]["Title"].ToString();

   33 

   34             //Haber Görsellerine bakıyoruz. Eğer görsel varsa bu görseli göstereceğiz. Eğer görsel yoksa, Haber metinlerinin bulunduğu lblContent ID'li labelımızın genişliğini arttırarak alanın boş kalmasını engelleyeceğiz.

   35             //Eğer görsel varsa yani; datatable'ın ilgili kolonunun imageURL kolonu boş değilse;

   36             if (dt.Rows[0]["imageURL"].ToString() != "")

   37             {

   38                 //imgNews isimli imajımıza imageURL kolonundaki imaj yolunu veriyoruz.

   39                 imgNews.ImageUrl = "images/" + dt.Rows[0]["imageURL"].ToString();

   40                 //FormView1.DataSource = dt;

   41                 //FormView1.DataBind();

   42             }

   43             //Eğer görsel yoksa yani; datatable'ın ilgili kolonunun imageURL kolonu boş ise;

   44             else

   45             {

   46                 //görselimizi görünmez yapıyoruz.

   47                 imgNews.Visible = false;

   48                 //label genişliğimiz arttırıyoruz.

   49                 lblContent.Width = 800;

   50             }

   51 

   52             //son olarak bağlantımızı kapatıyoruz.

   53             con.Close();

   54         }

   55     }

   56 }

   57 

Çalışmamızı tamamladık. Yaptıklarımızı özetleyecek olursak Haber.aspx sayfamızda veritabanından getirdiğimiz haber özetlerini bir jQuery slide'ı içerisinde listeledik. Listelemeyi düzgün şekilde yapabilmek için de öncesinde slide.js isimli Javascript dosyamızı ve slideHaberler.css dosyamızı hazırladık. jQuery'nin temel kütüphanelerini ise projemize doğrudan eklemeyip Google CDN hizmetinden faydalandık. Son olarakda haberlerin tamamını okumak için haberDetay.aspx adında bir sayfa tasarladık. Haber.aspx sayfamızı çalıştırıp, bir haber detayını görmek istediğimizde aşağıdaki sonuçları elde edebiliriz.

Haber Sayfası:

HaberDetay Sayfası: