Skip to content

2. Web programlamanın temelleri

Bu bölümün temel amacı, Web programlamanın temel ilkelerini tanıtmaktır; bu ilkeler, bunların uygulanmasında kullanılan belirli teknolojiden bağımsızdır. Bölümde, Web geliştirme felsefesini yavaş yavaş "içselleştirmek" için denemeniz tavsiye edilen çok sayıda örnek sunulmaktadır. Bu bilgilere zaten sahip olan okuyucular, doğrudan bir sonraki bölüme geçebilirler.

Bir web uygulamasının bileşenleri şunlardır:

Image

Numara
Rol
Yaygın örnekler
1
OS Sunucu
Unix, Linux, Windows
2
Web Sunucusu
Apache (Unix, Linux, Windows)
IIS (Windows + .NET platformu)
Node.js (Unix, Linux, Windows)
3
Sunucu tarafında yürütülen kodlar. Bunlar, sunucu modülleri veya sunucu dışındaki programlar (CGI) tarafından yürütülebilir.
JAVASCRIPT (Node.js)
PHP (Apache, IIS)
JAVA (Tomcat, Websphere, JBoss, Weblogic, ...)
C#, VB.NET (IIS)
4
Veritabanı - Bu, veritabanını kullanan programla aynı makinede veya İnternet üzerinden başka bir makinede bulunabilir.
Oracle (Linux, Windows)
MySQL (Linux, Windows)
Postgres (Linux, Windows)
SQL Sunucusu (Windows)
5
OS İstemci
Unix, Linux, Windows
6
Web Tarayıcısı
Chrome, Internet Explorer, Firefox, Opera, Safari, ...
7
Tarayıcı içinde istemci tarafında çalıştırılan komut dosyaları. Bu komut dosyaları, istemci bilgisayarın disklerine erişemez.
Javascript (tüm tarayıcılar)

2.1. Form içeren bir web uygulamasında veri alışverişi

Image

Numara
Rol
1
Tarayıcı, URL için ilk kez (http://machine/url)'i talep eder. Hiçbir parametre aktarılmaz.
2
Web sunucusu, tarayıcıya bu URL'e ait web sayfasını gönderir. Bu sayfa statik olabilir veya veritabanı içeriğini (SB, SC) kullanmış olabilecek bir sunucu komut dosyası (SA) tarafından dinamik olarak oluşturulabilir. Burada komut dosyası, URL'in herhangi bir parametre verilmeden istendiğini algılayacak ve başlangıç web sayfasını oluşturacaktır.
Tarayıcı sayfayı alır ve görüntüler (CA). Tarayıcı tarafındaki komut dosyaları (CB), sunucu tarafından gönderilen ilk sayfayı değiştirmiş olabilir. Ardından, kullanıcı (CD) ile komut dosyaları (CB) arasındaki etkileşimler sonucunda web sayfası değiştirilecektir. Özellikle formlar doldurulacaktır.
3
Kullanıcı, web sunucusuna gönderilmesi gereken form verilerini onaylar. Tarayıcı, duruma göre ilk URL sayfasını veya başka bir sayfayı yeniden ister ve aynı anda form değerlerini sunucuya iletir. Bunu yapmak için GET ve POST adlı iki yöntemi kullanabilir. İstemciden gelen isteği aldığında, sunucu istenen URL ile ilişkili komut dosyasını (SA) çalıştırır; bu komut dosyası parametreleri algılar ve işler.
4
Sunucu, program tarafından oluşturulan web sayfasını (SA, SB, SC) gönderir. Bu adım, önceki 2. adımla aynıdır. Artık veri alışverişi 2. ve 3. adımlara göre gerçekleştirilir.

2.2. Statik Web Sayfaları, Dinamik Web Sayfaları

Statik bir sayfa, HTML dosyasıyla temsil edilir. Dinamik bir sayfa ise web sunucusu tarafından "anında" oluşturulan bir HTML sayfasıdır.

2.2.1. HTML statik sayfası (HyperText İşaretleme Dili)

Visual Studio Express 2012 ile ilk web projemizi oluşturalım. [Fichier / Nouveau projet] seçeneğini kullanıyoruz:

  • [1]'te, boş bir ASP.NET uygulaması oluşturmak istediğimizi belirtiriz;
  • [2]'te ise Visual Studio çözümünün adı belirtilir. Bu belgedeki tüm örnekler aynı çözüm içinde yer alacaktır;
  • [3]'te, oluşturulacak projenin üst klasörü;
  • [4]'te, projenin adı belirtilir.

Onaylayın.

Ortaya çıkan proje [5] olarak gösterilmektedir. Web programlamasının temel ilkelerini açıklamak için bunu kullanacağız.

Öncelikle HTML adlı statik bir sayfa oluşturalım:

  • [1]'te, projeye sağ tıklayın ve ardından seçenekleri izleyin;
  • [2]'te sayfaya bir ad verin;
  • [3]'e dönüştürün, sayfa eklendi.

Oluşturulan sayfanın içeriği şöyledir:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>

</body>
</html>
  • 2-10. satırlar: kod, <html> kök etiketiyle sınırlandırılmıştır;
  • 3-6. satırlar: <head> etiketi, sayfanın başlığı olarak adlandırılan kısmı sınırlar;
  • 7-9. satırlar: <body> etiketi, sayfanın gövdesini sınırlar.

Bu kodu şu şekilde değiştirelim:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>essai 1 : une page statique</title>
</head>
<body>
  <h1>Une page statique...</h1>
</body>
</html>
  • 5. satır: sayfanın başlığını tanımlar – sayfayı görüntüleyen tarayıcı penceresinin başlığı olarak görüntülenecektir;
  • 8. satır: büyük harflerle yazılmış bir metin (<h1>).

Bu sayfayı bir tarayıcıda görüntüleyelim:

  • [1] adresinde sayfanın görüntülenmesi istenir;
  • [2] adresinde, görüntülenen sayfanın URL adresi;
  • [3]'te, pencerenin başlığı – sayfanın <title> etiketiyle sağlanmıştır;
  • [4]'te, sayfanın gövdesi – <h1> etiketinden sağlanmıştır.

Tarayıcı tarafından alınan HTML koduna bakalım:

  • [2]'te, tarayıcı bizim oluşturduğumuz HTML sayfasını aldı. Sayfayı yorumlayarak grafiksel bir görüntü haline getirdi.

2.2.2. Bir ASP.NET sayfası

Şimdi bir ASP.NET sayfası oluşturalım. Bu, sunucu tarafında çalıştırılan kod içerebilen ve sayfanın belirli kısımlarını oluşturan bir HTML sayfasıdır. HTML sayfasını oluştururken izlediğimiz yaklaşıma benzer bir yol izliyoruz:

  • [1]'e dönüştürülürken, bir ASP.NET sayfası, [Web Form] olarak çağrılır;
  • [2]'e dönüştürüldüğünde, yeni sayfaya bir ad verilir;
  • [3]'te, sayfa oluşturulmuştur.

Oluşturulan sayfanın kodu şöyledir:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Exemple_00.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    
    </div>
    </form>
</body>
</html>

Daha önce karşılaştığımız HTML etiketlerini burada da görüyoruz. [runat= "server "] özniteliğine sahip etiketler, sunucu tarafından işlenecek ve saf HTML etiketlerine dönüştürülecek etiketlerdir. Dolayısıyla yukarıda gördüğümüz şey, önceki statik sayfada olduğu gibi tarayıcının alacağı HTML kodu değildir. Bu durumda dinamik sayfadan söz ediyoruz: sunucuya gönderilen HTML akışı, sunucu tarafında çalıştırılan kod tarafından üretilir. Sayfayı şu şekilde değiştirelim:


<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="Exemple_00.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>Démo asp.net</title>
</head>
<body>
  <form id="form1" runat="server">
    <div>
      <h1>Il est <% =DateTime.Now.ToString("hh:mm:ss") %></h1>
    </div>
  </form>
</body>
</html>
  • 8. satır: sayfaya bir başlık veriyoruz;
  • 13. satır: C# kodu tarafından oluşturulan metni görüntülüyoruz. Bu kod, <% %> etiketleri arasında yer alıyor. Bu C# kodu, geçerli saati saat:dakika:saniye biçiminde görüntülüyor.

[1] sayfasını bir tarayıcıda görüntüleyelim:

  • [1] adresinde sayfanın görüntülenmesi istenir;
  • [2]'te, görüntülenen sayfanın URL'i;
  • [3]'te, pencerenin başlığı – sayfanın <title> etiketiyle sağlanmıştır;
  • [4]'te, sayfanın gövdesi – <h1> etiketinden sağlanmıştır.

Sayfayı yenilediğimizde (F5), URL değişmezken farklı bir görüntü (yeni saat) elde ederiz. Bu, sayfanın dinamik yönüdür: içeriği zamanla değişebilir. Şimdi tarayıcı tarafından alınan HTML koduna bakalım:

  • [1]'te sayfanın kaynak kodunu görüyoruz;
  • [2]'te: bu sefer alınan HTML kodu, bizim oluşturduğumuz kod değil, web sunucusu tarafından ASP.NET sayfamızdaki bilgilerden oluşturulan koddur.

2.2.3. Sonuç

Yukarıdakilerden, dinamik ve statik sayfaların temelde farklı nitelikte olduğu anlaşılmaktadır.

2.3. Tarayıcı Tarafında Çalışan Komut Dosyaları

HTML sayfası, tarayıcı tarafından çalıştırılacak komut dosyaları içerebilir. Tarayıcı tarafındaki başlıca komut dosyası dili şu anda (Eylül 2013) JavaScript'tir. Geliştiricilerin işini kolaylaştırmak için bu dil ile yüzlerce kütüphane oluşturulmuştur.

Daha önce oluşturulan projeye yeni bir HTML [1] sayfası ekleyelim:

[HtmlPage2.html] dosyasını aşağıdaki içerikle düzenleyelim:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>exemple Javascript</title>
  <script type="text/javascript">
    function réagir() {
      alert("Vous avez cliqué sur le bouton !");
    }
  </script>
</head>
<body>
  <input type="button" value="Cliquez-moi" onclick="réagir()" />
</body>
</html>
  • 13. satır: "Bana tıkla" (value özniteliği) metnine sahip bir düğme (type özniteliği) tanımlar. Üzerine tıklandığında, [réagir] adlı JavaScript işlevi çalıştırılır (onclick özniteliği);
  • 6-10. satırlar: bir JavaScript betiği;
  • 7-9. satırlar: [réagir] işlevi;
  • 8. satır: [Vous avez cliqué sur le bouton] mesajını içeren bir iletişim kutusu görüntüler.

Sayfayı bir tarayıcıda görüntüleyelim:

  • [1]'te görüntülenen sayfa;
  • [2], düğmeye tıklandığında açılan iletişim kutusu.

Düğmeye tıklandığında sunucuyla herhangi bir iletişim kurulmaz. JavaScript kodu tarayıcı tarafından yürütülür.

Kullanılabilir çok sayıda JavaScript kütüphanesi sayesinde, artık tarayıcıya gerçek uygulamalar entegre edilebiliyor. Bu durumda şu mimarilere yöneliniyor:

  • 1-4: HTML sunucusu, HTML5 / CSS / JavaScript statik sayfalar sunucusudur;
  • 5-6: Sunulan HTML5 / CSS / JavaScript sayfaları, bir veri sunucusuyla doğrudan etkileşime girer. Bu sunucu, yalnızca HTML biçimlendirilmemiş veriler sağlar. Bu verileri, tarayıcıda halihazırda bulunan HTML sayfalarına ekleyen ise Javascript'tir.

Bu mimaride, Javascript kodu ağırlaşabilir. Bu nedenle, sunucu tarafındaki kodda olduğu gibi bu kodu da katmanlara ayırmaya çalışırız:

  • [UI] katmanı kullanıcıyla etkileşime giren katmandır;
  • [DAO] katmanı veri sunucusuyla etkileşime girer;
  • [métier] katmanı ise ne kullanıcıyla ne de veri sunucusuyla etkileşime girmeyen iş süreçlerini bir araya getirir. Bu katman mevcut olmayabilir.

2.4. İstemci-sunucu iletişimi

Bir web uygulamasının aktörlerini gösteren başlangıç şemamıza geri dönelim:

Image

Burada, istemci makine ile sunucu makine arasındaki iletişimlere odaklanacağız. Bu iletişimler bir ağ üzerinden gerçekleşir ve iki uzak makine arasındaki iletişimin genel yapısını hatırlamakta fayda vardır.

2.4.1. OSI modeli

OSI (Açık Sistemler Arabağlantı Referans Modeli) olarak adlandırılan ve ISO (Uluslararası Standartlar Örgütü) tarafından tanımlanan açık ağ modeli, makineler arasındaki iletişimin yedi katmanlı bir modelle temsil edilebildiği ideal bir ağı tanımlar:

Her katman, alt katmandan hizmet alır ve üst katmana kendi hizmetlerini sunar. A ve B adlı farklı makinelerde bulunan iki uygulamanın iletişim kurmak istediğini varsayalım: bu iletişim, Application katmanında gerçekleşir. Ağın işleyişinin tüm ayrıntılarını bilmelerine gerek yoktur: her uygulama, iletmek istediği bilgiyi bir alt katmana, yani Présentation katmanına aktarır. Dolayısıyla uygulamanın, yalnızca Présentation katmanıyla arayüz oluşturma kurallarını bilmesi yeterlidir. Bilgi Présentation katmanına ulaştığında, başka kurallara göre Session katmanına aktarılır ve bu süreç, bilgi fiziksel ortama ulaşana ve hedef makineye fiziksel olarak iletilene kadar devam eder. Orada, gönderen makinede geçirdiği işlemin tersi bir işleme tabi tutulur.

Her katmanda, bilgiyi göndermekle görevli gönderen işlem, bilgiyi kendisiyle aynı katmana ait diğer makinedeki bir alıcı işleme gönderir. Bunu, katman protokolü olarak adlandırılan belirli kurallara göre yapar. Dolayısıyla, nihai iletişim şeması şu şekildedir:

Farklı katmanların rolleri şunlardır:

Fiziksel
Bitlerin fiziksel bir ortam üzerinden iletilmesini sağlar. Bu katmanda, terminal veya bilgisayar gibi veri işleme uç ekipmanları (E.T.T.D.) ile modülatör/demodülatör, çoklayıcı, yoğunlaştırıcı gibi veri devre sonlandırma ekipmanları (E.T.C.D.) bulunur. Bu seviyede dikkat edilmesi gereken noktalar şunlardır:
  • bilginin kodlama şeklinin seçimi (analog veya dijital)
  • iletim modunun seçimi (senkron veya asenkron).
Veri bağlantısı
Fiziksel katmanın fiziksel özelliklerini gizler. İletim hatalarını algılar ve düzeltir.
Ağ
Ağa gönderilen bilgilerin izlemesi gereken yolu yönetir. Buna routage denir: bir bilginin alıcısına ulaşabilmesi için izlemesi gereken yolu belirlemek.
Taşıma
Önceki katmanlar yalnızca makineler arası iletişime izin verirken, bu katman iki uygulama arasındaki iletişimi mümkün kılar. Bu katman tarafından sağlanan bir hizmet, çoklama olabilir: taşıma katmanı, birden fazla uygulamaya ait bilgileri iletmek için aynı ağ bağlantısını (makineden makineye) kullanabilir.
Oturum
Bu katmanda, bir uygulamanın uzak bir makinede bir çalışma oturumu açmasına ve sürdürmesine olanak tanıyan hizmetler bulunur.
Sunum
Farklı makinelerde verilerin temsilini standartlaştırmayı amaçlar. Böylece, A makinesinden gelen veriler, ağa gönderilmeden önce A makinesinin Présentation katmanı tarafından standart bir biçime göre "düzenlenir". Veriler, alıcı makine B’nin Présentation katmanına ulaştığında, bu katman verileri standart formatları sayesinde tanıyacak ve makine B’deki uygulamanın tanıyabilmesi için veriler farklı bir şekilde biçimlendirilecektir.
Uygulama
Bu düzeyde, genellikle e-posta veya dosya aktarımı gibi kullanıcıya yakın uygulamalar bulunur.

2.4.2. TCP/IP modeli

OSI modeli ideal bir modeldir. TCP/IP protokol dizisi, aşağıdaki şekilde buna yakındır:

  • ağ arayüzü (bilgisayarın ağ kartı), OSI modelinin 1. ve 2. katmanlarının işlevlerini yerine getirir
  • IP katmanı (İnternet Protokolü), 3. katmanın (ağ) işlevlerini yerine getirir
  • TCP katmanı (Aktarım Kontrol Protokolü) veya UDP katmanı (Kullanıcı Datagram Protokolü), 4. katmanın (taşıma) işlevlerini yerine getirir. TCP protokolü, makineler arasında alışverişi yapılan veri paketlerinin hedeflerine güvenli bir şekilde ulaşmasını sağlar. Aksi takdirde, kaybolan paketleri geri gönderir. UDP protokolü bu işi yapmaz ve bu görevi uygulama geliştiricisi üstlenir. Bu nedenle, %100 güvenilir bir ağ olmayan internette en çok kullanılan protokol TCP'tir. Bu durumda TCP-IP ağından söz edilir.
  • Uygulama katmanı, OSI modelinin 5. ila 7. katmanlarının işlevlerini kapsar.

Web uygulamaları Application katmanında bulunur ve dolayısıyla TCP-IP protokollerine dayanır. İstemci ve sunucu makinelerinin Application katmanları, hedeflerine iletilmek üzere modelin 1 ila 4. katmanlarına devredilen mesajları birbirleriyle paylaşır. Anlaşabilmeleri için, her iki makinenin uygulama katmanlarının aynı dili veya protokolü "konuşması" gerekir. Web uygulamalarının kullandığı protokol HTTP (HyperText Aktarım Protokolü) olarak adlandırılır. Bu, metin tabanlı bir protokoldür; yani makineler, birbirlerini anlayabilmek için ağ üzerinden metin satırları alışverişinde bulunurlar. Bu iletişim standartlaştırılmıştır; yani, istemcinin sunucuya tam olarak ne istediğini belirtmek için belirli sayıda mesajı vardır ve sunucunun da istemciye yanıtını vermek için belirli sayıda mesajı vardır. Bu mesaj alışverişi şu şekildedir:

Image

İstemci --> Sunucu

İstemci, web sunucusuna istekte bulunduğunda,

  1. ne istediğini belirtmek için HTTP biçiminde metin satırları;
  2. boş bir satır;
  3. isteğe bağlı olarak bir belge.

Sunucu --> İstemci

Sunucu, istemciye yanıt verirken,

  1. ne gönderdiğini belirtmek için HTTP biçiminde metin satırları;
  2. boş bir satır;
  3. isteğe bağlı olarak bir belge.

Dolayısıyla, veri alışverişi her iki yönde de aynı biçime sahiptir. Her iki durumda da bir belge gönderilebilir, ancak bir istemcinin sunucuya belge göndermesi nadirdir. Ancak HTTP protokolü bunu öngörmektedir. Bu sayede, örneğin bir internet servis sağlayıcısının aboneleri, bu sağlayıcıda barındırılan kişisel sitelerine çeşitli belgeleri indirebilirler. Alışverişi yapılan belgeler herhangi bir türde olabilir. Resimler içeren bir web sayfasını talep eden bir tarayıcıyı ele alalım:

  1. tarayıcı, web sunucusuna bağlanır ve istediği sayfayı talep eder. Talep edilen kaynaklar, URL (Uniform Resource Locator) ile benzersiz bir şekilde tanımlanır. Tarayıcı, yalnızca HTTP başlıkları gönderir, herhangi bir belge göndermez.
  2. Sunucu buna yanıt verir. Öncelikle, hangi tür yanıt göndereceğini belirten HTTP başlıklarını gönderir. İstenen sayfa mevcut değilse bu bir hata olabilir. Sayfa mevcutsa, sunucu yanıtının HTTP başlıklarında, bu başlıkların ardından bir HTML (HyperText İşaretleme Dili) belgesi göndereceğini belirtir. Bu belge, HTML biçiminde bir dizi metin satırından oluşur. Bir HTML metni, tarayıcıya metni nasıl görüntüleyeceği konusunda talimatlar veren etiketler (işaretleyiciler) içerir.
  3. İstemci, sunucunun HTTP başlıklarından, bir HTML belgesi alacağını anlar. Müşteri bu belgeyi analiz eder ve belki de içinde resim referansları olduğunu fark eder. Bu resimler HTML belgesinde bulunmamaktadır. Bu nedenle, ihtiyaç duyduğu ilk resmi istemek için aynı web sunucusuna yeni bir istek gönderir. Bu istek, istenen kaynak farklı olması dışında 1. adımda yapılan istekle aynıdır. Sunucu, bu isteği işleyerek istemciye istenen görüntüyü gönderir. Bu sefer, yanıtındaki HTTP başlıkları, gönderilen belgenin bir görüntü olduğunu ve HTML belgesi olmadığını belirtecektir.
  4. İstemci, gönderilen görüntüyü alır. İstemci (genellikle bir tarayıcı), sayfanın tamamını görüntüleyebilmesi için gerekli tüm belgelere sahip olana kadar 3. ve 4. adımlar tekrarlanır.

2.4.3. HTTP protokolü

Örnekler üzerinden HTTP protokolünü inceleyelim. Bir tarayıcı ile bir web sunucusu arasında ne tür veriler alışverişi yapılır?

Web hizmeti veya HTTP hizmeti, genellikle 80 numaralı bağlantı noktasında çalışan bir TCP-IP hizmetidir. Başka bir bağlantı noktasında da çalışabilir. Bu durumda, istemci tarayıcı, talep ettiği URL'te bu bağlantı noktasını belirtmek zorunda kalır. Bir URL isteği genel olarak şu biçimdedir:

protokol://[:port] makinesi/yol/bilgi

burada

protokol
http olarak kullanılır. Bir tarayıcı, ftp, news, telnet gibi hizmetler için de istemci görevi görebilir.
makine
Web hizmetinin çalıştığı makinenin adı
bağlantı noktası
Web hizmetinin bağlantı noktası. Eğer 80 ise, bağlantı noktası numarası atlanabilir. Bu en sık karşılaşılan durumdur
yol
istenen kaynağı belirten yol
bilgiler
istemcinin isteğini netleştirmek için sunucuya verilen ek bilgiler

Bir kullanıcı URL dosyasının yüklenmesini istediğinde tarayıcı ne yapar?

  1. TCP-IP ile, URL dosyasının machine[:port] bölümünde belirtilen makine ve bağlantı noktası üzerinden bir iletişim kurar. Bir TCP-IP iletişimi kurmak, iki makine arasında bir iletişim "kanalı" oluşturmak anlamına gelir. Bu kanal oluşturulduktan sonra, iki makine arasında alışverişi yapılan tüm bilgiler bu kanal üzerinden aktarılır. Bu TCP-IP kanalının oluşturulması, henüz Web protokolünü (HTTP) gerektirmez.
  2. TCP-IP kanalı oluşturulduktan sonra, istemci web sunucusuna isteğini iletecek ve bunu HTTP biçiminde metin satırları (komutlar) göndererek yapacaktır. İstemci, URL'in yol/bilgi kısmını sunucuya gönderecektir
  3. sunucu da aynı şekilde ve aynı kanaldan yanıt verecektir
  4. iki taraftan biri kanalı kapatma kararını verecektir. Bu, kullanılan HTTP protokolüne bağlıdır. HTTP 1.0 protokolünde, sunucu her yanıtından sonra bağlantıyı kapatır. Bu durum, bir web sayfasını oluşturan farklı belgeleri almak için birden fazla istek göndermesi gereken bir istemcinin, her istek için yeni bir bağlantı açmasını gerektirir; bu da bir maliyet oluşturur. HTTP/1.1 protokolünde ise istemci, sunucuya bağlantıyı kendisi kapatmasını söyleyene kadar açık tutmasını isteyebilir. Böylece, bir web sayfasındaki tüm belgeleri tek bir bağlantı ile alabilir ve son belgeyi aldıktan sonra bağlantıyı kendisi kapatabilir. Sunucu bu kapatma işlemini algılayacak ve bağlantıyı kendisi de kapatacaktır.

Bir istemci ile bir web sunucusu arasındaki veri alışverişini incelemek için, 1.3. paragrafta yüklediğimiz Chrome tarayıcısının [Advanced Rest Client] uzantısını kullanacağız. Şu durumla karşı karşıya kalacağız:

Image

Web sunucusu herhangi biri olabilir. Burada, tarayıcı ile web sunucusu arasında gerçekleşecek veri alışverişini incelemeyi amaçlıyoruz. Daha önce, aşağıdaki HTML adlı statik sayfayı oluşturmuştuk:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>essai 1 : une page statique</title>
</head>
<body>
  <h1>Une page statique...</h1>
</body>
</html>

ve bunu bir tarayıcıda görüntüledik:

 

Görüldüğü gibi, istenen URL adresi şudur: http://localhost:56376/HtmlPage1.html. Dolayısıyla, web hizmeti sunan makine localhost (=yerel makine) ve bağlantı noktası 56376'dır. Aynı URL'i istemek için [Advanced Rest Client] uygulamasını kullanalım:

  • [1] adresinde, uygulamayı başlatın (yeni bir Chrome sekmesinin [Applications] sekmesinde);
  • [2]'te, [Request] seçeneğini seçin;
  • [3]'te, sorgulanacak sunucuyu belirtin: http://localhost:56376;
  • [4]'te, istenen URL'i belirtin: /HtmlPage1.html;
  • [5]'te, URL'e olası parametreler eklenir. Burada yok;
  • [6]'te, istek için kullanılan HTTP komutunu belirtin; burada GET.

Böylece şu sorgu elde edilir:

Bu şekilde hazırlanan [7] sorgusu, [8] tarafından sunucuya gönderilir. Alınan yanıt ise şöyledir:

Yukarıda, istemci-sunucu arasındaki veri alışverişinin şu şekilde olduğunu belirtmiştik:

Image

  • [1]'te, tarayıcının isteğinde gönderdiği HTTP başlıklarını görüyoruz. Gönderilecek bir belge yoktu;
  • [2] örneğinde, sunucu tarafından yanıt olarak gönderilen HTTP başlıklarını görüyoruz. [3] örneğinde ise sunucunun gönderdiği belgeyi görüyoruz.

[3]'te, web sunucusuna yerleştirdiğimiz HTML adlı statik sayfayı tanıyabiliriz.

Tarayıcının HTTP isteğini inceleyelim:

1
2
3
4
5
6
GET /HtmlPage1.html HTTP/1.1 
User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36
Content-Type: text/plain; charset=utf-8 
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4
  • 1. satır uygulama tarafından görüntülenmemiştir;
  • 2. satır: tarayıcı, [User-Agent] başlığıyla kendini tanıtıyor;
  • 3. satır: tarayıcı, sunucuya UTF-8 biçiminde bir metin belgesi (text/plain) gönderdiğini belirtir. Aslında burada tarayıcı herhangi bir belge göndermedi;
  • 4. satır: Tarayıcı, yanıt olarak her tür belgeyi kabul ettiğini belirtir;
  • 5. satır: Tarayıcı, kabul ettiği belge formatlarını belirtir;
  • 6. satır: Tarayıcı, tercih sırasına göre istediği dilleri belirtir.

Sunucu, aşağıdaki HTTP başlıklarını göndererek yanıt verdi:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
HTTP/1.1 304 Not Modified 
Accept-Ranges: bytes 
Server: Microsoft-IIS/8.0 
X-SourceFiles: =?UTF-8?B?RDpcZGF0YVxpc3RpYS0xMzE0XGFzcG5ldFxkdnBcRXhlbXBsZXNcRXhlbXBsZS0wMFxIdG1sUGFnZTEuaHRtbA==?=
X-Powered-By: ASP.NET
Date: Wed, 18 Sep 2013 15:33:53 GMT 
Content-Type: text/html 
Content-Encoding: gzip 
Last-Modified: Wed, 18 Sep 2013 13:13:19 GMT 
ETag: "b474e0d770b4ce1:0" 
Vary: Accept-Encoding 
Content-Length: 313
  • 1. satır: uygulama tarafından görüntülenmemiştir;
  • satır 3: sunucu kendini tanımlar; burada bir Microsoft IIS sunucusu;
  • 5. satır: yanıtı oluşturan teknolojiyi belirtir; burada ASP.NET;
  • 6. satır: yanıtın tarihi ve saati;
  • 7. satır: Sunucu tarafından gönderilen belgenin türü. Burada bir HTML belgesi;
  • 12. satır: gönderilen HTML belgesinin bayt cinsinden boyutu.

2.4.4. Sonuç

Birkaç örnek üzerinden, bir web istemcisinin isteğinin ve web sunucusu tarafından ona verilen yanıtın yapısını inceledik. İletişim, iki taraf arasında değiş tokuş edilen metin biçimindeki bir dizi komuttan oluşan HTTP protokolü aracılığıyla gerçekleşir. İstemcinin isteği ve sunucunun yanıtı aşağıdaki aynı yapıya sahiptir:

Image

Bir kaynağı istemek için kullanılan iki yaygın komut GET ve POST'tir. GET komutuna bir belge eşlik etmez. POST komutuna ise, genellikle formda girilen tüm değerleri bir araya getiren bir karakter dizisi olan bir belge eşlik eder. HEAD komutu, yalnızca HTTP başlıklarını talep etmeye yarar ve herhangi bir belge içermez.

Bir müşterinin isteği üzerine, sunucu aynı yapıya sahip bir yanıt gönderir. İstenen kaynak, [Document] bölümünde iletilir; ancak müşterinin komutu HEAD ise, bu durumda yalnızca HTTP başlıkları gönderilir.

2.5. HTML dilinin temelleri

Bir web tarayıcısı çeşitli belgeleri görüntüleyebilir; bunlardan en yaygın olanı HTML (HyperText İşaretleme Dili) belgesidir. Bu belge, <balise>texte</balise> biçimindeki etiketlerle biçimlendirilmiş bir metindir. Örneğin, <B>important</B> etiketi, önemli metni kalın olarak görüntüler. Yalnızca bir satırda yatay çizgi görüntüleyen <hr/> etiketi gibi tek başına kullanılan etiketler de mevcuttur. HTML metninde bulunabilecek etiketleri burada ele almayacağız. Tek bir satır HTML kodu yazmadan bir web sayfası oluşturmaya olanak tanıyan çok sayıda WYSIWYG yazılımı mevcuttur. Bu araçlar, fare ve önceden tanımlanmış denetimler kullanılarak yapılan bir sayfa düzeninin HTML kodunu otomatik olarak oluşturur. Böylece sayfaya (fareyle) bir tablo ekleyebilir ve ardından yazılım tarafından oluşturulan HTML koduna bakarak bir web sayfasında tablo tanımlamak için kullanılacak etiketleri öğrenebilirsiniz. İşin sırrı bundan ibarettir. Ayrıca, dinamik web uygulamalarının web istemcilerine gönderilecek HTML kodunu kendileri oluşturması gerektiğinden, HTML dilini bilmek zorunludur. Bu kod program tarafından oluşturulur ve elbette, istemcinin istediği web sayfasını alabilmesi için neyin oluşturulması gerektiğini bilmek gerekir.

Özetle, web programlamaya başlamak için HTML dilinin tamamını bilmek gerekmez. Ancak bu bilgi gereklidir ve WYSIWYG gibi DreamWeaver ve diğer onlarca web sayfası oluşturma yazılımının kullanımıyla edinilebilir. HTML dilinin inceliklerini keşfetmenin bir başka yolu da, web'de gezinerek ilginç ve sizin için henüz bilinmeyen özellikler barındıran sayfaların kaynak kodlarını incelemektir.

2.5.1. Bir örnek

Aşağıdaki örneği ele alalım; bu örnekte, bir web belgesinde bulunabilecek bazı öğeler gösterilmektedir, örneğin:

  • bir tablo;
  • bir resim;
  • bir bağlantı.

Bir HTML belgesi genel olarak şu şekildedir:

<html>
    <head>
        <title>Bir başlık</title>
        ...
    </head>
    <body öznitelikleri>
        ...
    </body>
</html>

Belgenin tamamı <html>...</html> etiketleri ile çevrelenmiştir. Belge iki bölümden oluşur:

  1. <head>...</head>: Bu, belgenin görüntülenemeyen kısmıdır. Belgeyi görüntüleyecek tarayıcıya bilgi verir. Burada genellikle tarayıcının başlık çubuğunda görüntülenecek metni belirleyen <title>...</title> etiketleri bulunur. Burada, özellikle belgenin anahtar kelimelerini tanımlayan ve daha sonra arama motorları tarafından kullanılan anahtar kelimeleri belirleyen diğer etiketler de bulunabilir. Bu bölümde, çoğunlukla javascript veya vbscript ile yazılmış ve tarayıcı tarafından çalıştırılacak komut dosyaları da bulunabilir.
  1. <body öznitelikleri>...</body>: Bu, tarayıcı tarafından görüntülenecek kısımdır. Bu kısımda yer alan etiketler, tarayıcıya belgenin "istenen" görsel biçimini belirtir. Her tarayıcı bu etiketleri kendine özgü bir şekilde yorumlar. Bu nedenle, iki farklı tarayıcı aynı web belgesini farklı şekilde görüntüleyebilir. Bu durum genellikle web tasarımcıları için bir baş ağrısıdır.

Örnek belgemizin HTML kodu şöyledir:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>balises</title>
</head>

<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
  <h1 style="text-align: center">Les balises HTML</h1>
  <hr />

  <table border="1">
    <thead>
      <tr>
        <th>Colonne 1</th>
        <th>Colonne 2</th>
        <th>Colonne 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>cellule(1,1)</td>
        <td style="width: 150px; text-align: center;">cellule(1,2)</td>
        <td>cellule(1,3)</td>
      </tr>
      <tr>
        <td>cellule(2,1)</td>
        <td>cellule(2,2)</td>
        <td>cellule(2,3</td>
      </tr>
    </tbody>
  </table>

  <table border="0">
    <tr>
      <td>Une image</td>
      <td>
        <img border="0" src="/images/cerisier.jpg"/></td>
    </tr>
    <tr>
      <td>le site de l'ISTIA</td>
      <td><a href="http://istia.univ-angers.fr">ici</a></td>
    </tr>
  </table>
</body>
</html>
Etiket
Etiketler ve örnekler HTML
belge başlığı
<title>etiketler</title> (5. satır)
balises metni, belgeyi görüntüleyen tarayıcının başlık çubuğunda görünecektir
yatay çubuk
<hr/>: yatay bir çizgi gösterir (satır 10)
tablo
<table öznitelikleri>....</table> : tabloyu tanımlamak için (satır 12, 32)
<thead>...</thead>: sütun başlıklarını tanımlamak için (13. ve 19. satırlar)
<tbody>...</tbody>: tablonun içeriğini tanımlamak için (satır 20, 31)
<tr öznitelikler>...</tr> : bir satırı tanımlamak için (satır 21, 25)
<td öznitelikler>...</td>: bir hücreyi tanımlamak için (satır 22)
örnekler:
<table border="1">...</table> : border özniteliği, tablonun kenarlığının kalınlığını belirler
<td style="width: 150px; text-align: center;">hücre(1,2)</td> : içeriği hücre(1,2) olacak bir hücre tanımlar. Bu içerik yatay olarak ortalanır (text-align: center). Hücrenin genişliği 150 piksel olacaktır (width: 150px)
resim
<img border="0" src="/images/cerisier.jpg"/> (satır 38): Web sunucusundaki /images/cerisier.jpg dosyasını kaynak olarak kullanan, kenarlığı olmayan (border="0") bir resim tanımlar (src="/images/cerisier.jpg"). Bu bağlantı, URL http://localhost:port/html/balises.htm ile elde edilen bir web belgesinde yer almaktadır. Bu nedenle, tarayıcı burada referans verilen görüntüyü almak için http://localhost:port/images/cerisier.jpg adresindeki URL dosyasını isteyecektir.
bağlantı
<a href="http://istia.univ-angers.fr">burada</a> (42. satır): ici metninin, URL http://istia.univ-angers.fr adresine bir bağlantı görevi görmesini sağlar.
sayfa arka planı
<body style="height:400px;width:400px;background-image:url(images/standard.jpg)"> (8. satır): Sayfa arka planı olarak kullanılacak resmin, web sunucusundaki URL /images/standard.jpg adresinde bulunduğunu belirtir. Örneğimizde, tarayıcı bu arka plan resmini almak için http://localhost:port/images/standard.jpg adresindeki URL dosyasını isteyecektir. Ayrıca, belgenin gövdesi 400 piksel yüksekliğinde ve 400 piksel genişliğinde bir dikdörtgen içinde görüntülenecektir.

Bu basit örnekte görüldüğü gibi, belgenin tamamını oluşturmak için tarayıcının sunucuya üç istek göndermesi gerekir:

  1. http://localhost:port/html/balises.htm adresine, belgenin HTML kaynağını almak için
  2. http://localhost:port/images/cerisier.jpg adresinden cerisier.jpg resmini almak için
  3. http://localhost:port/images/standard.jpg, standard.jpg arka plan görüntüsünü almak için

2.5.2. Bir HTML formu

Aşağıdaki örnek bir form göstermektedir:

 

Bu görüntüyü oluşturan HTML kodu şöyledir:


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>formulaire</title>
  <script type="text/javascript">
    function effacer() {
      alert("Vous avez cliqué sur le bouton Effacer");
    }
  </script>
</head>

<body style="height: 400px; width: 400px; background-image: url(images/standard.jpg)">
  <h1 style="text-align: center">Formulaire HTML</h1>
  <form method="post" action="FormulairePost.aspx">
    <table border="0">
      <tr>
        <td>Etes-vous marié(e)</td>
        <td>
          <input type="radio" value="Oui" name="R1" />Oui
          <input type="radio" name="R1" value="non" checked="checked" />Non
        </td>
      </tr>
      <tr>
        <td>Cases à cocher</td>
        <td>
          <input type="checkbox" name="C1" value="un" />1
          <input type="checkbox" name="C2" value="deux" checked="checked" />2
          <input type="checkbox" name="C3" value="trois" />3
        </td>
      </tr>
      <tr>
        <td>Champ de saisie</td>
        <td>
          <input type="text" name="txtSaisie" size="20" value="qqs mots" />
        </td>
      </tr>
      <tr>
        <td>Mot de passe</td>
        <td>
          <input type="password" name="txtMdp" size="20" value="unMotDePasse" />
        </td>
      </tr>
      <tr>
        <td>Boîte de saisie</td>
        <td>
          <textarea rows="2" name="areaSaisie" cols="20">
ligne1
ligne2
ligne3
</textarea>
        </td>
      </tr>
      <tr>
        <td>combo</td>
        <td>
          <select size="1" name="cmbValeurs">
            <option value="1">choix1</option>
            <option selected="selected" value="2">choix2</option>
            <option value="3">choix3</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix simple</td>
        <td>
          <select size="3" name="lst1">
            <option selected="selected" value="1">liste1</option>
            <option value="2">liste2</option>
            <option value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">liste5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>liste à choix multiple</td>
        <td>
          <select size="3" name="lst2" multiple="multiple">
            <option value="1" selected="selected">liste1</option>
            <option value="2">liste2</option>
            <option selected="selected" value="3">liste3</option>
            <option value="4">liste4</option>
            <option value="5">liste5</option>
          </select>
        </td>
      </tr>
      <tr>
        <td>bouton</td>
        <td>
          <input type="button" value="Effacer" name="cmdEffacer" onclick="effacer()" />
        </td>
      </tr>
      <tr>
        <td>envoyer</td>
        <td>
          <input type="submit" value="Envoyer" name="cmdRenvoyer" />
        </td>
      </tr>
      <tr>
        <td>rétablir</td>
        <td>
          <input type="reset" value="Rétablir" name="cmdRétablir" />
        </td>
      </tr>
    </table>
    <input type="hidden" name="secret" value="uneValeur" />
  </form>
</body>
</html>

Görsel kontrol <--> HTML etiketinin eşleşmesi şöyledir:

Kontrol
HTML etiketi
form
<form method="post" action="...">
giriş alanı
<input type="text" name="txtSaisie" size="20" value="birkaç kelime" />
gizli giriş alanı
<input type="password" name="txtMdp" size="20" value="unMotDePasse" />
çok satırlı giriş alanı
<textarea rows="2" name="areaSaisie" cols="20">
satır1
satır2
satır3
</textarea>
radyo düğmeleri
<input type="radio" value="Evet" name="R1" />Evet
<input type="radio" name="R1" value="hayır" checked="checked" />Hayır
onay kutuları
<input type="checkbox" name="C1" value="bir" />1
<input type="checkbox" name="C2" value="iki" checked="checked" />2
<input type="checkbox" name="C3" value="üç" />3
Açılır menü
<select size="1" name="cmbValeurs">
<option value="1">seçenek1</option>
<option selected="selected" value="2">seçenek2</option>
<option value="3">seçenek3</option>
</select>
tek seçimli liste
<select size="3" name="lst1">
<option selected="selected" value="1">liste1</option>
<option value="2">liste2</option>
<option value="3">liste3</option>
<option value="4">liste4</option>
<option value="5">liste5</option>
</select>
çoklu seçim listesi
<select size="3" name="lst2" multiple="multiple">
<option value="1">liste1</option>
<option value="2">liste2</option>
<option selected="selected" value="3">liste3</option>
<option value="4">liste4</option>
<option value="5">liste5</option>
</select>
gönder düğmesi
<input type="submit" value="Gönder" name="cmdRenvoyer" />
sıfırla düğmesi
<input type="reset" value="Sıfırla" name="cmdRétablir" />
düğme türü düğme
<input type="button" value="Sil" name="cmdEffacer" onclick="effacer()" />

Bu farklı etiketleri inceleyelim:

2.5.2.1. i

form

<form method="post" action="FormulairePost.aspx">
HTML etiketi
<form name="..." method="..." action="...">...</form>
öznitelikler
name="frmexemple": formun adı
method="..." : tarayıcının, formda toplanan değerleri web sunucusuna göndermek için kullandığı yöntem
action="..." : Formda toplanan değerlerin gönderileceği adres.
Bir web formu, <form>...</form> etiketleriyle çevrelenir. Formun bir adı olabilir (name="xx"). Formda bulunan tüm denetimler için de durum böyledir. Bir formun amacı, kullanıcının klavye veya fare ile girdiği bilgileri toplamak ve bunları bir web sunucusunun URL adresine göndermektir. Hangi adrese? action="URL" özniteliğinde belirtilen adrese. Bu öznitelik yoksa, bilgiler formun bulunduğu belgenin URL adresine gönderilir. Bir web istemcisi, bir web sunucusuna veri göndermek için POST ve GET adlı iki farklı yöntem kullanabilir. method="méthode" özniteliği, method'in GET veya POST'e eşit olması durumunda, <form> etiketindeki bu öznitelik, tarayıcıya formda toplanan bilgileri action="URL" özniteliğiyle belirtilen URL adresine göndermek için hangi yöntemi kullanması gerektiğini bildirir. method özniteliği belirtilmediğinde, varsayılan olarak GET yöntemi kullanılır.

2.5.2.2. Metin giriş alanları

giriş alanı
<input type="text" name="txtSaisie" size="20" value="birkaç kelime" />
<input type="password" name="txtMdp" size="20" value="unMotDePasse" />
 
HTML etiketi
<input type="..." name="..." size=".." value=".."/>
input etiketi çeşitli denetimler için mevcuttur. Bu farklı denetimleri birbirinden ayıran şey type özniteliğidir.
Özellikler
type="text": bunun bir giriş alanı olduğunu belirtir
type="password": giriş alanındaki karakterler * karakterleriyle değiştirilir. Normal giriş alanından tek farkı budur. Bu kontrol türü, şifre girişi için uygundur.
size="20": alanda görünen karakter sayısı - daha fazla karakter girilmesini engellemez
name="txtSaisie": kontrolün adı
value="birkaç kelime" : giriş alanında görüntülenecek metin.

2.5.2.3. Çok satırlı giriş alanları

çok satırlı giriş alanı
<textarea rows="2" name="areaSaisie" cols="20">
satır1
satır2
satır3
</textarea>
 
HTML etiketi
<textarea ...>metin</textarea>
içinde başlangıçta metin bulunan çok satırlı bir giriş alanı görüntüler
özellikler
rows="2": satır sayısı
cols="'20" : sütun sayısı
name="areaSaisie": denetimin adı

2.5.2.4. Radyo düğmeleri

radyo düğmeleri
<input type="radio" value="Evet" name="R1" />Evet
<input type="radio" name="R1" value="hayır" checked="checked" />Hayır
 
HTML etiketi
<input type="radio" attribut2="valeur2" ..../>metin
yanında metin bulunan bir radyo düğmesi görüntüler.
özellikler
name="radio": kontrolün adı. Aynı adı taşıyan radyo düğmeleri, birbirini dışlayan bir düğme grubu oluşturur: bunlardan yalnızca biri seçilebilir.
value="değer" : radyo düğmesine atanan değer. Bu değer, radyo düğmesinin yanında görüntülenen metinle karıştırılmamalıdır. Metin yalnızca görüntüleme amaçlıdır.
checked="checked": Bu anahtar kelime varsa, radyo düğmesi işaretlenir; yoksa işaretlenmez.

2.5.2.5. Onay kutuları

onay kutuları
<input type="checkbox" name="C1" value="bir" />1
<input type="checkbox" name="C2" value="iki" checked="checked" />2
<input type="checkbox" name="C3" value="üç" />3
 
HTML etiketi
<input type="checkbox" attribut2="değer2" ....>metin
yanında metin bulunan bir onay kutusu görüntüler.
öznitelikler
name="C1": denetimin adı. Onay kutuları aynı adı taşıyabilir veya taşımayabilir. Aynı adı taşıyan onay kutuları, birbiriyle ilişkili bir grup oluşturur.
value="değer": onay kutusuna atanan değer. Bu değer, radyo düğmesinin yanında görüntülenen metinle karıştırılmamalıdır. Metin yalnızca görüntüleme amaçlıdır.
checked="checked": Bu anahtar kelime varsa, onay kutusu işaretlenir; yoksa işaretlenmez.

2.5.2.6. Açılır liste (combo)

Combo
<select size="1" name="cmbValeurs">
<option value="1">seçenek1</option>
<option selected="selected" value="2">seçenek2</option>
<option value="3">seçenek3</option>
</select>
 
HTML etiketi
<select size=".." name="..">
<option [selected="selected"] value=”v”>...</option>
...
</select>
<option>...</option> etiketleri arasında yer alan metinleri bir liste halinde görüntüler
öznitelikleri
name="cmbValeurs": denetimin adı.
size="1": görünür liste öğelerinin sayısı. size="1", listeyi bir açılır kutuya eşdeğer hale getirir.
selected="selected": Bir liste öğesi için bu anahtar kelime varsa, söz konusu öğe listede seçili olarak görünür. Yukarıdaki örneğimizde, choix2 liste öğesi, açılır menü ilk kez görüntülendiğinde seçili öğe olarak görünür.
value=”v”: Öğe kullanıcı tarafından seçildiğinde, sunucuya gönderilen değer [v] olur. Bu öznitelik yoksa, sunucuya gönderilen değer görüntülenen ve seçili metin olur.

2.5.2.7. Tek Seçimli Liste

tek seçimli liste
<select size="3" name="lst1">
<option selected="selected" value="1">liste1</option>
<option value="2">liste2</option>
<option value="3">liste3</option>
<option value="4">liste4</option>
<option value="5">liste5</option>
</select>
 
HTML etiketi
<select size=".." name="..">
<option [selected="selected"]>...</option>
...
</select>
<option>...</option> etiketleri arasında yer alan metinleri bir liste halinde görüntüler
öznitelikleri
tek bir öğeyi gösteren açılır listeyle aynıdır. Bu denetim, önceki açılır listeden yalnızca size>1 özniteliği ile ayrılır.

2.5.2.8. Çoklu seçim listesi

tek seçimli liste
<select size="3" name="lst2" multiple="multiple">
<option value="1" selected="selected">liste1</option>
<option value="2">liste2</option>
<option selected="selected" value="3">liste3</option>
<option value="4">liste4</option>
<option value="5">liste5</option>
</select>
 
HTML etiketi
<select size=".." name=".." multiple="multiple">
<option [selected="selected"]>...</option>
...
</select>
<option>...</option> etiketleri arasında yer alan metinleri bir liste halinde görüntüler
öznitelikleri
multiple: listeden birden fazla öğenin seçilmesine olanak tanır. Yukarıdaki örnekte, liste1 ve liste3 öğelerinin her ikisi de seçilmiştir.

2.5.2.9. button türü düğme

button türü düğme
<input type="button" value="Sil" name="cmdEffacer" onclick="effacer()" />
 
HTML etiketi
<input type="button" value="..." name="..." onclick="effacer()" ..../>
özellikler
type="button": bir düğme kontrolü tanımlar. İki farklı düğme türü daha vardır: submit ve reset.
value="Sil" : düğme üzerinde görüntülenen metin
onclick="fonksiyon()" : kullanıcı düğmeye tıkladığında çalıştırılacak bir fonksiyon tanımlamaya olanak tanır. Bu fonksiyon, görüntülenen web belgesinde tanımlanan komut dosyalarının bir parçasıdır. Yukarıdaki sözdizimi bir javascript sözdizimidir. Komut dosyaları vbscript ile yazılmışsa, onclick="fonksiyon" şeklinde parantezler olmadan yazılmalıdır. İşleve parametreler aktarılması gerekiyorsa sözdizimi aynı kalır: onclick="fonksiyon(val1, val2,...)"
Örneğimizde, Effacer düğmesine tıklandığında aşağıdaki effacer JavaScript işlevi çağrılır:
<script type="text/javascript">
function sile() {
alert("Sil düğmesine tıkladınız");
}
</script>
effacer işlevi bir mesaj görüntüler:

2.5.2.10. Gönderme düğmesi

submit türü düğme
<input type="submit" value="Gönder" name="cmdRenvoyer" />
 
HTML etiketi
<input type="submit" value="Gönder" name="cmdRenvoyer" />
özellikler
type="submit": Düğmeyi, form verilerini web sunucusuna gönderen bir düğme olarak tanımlar. Kullanıcı bu düğmeye tıkladığında, tarayıcı form verilerini <form> etiketinin action özniteliğinde tanımlanan URL adresine, aynı etiketin method özniteliğinde tanımlanan yönteme göre gönderir.
value="Gönder" : düğme üzerinde görüntülenen metin

2.5.2.11. Sıfırlama düğmesi

reset türü düğme
<input type="reset" value="Sıfırla" name="cmdRétablir" />
 
HTML etiketi
<input type="reset" value="Sıfırla" name="cmdRétablir"/>
özellikler
type="reset": Düğmeyi form sıfırlama düğmesi olarak tanımlar. Kullanıcı bu düğmeye tıkladığında, tarayıcı formu aldığı duruma geri döndürür.
value="Sıfırla" : düğmede görüntülenen metin

2.5.2.12. Gizli alan

gizli alan
<input type="hidden" name="secret" value="uneValeur" />
HTML etiketi
<input type="hidden" name="..." value="..."/>
özellikler
type="hidden": Bunun gizli bir alan olduğunu belirtir. Gizli bir alan, formun bir parçasıdır ancak kullanıcıya gösterilmez. Ancak, kullanıcı tarayıcısından kaynak kodunu görüntülemesini isterse, <input type="hidden" value="..."> etiketini ve dolayısıyla gizli alanın değerini görebilir.
value="birDeğer" : gizli alanın değeri.
Gizli alanın amacı nedir? Bu, web sunucusunun bir müşterinin istekleri boyunca bilgileri saklamasına olanak tanır. Bir web alışveriş uygulamasını ele alalım. Müşteri, bir kataloğun ilk sayfasında art1 adlı üründen q1 adet satın alır ve ardından kataloğun başka bir sayfasına geçer. Müşterinin q1 adet art1 ürünü satın aldığını hatırlamak için sunucu, bu iki bilgiyi yeni sayfanın web formundaki gizli bir alana yerleştirebilir. Bu yeni sayfada müşteri, q2 ve art2 ürünlerini satın alır. Bu ikinci formun verileri sunucuya gönderildiğinde (submit), sunucu sadece (q2, art2) bilgilerini almakla kalmayacak, aynı zamanda gizli alan olarak formun bir parçası olan (q1, art1) bilgilerini de alacaktır. Web sunucusu daha sonra (q1,art1) ve (q2,art2) bilgilerini yeni bir gizli alana yerleştirir ve yeni bir katalog sayfası gönderir. Ve bu şekilde devam eder.

2.5.3. Bir web istemcisi tarafından bir web sunucusuna form değerlerinin gönderilmesi

Önceki çalışmada, web istemcisinin görüntülediği bir formun değerlerini bir web sunucusuna göndermek için iki yönteme sahip olduğunu belirtmiştik: GET ve POST yöntemleri. Bir örnek üzerinden bu iki yöntem arasındaki farkı inceleyelim.

2.5.3.1. GET yöntemi

İlk bir test yapalım; burada, belgenin HTML kodunda <form> etiketi şu şekilde tanımlanmıştır:


<form method="get" action="FormulaireGet.aspx">

Kullanıcı [1] düğmesine tıkladığında, forma girilen değerler ASP.NET [2] sayfasına gönderilecektir. Bu sayfa bu parametrelerle hiçbir işlem yapmaz ve boş bir sayfa döndürür. Sadece tarayıcının girilen değerleri web sunucusuna nasıl ilettiğini öğrenmek istiyoruz. Bunun için Chrome’da bulunan bir hata ayıklama aracını kullanacağız. Bu aracı, CTRL-I (büyük harf) [3] yazarak etkinleştirebiliriz:

Tarayıcı ile web sunucusu arasındaki ağ iletişimi ile ilgilendiğimiz için, yukarıda [Network] sekmesini etkinleştirip ardından formdaki [Envoyer] düğmesine tıklıyoruz. Bu düğme, bir [form] etiketinin içindeki [submit] türünde bir düğmedir. Tarayıcı, tıklamaya tepki olarak, [form] etiketinin [action] özniteliğinde belirtilen URL [FormulaireGet.aspx]'i, [method] özniteliğinde belirtilen GET yöntemiyle yanıt verir. Böylece şu bilgileri elde ederiz:

Yukarıdaki ekran görüntüsü, [envoyer] düğmesine tıklandıktan sonra tarayıcı tarafından istenen URL'i göstermektedir. Tarayıcı, beklenen [FormulaireGet.aspx] yerine URL'i talep ediyor, ancak arkasına formda girilen değerleri içeren ek bilgiler ekliyor. Daha fazla bilgi almak için yukarıdaki bağlantıya tıklıyoruz:

Yukarıdaki [1, 2] örneğinde, tarayıcı tarafından gönderilen HTTP başlıklarını görüyoruz. Bunlar burada biçimlendirilmiştir. Bu başlıkların düz metnini görmek için [view source] [3, 4] bağlantısını takip ediyoruz. Tam metin şu şekildedir:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
GET /FormulaireGet.aspx?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=3&lst1=3&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
Host: localhost:56376
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Referer: http://localhost:56376/HtmlFormulaire.html
Accept-Encoding: gzip,deflate,sdch
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

Daha önce karşılaştığımız öğeleri tekrar görüyoruz. Diğerleri ise ilk kez karşımıza çıkıyor:

Connection: keep-alive
İstemci, sunucudan yanıt verdikten sonra bağlantıyı kapatmamasını ister. Bu, istemcinin sonraki bir istek için aynı bağlantıyı kullanmasına olanak tanır. Bağlantı süresiz olarak açık kalmaz. Sunucu, bağlantı çok uzun süre kullanılmadığında onu kapatır.
Referer
Yeni istek yapıldığında tarayıcıda görüntülenen URL.

Yenilik, URL'in ardından gelen bilgilerin 1. satırında yer almaktadır. Formda yapılan seçimlerin URL'te yer aldığı görülmektedir. Kullanıcı tarafından forma girilen değerler, GET URL?param1=değer1&param2=değer2&... komutuna aktarılmıştır. HTTP/1.1 komutuna aktarılmıştır; burada parami, web formundaki denetimlerin adları (name özniteliği) ve valeuri ise bunlara atanan değerlerdir. Aşağıda üç sütunlu bir tablo sunuyoruz:

  • 1. sütun: örnekteki HTML kontrolünün tanımını içerir;
  • 2. sütun: Bu kontrolün bir tarayıcıda nasıl görüntülendiğini gösterir;
  • 3. sütun: Örnekteki GET isteğinde olduğu şekliyle, 1. sütundaki kontrol için tarayıcı tarafından sunucuya gönderilen değeri gösterir.
HTML kontrolü
görsel
geri gönderilen değer(ler)
<input type="radio" value="Evet" name="R1"/>Evet
<input type="radio" name="R1" value="hayır" checked="checked"/>Hayır
R1=Evet
- kullanıcı tarafından işaretlenen radyo düğmesinin value özniteliğinin değeri.
<input type="checkbox" name="C1" value="bir"/>1
<input type="checkbox" name="C2" value="iki" checked="checked"/>2
<input type="checkbox" name="C3" value="üç"/>3
C1=bir
C2=iki
- kullanıcı tarafından işaretlenen kutuların value öznitelik değerleri
<input type="text" name="txtSaisie" size="20" value="birkaç kelime"/>
txtSaisie=Web+programlama
- kullanıcı tarafından giriş alanına yazılan metin. Boşluklar + işaretiyle değiştirilmiştir
<input type="password" name="txtMdp" size="20" value="unMotDePasse"/>
txtMdp=bu bir sır
- kullanıcı tarafından giriş alanına yazılan metin
<textarea rows="2" name="areaSaisie" cols="20">
satır1
satır2
satır3
</textarea>
giriş alanı=Web+programlamanın+temelleri%0D%0A
Web+programlamasının+temelleri
- Kullanıcı tarafından giriş alanına yazılan metin. %OD%OA satır sonu işaretidir. Boşluklar + işaretiyle değiştirilmiştir
<select size="1" name="cmbValeurs">
<option value='1'>seçim1</option>
<option selected="selected" value='2'>seçenek2</option>
<option value='3'>seçenek3</option>
</select>
cmbDeğerler=3
- kullanıcı tarafından seçilen öğenin [value] özniteliği
<select size="3" name="lst1">
<option selected="selected" value='1'>liste1</option>
<option value='2'>liste2</option>
<option value='3'>liste3</option>
<option value='4'>liste4</option>
<option value='5'>liste5</option>
</select>
lst1=3
- kullanıcı tarafından seçilen öğenin [value] özniteliği
<select size="3" name="lst2" multiple="multiple">
<option selected="selected" value='1'>liste1</option>
<option value='2'>liste2</option>
<option selected="selected" value='3'>liste3</option>
<option value='4'>liste4</option>
<option value='5'>liste5</option>
</select>
lst2=1
lst2=3
- kullanıcı tarafından seçilen öğelerin [value] öznitelikleri
<input type="submit" value="Gönder" name="cmdRenvoyer"/>
 
cmdRenvoyer=Gönder
- form verilerini sunucuya göndermek için kullanılan düğmenin adı ve value özniteliği
<input type="hidden" name="secret" value="uneValeur"/>
 
secret=birDeğer
- gizli alanın value özniteliği

2.5.3.2. POST yöntemi

HTML belgesini, tarayıcının form değerlerini web sunucusuna göndermek için artık POST yöntemini kullanacak şekilde değiştiriyoruz:


  <form method="post" action="FormulairePost.aspx">

Formu GET yöntemi için olduğu gibi dolduruyoruz ve [Envoyer] düğmesiyle parametreleri sunucuya gönderiyoruz. 34. sayfadaki önceki paragrafta yapıldığı gibi, Chrome'da tarayıcı tarafından gönderilen isteğin HTTP başlıklarına erişebiliriz:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
POST /FormulairePost.aspx HTTP/1.1
Host: localhost:56376
Connection: keep-alive
Content-Length: 195
Pragma: no-cache
Cache-Control: no-cache
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8
Origin: http://localhost:56376
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/38.0.2125.111 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:56376/HtmlFormulaire.html
Accept-Encoding: gzip,deflate
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=unMotDePasse&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web%0D%0A&cmbValeurs=3&lst1=3&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur

İstemcinin HTTP isteğinde bazı yenilikler ortaya çıkıyor:

POST URL HTTP/1.1
GET sorgusu, POST sorgusuyla değiştirilmiştir. Parametreler artık isteğin bu ilk satırında yer almıyor. Parametrelerin artık (14. satırda) boş bir satırdan sonra HTTP isteğinin arkasına yerleştirildiği görülebilir. Kodlamaları, GET isteğindeki kodlamayla aynıdır.
Content-Length
"Gönderilen" karakter sayısı, c.a.d. Web sunucusunun, istemciden gönderilen belgeyi almak için HTTP başlıklarını aldıktan sonra okuması gereken karakter sayısı. Söz konusu belge, burada form değerlerinin listesidir.
Content-type
, istemcinin HTTP başlıklarından sonra göndereceği belgenin türünü belirtir. [application/x-www-form-urlencoded] türü, bunun form değerleri içeren bir belge olduğunu gösterir.

Bir web sunucusuna veri iletmek için iki yöntem vardır: GET ve POST. Bir yöntem diğerinden daha mı iyidir? Gördüğümüz gibi, bir formun değerleri tarayıcı tarafından GET yöntemiyle gönderilirse, tarayıcının Adresse alanında istenen URL değerini URL?param1=val1&param2=val2&... biçiminde görüntülediğini görmüştük. Bunu bir avantaj ya da dezavantaj olarak değerlendirebiliriz:

  • kullanıcının bu ayarlanmış URL adresini sık kullanılanlarına eklemesine izin vermek istiyorsak bir avantaj;
  • kullanıcının, örneğin gizli alanlar gibi formdaki belirli bilgilere erişmesini istemiyorsak bir dezavantajdır.

Bundan sonra, formlarımızda neredeyse tamamen POST yöntemini kullanacağız.

2.6. Conclusion

Bu bölümde, web geliştirmenin çeşitli temel kavramları ele alınmıştır:

  • HTTP protokolü aracılığıyla istemci-sunucu iletişimi;
  • HTML dili kullanılarak bir belgenin tasarımı;
  • veri girişi formlarının tasarımı.

Bir örnek üzerinden, bir istemcinin web sunucusuna nasıl bilgi gönderebileceğini gördük. Sunucunun bu bilgileri

  • bu bilgileri nasıl alabileceğini;
  • işleyebileceğini;
  • işlemin sonucuna bağlı olarak müşteriye dinamik bir yanıt gönderebileceğini henüz ele almadık.

Bu, web programlamanın alanına girer; bu konuyu bir sonraki bölümde ASP.NET ve MVC teknolojilerinin tanıtımıyla ele alacağız.

https://stahe.github.io
Serge Tahé tarafından yazılan bu kurs-eğitim kılavuzu, Creative Commons Atıf – Ticari Olmayan Kullanım – Aynı Koşullarda Paylaşım 3.0 Değiştirilmemiş lisansının koşullarına göre kamuoyuna sunulmaktadır.