Asp.net Jquery Slider – Manşet Haber Sistemi Yapımı

Asp.net ile Jquery Slider veya haber sitelerinde gördüğümüz manşet haber sistemi yapacağız. Sistemde kullanacağımız Jquery Slider örneği burada biz bu sistemi asp.net’e uygulayacağız dosyaları buradan Uygulamanın çalışan halini konu sonundan indirebilirsiniz..
Sistemi oluşturabilmek için iki sayfa hazırlayacağız birincisi haber ve resimleri yükleyeceğimiz, ikincisi de Jquery Slider veya Manşet Haber Sisteminin görüntüleneceği sayfa. Şimdi hemen haber ve resimleri yükleme için gerekli olan sayfayı hazırlayalım.
manset1

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>http://www.aspnetornekleri.com/</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <table align="center">
            <tr>
                <!-- www.aspnetornekleri.com -->
                <td colspan="2">
                </td>
            </tr>
            <tr>
                <td>
                    Haber Başlığı:
                </td>
                <td>
                 <asp:TextBox ID="haberbaslik" runat="server"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Haber Açıklama:
                </td>
                <td>
                 <asp:TextBox ID="haberaciklama" runat="server" Height="94px" TextMode="MultiLine" 
                        Width="211px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Resim:
                </td>
                <td>
                    <asp:FileUpload ID="yuklenecekresim" runat="server" />
                </td>
            </tr>
          
            <tr>
                <td>
                </td>
                <td>
                    <asp:Button ID="kaydetbuton" runat="server" Text="Kaydet" OnClick="kaydetbuton_Click" />
                </td>
            </tr>
        </table>
        <br />
    </div>
    <!-- www.aspnetornekleri.com -->
    </form>
</body>
</html>

Haber bilgilerini kaydedebilmek için aşağıdaki yapıya uygun bir veritabanı oluşturuyoruz.
manset
oluşturduğumuz veritabanını App_Data klasörü içerisine ekliyoruz ve yüklenecek resimleri kaydedebilmek için haberesimleri isimli bir klasör daha oluşturuyoruz. kaydet butonuna yazacağımız kodlar…:

 OleDbConnection baglanti = new OleDbConnection("Provider=Microsoft.ACE.OLEDB.12.0; DATA Source=" + Server.MapPath("App_Data/haber.accdb"));
            baglanti.Open();
            //www.aspnetornekleri.com
            string dosyaadi = Path.GetFileName(yuklenecekresim.PostedFile.FileName);
            yuklenecekresim.SaveAs(Server.MapPath("haberresimleri/" + dosyaadi));
            //www.aspnetornekleri.com
            OleDbCommand komut = new OleDbCommand("insert into haberler(haberbaslik,haberaciklama,haberresim) values (@haberbaslik,@haberaciklama,@haberresim)", baglanti);
            komut.Parameters.AddWithValue("@haberbaslik", haberbaslik.Text);
            komut.Parameters.AddWithValue("@haberaciklama", haberaciklama.Text);
            komut.Parameters.AddWithValue("@haberresim", dosyaadi);
            komut.ExecuteNonQuery();
            baglanti.Close();

evet veritabanına haber ve resimleri ekledik sıra geldi haberleri slider içerisinde görüntülemeye sliderın çalışabilmesi için gerekli olan kodlar js,images ve css klasörlerinde mevcut bunları aynen projemizin bulunduğu klasöre kopyalıyoruz…
Şimdi haberleri görüntüleyeceğimiz sayfayı oluşturuyoruz…

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
    <title>http://www.aspnetornekleri.com/</title>
    <link rel="stylesheet" type="text/css" href="css/layout.css" />
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script language="javascript" type="text/javascript" src="js/mootools.svn.js"></script>
    <script language="javascript" type="text/javascript" src="js/lofslidernews.mt11.js"></script>
</head>
<body>
    <form id="form1" runat="server">
  <div id="container">
    		<h1><strong>www.aspnetornekleri.com Jquery Manşet Haber Sistemi </strong></h1>
 <!-- www.aspnetornekleri.com -->
<div id="lofslidecontent45" class="lof-slidecontent">
<div class="preload"><div></div></div>
 <!-- MAIN CONTENT --> 
  <div class="lof-main-wapper">
  		<asp:Repeater ID="Repeater1" runat="server" DataSourceID="AccessDataSource1">
            <ItemTemplate>
              <div class="lof-main-item">
                    <img src="/haberresimleri/<%# Eval("haberresim") %>"  height="300" width="900">
                    <div class="lof-main-item-desc">
                        <h3>
                            <a target="_parent" href="#"><%# Eval("haberbaslik") %></a></h3>
                        <p>
                           <%# Eval("haberaciklama") %></p>
                    </div>
                    </div>
            </ItemTemplate>
            </asp:Repeater>
                 <asp:AccessDataSource ID="AccessDataSource1" runat="server" 
                    DataFile="~/App_Data/haber.accdb" 
                    SelectCommand="SELECT * FROM [haberler] ORDER BY [id] DESC">
                </asp:AccessDataSource>
   </div>
 <!-- www.aspnetornekleri.com -->
  <div class="lof-navigator-outer">
  		<ul class="lof-navigator">
              <asp:Repeater ID="Repeater2" runat="server" DataSourceID="AccessDataSource1">
            <ItemTemplate>
             <li>
                        <div>
                            <img src="/haberresimleri/<%# Eval("haberresim") %>" />
                            <h3>
                                <%# Eval("haberbaslik") %>
                            </h3>
                            <%# Eval("haberaciklama") %>
                        </div>
                    </li>
              
            </ItemTemplate>
            </asp:Repeater>
            
        </ul>
  </div>
 </div> 
<script type="text/javascript">
    var _lofmain = $('lofslidecontent45');
    var _lofscmain = _lofmain.getElement('.lof-main-wapper');
    var _lofnavigator = _lofmain.getElement('.lof-navigator-outer .lof-navigator');
    var object = new LofFlashContent(_lofscmain,
									  _lofnavigator,
									  _lofmain.getElement('.lof-navigator-outer'),
									  { fxObject: { transition: Fx.Transitions.Quad.easeInOut, duration: 800 },
									      interval: 3000,
									      direction: 'opacity'
									  });
    object.start(true, _lofmain.getElement('.preload'));
</script>

<!-- www.aspnetornekleri.com -->
    </div>
    </form>
</body>
</html>

manset3

Asp.net Jquery Slider – Manşet Haber Sistemi İndir

  • ali kemal sevind

    teşekkürler çok güzel paylaşım. yalnız bunları mobil uyumlu hale nasıl getirebiliriz ?. bootstrap tarzı uygulamalara monte etme ihtimalimiz var mı. bir de http://www.jssor.com/demos/simple-fade-slideshow.slider bu şekilde yatay slider şekline çevirmek istesem zor mu olur ?

    • BilisimOgretmeni

      responsive bir slider ile yapabilirsiniz, adresteki şekle çevirmek çok zor değil buradaki mantık ile aynı, yapmaya çalışın eğer olmaz ise tekrar yardımcı olmaya çalışırım

  • murat doru

    hocam Allah razı olsun sizden çok güzel bir çalışma. Bir konuda bana yardımcı olabilir misiniz? ben sadece haber resimlerini aşağıda göstermek ve slide akışınıda sağdan sola doğru gidecek şekilde düzenleyemedim. Bu konuda yardımcı olabilir misiniz? Çok teşekkürler. Saygılar.

    • BilisimOgretmeni

      amin cümlemizden sağolasın, yardımcı olayım ama burada kullanılan slide yapısı ile istediğinizi yapabilmek için baya uğraşmak gerekiyor istediğiniz slide geçişini html formatında demosunu gösterirseniz asp.net ile ilgili örneği değiştirebiliriz.

  • barbaros

    merhabar hocam il dokunuşta mükemmel çalıştırdım ancak saağ sliderdeki küçük resimlerin yanındaki haber başlıkları ile ana sliderdeği haber açıklamasını çıkaramadım. Tüm bağlantılar doğru. Resimler çıkıyor başlık ve açıklama çıkmıyor.

    • BilisimOgretmeni

      merhaba kodları görmeden bir şey demem mümkün değil ancak konu sonunda uygula linki ver onu indirip test edebilirsiniz..

      • barbaros

        Tekrar merhabalar hocam. mailim s.kutluca@hotmail.com. Mailinizi verirseniz dosyaları sizinle paylaşabilirim. Herşeyi zaten bu linkten inrierek yaptım. Yardımcı olursanız çok memnun olurum.

  • akd27

    Hocam malesef resimler görünmüyor, ne yapabilirim, vs.2012 yi kurdum onda deniyorum, çalışan bir örnegi meal adresime gönderirseniz çok sevinirim, akd1961@hotmail.com

  • Durmus

    Merhaba Hocam. Öncelikle hazırlayıp bizlere sunduğunuz haber sistemi için teşekkürler.Hazırlamış olduğunuz haber sistemini indirdim ve localhostta çalıştırdım. Üzerinde birkaç değişiklik yaparak ve yeni özellikler ekleyemeye çalışarak güzel bir şeyler yapmaya çalışıyorum. Sizden küçük bir ricam olacak. Slider da listelenen habere tıkladığımda manşet sistemi kapanmadan hemen alt kısmında o haberin içeriğini görüntüleyebileceğim koda ihtiyacım var. Bu konuda yardımınızı bekliyorum hocam. Şimdiden teşekkürler. Saygılar..

  • akd27

    Manşet çalışıyor ama resimler gelmiyor, neden acaba?

    • BilisimOgretmeni

      resim yolu ile alakalı bir sıkıntı olabilir konu sonunda uygulamanın çalınan halini indirip kodlarınızı kontrol edebilirsiniz…

    • osman erdal

      /haberresimleri/ haberresimleri/ yapın.

  • Yalçın Çıvkınoğlu

    Hocam buradaki manşet haber sayısını nasıl arttırabiliyoruz?Ve manşette olan bir habere tıkladığımızda ilgili haberin ayrıntılarına sayfayı nasıl ve hangi kodlarla yönlendircez?

    • BilisimOgretmeni

      Deault.aspx sayfasında direction: ‘opacity’ satırının hemen üstüne “navItemsDisplay: 6,” yazarsanız haber sayısı 6 olacaktır..
      habere tıklandığında gidilecek olan sayfayı ayrıca tasarlamanız gerekli link olarak da “” satırını <asp:HyperLink ID="link" Font-Size="Small" runat="server" Text='’
      ForeColor=”Black” NavigateUrl=” Target=”_blank”>
      şeklinde yapabilirsiniz iyi çalışmalar…

      • Yalçın

        Hocam o zaman haberdetay diye ayrı bir tablomu oluşturmamız gerekli veritabanında?Çünkü tıklandığında haber detay sayfasına yönlenecek ve sayfaya girince haberin diğer fotolarınıda göstermemiz gerekli?

        • BilisimOgretmeni

          aslında gerek yok yukarıdaki tabloya haberdevam diye bir alan ekleyip haberin geniş metnini oraya girebilirsin aynı tablodan işlemi devam ettirebilirsin

  • Sabri

    merhaba,

    dosyaları direkt siteye atınca runtime error veriyor. Öncesinde yapılması gereken bir şey var mı ?

    • BilisimOgretmeni

      veri tabanını oluşturup gerekli ayarlamaları yaptıysanız çalışması gerekli…

      • ali kemal sevind

        hocam peki bu iki farklı siteye iki farklı link nasıl vereceğiz

        • BilisimOgretmeni

          veritabanında linkler için ayrı bir alan oluşturup kaydedebilirsiniz.

  • Resul

    merhaba

    ben bu slideri MSSQL veritabanına bağlamak istiyorum nasıl yaparım.
    teşekürer

    • BilisimOgretmeni

      merhaba ilk olarak haberekle dosyasında

      using System.Data.SqlClient; ekleyip Oledbconnection ve oledbcommand yerine aşağıdaki komutları yazın

      SqlConnection baglanti=new SqlConnection(“Data Source=’sunucunuz’; initial catalog=’veritabaniadi’;integrated security=true;”);

      SqlCommand komut = new SqlCommand(“insert into haberler(haberbaslik,haberaciklama,haberresim) values (@haberbaslik,@haberaciklama,@haberresim)”, baglanti);

      default sasyfasında da AccessDataSource silip yerine

      yazıp daha sonra Repeater nesnesindeki DataSourceID’leri SqlDataSource1 olarak değiştiriyoruz…