Photoshop Magazin
 


Spry Framework ile Formlarda Veri Kontrolü

01 June 2009 | Sayı: Jun 2009
 
1 2 3 4 5
 

Form mu? O da ne ki? Yenir mi?
İster bir portal tasarlıyor olun isterse kişisel basit bir web sayfası, tasarımın bir noktasında mutlaka kullanıcıdan bir veri almak zorunda kalacaksınız. Bu bazen iletişim formunda yer alan isim soyad mesaj gibi bilgiler, bazen de bir üye sipariş formunda yer alan kredi kartı bilgisi olabilir. İşte kullanıcılardan bu bilgileri alıp işlememize yarayan alanlara form alanları denir .
Form alanları html kodları içinde <form> ile başlar ve </form> etiketi ile biter. Form etiketi açıldıktan sonra formdan girilecek bilgilerin değerlendirileceği dosyanın tam yolu ve formdan girilecek bilgilerin değerlendirici dosyaya gönderilme yöntemi mutlaka belirtilmelidir. Bunu kısaca şöyle örneklendirebiliriz:


Formu Kim İşleyecek?
Action=”islem.asp” , bize formdan girilecek bilgilerin değerlendirileceği dosyanın tam yolunu
belirtir. Böylece kullanıcı tarafından form doldurduktan sonra girilen bilgileri islem.asp dosyasını kullanarak istediğimiz gibi işleyebiliriz.

Kullanıcıdan istediğimiz bilgileri aldıktan sonra ister database’ye yazdırırız istersek bunu belirli bir adrese mail olarak gönderebiliriz.
Tamamen sizin isteğinize kalmış.

Form Gönderim Metodları
Formun gönderileceği adresi belirledik. Peki hangi metodu kullanarak göndereceğiz. Form göndermede iki farklı yöntem vardır. Bunlar POST ve GET metodlarıdır. GET metodu form parametrelerinin URL içerisinde gönderilmesini saglarken, POST metodu
request header ile gönderilir, URL’de bişey görünmez. O nedenle özel ve gizli olması gereken yerlerde POST metodunu kullanmak yerinde bir karar olacaktır. GET metoduyla gönderilen veriler herkes tarafından görünür.


Hangi Metod Daha Güvenli?
Aşağıdaki resimde GET metodunu kullanan bir kredi kartı ile ödeme formun verileri gönderiş şeklini görüyorsunuz. Ne kadar güvenli değilmi :)

Ödeme formları, kullanıcı adı ve şifre bölümlerinin bulunduğu formlar gibi güvenlik gerektiren formlarda metod olarak POST seçilmelidir. Ayrıca 2048 karekterden fazla veri gönderecekseniz mecburen POST’u seçmelisiniz.

Form Elemanları Nelerdir?
Form elemları kullanıcının bizim istediğimiz verileri girdiği alanlardır. <input type=”” name=”” value=””>
şeklinde ifade edilirler. TYPE kısmı elemanın türünü belirler (metin alanı, checkbox, buton vs). Kullanmak mecburidir.

NAME Form öğesine bir ad verir. islem.asp dosyasında gelen veriler name kısımlarına göre ayrıştılırılır. Kullanmak mecburidir.
VALUE ise öntanımlı değeri ifade eder.
Temel Form Elemanları
TEXT: Tek satırlık veri girişlerinde kullanılır.
CHECKBOX: Boolean (İkili) değerler için ya da aynı anda birden fazla değer alacak veriler için kullanılır.
HIDDEN: Kullanıcıya göstermeden değeri form ile beraber gönderilen alandır.
PASSWORD: Aynı TEXT parametresi gibidir. Farkı veriler girilirken veri görüntülenmez yıldız
(*) işareti çıkar.
RADIO: Alternetifler arasından bir değer kabul
edilebilmesi için kullanılır. Grup içindeki radio düğmelerine aynı isim verilmelidir.

FILE: Form ile beraber dosya göndermeyi olanaklıkılar. Resim yükleme, dosya ekleme gibi.
SUBMIT: Basıldığında form içindeki verileri gönderen düğmedir. (Kaydet butonu gibi)

Formda Verileri Nasıl Kontrol Ederiz?
Form üzerinde yer alan form elemanları vasıtasıyla alacağımız verileri işlemeden önce belirli süzgeçlerden geçirmemiz gerekebilir. Mesela bir kullanıcı kaydı formunda isim, soyisim, eposta adresi ve şifre alanlarının boş bırakılmaması gerekir. Çünkü bu alanlardan elde edeceğimiz veriler bize gereklidir ve boş bırakılmadığından emin olmamız gerekir. Peki ama bunu nasıl yapacağız. İşte bu noktada imdadımıza Adobe Labs’ta geliştirilen ve Dreamweaver’de standart olarak sunulan Spry Framework yetişiyor.

DW açıldığında Insert Panel üzerinde bulunan tablardan Spry tabına bastığımızda 3 bölüme ayrılmış vaziyette Spry araçlarını bulabilir ve tek tıklama ile çalışmanıza ekleyebilirsiniz. İlk bölümde yer alan 4 ikon Spry Data (XML,HTML tabanlı bilgileri kullanılabilir formata dönüştürme), sonrasında Spry ile gelen form kontrol araçları ve en sonunda da 5 adet widget olarak adladırılan hazır aracı bulabilirsiniz. Ayrıca Spry Effects (Efektler) adında bir bölüm daha yer alır. Biz bunlardan form kontrol
araçlarını kullanacağız.

Öncelikle formumuzu oluşturmak için, eğer kapalıysa Cntrl + F2 (Apple kullanıcılar Elma + F2) tuşlarına basarak insert panelini aktif edelim. Insert paneli üzerinde yer alan Spry tabına tıklayalım. Açılan tabda bulunan bölümlerde en solda yer alan Spry Menubar Tab butonuna bir kez tıklayalım. Gelin birlikte isim kısmının doldurulması zorunlu bir form yaratalım ve bu alanın doldurulup doldurulmadığını Spry kullanarak kontrol edelim. Eğer doldurulmamışsa da bir uyarı mesajı ile kullanıcıyı uyaralım.

Spry Yardımıyla Güç Bizde Artık
Spry Menubar tab butonuna bir kez tıklayalım. Açılan panelden Spry Validation Text Field butonuna bir kez tıklayalım. Karşımıza Input tag Accessibility Attributes paneli gelecektir.

Burada ID yazan kısım aynı zamanda bizim form elemanımızın Name kısmına da otomatik olarak verilecek değerdir. Burada isterseniz form elemanının önüne açıklamasını da yazabileceğiniz Label Bölümü de yer alır.

İşte sonuç:
Burada SpryValidationTextField.css üzerinde oynayarak istediğiniz uyarı renk ve font özelliklerini değiştirebilirsiniz. Ayrıca belirtmek istediğiniz mesajı da A value is required metni ile değiştirmeniz yeterlidir. Geri kalanı Spry sizin için halledecektir. Eğer boş ise sizin belirlediğiniz uyarı ile kullanıcıyı uyaracaktır. Gelecek sayıda görüşmek üzere. Hoşçakalın

 

 

June 2009

 


Dreamweaver