2. Web Programlamasının Temelleri

Bu bölümün temel amacı, Web programlamanın, bunları uygulamak için kullanılan belirli teknolojiden bağımsız olan temel ilkelerini tanıtmaktır. Web geliştirme felsefesini yavaş yavaş "içselleştirmek" için denemeniz tavsiye edilen çok sayıda örnek sunmaktadır. Bu bilgilere zaten sahip olan okuyucular doğrudan 3. bölüme geçebilirler.

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

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

Numara	Rol
1	Tarayıcı, URL için ilk kez (http://machine/url)'i talep eder. Hiçbir parametre aktarılmaz.
2	Web sunucusu, ona bu URL web sayfasını gönderir. Bu sayfa statik olabilir veya veritabanı içeriğini (SB, SC) kullanmış olabilecek bir sunucu betiği (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)

İlk Spring projemizi oluşturalım: MVC [1-2]:

[1-2]'te, Spring Boot [http://projects.spring.io/spring-boot/] tabanlı yeni bir proje oluşturuyoruz;

[3-7] bilgileri, projenin Maven yapılandırması içindir;
[3]'te, Maven projesinin adı;
[4], projenin derleme sonucunun yerleştirileceği Maven grubu;
[5]'te, derleme ürününe verilen ad;
[6], projenin açıklamasıdır;
[7], projenin çalıştırılabilir sınıfının yerleştirileceği paket;
[8]'te, projenin türü. Bu, Thymeleaf görünümlerine sahip bir web projesidir. Burada, Spring Boot projesi tarafından sunulan kullanıma hazır tüm Maven bağımlılıklarını görebiliriz;
[9]'te, Maven derlemesinden elde edilen ürünün war değil, jar arşivi olarak paketleneceği belirtilir. Proje, bağımlılıkları arasında yer alacak yerleşik bir Tomcat sunucusu kullanacaktır;
[10]'te, sihirbazın sonraki adımına geçiyoruz;

[11]'te, proje klasörü belirtilir;
[12]'te, sihirbazı tamamlayın;
[13]'te, oluşturulan proje.

Oluşturulan [pom.xml] dosyasını inceleyelim:


<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
    xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>istia.st.springmvc</groupId>
    <artifactId>intro</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <packaging>jar</packaging>

    <name>springmvc-intro</name>
    <description>Les bases de la programmation web</description>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.1.9.RELEASE</version>
        <relativePath /> <!-- depo içinden üst öğeyi ara -->
    </parent>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <start-class>istia.st.springmvc.Application</start-class>
        <java.version>1.7</java.version>
    </properties>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>

</project>

Bu dosya, sihirbazda girilen tüm bilgileri içerir. 26-30. satırlarda, daha önce bilmediğimiz bir bağımlılık görüyoruz. Bu bağımlılık, JUnit birim testlerinin Spring ile entegrasyonunu sağlar.

Öncelikle bu projede HTML adlı statik bir sayfa oluşturalım. Bu sayfa varsayılan olarak [src / main / resources / static] klasörüne yerleştirilmelidir:

[1-4]'te, [static] klasörüne bir HTML dosyası oluşturuyoruz;

dosyasını [6] dosyasına dönüştürdüğümüzde, sayfaya bir ad verin;
[7]'te, sayfa eklenmiştir.

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


<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</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>).

[1-3] uygulamasını çalıştıralım:

ardından bir tarayıcıyla URL [http://localhost:8080/exemple-01.html] adresini açalım:

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

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

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

2.2.2. Dinamik bir Thymeleaf sayfası

Şimdi bir Thymeleaf sayfası oluşturalım. Bu, HTML öznitelikleriyle zenginleştirilmiş etiketler içeren klasik bir [Thymeleaf] [http://www.thymeleaf.org/] sayfasıdır. HTML sayfasını oluştururken izlediğimiz yaklaşıma benzer bir yol izliyoruz, ancak bu sefer yeni HTML sayfasını [templates] klasörüne yerleştirmemiz gerekiyor:

[exemple-02.html] sayfası şu şekilde olacaktır:


<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>spring mvc intro</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <p th:text="'Il est ' + ${heure}">Voici l'heure</p>
</body>
</html>

8. satır: <p> etiketi, görüntülenen sayfaya bir paragraf ekleyen bir HTML etiketidir. [th:text], [Thymeleaf] özniteliğidir ve [Thymeleaf]'in etkin olup olmadığına bağlı olarak iki farklı işlevi vardır:
- eğer [Thymeleaf], HTML sayfasını yorumlamıyorsa, [th:text] özniteliği, HTML'te bilinmediği için yok sayılacaktır. Bu durumda görüntülenen metin [Voici l'heure] olacaktır;
- eğer [Thymeleaf], HTML sayfasını yorumlarsa, [th:text] özniteliği değerlendirilecek ve değeri [Voici l'heure] metninin yerine geçecektir. Değeri [Il est 17:11:06] gibi olacaktır;

Bunu uygulamada görelim. [templates / exemple-02.html] sayfasını [static] klasörüne kopyalıyoruz. Bu klasöre yerleştirilen HTML sayfaları, [Thymeleaf] tarafından yorumlanmaz:

Uygulamayı daha önce birçok kez yaptığımız gibi çalıştırıyoruz, ardından bir tarayıcıyla URL ve [http://localhost:8080/exemple-02.html] dosyalarını çağırıyoruz:

[1]'te, [th:text] özniteliğinin yorumlanmadığını ve herhangi bir hataya da yol açmadığını görüyoruz. [2]'te alınan sayfanın kaynak kodu, tarayıcının sayfayı eksiksiz olarak aldığını gösteriyor.

[templates] klasöründeki [exemple-02.html] sayfasına geri dönelim:

[templates] klasörüne yerleştirilen HTML sayfaları, [Thymeleaf] tarafından yorumlanıyor. Sayfanın koduna geri dönelim:


<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>spring mvc intro</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
    <p th:text="'Il est ' + ${heure}">Voici l'heure</p>
</body>
</html>

7. satır: [Thymeleaf], [th:text] özniteliğini yorumlayacak ve [Voici l'heure]'i şu ifadenin değeriyle değiştirecektir:

"'Il est ' + ${heure}"

Bu ifade, [${heure}] değişkenini kullanır; burada [heure], [exemple-02.html] görünüm şablonuna aittir. Dolayısıyla bu şablonu oluşturmamız gerekiyor. Bunun için 1.6. paragrafta incelenen örneği takip edeceğiz. Projeyi şu şekilde geliştireceğiz:

[1]'e aşağıdaki denetleyiciyi ekliyoruz:


package istia.st.springmvc;

import java.text.SimpleDateFormat;
import java.util.Date;

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;

@Controller
public class MyController {

    @RequestMapping("/")
    public String heure(Model model) {
        // saat biçimi
        SimpleDateFormat formater = new SimpleDateFormat("HH:MM:ss");
        // şu anki saat
        String heure = formater.format(new Date());
        // saati görünüm şablonuna eklenir
        model.addAttribute("heure", heure);
        // görünümü görüntülenir [exemple-02.html]
        return "exemple-02";
    }
}

13-14. satırlar: [heure] yöntemi, URL ve [/]'i işler;
14. satır: [Model model] boş bir şablondur. [heure] eylemi, şablonda görmek istediği öznitelikleri buraya eklemelidir. [exemple-02.html] görünümünün [heure] adlı bir özniteliği beklediği bilinmektedir;
19-22. satırlar: az önce açıklanan işlemi gerçekleştirir. [exemple-02.html] görünümü (22. satır), şablonunda [heure] adlı bir öznitelikle (20. satır) görüntülenecektir;
satır 16: bir tarih biçimlendiricisi oluşturulur. Kullanılan [HH:MM:ss] biçimi, saatlerin [0-24] aralığında olduğu bir [heures:minutes:secondes] biçimidir;
satır 18: bu biçimlendirici ile günün tarihi biçimlendirilir;
20. satır: Elde edilen saat, [heure] adlı bir özniteliğe atanır;

Uygulamayı başlatıyoruz ve URL ile [/] değerlerini istiyoruz:

[1] ile elde edilen sayfa ve [2] ile içeriği HTML. İlk metin [Voici l'heure]'in tamamen kaybolduğu görülebilir;

Şimdi [1] (F5) sayfasını yenilersek, URL değişmezken farklı bir görüntü (yeni saat) elde ederiz. Bu, sayfanın dinamik özelliğidir: içeriği zamanla değişebilir.

Yukarıdakilerden, dinamik ve statik sayfaların temelde farklı nitelikte oldukları sonucunu çıkarabiliriz.

2.2.3. Spring Boot Uygulamasının Yapılandırılması

Eclipse projesinin mimarisine geri dönelim:

[application.properties] dosyası, Spring Boot uygulamasını yapılandırmaya olanak tanır. Şu anda bu dosya boştur. Bu dosyayı, URL ve [http://docs.spring.io/spring-boot/docs/current/reference/html/common-application-properties.html] dosyalarında açıklanan çeşitli yöntemlerle uygulamayı yapılandırmak için kullanabiliriz. [2] dosyasına göre aşağıdaki [application.properties] dosyasını kullanacağız:

1. satır: web uygulamasının hizmet bağlantı noktasını belirler;
2. satır: web uygulamasının bağlamını belirler;

Bu yapılandırma ile, [exemple-01.html] statik sayfası, URL ve [http://localhost:9000/intro/exemple-01.html] dosyaları kullanılarak elde edilecektir:

2.3. Tarayıcı tarafı komut dosyaları

Bir 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 (Ocak 2015) JavaScript'tir. Geliştiricilerin işini kolaylaştırmak için bu dil ile yüzlerce kütüphane oluşturulmuştur.

Mevcut projenin [static] klasörüne yeni bir [exemple-03.html] sayfası oluşturalım:

[exemple-03.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]'te, 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-2: HTML sunucusu, HTML5 / CSS / JavaScript tabanlı statik sayfa sunucusudur;
3-4: HTML5 / CSS / Javascript sayfaları, veri sunucusuyla doğrudan etkileşime girer. Bu sunucu, yalnızca HTML formatında olmayan verileri 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:

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şması 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 (Aktarım Kontrol Protokolü) veya UDP (Kullanıcı Datagram Protokolü) katmanı, 4. katman (aktarım) 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:

İstemci --> Sunucu

İstemci, web sunucusuna istekte bulunduğunda,

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

Sunucu --> İstemci

Sunucu, istemciye yanıt verirken,

ne gönderdiğini belirtmek için HTTP biçiminde metin satırları;
boş bir satır;
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. Görüntüler içeren bir web sayfasını talep eden bir tarayıcıyı ele alalım:

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.
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.
İ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 üzere 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 müşteriye istenen görüntüyü gönderir. Bu sefer, yanıtında HTTP başlıkları, gönderilen belgenin bir görüntü olduğunu ve HTML belgesi olmadığını belirtecektir.
İ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ı. 80 ise, bağlantı noktası numarası atlanabilir. Bu en yaygın durumdur
yol	istenen kaynağa giden 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?

URL dosyasının machine[:port] bölümünde belirtilen makine ve bağlantı noktasıyla TCP-IP iletişim kanalı açar. 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.
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
sunucu da aynı şekilde ve aynı kanaldan yanıt verecektir
İki 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, 9.6. 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:

Web sunucusu herhangi biri olabilir. Burada, tarayıcı ile web sunucusu arasında gerçekleşecek veri alışverişini incelemek istiyoruz. Daha önce, aşağıdaki statik HTML sayfasını 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>

Bu sayfayı bir tarayıcıda görüntülediğimizde:

Görüldüğü gibi, istenen URL sayfası: [http://localhost:9000/intro/exemple-01.html]'tir. Dolayısıyla, Web servisinin makinesi localhost (=yerel makine) ve bağlantı noktası 9000'dir. [Advanced Rest Client] uygulamasını kullanarak aynı URL'i talep edelim:

[1]'te, uygulamayı başlatıyoruz (yeni bir Chrome sekmesinin [Applications] sekmesinde);
[2]'te, [Request] seçeneğini seçin;
[3]'te, sorgulanacak sunucuyu belirtin: http://localhost:9000;
[4]'te, istenen URL'i belirtin: /intro/exemple-01.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] isteği, [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:

[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:

GET /intro/exemple-01.html HTTP/1.1
Host: localhost:9000
Connection: keep-alive
Pragma: no-cache
Cache-Control: no-cache
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 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;
6. satır: tarayıcı, [User-Agent] başlığıyla kendini tanıtıyor;
7. 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;
8. satır: Tarayıcı, yanıt olarak her tür belgeyi kabul ettiğini belirtir;
9. satır: Tarayıcı, kabul ettiği belge formatlarını belirtir;
10. 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:

HTTP/1.1 200 OK
Server: Apache-Coyote/1.1
Last-Modified: Sat, 29 Nov 2014 07:31:43 GMT
Content-Type: text/html
Content-Length: 255
Date: Sat, 29 Nov 2014 08:20:52 GMT

1. satır: uygulama tarafından görüntülenmemiştir;
satır 2: sunucu kendini tanımlar; burada bir Apache-Coyote sunucusu;
3. satır: gönderilen belgenin son değiştirilme tarihi;
4. satır: sunucu tarafından gönderilen belgenin türü. Burada bir HTML belgesi;
satır 5: gönderilen HTML belgesinin bayt cinsinden boyutu.
6. satır: yanıtın tarihi ve saati;

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:

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 bir 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 istemcinin isteği üzerine, sunucu aynı yapıya sahip bir yanıt gönderir. İstenen kaynak, [Document] bölümünde iletilir; ancak istemcinin 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ır 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 dilini tamamen bilmek gerekmez. Ancak bu bilgi gereklidir ve WYSIWYG gibi web sayfası oluşturma yazılımları (örneğin DreamWeaver ve diğer onlarca yazılım) kullanılarak edinilebilir. HTML dilinin inceliklerini keşfetmenin bir başka yolu da, web'de gezinerek ilginç ve sizin için henüz bilinmeyen özellikler içeren 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:

<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.

<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>
        <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 11, 31) <thead>...</thead>: sütun başlıklarını tanımlamak için (12. ve 18. satırlar) <tbody>...</tbody>: tablonun içeriğini tanımlamak için (satır 19, 30) <tr öznitelikler>...</tr> : bir satırı tanımlamak için (satır 20, 24) <td öznitelikler>...</td>: bir hücreyi tanımlamak için (satır 21) ö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 36): 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/intro/exemple-04.html ile elde edilen bir web belgesinde yer almaktadır. Ayrıca, tarayıcı burada referans verilen görüntüyü almak için http://localhost:port/intro/images/cerisier.jpg adresindeki URL dosyasını isteyecektir.
bağlantı	<a href="http://istia.univ-angers.fr">burada</a> (40. satır): ici metninin, http://istia.univ-angers.fr adresine bir bağlantı olarak işlev görmesini sağlar.
sayfa alt kısmı	<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/intro/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:

http://localhost:port/intro/exemple-04.html adresine, belgenin HTML kaynağını almak için
http://localhost:port/intro/images/cerisier.jpg adresinden cerisier.jpg numaralı görüntüyü almak için
http://localhost:port/intro/images/standard.jpg adresinden standard.jpg arka plan resmini elde etmek için

2.5.2. Bir form HTML

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="postFormulaire">
    <table>
      <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 etiketi 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" />
button türünde düğme	<input type="button" value="Sil" name="cmdEffacer" onclick="effacer()" />

Şimdi bu farklı etiketleri inceleyelim:

2.5.2.1. form

form


<form method="post" action="postFormulaire">

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 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ı

HTML etiketi

<input type="..." name="..." size=".." value=".."/>

input etiketi çeşitli denetimler için kullanılır. Bu farklı denetimleri birbirinden ayıran şey type özniteliğidir.

öznitelikler

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ı

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="valeur2" ....>metin

yanında metin bulunan bir onay kutusu görüntüler.

özellikler

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

<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

<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

<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çilmesini sağlar. 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

HTML etiketi

<input type="button" value="..." name="..." onclick="effacer()" ..../>

özellikler

type="button": bir düğme kontrolü tanımlar. submit ve reset olmak üzere iki farklı düğme türü daha vardır.

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:

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

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

sıfırlama düğmesi

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

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; belgedeki HTML kodunda, <form> etiketi şu şekilde tanımlanmıştır:


<form method="get" action="doNothing">

Kullanıcı [1] düğmesine tıkladığında, forma girilen değerler Spring denetleyicisi [2]'e gönderilecektir. Form değerlerinin URL ve [doNothing]'e gönderileceğini gördük:


<form method="get" action="doNothing">

[doNothing] eylemi, [MyController] ve [2] denetleyicilerinde şu şekilde tanımlanmıştır:


    // ----------------------- akışı boşaltma [Content-Length=0]
    @RequestMapping(value = "/doNothing")
    @ResponseBody
    public void doNothing() {
}

1. satır: Eylem, URL [/doNothing]'i işler; dolayısıyla aslında [/context/doNothing]'i işler; burada [context], web uygulamasının bağlamı veya adıdır, burada [/intro];
3. satır: [@ResponseBody] açıklaması, açıklanan yöntemin sonucunun doğrudan istemciye gönderilmesi gerektiğini belirtir;
4. satır: Yöntem hiçbir değer döndürmez. Dolayısıyla istemci, sunucudan boş bir yanıt alacaktı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. CTRL-Shift-I (büyük harf) tuşlarına basarak bu aracı etkinleştiriyoruz: [3]:

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 [submit] etiketinin içindeki [submit] türünde bir düğmedir. Tarayıcı, tıklamaya tepki olarak, [form] etiketinin [action] özniteliğinde belirtilen URL [/intro/doNothing] dosyasını, [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 kodunu göstermektedir. Tarayıcı, beklenen [/intro/doNothing] yerine URL'i talep ediyor, ancak bunun 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:

GET /intro/doNothing?R1=non&C2=deux&txtSaisie=qqs+mots&txtMdp=unMotDePasse&areaSaisie=ligne1%0D%0Aligne2%0D%0Aligne3%0D%0A&cmbValeurs=2&lst1=1&lst2=1&lst2=3&cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
Host: localhost:9000
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/39.0.2171.71 Safari/537.36
Referer: http://localhost:9000/intro/exemple-05.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 denetim 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+programlama - 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="doNothing">

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

POST /intro/doNothing HTTP/1.1
Host: localhost:9000
Connection: keep-alive
Content-Length: 172
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:9000
User-Agent: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/39.0.2171.71 Safari/537.36
Content-Type: application/x-www-form-urlencoded
Referer: http://localhost:9000/intro/exemple-05.html
Accept-Encoding: gzip, deflate
Accept-Language: fr-FR,fr;q=0.8,en-US;q=0.6,en;q=0.4

R1=non&C2=deux&txtSaisie=qqs+mots&txtMdp=unMotDePasse&areaSaisie=ligne1%0D%0Aligne2%0D%0Aligne3%0D%0A&cmbValeurs=2&lst1=1&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 (15. 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	HTTP başlıklarından sonra istemcinin göndereceği belgenin türünü belirtir. [application/x-www-form-urlencoded] türü, bunun form değerlerini 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 bağlantısını sık kullanılanlara 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 nasıl

bu bilgileri nasıl alabileceğini;
bu bilgileri nasıl işleyebileceğini;
işleme sonucuna bağlı olarak müşteriye dinamik bir yanıt gönderebileceğini

Bu, web programlamanın alanına girer; bu konuyu bir sonraki bölümde Spring teknolojisini tanıtarak ele alacağız MVC.