Columns : * Next Text Query veri tabanındaki urunler tablosu görülüyor. Finish, çalıştırınca direk veri tabanındaki bilgileri alıyor.

Transkript

1 Masa üstünde webvturunler adlı klasör var, bunu web sitemiz olarak açacağız. File Open Web Site açılan pencerede masa üstü webvturunler 13 Ocak 2012 / Cuma Master Page den urunler adlı yeni bir sayfa oluşturup, urunler.aspx sayfasını yapacağız Website Add New Item Name : urunler.aspx select master page Add OK Urunler.aspx sayfamızın Design görünümünde, Soldan Toolbox ın Data kontrollerinden, DataList kontrolünü ekliyoruz, DataList ten veri tabanına bağlantı gerçekleştirmek için; DataList Tasks bölümünden 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 urun 1

2 Columns : * Next Text Query veri tabanındaki urunler tablosu görülüyor. Finish, çalıştırınca direk veri tabanındaki bilgileri alıyor. 2

3 Çalıştırdığımızda urun resim alanındaki verileri gösteriyor ama imajları göstermiyor, bunun için imajları ekleyeceğiz. DataList Tasks ın Edit Templates sekmesine tıklayıp ( EditTemplates : Kayıtların gösterim özelliklerini değiştirmek için) açılan pencereye, Toolbox dan image kontrolünü sürükle bırak Image Tasks sekmesinin Edit DataBindings Image URL Field binding urunresim Custom binding "~/urunresim/"+eval("urunresim") OK çalıştırıyoruz. Resimler gözüküyor 3

4 urunresim urunresim klasörü bunun içinde resimler var, veri tabanında yazıyor, dün yapmıştık. Resimler büyük bunların genişliğini değiştirelim. Bu arada image kontrolünün yerini sürükleyip değiştirerek en üste aldık. image tıkla sağdan propertiesde width=250 px End Template Editing DataList tıkla Sağda properties den ItemStyle tıkla Width. 220px Border Style : solid Border width : 1 px Border color : kırmızı OK çalıştırıyoruz 4

5 5

6 Daha başka özelliklerini değiştirebiliriz, sağdan propertiesden Repeat column : kaç sütunda gözüksün mesela 3 Repeat direction : yataymı dikeymi gözüksün mesela yatay Şimdi şunu yapıyoruz, resmin büyük halini görmek için tıklayınız yazısı yazsın ve tıklayınca yeni pencerede4 resim gözüksün. Hyper link ekliyoruz, tıklayıp properties inde text özelliğine "Resmin Büyük Halini Görmek İçin Tıklayınız" yazıyoruz, Navigate URL sine urun resim,ve "~/urunresim/"+eval("urunresim") yazıyoruz kaydedip, çalıştırıyoruz 6

7 Tıklıyoruz, açıyor ama yeni sayfada açmıyor, yeni sayfada açmak için Propertiesden target : blank yapıyoruz Çalıştırıyoruz, yeni sayfada açıyor 7

8 Biz yazıya tıklayınca değil de, Resme tıklayınca açılsın istiyoruz, biraz HTML kodu yazacağız, image a tıklayıp split görünümünde açtığımızda image in aspx kodu koyu renkle işaretlenmiş, biz ne yapacağız resme link vereceğiz, bunun için link verme HTML kodu olan <a href= > </a> tag ını yazacağız, linkin gideceği yer, veri tabanı olacağı için ımage nin veri tabanı yolunu kopyala yapıştır yapıyoruz. <a href="<%# "~/urunresim/"+eval("urunresim") %>"> <asp:image ID="Image1" runat="server" Height="62px" ImageUrl='<%# "~/urunresim/"+eval("urunresim") %>' Width="250px" /></a> Yalnız hata verebileceği için ~/ işaretlerini siliyoruz, son hali şöyle oluyor: <a href="<%# "urunresim/"+eval("urunresim") %>"> Kaydedip; çalıştırıyoruz, resmin üstüne gelince el işaret çıkıyor, tıklayınca aynı sayfanın üstüne açılıyor,yeni sayfada açması için parametre yazıyoruz (target="_blank") <a href="<%# "urunresim/"+eval("urunresim") %>" target="_blank"> Kaydedip, çalıştırıyoruz. 8

9 FCK Editörü ekliyeceğiz. Ajax control tool kit gibi ekliyoruz, bir de yardımcı klasörü var, onu da sitemize eklememiz lazım.bu dosyayı silmeyeceğimiz bir yere almalıyız.masa üstünde.dll dosyası var, solda toolbox tabında en altta boşlukta sağ tıklayıp Add Tab deyip adını FCK Editor yapıyoruz bu tabın altında sağ tıklayıp Chose Items Browse FredCK.FCKeditorV2.dll seç Aç OK, eklendi. 9

10 Ama bunu sürükle bırakla kullanamıyoruz dosyasını yüklememiz gerekiyor. Masa üstünde fck editor klasörü var bu klasörü sitemize kopyala yapıştır yapıyoruz Yeni sayfa açtık iki text box ekleyip FCK Editor ekleyeceğiz 10

11 Bunu çalıştırınca hata verebilir, veri yolunu düzenlemek lazım. Editörü tıklayıp, sağda propertiesde BasePath : ~/fckeditor/ ekliyoruz çalıştırıyoruz. 11