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