Resmin dosya adı tutulacaktır. Ve program yolu ile path(yolu ile) sayafaya eklenecektir.

Transkript

1 Veritabanını Oluşturma Defter isimli veritabanı oluşturulur. İçersinde defter isimli tablo aşağıdaki alanlar oluşturulur. Resmin dosya adı tutulacaktır. Ve program yolu ile path(yolu ile) sayafaya eklenecektir. Yöneticiler tablosu da aşağıdaki gibi oluşturulur. Her iki tabloya da test amaçlı bir kaç kayıt girilir. Visual Studio açılır.new Web Site--> Empty Web Site Seçilir ve Proje ismine ZiyaretciDefteri ismi verilir. App_Data Klasörünü eklemek için Web Projesine sağ tıklanır. Aşağıdaki gibi eklenir. Defter veritabanını App_Data içine eklemek için App_Data ya sağ tıklanır ve Add Existing Item seçilir

2 Projeye Web Form Eklemek için Projeye sağ tıklanır ve Web Form seçili adı Default.aspx olarak kalabilir. Bu sayfada Ziyaretçilerin mesajları görüntülenecektir. En son tarihliden başlayarak. Web Form üzerine bir tane AccessDataSource eklenir. Bir tane de GridView eklenir. AccessDataSource1 in sağındaki kulakçığa tıklanır ve AccessDataSource Tasks dan Configure Data Source seçilerek, ayarlar yapılır.

3 Burada ki ~/App_Data/Defter.accdb yoldaki tilda(~) proje dosyalarının bulunduğu kök klasörün o bilgisayardaki fiziksel yoluna karşılık gelir. Böylece Biz proje klasörümüzü başka bir bilgisayara Server a taşısak bile projemiz çalışacaktır.

4 Bu ekranda AccessDataSource un SelectCommand ının Sorgusu oluşturulur.(specify custom SQL statement or stored procedure) Özel bir Sql yada Stored Procedure oluşturmak için üsteki seçenek seçilebilir. Altaki seçenek Specify columns from table or view seçilirse Name ayzan combobox dan tablo adı seçilir alt tarafa o tablodaki alanlar gelir * seçilirse tüm alanlar çekilmiş olur. Yanda yer alan WHERE butonu ile Sql cümlesi için Şartlar belirtilebilir. Order By ile Kayıtların hangi alanlara göre sıralanacağı belirlenebilir. Advanced (Gelişmiş) Insert, Update, Delete sql cümleri otomatik oluşturulabilir. Return only unique rows ile Distinct Sql deyimi kullanılarak seçilen alanda, tekrarlayan kayıtlar yanlız bir kez çekilmesi sağlanır. Örnek tablomuzda sehir alanı var diyelim. Her Sehri bir kez çekmek için Return only unique rows seçilir. WhERE butonu tıklanır gelen pencerede aşağıdaki ayarlar yapılır.

5 Where ile süzme(filtreleme,seçme) işlemi yapılacak kolon Column seçme kutusundan seçilir, Source dan karşılaştırılacak değerin nereden alınacağı seçilir(none, Control, Cookie,Session, Form, Profile, QueryString vb. olabilir). Bizim örneğimizde Yöneticinin goster alanını true olarak işaretledikleri gösterileceği için goster alanı true olan çekilecektir. Operator kutusundan karşılaştırma operatörü seçilir.bu örnekte goster=true olmalı o yzden = (eşit) seçilir. Parameter Value(değeri) true girilir. ADD butonu tıklanarak parametre sql cümlesine eklenmiş olur. Bir ziyaretcilerin mesajları en son tarihliden başlaması için çekilen kayıtlar tarihe göre sıralanmalıdır. Bunun için ORDER BY butonu tıklanır ve sıralama ayarları yapılır.

6 Aşağıdaki görüntü TEST QUERY butonu tıklandıktan sonra alındı. Finish butonu ile işlem tamamlanır. GridView'ı AccessDataSource 'a Bağlama GridView sağındaki kulakçıktan Choose Data Source dan AccessDataSource1 seçilir. Yani sayfa çalıştığı zaman önce AccessDataSource1 veritabanındaki defter tablosundan sql cümlesini çalıştırı kayıtları çeker ve GridView da böylece gösterir. Enable Paging kutucuğunu seçili yaparak Sayfalamayı etkinleştirdik. Enable Sorting sıralamayı aktif yapar. Enable Selection Gridview ın soluna kaydı seçebilmek için bir Select linki ekler. Sayfamızı çalıştırısak görüntü aşağıdaki gibi olur.

7 GridView' a Kolon (Alan) Ekleme Fakat biz Kullanıcıya ait avatar resminin solda, mesaja ait bilgilerin de satır şeklinde değilde template(şablon) yapısında gösterilmesini istiyoruz. Resmin gösterileceği kolonun eklenmesi ve şablon(template alan) alan eklemek için; GridView'ın sağında ki kulakçıktan(gridview TAsks dan) Edit Columns a tıklıyoruz.

8 En üst solda Available Fields (Mevcut Alanlar) var. Bunlardan istediğmizi seçip ADD butonu tıklanırsa o alandan bir tane GridView a ekler. Biz Örneğimiz için önce Selected Fields(Seçili yani GridView üzerinde şu an bulanan Alanlar) dan hepsini silelim. Silmek için Selected fields taki alanları seçip sil butonuna tıklıyoruz. Hepsini sildikten sonra, ve Avaliable Fields dan bir tane Image Field ve template Field ekleyelim.

9 Soldan Selected Fields tan Image Field seçili iken sağ taraftan(image Fields propersties den)

10 Birde Projemize resimlerin tutulacağı resimler klasörünü ekleyelim. Bunun için projeye sağ tıklayıp New Folder a tıklıoruz. GridView 'ı Özelleştirme(Template Alan Ekleme) GridView özelleştirmek için sağ kulakçıktan Edit Templates tıklanır. Zaten daha önce ki adımda Template Field eklemiştik.

11 Edit Templates tıklanınca aşağıdaki ekran karşımıza gelir. Burada ItemTempate, Elemanların normal durumda nasıl gözükeceğini belirler. Yani biz burada nasıl ayarlarsak kayıtların her biri bu biçimde gözükecektir. AlternatingItemTemplate ise Her kayıttan bir sonraki kaydın nasıl gözükeceğini belirler. Yani ilk kayıt numarası sıfırdan başladığını düşünelim. Çift numaralı kayıtlar ItemTemplate Formatında, Tek numaralı kayıtlarda AlternatingItemTemplate Formatında gözükür. HeaderTemplate Başlık satırnın biçimini belirler. footer Template en alt satırn biçimini belirler.edititemtemplate ise Düzenleme moduna geçtimizde (düzenlene kaydın) nasıl gözükeceğini belirler(genelde alanlar TextBox a yada DropDownList vb. kontrolere dönüşür.) Şimdi ItemTemplate i seçip, bunu düzenleyelim, Önce Alanların düzgün gözükmesi için bir table ekleyelim. Bunun için Table menusunden Insert Table komutuna tıklayalım ve 3 satır 2 sütun bir tablo oluşturalım.

12 Toolbox tan Konu, Mesaj, Eklenme Tarihi, Yazan bilgilerini ve bu alanlardaki değerleri göstermek için her bir alan için 2 label atıyoruz. Yani 4 alan * 2, 8 tane label yerleştirlim. Label ları CTRL tuşu bası tutarak hepsini seçip sağ tıklayıp properties, properties ekranında fore color özeliğinden yazıya renk veriyoruz. Item Template için Mavi rengi AlternatingItemTemplate için daha sonraki aşamada Kırmızı rengi seçeceğiz. Şimdi 4 adet Label a tablomuzdaki alanları bind(baglama) işlemi yapacağız. Textinde Konu yazan Label ın karşında yer alan Label da Tablodan çekilen Konu alanını bağlamak için Label ın sağındaki kulakçıktan Edit Data Bindings seçilir. Gelen ekranda Field binding den konu alanı seçilerek label da konunun gözükmesi sağlanacaktır. Custom Binding seçip Eval("konu") yazabiliriz. Aynı işlevi yerine getirir. Not: Eğer düzenleme yapılacaksa(yani EditItemTemplate örneğin Two way binding yapmak için Eval yerine Bind("konu") komutu kullanılır. Two way den kasıt Bind da kontrol den tablo da ki alana da bilgi gider. Eval de sadece Tabloda ki alandan Label a bilgi çekilir. Bind TexBox tan tablodaki alana yazma

13 yapılabilir. Edit lerde Bind kullanılacak yani. Diğer Label lar içinde bağlama işlemi yapılır. Örneğin Tarih alanı için aşağıdaki gibi Format(Biçim de) seçilebilir. IAlternatingItemTemplate hızlıca oluşturabilmek için, ItemTemplate içinde oluşturduğumuz tabloyu seçtim ve kopyala tıkladıktan sonra, sağ kulakçıktan AlternatingItemTemplate seçip AlternatingItemTemplate Ekranına geçtim ve yapıştır yaptıktan sonra sabit yazı yazan Label ları seçip properties ekranından Fore Color renk ayarını Kırmızı yaptım.

14 Header Template düzenlemek için Gridview tasks dan HeaderTemplate seçilir. ToolBox tan Bir tane HyperLink eklenir. HyperLink Properties lerinden NavigateUrl, ~/MesajYaz.aspx olarak, Textini de Mesaj Yaz olarak değiştiririz. GridView template field işlemleri tamamlandı. resimler klasörüne mevcut (istediğniz) resimleri eklemek için resimler klasörüne sağ tıklanır ve Add Existing Item(Mevcut Elemanları Ekle) tıklanır ve resimler eklenir.

15 Resimleri ekledikten sonra, Kaydımıza bir resim dosyasının ismini girince ve projeyi çalıştırınca aşğaıda ki ekran görüntüsü oluştu.

16 Bu sayfaya bir tana HyperLink ekleyerek Properties(özelliklerinden) aşağıdaki ayarlar yapılır. Projeye sağ tıklayarak, Add New Item dan Web Form seçilir ve MesajYaz.aspx ismi verilerek sayfa oluşturulur. Projeye sağ tıklanır, Add New Folder, Klasöre Yonetici adı verilir. Bu klasöre sağ tıklanır Add New Item tıklanır Web Form seçilir ve adına Yonetici.aspx adı verilir. Yonetici klasörüne sağ tıklanır add new item tıklanır web form seçilir Giris.aspx ismi verilir. Yonetici klasörüne sağ tıklanır. Add new item dan Web Configration File,seçilerek web.config eklenir. Bu adımlardan sonra Proje klasör ve dosyalarının görüntüsü şekildeki gibidir.

17 MesajYaz.aspx dosyasınında Table menüsünden Insert Table tıklanır 7 satır 2 sütunluk Bir tablo eklenir. Aşağıdaki sayfa tasarlanır. AccessDataSource1 sağ kulakçığından Configure ayarlarına girilir ve daha öncekinde yaptığımız gibi veritabanı seçilir.

18 ADVANCED butonu tıklanır. Generate INSERT,UPDATE and DELETE statements seçeneği seçilir. Böylece otomatik olarak kayıt ekleme, Güncelleme ve Silme sorgu (sql) komutları oluşturulur. Mesaj girilecek TextBox ın TextMode özelliği MultiLine yapılır. AccessDataSource1 in html source kod tarafında Insert komutunda id yer alıyorsa silinir values tarafında karşılık gelen? soru işarati de silinir. InsertParameters içinden id parametresi de silinir. Çünkü biz id formdan göndermiyoruz otomatik artan bir alan olduğu için. Kaydet Butonun Click olayına aşağıda ki kodlar yazılır. AccessDataSource1.InsertParameters["konu"].DefaultValue = TextBox1.Text; AccessDataSource1.InsertParameters["mesaj"].DefaultValue = TextBox2.Text; AccessDataSource1.InsertParameters["yazan"].DefaultValue = TextBox3.Text; AccessDataSource1.InsertParameters["resim"].DefaultValue = FileUpload1.FileName; AccessDataSource1.InsertParameters["tarih"].DefaultValue = DateTime.Now.Date.ToString(); AccessDataSource1.InsertParameters["goster"].DefaultValue = "false"; ResimYukle(); AccessDataSource1.Insert();

19 ResimYukle() Metodunun içi aşağıdaki gibi yazılır. private void ResimYukle() if (FileUpload1.HasFile) FileUpload1.SaveAs(Server.MapPath("resimler/" + FileUpload1.FileName)); Yonetici.aspx Web Formunu ve Yonetici.aspx.cs Dosyalarını düzenleyelim Yukarıdaki sayfa tasarlanır. Web Form üzerine, AccessDataSource, HyperLink, LinkButton ve GridView yerleştiriyoruz. AccessDataSource'un ayarlarını yapıyoruz. Bunun için AccessDataSource'un sağ kulakçığına tıkayıp Configure seçeneğine tıklıyoruz. Veritabanını seçtikten sonra, Tüm kayıtları çekiyoruz. Sorgumuz Select * from defter. Daha sonra GridView'un sağ kulakçığından DataSource olarak AccessDataSource1 seçilir. Enable Paging, Enable Sorting, Enable Editing(kayıt düzenleme), Enable Selection (kayıt seçme), Enable Deleting(kayıt silme) checkbox a tıklayarak etkin hale getiriyoruz.

20 HyperLink'in NavigateUrl özelliğine Ziyaretçi Defterinin ana sayfasını Default.aspx link olarak veriyoruz.( ~/Default.aspx) Çıkış (LinkButton) butonun Click olayına aşağıdaki kod yazılır. Bu kod ile Session(oturum) değişkenleri yok edilir. Ve Default.aspx sayfasına yönlendirme yapılır. protected void LinkButton1_Click(object sender, EventArgs e) Session.Abandon(); Response.Redirect("~/Default.aspx"); Yönetici Girişi için Giris.aspx sayfası ve Giris.aspx.cs kodlanması

21 Sayfa üzerine bir tane Login kontrolü birde AccessDataSource yerleştiriyoruz. AccessDataSource'un sağında ki oka tıklayarak AccessDataSouce Tasks 'dan Configure DataSource tıklıyoruz. Veritabanını seçiyoruz. Sonraki adımda Yoneticiler tablosu seçilir. Where butonu tıklanır ve ad ve sifre alanları için sorgumuza parametre ekliyoruz. Burada source None seçtik, KullanıcıAdı ve Şifreyi Login Kontrolünden alacağımız için. Add butonu tıklanır ve parametre oluşturup eklenmiş olur.

22 Sifre parametresi işlem tekrarlanır ve Add butonu tıklanır.

23 Finish tıklanarak işlem tamamlanır. (Eğer Hazır Login kontrollünü kullanmayıp, Kullanıcı adı için TextBox1 ve şifre için de TextBox2 ve Butonu biz yerleştirseydik Source dan Control seçip sağ tarafda gelen controlid den ad parametresi için TextBox1, sifre parmetresi için de TextBox2 i seçebilirdik.) Login1'in Authenticate olayına aşağıdaki kodlar yazılır. Böylece kullanıcı adı ve şifre yönetici tablosunda varsa, yöneticinin bilgileri Session (oturum) değişkeni olarak kayıt edilir. protected void Login1_Authenticate(object sender, AuthenticateEventArgs e) AccessDataSource1.SelectParameters["ad"].DefaultValue = Login1.UserName; AccessDataSource1.SelectParameters["sifre"].DefaultValue = Login1.Password; DataTable dt=((dataview)accessdatasource1.select(datasourceselectarguments.empty)).totable(); if (dt.rows.count > 0) Session["user"] = Login1.UserName; Session["id"] = dt.rows[0]["id"];

24 Response.Redirect("Yonetici.aspx"); else e.authenticated = false; Yonetici.aspx.cs dosyasında Yonetici.aspx yüklenirken (Page Load) yapılacak işlemler Yönetici sayfası yüklenirken, yönetci giriş yapmış ise sayfayı göstermeliyiz, yönetici giriş yapmamış ise sayfanın görülmesine izin vermemeliyiz. Bu yüzden Page_Load olayına aşağıdaki kodlar yazılır. protected void Page_Load(object sender, EventArgs e) if (Session["user"] == null) //Giriş yapılmamışa Giris.aspx' yönlendirme yapılıyor Response.Redirect("Giris.aspx"); else Response.Write("Hoşgeldin:" + Session["user"]); Giris.aspx 'te OTURUM (SESSION) DEĞİŞKENİNİ CLASS OLARAK KAYIT EDELİM ve Yonetici.aspx'tede CLASS OLARAK OKUYALIM (Yukarıda ki kodlarda değişiklik yapıcaz) Yonetici class ını oluşturmak için App_Code (App_Code yoksa proje sağ tıklayın Add Asp.NetFolder dan App_Code klasörünü ekleyiniz) klasörüne sağ tıklayıp Add New Item dan class seçilir. Class'ın adına Yonetici yazıyoruz. Yonetici adında bir class oluşturalım. Bu Yonetici class'ı Yonetici tablomuzu modellesin(yani aynı alanlara sahip olsun böylece bir tablodan bir kayıt çekildiğinde bu kaydın alanlarını class'ın alanlarında(property,özelliklerinde) saklayabilir ve tekrar erişebiliriz. Class'ı oluşturmak için aşağıdaki kodları önce yazarız. Alanlar tablodaki alanlarla aynı tipte olmalıdır. public class Yonetici

25 int id; string ad, sifre, rol; Alanları Encapsulate(kapsüllemek) yapmak için Object oriented programlamada izlenen bir yöntemdir. Sınıf değişkenleri gizlenir(kapsüllenir). Bu kapsüllenmiş alanlara public özellikler aracılığı ile erişilir. Kapsüllemek istediğmiz alan değişkenin üzerinde sağ tıklanır Refactor-->Encapsulate Field tıklanır. Tüm alan değişkenleri için bu işlem tekrarlanır. (Not : public özelliklerin alanlarla aynı sırada olması için sondaki değişkenden başlayıp (rol) başa doğru (id) alanına doğru bu işelemi yapmakta fayda var) public class Yonetici int id; string ad, sifre, rol; public Yonetici() //içi boş Varsayılan Yapılandırıcı(Constructor) // Constructor(Yapılandırıcı) sınıf türünden nesne tanımlarken çalışır public Yonetici(int pid, string pad, string psifre, string prol) //Parametreli constructor id = pid; ad = pad; sifre = psifre; rol = prol; public int Id get return id; set id = value;

26 public string Ad get return ad; set ad = value; public string Sifre get return sifre; set sifre = value; public string Rol get return rol; set rol = value; Yönetici kullanıcı adını ve şifresi ile giriş yaptıktan sonra(giriş.aspx sayfasında) Yonetici tablosundan çekilen yönetici bilgileri, Yonetici class türünden bir değişkene atanır. Giris.aspx.cs de değişiklik yapıyoruz. protected void Login1_Authenticate(object sender, AuthenticateEventArgs e) AccessDataSource1.SelectParameters["ad"].DefaultValue = Login1.UserName; AccessDataSource1.SelectParameters["sifre"].DefaultValue = Login1.Password; DataTable dt=((dataview)accessdatasource1.select(datasourceselectarguments.empty)).to Table(); if (dt.rows.count > 0) //Kırmızı satırlar değişti Yonetici yonetici = new Yonetici(); yonetici.ad = Login1.UserName; yonetici.id =(int) dt.rows[0]["id"]; yonetici.sifre = dt.rows[0]["sifre"].tostring(); yonetici.rol = dt.rows[0]["rol"].tostring(); Session["oturum"] = yonetici; Response.Redirect("Yonetici.aspx"); else e.authenticated = false; Şimdide Yonetici.aspx.cs deki değişiklik protected void Page_Load(object sender, EventArgs e)

27 if (Session["oturum"] == null) Response.Redirect("Giris.aspx"); else Yonetici yonetici = (Yonetici)Session["oturum"];//Önemli Response.Write("Hoşgeldin:" + yonetici.ad);