2. Temel Bilgiler
Bu bölümde, web programlamanın temellerini ele alıyoruz. Bu bölümün temel amacı, belirli bir dil ve ortamda uygulamaya geçmeden önce web programlamanın temel ilkelerini tanıtmaktır. Web geliştirme felsefesini yavaş yavaş "içselleştirmek" için denemeniz tavsiye edilen çok sayıda örnek sunulmaktadır.
2.1. Bir Web uygulamasının bileşenleri
Numara | Rol | Yaygın örnekler |
OS Sunucu | Linux, Windows | |
Web Sunucusu | Apache (Linux, Windows) IIS (NT), PWS (Win9x) | |
Sunucu tarafında çalıştırılan komut dosyaları. Bunlar, sunucu modülleri modülleri veya sunucu dışındaki programlar tarafından çalıştırılabilir (CGI). | PERL (Apache, IIS, PWS) VBSCRIPT (IIS, PWS) JAVASCRIPT (IIS, PWS) PHP (Apache, IIS, PWS) JAVA (Apache, IIS, PWS) C#, VB.NET (IIS) | |
Veritabanı - Bu, onu kullanan programla aynı makinede kullanan programla aynı makinede veya İnternet üzerinden başka bir makinede bulunabilir. | Oracle (Linux, Windows) MySQL (Linux, Windows) Access (Windows) SQL Sunucusu (Windows) | |
OS İstemci | Linux, Windows | |
Web Tarayıcısı | Netscape, Internet Explorer | |
Tarayıcı içinde istemci tarafında çalıştırılan komut dosyaları. Bu komut dosyaları, istemci bilgisayarın disklerine erişemez. | VBscript (IE) Javascript (IE, Netscape) Perl betiği (IE) Applet'ler JAVA |
2.2. Form içeren bir web uygulamasında veri alışverişi
İstemci Makinesi Sunucu Makinesi
Numara | Rol |
Tarayıcı, URL için ilk kez (http://machine/url)'i istiyor. Hiçbir parametre aktarılmadı. | |
Web sunucusu, bu URL'e ait web sayfasını tarayıcıya 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ıç sayfası olan WEB'i 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 başlangıç sayfasını 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. | |
Kullanıcı, web sunucusuna gönderilmesi gereken form verilerini onaylar. Tarayıcı, duruma göre ilk URL'i veya başka bir komut dosyasını 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. | |
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.3. Bazı kaynaklar
Aşağıda, web geliştirme için gerekli bazı araçları kurmanıza ve kullanmanıza yardımcı olacak kaynakların bir listesi bulunmaktadır. Ek bölümde ise bu araçların kurulumuna ilişkin bir kılavuz yer almaktadır.
http://www.apache.org - Apache, Kurulum ve Uygulama, O'Reilly | |
http://www.microsoft.com | |
http://www.activestate.com - Perl Programlama, Larry Wall, O'Reilly - Perl ile Uygulamalar, Neuss ve Vromans, O'Reilly - Active Perl ile birlikte gelen HTML belgeleri | |
http://www.php.net - PHP ile Web Programlama, Lacroix, Eyrolles - PHP kullanım kılavuzu, PHP web sitesinden indirilebilir | |
http://msdn.microsoft.com/scripting/vbscript/download/vbsdoc.exe http://msdn.microsoft.com/scripting/default.htm?/scripting/vbscript - WEB ile WinNT Altındaki Veritabanı Arasındaki Arayüz, Alex Homer, Eyrolles | |
http://msdn.microsoft.com/scripting/jscript/download/jsdoc.exe http://developer.netscape.com/docs/manuals/index.html | |
http://developer.netscape.com/docs/manuals/index.html | |
http://www.sun.com - JAVA Servlets, Jason Hunter, O'Reilly - Java ile Ağ Programlama, Elliotte Rusty Harold, O'Reilly - JDBC ve Java, George Reese, O'Reilly | |
http://www.mysql.com http://www.oracle.com - MySQL kılavuzu, MySQL web sitesinde mevcuttur - Linux üzerinde Oracle 8i, Gilles Briard, Eyrolles - NT altında Oracle 8i, Gilles Briard, Eyrolles |
2.4. Kısaltmalar
Bundan sonra, bir dizi aracın kurulduğunu varsayacağız ve aşağıdaki notasyonları kullanacağız:
sembol | anlam |
Apache sunucusunun dizin ağacının kökü | |
Apache tarafından sunulan web sayfalarının kök dizini. Web sayfaları bu kök dizinin altında bulunmalıdır. Dolayısıyla, URL http://localhost/page1.htm adresi, <apache-DocumentRoot>\page1.htm dosyasına karşılık gelir. | |
cgi-bin takma adıyla ilişkili dizin ağacının kök dizinidir ve buraya Apache için CGI komut dosyaları yerleştirilebilir. Böylece, URL http://localhost/cgi-bin/test1.pl adresi, <apache-cgi-bin>\test1.pl dosyasına karşılık gelir. | |
PWS tarafından sunulan web sayfalarının kök dizini. Web sayfaları bu kök dizin altında bulunmalıdır. Dolayısıyla, URL http://localhost/page1.htm, <pws-DocumentRoot>\page1.htm dosyasına karşılık gelir. | |
Perl dil ağacının kökü. perl.exe yürütülebilir dosyası genellikle <perl>\bin. içinde bulunur | |
PHP dil ağacının kökü. php.exe yürütülebilir dosyası genellikle <php>. içinde bulunur | |
Java dizin ağacının kökü. Java ile ilişkili yürütülebilir dosyalar <java>\bin. içinde bulunur | |
Tomcat sunucusunun kök dizininde bulunur. Servlet örnekleri <tomcat>\webapps\examples\servlets'te, sayfa örnekleri ise JSP'te ve <tomcat>\webbapps\examples\jsp'te bulunur |
Bu araçların her biri için, kurulumlarına ilişkin yardım içeren ek bölüme başvurulabilir.
2.5. 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şturulur. Bu paragrafta, web kavramının evrenselliğini göstermek amacıyla farklı web sunucuları ve farklı programlama dilleriyle çeşitli testler sunuyoruz.
2.5.1. HTML statik sayfası (HyperText İşaretleme Dili)
Aşağıdaki HTML kodunu ele alalım:
<html>
<head>
<title>essai 1 : une page statique</title>
</head>
<body>
<center>
<h1>Une page statique...</h1>
</body>
</html>
ve şu web sayfasını oluşturur:
Testler
-
Apache sunucusunu başlatın
-
essai1.html komut dosyasını <apache-DocumentRoot> klasörüne yerleştirin
-
URL dosyasını (http://localhost/essai1.html) bir tarayıcıyla görüntüleyin
-
Apache sunucusunu durdurun
-
PWS sunucusunu başlatın
-
essai1.html komut dosyasını <pws-DocumentRoot> dosyasına ekleyin
-
URL http://localhost/essai1.html sayfasını bir tarayıcıyla görüntüleyin
2.5.2. Bir ASP sayfası (Active Server Pages)
essai2.asp komut dosyası:
<html>
<head>
<title>essai 1 : une page asp</title>
</head>
<body>
<center>
<h1>Une page asp générée dynamiquement par le serveur PWS</h1>
<h2>Il est <% =time %></h2>
<br>
A chaque fois que vous rafraîchissez la page, l'heure change.
</body>
</html>
aşağıdaki web sayfasını oluşturur:
Test
-
PWS sunucusunu başlatın
-
essai2.asp komut dosyasını <pws-DocumentRoot> içine yerleştirin
-
Bir tarayıcıyla URL http://localhost/essai2.asp adresine erişin
2.5.3. PERL komut dosyası (Practical Extracting and Reporting Language)
essai3.pl komut dosyası:
#!d:\perl\bin\perl.exe
($secondes,$minutes,$heure)=localtime(time);
print <<HTML
Content-type: text/html
<html>
<head>
<title>essai 1 : un script Perl</title>
</head>
<body>
<center>
<h1>Une page générée dynamiquement par un script Perl</h1>
<h2>Il est $heure:$minutes:$secondes</h2>
<br>
A chaque fois que vous rafraîchissez la page, l'heure change.
</body>
</html>
HTML
;
İlk satır, perl.exe yürütülebilir dosyasının yoludur. Gerekirse bu yolun değiştirilmesi gerekir. Bir web sunucusu tarafından çalıştırıldığında, komut dosyası aşağıdaki sayfayı oluşturur:
Test
- Web sunucusu: Apache
- Bilgi amaçlı olarak, Apache sürümüne göre <apache>\confs dizininde bulunan Apache sürümüne göre srm.conf veya httpd.conf yapılandırma dosyasını inceleyin ve essai3.pl dosyasını yerleştireceğiniz <apache-cgi-bin> dizinini belirlemek için cgi-bin ile ilgili satırı arayın.
-
essai3.pl betiğini <apache-cgi-bin> dizinine yerleştirin
-
http://localhost/cgi-bin/essai3.pl URL'sini girin
perl sayfasının yüklenmesi, asp sayfasına göre daha uzun sürer. Bunun nedeni, Perl betiğinin bir Perl yorumlayıcısı tarafından çalıştırılması ve bu yorumlayıcının betiği çalıştırabilmesi için önceden yüklenmesi gerekmesidir. Yorumlayıcı bellekte sürekli olarak kalmaz.
2.5.4. Bir PHP betiği (Kişisel Ana Sayfa)
essai4.php betiği
<html>
<head>
<title>essai 4 : une page php</title>
</head>
<body>
<center>
<h1>Une page PHP générée dynamiquement</h1>
<h2>
<?
$maintenant=time();
echo date("j/m/y, h:i:s",$maintenant);
?>
</h2>
<br>
A chaque fois que vous rafraîchissez la page, l'heure change.
</body>
</html>
Yukarıdaki komut dosyası aşağıdaki web sayfasını oluşturur:
Testler
-
<Apache>\confs içindeki Apache yapılandırma dosyası srm.conf veya httpd.conf'i inceleyin
-
Bilgi amaçlı olarak, php dosyasındaki yapılandırma satırlarını kontrol edin
-
Apache sunucusunu başlatın
-
essai4.php dosyasını <apache-DocumentRoot> klasörüne yerleştirin
-
URL'i http://localhost/essai4.php adresinden isteyin
-
PWS sunucusunu başlatın
-
Bilgi amaçlı olarak, PWS'in PHP ayarlarını kontrol edin
-
essai4.php'i <pws-DocumentRoot>\php'e ekleyin
-
URL'e http://localhost/essai4.php adresini isteyin
2.5.5. Bir JSP betiği (Java Server Pages)
heure.jsp betiği
<% //saati gösteren Java programı %>
<%@ page import="java.util.*" %>
<%
// saati hesaplamak için JAVA kodu
Calendar calendrier=Calendar.getInstance();
int heures=calendrier.get(Calendar.HOUR_OF_DAY);
int minutes=calendrier.get(Calendar.MINUTE);
int secondes=calendrier.get(Calendar.SECOND);
// saat, dakika ve saniye küresel değişkenlerdir
// bu değişkenler HTML kodunda kullanılabilir
%>
<% // HTML kodu %>
<html>
<head>
<title>Page JSP affichant l'heure</title>
</head>
<body>
<center>
<h1>Une page JSP générée dynamiquement</h1>
<h2>Il est <%=heures%>:<%=minutes%>:<%=secondes%></h2>
<br>
<h3>A chaque fois que vous rechargez la page, l'heure change</h3>
</body>
</html>
Web sunucusu tarafından çalıştırıldığında, bu komut dosyası aşağıdaki sayfayı oluşturur:
Testler
- heure.jsp betiğini <tomcat>\jakarta-tomcat\webapps\examples\jsp (Tomcat 3.x) veya <tomcat>\webapps\examples\jsp (Tomcat 4.x) dizinine yerleştirin
- Tomcat sunucusunu başlatın
- URL dosyasını http://localhost:8080/examples/jsp/heure.jsp adresinden isteyin
2.5.6. Sonuç
Yukarıdaki örnekler şunu göstermiştir:
- bir HTML sayfası bir program tarafından dinamik olarak oluşturulabilir. Web programlamanın tüm anlamı budur.
- Kullanılan diller ve web sunucuları çeşitlilik gösterebilir. Şu anda aşağıdaki başlıca eğilimler gözlemlenmektedir:
- Apache/PHP (Windows, Linux) ve IIS/PHP (Windows) ikilileri
- Windows platformlarında, IIS sunucusunu bir .NET diliyle (C#, VB.NET, ...) birleştiren ASP.NET teknolojisi
- farklı sunucularda (Tomcat, Apache, IIS) ve farklı platformlarda (Windows, Linux) çalışan Java servletleri ve JSP sayfaları teknolojisi. Bu belgede özellikle bu son teknoloji üzerinde durulacaktır.
2.6. Tarayıcı Tarafı Komut Dosyaları
Bir HTML sayfası, tarayıcı tarafından çalıştırılacak komut dosyaları içerebilir. Tarayıcı tarafında kullanılan birçok komut dosyası dili vardır. Bunlardan bazıları şunlardır:
Dil | Kullanılabilen tarayıcılar |
Vbscript | IE |
Javascript | IE, Netscape |
PerlScript | IE |
Java | IE, Netscape |
Birkaç örnek verelim.
2.6.1. Tarayıcı tarafında bir VBScript komut dosyası içeren bir web sayfası
vbs1.html sayfası
<html>
<head>
<title>essai : une page web avec un script vb</title>
<script language="vbscript">
function reagir
alert "Vous avez cliqué sur le bouton OK"
end function
</script>
</head>
<body>
<center>
<h1>Une page Web avec un script VB</h1>
<table>
<tr>
<td>Cliquez sur le bouton</td>
<td><input type="button" value="OK" name="cmdOK" onclick="reagir"></td>
</tr>
</table>
</body>
</html>
Yukarıdaki HTML sayfası, sadece HTML kodunu değil, aynı zamanda bu sayfayı yükleyen tarayıcı tarafından çalıştırılmak üzere tasarlanmış bir programı da içerir. Kod şu şekildedir:
<script language="vbscript">
function reagir
alert "Vous avez cliqué sur le bouton OK"
end function
</script>
<script></script> etiketleri, HTML sayfasındaki komut dosyalarını sınırlandırmak için kullanılır. Bu komut dosyaları farklı dillerde yazılabilir ve kullanılan dili belirten, <script> etiketindeki language seçeneğidir. Burada bu seçenek VBScript'tir. Bu dili ayrıntılı olarak ele almayacağız. Yukarıdaki komut dosyası, bir mesaj görüntüleyen réagir adlı bir işlev tanımlar. Bu işlev ne zaman çağrılır? Bunu bize aşağıdaki HTML kod satırı gösterir:
onclick özniteliği, kullanıcı OK düğmesine tıkladığında çağrılacak fonksiyonun adını belirtir. Tarayıcı bu sayfayı yükledikten ve kullanıcı OK düğmesine tıkladığında, şu sayfa görüntülenir:
Testler
Yalnızca IE tarayıcısı VBScript komut dosyalarını çalıştırabilir. Netscape'in bunu yapabilmesi için eklentilere ihtiyacı vardır. Aşağıdaki testler yapılabilir:
-
Apache sunucusu
-
<apache-DocumentRoot> içindeki vbs1.html komut dosyası
-
IE tarayıcısıyla http://localhost/vbs1.html adresine erişmek
-
PWS sunucusu
-
vbs1.html komut dosyası, <pws-DocumentRoot> içinde
-
IE tarayıcısıyla http://localhost/vbs1.html URL'sini çağırın
2.6.2. Tarayıcı tarafında bir JavaScript komut dosyası içeren bir web sayfası
Sayfa: js1.html
<html>
<head>
<title>essai 4 : une page web avec un script Javascript</title>
<script language="javascript">
function reagir(){
alert ("Vous avez cliqué sur le bouton OK");
}
</script>
</head>
<body>
<center>
<h1>Une page Web avec un script Javascript</h1>
<table>
<tr>
<td>Cliquez sur le bouton</td>
<td><input type="button" value="OK" name="cmdOK" onclick="reagir()"></td>
</tr>
</table>
</body>
</html>
Burada, önceki sayfayla aynı bir şey var; tek fark, VBScript dilinin yerine Javascript dilinin kullanılmış olmasıdır. Bu dilin avantajı, hem IE hem de Netscape tarayıcıları tarafından kabul edilmesidir. Bu kodun çalıştırılması aynı sonuçları verir:
Testler
-
Apache sunucusu
-
js1.html komut dosyası, <apache-DocumentRoot> içinde
-
IE veya Netscape tarayıcısıyla http://localhost/js1.html URL'sini çağırma
-
PWS sunucusu
-
<pws-DocumentRoot> içindeki js1.html betiği
-
IE veya Netscape tarayıcısıyla http://localhost/js1.html URL'sini çağırın
2.7. İ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 var.
2.7.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 birbiriyle 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 şöyledir:
Fiziksel bir ortam üzerinden bitlerin 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). | |
Fiziksel katmanın fiziksel özelliklerini gizler. İletim hatalarını algılar ve düzeltir. | |
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. | |
Ö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. | |
Bu katmanda, bir uygulamanın uzak bir makinede bir çalışma oturumu açmasına ve sürdürmesine olanak tanıyan hizmetler bulunur. | |
Bu katman, farklı makinelerdeki 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. | |
Bu aşamada, genellikle e-posta veya dosya aktarımı gibi kullanıcıya yakın uygulamalar bulunur. |
2.7.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 yer alır ve bu nedenle 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; makineler birbirlerini anlamak 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ı
- isteklerini belirtmek için 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. Resimler 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, 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ındaki 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.7.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?
2.7.3.1. Bir HTTP sunucusunun yanıtı
Burada bir web sunucusunun istemcilerin isteklerine nasıl yanıt verdiğini inceleyeceğiz. 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ısı, gönderdiği URL isteğinde bu bağlantı noktasını belirtmek zorunda kalır. Bir URL isteği genel olarak şu şekildedir:
protokol://[:port] makinesi/yol/bilgi
burada
protokol | web hizmeti için http'dir. Bir tarayıcı, ftp, news, telnet gibi hizmetler için de istemci olarak kullanılabilir. |
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 bağlantısı açmak, 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 HTTP web protokolünü 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 web sunucusu arasındaki veri alışverişini incelemek için, genel amaçlı bir TCP istemcisi kullanacağız. Bu program, HTTP protokolünde olduğu gibi metin satırlarına dayalı bir iletişim protokolüne sahip herhangi bir hizmetin istemcisi olarak kullanılabilir. Bu metin satırları kullanıcı tarafından klavye üzerinden girilecektir. Bunun için kullanıcının, erişmek istediği hizmetin iletişim protokolünü bilmesi gerekir. Sunucunun yanıtı daha sonra ekranda görüntülenir. Program Java ile yazılmıştır ve ekte yer almaktadır. Burada Windows ortamında bir DOS penceresinde kullanıyoruz ve şu şekilde çalıştırıyoruz:
java clientTCPgenerique machine port
ile
machine | bağlanılacak hizmetin çalıştığı makinenin adı |
port | hizmetin sunulduğu bağlantı noktası |
Bu iki bilgiyle program, belirtilen makine ve bağlantı noktası üzerinden TCP-IP bağlantısını açacaktır. Bu bağlantı, istemci ile web sunucusu arasında metin satırlarının alışverişi için kullanılacaktır. İstemciden gelen satırlar, kullanıcı tarafından klavyeyle yazılır ve sunucuya gönderilir. Sunucu tarafından yanıt olarak geri gönderilen metin satırları ekranda görüntülenir. Böylece, klavyeyi kullanan kullanıcı ile web sunucusu arasında doğrudan bir diyalog kurulabilir. Daha önce sunulan örnekler üzerinde bunu deneyelim. Aşağıdaki statik HTML sayfasını oluşturmuştuk:
<html>
<head>
<title>essai 1 : une page statique</title>
</head>
<body>
<center>
<h1>Une page statique...</h1>
</body>
</html>
ve bunu bir tarayıcıda görüntülediğimizde:
Görüldüğü gibi, istenen URL şudur: http://localhost:81/essais/essai1.html. Dolayısıyla web servisinin sunucusu localhost (=yerel sunucu) ve bağlantı noktası 81'dir. Bu web sayfasındaki HTML metnini görüntülemek istersek (Görünüm/Kaynak), başlangıçta oluşturulan HTML metnini buluruz:
Şimdi, aynı URL metnini istemek için genel amaçlı TCP istemcimizi kullanalım:
Dos>java clientTCPgenerique localhost 81
Commandes :
GET /essais/essai1.html HTTP/1.0
<-- HTTP/1.1 200 OK
<-- Date: Mon, 08 Jul 2002 08:07:46 GMT
<-- Server: Apache/1.3.24 (Win32) PHP/4.2.0
<-- Last-Modified: Mon, 08 Jul 2002 08:00:30 GMT
<-- ETag: "0-a1-3d29469e"
<-- Accept-Ranges: bytes
<-- Content-Length: 161
<-- Connection: close
<-- Content-Type: text/html
<--
<-- <html>
<-- <head>
<-- <title>essai 1 : une page statique</title>
<-- </head>
<-- <body>
<-- <center>
<-- <h1>Une page statique...</h1>
<-- </body>
<-- </html>
java clientTCPgenerique localhost 81 komutuyla istemci başlatıldığında, program ile aynı makinede (localhost) ve 81 numaralı bağlantı noktasında çalışan web sunucusu arasında bir bağlantı kuruldu. HTTP biçimindeki istemci-sunucu iletişimi başlayabilir. Bu iletişimin üç bileşeni olduğunu hatırlatmak isteriz:
- HTTP başlıkları
- boş satır
- isteğe bağlı veriler
Örneğimizde, istemci yalnızca bir istek gönderir:
GET /essais/essai1.html HTTP/1.0
Bu satır üç bileşenden oluşur:
HTTP komutu, bir kaynağı talep eder. Başka komutlar da vardır: HEAD, bir kaynağı ister ancak bunu sunucunun yanıtındaki HTTP başlıklarıyla sınırlar. Kaynağın kendisi gönderilmez. PUT, istemcinin sunucuya bir belge göndermesini sağlar | |
istenen kaynak | |
Kullanılan HTTP protokol seviyesi. Burada 1.0. Bu, sunucunun yanıtını gönderir göndermez bağlantıyı kapatacağı anlamına gelir |
HTTP başlıklarının ardından her zaman boş bir satır gelmelidir. Müşteri burada bunu yapmıştır. Müşteri veya sunucu, alışverişin HTTP kısmının bittiğini bu şekilde anlar. Burada istemci için işlem tamamlanmıştır. Gönderecek bir belgesi yoktur. Ardından, örneğimizde <-- işaretiyle başlayan tüm satırlardan oluşan sunucu yanıtı başlar. Önce bir dizi HTTP başlığı gönderir ve ardından bir boş satır gelir:
<-- HTTP/1.1 200 OK
<-- Date: Mon, 08 Jul 2002 08:07:46 GMT
<-- Server: Apache/1.3.24 (Win32) PHP/4.2.0
<-- Last-Modified: Mon, 08 Jul 2002 08:00:30 GMT
<-- ETag: "0-a1-3d29469e"
<-- Accept-Ranges: bytes
<-- Content-Length: 161
<-- Connection: close
<-- Content-Type: text/html
<--
sunucu şunu söylüyor
| |
yanıtın tarihi/saati | |
sunucunun kimliği. Burada bir Apache sunucusu söz konusudur | |
istemci tarafından talep edilen kaynağın son değiştirilme tarihi | |
... | |
Gönderilen verilerin ölçü birimi. Burada bayt (byte) | |
HTTP başlıklarından sonra gönderilecek belgenin bayt sayısı. Bu sayı aslında essai1.html dosyasının bayt cinsinden boyutudur: | |
sunucu, belge gönderildikten sonra bağlantıyı keseceğini söylüyor | |
sunucu, HTML (html) biçiminde metin (text) göndereceğini bildiriyor. |
İstemci bu başlıkları alır ve artık bir HTML belgesini temsil eden 161 bayt alacağını bilir. Sunucu, başlıkların sonunu belirten boş satırın hemen ardından bu 161 baytı gönderir:
<-- <html>
<-- <head>
<-- <title>essai 1 : une page statique</title>
<-- </head>
<-- <body>
<-- <center>
<-- <h1>Une page statique...</h1>
<-- </body>
<-- </html>
Burada, başlangıçta oluşturulan HTML dosyasını görüyoruz. İstemcimiz bir tarayıcı olsaydı, bu metin satırlarını aldıktan sonra bunları yorumlayarak klavyeyi kullanan kullanıcıya aşağıdaki sayfayı gösterirdi:
Aynı kaynağı istemek için genel amaçlı TCP istemcimizi bir kez daha kullanalım, ancak bu sefer yalnızca yanıt başlıklarını isteyen HEAD komutunu kullanarak:
Dos>java.bat clientTCPgenerique localhost 81
Commandes :
HEAD /essais/essai1.html HTTP/1.1
Host: localhost:81
<-- HTTP/1.1 200 OK
<-- Date: Mon, 08 Jul 2002 09:07:25 GMT
<-- Server: Apache/1.3.24 (Win32) PHP/4.2.0
<-- Last-Modified: Mon, 08 Jul 2002 08:00:30 GMT
<-- ETag: "0-a1-3d29469e"
<-- Accept-Ranges: bytes
<-- Content-Length: 161
<-- Content-Type: text/html
<--
HTML belgesi olmadan da önceki ile aynı sonucu elde ediyoruz. Müşterinin HEAD talebinde, HTTP protokolünün 1.1 sürümünü kullandığını belirttiğini not edelim. Bu durum, müşterinin sorgulamak istediği machine:port çiftini belirten ikinci bir HTTP başlığı göndermesini gerektirir: Host: localhost:81.
Şimdi hem bir tarayıcı hem de genel amaçlı TCP istemcisiyle bir resim isteyelim. Öncelikle bir tarayıcıyla:
univ01.gif dosyası 3167 bayt büyüklüğündedir:
Şimdi genel amaçlı TCP istemcisini kullanalım:
E:\data\serge\JAVA\SOCKETS\client générique>java clientTCPgenerique localhost 81
Commandes :
HEAD /images/univ01.gif HTTP/1.1
host: localhost:81
<-- HTTP/1.1 200 OK
<-- Date: Tue, 09 Jul 2002 13:53:24 GMT
<-- Server: Apache/1.3.24 (Win32) PHP/4.2.0
<-- Last-Modified: Fri, 14 Apr 2000 11:37:42 GMT
<-- ETag: "0-c5f-38f70306"
<-- Accept-Ranges: bytes
<-- Content-Length: 3167
<-- Content-Type: image/gif
<--
Sunucunun yanıtında aşağıdaki noktalara dikkat edilmelidir:
| |
| |
|
2.7.3.2. Bir HTTP istemcisinin isteği
Şimdi şu soruyu soralım: Bir web sunucusuyla “iletişim kuran” bir program yazmak istiyorsak, belirli bir kaynağı elde etmek için programın web sunucusuna hangi komutları göndermesi gerekir? Önceki örneklerde bu sorunun cevabının bir kısmını bulduk. Üç komutla karşılaştık:
| |
| |
|
Başka komutlar da mevcuttur. Bunları keşfetmek için şimdi genel bir TCP sunucusu kullanacağız. Bu, Java ile yazılmış bir programdır ve onu da ekte bulabilirsiniz. Şu komutla çalıştırılır: java serveurTCPgenerique portEcoute; burada portEcoute, istemcilerin bağlanması gereken bağlantı noktasıdır. serveurTCPgenerique programı
- müşteriler tarafından gönderilen komutları ekrana yansıtır
- onlara yanıt olarak bir kullanıcının klavyeden girdiği metin satırlarını gönderir. Dolayısıyla sunucu rolünü üstlenen bu kullanıcıdır. Örneğimizde, klavyeyi kullanan kullanıcı bir web hizmeti rolünü üstlenecektir.
Şimdi, genel sunucumuzu 88 numaralı bağlantı noktasında çalıştırarak bir web sunucusunu simüle edelim:
Dos> java serveurTCPgenerique 88
Serveur générique lancé sur le port 88
Şimdi bir tarayıcı açalım ve URL adresindeki http://localhost:88/exemple.html sayfasını isteyelim. Tarayıcı, localhost makinesinin 88 bağlantı noktasına bağlanacak ve ardından /exemple.html sayfasını isteyecektir:
Şimdi, istemcinin sunucuya gönderdiği verileri gösteren sunucu penceremize bakalım (basitlik amacıyla, serveurTCPgenerique programının çalışmasına özgü bazı satırlar atlanmıştır):
Dos>java serveurTCPgenerique 88
Serveur générique lancé sur le port 88
...
<-- GET /exemple.html HTTP/1.1
<-- Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/msword, */*
<-- Accept-Language: fr
<-- Accept-Encoding: gzip, deflate
<-- User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.0.3705; .NET CLR 1.0.2 914)
<-- Host: localhost:88
<-- Connection: Keep-Alive
<--
<-- işaretiyle başlayan satırlar, istemci tarafından gönderilen satırlardır. Böylece, daha önce karşılaşmadığımız HTTP başlıklarını görüyoruz:
| |
| |
| |
| |
|
Tarayıcı tarafından gönderilen HTTP başlıkları, beklendiği gibi boş bir satırla sona erer.
Müşterimize bir yanıt hazırlayalım. Burada klavyeyi kullanan kullanıcı asıl sunucudur ve yanıtı elle hazırlayabilir. Önceki örnekte bir web sunucusu tarafından verilen yanıtı hatırlayalım:
<-- HTTP/1.1 200 OK
<-- Date: Mon, 08 Jul 2002 08:07:46 GMT
<-- Server: Apache/1.3.24 (Win32) PHP/4.2.0
<-- Last-Modified: Mon, 08 Jul 2002 08:00:30 GMT
<-- ETag: "0-a1-3d29469e"
<-- Accept-Ranges: bytes
<-- Content-Length: 161
<-- Connection: close
<-- Content-Type: text/html
<--
<-- <html>
<-- <head>
<-- <title>essai 1 : une page statique</title>
<-- </head>
<-- <body>
<-- <center>
<-- <h1>Une page statique...</h1>
<-- </body>
<-- </html>
Benzer bir yanıtı elle (klavyeyle) oluşturmaya çalışalım. --> : ile başlayan satırlar müşteriye gönderilir:
...
<-- Host: localhost:88
<-- Connection: Keep-Alive
<--
--> : HTTP/1.1 200 OK
--> : Server: serveur tcp generique
--> : Connection: close
--> : Content-Type: text/html
--> :
--> : <html>
--> : <head><title>Serveur generique</title></head>
--> : <body>
--> : <center>
--> : <h2>Reponse du serveur generique</h2>
--> : </center>
--> : </body>
--> : </html>
fin
fin komutu, serveurTCPgenerique programının çalışmasına özgüdür. Bu komut, programın yürütülmesini durdurur ve sunucu ile istemci arasındaki bağlantıyı sonlandırır. Yanıtımızda aşağıdaki HTTP başlıklarıyla sınırlı kaldık:
HTTP/1.1 200 OK
--> : Server: serveur tcp generique
--> : Connection: close
--> : Content-Type: text/html
--> :
Göndereceğimiz dosyanın boyutunu (Content-Length) belirtmiyoruz, ancak dosyayı gönderdikten sonra bağlantıyı kapatacağımızı (Connection: close) söylüyoruz. Bu, tarayıcı için yeterlidir. Bağlantının kapandığını görünce, tarayıcı sunucudan gelen yanıtın tamamlandığını anlayacak ve kendisine gönderilen HTML sayfasını görüntüleyecektir. Bu sayfa şöyledir:
--> : <html>
--> : <head><title>Serveur generique</title></head>
--> : <body>
--> : <center>
--> : <h2>Reponse du serveur generique</h2>
--> : </center>
--> : </body>
--> : </html>
Tarayıcı daha sonra şu sayfayı görüntüler:
Yukarıdaki örnekte, tarayıcının ne aldığını görmek için View/Source komutunu çalıştırırsak şu sonucu elde ederiz:
yani genel sunucudan gönderdiğimizin aynısı.
2.8. HTML dili
Bir web tarayıcısı çeşitli belgeleri görüntüleyebilir; en yaygın olanı HTML (HyperText İşaretleme Dili) belgesidir. Bu, <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 tek tek 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 Word, FrontPage, DreamWeaver ve onlarca diğer web sayfası oluşturma yazılımı kullanılarak edinilebilir. HTML dilinin inceliklerini keşfetmenin bir başka yolu da, internette gezinerek ilginç ve sizin için henüz bilinmeyen özellikler barındıran sayfaların kaynak kodlarını incelemektir.
2.8.1. Bir örnek
Internet Explorer ile birlikte gelen ücretsiz bir araç olan FrontPage Express ile oluşturulan aşağıdaki örneği ele alalım. Burada Frontpage tarafından oluşturulan kod sadeleştirilmiştir. Bu örnek, bir web belgesinde bulunabilecek bazı öğeleri göstermektedir; örneğin:
- bir tablo
- bir resim
- bir bağlantı
Bir HTML belgesi genel olarak şu şekildedir:
Belgenin tamamı <html>...</html> etiketleri ile çevrelenmiştir. Belge iki bölümden oluşur:
- <head>...</head>: Bu, belgenin görüntülenmeyen kısmıdır. Bu kısım, belgeyi görüntüleyecek tarayıcıya bilgi sağlar. Burada genellikle, tarayıcının başlık çubuğunda görüntülenecek metni belirleyen <title>...</title> etiketleri bulunur. Ayrıca, belgenin anahtar kelimelerini tanımlayan ve daha sonra arama motorları tarafından kullanılan 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:
<html>
<head>
<title>balises</title>
</head>
<body background="/images/standard.jpg">
<center>
<h1>Les balises HTML</h1>
<hr>
</center>
<table border="1">
<tr>
<td>cellule(1,1)</td>
<td valign="middle" align="center" width="150">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>
</table>
<table border="0">
<tr>
<td>Une image</td>
<td><img border="0" src="/images/univ01.gif" width="80" height="95"></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>
Kodda sadece bizi ilgilendiren noktalar vurgulanmıştır:
Etiket | etiketler ve örnekler HTML |
<title>balises</title> balises, belgeyi görüntüleyen tarayıcının başlık çubuğunda görünecektir | |
<hr>: yatay bir çizgi görüntüler | |
<table öznitelikleri>....</table>: tabloyu tanımlamak için <tr öznitelikler>...</tr> : bir satır tanımlamak için <td öznitelikler>...</td> : bir hücre tanımlamak için örnekler: <table border="1">...</table> : border özniteliği, tablonun kenarlığının kalınlığını belirler <td valign="middle" align="center" width="150">hücre(1,2)</td> : içeriği hücre(1,2) olacak bir hücre tanımlar. Bu içerik dikey olarak (valign="middle") ve yatay olarak (align="center") ortalanır. Hücrenin genişliği 150 piksel olacaktır (width="150") | |
<img border="0" src="/images/univ01.gif" width="80" height="95"> : kenarlığı olmayan (border="0"), yüksekliği 95 piksel (height="95"), genişliği 80 piksel (width="80") olan ve kaynak dosyası web sunucusunda /images/univ01.gif adresinde bulunan (src="/images/univ01.gif") bir resim tanımlar. Bu bağlantı, URL http://localhost:81/html/balises.htm 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:81/images/univ01.gif adresindeki URL dosyasını isteyecektir. | |
<a href="http://istia.univ-angers.fr">burada</a>: ici metninin URL http://istia.univ-angers.fr adresine bir bağlantı olarak işlev görmesini sağlar. | |
<body background="/images/standard.jpg"> : sayfa arka planı olarak kullanılacak resmin, web sunucusundaki /images/standard.jpg adresinde bulunduğunu belirtir. Örneğimizde, tarayıcı bu arka plan resmini almak için http://localhost:81/images/standard.jpg adresindeki URL dosyasını isteyecektir. |
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:81/html/balises.htm adresine, belgenin HTML kaynağını almak için
- http://localhost:81/images/univ01.gif adresinden univ01.gif resmini almak için
- http://localhost:81/images/standard.jpg, standard.jpg arka plan görüntüsünü almak için
Aşağıdaki örnek, yine FrontPage ile oluşturulmuş bir web formunu göstermektedir.
FrontPage tarafından oluşturulan ve biraz sadeleştirilmiş HTML kodu şöyledir:
<html>
<head>
<title>balises</title>
<script language="JavaScript">
function effacer(){
alert("Vous avez cliqué sur le bouton Effacer");
}//sil
</script>
</head>
<body background="/images/standard.jpg">
<form method="POST" >
<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>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>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>choix1</option>
<option selected>choix2</option>
<option>choix3</option>
</select>
</td>
</tr>
<tr>
<td>liste à choix simple</td>
<td>
<select size="3" name="lst1">
<option selected>liste1</option>
<option>liste2</option>
<option>liste3</option>
<option>liste4</option>
<option>liste5</option>
</select>
</td>
</tr>
<tr>
<td>liste à choix multiple</td>
<td>
<select size="3" name="lst2" multiple>
<option>liste1</option>
<option>liste2</option>
<option selected>liste3</option>
<option>liste4</option>
<option>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>
<--> HTML etiketiyle görsel kontrol eşleşmesi şu şekildedir:
Denetim | HTML etiketi |
<form method="POST" > | |
<input type="text" name="txtSaisie" size="20" value="birkaç kelime"> | |
<input type="password" name="txtMdp" size="20" value="unMotDePasse"> | |
<textarea rows="2" name="areaSaisie" cols="20"> satır1 satır2 satır3 </textarea> | |
<input type="radio" value="Evet" name="R1">Evet <input type="radio" name="R1" value="hayır" checked>Hayır | |
<input type="checkbox" name="C1" value="bir">1 <input type="checkbox" name="C2" value="iki" checked>2 <input type="checkbox" name="C3" value="üç">3 | |
<select size="1" name="cmbValeurs"> <option>seçenek1</option> <option selected>seçenek2</option> <option>seçenek3</option> </select> | |
<select size="3" name="lst1"> <option selected>liste1</option> <option>liste2</option> <option>liste3</option> <option>liste4</option> <option>liste5</option> </select> | |
<select size="3" name="lst2" multiple> <option>liste1</option> <option>liste2</option> <option selected>liste3</option> <option>liste4</option> <option>liste5</option> </select> | |
<input type="submit" value="Gönder" name="cmdRenvoyer"> | |
<input type="reset" value="Sıfırla" name="cmdRétablir"> | |
<input type="button" value="Sil" name="cmdEffacer" onclick="effacer()"> |
Bu farklı denetimleri tek tek inceleyelim.
2.8.1.1. Form
<form method="POST" > |
<form name="..." method="..." action="...">...</form> | |
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. Bu ad, web belgesinde form öğelerine başvurması gereken komut dosyaları varsa yararlıdır. Bir formun amacı, kullanıcının klavye/fare ile girdiği bilgileri toplamak ve bunları bir web sunucusundaki URL adresine göndermektir. Hangi adrese? action="URL" özniteliğinde belirtilen adrese. Bu öznitelik yoksa, bilgiler formun bulunduğu belgenin sunucusuna gönderilir. Yukarıdaki örnekte durum budur. Şimdiye kadar, web istemcisini her zaman bir web sunucusundan bilgi “isteyen” bir varlık olarak gördük, asla ona bilgi “veren” bir varlık olarak değil. Bir web istemcisi, web sunucusuna (formda bulunan) bilgileri nasıl verir? Buna biraz ileride ayrıntılı olarak değineceğiz. POST ve GET adlı iki farklı yöntem kullanabilir. method="méthode" özniteliği, yöntemi GET veya POST olan <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.8.1.2. Giriş alanı
<input type="text" name="txtSaisie" size="20" value="birkaç kelime"> <input type="password" name="txtMdp" size="20" value="unMotDePasse"> |
<input type="..." name="..." size=".." value=".."> input etiketi çeşitli denetimler için mevcuttur. Bu farklı denetimleri birbirinden ayıran şey type özniteliğidir. | |
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.8.1.3. Çok satırlı giriş alanı
<textarea rows="2" name="areaSaisie" cols="20"> ligne1 ligne2 ligne3 </textarea> |
<textarea ...>metin</textarea> içinde başlangıçta metin bulunan çok satırlı bir giriş alanı görüntüler | |
rows="2": satır sayısı cols="'20" : sütun sayısı name="areaSaisie": denetimin adı |
2.8.1.4. Radyo düğmeleri
<input type="radio" value="Evet" name="R1">Evet <input type="radio" name="R1" value="hayır" checked>Hayır |
<input type="radio" attribut2="valeur2" ....>metin yanında metin bulunan bir radyo düğmesi görüntüler. | |
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: Bu anahtar kelime varsa, radyo düğmesi işaretlenir; yoksa işaretlenmez. |
2.8.1.5. Onay kutuları
<input type="checkbox" name="C1" value="bir">1 <input type="checkbox" name="C2" value="iki" checked>2 <input type="checkbox" name="C3" value="üç">3 |
<input type="checkbox" attribut2="valeur2" ....>metin yanında metin bulunan bir onay kutusu görüntüler. | |
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: Bu anahtar kelime varsa, radyo düğmesi işaretlenir; yoksa işaretlenmez. |
2.8.1.6. Açılır liste (combo)
<select size="1" name="cmbValeurs"> <option>choix1</option> <option selected>seçim2</option> <option>choix3</option> </select> |
<select size=".." name=".."> <option [selected]>...</option> ... </select> <option>...</option> etiketleri arasında yer alan metinleri bir liste halinde görüntüler | |
name="cmbValeurs" : kontrolün adı. size="1": görünür liste öğelerinin sayısı. size="1", listeyi bir açılır listeyle eşdeğer hale getirir. 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, kombo kutusu ilk kez görüntülendiğinde seçili öğe olarak görünür. |
2.8.1.7. Tek seçimli liste
<select size="3" name="lst1"> <option selected>liste1</option> <option>liste2</option> <option>liste3</option> <option>liste4</option> <option>liste5</option> </select> |
<select size=".." name=".."> <option [selected]>...</option> ... </select> <option>...</option> etiketleri arasındaki metinleri bir listede görüntüler | |
etiketleri arasında yer alan metinleri bir liste halinde görüntüler; bu, yalnızca bir öğe görüntüleyen 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.8.1.8. Çoklu seçim listesi
<select size="3" name="lst2" multiple> <option selected>liste1</option> <option>liste2</option> <option selected>liste3</option> <option>liste4</option> <option>liste5</option> </select> |
<select size=".." name=".." multiple> <option [selected]>...</option> ... </select> <option>...</option> etiketleri arasındaki metinleri bir listede görüntüler | |
multiple: listeden birden fazla öğenin seçilmesine olanak tanır. Yukarıdaki örnekte, liste1 ve liste3 öğelerinin her ikisi de seçilmiştir. |
2.8.1.9. button türü düğme
<input type="button" value="Sil" name="cmdEffacer" onclick="effacer()"> |
<input type="button" value="..." name="..." onclick="effacer()" ....> | |
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, 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: effacer işlevi şu mesajı görüntüler:  |
2.8.1.10. Gönder düğmesi
<input type="submit" value="Gönder" name="cmdRenvoyer"> |
<input type="submit" value="Gönder" name="cmdRenvoyer"> | |
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.8.1.11. Sıfırlama düğmesi
<input type="reset" value="Sıfırla" name="cmdRétablir"> |
<input type="reset" value="Sıfırla" name="cmdRétablir"> | |
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üğme üzerinde görüntülenen metin |
2.8.1.12. Gizli alan
<input type="hidden" name="secret" value="uneValeur"> |
<input type="hidden" name="..." value="..."> | |
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 kullanıcının 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 ve art1 numaralı ürünleri 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 kullanıcı tarafından değiştirilemeyen gizli bir 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ştirecek ve yeni bir katalog sayfası gönderecektir. Ve bu şekilde devam eder. |
2.8.2. Bir web istemcisi tarafından 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. Önceki örneği tekrar ele alalım ve şu şekilde işleyelim:
- Bir tarayıcı, örnekteki URL formunu bir web sunucusundan ister
- formu aldıktan sonra, formu dolduruyoruz
- submit türündeki Envoyer düğmesine tıklayarak form değerlerini web sunucusuna göndermeden önce, web sunucusunu durdurup daha önce kullanılmış olan genel TCP sunucusuyla değiştiriyoruz. Bu sunucunun, web istemcisinden gelen metin satırlarını ekranda görüntülediğini hatırlayalım. Böylece tarayıcının tam olarak ne gönderdiğini görebileceğiz.
Form şu şekilde doldurulur:
Bu belge için kullanılan URL şöyledir:
2.8.2.1. GET yöntemi
HTML belgesi, tarayıcının form değerlerini web sunucusuna göndermek için GET yöntemini kullanacak şekilde programlanmıştır. Bu nedenle şunu yazdık:
Web sunucusunu durduruyoruz ve 81 numaralı bağlantı noktasında genel amaçlı TCP sunucumuzu başlatıyoruz:
E:\data\serge\JAVA\SOCKETS\serveur générique>java serveurTCPgenerique 81
Serveur générique lancé sur le port 81
Şimdi tarayıcımıza geri dönüp Envoyer düğmesini kullanarak form verilerini web sunucusuna gönderiyoruz:
İşte genel TCP sunucusunun aldığı veriler:
<-- GET /html/balises.htm?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&area
Saisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&
cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
<-- Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/msword, application/vnd
.ms-powerpoint, application/vnd.ms-excel, */*
<-- Referer: http://localhost:81/html/balises.htm
<-- Accept-Language: fr
<-- Accept-Encoding: gzip, deflate
<-- User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.0.3705)
<-- Host: localhost:81
<-- Connection: Keep-Alive
<--
Her şey, tarayıcı tarafından gönderilen ilk başlıkta (HTTP) yer almaktadır:
<-- GET /html/balises.htm?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&area
Saisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&
cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
Görüldüğü gibi, bu şimdiye kadar karşılaşılanlardan çok daha karmaşıktır. Burada GET URL HTTP/1.1 sözdizimini görüyoruz, ancak bu, GET URL?param1=değer1¶m2=değer2&... HTTP/1.1 burada parami, web formundaki denetimlerin adları; değerler ise bunlara atanan değerlerdir. Bunları daha yakından inceleyelim. 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>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>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ının giriş alanına yazdığı 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>seçim1</option> <seçili seçenek>seçenek2</option> <option>seçenek3</option> </select> |  | cmbDeğerler=seçim3 - tek seçimli listeden kullanıcı tarafından seçilen değer |
<select size="3" name="lst1"> <option selected>liste1</option> <option>liste2</option> <option>liste3</option> <option>liste4</option> <option>liste5</option> </select> |  | lst1=liste3 - tek seçimli listeden kullanıcı tarafından seçilen değer |
<select size="3" name="lst2" multiple> <option selected>liste1</option> <option>liste2</option> <option selected>liste3</option> <option>liste4</option> <option>liste5</option> </select> |  | lst2=liste1 lst2=liste3 - kullanıcı tarafından çoklu seçim listesinden seçilen değerler |
<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 |
Aynı işlemi tekrar yapalım, ancak bu sefer yanıtı oluşturmak için web sunucusunu kullanalım ve yanıtın ne olduğunu görelim. Web sunucusu tarafından gönderilen sayfa şöyledir:
Bu, form doldurulmadan önce başlangıçta alınan sayfayla tamamen aynıdır. Bunun nedenini anlamak için, kullanıcı Envoyer düğmesine bastığında tarayıcı tarafından istenen URL'e tekrar bakmak gerekir:
<-- GET /html/balises.htm?R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&area
Saisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&
cmdRenvoyer=Envoyer&secret=uneValeur HTTP/1.1
İstenen URL, /html/balises.htm'tir. Ayrıca, bu URL'e formdaki değerler aktarılır. Şu anda, statik bir sayfa olan /html/balises.htm adresindeki URL bu değerleri kullanmıyor. Dolayısıyla, önceki GET şu adrese eşdeğerdir:
ile eşdeğerdir ve bu nedenle sunucu bize tekrar başlangıç sayfasını geri gönderdi. Tarayıcının, talep edilen URL sayfasını eksiksiz olarak görüntülediği dikkatinizi çekecektir:
2.8.2.2. POST yöntemi
HTML belgesi, tarayıcının artık form değerlerini web sunucusuna göndermek için POST yöntemini kullanması üzere programlanmıştır:
Web sunucusunu durduruyoruz ve 81 numaralı bağlantı noktasında genel amaçlı TCP sunucusunu (daha önce karşılaştığımız, ancak bu durum için biraz değiştirilmiş olan) başlatıyoruz:
E:\data\serge\JAVA\SOCKETS\serveur générique>java serveurTCPgenerique2 81
Serveur générique lancé sur le port 81
Şimdi tarayıcımıza geri dönüp “Gönder” düğmesini kullanarak form verilerini web sunucusuna gönderiyoruz:
İşte genel TCP sunucusunun aldığı veriler:
<-- POST /html/balises.htm HTTP/1.1
<-- Accept: image/gif, image/x-xbitmap, image/jpeg, image/pjpeg, application/msword, application/vnd
.ms-powerpoint, application/vnd.ms-excel, */*
<-- Referer: http://localhost:81/html/balises.htm
<-- Accept-Language: fr
<-- Content-Type: application/x-www-form-urlencoded
<-- Accept-Encoding: gzip, deflate
<-- User-Agent: Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1.0.3705)
<-- Host: localhost:81
<-- Content-Length: 210
<-- Connection: Keep-Alive
<-- Cache-Control: no-cache
<--
<-- R1=Oui&C1=un&C2=deux&txtSaisie=programmation+web&txtMdp=ceciestsecret&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web&cmbValeurs=choix3&lst1=liste3&lst2=liste1&lst2=liste3&cmdRenvoyer=Envoyer&secret=uneValeur
Daha önce bildiklerimize kıyasla, tarayıcı isteğinde şu değişiklikleri gözlemliyoruz:
- Başlangıçtaki HTTP başlığı artık GET değil, POST olarak görünüyor. Sözdizimi şöyledir: POST URL HTTP/1.1; burada URL, tarayıcı tarafından istenen URL'tir. Aynı zamanda, POST, tarayıcının sunucuya ileteceği veriler olduğu anlamına gelir.
- Content-Type: application/x-www-form-urlencoded satırı, tarayıcının hangi tür verileri göndereceğini belirtir. Bunlar, URL kodlamasına tabi tutulmuş form verileridir (x-www-form). Bu kodlama, sunucunun verileri yanlış yorumlamasını önlemek amacıyla iletilen verilerdeki bazı karakterlerin dönüştürülmesini sağlar. Böylece, boşluk karakteri + ile, satır sonu işareti ise %OD%OA... ile değiştirilir. Genel olarak, verilerde bulunan ve sunucu tarafından yanlış yorumlanabilecek tüm karakterler (&, +, %, ...) %XX şeklinde dönüştürülür; burada XX, karakterlerin onaltılık kodudur.
- Content-Length: 210 satırı, başlıkların sonunu belirten boş satırdan sonra, HTTP başlıklarının tamamlanmasının ardından istemcinin sunucuya kaç karakter göndereceğini belirtir.
- Veriler (210 karakter): R1=Evet&C1=bir&C2=iki&txtSaisie=web+programlama&txtMdp=bu+gizlidir&areaSaisie=temeller+%0D%0Aweb+programlama&cmbValeurs=seçim3&lst1=liste3&lst2=liste1&lst2=liste3&cmdRenvoyer=Gönder&secret=uneValeur
POST tarafından iletilen verilerin, GET tarafından iletilen verilerle aynı formatta olduğu görülmektedir.
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önderildiğinde, tarayıcının Adresse alanında, istenen URL değerini URL?param1=val1¶m2=val2&... biçiminde görüntülediğini gördük. Bunu bir avantaj ya da dezavantaj olarak görebiliriz:
- kullanıcının bu ayarlanmış URL bağlantısını sık kullanılanlarına eklemesine izin vermek istiyorsak bir avantaj
- kullanıcıların, örneğin gizli alanlar gibi formdaki belirli bilgilere erişmesini istemiyorsak, bu bir dezavantajdır
Bundan sonra, formlarımızda neredeyse tamamen POST yöntemini kullanacağız.
2.8.2.3. Bir web formundaki değerlerin alınması
POST veya GET yoluyla parametreler de gönderen bir istemci tarafından talep edilen statik bir sayfa, bu parametreleri hiçbir şekilde alamaz. Bunu yalnızca bir program yapabilir ve bu program, müşteriye bir yanıt oluşturmakla görevlendirilir; bu yanıt dinamik olacak ve genellikle alınan parametrelere bağlı olacaktır. Bu, web programlamasının alanına girer; bu konuyu, bir sonraki bölümde web programlama için Java teknolojileri olan servletler ve JSP sayfalarının tanıtımıyla daha ayrıntılı olarak ele alacağız.