Html'de Form ve CGI
HTML ' de Form ve CGI
Internet, bilimadamlarının birbirlerine araştırmalarıyla ilgili rapor vermelerini sağlayan bir Ağlar-arası Ağ olarak başlamış ise de, bugün hemen herkesin, yararlı olsun, olmasın, her türlü bilgiyi alıp-verdiği başlıca alan haline gelmiş bulunuyor. Kimine göre, Internet, duragan bilgisayar ekrarınını televizyon ekranına çevirdiği için bu kadar cazip hale geldi. Kimine göre, Internet’in sırrı ulaşım ve talep etme kolaylığı getirmesinde. Her türlü mal ve hizmet, artık Internet’te yapazarlanıyor ve Internet yardımıyla edinilebiliyor. Ödemelerinizi Internet’te yapabilirsiniz. Bu grup, Güvenli HTML (SHTML) denen yeni bir protokolün yaygınlaşmasıyla, Internet’te elektronik ticaretin de artacağı kanısında.
Internet’in bu ikinci işlevi, yani Internet’in sadece Web sayfası sahibinin sunduğu bilgilerin ziyaretçi tarafından alınmasına yarayan tek yönlü bir yol değil de, ziyaretçinin de Web sayfası sahibine birşeyler gönderebilmesi, HTML’in Form başlığı altında toplanan imkan ve yetenekleri sayesinde mümkün oldu. Elektronik ticaret de, HTML’in FORM etiketinin kullanımından başka bir şey değil.
FORM, sizin Web tasarımcısı olarak sayfanıza koyacağınız ve içinde ziyaretçinin dolduracağı boşluklar veya ziyaretçinin yapacağı tercihleri belirteceği kutular bulunan ve en sonunda bu bilgileri size göndereceği bir düğme bulunan bir Web sayfasıdır. FORM, bir sayfanın içinde bir bölüm olabileceği gibi, başlıbaşına bir sayfa da olabilir. FORM, ziyaretçiye “girdi" yapma imkanı verebilir; vermeyebilir. FORM düz bir metin olabilir; resimlerle süslenmiş olabilir. Ne kadar işlenmiş olursa olsun, bütün HTML etiketleri gibi formlar da bir etiketle başlar ve biter. Şimdi bu bölümde <FORM>..</FORM> etiketinin arasını doldurmayı öğrenelim.
Bu arada bir uyarı notu: Oluşturacağınız form, ekranda çizilecek ve size başarılı bir form yapıp, yapmadığını görme imkanı verecektir. Ama formun gerçekten yapmasını istediğiniz işleri yapıp, yapmadığını sınamak için, örneğin altına koyacağınız Gönder düğmesine basmanızın bir faydası olmayacaktır. Çünkü HTML’de form, karşısında o formdaki bilgileri alıp bir şeyler yapacak bir program olsun ister. Bu programlar, genellikle Web Server dediğimiz, ziyaretçilere Web sayfalarındaki bilgileri sunan programların bir bölümüdür. En yaygın Web Server programları (Unix ortamında Apache, Windows ortamında Microsoft Internet Information Server, ziyaretçiden gelen form bilgisini alacak ve işleyecek “Web Server’a ortak Giriş Kapısı" diye adlandırabileceğimiz CGI (Commen Gateway Interface) oluştururlar ve burada ziyaretçilerden gelen formları işleyecek programlara yer verirler. Bu programlar genellikle CGI programı adıyla bilinir. Bu tür programları, Internet hizmeti yapmadan sadece formlarınızı sınamak amacıyla PC veya Macintosh bilgisayarlara koymak da mümkündür. Ancak bilgisayarınıza böyle bir CGI programı kurduğunuz taktirde formlarınızı bu programa “göndererek" sınayabilirsiniz.
Formun Bölümleri
HTML formunun üç bölümü vardır. Bunlar, Web tasarımcısının formdan beklediği eylemin (Action) ne olduğunu gösteren ve ziyaretçinin tarayıcısına hitabeden bölümü; ziyaretçinin doldurması gereken boşluklar veya tercih etmesi gereken seçenekler; ve ziyaretçiye bu formun eylem komutunu harekete geçirme veya vaz geçme imkanı veren komut düğmeleri.
Action ve Method
Web alanınızda bir form oluşturmak için kullanacağınız <FORM> etiketi, kullanıcının tarayıcı programına bu formdaki bilgileri ne yapması gerektiğine ilişkin talimatı da içerir. Bunun için FORM etiketinin içinde, tarayıcıya ACTION yüklemiyle bu formun doldurularak gönderilmesi halinde içindeki bilgilerin nerede, hangi adreste, hangi programa teslim edileceğini söylersiniz. HTTP protokolü Web Server ile ziyaretçinin bilgisayarı arasında iki tür iletişime imkan verdiği için bu bölümde tarayıcıya hangi yöntemi seçmesi gerektiğini de METHOD yüklemiyle bildirmeniz gerekir.
Dolayısıyla Form etiketinin yazılış kuralı şöyle olacaktır:
<FORM ACTION="url" METHOD=POST veya GET>
Burada url harfleri yerine bu form ile gelecek bilgiyi işleyecek programın adresi bulunacaktır. Örneğin: “/cgi-bin/siparis.cgi"
CGI programları için aşağıda daha geniş bilgi bulacaksınız.
METHOD hanesine ya GET ya da POST yazabilirsiniz. Get ve Post, ziyaretçinin bilgisayarı ile Web Server arasında kurulacak HTTP prorotokolüne dayanan bağlantı, ziyaretçinin Server’a bu iki yöntemden birisiyle bilgi göndermesini sağlar. Aralarındaki fark, Get yönteminde bilgiler Web Server’da “querry_string" denen değişkenin içine yazılırken, Post yönteminde bu bilgiler “stdin" değişkenine yerleştirilir. Server’larda ikinci değişken birincisinden çok yer tutar; yani Post yöntemiyle daha çok bilgi gönderilebilir. Web alanı işletmecileri giderek daha yüksek oranda Post yöntemini tercih ediyorlar. Gerçek bir form yaptığınız ve Web alanınıza koyacağınız zaman, Web alanınıza ev sahipliği yapan firmanın teknik yetkililerine, formlarınızda ACTION ve METHOD yüklemlerinin karşısına ne yazacağınızı sormanız gerekir.
Form etiketinin önüne form bilgisi ziyaretçinin bilgisayarından sizin Web Server’ınıza nasıl bir şifreleme yöntemi ile gelsin istiyorsanız, onu da yazabilirsiniz. Fakat bu bilgi Web Server programlarına göre değiştiği için burada böyle bir imkanın varlığını belirtmekle yetineceğiz. “ENCTYPE="....." şeklinde yazılan bu bölümü doldurmazsanız, varsayılan şifreleme yöntemi, HTTP’nin standart kodlama yöntemi olan MIME olacaktır.
Doldurulacak Boşluklar ve İşaretlemeler
<FORM>...</FORM> etiktenin arasını ya kullanıcının dolduracağı boşluklar, ya da tercih yapmasına imkan veren listeler ve düğmelerle doldurmanız gerek. Bunu sağlayan başlıca kontrol elemanlarınız INPUT , SELECT ve TEXTAREA etiketidir. Şimdi bunları sırasıyla inceleyelim:
INPUT
INPUT etiketi ile ziyaretçiye, forma klavyesinden veya fare ile işaretlemek suretiyle bilgi girmesi imkanı veririz. Bu etiketi kullanmanın genel biçimi şöyledir:
<INPUT TYPE="..." NAME="..." VALUE="..." SIZE="..." MAXLENGTH=".." SCR="..." CHECKED"....">
Şimdi bu etiketin kullanım ilkelerini kullanıcının yapabileceği işlere göre ayırarak inceleyelim
Kullanıcının klavyesi ile bir metin girmesi için:
TYPE=TEXT NAME="..." VALUE="..." SIZE="..." MAXLENGTH="..."
“Size" hanesi bu kutunun kullanıcının ekranında gösterileceği genişliği karakter olarak belirler; “Maxlenghth" hanesi ise kullanıcının girebileceği metnin uzunluğunu karakter olarak belirler. Bu haneyi koymaz ve bir değer vermezseniz, tarayıcı azami metin uzunluğunu 21 karakter olarak varsayar. Bu kutu ekranda gösterildiğinde içinde bir yazı olsun istiyorsanız, bunu “Value=..." hanesine tırnak içinde yazın. Daha sonra CGI programı düzeyinde bu bilgiyi bir veri bankasına işlemek, bir elektronik mektup içinde veya herhangi bir başka tarzda kullanmak istiyorsanız, bu alana “Name=..." hanesinin içine yazmak suretiyle isim vermeniz gerekir.
· Kullanıcının parola girmesi için:
TYPE=PASSWORD NAME="..." VALUE="..." SIZE="..." MAXLENGTH="..."
Metin girme kutusu ile aynı özelliklere sahiptir; fakat bu kutunun içine kullanıcının gireceği bilgiler ekranda gösterilmez yerine yıldız simgesi gösterilir.
· Kullanıcının bir kutuya işaret koyması:
TYPE=CHECKBOX NAME="..." VALUE="..." [CHECKED]
Ziyaretçi, bu komutla oluşturacağınız işaret kutusunun içine fare ile tıklamak veya klavyede aralık tuşuna basmak suretiyle bir çarpı işareti girer veya otomatik olarak konan işareti kaldırabilir. Bu kutuda işaret varsa, tarayıcı “Value=" hanesine yazacağınız bilgiler ve kutunun adını bir çift olarak Server’a gönderir. Kutuda işaret yoksa kutunun adı ve değeri Server’a gönderilmez. Bu kutuyu oluştururken mutlaka Name hanesine tırnak içinde bir isim girmeniz gerekir; yoksa gelecek bilgi hiç bir işinize yaramayabilir. Kutunun otomatik ohardak işaretlenmesini istiyorsanız, CHECKED kelimesine yer verin; istemiyorsanız, bu kelimeyi yazmayın. Bu suretle oluşturulacak kutunun ekranda otomatik şekilde bir yaftası olmayacaktır. Bu nedenle bu kutuyu oluşturmadan önce veya sonra bu kutunun ne işe yaradığını yazın
Kullanıcının yuvarlak bir boşluğun içine siyah bir nokta koyması (Radyo düğmesi):
TYPE=RADIO NAME="..." VALUE="..." [CHECKED]
İşaretlenecek yerin kare kutu değil de bir daire olması dışında bu unsurun bütün özellikleri ve ilkeleri CHECKBOX gibidir.INPUT etiketi ile forma grafik veya gizli metin koymak da mümkündür. HTML 4 ile gelen ekranda kullanıcının fare simgesi ile tıklayabileceği düğme oluşturan BUTTON etiketi yerine, örneğin Gir ve Sil gibi kullanıcının bilgileri Server’a göndermesini veya doldurduğu bilgileri tümüyle silmesini sağlayan işlemler de bu etiketle yapılabilir.
SELECT
Bu etiketi kullanarak, formda bir kutu ve yanında bir aşağı ok oluşturabilirsiniz; kullanıcı aşağı oku tıklamak suretiyle açacağı listeden bir unsuru seçerek, kutunun içine yazılmasını sağlayabilir. Arzu ederseniz, bu unsurlardan birisi otomatik olarak seçilmiş olarak da gösterilebilir. Bu etiketin kullanım şekli şöyledir:
<SELECT NAME="...." SIZE="..." [MULTIPLE]>.....</SELECT>
Size hanesine 1, 2, veya 3 vs.. yazarak, ekrandaki kutunun kaç seçenek göstereceğini belirleyebilirsiniz. Bu hane konulmazsa, otomatik 1 seçenek varsayılır. Bu kutuda gösterilecek seçenekler, <SELECT....>..</SELECT> etiketlerinin arasına <OPTION> etiketiyle yazılır. (<OPTION> etiketi kapatılmaz.) Herhangi bir seçeneğin otomatik olarak seçilmesi için önündeki <OPTION> etiketinin içine SELECTED kelimesi konulur. Örnek:
<select name="Temas" size="1"><option selected>Lütfen bir tercih yapınız<option value="Telefon">Telefon<option value="EPosta">E Posta<option value="Gel">Şahsi Görüşme</select></p>
TEXTAREA
Metin kutusu, ziyaretçiye, Web Server’a uzun metin gönderme imkanı sağlar. bu etiketin kullanım şekli şöyledir:
<TEXTAREA NAME="..." rows=.. cols=..>Kutunun içine otomatik yazılması istenen metin buraya yazılır </TEXTAREA>
“Name=...." yüklemi ile metin kutusuna Server’a gelecek metnin işlenmesi ve kullanılması için gerekli ad verilebilir. “rows=" ve “cols=" yüklemlerinin karşısına verilecek rakamlarla bu kutunun formda kaç satır yüksekliğinde ve kaç harf genişliğinde bir yer alacağı belirtilir. Bu iki ölçünün kutuya girilecek metnin uzunluğu ile ilgisi yoktur.
Gönder ve Sil düğmeleri
Formun mantıksal olarak sonuna, kullanıcının dolduğu bilgileri ve yaptığı tercihleri formu sunan Internet alanına göndermesini sağlayan bir Gönder, veya forma yazdığı bilgileri ve yaptığı tercihleri değiştirmek isteyenlerin tümüyle silebilmesi için bir Sil düğmesi konması gerekir. HTML 4 standartları ile Form’lara düğme (BUTTON) etiketi koymak mümkün oldu. Bundan önce formların, ziyaretçinin bilgisayarı tarafından Server’a gönderilmesi veya o ana kadar yazdıklarını tümüyle silmesi, INPUT etiketinin SUBMIT ve RESET yüklemleriyle kullanılması ile mümkündü.
Bunun için INPUT etiketi şöyle kullanılır:
<INPUT TYPE=SUBMIT NAME=Gonder VALUE="Gönder">
<INPUT TYPE=RESET NAME=Sil VALUE="Sil">
HTML 4 sayesinde tarayıcının otomatik düğme şekli yerine kendi rdüğme grafiklerimizi kullanabileceğimiz gibi sayfaya birden fazla ve değişik maksatlarla düğme koyabiliriz. Ancak her düğmenin ayrı ismi ve ayrı değeri olması gerekir. Bu kodu şöyle yazabiliriz:
<BUTTON TYPE=SUBMIT NAME=Gonder VALUE="Gönder"><IMG SRC="gonder.gif></BUTTON>
<BUTTON TYPE=RESET NAME=Sil VALUE="Sil"><IMG SRC="sil.gif></BUTTON>
Örnek
Formlarla ilgili bu temel bilgileri sıraladıktan sonra, basit bir form örneği yapalım. Herzaman olduğu gibi, önce yapacağımız şeyin (formun ) stratejisini belirleyelim. Bu bir kitabevinin kitap sipariş formu olacak. Köşesine logomuzu koyacağız; ziyaretçinin adını soyadını, e-posta adresini ve adresini isteyeceğiz. Formda, ziyaretçinin ne tür kitaplarla ilgilendiğini belirtmesi için bir çok seçenekli liste sunabiliriz. Sonra ziyaretçiden bazı kutuları ve seçenekleri tıklayarak, bize kendisi hakkında bilgi vermesini isteyeceğiz. En sonunda da bu formu göndermesini veya tümünü silmesini sağlayan iki düğme sunacağız. Formumuz bir Web alanının parçası olacağı için, ziyaretçinin geri dönmesini ve ilk sayfamıza gitmesini sağlayan iki yol gösterme düğmesi koyabiliriz.
Bir formda form unsurları ile unsurların yanında yer alan ve neye ilişkin olduklarını belirten metinleri hizalamak oldukça zordur. Kutuların altalta gelmesi için, aralıktan yararlanmak ise hemen hemen imkansız denilecek kadar zordur. Bu nedenle mimari ilkemiz, formun içine bir tablo yerleştirmek ve form unsurlarını tablonun hücrelerine koymak olacak. Örnek form için, bir logo grafiğine ihtiyacınız olabilir. Bu grafik, görsel olarak alanınızdaki bütün sayfalar arasında birlik sağlayabilir ve form sayfasının hangi alana ait olduğunu gösterebilir. Örnek bir sayfa için şu kodu kullanabilirsiniz:
<html>
<head>
<title>Sizinle nasıl temas kuralım</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1254">
</head>
<body bgcolor="#FF8040">
<div align="center"><center>
<table border="0" width="100%">
<tr>
<td width="13%"><img src="Logo.gif" width="92" height="125" alt="Logo.gif (15642 bytes)"></td>
<td width="54%"><h1><font face="Arial" color="#804040">Sizinle nasıl temas kuralım?</font></h1>
</td>
<td width="33%"></td>
</tr>
<tr>
<td width="13%"></td>
<td width="54%"><form method="POST" name="temasform" action="Post">
<div align="center"><center><table border="0" width="103%" height="448">
<tr>
<td width="42%" height="23"><div align="right"><p>Adınız</td>
<td width="61%" height="23"><input type="text" name="Adınız" size="37" tabindex="1"
maxlength="25"></td>
</tr>
<tr>
<td width="42%" height="23"><div align="right"><p>Adresiniz</td>
<td width="61%" height="23"><input type="text" name="Adresiniz" size="37" tabindex="2"></td>
</tr>
<tr>
<td width="42%" height="23"><div align="right"><p>Posta Kodu</td>
<td width="61%" height="23"><input type="text" name="Kod" size="37" tabindex="3"
maxlength="5"></td>
</tr>
<tr>
<td width="42%" height="23"><div align="right"><p>E Posta</td>
<td width="61%" height="23"><input type="text" name="eposta" size="37" tabindex="4"></td>
</tr>
<tr>
<td width="103%" height="44" colspan="2"><font face="Arial"><strong><big>Sizi tanıyabilir
mıyız?</big></strong></font></td>
</tr>
<tr>
<td width="42%" height="19"><div align="right"><p><font face="Arial">Eğitim düzeyim:</font></td>
<td width="61%" height="19"><input type="checkbox" name="ilkokul" value="ON" tabindex="5">Ilk<input
type="checkbox" name="Orta" value="ON" tabindex="6">Orta<input type="checkbox" name="yuksek"
value="ON" tabindex="6">Yüksek</td>
</tr>
<tr>
<td width="42%" height="31"><div align="right"><p><font face="Arial">Merak Alanım</font></td>
<td width="61%" height="31"><select name="Merak" size="1" tabindex="7" style="font-family: sans-serif">
<option selected value="Bir alan seçiniz">Bir alan seçiniz</option>
<option value="Polisiye">Polisiye</option>
<option value="Siir">Şiir</option>
<option value="Tarih">Tarih</option>
<option value="Siyaset">Siyaset</option>
</select></td>
</tr>
<tr>
<td width="103%" height="36" colspan="2"><div align="left"><p><font face="Arial"><strong>Bize
iletmek istediğiniz bir mesaj var mı?</strong></font></td>
</tr>
<tr>
<td width="42%" height="117"></td>
<td width="61%" height="117"><textarea rows="5" name="mesaj" cols="33" tabindex="9">Mesajınınızı buraya yazınız</textarea></td>
</tr>
<tr>
<td width="42%" height="25"></td>
<td width="61%" height="25"><input type="submit" value="Gönder" name="Gonder"
tabindex="10"
style="font-family: sans-serif; font-size: 14pt; background-color: rgb(128,128,0); color: rgb(255,255,255)">
<input type="reset" value="Sil" name="Sil" tabindex="11"
style="font-family: sans-serif; font-size: 14pt; background-color: rgb(128,128,0); color: rgb(255,255,255); text-align: center"></td>
</tr>
<tr>
<td width="42%" height="18"></td>
<td width="61%" height="18"><div align="right"><p><a href="#">Geri dön</a>
<a href="#">İlk Sayfaya git</a></td>
</tr>
</table>
</center></div>
</form>
</td>
<td width="33%"></td>
</tr>
</table>
</center></div>
</body>
</html>
Bu HTML dosyasının oluşturduğu form ise ekranda şöyle görünüyor:Burada, Form etiketine daha önce belirttiğimiz özelliklerini veren yüklemlerden farklı olarak, fodrma bir isim verdiğimiz dikkatinizi çekmiş olmalı. Ayrıca kullanıcıya kutudan kutuya, klavyede TAB (Sekme) tuşuna basarak ilerleme imkanı veren ve tarayıcının formda kutulara hangi sırayla gideceğini gösteren “tabindex=.." yüklemine dikkat ediniz. Bu yüklemi bütün form elemanları için kullanabilirsiniz. Formu içine koyduğumuz tabloya çerçeve çizgisi vermemekle, formun “form gibi" görünmesini sağladık. Tablonun hücrelerinin enini (width) mutlak sayı ile değil de yüzde kullanarak sınırladığımız için, formumuz ziyaretçinin ekranında sağda solda boşluk bırakmadan, büyüyüp, küçülebilecektir.
CGI
Forma ilgili bütün bu çaba, bir tek karşılık için, ziyaretçinin bize bilgi veya sipariş vermesi, başka bir deyişle ziyaretçinin formu doldurarak, “Gönder" düğmesinin tıklaması içindir. Fakat bu düğmenin tıklanması, bizim formdan beklediğimizin gerçekleşmesine yetmez. Ziyaretçinin tarayıcı programının Server’a ileteceği bilgi ile Server’da “bir şey yapılması" gerekir. Bunu yapacak olan da ziyaretçilerle Server arasındaki arabirim olan CGI (Common Gateway Interface) programlarıdır.
Microsoft’un NT işletim sisteminin, Ağ (Network) işletim sistemi olarak Unix sisteminin yerine ciddi bir aday olduğunu ilan ettiği iki üç yıl öncesine kadar, ağ dendiği zaman otomatik olarak akla Unix işletim sistemi gelirdi. Bu sistemin Internet uzantısını sağlayan programlar ise Unix ortamı için geliştirilmiş diller ve programlar kullanırlardı. “Perl" ve “tcl" bu dillerin en yaygınlarıdır. Bu diller o denli yayıldı ve klasik hale geldi ki, NT ortamı için Perl çeviriciler geliştirildi. Bir Web Server’ın DOS ortamında işletilmesi halinde, CGI programları sdandart DOS “batch programları" bile olabilir. Ancak NT sistemleri için kendi doğal dillerini ve programlarını kullanmak yerinde olur. Nitekim günümüzde Perl’ün yerini hızla Visual Basic ile yazılmış Active Server Page denen arabirimler alıyor. Ayrıca C ve C++ dilleri ile yazılmış arabirimler, örneğin formunuzu alıp, ona uygun arabirim işlemcisi yazan programlar edinebilirsiniz. Macintosh ortamında ise en uygun dil olarak, Applescript sayılabilir.
CGI arabierimi ve programları, bu kitapçığın kapsamı dışında kalıyor. Ama, Qeb tasarımcısı olarak neye ihtiyacınız bulunduğunu bilmeniz için, ziyaretçi “Gönder" tuşuna bastığı zaman, ziyaretçinin bilgisayarı ile sizin Web Server’ınız arasında olup biteni kısaca özetlemekte yarar var.
FORM etiketine koyduğunuz ACTION ve bu eylemin yöntemine ilişkin METHOD yüklemleri doğrultusunda, Web sayfalarınızın bulunduğu Servar’a, formun içerdiği bilgiler toplu halde gönderilir.
Server bu bilgileri, METHOD olarak GET veya POST yöntemlerinden hangisini seçtiğinize bakarak, bu bilgileri CGI programına aktarır. CGI programınız, türüne göre, bu bilgileri önce formdaki değişkenlere verdiğiniz isimlere ve değerlere göre ayırır ve bir liste yapar. Bu listedeki veriler, yine CGI programınızın yapmasını istediğiniz işlemde kullanılır. Çoğunlukla bu bilgilerin (1) bir veri tabanına işlenmesini, (2) ziyaretçiye gönderdiği bilgilerin alındığına ilişkin olarak ya tarayıcısına bir HTML sayfa göndererek, veya elektronik posta ile bir mesaj yollayarak bir karşılık verilmesini, ve (3) Web yöneticisine forma bir ziyaretçinin daha karşılık verdiğine ilişkin bir uyarı mesajı gönderilmesini isteriz. CGI programı bu üç işi birden yapar ve devreden çıkar. Oluşturulacak veritabanı daha sonra çeşitli programlar yardımıyla kullanılabilir.
Web'e Giriş İçin Tıklayınız
HTML'nin Temel Unsurları İçin Tıklayınız
Tablo ve Çerçeveler ve Katmanlar İçin Tıklayınız
HTML'de Form ve CGI İçin Tıklayınız
Sonuç İçin Tıklayınız
Ana Sayfaya Dönmek İçin Tıklayınız
