NOT: VERİTABANINDAKİ TABLOLARI OLUŞTURMAYI DA UNUTMAYACAĞIZ.

Transkript

1 20 Ocak 2012 / Cuma Yeni uygulama Yönetim adlı bir klasör oluşturacağız. Yönetim klasörü içerisine bir masterpage oluşturacağız. (tabloyla) Örneğin; Ana Sayfa Albüm ekle Fotoğraf ekle Content Place Holder(Değişecek alan) Sayfaları oluşturacağız. Sayfalar; Albüm ekle sayfasında fotoğraflar için kategori eklenecek. Fotoğraf ekle sayfasında da albümlere fotoğraf eklenecek. Fotoğraf eklenirken kategori seçimi dropdownlist ile yapılacak. Fotoğrafın başlığı, açıklaması olacak. Açıklaması Fckeditor ile kaydedilecek. NOT: VERİTABANINDAKİ TABLOLARI OLUŞTURMAYI DA UNUTMAYACAĞIZ. Sitedeki fotoğraflar sayfasında da albümler gözükecek, albümlere tıklayınca da albüme ait fotoğraflar gözükecek. Kolay gelsin 1

2 File Open Web Site masa üstündeki webaspx klasörü Yönetim adlı yeni klasör oluşturacağız, C/../webaspx/ sağ tıkla New Folder Adını yonetim olarak değiştir. Böylelikle yonetim klasörünü oluşturduk, bu klasöre sağ tıklayıp Add New Item Açılan pencereden Master Page Name : yonetim.master Add İki satır tek sütunluk tablo ekliyoruz.üst satıra üç tane Hyper link, alt satıra Content place holder ekliyoruz, ama Content place holder ı otomatik ekliyor bunu sürükleyip tablonun içine taşıyoruz. 2

3 Linklerin adını Ana sayfa, albüm ekle, fotoğraf ekle olarak değiştiriyoruz Yeni sayfalar oluşturmak için yine yonetim klasörüne sağ tıklayıp Add New Item Web Form Select Master Page Name:albumekle.aspx Add yonetim yonetim.master OK Linkleri yönlendireceğimiz sayfaları oluşturacağız. Web Site Add New Item.. Web Form Name anasayfa.aspx Select Master Page Add Açılan pencerede yönetim klasöründeki yönetim.master i seçiyoruz OK 3

4 Böylelikle yönetim klasörünün içine anasayfa.aspx sayfamızı oluşturduk. Aynı şekilde yönetim klasörünün içine albumekle.aspx ve fotografekle.aspx sayfalarını oluşturuyoruz. Masterpage de (yönetim/yönetim.master) NavigateURL de yönlendireceğiz. Örneğin Ana sayfa Hyper linkinin Navigate Url sini anasayfa.aspx e yönlendiriyoruz. 4

5 Veri tabanında iki tablo oluşturuyoruz, adları album,fotograf. Bunu şöyle yapıyoruz, Solution Explorerdeki vt.mdb ye çift tıklıyoruz,veri tabanını açıyor,burada tablolarımızı oluşturacağız Bizim eski veri tabanını açtı ama önemli değil, oluştur deyip iki tablomuzu oluşturuyoruz. Refresh ediyoruz, veri tabanına tablolarımız eklendi gözüküyor albumekle.aspx sayfasına TextBox ve Button ekliyoruz 5

6 Kodları yazmak için duyuru ekle.aspx.cs sayfasını açıp kodları kopyala yapıştır yapıp düzenleyeceğiz Albumekle.aspx.cs sayfasının son düzenlenmiş hali şöyle oldu using System.Web.UI.WebControls; using System.Data; using System.Data.OleDb; public partial class Yonetim_Albumekle : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) protected void Button1_Click(object sender, EventArgs e) OleDbConnection db_baglanti = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("~/App_Data/vt.mdb")); try db_baglanti.open(); OleDbCommand db_komut = new OleDbCommand(); db_komut.commandtext = "insert into album(albumadi) values(@albumadi)"; db_komut.connection = db_baglanti; db_komut.parameters.addwithvalue("@albumadi", TextBox1.Text); db_komut.executenonquery(); Literal1.Text = ("kayıt yapılmıştır"); catch (Exception hata) Literal1.Text = hata.tostring(); finally db_baglanti.close(); GridView1.DataBind(); // verilerin girildiğini görmek için 6

7 Yönetim/albumekle.aspx sayfamıza Literal ve GridView ekliyoruz.gridview un Tasks penceresinde Choose Data Source New Data Source Acces Data Base Browse App_Data vt.mdb OK ~/App_Data/vt.mdb Next Specify columns from a table or view album Columns : * Next Test Query, veri tabanındaki album tablosu görülüyor Finish albumekle.aspx i çalıştırıp veri giriyoruz, Ekleyiniz Button una tıklıyoruz. Yönetim Klasöründe oluşturduğumuz fotografekle.aspx sayfasını açıyoruz. Veri Tabanımızdaki fotoğraf isimli tabloda id, fotografadi, albumadi, aciklama, resimadresi alanları var. 7

8 En başa Literal ekliyoruz,daha sonra hangi albüme fotoğraf ekleyeceğimizi belirleyebileceğimiz DropDownList ekliyoruz. Fotoğrafa vereceğimiz ismi yazacağımız bir TextBox ile Fotoğrafı seçip yükleyeceğimiz yani resim adresi için FileUpload ekledikten sonra, Açıklamayı yapacağımız FCK Editörünü ve bütün hepsini yüklemek için Button düğmesini ekliyoruz. Bütün bunların altına DataSource (DataSource nedir? veri kaynağıdır.ancak sadece verileri göstermek için değil düzenlemek için de kullanılır. ) ve verileri yeniden yüklemesi için GridView ekliyoruz. Fotoğrafı ekleyeceğimiz album adını seçeceğimiz DropDownList in Tasks penceresinden Choose Data Source New Data Source Access Data Base Browse App_Data vt.mdb OK Next Specify Columns Name : album Columns : * Next Finish Açılan pencerede Select a data field to display in the DropDownList seçeneğinde albumadi Select a data field for the value of the DropDownList seçeneğinde id Seçiyoruz OK 8

9 Çünkü, DropDownList in listesinde albumadi gözüksün istiyoruz ama, biz aslında id yi seçeceğiz. DropDownList in altına AccessDataSource u otomatik ekledi. Çalıştırıyoruz, DropDownList i tıklayınca albumadi listesi açılıyor. 9

10 Fotoğrafın açıklamasını yapacağımız FCK Editorunun Base Path ine ~ işaretini ekliyoruz. GridViewTasks penceresinde Choose Data Source New Data Source Access Data Base Browse App_Data vt.mdb OK Next Specify Columns Name : fotograf Columns : * Next Finish GridView in altına AccessDataSource u otomatik ekledi. Şu an çalıştırsak da yükleme yapamayız. Kodları yazmamız gerekiyor. Albumekle.aspx.cs sayfasındaki kodları kopyala yapıştır yapıyoruz. Değişiklikleri düzenliyoruz. Fotoğrafları nereye ekleyeceğiz? fotoğraf tablosuna insert into fotograf Fotoğraf tablosuna neler ekleyeceğiz? fotografadi,albumadi,aciklama,resimadresi Bunları nerelerden aldıracağız? db_komut.parameters.addwithvalue("@fa", TextBox1.Text) db_komut.parameters.addwithvalue("@aa", DropDownList1.SelectedValue); db_komut.parameters.addwithvalue("@ac", FCKeditor1.Value); db_komut.parameters.addwithvalue("@ra", FileUpload1.FileName); 10

11 Fotoğrafları kaydedeceğimiz resimler adlı klasör oluşturacağız. C/../webaspx/ sağ tıkla New Folder Adını resimler olarak değiştir. FileUpload1 de seçilen resimlerin buraya yüklenmesi için yolunu bildiriyoruz. FileUpload1.SaveAs(Server.MapPath("~/resimler/"+FileUpload1.FileName)); Kodların son hali şöyle oldu : using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using System.Data.OleDb; public partial class yonetim_fotografekle : System.Web.UI.Page protected void Page_Load(object sender, EventArgs e) protected void Button1_Click(object sender, EventArgs e) OleDbConnection db_baglanti = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" + Server.MapPath("~/App_Data/vt.mdb")); try db_baglanti.open(); OleDbCommand db_komut = new OleDbCommand(); db_komut.commandtext = "insert into fotograf(fotografadi,albumadi,aciklama,resimadresi) values(@fa,@aa,@ac,@ra)"; db_komut.connection = db_baglanti; db_komut.parameters.addwithvalue("@fa", TextBox1.Text); db_komut.parameters.addwithvalue("@aa", DropDownList1.SelectedValue); db_komut.parameters.addwithvalue("@ac", FCKeditor1.Value); db_komut.parameters.addwithvalue("@ra", FileUpload1.FileName); FileUpload1.SaveAs(Server.MapPath("~/resimler/" + FileUpload1.FileName)); db_komut.executenonquery(); Literal1.Text = ("kayıt yapılmıştır"); catch (Exception hata) Literal1.Text = hata.tostring(); finally db_baglanti.close(); GridView1.DataBind(); Kaydedip,çalıştırıp dolduruyoruz. 11

12 Fotoğrafları Ekleyiniz Button una tıklıyoruz. Kayıt yapılmıştır dedi. Resimler klasörüne bakıyoruz, resim eklenmiş 12

13 Veri tabanına çift tıklayıp bakıyoruz, oraya da eklediğimiz veriler eklenmiş. 13