Blog

DOGUM GÜNÜM KUTLU OLSUN

Özellikle grafikerler için uyumlu renkleri bir araya getirmek oldukça zor ama önemli bir istir. Ama renk uyumu sadece grafikerlere has degildir. Biz programcılarda hazırladıgımız arayüzlerin kullanıcıya daha güzel görünmesi için uyumlu renkleri kullanmaya dikkat ederiz. Ama zorlandıgımız zamanlarda olur tabi. Iste bu zorlandıgımız zamanlarda isimize yarayacak bir uygulama "Renk uyum cetveli". Renk uyum cetveli en iyi uyan 6 rengi size gösteriyor. Siz tonları degistirerek farklı renkler yaratabiliyorsunuz.

Renk uyum cetvelini denemek için tıklayınız .

Ilk olarak gridvView nesnesinden bahsedelim.  Gridview nesnesi bir veritabanındaki ilgili tablo içerisindeki kayıtları göstermemize yarar. Biz projemizde SQL Server 2000 içerisindeki Northwind veritabanını kullanacagız. Yeni bir Asp.Net Projesi Açtıktan sonra;

 Ilk olarak formumuz üzerine GridView nesnesini yerlestirelim.

Gridinizi ekledikten sonra eger gridimize biraz renk vermek istersek grid üzerinde sag tıklayarak Auto Format ile  hazır grid stillerini kullanabiliriz.

Gridimize güzel bir stil belirledikten sonra artık verileri çekebiliriz.

Ilk olarak veritabanı baglantısı için gerekli nesneleri tanımlarız.  Burada sqlDataAdapter, dataSet, ve sqlDataConnection nesnelerini kullanacagız. Artık tanımlama islemlerine geçebiliriz;

 Imports System

Imports System.Data

Imports System.Data.SqlClient

 Partial Class _Default

Inherits System.Web.UI.Page

Private Cnn As SqlConnection     Private Da As SqlDataAdapter     Private Ds As DataSet

End Class

Not: Nesnelerimizi aynı sayfa içerisinde tanımladıgımız için private olarak tanımladık. Eger bir class içerisinde tanımlamak istersek Public olarak tanımlamamız gerekir.

Nesnelerimizi tanımladıktan sonra veritabanı baglantımızı saglayacak baglantı adında bir Sub yazalım. Bu Sub veritabanına baglanmamızı saglayacaktır.

Partial Class _Default

    Inherits System.Web.UI.Page

    Private Cnn As SqlConnection

    Private Da As SqlDataAdapter

    Private Ds As DataSet

Private Sub SetCnn()         Cnn = New SqlConnection("Data source=localhost; database=northwind; uid=sa; pwd=")     End Sub

End Class

Evet veritabanı baglantımız artık hazır. Simdi geriye verileri databaseden gride çekmek kalıyor. Gridimizde verileri görüntülemek için geriye DataTable döndüren bir function yazabiliriz. Bu Function Dısarıdan SQLString adında bir parametre ile SQL ifadesini alacak. Bu bize ileride yeni sorgular yapmamıza yarayabilir.

Imports System

Imports System.Data

Imports System.Data.SqlClient

Partial Class _Default

    Inherits System.Web.UI.Page

    Private Cnn As SqlConnection

    Private Da As SqlDataAdapter

    Private Ds As DataSet

    Private Sub SetCnn()

        Cnn = New SqlConnection("Data source=localhost; database=northwind; uid=sa; pwd=")

    End Sub

Private Function SelectDataTable(ByVal SQLString As String)         SetCnn()         If Not Cnn Is Nothing Then             If Cnn.State = ConnectionState.Closed Then Cnn.Open()             Da = New SqlDataAdapter(SQLString, Cnn)             Ds = New DataSet()             Da.Fill(Ds, "table")             Return Ds.Tables(0)         Else             Return Nothing         End If     End Function

Functionumuzu yazdıktan sonra artık verilerimiz görüntülenmeye hazır bir sekilde bizi bekliyor. Istersek Form yüklenirken verilerimizi görüntüleyelim.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load         GridView1.DataSource = SelectDataTable("SELECT * FROM Products")         GridView1.DataBind()     End Sub

Projemizi çalıstırdıktan Sonra verilerimiz asagıdaki gibi görüntülenir.

   

Projemizin bu kısmını basarı ile tamaladıktan sonra Projemize biraz daha hareket katalım ve projemize bir adet DetailsView Nesnesi ekleyelim.

Nesnemizi ekledikten sonra Grid üzerinde sag tıklayarak Show Smart Tag ı seçerek formumuza CommondBoundlardan "Select" i ekleriz. Böylese seç butonuna tıkladıgımızda aktif kayıt seçilecek ve seçtigimiz kayda ait detay bilgiler detailsView nesnesinde görüntülenecek.

Bunun için form yüklenirken (Form_load) Detailsview içerisinde ilk kaydı görüntüleyebiliriz. Daha Sonra grid üzerinden seçecegimiz kayıt detailsView üzerinde görüntülenir.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load         GridView1.DataSource = SelectDataTable("SELECT * FROM Products")         GridView1.DataBind()         DetailsView1.DataSource = SelectDataTable(" SELECT top 1 * FROM Products")         DetailsView1.DataBind()     End Sub

Evet simdi projemizi çalıstırdıktan sonra grid üzerinde tüm kayıtlar görüntülenir fakat, Grid üzerindeki seç butonuna tıkladıgımızda seçili kaydın detayının gelmesi için de kısa bir kod yazmamız gerekir.

Bunun için GridView in GridView1_SelectedIndexChanged eventi içerisine asagıdaki kodu yazmamız gerekir.

Protected Sub GridView1_SelectedIndexChanged(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.SelectedIndexChanged         DetailsView1.DataSource = SelectDataTable("SELECT  * FROM Products WHERE ProductID=" + GridView1.SelectedRow.Cells(0).Text)         DetailsView1.DataBind()     End Sub

Bu Arada Sayfamızı Html Kısmında küçük bir degisiklik yapacagız. Bunun Nedeni Hem Gereksiz alanların gösterilmesini engellemek, hemde Sayfa dizaynının daha göresel olmasını saglamaktır.

<asp:GridView ID="GridView1" runat="server" BackColor="LightGoldenrodYellow" BorderColor="Tan"             BorderWidth="1px" CellPadding="2" ForeColor="Black" GridLines="None" Style="z-index: 100;             left: 8px; position: absolute; top: 368px" AutoGenerateColumns="False" Width="344px">             <FooterStyle BackColor="Tan" />             <Columns>                 <asp:BoundField DataField="ProductID" HeaderText="Ürün No:" />                 <asp:BoundField DataField="ProductName" HeaderText="Ürün Adı:" />                 <asp:CommandField />                 <asp:CommandField SelectText="Seç" ShowSelectButton="True" />             </Columns>             <SelectedRowStyle BackColor="DarkSlateBlue" ForeColor="GhostWhite" />             <PagerStyle BackColor="PaleGoldenrod" ForeColor="DarkSlateBlue" HorizontalAlign="Center" />             <HeaderStyle BackColor="Tan" Font-Bold="True" />             <AlternatingRowStyle BackColor="PaleGoldenrod" />         </asp:GridView>

Evet artık projemizi tamamlamıs olduk. Projemizi çalıstırdıgımızda sectigimiz ürüne ait detaylı bilgi detailsView nesnesinde  görüntülenecektir.

Bir sonraki makalemizde görüsmek üzere...

Biz bu makalemizde veri kaynağı olarak dataset’i ele kullanacağız. Ben Adrotator nesnesini banner olarak değil de ürün olarak ele alıp, Sayfa her açılışında farklı bir ürün gösterip, ürün üzerine link koyacağım.

Ilk olark Projemizde Kullanacagımız Access database ismi Urunler.mdb dir. Bu tablo içerisinde tblUrunler isimli bir tablo bulunmaktadır. Bu tablo ürün bilgilerini içerir.

Bu tablo içerisindeki alan isimleri;

Yukarıdaki gibidir.

Veritabanını olusturduktan sonra Projemize bir adet AdRotator nesnesi eklenir.  

Nesnemizi ekledikten sonra banneri görüntüleyecegimiz bir function  yazalım. Farklı yöntemler de olabilir ama ben anlaması kolay olması ve yazması kolay oldugu için function içinde yapmayı tercih ettim.

Ilk olarak baglantı olusturabilmemiz için gerekli kodları yazalım.

private System.Data.OleDb.OleDbConnection Cnn; private System.Data.OleDb.OleDbDataAdapter Da; private System.Data.DataSet Ds;

Simdi ürünleri gösterecek bir fonksiyon yazabiliriz.

private System.Data.Dataset BannerGetir(string SQLString) {  Cnn = new System.Data.OleDb.OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("db/urunler.mdb"));  if (Cnn.State == ConnectionState.Closed) {    Cnn.Open();  }  Da = new System.Data.OleDb.OleDbDataAdapter(SQLString, Cnn);  Ds = new DataSet();  Da.Fill(Ds, "table");  return Ds.Tables(0); }

Geriye sadece bu fonksiyonu formdan çagırmak ve AdRotator için ImageUrl ve Navigate url özelligini ayarlamak.

Bunun içinde Form yüklenirken (Form_Load) asagıdaki kodları yazarsak AdRotator nesnesi basarılı bir sekilde çalısır.

protected void Page_Load(object sender, EventArgs e) { AdRotator1.DataSource = BannerGetir("SELECT * FROM tblUrunler"); string path = "images"; AdRotator1.ImageUrlField = "fldUrunResmi"; AdRotator1.DataBind();         }

Evet, çalıstırdıktan sonra sayfa görüntümüz asagıdaki gibidir.

Sayfamızı Refresh Edersek

Farklı bir ürün geldigini göreceksiniz..

Bir sonraki makalede görüsmek üzere, Herkese basarılar dilerim.