Web Programcılığı1(devamı..)

Cellpadding ve Cellspacing belirteçlerinin kullanilmasi


A   B C


D   E F 


<table border cellpadding=10 cellspacing=0>


<tr>


<td>A</td> <td>B</td> <td>C</td>


</tr>


<tr>


<td>D</td> <td>E</td> <td>F</td>


</tr>


</table>


A   B C


D   E F 


<table border cellpadding=0 cellspacing=10>


<tr>


<td>A</td> <td>B</td> <td>C</td>


</tr>


<tr>


<td>D</td> <td>E</td> <td>F</td>


</tr>


</table>


A   B C


D   E F 


<table border cellpadding=10 cellspacing=10>


<tr>


<td>A</td> <td>B</td> <td>C</td>


</tr>


<tr>


<td>D</td> <td>E</td> <td>F</td>


</tr>


</table>


Tablo içinde birden fazla satir kullanimi


Ocak                 Subat              Mart                    


Bu 1. Hücre    2. Hücre         Diger hücre,  3. hücre      


4. Hücre           ve iste bu  5. hücre                  6. hücre  


<table border>


<tr>


<th>Ocak</th>


<th>?ubat</th>


<th>Mart</th>


</tr>


<tr>


<td>Bu 1. hücre</td>


<td>2. hücre</td>


<td>Diger hücre,<br>3. hücre</td>


</tr>


<tr>


<td>Cell 4</td>


<td>ve i?te bu<br>5. hücre</td>


<td>6. hücre</td>


</tr>


</table>


Hücrenin sagina, soluna ve ortasina metin yazmak


Ocak                     ?ubat         Mart                     


Hepsi ortada     2. hücre    Diger hücre,  3. hücre        


saga yanasik    merkezde default,  sola yanasik        


<table border>


<tr>


<th>Ocak</th>


<th>?ubat</th>


<th>Mart</th>


</tr>


<tr align=center>


<td>Hepsi ortada</td>


<td>2. Hücre</td>


<td>Diger hücre,<br>3. hücre</td>


</tr>


<tr>


<td align=right>saga yanasik</td>


<td align=center>merkezde</td>


<td>default,<br>sola yanasik</td>


</tr>


</table>


Form Hazirlama


Formlar, kullanicidan bilgi girisi oldugu zaman bunlari okunmaya hazir duruma getirmeye yarar. Diger bir deyisle, kullanici ile programci arasinda bir köprü kurar. Programciya mail atmak, WWW üzerinden arastirma yapmak, belirli bir anahtar sözcügü kullanarak arama yapmak, ve hatta telefon bilgi bankalarina girmek form kullanarak halledilir.


Form konusunu anlayabilmek için, HTML programlamayi bilmek ve en azindan bir programlama diline ( tercihan shell, PERL veya C ) hakim olmak gereklidir.


Form hazirlanirken asagidaki adimlar izlenir :


Programin, form hazirladigimizi bilmesi için, <form .. belirteci açilir. Bu belirtecin iki parametresi vardir:


Method


“Method”, kullanicinin girdigi bilgileri ne sekilde alacagimizi belirler. Bu konunun disinda kalmasina ragmen, POST metodunu kullanmanizi tavsiye ederim.


Action


Bu bölüme, alinan girdileri isleyecek programin ismi yazilir. Bu program ayri bir cgi-bin/ dizini altinda durmalidir.


Örnek bir form baslangici söyle olabilir:


<form method=”POST” action=”<http://cclub.metu.edu.tr/cgi-bin/postala>” >


Simdi kullanicinin girecegi bilgiler için forma birkaç bölüm ekleyebiliriz. Bunun için asagidaki parametreleri kullanan <INPUT .. > belirtecine gerek vardir.


Name


Kullanicinin klavyeden girdigi bilgilerin tutuldugu degisken burada tutulur.


Size


Bu sayi, ekranda kullaniciya ayrilan boslugun ne uzunlukta olacagini saptar.


Type


Anket tipi (burada anlatilmayacaktir)


Örnek bir girdiyi olusturmak için su tür bir program yazilabilir.


<INPUT NAME=”isim” SIZE=36>


Birden fazla satir kullanma durumunda, farkli bir seçenegi, <TEXTAREA …> </TEXTAREA> seçenegini kullanmalisiniz :


Name


Yine ayni degisken ismi.


Rows


Bu sayi kullanicinin yazdigi alanin kaç satir olacagini belirler.


Cols


Bu sayi kullanicinin yazdigi alanin kaç sütun olacagini belirler.


<TEXTAREA NAME=”body” rows=10 cols=60></TEXTAREA>


Yukaridaki alana küçük bir metin de yerlestirebilirsiniz.


<TEXTAREA name=”body rows=10 cols=60>


Bu metin, kullanicinin yazacagi alanda görüntülenir.


</TEXTAREA>


Neredeyse bitti. Kullanicinin tüm bilgileri girdikten sonra formu ister yollamasi, isterse tekrar silmesi için ikon yaratan bir <input .. belirtecine gerek vardir. Bu belirtecin aldigi seçenekler,


Type


Kullanilan formun isleme sokulabilmesi için type degeri submit olmalidir. Baska bir seçenek de kullanicinin girdigi tüm bilgileri silmektir. Bunun için type’dan sonra reset gelmelidir.


Value


Buton içine bir mesaj yazacaksaniz, bu seçenegi kullanin. Kullaniciyi bilgilendirmek amaciyla herhangi bir metin yazilabilir.


Reset seçenegi, formu tamamen temizlemez, sadece formdaki degerler eski hale dönerler.


Tipik bir örnek:


<input type=”submit” value=”Bu formu gönder” >


<input type=”reset” value=”Temizle” >


Artik formun yazilimi bitmistir. Formun sonuna </FORM> belirteci konarak form kapatilir.


Tamamlanmis form ekranda su halde görünür.


 


Top of Form 1


E-mail adresiniz :


Isminiz :


Buraya herhangi bir not yazabilirsiniz:


 


Bottom of Form 1


 


<hr>


<p>


<form method=”POST”


action=”<http://cclub.metu.edu.tr/cgi-bin/deneme>”><P>


E-mail adresiniz : <INPUT NAME=”email” SIZE=38>>/P><P>


Isminiz : <INPUT NAME=”name” SIZE=42><P>


Buraya bir?eyler yazabilirsiniz: <P>


<TEXTAREA name=”body” rows=10 cols=50>Something>/TEXTAREA>


<P>


<input type=”submit” value=”Gönder”>


<input type=”reset” value=”Temizle”></P>


</FORM>


<p>


<hr>


Yukaridaki formu doldurup gönderin. Form, cclub.metu.edu.tr adresi üzerinde bir programi çalistiracaktir. Bu program degiskenlerin ismini ve aldiklari degerleri ekrana basacaktir.


Kullanicinin yazdigini okuyabilmek


Bundan sonra kullanicinin forma ne tür bilgiler girdigini bulmak kaldi. Form bilgilerini okuyabilmek için tercihan perl veya shell bilmek gerekir. Burada örnegi verilecek cgi-bin programlarini herhangi bir dilde yazabilirsiniz, buradaki örnekler, hemen herkesin asina oldugu shell script ile yazilacaktir.


Simdi asagidaki bilgilerin girilmesini isteyen bir form hazirlayalim ve .html formatinda yazalim.


Haftanin bir günü (gün)


Bir sifat (sifat)


Bir fiil (fiil)


Yarattiginiz form, cgi-bin dizini altindaki (bu dizine yazma hakki elde etmeniz gereklidir) form.cgi programini çalistirsin.


Bir gün, iki insan ismi, bir sifat ve bir fiil giriniz..


Top of Form 2


· Haftanin bir günü


· Bir sifat


· Bir fiil


Bottom of Form 2


<html>


<title> Form hazirlama </title>


<h3> Bir gün, iki insan ismi, bir sifat ve bir fiil giriniz..</h3>


<hr>


<form method=”POST”


action=”<http://www.catt.ncsu.edu/cgi-bin/madlib.pl>”>


<UL>


<LI> Haftanin bir günü <input name=”gun”>


<LI> Bir sifat <input name=”sifat”>


<LI> Bir fiil <input name=”fiil”>


</UL>


<input type=”submit” value=”Formu postala”>


<input type=”reset” value=”Ekrani temizle”>


</form>


</html>


Yukarida sadece çalistirilmayi bekleyen bir form hazirladik. Aslinda bu haliyle program çalismayacaktir, çünkü henüz cgi-bin altina yerlestirmemiz gereken shell programimizi (kodu) yazmadik. Yazacagimiz kodun amaci, kullanicinin girdigi bilgileri ekranda aynen göstermek.


Kod, programcinin istegi dogrultusunda kolayca degistirilebilir.


##


# ayraç.sh


# Bu program, çagirildigi zaman, ekrana $STRING_QUERY degiskeni


# içindeki degerleri basar. Program, $QUERY_STRING içindeki degisken


# sayisini 3 olarak kabul eder.


##


#!/bin/bash


echo “Content-type: text/plain”


echo


deger=‘echo “$QUERY_STRING” | awk -F”&” ‘{ print $1 “ “ $2 “ “ $3 }’‘


echo $deger


deger1=‘echo “$deger” | awk ‘{ print $1 }’‘


deger2=‘echo “$deger” | awk ‘{ print $2 }’‘


deger3=‘echo “$deger” | awk ‘{ print $3 }’‘


sabit1=‘echo “$deger1” | awk -F”=” ‘{print $1}’‘


sabit2=‘echo “$deger2” | awk -F”=” ‘{print $2}’‘


sabit3=‘echo “$deger3” | awk -F”=” ‘{print $3}’‘


echo $sabit1 $sabit2 $sabit3


belgesi-375

Belgeci , 2280 belge yazmış

Cevap Gönderin