VERİ TABANI

      Bilgilerin saklandığı yer olarak tanımlayabiliriz.Eklenen her türlü değere veri denir.Verilerin saklanmasına da veri tabanı denir.Satır ve sütun mantığı vardır.

Günümüzde kullanılan veritabanları:

• Microsoft Access ( küçük işlerde kullanılır)
• Microsoft SQL Server
• Oracle 
• SQL (Structured Query Language)

Microsoft SQL Server en çok kullanılan veritabanı yazılımıdır.Sql veritabanları için ortak bir dildir. Veritabanlarının oluşturulmasını ve yönetilmesini sağlar.

Şimdi veri tabanımızı oluşturalım:

Öncelikle SQL Server Management Studio ‘ muzu açalım.

.\Hafize : asıl isim Hafize olan kısımdır.Nokta yerine localhost,makine adı,makinenin ID’si yazılabilir.

Sonra penceredeki connect’e tıklayarak devam edelim:

Burada New Query’e tıklayıp,açılan sayfamıza sorgularımızı girelim:

Veri tabanını aktif hale getirmek için Execute’a tıklarız ya da F5 tuşuna basarız:

Sorgularımızı çalıştırdık.

Böylelikle databas’imiz oluşmuş oldu.

 

 

ASP .NET

 

 

 

ASP.NET(ActiveServer Pages.NET)

 

  Microsoft tarafından geliştirilmiş bir web uygulama gelişimi teknolojisidir.Veri tabanına bağlanmak için ve aktif olarak sayfaya katılmak için Asp .Net kullanırız.

 • Asp.NET teknolojisi oldukça hızlıdır, eski ASP’ye göre her seferinde sayfaların tekrar tekrar okunarak her istekte bir istek olmasını engelleyerek, daha hızlı ve daha performanslı çalışmasını sağlar.

• ASP.NET  ile sadece web yazılımları değil ayrıca mobil telefonları içinde yazılım geliştirebilirsiniz. • Asp.NET teknolojisi oldukça hızlıdır, eski ASP’ye göre her seferinde sayfaların tekrar tekrar okunarak her istekte bir istek olmasını engelleyerek, daha hızlı ve daha performanslı çalışmasını sağlar.
• ASP.NET ; Web Servisleri, Veri tabanı etkileşimi ve email etkileşimi gibi bir çok teknoloji tarafından desteklenir ve bir çok teknolojiyi destekler.
• ASP.NET ile projeler hazırlanırken projenin dizayn tarafından bağımsız olarak rahatlıkla çalışabilirsiniz.

Asp.Net kullanmak için server adı gereklidir.Bunun içinde bilgisayara  “IIS(Internet Information Services) “ kurulmalıdır.Ama visual studio içindeki Web Development  Server’ı da kullanabiliriz. Asp,Php,Jsh yapıları böyle çalışır.

Client sayfayı HTML olarak görür.

 

Asp.Net kullanırken sayfamızın açılması için;

Default.aspx

İndex.aspx

Default.html

İndex.htm

İndex.html

Default.htm             gibi dosyaların olması gerekir.Bunlardan birinin olması yeterlidir. 

 

Hosting, bize klasör( xxx.com ) verir ve bizi domain’e(www.xxx.com) yönlendirir.Klasörleri bize belli ücret karşılığında firmalar verir.

Dosyaları atma olayı FTP(File Transfer Protocol) ile gerçekleşir.

 

Şimdi  sayfamızı açıp işlemlerimize başalayalım.

 

 File=> New=>Web Site=>Visual C#=> ASP.Net Web Site ‘ye tıklıyoruz.Sonra Website=> Add New Item=>Web Form a tıklayıp sayfamızı açıyoruz.

Sayfamızın hangi pencerede açılacağını ayarlamak için;

    

 

 

Şimdi işlemlerimize başlayalım  ;

 

Tek tek toolbox penceresindeki standart controls seçeneklerinin görevini öğreneceğiz.

 

Button:tamam ,uygula, iptal anlamındadır.basma(click) özelliğine sahiptir.

 

Textbox: bilgi girişi için kullanılan kontroldür.

 

Bir örnek yapalım:

 

Öncelikle sayfamızdan Design bölümüne giriyoruz.Bir button ve textbox ekliyoruz.

 

Sonra kodumuzu girelim;

 

Sayfamızı internet ortamına vermek için Solution Explorer penceresinden HTMLPage.htm=> View in  Browser tıklarız.

 

DropDownList:liste halinde oluşturduğumuz seçeneklerden seçim yapmamızı sağlar.

 

Örnek: 1 tane textBox ve DropDownList ekleyelim.

 

 

DropDownList içine şu şekilde verılerımızı eklıyoruz:

 

 

 

Ayrıca properties penceresinden AutoPostBack seçeneğini “true” yapıp çalışmayı tetikliyoruz.

Sonra kodumuzu girelim:

 

Görüntümüz şöyle oluşcak:

LinkButton :link vermek için kullanılır.birçok özelliği buttona benzer.

 

Örnek: 1 LinkButtn ve 1 textbox ekliyoruz

 

Sonra kodumuzu girelim:

Ve şimdide ekran görüntsüne bakalım :

FileUpLoad:dosya gönderme işlemi yapar.

 

Örnek:1 button ve 1 fileupload ekliyoruz.

 

Ama öncelikle eklediğimiz dosyayı atamak için dosta açıyoruz:

Şimdi kodumuzu girelim :

Son olarak images dosyamızı “Refresh folder” layarak(sağ tıklayıp) attığımız dosyayı görebiliriz.

Multiview-View:sayfamızın içine birden çok alt sayfa oluşturmak için kullanılır.tab control’e benzer.MultiView dosyasının içine view ekleyip devamında viewe çitf tıklarsak viewler eklenmeye devam eder.Burada önemli olan hangi view dosyamızın görünmesini istiyorsak onu ayarlamaktır.Bunun için de index değerleri girilir.Değerler 0’dan başlar.indexi ‘-1’ olan view gözükmez.

 

 

Kodumuzu girelim :

Ekran görüntüsüne bakalım:

 

 

VALİDATİON CONTROLS

 

toolbox=>Validation 

 

 

 

Bilgi girişi yapılırken bunların hatasız gerçekleşmesini sağlar.’doğrulama’ anlamındadır.

Compare validator: iki kontrol arasındaki değeri, dosyanın eşitliğini kontrol eder.

Required Field Validator: Kontrol içerisine değer girilip girilmediğini kontrol eder ve bu kontrol boş geçilmez.

Reguler Expression Validator: Karakter kontrolleri yapar. Örneğin mail adresi girildiğinde @ karakterini kontrol eder.

Range Validator: Bizim belirlediğimiz iki değer arasında kontrol eder.

 

Şimdi örneklerimize geçelim :

 

Öncelikle formumuza 1 textbox ve Required Field Validator ekliyoruz.

Ekran görüntüsü şöyle olacak:

 

Formumuza 1 tane daha textbox ve Reguler Expression Validator ekleyelim.

Ekran görüntümüz şöyle olur:

Gördüğümüz gibi “@” karakterini koymadığımız için hata verdi.

 

Şimdi 2 tane daha textbox ve Compare validator ekleyelim.

Ekran görüntüsü böyle olacak:

Son olarak 1 tane daha textbox ve Range Validator ekleyelim.

 

Ekran görüntüsü şöyle olacak:

 

 

JQUERY

JQUERY

   jQuery  javaScript olarak kullanılabilen bir framework’dür.HTML’nin yapamadığı animasyonlar,grafikler, , slaytlar, foto galeriler ve tab menüleri kolaylıkla oluşturur. JQuery artık birçok sitede kullanılmaya başlandı.Bunlardan biri WordPress’dir. Kullanımının bukadar yaygınlaşmasının sebebi hız,performans, kullanım kolaylığı ve kodları kısa olmasıdır.

Şimdi örneklerimizi inceleyelim;

 

Web’deki görüntümüz şöyle olur;

Şimdi yazımızın üstüne tıklayıp neler olduğunu görelim;

Devam ediyoruz;

Şimdi ekran görüntümüze bakalım;

Şimdi diğer uygulamaya geçelim:

Şimdi de ekran görüntüsüne bakalım:

Yazı üstüne tıkladığımızda ekran şöyle değişir;

Diğer uygulamaya geçelim:

Ekran görüntüsü şöyle olur;

Sıradaki uygulamaya bakalım:

Ekran görüntüsü şöyledir;

Devam edelim:

Ekran görüntümüzü görelim:

Yeni uygulamaya geçelim:

Ekran görüntülerine bakalım:

 

CSS class Yapısı

CSS’DE CLASS YAPISI

  Id ve Class yapısı temelde aynı mantık üzerinde ilerler. Id’nin Türkçe karşılığı kimliktir.Id sayfa içerisinde birden fazla yerde kullanmak için uygun değildir.Id değerini ‘#’ olarak tanımlarız.Class’ın Türkçe karşılığı sınıftır. Class’ı sayfa içerisinde birden fazla yerde kullanabiliriz.Class değerini ‘.’ olarak tanımlarız.Genelde içerikte class yapısını tercih ederiz.

Şimdi aşağıdaki sitemizi yapalım;

Alanımızı parsellere ayırıp öyle işlem yapalım:

Şimdi kodlarımızı girelim:

Resim divimiz için alan oluşturmuş olduk:

Resim divi içindeki verileri ekleyelim:

Şimdi  MenüGenel kısmını yapalım:

Tablo oluşturarak işlemlerimizi kolaylaştıralım:

Sayfa görüntümüz şöyle olur:

Son olarak OrtaAlan’ı oluşturalım:

Tablomuzu oluşturalım:

Tablomuz 1 satır 4 sütundan oluşuyor:

Şimdi son görüntüye bakalım:

Böylece devamını getirebiliriz.

Son olarak:

• Atanabilir durumlarda class kullanılır.

 

CSS (div)

  Div table yerine kullanılır.table’a göre daha kullanışlıdır.Div, dikdörtgen veya kare çizer,ekranda görünmez.div’i biçimlendirmek için CSS kullanırız.

• <style type=”text/css” > </style> yazarak CSS’de tag girdiğimizi belirtmiş oluruz.
• div body’nin açine yazılır.
• <style></style> dosyasını bütün bilgileri kapsamak(değiştirmek) için kullanırız.head’ın içine yazılır.
• Birim aralarında noktalı virgül(;) kullanılır.
• CSS’de atama yapılırken iki nokta üstüste(:) kullanılır.

  Şimdi örneklerle taglarımızı öğrenelim;

 

position:absolute  =>divlerimizi bilgisayara göre orjin noktasına toplar.    

marjin-top =>divlerimizi yukarıya taşır.

marjin-left => divlerimizi sola taşır.

Görüntü şöyle oluşur.

Başka bir örnek daha inceleyelim.Bu ornekte çakışan iki resmi birleştircez.

Görüntü şöyle oluşur:

• Bazen div içine div açmak uzun ve zahmetli olabilir.Bunun yerine biz table kullanırız.
• Ve bazen alanımızı parselleyip işlemlerimizi öyle yapabiliriz.

Görüntü şöyledir:

background-repeat:no repeat => devam eden yazıları durdurur.tekrara engel olur.

border:1px white => resme 1px lik çerçeve ekler.

 

HTML 4

HTML 4

Web sayfaları özel bir programlama dili ile yazılır.Bu dile HTML(Hypertext Markup Language) denir.Bu dil yanlı yazıları değil grafik,resim,ses iletimi de yapabilir.

 HTML 5 henüz aktif kullanılmadığı için biz HTML4’ü inceleyeceğiz.

 Microsoft Visual Studio’muzu açıyoruz.

File=> New=>Web Site=>Visual C#=> ASP.Net Web Site ‘ye tıklıyoruz.Sonra Website=> Add New Item=>HTML Page tıklayıp sayfamızı açıyoruz.

 Browse bölümünden sayfanın ismini değiştirebilriz.

Web location bölümünden programlarımızı nereye kaydedeceğimizi gösterir.

• File System:Normal dosyaları klasöre kaydeder.
• http:Bilgisayar üzerindeki sanal serverda kullanılır.
• FTP:Direkt internete atar.

 

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”&gt;             => Bir dosya olduğunu gösterir.

Head: İçine yazılan taglar ve yazılar ekranda görünmez.

Body: Sayfamızın görüntülenecek kısmıdır.

Sayfamızı internet ortamına vermek için Solution Explorer penceresinden HTMLPage.htm=> View in  Browser tıklarız.

Bu programda kodlar yoktur tag’lar kullanılır.

<Tag>

İçerik

<Tag/>

 Şimdi taglarımızı öğrenelim ve örneklerimizi inceleyelim.

• <b>bold</b> …… kalın yazar
• <i>italik</i> …..75 derece eğil yazar
• <u>underline</u> ……. altı çizili yazar
• &nbsp …… boşluk bırakır
• <br>break</br>…. alt satıra geçer
• <p>paragraf</p> …… paragraf yapar
• <font color= “red”> …..yazı rengini ayarlar
• <font face =”Arial”> ……..yazi tipini ayarlar
• <font size=”7”>…..yaz boyutunu ayarlar.(max 7 değeri alır)
• <font bgcolor=”white”>……. yazımızın taban rengini ayarlar.

 

İnternet sitemizde şöyle görüntülenecek:

Diğer örneğimiz şöyle:

Bu da şöyle görüntülencek:

Şimdi resim ekleyelim:

Resmimizi solution explorer’dan da ekleriz.Orayada kopyala yapıştır yöntemiyle aktarırız.Yeni dosya açıp dosyanın içine resimleri aktarabiliriz.Yeni dosya da solution explorer’a sağ tıklayıp New Folder’ı seçerek açabiliriz.

Ekleyeceğimiz resimlerin uzantısı jpg, png, bmp, gif olmalıdır. tif kullanılmaz.bmp de çok yer kapladığı için tercih edilmez.Çünkü sayfayı yavaşlatır.

Resmimiz şöyle görünür:

Tablo Ekleme

<table><table/> tablo oluşturmaya başlarken kullanılır.Bununla beraber nokta koyulur.

<tr><tr/> aşağıya doğtu çizgi çeker.

<td>>td/> hücreyi oluşturur.

Bu tagları tekrarlarsak hücreler oluşmaya devam eder.Hücreler hep kare biçimdedir.2×2 , 4×4 gibi.

Colspan: tabloda kolonları birleştirir.

Rowspan: tabloda satırları birleştirir.

Örneğimize bakalım:

Görüntü şöyledir:

Şimdi şu tabloyu oluşturalım :

Öncelikle 4 4 lük tablomuzu oluşturuyoruz.

      

Bu tablodan öncelikle A2 ve A3 ü birleştireceğiz.

KURAL:Birleştirme işlemine en sol ve  en üstten başlanır.

Burada solda olan A2 olduğu için birleştirme işlemini A2 tagında yapıyoruz.

Sonrasında B2 B3 ve B4 ü birleştirdik.Yine en soldakine bakıyoruz.En solda B2 olduğu için birleştirme işlemi orda yapılıyor.

Son olarak C1 ve D1 i birleştiriyoruz.Yukarıda olan C1 olduğu için birleştirme işlemi orda yapılıyor.

Tablomuzu oluşturduk ..

 

iNTERNET NEDİR?

İnternet, birçok bilgisayarın birbirine bağlı olduğu, çok yaygın ve sürekli büyüyen bir iletişim ağıdır. 

 Web, bireysel yada kurumsal olarak ürün ve hizmetlerin internet ortamında yayınlanmasıdır.

 Server, bilgisayar ağlarında, kullanıcıların erişebileceği, kullanımına veya paylaşımına açık kaynaklar, sayfalar.

Sayfalarımızı Servera atabilmek için FTP (File Transfer Protocol) kullanırız.

Server tabanlı çalışan programlar şunlardır;

ASP,PHP,JSP,ASPX dir.Bunlar serversız çalışmazlar.Yani internete gönderilmelidirler.

HTML,JQuery,CSS ise web programlarıdır.Üstüne çift tıklayıp açılabilirler. 

Hepsi birbiriyle bağlantılıdır.Birini bilmeden diğerini kullanmak zordur. 

Client,bir servera bağlanan,hizmet talep eden kullanıcı. 

Mail: kalıcı bilgiler sağlarlar.

İnternet Explorer,mozilla ve chrome tarayıcılarının kodları karışık olduğu için açılması sıkıntılıdır.

 

RichTextBox Kullanımı

 İsminden de anlaşılacağı gibi zengin textBox anlamındadır.textBox’da yapamadığımız çoğu işlemi burda yapabiliriz.Mesela yazıların tipini, rengini, arka planlarını,ebatlarını vs. ayarlayabiliriz.Kısaca yazımızı şekillendirir,biçimlendirir.

   Şimdi birkaç uygulama yapalım.Öncelikle 5 button, 1 RichTextBox ,fontDialog ve colorDialog ekliyoruz.

FontDialog=yazının tipini,şeklini ayarlar.

ColorDialog=yazının rengini ayarlar.

Şimdi button1’e çift tıklayıp kodumuzu girelim;

F5 e basıp button1’e tıklayınca şu sayfa açılır.

Yazımızın tipini, boyutunu,stilini,efektlerini ayarlarız.

Button2’e çift tıklayıp kodumuzu girelim;

F5 e basıp button2’ye tıklayınca şu sayfa açılır.

Yazımızın rengini ayarlarız.

Button3’e çift tıklayalım:

F5’e basıp button1,button2 ve button3 işlemlerini yaptıktan sonra yazımız şöyle oluşur:

Şimdi formumuza 1 tane OpenFileDİalog ve SaveFileDialog ekliyoruz.

SaveFileDialog=dosyalarımızı kaydetmemizi sağlar.

OpenFileDİalog=kaydettiğimiz dosyaları açmamızı sağlar.

SaveFileDialog’u seçip properties bölümünden FileName bölümü Adsız olarak değiştirdik.Kaydederken ismini biz yazabiliriz.

Button4’e tıklayıp kodumuzu girelim:

F5’e basalım ve button4’e tıklayalım:

Kaydet’e basıp dosyamızı kaydedebilirz.

Son olarak button5’e çift tıklayalım ve başlayalım kodumuzu yazmaya:

F5’e basalım ve button5’e tıklayalım:

openFileDialog1 bölümüne kaydettiğimiz dosyamızın ismini yazıp aç tuşuna basarsak aradığımız dosyayı buluruz.

 

ToolStrip Kullanımı

Bu yapı üst menu yapmamızı sağlar.Şimdi ToolBox menümüzden ToolStrip seçip formumuza ekliyoruz.

İçinde birçok veri vardır.

Şimdi birkaç işlem yapalım.Öncelikle bir button ve textBox ekliyoruz.buttona çift tıklayıp kodumuzu yazalım,Sonra da F5 e basıp sonucu görelim:

Şimdi ise comboBox ve label ekleyelim.formumuza çift tıklayıp yazalım,Sonra da F5 e basıp sonucu görelim:

 

 

NOT 1:Yaptığımız uygulamalarda bir işlemin ne kadarının tamamlandığını göstermek için “progressBar” kullanılır.

 

NOT 2:Form üzerinde birden çok sayfa açmak için “TabControl” kullanılır.

 

MenuStrip kullanımı

MenuStrip  form üzerinde menü oluşturmayı sağlar.

Formumuzun üzerine ToolBox penceresinden MenuStrip ekledik.

‘Type here‘ dan menuleri oluşturabiliriz.Örneğin kaydet ve kapat menusu;

Seçeneğin üstüne çift tıklarız ve F5’e bastığımızda bu yazıları ekranda görürüz.

Seçeneğin üstüne çift tıklarız ve F5’e bastığımızda bu yazıları ekranda görürüz.

 

Formlarla ilgili dizaynları properties bölümünden yapabiliriz.Mesela yazıların rengini, duruş şeklini,yazı tipini değiştirebilir; simgeler ekleyebiliriz.Imagine bölümünden resim ekleriz, backColor’ dan taban rengini değişiriz, textDirection‘dan duruş şeklini ve font‘dan yazı tipini değişebiliriz.

ShortcutKeys‘den de menu seçeneklerinin kısaltmalarını ekleyebiliriz.(kapat=alt+F4 gibi..)