ETKİLEŞİMLİ WEB UYGULAMALARI Savaş TUNÇER

... konulu sunumlar: "ETKİLEŞİMLİ WEB UYGULAMALARI Savaş TUNÇER"— Sunum transkripti:

1 WEB TASARIMI VE PROGRAMLAMA Savaş TUNÇER

2 Dinamik web site yapmak için kullanılan geniş çaplı programdır. Kullanım amaçları Web Tasarımı Otomasyon(paket program hazırlama) Not: Eski sürüm üzerinde Anlatım yapılmasına Rağmen komutlarda Değişiklik yoktur

3 Tümleşik Yazılım Geliştirme Ortamı  Bilgisayar programcılarının hızlı ve rahat bir şekilde yazılım geliştirebilmesini amaçlayan; geliştirme sürecini organize edebilen yazılımlarıdır.  Visula Studio 2008 bir IDE dir Tümleşik Yazılım Geliştirme Ortamı  Bilgisayar programcılarının hızlı ve rahat bir şekilde yazılım geliştirebilmesini amaçlayan; geliştirme sürecini organize edebilen yazılımlarıdır.  Visula Studio 2008 bir IDE dir

4 MENÜ ÇUBUĞU ARAÇ ÇUBUĞU PANELLER ÇALIŞMA SAYFALARI BAŞLANGIÇ SAYFASI

5  Solution Explorer paneli geliştirilmekte olan bir uygulamanın tüm bileşenlerinin bulunduğu paneldir.  Bu panelde bir proje olabileceği gibi birden fazla proje de olabilir.  Görünür durumda değilse View > Solution Explorer (Ctrl + Alt + L) komutu kullanılabilir.

6  Properties paneli, proje içinde seçilen ögeye ait özellikleri görüntüler.  Panelin üzerinde yer alan açılır menü yardımıyla istenilen araca ait özellikler görüntülenebilir.  Properties paneli görünür durumda değilse F4 tuşu yardımıyla tekrar görünür hale getirilebilir.

7  Toolbox paneli, projelere eklenebilecek hazır ögelerin bulunduğu paneldir.  Toolbox varsayılan olarak görünür durumdadır. Görünmüyorsa View > Toolbox (Ctrl + Alt +X) komutu ile görünür hale getirilebilir.

8  Server Explorer paneli, programlama yazılımında sunucu yönetim panelidir.  Veri bağlantılarını açmak, kullanıcı veri tabanlarını kullanmak için bu panel kullanılır.  Programlama yazılımı ücretsiz dağıtımında Database Explorer olarak adlandırılmaktadır.  Görünür durumda değilse View > Server Explorer (Ctrl + Alt + S) komutu kullanılabilir.

9 Server Explorer panelinde iki temel seçenek vardır:  Data Connections: Kullanıcı tarafından eklenmiş veri bağlantılarını listeler. Bu bağlantı altında diyagramlar, tablolar, görünümler ve her bağlantı için fonksiyonlar listelenir.  Programlama yazılımı farklı türdeki veri tabanlarına bağlantıyı desteklemektedir. Servers:  Servers: Kullanıcı için mevcut sunucuları listeler

10  Birçok IDE yazılımı, kullanıcılara mesajlarını iletmek için output panelini kullanmaktadır

11 .NET Platformu . NET platformu; masaüstü, web ve telefon uygulamaları ve web hizmetleri sağlayan bir uygulama geliştirme platformudur.

12 Ortak Çalışma Zamanı (Common Language Runtime – CLR) : .NET platformu kodu çalıştıran ve geliştirme işlemini kolaylaştıran hizmetleri sağlayan bir çalışma zamanı ortamı sağlar. Ortak Tip Sistemi (Common Type System – CTS):  Tüm dillerdeki değişken ve referans tipleriyle uyumlu olacak şekilde oluşturulmuş tipleri içeren sistemdir. Ortak Dil Yönergesi (Common Language Spesification – CTS) :  Ortak Dil Yönergesi, tüm.NET dillerinin kabul edebileceği ortak tip ve programlama altyapısını tanımlayan bir listedir. Temel Sınıf Kütüphanesi (Base Class Library - BCL):  Uygulama geliştirirken ihtiyaç duyulabilecek, nesneye dayalı sınıfların yer aldığı kütüphanedir

13 . NET platformu farklı dillerde yazılmış programları kendilerine özgü, uygun derleyiciler kullanılarak CIL adı verilen orta düzey bir dile (ara dile) çevirir.  CIL dilinin temelini Assembly oluşturur

14  Programlama yazılımı ile bir web projesi oluşturmak için;   File > New > Web Site (Shift + Alt + N) komutunu seçin

15

16 Design: Çalışma alanının Tasarım görünümde olması Split: Hem kod hem tasarım alanı birlikte açılıması Source: Çalışma alanının Kod görünümde olması Yeni eklenen sitenin varsayılan dosyaları Asp. Net in ilk varsayılan saydası Default.aspx olarak geçer

17  Dinamik içerikli sitelerde ise HTML ile birlikte ASP.NET, ASP, PHP gibi web programlama dillerinden faydalanılmaktadır. İstemci Tabanlı Çalışma:  Bu çalışma sisteminde sayfalar sunucuda herhangi bir işlem yapılmadan istemciye gönderilir. İstemci gelen bilgileri yorumlayarak tarayıcı yazılımı vasıtasıyla sayfayı görüntüler. Sunucu Tabanlı Çalışma:  Bu çalışma sisteminde istemci sunucudan bir istekte bulunduğu zaman kodlar sunucu üzerinde çalıştırılır ve işlemin sonucunu içeren bir sayfa üretilerek istemciye iletilir.

18

19 .aspx uzantılı sayfa kodları incelenecek olursa (Bu pencereye sayfa görünümlerinden Source (Kaynak Kod) penceresinden ulaşılabilir.);  Sayfanın en başında Page yönergesi bulunmaktadır. Bu yönerge sayfa ile ilgili, sayfanın türünü, kodlanan dili, kodların tutulacağı dosya adını vb. bilgileri vermektedir. ,,, gibi etiketler standart HTML etiketleridir.  etiketinin ayrı bir önemi vardır. Standart bir ASP.NET sayfasında mutlaka bulunmalıdır. Sayfaya eklenen bütün sunucu etiketleri bu etiket içinde yazılmalıdır.  Ayrıca etiketi runat =”server” ifadesi mutlaka içermelidir. Bu ifade bu etiket içindeki kodların sunucuda çalışması gerektiğini bildirir.  <asp: ile başlayan kodlar ise sunucu kontrolleri tanımı için kullanılır.

20  Web kontrolleri iki başlık altında sınıflandırılmaktadır.  Ve ToolBox araç kutusu içinde yer almaktadır.  Bunlar; a)Sunucu Kontrolleri b) HTML Kontrolleri Toolbox panelinden çalışma alanına sürükle bırak yöntemi ile kontroller uygulamaya eklenebilir.

21  Standart: Temel web programlama işlemleri için kullanılan kontrollerin yer aldığı gruptur.  Data: Veri işlemleri için kullanılan kontrollerin yer aldığı gruptur.  Validation: Veri doğrulaması ve veri kontrolü için kullanılan kontrollerin yer aldığı gruptur.  Navigation: Site içi dolaşımın sağlanması için kullanılan kontrollerin yer aldığı gruptur.  Login: Üyelik sistemi için kullanılan kontrollerin yer aldığı gruptur.  WebParts: Uygulamanın yönetilebilen ve kişiselleştirilebilen parçalara ayrılmasını sağlayan gruptur.  HTML: HTML kontrollerinin bulunduğu kontrol grubudur.  General: Tüm bunlar dışında kalan genelde sonradan eklenen kontrollerin yer aldığı gruptur.

22 En sık kullanılan HTML kontrolleri şunlardır; 1.Button : Reset(temizle) ve Submit(gönder) 2.Text, TextArea ve Password Kontrolleri 3. File 4. CheckBox

23 5. Radio: 6. Hidden : Hidden kontrolü sayfanın arka planında istemcide veri saklanmasına yarayan kontroldür 7. Table: td> td> 8. Image : Belirtilen bir kaynaktaki resmi görüntülemek için kullanılan kontroldür.

24 9.Select seçenek 1 seçenek 2 10.Horizontal Rule Uygulamaya yatay çizgi eklemek için kullanılan kontroldür. 11.Div  Div kontrolü içerisinde HTML etiketleri, HTML kontrolleri ve ASP.NET sunucu kontrolleri barındırabilen sayfa tasarımında önemli görevler üstlenen bir kontroldür.

25 1. Label : Label kontrolü metin göstermek için kullanılan kontroldür. 2. TextBox : Kullanıcılar istenilen bilgileri bu kontrol aracılığıyla belirtirler. a.TextMode özelliği : SingleLine modu, metin tek satır halinde gösterilmek için kullanılır. MultiLine modu, birden fazla metin alanı oluşturmak için kullanılır.Password şifre için kullanılır. b.ReadOnly özelliği  TextBox kontrolü, veri alma amaçlı değil de veri görüntülemek için kullanılıyorsa, bulunan metnin değiştirilmemesi için ReadOnly özelliği True olarak ayarlanmalıdır.

26 c.MaxLength Özelliği: Bu özellik yardımıyla girilecek olan karakter sayısı sınırlandırılabilir. Varsayılan olarak 0 değerindedir. d.Enabled Özelliği TextBox kontrolünün aktif ya da pasif olmasını sağlayan özelliktir. Varsayılan olarak true değerdedir. e.Visible Özelliği TextBox kontrolünün görünür ya da gizli olmasını sağlayan özelliktir. Varsayılan olarak true değerdedir.

27 3.Button: Button kontrolü, tıklandığında belirli bir iş yaptırmak için kullanılan kontroldür. Varsayılan olayı Click olayıdır. Button kontrolü üzerine tıklandığında bu olay tetiklenir. Sunucu kodları sayfasında Click olayında gerçekleştirilecek işler tanımlanır. Button kontrolü Click olayı tasarım sayfasında button üzerine çift tıklanarak oluşturulabileceği gibi Properties panelinden de oluşturulabilir.

28 4.LinkButton: 5.ImageButton: Resimli bağlantı düğmesi 6.HyperLink: ……. etiketine karşılık gelir.

29 6.DropDownList : DropDownList kontrolü, bir grup ögeyi açılır menü şeklinde göstermek için kullanılan kontroldür.

30 7. ListBox : ListBox kontrolü, DropDownList kontrolünün tersine verileri kullanıcıya liste halinde sunan kontroldür. 8. CheckBox ve CheckBoxList : CheckBox kontrolü, kullanıcının işaretleme yaparak seçim yapmasını sağlayan kontroldür. CheckBoxList grup checkbox için kullanılır.

31 9.RadioButton ve RadioButtonList: Brden fazla seçenekten birini seçmek için kullanılır. 10. BulletedList: BulletedList Kontrolü, bir grup verinin madde işaretli bir liste halinde görüntülenmesi için kullanılan kontroldür.

32 11. Calendar : Takvim eklemek için kullanılır. 12. FileUpload : web sitesinin sunucuya dosya yüklemek amacıyla dosyaların seçimi için kullanılan kontroldür. 13. Panel : Panel kontrolü, içine konulan kontrollerin belli bir alanda gruplanmasına sağlayan kontrolüdür.

33  Doğrulama Kontrolleri, kullanıcılardan veri alınması gerektiği durumlarda, alınan verilerin doğruluğunu denetlemek için kullanılır.

34  Web.config dosyasına eklenecek komut

35  Kullanıcının belirtilen alanı boş geçmesini engelleyerek mutlaka doldurmasını sağlayan doğrulama kontrolüdür.  RequiredFieldValidator kontrolüne ait özellikler şunlardır:  ID: Kontrol adını belirlemek için kullanılır.  ControlToValidate: Kontrol edilecek olan sunucu kontrolünü belirlemek için kullanılır. Kontrol edilecek sunucu kontrolünün ID’si burada belirtilir.  ErrorMessage: Kullanıcıya gönderilecek hata mesajı bu alana girilir.

36  RangeValidator kontrolü, kullanıcı tarafından girilen bir değerin belirli bir aralıkta tutulmasını sağlamak için kullanılır.  ID: Kontrol adını belirlemek için kullanılır.  ControlToValidate: Kontrol edilecek olan sunucu kontrolü belirlemek için kullanılır. Kontrol edilecek sunucu kontrolünün ID’si burada belirtilir.  ErrorMessage: Kullanıcıya gönderilecek hata mesajı bu alana girilir.  MaximumValue: Sınırlamada üst sınırı belirtir.  MinumumValue: Sınırlamada alt sınırı belirtir.  Type: Verinin tipini belirlemek için kullanılır.

37  CompareValidator kontrolü, kullanıcılar tarafından girilen değerlerin başka bir değerle karşılaştırmasını yapar.  Bu kontrole ait özellikler şunlardır:  ID: Kontrol adını belirlemek için kullanılır.  ControlToValidate: Karşılaştırılacak değerin girildiği alandır.  ControlToCompare: Karşılaştırma başka bir alan ile yapılacaksa diğer alanı belirtir.  ValueToCompare: Eğer karşılaştırma sabit bir değerle yapılacaksa sabit değer burada girilir.  ErrorMessage: Kullanıcıya gönderilecek hata mesajı bu alana girilir.

38  RegularExpressionValidator kontrolü, kullanıcı tarafından girilen değerin belirli bir söz dizimi şeklinde girilmesini sağlamak için kullanılır. (örnek:email adresi, telefon numarası vs.)  ID: Kontrol adını belirlemek için kullanılır.  ErrorMessage: Kullanıcıya gönderilecek hata mesajının girileceği alandır.  ValidationExpression: Girilecek söz diziliminin seçileceği alandır. Söz dizilimi için programlama yazılımı belirli söz dilimleri sunar. Ancak bu söz dilimleri oldukça dar kapsamlıdır.

39  CustomValidator kontrolü, kullanıcı tarafından girilen değerleri kontrol etmek için doğrulama kontrolleri ihtiyaca cevap vermediği zaman, geliştiricilerin kendi yazdıkları doğrulama fonksiyonlarının kullanımı içindir.

40  ValidationSummary kontrolü, doğrulama kontrollerinin ürettiği hata mesajlarını bir yerde toplamak için kullanılır. Hata mesajlarını sayfada görmemizi sağlar

41  Table menüsünden Insert Table seçeneğiyle 6 satırlık (rows),2 sütunluk(cols) bir tablo eklenir. 6x2 Border özelliğini 2 yapınız.

42  Label ve TextBox elemanlarını yerleştirin ve 2. şekildeki gibi isimlerini değiştirin

43  Şekildeki gibi alt satırlardaki sütunları birleştirin.

44  5. satıra bir buton ekleyip, ismini değiştiriyoruz.  6. satıra Validation Summary(hata mesajlarını görmek için) nesnesini ekliyoruz.

45  Kullanıcı adı,e posta,şifre ve şifre tekrar metin alanlarının her birine Requiredfield ekleyip özelliklerini ayarlayın.  Örnek: Kullanıcı Adı ControlToValidate: TextBox1  Eposta Adresi ControlToValidate: TextBox2

46

47  Eposta adresi alanı için bir tane RegularExpressionValidator kontrolü ekleyeceğiz.

48  Şifre tekrar alanı için bir tane şifrelerin doğruluğunu kanıtlamak için CompareValidator eklenecek.

49

50  ODBC (Open Database Connectivity) API (Uygulama Programlama Arayüzü) sunmaktadır. Hem yerel (Local) hem de uzaktaki (Remote) veri kayaklarına erişmeye olanak sağlar. DAO (Data Access Object) ODBC’nin kullanımının zor olması ve yeni dillerle kullanılamaması üzerine bu teknolojinin geliştirilmesiyle oluşturulmuş bir teknolojidir.

51  RDO (Remote Data Object)  Uzak veri kaynaklarına erişimde ODBC’nin performansının geliştirilmesiyle oluşturulan daha yeni bir teknolojidir.  OLE DB (Object Linking and Embedding DataBase)  COM arayüzünü kullanarak birçok sisteme bağlantı sağlayan bir veri erişim teknolojisidir. Bu özelliği ile en çok kullanılan teknolojilerden biridir.   ADO (ActiveX Data Object)  Yüksek seviyeli programlama dillerinde tercih edilen OLE DB teknolojisi kullanan ve veriye erişim kolaylaştıran bir teknolojidir.    ADO.NET .NET uygulamalarında her türlü veriye erişim için veri tiplerine sahip, COM desteği gerektirmeyen, XML standardı üzerine kurulmuş ve.NET platformu özelliklerini kullanabilen, ADO teknolojisinin gelişmiş versiyonudur.

52 Connection Nesnesi  Connection nesnesi, veri kaynağı ile uygulama arasında bağlantı kurmak, hangi veri kaynağına hangi güvenlik ayarlarıyla bağlanılacağını belirlemek için kullanılır.  Programlama yazılımında veri kaynağının türüne bağlı olarak SqlConnection ve OleDbConnection olmak üzere iki farklı yöntem kullanılır.

53  Command Nesnesi Command nesnesi, bağlantı kurulan veri kaynağına müdahale etmeyi sağlar ve veri kaynağı ile uygulama arasında veri alma,veri verme isteklerini taşır. Programlama yazılımında Command nesnesi veri tabanı üzerinde komut yürütmek için ExuteNonQuery, ExuteScalar ve ExuteReader olmak üzere 3 farklı kullanımı vardır.

54 DataReader Nesnesi  DataReader nesnesi veri tabanından Command nesnesi ile getirilen verileri okumak için kullanılır. DataAdapter Nesnesi Veri tabanından alınana verileri bellekte tutacak nesnelere aktarmak için kullanılır. Veri tabanında işlem yapmak için DataAdapter nesnesinin 4 adet özelliği bulunur;  Seçme işlemi için SelectCommand,  Ekleme işlemi için InsertCommand,  Güncelleme işlemi için UpdateCommand,  Silme işlemi için DeleteCommand DataSet Nesnesi DataSet nesnesi, DataAdapter nesnesi aracılığıyla alınan verileri bağlantısız olarak depolamak ve yönetmek için kullanılır.

55 Uygulama yazılımından harici bir Access veri tabanına bağlanmak için öncelikle System.Data ve System.Data.OleDb isim alanlarının uygulamaya eklenmesi gerekmektedir. 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;

56  Bağlantı cümlesinde uygulama ile veri tabanı arasında bağlantı kurulurken bazı parametreler kullanılır. Bu parametreler;  OleDbConnection: Access veri tabanına bağlanmak için kullanılan Connection nesnesini ifade eder.  ConnectionString: Bağlantı cümlesini oluşturmak için Connection nesnesi özelliğidir.  Provider: Bağlantı sağlayıcısının ismini tutar. OleDbConnection nesnesi ile birlikte kullanılır. Uygulamalarda Microsoft.Jet.OLEDB.4.0 Provider’i kullanılacaktır.  Data Source: Access veri tabanı dosya adını belirtmek için kullanılır.  Server.MapPath: Sunucuya karşılık gelen fiziksel dizini belirtilen göreli veya sanal yolu eşleştirmek için kullanılır.

57  Veri tabanı bağlantı cümlesi aşağıdaki gibi tanımlanmaktadır; OleDbConnection baglant_adi = new OleDbConnection(); baglant_adi.ConnectionString = ("Provider=microsoft.jet.oledb.4.0;Data Source=" + Server.MapPath("Veritabanı_yeri_ve_adi "));

58  Veri tabanı üzerinde saklı olan verileri sayfada göstemek amacıyla kullanılan sanal bellektir. Access veri tabanı iiçin kullanılır. Veri tabanı SQL ise SqlDataSource olarak kullanılır.

59

60

61

62  AccessDataSource üzerindeki verileri sayfaya eklemek için kullanılan tablodur.

63