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

Categories: Internet

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 }’‘