5. Kullanıcı Arayüzü Yönetimi
5.1. Introduction
Web'deki istemci-sunucu ilişkisinde, istemci bilgileri parametre dizisi biçiminde sunucuya iletir [param1=val1¶m2=val2&...]. Önceki örneklerimizde, bu diziyi çoğunlukla [http://localhost/appli? param1=val1¶m2=val2&...] biçimindeki URL'leri çağırarak elle oluşturmuştuk. Gerçekte ise, istemcinin sunucuya ilettiği bilgiler, kullanıcının doldurduğu formlardan gelir. Bu bölümde bu formların oluşturulmasını inceleyeceğiz. Ayrıca, kullanıcı arayüzlerini tasarlamamıza olanak sağlayacak WebMatrix aracını da tanıtacağız. Bu aracın kurulumu eklerde anlatılmıştır.
5.2. HTML dili
5.2.1. Bir örnek
[Web Matrix] ile oluşturulan ve aşağıdakileri içeren şu örneği ele alalım:
- bir tablo
- bir resim
- bir bağlantı
[WebMatrix]'i çalıştıralım ve ardından [File/New File] seçeneğini seçelim:
HTML adlı bir sayfa oluşturmayı seçiyoruz. Yukarıdaki bilgiler bir [d:\data\devel\aspnet\chap4\exemple1\exemple1.htm] dosyası oluşturacaktır. [WebMatrix], bu dosyayı düzenlemek için iki seçenek sunar: [Design] modu ve [HTML] modu:
[Design] modu, [WebMatrix] tarafından sunulan HTML bileşen paletini kullanmanıza olanak tanır:
Bu paletten bir öğeyi eklemek için, üzerine çift tıklayıp ardından [Design] penceresine yerleştirmek yeterlidir. [HTML] modu, bir metin düzenleyici yardımıyla HTML belgesini oluşturmanıza olanak tanır. Bunun için HTML dilinin sözdizimini bilmek gerekir. [HTML] sekmesinde bir belge iskeleti oluşturulmuştur:
[HTML] penceresi, HTML dilini bilmeyenler için çok yararlıdır. Kullanıcı, [Design] penceresinde belgesini oluşturur ve [HTML] penceresinde üretilen HTML kodunu kontrol eder. Böylelikle kullanıcı, HTML dilini aşamalı olarak öğrenir ve kısa sürede [Design] modunun yardımı olmadan sadece metin düzenleyicisiyle çalışabilir hale gelir. Şimdi, bu bölümün başında sunulan HTML belgesinin nasıl oluşturulacağını göstereceğiz. [Design] penceresinde çalışıyoruz. Öncelikle, metnin ilk satırını doğrudan giriyoruz:
- Bileşen paletine [Horizontal Rule] bileşenini ekliyoruz:
- [Table] bileşenini ekliyoruz:
- [HTML/Edit Table/Delete Table Row] seçeneğiyle tablonun üçüncü satırına imleci getirip satırı siliyoruz. Ardından her hücreye istenen metni giriyoruz:
- Tablodaki hücrelerden birine imleci yerleştirip, o hücrenin özelliklerine bakıyoruz. Özellikler penceresi, çalışma ortamının sağ alt köşesinde görüntülenir:
- Hücre, HTML <TD> etiketiyle temsil edilmektedir. Dolayısıyla, bize <TD> etiketinin özellikleri gösterilmektedir. Hücreyi çevreleyen bir nesne olan tabloya odaklanıyoruz. Yukarıdaki açılır listeye (click to see parent HTML elements) tıklayarak <TABLE> nesnesini seçiyoruz:
- <TABLE> nesnesi, tablonun hücrelerini çevreleyen kenarlığın genişliğini belirleyen [border] özelliğine sahiptir. Burada border=1 değerini alıyoruz.
- Şimdi (1,2) hücresindeki <TD> nesnesinin özniteliklerini düzenleyerek align=Center ve width=200 (piksel) değerlerini ayarlıyoruz. Metin, hücre içinde ortalanacak (align=center) ve hücrenin genişliği 200 piksel olacaktır. Değişikliği görmek için bazen [HTML] sekmesini seçip ardından [Design] sekmesine geri dönmeniz gerekebilir:
- Şimdi resmin önüne metni yerleştiriyoruz:
- ardından palettaki [image] bileşenine çift tıklayarak görüntüyü ekliyoruz:
- Özelliklerini düzenlemek için görüntüyü seçiyoruz:
- [src] özniteliğine, görüntünün bulunduğu dosyanın adını girin; burada [univ01.gif]:
- Bağlantının önüne metni yerleştiriyoruz:
- [ici] metnini [http://istia.univ-angers.fr] URL'sine yönlendiren bir bağlantı haline getiriyoruz. Bunun için metni seçip [HTML/Insert Hyperlink] seçeneğini kullanıyoruz:
- Şu sonucu elde ediyoruz:
- neredeyse bitti. [HTML] sekmesinde oluşturulan HTML koduna bakalım:
<html>
<head>
</head>
<body>
<p>
Le langage HTML - 1
</p>
<hr />
<table border="1">
<tbody>
<tr>
<td>
cellule(1,1)</td>
<td align="middle" width="200">
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>
<p>
Une image <img src="univ01.gif" />
</p>
<p>
Le site de l'istia <a href="http://istia.univ-angers.fr">ici</a>
</p>
</body>
</html>
Halletmemiz gereken birkaç ayrıntı kaldı. Öncelikle belgemize bir başlık vermek istiyoruz. [WebMatrix], bunu [Design] modunda yapmamıza izin vermiyor. [HTML] sekmesinde, <head>..</head> dizisini aşağıdaki diziyle değiştiriyoruz:
Ayrıca, [Le langage HTML - 1] metninin daha büyük harflerle yazılmasını istiyoruz. <Hi>metin</Hi> dizisi, i değerini 1'den 6'ya kadar (en büyükten en küçüğe doğru) değiştirerek metnin boyutunu belirlemeye olanak tanır. Burada H2 değerini kullanacağız. Şu dizi:
şöyle olur:
[Design] penceresi, yaptığımız değişiklikleri yansıtıyor:
Geriye sadece [View/Start] veya [F5] seçeneğini kullanarak test etmek kalıyor. [WebMatrix], [Cassini] web sunucusunu başlatmak için bazı bilgiler istiyor:
Varsayılan olarak önerilen değerleri kabul edebiliriz. [Cassini] sunucusu başlatılır ve sayfamız bir tarayıcıda görüntülenir:
Merak ettiğimiz için, [Cassini]'in hangi parametrelerle başlatıldığını kontrol edebiliriz:
[WebMatrix] ile bir HTML sayfasının oluşturulmasının temellerini anlattık. Okuyucunun başka HTML sayfaları oluşturması ve her seferinde üretilen HTML kodunu kontrol etmesi önerilir. Zamanla, [Design] modunun yardımı olmadan bir sayfa oluşturabilecek hale gelecektir. 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 verir. 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.
Önceki belgenin HTML kodu şöyleydi:
<html>
<head>
<title>HTML1</title>
</head>
<body>
<h2>Le langage HTML - 1
</h2>
<hr />
<table border="1">
<tbody>
<tr>
<td>
cellule(1,1)</td>
<td align="middle" width="200">
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>
<p>
Une image <img src="univ01.gif" />
</p>
<p>
Le site de l'istia <a href="http://istia.univ-angers.fr">ici</a>
</p>
</body>
</html>
Etiket | etiketleri ve örnekleri HTML |
<title>HTML1</title> HTML1, belgeyi görüntüleyen tarayıcının başlık çubuğunda görünecektir | |
<hr>: yatay bir çizgi gösterir | |
<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 align="center" width="200">hücre(1,2)</td> : içeriği cellule(1,2) olacak bir hücre tanımlar. Bu içerik yatay olarak ortalanır (align="center"). Hücrenin genişliği 200 piksel olacaktır (width="200") | |
<img src="univ01.gif" /> : web sunucusunda univ01.gif adlı kaynak dosyaya sahip bir resmi tanımlar (src="univ01.gif"). Bu bağlantı, URL http://localhost/exemple1.htm ile elde edilen bir web belgesinde yer almaktadır. Bu nedenle, tarayıcı burada referans verilen görüntüyü almak için http://localhost/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ı görevi görmesini sağlar. |
Bu basit örnekte görüldüğü gibi, belgenin tamamını oluşturmak için tarayıcının sunucuya iki istek göndermesi gerekir:
http://localhost/exemple1.htm, belgenin HTML kaynağını almak için
http://localhost/univ01.gif adresinden univ01.gif resmini almak için
5.2.2. Form Oluşturma
Bir HTML formunun amacı, kullanıcıya Windows'ta karşılaşılan veri giriş formlarına benzer bir bilgi giriş sayfası sunmaktır. Veri giriş formu, HTML belgesi biçiminde tarayıcıya gönderilir. Tarayıcı, formu kullanıcıya gösterir; kullanıcı formu doldurur ve ilgili düğmeyi kullanarak onaylar. Ardından tarayıcı, işlenmek üzere girilen değerleri sunucuya iletir. Formun tamamının değil, yalnızca girilen değerlerin sunucuya gönderildiğini göreceğiz. Aşağıdaki örnek, yine WebMatrix ile oluşturulmuş bir web formunu göstermektedir:
[WebMatrix] tarafından oluşturulan HTML kodu şöyledir:
<html>
<head>
<title>Formulaire</title>
<script language="javascript">
function effacer(){
alert("Vous avez cliqué sur le bouton [Effacer]");
}
</script>
</head>
<body>
<p>
Gestion d'un formulaire
</p>
<hr />
<form name="formulaire" method="post">
<table border="1">
<tr>
<td>
Etes-vous marié(e)</td>
<td>
<p align="center">
<input type="radio" value="oui" name="rdMarie" />Oui
<input type="radio" checked value="non" name="rdMarie" />Non
</p>
</td>
</tr>
<tr>
<td>
Cases à cocher
</td>
<td>
<p align="center">
<input type="checkbox" value="un" name="C1" />1
<input type="checkbox" checked value="deux" name="C2" />2
<input type="checkbox" value="trois" name="C3" />3
</p>
</td>
</tr>
<tr>
<td>
Champ de saisie</td>
<td>
<p align="center">
<input type="text" maxlength="30" value="qqs mots" name="txtSaisie" />
</p>
</td>
</tr>
<tr>
<td>
Mot de passe</td>
<td>
<p align="center">
<input type="password" maxlength="12" size="12" value="unMotDePasse" name="txtMdp" />
</p>
</td>
</tr>
<tr>
<td>
Boîte de saisie</td>
<td>
<p align="center">
</p>
<textarea name="areaSaisie">ligne1
ligne2</textarea>
</td>
</tr>
<tr>
<td>
ComboBox</td>
<td>
<p align="center">
</p>
<select name="cmbValeurs">
<option value="1">choix1</option>
<option value="2" selected>choix2</option>
<option value="3">choix3</option>
</select>
</td>
</tr>
<tr>
<td>
Liste à choix simple</td>
<td>
<p align="center">
</p>
<select size="3" name="lstSimple">
<option value="1" selected>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>
<p align="center">
</p>
<select multiple size="3" name="lstMultiple">
<option value="1" selected>multiple1</option>
<option value="2">multiple2</option>
<option value="3" selected>multiple3</option>
<option value="4">multiple4</option>
<option value="5">multiple5</option>
</select>
</td>
</tr>
<tr>
<td>
Bouton simple</td>
<td>
<p align="center">
<input onclick="effacer()" type="button" value="Effacer" name="btnEffacer" />
</p>
</td>
</tr>
<tr>
<td>
Bouton submit</td>
<td>
<p align="center">
<input type="submit" value="Envoyer" name="btnEnvoyer" />
</p>
</td>
</tr>
<tr>
<td>
Bouton reset</td>
<td>
<p align="center">
<input type="reset" value="Rétablir" name="btnRetablir" runat="server" />
</p>
</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 name="form" method="post"> | |
<input type="text" maxlength="30" value="birkaç kelime" name="txtSaisie" /> | |
<input type="password" maxlength="12" size="12" value="unMotDePasse" name="txtMdp" /> | |
<textarea name="areaSaisie">satır1 satır2</textarea> | |
<input type="radio" value="evet" name="rdMarie" />Evet <input type="radio" checked value="hayır" name="rdMarie" />Hayır | |
<input type="checkbox" value="bir" name="C1" />1 <input type="checkbox" checked value="iki" name="C2" />2 <input type="checkbox" value="üç" name="C3" />3 | |
<select name="cmbValeurs"> <option value="1">seçenek1</option> <option value="2" selected>seçenek2</option> <option value="3">seçim3</option> </select> | |
<select size="3" name="lstSimple"> <option value="1" selected>liste1</option> <option value="2">liste2</option> <option value="3">liste3</option> <option value="4">liste4</option> <option value="5">liste5</option> </select> | |
<select multiple size="3" name="lstMultiple"> <option value="1" selected>multiple1</option> <option value="2">multiple2</option> <option value="3" selected>multiple3</option> <option value="4">multiple4</option> <option value="5">multiple5</option> </select> | |
<input type="hidden" name="secret" value="uneValeur" /> | |
<input type="submit" value="Gönder" name="btnEnvoyer" /> | |
<input type="reset" value="Sıfırla" name="btnRetablir" runat="server" /> | |
<input onclick="effacer()" type="button" value="Sil" name="btnEffacer" /> |
Bu farklı denetimleri tek tek inceleyelim.
5.2.2.1. Form
<form name="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"). Bu durum, formda bulunan tüm denetimler için geçerlidir. 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. Bir web istemcisi, web sunucusuna (formda bulunan) bilgileri nasıl iletir? Bunu ayrıntılı olarak inceledik. POST ve GET adlı iki farklı yöntem kullanabilir. method="méthode" özniteliği, yöntemi GET veya POST olarak ayarlandığında, <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. |
5.2.2.2. Giriş alanı
<input type="text" maxlength="30" value="birkaç kelime" name="txtSaisie" /> <input type="password" maxlength="12" size="12" value="unMotDePasse" name="txtMdp" /> |
<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. | |
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="12": alanda görünen karakter sayısı - daha fazla karakter girilmesini engellemez maxlength="30": maksimum karakter sayısını 30 olarak belirler - bu özniteliğin uygulanmasından tarayıcı sorumludur name="txtSaisie": kontrolün adı value="birkaç kelime" : giriş alanında görüntülenecek metin. |
5.2.2.3. Çok satırlı giriş alanı
<textarea name="areaSaisie">satır1 satır2</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ı |
5.2.2.4. Radyo düğmeleri
<input type="radio" value="evet" name="rdMarie" />Evet <input type="radio" checked value="hayır" name="rdMarie" />Hayır |
<input type="radio" attribut2="valeur2" ..../>metin yanında metin bulunan bir radyo düğmesi görüntüler. | |
name="rdMarie": denetim 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. |
5.2.2.5. Onay kutuları
<input type="checkbox" value="bir" name="C1" />1 <input type="checkbox" checked value="iki" name="C2" />2 <input type="checkbox" value="üç" name="C3" />3 |
<input type="checkbox" attribut2="valeur2" ..../>metin yanında metin bulunan bir onay kutusu görüntüler. | |
name="C1": denetim 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şaretlidir; yoksa işaretli değildir. |
5.2.2.6. Açılır liste (combo)
<select name="cmbValeurs"> <option value="1">seçenek1</option> <option value="2" selected>seçenek2</option> <option value="3">seçenek3</option> </select> |
<select size=".." name=".."> <option [selected="selected"] [value="valeur"]>metin</option> ... </select> <option>...</option> etiketleri arasında yer alan metinleri bir liste halinde görüntüler | |
name="cmbValeurs": denetimin adı. size="1": görünür liste öğelerinin sayısı. size="1", listeyi bir açılır menüye eşdeğer hale getirir. [size] özniteliği yoksa bu, varsayılan değerdir. 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="değer" : öğe seçildiğinde sunucuya gönderilecek değeri belirler. Bu öznitelik yoksa, seçeneğe atanan metin sunucuya gönderilir. |
5.2.2.7. Tek seçimli liste
<select size="3" name="lstSimple"> <option value="1" selected>liste1</option> <option value="2">liste2</option> <option value="3">liste3</option> <option value="4">liste4</option> <option value="5">liste5</option> </select> |
<select size=".." name=".."> <option [selected] [value="valeur"]>...</option> ... </select> <option>...</option> etiketleri arasındaki metinleri bir liste halinde 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. |
5.2.2.8. Çoklu seçim listesi
<select multiple size="3" name="lstMultiple"> <option value="1" selected>multiple1</option> <option value="2">multiple2</option> <option value="3" selected>multiple3</option> <option value="4">multiple4</option> <option value="5">multiple5</option> </select> |
<select size=".." name=".." multiple> <option [selected] ] [value="valeur"]>...</option> ... </select> <option>...</option> etiketleri arasındaki metinleri bir liste halinde 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. |
5.2.2.9. button türü düğme
<input onclick="effacer()" type="button" value="Sil" name="btnEffacer" /> |
<input type="button" value="..." name="..." onclick="effacer()" ....> | |
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, 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:  |
5.2.2.10. Gönder düğmesi
<input type="submit" value="Gönder" name="btnEnvoyer" /> |
<input type="submit" value="Gönder" name="btnEnvoyer"> | |
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 |
5.2.2.11. Sıfırlama düğmesi
<input type="reset" value="Sıfırla" name="btnRetablir" runat="server" /> |
<input type="reset" value="Sıfırla" name=" btnRetablir "> | |
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 |
5.2.2.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 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 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 işlem böyle devam edecektir. |
5.3. Bir tarayıcı tarafından bir web sunucusuna form değerlerinin gönderilmesi
Bir önceki bölümden, bir istemcinin sunucuya nasıl bilgi ilettiğini zaten biliyoruz. Bunu şu yollardan biriyle yapar:
- HTTP GET url?param1=va1¶m2=val2&....
- HTT POST url isteği ve ardından param1=va1¶m2=val2&.... parametre dizisini içeren bir belge.
Tarayıcı, [method] etiketinin [form] özniteliğinin GET mı yoksa POST mı olduğuna bağlı olarak bu iki yöntemden birini kullanacaktır. Şimdi bunu göstereceğiz. Daha önce incelediğimiz sayfa statik bir sayfadır. Bu belgeyi isteyecek tarayıcı tarafından gönderilen HTTP başlıklarına erişebilmek için, sayfayı bir .NET web sunucusu (IIS veya Cassini) için dinamik bir sayfaya dönüştürüyoruz. Önceki statik kod, [formulaire_get.aspx] adlı bir dosyaya yerleştirilir ve içeriği şöyledir:
<%@ Page src="formulaire_get.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="formulaire_get" %>
<html>
<head>
<title>Formulaire</title>
<script language="javascript">
function effacer(){
alert("Vous avez cliqué sur le bouton [Effacer]");
}
</script>
</head>
<body>
.....
</body>
</html>
Yukarıdaki tanıtım sayfası, [formulaire_get.aspx.vb] denetleyicisiyle ilişkilidir:
Public Class formulaire_get
Inherits System.Web.UI.Page
Private Sub Page_Init(ByVal Sender As Object, ByVal e As System.EventArgs) Handles MyBase.Init
' geçerli isteği request.txt sayfa klasörüne kaydedilir
Dim requestFileName As String = Me.MapPath(Me.TemplateSourceDirectory) + "\request.txt"
Me.Request.SaveAs(requestFileName, True)
End Sub
End Class
[formulaire_get.aspx] belgesinin her çağrılmasında, istemcinin isteği Page_Init yordamı tarafından [request.txt] dosyasına kaydedilecektir. Bu çalışma şekliyle daha önce karşılaştığımızdan, denetleyici hakkında daha fazla yorum yapmayacağız.
5.3.1. GET Yöntemi
İlk bir test yapalım; belgedeki HTML kodunda, FORM etiketi şu şekilde tanımlanmıştır:
<form name="formulaire" method="get">
[formulaire_get.aspx] ve [formulaire_get.aspx.vb] dosyalarını <application-path> klasörüne yerleştiriyoruz ve Cassini sunucusunu (<application-path>,/form2) parametreleriyle başlatıyoruz. http://localhost/form2/formulaire_get.aspx adresini çağırıyoruz:
Tarayıcı az önce bir istek gönderdi ve bu isteğin [request.txt] dosyasına kaydedildiğini biliyoruz. Bu dosyanın içeriğine bir göz atalım:
GET /form2/formulaire_get.aspx HTTP/1.1
Cache-Control: max-age=0
Connection: keep-alive
Keep-Alive: 300
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7b) Gecko/20040316
Tarayıcı, HTTP GET isteğini kullanarak [http://localhost/form2/formulaire_get.aspx] URL'sini talep etti. URL kullanıcı tarafından girildiğinde her zaman böyle olur. Form şu şekilde doldurulur:
Yukarıdaki [Envoyer] düğmesini kullanıyoruz. Bu düğmenin kodu HTML şu şekildedir:
[Submit] türündeki bir düğme etkinleştirildiğinde, tarayıcı, <form> etiketindeki form parametrelerini, varsa <form action="URL"> etiketinin [action] özniteliğinde belirtilen URL adresine gönderir. Bu öznitelik yoksa, form parametreleri formu oluşturan URL adresine gönderilir. Bu durumda da durum böyledir. Dolayısıyla, [Envoyer] düğmesi, tarayıcının URL [http://localhost/form2/formulaire_get.aspx] adresine, form parametrelerini aktararak bir istek göndermesine neden olmalıdır. [formulaire_get.aspx] sayfası alınan isteği kaydettiği için, istemcinin bu parametreleri nasıl aktardığını bilmemiz gerekir. Hadi deneyelim. [Envoyer] düğmesine tıklıyoruz. Tarayıcıdan şu yanıtı alıyoruz:
Bu başlangıç sayfasıdır, ancak tarayıcının [Adresse] alanında URL değerinin değiştiğini görebiliriz. Şu şekilde olmuştur:
http://localhost/form2/formulaire_get.aspx?rdMarie=evet&C1=bir&C2=iki&txtSaisie=programlama+asp.net&txtMdp=unMotDePasse&areaSaisie=temeller+%0D%0Aweb+programlama%0D%0A&cmbValeurs=3&lstSimple=1&lstMultiple=2&lstMultiple=4&btnEnvoyer=Gönder&secret=uneValeur
Formda yapılan seçimlerin URL'te yer aldığı görülmektedir. İstemcinin isteğini kaydeden [request.txt] dosyasının içeriğine bakalım:
GET /form2/formulaire_get.aspx?rdMarie=oui&C1=un&C2=deux&txtSaisie=programmation+asp.net&txtMdp=ceciestsecre&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web%0D%0A&cmbValeurs=3&lstSimple=1&lstMultiple=2&lstMultiple=4&btnEnvoyer=Envoyer&secret=uneValeur HTTP/1.1
Connection: keep-alive
Keep-Alive: 300
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
Referer: http://localhost/form2/formulaire_get.aspx
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7b) Gecko/20040316
Tarayıcının, herhangi bir parametre iletmeden belgeyi talep ettiği sırada başlangıçta gönderdiği isteğe oldukça benzeyen bir HTTP isteği görülmektedir. İki fark vardır:
Form parametreleri, belgenin URL kısmının arkasına ?param1=val1¶m2=val2&... şeklinde eklenmiştir. | |
Müşteri, bu başlıkta (HTTP) ile, isteği gönderdiği sırada görüntülediği belgenin URL kodunu belirtmektedir. |
GET URL?param1=değer1¶m2=değer2&... komutunda parametrelerin nasıl aktarıldığını daha yakından inceleyelim. HTTP/1.1 komutunda, parami web formundaki denetimlerin adları, valeuri ise bunlara atanan değerlerdir. Aşağıda üç sütunlu bir tablo sunuyoruz:
- 1. sütun: Örnekteki HTML kontrolünün tanımını içerir
- 2. sütun: Bu kontrolün bir tarayıcıda nasıl görüntülendiğini gösterir
- 3. sütun: Örnekteki GET isteğinde olduğu şekliyle, 1. sütundaki kontrol için tarayıcı tarafından sunucuya gönderilen değeri gösterir
HTML kontrolü | onaylanmadan önceki görünüm | geri gönderilen değer(ler) |
<input type="radio" value="evet" name="rdMarie" />Evet <input type="radio" checked value="hayır" name="rdMarie" />Hayır |  | rdMarie=evet - kullanıcı tarafından işaretlenen düğmenin kullanıcı tarafından işaretlenen radyo düğmesinin değeri. |
<input type="checkbox" value="bir" name="C1" />1 <input type="checkbox" checked value="iki" name="C2" />2 <input type="checkbox" value="üç" name="C3" />3 |  | C1=bir C2=iki - kullanıcı tarafından işaretlenen kutuların value öznitelik değerleri kullanıcı tarafından işaretlenen kutuların |
<input type="text" maxlength="30" value="qqs kelime" name="txtSaisie" /> |  | txtSaisie=programlama+asp.net - kullanıcı tarafından giriş alanına yazılan metin . Boşluklar + işaretiyle değiştirilmiştir |
<input type="password" maxlength="12" size="12" value="birŞifre" name="txtMdp" /> |  | txtMdp=buGizli - kullanıcı tarafından giriş alanına yazılan metin . Aslında yazılan metin "bu bir sır" idi. Son karakter kayboldu çünkü maxlength="12" karakter sayısını 12 ile sınırlıydı. |
<textarea name="areaSaisie"> satır1 satır2</textarea> |  | giriş alanı=temeller+ %0D%0A web+programlama - kullanıcı tarafından giriş alanına %OD%OA satır sonu işaretidir satır sonu işaretidir. Boşluklar + işaretiyle değiştirilmiştir |
<select name="cmbValeurs"> <option value="1">seçenek1 </option> <option value="2" selected>seçenek2 </option> <option value="3">seçenek3 </option> </select> |  | cmbDeğerler=3 - kullanıcı tarafından tek seçimli listeden |
<select size="3" name="lstSimple"> <option value="1" selected>liste1</option> <option value="2">liste2 </option> <option value="3">liste3 </option> <option value="4">liste4 </option> <option value="5">liste5 </option> </select> |  | lstSimple=3 - kullanıcı tarafından tek seçim listesinden |
<select multiple size="3" name="lstMultiple"> <option value="1" selected>multiple1 </option> <option value="2">multiple2 </option> <option value="3" selected>multiple3 </option> <option value="4">multiple4 </option> <option value="5">multiple5 </option> </select> |  | lstMultiple=2 lstMultiple=4 - kullanıcı tarafından çoklu seçim listesinden |
<input type="submit" value="Gönder" name="btnEnvoyer" /> |  | btnEnvoyer=Gönder - form verilerini göndermek için kullanılan düğmenin adı ve özniteliği form verilerini sunucuya |
<input type="hidden" name="secret" value="birDeğer" /> | secret=birDeğer - gizli alanın value özniteliği |
Sunucunun kendisine iletilen parametrelerle ne yaptığını merak edebilirsiniz. Aslında hiçbir şey yapmadı. Komut alındığında
GET /form2/formulaire_get.aspx?rdMarie=oui&C1=un&C2=deux&txtSaisie=programmation+asp.net&txtMdp=ceciestsecre&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web%0D%0A&cmbValeurs=3&lstSimple=1&lstMultiple=2&lstMultiple=4&btnEnvoyer=Envoyer&secret=uneValeur HTTP/1.1
Web sunucusu, URL parametrelerini [http://localhost/form2/formulaire_get.aspx] ve c.a.d belgelerine, yani başlangıçta oluşturduğumuz belgeye iletti. İstemcinin bize gönderdiği parametreleri almak ve işlemek için herhangi bir kod yazmadık. Dolayısıyla her şey, sanki istemcinin isteği sadece şuymuş gibi gerçekleşiyor:
Bu nedenle, [Envoyer] düğmemize yanıt olarak, parametreler olmadan URL ve [http://localhost/form2/formulaire_get.aspx]'i talep ederek başlangıçta elde ettiğimizle aynı sayfayı aldık.
5.3.2. POST yöntemi
HTML belgesi artık, tarayıcının form değerlerini web sunucusuna göndermek için POST yöntemini kullanacak şekilde programlanmıştır. Bunun için [formulaire_get.aspx] dosyasını [formulaire_post.aspx] dosyasına kopyalıyoruz ve [formulaire_post.aspx] dosyasındaki yalnızca <form> etiketini değiştiriyoruz:
<%@ Page src="formulaire_get.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="formulaire_get" %>
<html>
<head>
...
</head>
<body>
<p>
Gestion d'un formulaire
</p>
<hr />
<form name="formulaire" method="post">
<table border="1">
[formulaire_get.aspx.vb] denetleyicisini değiştirmeye gerek yoktur, bu nedenle olduğu gibi bırakıyoruz. URL [http://localhost/form2/formulaire_post.aspx] aracılığıyla yeni belgeyi talep ediyoruz, formu GET yönteminde olduğu gibi dolduruyoruz ve [Envoyer] düğmesiyle parametreleri sunucuya gönderiyoruz. Sunucudan aşağıdaki yanıt sayfasını alıyoruz:
Böylece, GET ve c.a.d yöntemlerinde olduğu gibi aynı sonucu, yani başlangıç sayfasını elde ediyoruz. Bir fark göze çarpmaktadır: tarayıcının [Adresse] alanında, iletilen parametreler görünmemektedir. Şimdi, istemci tarafından gönderilen ve [request.txt] dosyasına kaydedilen isteğe bakalım:
POST /form2/formulaire_post.aspx HTTP/1.1
Connection: keep-alive
Keep-Alive: 300
Content-Length: 222
Content-Type: application/x-www-form-urlencoded
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
Referer: http://localhost/form2/formulaire_post.aspx
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7b) Gecko/20040316
rdMarie=oui&C1=un&C2=deux&txtSaisie=programmation+asp.net&txtMdp=ceciestsecre&areaSaisie=les+bases+de+la%0D%0Aprogrammation+web%0D%0A&cmbValeurs=3&lstSimple=3&lstMultiple=2&lstMultiple=4&btnEnvoyer=Envoyer&secret=uneValeur
Müşterinin HTTP sorgusunda yeni öğeler ortaya çıkıyor:
GET sorgusu, POST sorgusuyla değiştirilmiştir. Parametreler artık sorgunun bu ilk satırında yer almıyor. Parametrelerin artık boş bir satırdan sonra HTTP sorgusunun arkasına yerleştirildiği görülebilir. Kodlamaları, GET sorgusundaki kodlamalarıyla aynıdır. | |
"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. | |
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¶m2=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ı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.
5.4. Form değerlerinin sunucu tarafında işlenmesi
5.4.1. Örneğin tanıtımı
Artık HTML <form method="GET/POST" ...> etiketiyle tarayıcının form değerlerini gönderme şekli arasındaki bağlantıyı kurduğumuza göre, bu değerleri sunucu tarafında nasıl alacağımızı biliyoruz. Cevabı bir önceki bölümde bulmuştuk:
- <form> etiketinin yöntemi GET ise, parametre değerleri [Request.QueryString] koleksiyonundan alınacaktır
- <form> etiketinin yöntemi POST ise, "post" ile gönderilen parametrelerin değerleri [Request.Form] koleksiyonundan alınacaktır. Burada bir açıklama yapmak gerekiyor. <form> etiketi, [action] özniteliği yardımıyla GET veya POST'in hedef URL'sini belirtebilir. Bu URL, ister GET ister POST olsun, action="url?param1=val1¶m2=val2&.." biçiminde ayarlanabilir. Bu parametreler, <form> ve </form> etiketleri arasında yer alan parametrelere eklenir ve bir GET veya POST aracılığıyla sunucuya aktarılır. Hedef URL'nin bir parçası oldukları için, ister GET ister POST olsun, bu parametreler [Request.QueryString] koleksiyonunda elde edilecektir.
Şimdi iki görünümlü bir MVC uygulaması yazıyoruz:
- İlk görünüm, önceki formdur. Buna [vue_formulaire] adını vereceğiz.
- İkinci görünüm, ilk sayfada girilen değerleri listeleyen bir bilgi sayfasıdır. Bir bağlantı aracılığıyla forma geri dönülmektedir. Bu görünüme [vue_confirmation] adını vereceğiz.
[vue_formulaire] görünümü, kullanıcıya gönderilir; kullanıcı bu görünümü doldurur ve onaylar. Onaylanmadan hemen önce şöyle görünebilir:
Kullanıcı, [Envoyer] düğmesini kullanarak girdilerini onaylar. Karşılığında, aşağıdaki [vue_validation] görünümünü alır:
5.4.2. Uygulama denetleyicisi
Bir önceki bölümde, MVC uygulamasının denetleyici rolünü, tüm istemci isteklerinin geçtiği [global.asax] dosyasına devredebileceğimizi görmüştük. Daha önce bu şekilde oluşturulmuş bir MVC uygulamasını sunmuştuk ve burada o zaman sunulan geliştirme modelini takip ediyoruz. [global.asax] dosyası şu şekilde olacaktır:
Bu dosya, [global.asax.vb] dosyasında bulunan denetleyiciye referans veren tek bir satırdan oluşur:
Imports System
Imports System.Web
Imports System.Web.SessionState
Public Class Global
Inherits System.Web.HttpApplication
Sub Application_BeginRequest(ByVal sender As Object, ByVal e As EventArgs)
' yapılması gereken eylemi alıyoruz
Dim action As String
If Request.QueryString("action") Is Nothing Then
action = "init"
Else
action = Request.QueryString("action").ToString.ToLower
End If
' eylemi yürütüyoruz
Select Case action
Case "init"
Server.Transfer("formulaire.aspx", False)
Case "validation"
Server.Transfer("validation.aspx", True)
Case Else
Server.Transfer("formulaire.aspx", True)
End Select
End Sub
End Class
Denetleyicinin çalışma prensibi şöyledir:
- Hedef URL'de, [action] parametresini içeren bir parametre dizisi bekler. Bu parametre yoksa, parametre dizisinde [action=init] varmış gibi davranılır.
- Yalnızca iki eylem tanınır:
- init: önceden doldurulmuş form müşteriye gönderilir
- validation: müşteriye yaptığı girişleri onaylayan sayfa gönderilir
- Eylem yukarıdakilerden biri değilse, [action=init] parametresi varmış gibi davranılır. Ayrıca bir hata sayfası da gönderilebilir.
5.4.3. "init" eyleminin işlenmesi
Denetleyici "init" eylemini işlerken, önceden doldurulmuş bir form oluşturmalıdır. Bu işi yapmak [formulaire.aspx] sayfasının görevidir. Kod şöyledir:
<HTML>
<HEAD>
<title>Formulaire</title>
<script language="javascript">
function effacer(){
alert("Vous avez cliqué sur le bouton [Effacer]");
}
function raz(liste){
liste.selectedIndex=-1
}
</script>
</HEAD>
<body>
<p>
Gestion d'un formulaire
</p>
<hr>
<form name="formulaire" method="post" action="?action=validation">
<table border="1">
<tr>
<td>
Etes-vous marié(e)</td>
<td>
<p align="center">
<input type="radio" value="oui" name="rdMarie">Oui <input type="radio" checked value="non" name="rdMarie">Non
</p>
</td>
</tr>
....
<td>
<select size="3" name="lstSimple">
<option value="1" selected>liste1</option>
<option value="2">liste2</option>
<option value="3">liste3</option>
<option value="4">liste4</option>
<option value="5">liste5</option>
</select>
<INPUT type="button" value="Raz" name="btnRazSimple" onclick="raz(lstSimple)">
</td>
....
<td>
<select multiple size="3" name="lstMultiple">
<option value="1" selected>multiple1</option>
<option value="2">multiple2</option>
<option value="3" selected>multiple3</option>
<option value="4">multiple4</option>
<option value="5">multiple5</option>
</select>
<INPUT type="button" value="Raz" name="btnRazMultiple" onclick="raz(lstMultiple)">
</td>
...
</table>
<input type="hidden" name="secret" value="uneValeur">
</form>
</body>
</HTML>
Daha önce incelediğimiz formdaki HTML kodunu, birkaç küçük fark dışında burada da görüyoruz. <form> etiketinin kodu değiştirilmiştir:
<form name="formulaire" method="post" action="?action=validation">
- post: [submit] türündeki düğme kullanıldığında, kullanıcı tarafından girilen ve sunucuya gönderilen değerler, HTTP yöntemi ile gönderilecektir. POST
- eylem: action="url" sözdizimi, form değerlerinin gönderilmesi gereken URL'yi belirtmek için kullanılır. Bu URL, param1=val1¶m2=val2&... biçiminde bir parametre dizisi içerebilir Burada da öyle yapılıyor; denetleyiciye gerçekleştirmesi gereken eylemi belirtmek için [action=validation] parametresini aktarıyoruz. Bu parametre dizisinin önünde bir web adresi bulunmadığına dikkat edilebilir. Tarayıcı, form parametrelerini bu formu kendisine sağlayan adrese gönderecektir. Yukarıda sunulan örneğimizde bu adres [http://localhost/mvcform1]’tir. Dolayısıyla tarayıcı, [localhost] sunucusuna [POST /mvcform1?action=validation] şeklinde bir istek gönderecektir.
Kullanıcının [lstSimple] ve [lstMultiple] listelerindeki öğelerin seçimini kaldırabilmesi için düğmeler eklenmiştir:
Bu, aşağıdaki HTML koduna karşılık gelir:
<td>
<select size="3" name="lstSimple">
<option value="1" selected>liste1</option>
<option value="2">liste2</option>
<option value="3">liste3</option>
<option value="4">liste4</option>
<option value="5">liste5</option>
</select>
<INPUT type="button" value="Raz" name="btnRazSimple" onclick="raz(lstSimple)">
</td>
....
<td>
<select multiple size="3" name="lstMultiple">
<option value="1" selected>multiple1</option>
<option value="2">multiple2</option>
<option value="3" selected>multiple3</option>
<option value="4">multiple4</option>
<option value="5">multiple5</option>
</select>
<INPUT type="button" value="Raz" name="btnRazMultiple" onclick="raz(lstMultiple)">
</td>
[Raz] düğmesine tıklandığında, bu düğmenin ilişkili olduğu listedeki tüm öğelerin seçimi kaldırılır. [lstMultiple] listesini örnek olarak alalım. İlgili [Raz] düğmesine tıklandığında, [raz(lstMultiple)] adlı JavaScript işlevi çalıştırılır. Bir tarayıcı tarafından görüntülenen HTML belgesindeki JavaScript kodunun, sunucu tarafından değil, o tarayıcı tarafından çalıştırıldığını hatırlayalım. JavaScript, sunucunun müdahalesi olmadan sayfalara dinamik bir görünüm kazandıran çok kapsamlı bir dildir. [raz] işlevi şöyledir:
Bu işlev, HTML listesini temsil eden bir JavaScript nesnesi olan bir parametre alır. Bu nesnenin özellikleri ve yöntemleri vardır. Özelliklerinden biri, değeri HTML listesinde seçilen ilk seçeneğin numarası olan [selectedIndex]'tir. Seçili bir seçenek yoksa, bu özelliğin değeri -1 olur. Tersine, bu özelliğe bir değer atamak, HTML listesinden yeni bir öğe seçmek anlamına gelir; ona -1 değerini atamak ise hiçbir öğenin seçili olmaması anlamına gelir. Burada yapılan da budur.
Son olarak, [formulaire.aspx] sunum kodunun bir [formulaire.aspx.vb] denetleyicisiyle eşleştirilmediğine dikkat edilmelidir. Nitekim, HTML belgesinde sunucu tarafından oluşturulan dinamik bir bölüm bulunmadığından, bir denetleyiciye gerek yoktur.
5.4.4. Doğrulama eyleminin işlenmesi
Denetleyici "onaylama" eylemini işlerken, kullanıcı tarafından girilen değerleri listeleyen bir sayfa oluşturmalıdır. Bu işi yapmak [validation.aspx] sayfasının görevidir. Sayfa görsel olarak şu şekilde görünür:
HTML kodunun içeriği şöyledir:
<%@ Page src="validation.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="validation" %>
<HTML>
<HEAD>
<title>validation</title>
</HEAD>
<body>
<P>Valeurs saisies</P>
<HR width="100%" SIZE="1">
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1">
<TR>
<TD width="84">rdMarie</TD>
<TD><% =rdMarie%></TD>
</TR>
<TR>
<TD width="84">C1</TD>
<TD><%=C1%></TD>
</TR>
<TR>
<TD width="84">C2</TD>
<TD><%=C2%></TD>
</TR>
<TR>
<TD width="84">C3</TD>
<TD><%=C3%></TD>
</TR>
<TR>
<TD width="84">txtSaisie</TD>
<TD><%=txtSaisie%></TD>
</TR>
<TR>
<TD width="84">txtMdp</TD>
<TD><%=txtMdp%></TD>
</TR>
<TR>
<TD width="84">areaSaisie</TD>
<TD><%=areaSaisie%></TD>
</TR>
<TR>
<TD width="84">cmbValeurs</TD>
<TD><%=cmbValeurs%></TD>
</TR>
<TR>
<TD width="84">lstSimple</TD>
<TD><%=lstSimple%></TD>
</TR>
<TR>
<TD width="84">lstMultiple</TD>
<TD><%=lstMultiple%></TD>
</TR>
<TR>
<TD width="84">secret</TD>
<TD><%=secret%></TD>
</TR>
</TABLE>
</body>
</HTML>
Belgedeki <%=değişken%> dinamik kısımları, ilişkili [validation.aspx.vb] denetleyicisi tarafından hesaplanır:
Imports System.Text.RegularExpressions
Public Class validation
Inherits System.Web.UI.Page
Protected rdMarie As String
Protected C1 As String
Protected C2 As String
Protected C3 As String
Protected txtSaisie As String
Protected txtMdp As String
Protected areaSaisie As String
Protected cmbValeurs As String
Protected lstSimple As String
Protected lstMultiple As String
Protected secret As String
Protected delimiteur As New Regex("\r\n")
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'gönderilen parametreleri alınır
rdMarie = getValue("rdMarie")
C1 = getValue("C1")
C2 = getValue("C2")
C3 = getValue("C3")
txtSaisie = getValue("txtSaisie")
txtMdp = getValue("txtMdp")
areaSaisie = String.Join(",", delimiteur.Split(getValue("areaSaisie")))
cmbValeurs = getValue("cmbValeurs")
lstSimple = getValue("lstSimple")
lstMultiple = getValue("lstMultiple")
secret = getValue("secret")
End Sub
Private Function getValue(ByVal champ As String) As String
' gönderilen isteğin [champ] alanının değerini alır
' bir şey mi?
If Request.Form(champ) Is Nothing Then Return ""
' alanın değerini veya değerlerini alır
Dim valeurs() As String = Request.Form.GetValues(champ)
Dim valeur As String = ""
Dim i As Integer
For i = 0 To valeurs.Length - 1
valeur += "[" + valeurs(i) + "]"
Next
Return valeur
End Function
End Class
Görüntülenecek değerlerin hesaplanması [Form_Load] prosedüründe yapılır. "Gönderilen" bir alanın değeri, getValue(C) işleviyle elde edilir; burada C, alanın adıdır. Bu işlevin temel noktaları şunlardır:
- C, gönderilen parametre dizesinde yoksa, C'nin değeri olarak boş bir dize döndürülür
- aksi takdirde, [Request.Form.GetValues(C)] ile C alanının değer tablosu alınır. Bu değerler, [val1][val2]... biçiminde bir karakter dizisi halinde birleştirilir[valn] şeklinde bir karakter dizisi olarak birleştirilir; burada [vali], C alanının i numaralı değeridir
[areaSaisie] alanı özel bir şekilde işlenir. Değeri, tarayıcı tarafından areaSaisie=satır1\r\nsatır2\r\n... biçiminde gönderilir burada \r, ASCII kodlu 13 karakteri (satır başı) ve \n, ASCII kodlu 10 karakteri (satır sonu) anlamına gelir. Dolayısıyla getValue(areaSaisie) işlevi, "satır1\r\nsatır2\r\n..." dizesidir. Bu dize, [Regex.Split] yöntemi ile satırlara bölünür. Böylece {satır1,satır2,...} şeklinde bir dize dizisi elde edilir. Bu dizi, [String.Join] yöntemi ile "satır1,satır2,..." dizesine dönüştürülür. [areaSaisie] alanının değeri olarak görüntülenecek olan da bu son dizedir. Buradaki amaç, [TextArea] türündeki bir HTML alanının farklı satırlarını nasıl elde edebileceğimizi göstermekti.
5.4.5. Testler
Tüm dosyaları (global.asax, global.asax.vb, formulaire.aspx, validation.aspx, validation.aspx.vb) <application-path> klasörüne yerleştiriyoruz. Cassini sunucusunu (<application-path>,/mvcform1) parametreleriyle başlatıyoruz. <application-path> klasöründe boş bir [default.aspx] dosyası oluşturuyoruz ve ardından [http://localhost/mvcform1] URL'sini çağırıyoruz. [/mvcform1] bir belgenin değil, bir klasörün sanal yolu olduğu için, web sunucusu [default.aspx] belgesi mevcutsa onu görüntüleyecektir. Bu belgeyi bu nedenle oluşturduk. Sayfa görüntülenmeden önce, [global.asax] komut dosyası çalıştırılacak ve sonunda [formulaire.aspx] sayfası görüntülenecektir. Bu nedenle [default.aspx] dosyası boş olabilir.
Onaylanan formun şu şekilde olduğunu varsayalım:
[Envoyer] düğmesinin kullanılması, aşağıdaki sayfayı döndürür:
Öncelikle yanıtın URL'sine dikkat edelim: [http://localhost/mvcform1/?action=validation]. Bu, [formulaire.aspx] formundaki <form> etiketinin [action] özniteliğindeki URL değeridir:
<form name="formulaire" method="post" action="?action=validation">
Formun farklı alanları için elde edilen değerleri tek tek inceleyelim:
alan | değer | HTML | yorumlar |
rdMarie | evet | <input type="radio" value="evet" name="rdMarie">Evet <input type="radio" checked value="hayır" name="rdMarie">Hayır | elde edilen değer, işaretli düğmenin [value] özniteliğidir |
C1 | bir | <input type="checkbox" value="un" name="C1">1 | aynı |
C2 | iki | <input type="checkbox" checked value="iki" name="C2">2 | aynı |
C3 | <input type="checkbox" value="üç" name="C3">3 | Bu düğme kullanıcı tarafından işaretlenmemiştir. Dolayısıyla değeri tarayıcı tarafından gönderilmemiştir. Kodda, [Request.Form("C3") is Nothing] koşulu bu nedenle doğru olmuştur. | |
txtSaisie | Programlama asp.net | <input type="text" ... name="txtSaisie"> | elde edilen değer, onay anında giriş alanında bulunan metindir |
txtMdp | mdp | <input type="password" ...name="txtMdp"> | aynı |
areaSaisie | web web programlamanın temelleri | <textarea name="areaSaisie"> ...</textarea> | aynı |
cmbValeurs | 3 | <select name="cmbValeurs"> ... <option value="3">seçim3</option> </select> | elde edilen değer, seçilen seçeneğin [value] özniteliğidir |
lstSimple | 3 | <select size="3" name="lstSimple"> .... <option value="3">liste3</option> ... </select> | aynı |
lstMultiple | 2 4 | <select multiple size="3" name="lstMultiple"> ... <option value="2">multiple2 </option> ... <option value="4">multiple4 </option> ... </select> | elde edilen değerler, seçilen seçeneklerin [value] özniteliklerine aittir |
gizli | uneValeur | <input type="hidden" name="secret" value="birDeğer"> | Elde edilen değer, gizli alanın [value] özniteliğidir |
Şimdi listelere bakalım. Doğrulama anında formun durumunun şu şekilde olduğunu varsayalım:
- [choix1] seçeneği seçili durumdadır comboBox
- diğer iki listede hiçbir seçenek seçili değil. Bunu elde etmek için [Raz] düğmeleri kullanıldı.
Onaylandıktan sonra görüntülenen sayfa şöyledir:
Bir listeden hiçbir değer seçilmediğinde, tarayıcı o liste için herhangi bir parametre göndermez. [validation.aspx.vb] kodunda, [Request.Form("lstSimple")] ve [Request.Form("lstMultiple")] ifadeleri bu nedenle [Nothing] sabitine eşittir; bu da yukarıda gösterilen sonuca yol açar.
5.5. Bir sayfanın durumunu korumak
5.5.1. Bir oturumla sayfanın durumunu korumak
Önceki uygulamanın tamamını yeni bir klasöre kopyalıyoruz. [validation.aspx] sayfasına, kullanıcının forma geri dönmesini sağlayan bir bağlantı ekliyoruz:
[validation.aspx] sayfasında yapılacak değişiklik, şu bağlantının eklenmesidir:
.....
<TR>
<TD width="84">secret</TD>
<TD><%=secret%></TD>
</TR>
</TABLE>
<P>
<a href="?action=formulaire">Retour au formulaire</a>
</P>
</body>
</HTML>
Bağlantının [href] özniteliğinin değeri, tek parametresi [action=formulaire] olan parametreli bir URL'dir; bu sayede sunucu, formun onaylandığı andaki haliyle görüntülenmesi gerektiğini bilir. Dolayısıyla, önceden tanımlanmış bir formu görüntüleyen [init] eylemi ile bir fark vardır. [?action=formulaire] parametresine sahip URL'nin aslında bir URL'si yoktur. Bu nedenle, bu URL, onay sayfasının görüntülenmesini sağlayan URL ile aynı olacaktır. Önceki incelemeyi hatırlarsak, bu adres uygulama klasörünün URL’sidir. Dolayısıyla istek, denetleyici üzerinden geçecektir. Denetleyici şimdi [formulaire] eylemini işlemelidir. [global.asax.vb] kodunda aşağıdaki değişiklik yapılır:
Sub Application_BeginRequest(ByVal sender As Object, ByVal e As EventArgs)
' yapılması gereken eylem alınır
Dim action As String
If Request.QueryString("action") Is Nothing Then
action = "init"
Else
action = Request.QueryString("action").ToString.ToLower
End If
' eylemi gerçekleştirilir
Select Case action
Case "init"
Server.Transfer("formulaire.aspx", False)
Case "validation"
Server.Transfer("validation.aspx", True)
Case "formulaire"
Server.Transfer("formulaire.aspx", True)
Case Else
Server.Transfer("formulaire.aspx", True)
End Select
End Sub
Eylem "form" ise, isteği [formulaire.aspx] sayfasına iletmekle yetiniriz. Bu sayfanın, içinde hiçbir değişken bölüm bulunmayan önceden tanımlanmış bir form görüntülediğini biliyoruz. Dolayısıyla bu sayfa, formun onaylandığı andaki değerleriyle birlikte görüntülenemez. Burada bu noktayı vurgulamak istiyoruz. Uygulamanın tüm dosyaları <application-path> dizinine yerleştirilmişse, Cassini'yi (<application-path>,/mvcform2) parametreleriyle başlatırız ve ardından [http://localhost/mvcform2] URL'sini çağırırız. Aşağıdaki sayfayı (kısmi görünüm) elde ederiz:
Formu aşağıdaki şekilde doldurup gönderiyoruz:
Aşağıdaki onay sayfası karşımıza çıkar:
Yukarıdaki sayfada bulunan (ancak gösterilmeyen) [Retour au formulaire] bağlantısını kullanıyoruz. Sunucudan şu yanıtı alıyoruz:
Şunu görüyoruz ki:
- istenen URL'de, istenildiği gibi action=form parametresi bulunuyor
- görüntülenen formda girilen değerler kaybolmuştur.
Girilen değerleri neden bulamadığımızı biliyoruz. [formulaire.aspx] belgesinin koduna bakarsak, her şeyin statik olduğunu ve bu nedenle her seferinde aynı sayfayı görüntülemek zorunda olduğunu görüyoruz. Bu kodu dinamik hale getirmemiz gerektiği açıkça görülüyor. Kod, kullanıcı tarafından onaylanan değerleri görüntülemelidir. Peki bu değerleri nerede saklayacağız?
HTTP durum-yok protokolünün temel kuralını hatırlayalım:
- [http://localhost/mvcform2] URL'si istenir – bir yanıt alınır. İsteğin başlangıcında istemci ile sunucu arasında bir TCP-IP bağlantısı açılır ve yanıtın sonunda bu bağlantı sonlandırılır.
- Kullanıcı verileri girer ve onaylar. [http://localhost/mvcform2/?action=validation] URL'si istenir - bir yanıt alınır. İki taraf arasında TCP-IP numaralı yeni bir bağlantı açılır ve ardından kapatılır.
- Kullanıcı [Retour au formulaire] bağlantısını kullanır. [http://localhost/mvcform2/?action=formulaire] URL'si istenir ve bir yanıt alınır. İki taraf arasında TCP-IP numaralı yeni bir bağlantı tekrar açılır ve ardından kapatılır.
İstek-yanıt döngüleri birbirinden bağımsızdır, çünkü her biri yeni bir TCP-IP bağlantısı kullanır. Bir istemci-sunucu uygulaması, bir dizi iletişim için tek bir TCP-IP bağlantısı kullandığında, sunucu bir istemciyi bağlantısı aracılığıyla tanımlayabilir. Böylece, belirli bir bağlantıyla ilişkilendireceği bilgileri saklayabilir ve iletişimleri takip edebilir. İletişimler farklı bağlantılar üzerinden gerçekleştiğinde, sunucu bir istemciyi bir bağlantıyla ilişkilendiremez. Başka bir yol gereklidir. Bunlardan birini önceki bölümde ele aldık: oturum mekanizması. Bu mekanizma, istek-yanıt döngülerinin, sonraki tüm döngülerin erişebileceği bir [Session] nesnesinde bilgileri depolamasına olanak tanır.
Artık oturum içeren bir MVC uygulamamız olduğuna göre, önceki bölümde gösterildiği gibi [global.asax] dosyasını denetleyici olarak kullanamayız. Uygulama denetleyicisi rolü, bu amaca özel olarak ayrılmış belirli bir sayfa tarafından üstlenilmelidir. Burada bu rol, [main.aspx] sayfası tarafından üstlenilecektir. Şu şekilde ilerleyeceğiz:
- Kullanıcı verilerini onayladığında (eylem=onaylama), [main.aspx.vb] denetleyicisi, onay sayfasını görüntülemeden önce bu verileri geçerli oturumda saklayacaktır.
- Girilen değerleri içeren formun görüntülenmesi gerektiğinde (eylem=form), [main.aspx.vb] denetleyicisi, formu görüntülemeden önce bu değerleri oturumdan alacak ve bağlama yerleştirecektir.
5.5.2. Yeni uygulama denetleyicisi
Uygulama denetleyicisi, aşağıdaki iki [main.aspx, main.aspx.vb] dosyasından oluşur:
[main.aspx]
[main.aspx.vb]
Imports System.Collections.Specialized
Imports Microsoft.VisualBasic
Public Class main
Inherits System.Web.UI.Page
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
' yapılacak eylemi alıyoruz
Dim action As String
If Request.QueryString("action") Is Nothing Then
action = "init"
Else
action = Request.QueryString("action").ToString.ToLower
End If
' eylemi gerçekleştirilir
Select Case action
Case "init"
' önceden doldurulmuş form görüntülenir
Context.Items("formulaire") = initForm()
Server.Transfer("formulaire.aspx", True)
Case "validation"
' oturumda gönderilen değerler kaydedildikten sonra onay sayfası görüntülenir
Session.Item("formulaire") = Request.Form
Server.Transfer("validation.aspx", True)
Case "formulaire"
' oturumdan alınan değerlerle formu görüntüler
Context.Items("formulaire") = Session.Item("formulaire")
Server.Transfer("formulaire.aspx", True)
Case Else
' önceden doldurulmuş form görüntülenir
Context.Items("formulaire") = initForm()
Server.Transfer("formulaire.aspx", True)
End Select
End Sub
Private Function initForm() As NameValueCollection
' formu başlatılır
Dim form As New NameValueCollection
form.Set("rdMarie", "non")
form.Set("C2", "deux")
form.Set("txtSaisie", "qqs mots")
form.Set("txtMdp", "ceciestsecret")
form.Set("areasaisie", "ligne1" + ControlChars.CrLf + "ligne2" + ControlChars.CrLf)
form.Set("cmbValeurs", "2")
form.Set("lstSimple", "1")
form.Set("lstMultiple", "1")
form.Add("lstMultiple", "3")
Return form
End Function
End Class
Daha önce incelenen uygulama denetleyicisinin yapısının özü, aşağıdaki farklılıklar dışında aynıdır:
- denetleyicinin çalışması [Form_Load] yordamında gerçekleştirilir
- [validation] eylemi durumunda, [Request.Form]'te bulunan form değerleri, "form" anahtarıyla ilişkili oturumda saklanır. Ardından yürütme, bu değerleri görüntüleyecek olan [validation.aspx] sayfasına aktarılır.
- Diğer eylemler için ise yürütme her durumda [formulaire.aspx] sayfasına aktarılır. Bu sayfa, bağlamında [Request.form] veya c.a.d türünde bir nesneye atanacak "form" anahtarını bekler. Bu nesne, form alanlarının değerlerinden oluşan koleksiyonu içermelidir.
- Eylem [init] veya tanınmayan bir eylem ise, değerler kümesi [initForm] işlevi tarafından rastgele oluşturulur.
- Eylem [formulaire] ise, bu koleksiyon, [validation] eylemi tarafından oturuma yerleştirilen [Request.Form] koleksiyonudur.
5.5.3. Yeni form
Uygulama artık formda aynı içeriği göstermediğinden, formun dinamik olarak oluşturulması gerekir. Yeni [formulaire.aspx] sayfası şu şekilde olur:
<%@ Page src="formulaire.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="formulaire" %>
<HTML>
<HEAD>
<title>Formulaire</title>
<script language="javascript">
function effacer(){
alert("Vous avez cliqué sur le bouton [Effacer]");
}
function raz(liste){
liste.selectedIndex=-1
}
</script>
</HEAD>
<body>
<p>
Gestion d'un formulaire
</p>
<hr>
<form name="formulaire" method="post" action="main.aspx?action=validation">
<table border="1">
<tr>
<td>
Etes-vous marié(e)</td>
<td>
<p align="center">
<INPUT type="radio" value="oui" name="rdMarie" <%=rdouichecked%>>Oui
<INPUT type="radio" value="non" name="rdMarie" <%=rdnonchecked%>>Non
</p>
</td>
</tr>
<TR>
<TD>Cases à cocher
</TD>
<TD>
<P align="center">
<INPUT type="checkbox" value="un" name="C1" <%=c1checked%>>1
<INPUT type="checkbox" value="deux" name="C2" <%=c2checked%>>2
<INPUT type="checkbox" value="trois" name="C3" <%=c3checked%>>3
</P>
</TD>
</TR>
<TR>
<TD>Champ de saisie</TD>
<TD>
<P align="center">
<INPUT type="text" maxLength="30" value="<%=txtSaisie%>" name="txtSaisie">
</P>
</TD>
</TR>
<tr>
<td>
Mot de passe</td>
<td>
<p align="center">
<input type="password" maxlength="12" size="12" value="<%=txtMdp%>" name="txtMdp">
</p>
</td>
</tr>
<tr>
<td>
Boîte de saisie</td>
<td>
<textarea name="areaSaisie"><%=areaSaisie%></textarea>
</td>
</tr>
<tr>
<td>
ComboBox</td>
<td>
<select name="cmbValeurs">
<%=cmbValeursOptions%>
</select>
</td>
</tr>
<tr>
<td>
Liste à choix simple</td>
<td>
<select size="3" name="lstSimple">
<%=lstSimpleOptions%>
</select>
<INPUT type="button" value="Raz" name="btnRazSimple" onclick="raz(lstSimple)">
</td>
</tr>
<tr>
<td>
Liste à choix multiple</td>
<td>
<select multiple size="3" name="lstMultiple">
<%=lstMultipleOptions%>
</select>
<INPUT type="button" value="Raz" name="btnRazMultiple" onclick="raz(lstMultiple)">
</td>
</tr>
<tr>
<td>
Bouton simple</td>
<td>
<p align="center">
<input onclick="effacer()" type="button" value="Effacer" name="btnEffacer">
</p>
</td>
</tr>
<tr>
<td>
Bouton submit</td>
<td>
<p align="center">
<input type="submit" value="Envoyer" name="btnEnvoyer">
</p>
</td>
</tr>
<tr>
<td>
Bouton reset</td>
<td>
<p align="center">
<input type="reset" value="Rétablir" name="btnRetablir" runat="server">
</p>
</td>
</tr>
</table>
<input type="hidden" name="secret" value="uneValeur">
</form>
</body>
</HTML>
HTML kodunda görünen dinamik değişkenleri açıklayalım:
değişken | rol |
[oui] radyo düğmesinin işaretlenmesi gerekiyorsa "checked" değerini alır, aksi takdirde "" değerini alır | |
aynı durum [non] radyo düğmesi için de geçerlidir | |
Aynı durum, [C1] onay kutusu için de geçerlidir | |
onay kutusu için de aynı şekilde [C2] | |
Aynı durum [C3] onay kutusu için de geçerlidir | |
[txtSaisie] alanına yerleştirilecek metin | |
[txtMdp] alanına yerleştirilecek metin | |
[areaSaisie] alanına yerleştirilecek metin | |
HTML metni, [cmbValeurs] açılır listesindeki seçenekler | |
seçim listesindeki metin HTML [lstSimple] | |
HTML metni, [lstMultiple] seçim listesindeki seçeneklerden | |
Bu değişkenlerin değerleri, [formulaire.aspx.vb] sayfası denetleyicisi tarafından hesaplanır:
Imports Microsoft.VisualBasic
Imports System.Collections.Specialized
Public Class formulaire
Inherits System.Web.UI.Page
' formun sabit alanları
Private libellésCmbValeurs() As String = {"choix1", "choix2", "choix3"}
Private valeursCmbValeurs() As String = {"1", "2", "3"}
Private libellésLstSimple() As String = {"liste1", "liste2", "liste3"}
Private valeursLstSimple() As String = {"1", "2", "3"}
Private libellésLstMultiple() As String = {"multiple1", "multiple2", "multiple3", "multiple4", "multiple5"}
Private valeursLstMultiple() As String = {"1", "2", "3", "4", "5"}
' formun dinamik alanları
Protected rdouichecked As String
Protected rdnonchecked As String
Protected c1checked As String
Protected c2checked As String
Protected c3checked As String
Protected txtSaisie As String
Protected txtMdp As String
Protected areaSaisie As String
Protected cmbValeursOptions As String
Protected lstSimpleOptions As String
Protected lstMultipleOptions As String
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
' oturumdan önceki isteği alınır
Dim form As NameValueCollection
If Not Context.Items("formulaire") Is Nothing Then
form = Context.Items("formulaire")
Else
form = New NameValueCollection
End If
' görüntülenecek sayfa hazırlanıyor
' radyo düğmeleri
rdouichecked = ""
rdnonchecked = "checked"
If isEqual(form("rdMarie"), "oui") Then
rdouichecked = "checked"
rdnonchecked = ""
End If
' onay kutuları
c1checked = ""
If isEqual(form("C1"), "un") Then c1checked = "checked"
c2checked = ""
If isEqual(form("C2"), "deux") Then c2checked = "checked"
c3checked = ""
If isEqual(form("C3"), "trois") Then c3checked = "checked"
' giriş alanları
txtSaisie = ""
If Not form("txtSaisie") Is Nothing Then txtSaisie = form("txtSaisie").ToString
txtMdp = ""
If Not form("txtMdp") Is Nothing Then txtMdp = form("txtMdp").ToString
areaSaisie = ""
If Not form("areaSaisie") Is Nothing Then areaSaisie = form("areaSaisie").ToString
' listeler
Dim sélections() As String = {}
If Not form("cmbValeurs") Is Nothing Then sélections = form.GetValues("cmbValeurs")
cmbValeursOptions = getOptions(valeursCmbValeurs, libellésCmbValeurs, sélections)
sélections = New String() {}
If Not form("lstSimple") Is Nothing Then sélections = form.GetValues("lstSimple")
lstSimpleOptions = getOptions(valeursLstSimple, libellésLstSimple, sélections)
sélections = New String() {}
If Not form("lstMultiple") Is Nothing Then sélections = form.GetValues("lstMultiple")
lstMultipleOptions = getOptions(valeursLstMultiple, libellésLstMultiple, sélections)
End Sub
Private Function getOptions(ByRef valeurs() As String, ByRef libelles() As String, ByRef sélections() As String) As String
' <select> etiketindeki seçeneklerin kodunu döndürür
' değerler: etiketin seçeneklerinin değerleri tablosu
' etiketler: etiketin seçeneklerinin etiket tablosu
' seçimler: seçilecek seçenekler
Dim iValeur As Integer
Dim iSelection As Integer
Dim selected As String
Dim toString As String = ""
' seçeneklerin değer listesi taranır
For iValeur = 0 To valeurs.Length - 1
' geçerli değerin seçilmesi gerekip gerekmediğine bakılır
selected = "" : iSelection = 0
Do While iSelection < sélections.Length And selected = ""
If valeurs(iValeur) = sélections(iSelection) Then selected = "selected"
iSelection += 1
Loop
' seçeneğin HTML kodunu eklenir
toString += "<option " + selected + " value='" + valeurs(iValeur) + "'> " _
+ libelles(iValeur) + "</option>" + ControlChars.CrLf
Next
' sonuç döndürülür
Return toString
End Function
Private Function isEqual(Byval champ As Object, ByVal valeur As String) As Boolean
' alanın değere eşit olması durumunda true değerini döndürür
If champ Is Nothing OrElse champ.ToString <> valeur Then
Return false
Else
Return true
End If
end function
End Class
[formulaire.aspx] sayfası çalışmaya başladığında, bağlamında görüntülemesi gereken alanların değer koleksiyonuyla ilişkili bir "form" anahtarı bulacaktır.
' oturumdaki önceki sorguyu alıyoruz
Dim form As NameValueCollection
If Not Context.Items("formulaire") Is Nothing Then
form = Context.Items("formulaire")
Else
form = New NameValueCollection
End If
Neden [Context.Items("formulaire")] nesnesinin varlığının kontrol edildiği merak edilebilir. Aslında, denetleyici her durumda bu nesneye bir değer atar. Ancak, müşterinin denetleyiciden geçmeden doğrudan [formulaire.aspx] sayfasını talep etmesini engelleyen hiçbir şey yoktur. Böyle bir durumda, yukarıdaki kod boş bir değer koleksiyonuyla çalışacaktır, ancak bir "çökme" meydana gelmeyecektir.
Kod, kendisine atanan HTML sayfasının tüm dinamik değişkenlerini hesaplamak için aldığı değer koleksiyonunu tarar. Uzun olsa da bu kod özellikle karmaşık değildir; bu açıklamayı ağırlaştırmamak için okuyucunun kodu kendisi incelemesine bırakıyoruz. Bununla birlikte, üç adet [select] türündeki listeden HTML kodunun nasıl oluşturulacağına odaklanacağız. Bu kod, aşağıdaki işlev tarafından oluşturulur:
Private Function getOptions(ByRef valeurs() As String, ByRef libelles() As String, ByRef sélections() As String) As String
' <select> etiketinin seçeneklerinden HTML kodunu döndürür
' değerler: etiketin seçeneklerinin değerlerini içeren dizi
' etiketler: etiketin seçeneklerinin etiketleri tablosu
' seçimler: seçilecek seçenekler
Dim iValeur As Integer
Dim iSelection As Integer
Dim selected As String
Dim toString As String = ""
' seçeneklerin değer listesi taranır
For iValeur = 0 To valeurs.Length - 1
' geçerli değerin seçilmesi gerekip gerekmediğine bakılır
selected = "" : iSelection = 0
Do While iSelection < sélections.Length And selected = ""
If valeurs(iValeur) = sélections(iSelection) Then selected = "selected"
iSelection += 1
Loop
' seçeneğin HTML kodunu eklenir
toString += "<option " + selected + " value='" + valeurs(iValeur) + "'> " _
+ libelles(iValeur) + "</option>" + ControlChars.CrLf
Next
' sonuç döndürülür
Return toString
End Function
<select> etiketinin seçeneklerinin aşağıdaki HTML koduna karşılık geldiğini hatırlatmak isteriz:
Dolayısıyla her seçenek için üç bilgi üretilmesi gerekir:
- [value] özniteliğindeki seçenek değeri
- <option> ve </option> etiketleri arasındaki seçenek metni
- seçeneğin listeden seçilmesi gerekiyorsa [selected] anahtar sözcüğü
Her bir seçenek için bu üç bilgiyi oluşturmak üzere, [getOptions] işlevi üç değer alır:
- [valeurs]'teki seçenek değerleri tablosu
- [libelles]'teki seçenek metinleri tablosu
- [sélections]'teki seçilecek değerler tablosu
5.5.4. Onay sayfası
Onay sayfası değişmeden kalır:
[validation.aspx]
<%@ Page src="validation.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="validation" %>
<HTML>
<HEAD>
<title>validation</title>
</HEAD>
<body>
<P>Valeurs saisies</P>
<HR width="100%" SIZE="1">
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1">
<TR>
<TD width="84">rdMarie</TD>
<TD><% =rdMarie%></TD>
</TR>
<TR>
<TD width="84">C1</TD>
<TD><%=C1%></TD>
</TR>
<TR>
<TD width="84">C2</TD>
<TD><%=C2%></TD>
</TR>
<TR>
<TD width="84">C3</TD>
<TD><%=C3%></TD>
</TR>
<TR>
<TD width="84">txtSaisie</TD>
<TD><%=txtSaisie%></TD>
</TR>
<TR>
<TD width="84">txtMdp</TD>
<TD><%=txtMdp%></TD>
</TR>
<TR>
<TD width="84">areaSaisie</TD>
<TD><%=areaSaisie%></TD>
</TR>
<TR>
<TD width="84">cmbValeurs</TD>
<TD><%=cmbValeurs%></TD>
</TR>
<TR>
<TD width="84">lstSimple</TD>
<TD><%=lstSimple%></TD>
</TR>
<TR>
<TD width="84">lstMultiple</TD>
<TD><%=lstMultiple%></TD>
</TR>
<TR>
<TD width="84">secret</TD>
<TD><%=secret%></TD>
</TR>
</TABLE>
<P>
<a href="main.aspx?action=formulaire">Retour au formulaire</a>
</P>
</body>
</HTML>
[validation.aspx.vb]
Imports Microsoft.VisualBasic
Imports System.Text.RegularExpressions
Public Class validation
Inherits System.Web.UI.Page
Protected rdMarie As String
Protected C1 As String
Protected C2 As String
Protected C3 As String
Protected txtSaisie As String
Protected txtMdp As String
Protected areaSaisie As String
Protected cmbValeurs As String
Protected lstSimple As String
Protected lstMultiple As String
Protected secret As String
Protected delimiteur As New Regex("\r\n")
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'gönderilen parametreler alınır
rdMarie = getValue("rdMarie")
C1 = getValue("C1")
C2 = getValue("C2")
C3 = getValue("C3")
txtSaisie = getValue("txtSaisie")
txtMdp = getValue("txtMdp")
areaSaisie = String.Join(",", delimiteur.Split(getValue("areaSaisie")))
cmbValeurs = getValue("cmbValeurs")
lstSimple = getValue("lstSimple")
lstMultiple = getValue("lstMultiple")
secret = getValue("secret")
' bunlar oturuma kaydedilir
'Session("form") = Request.Form
End Sub
Private Function getValue(ByVal champ As String) As String
' POST isteğindeki [champ] alanının değerini alıyoruz
' ne anlama geliyor?
If Request.Form(champ) Is Nothing Then Return ""
' alanın değerini veya değerlerini alır
Dim valeurs() As String = Request.Form.GetValues(champ)
Dim valeur As String = ""
Dim i As Integer
For i = 0 To valeurs.Length - 1
valeur += "[" + valeurs(i) + "]"
Next
Return valeur
End Function
End Class
5.5.5. Testler
[main.aspx, main.aspx.vb,formulaire.aspx,formulaire.aspx.vb, validation.aspx, validation.aspx.vb] dosyaları <application-path> dizinine yerleştirilir ve Casini (<application-path>,/mvcform3) parametreleriyle başlatılır. Ardından [http://localhost/mvcform3/main.aspx] URL'sini çağırırız. Önceden başlatılmış formu elde ederiz:
Formu şu şekilde dolduruyoruz:
Yukarıdaki [Envoyer] düğmesini kullanıyoruz. Sunucudan şu yanıtı alıyoruz:
Yukarıdaki [Retour au formulaire] bağlantısını kullanarak forma geri dönüyoruz. Aşağıdaki yeni yanıtı alıyoruz:
Formu, onayladığımız haliyle görüyoruz.
5.5.6. Sonuç
Yukarıdaki örnek, istemci ile sunucu arasındaki istek-yanıt döngüleri boyunca bir sayfanın durumunu korumak mümkün olduğunu göstermiştir. Bununla birlikte, bu iş o kadar da kolay değildir. Daha sonraki bir bölümde, ASP.NET ile sunucunun bir sayfanın durumunu kendi kendine geri yüklemesini sağlamanın mümkün olduğunu göreceğiz.