GeoCitiesRank My SiteTake A TourMy GuestbookChat
Pages Like MineSearchSend This PageForums
Email Me
TheTropics


TUTORIAL BAHAGIAN KE 3

Membina Jadual dan Borang

Membina Jadual dan Borang amat rumit, tetapi dengan beberapa panduan yang betul serta latih tubi yang mencukupi, ianya amat mudah. Jadual dan Borang dibina untuk beberapa tujuan misalnya untuk Mendaftarkan Pengunjung-Pengunjung (Guest Book) dan sebagainya.

Mencipta Jadual

Sebelum saya menerangkan bagaimana untuk meletakkan jadual di dalam dokumen, saya akan menjelaskan dahulu beberapa perkara. Jadual ini mempunyai kegunaan yang nyata di dalam menyampaikan maklumat yang tersusun di dalam dokumen HTML. Contohnya Indeks untuk dokumen ini adalah dalam bentuk Jadual yang mengandungi satu siri lis yang tidak tersusun. Namun Jadual mempunyai kegunaan yang kedua penting (malah lebih utama). Ia adalah alat HTML yang utama untuk mengawal susunatur halaman. Ini dilakukan dengan memaparkan jadual (garisannya diperlihatkan) dilembaran Home Page anda dan kemudian meletakkan teks dan grafik di pelbagai sel jadual sebagai satu cara untuk menentukan kawasan-kawasan tertentu di halaman anda. Bahagian ini akan hanya membincangkan bagaimana membina Jadual.

Jadual Asas.

Jadual dibina dengan sepasang tag <TABLE> </TABLE> Tag-tag ini meliputi tag-tag JADUAL BARIS (<TR> </TR>), yang kemudiannya merangkumi pula tag-tag JADUAL DATA (<TD> </TD>). Kod yang mudah bagi sesebuah Jadual mengandungi 2 baris dan tiga lajur akan kelihatan seperti ini:

			<Table>

			       <TR> 
				<TD>Melaka </TD>
				<TD>Kelantan </TD>
				<TD>Kedah </TD>
			       </TR>

			       <TR> 
				<TD>Perak </TD>
				<TD>Selangor </TD>
				<TD>Lain-lain </TD>
			       </TR>

			</TABLE>

Jadual berkenaan akan kelihatan begini:

MelakaKelantanKedah
PerakSelangorLain-lain

Tiada garis! Okay. Garis-garis hendaklah dimasukkan dengan menentukan ketebalan border (dalam ukuran pixels) selepas membuka tag TABLE (<TABLE BORDER=4>). Sekarang Jadual kita akan kelihatan seperti berikut:

MelakaKelantanKedah
PerakSelangorLain-lain

Sekarang teruskan dan lihat apa lagi yang kita gunakan untuk mengawal jadual kita. Kita boleh menengahkan dengan mengikat keseluruhan kod untuk Jadual ini dengan tag-tag CENTER, seperti ini:

MelakaKelantanKedah
PerakSelangorLain-lain
Ketebalan keseluruhan Jadual boleh ditentukan dengan meletakkan nilai dengan ukuran pixels atau peratus di dalam tag TABLE(<TABLE BORDER=4 WIDTH=60%>). Sekarang lihat: :

MelakaKelantanKedah
PerakSelangorLain-lain

Hmmm. Lajur mempunyai kelebaran yang berbeza. Oleh itu kita tentukan kelebarannya dengan meletakkan segugusan kenyataan WIDTH= kenyataan untuk satu JADUAL DATA untuk setiap lajur. Saya rasa mari kita lihat keseluruhan kod Jadual supaya tiada sesiapa yang tersasul disini.

		<TABLE BORDER=4 WIDTH=60%>

		       <TR> 
			<TD WIDTH=33%>Melaka </TD>
			<TD WIDTH=33%>Kelantan </TD>
			<TD WIDTH=33%>Kedah </TD>
		       </TR>

		       <TR> 
			<TD>Perak </TD>
			<TD>Selangor </TD>
			<TD>Lain-lain </TD>
		       </TR>

		</TABLE>

Perhatikan peratus di sini adalah dalam penentuan kelebaran Jadual, bukannya kelebaran halaman(satu kelebihan menentukan lebar dengan pixels). Ini akan memberi:

MelakaKelantanKedah
PerakSelangorLain-lain

Kita juga patut mengenengahkan isi sel. Hal ini boleh dilakukan dengan meletakkan ALIGN=CENTER (atau RIGHT, atau LEFT) untuk setiap tag JADUAL BARIS (<TR ALIGN=CENTER>). Ketentuan ALIGN spec boleh juga di letakkan pada setiap sel individu, dan akan mengambil alih ketentuan penjajaran baris yang awal. Lihat apa jadi:

MelakaKelantanKedah
PerakSelangorLain-lain

Terdapat juga ketentuan VALIGN=CENTER (atau TOP, atau BOTTOM) yang digunakan dalam cara yang sama dengan ALIGN untuk mengawal kedudukan membujur (vertical) setiap isi sel.

Setiap sel di dalam Jadual boleh dicantumkan untuk membentuk sel yang lebih besar dengan menyelitkan COLSPAN= atau ROWSPAN= kepada tag-tag JADUAL DATA . Di dalam sel data pertama di dalam baris pertama ditulis <TD WIDTH=33% ROWSPAN=2>Melaka </TD>, dan sel pertama telah diabaikan untuk memberi ruang yang lebih kepada baris dibawahnya, jadual tersebut kelihatan begini:

MelakaKelantanKedah
SelangorLain-lain

Jika kita telah menambah COLSPAN=2 dan bukan ROWSPAN=2, dan mengabaikan sel di sebelah kanan dan bukan sel dibawah seperti contoh tadi, jadual itu akan berubah dan kelihatan begini:

MelakaKedah
PerakSelangorLain-lain

Kodnya begini:

		<TABLE BORDER=4 WIDTH=60%>

		       <TR ALIGN=CENTER> 
			<TD WIDTH=33% COLSPAN=2>Melaka </TD>
			<TD WIDTH=33%>Kelantan </TD>
			<TD WIDTH=33%>Kedah </TD>
		       </TR>

		       <TR ALIGN=CENTER> 
			<TD>Selangor </TD>
			<TD>Lain-lain </TD>
		       </TR>

		</TABLE>

Saya perlu tegaskan disini bahawa isi sel akan mengubah saiz sel. Jika kita memasukkan teks yang berlebihan di dalam sel-sel, jadual sebegini akan terjadi:

Melaka, Bandaraya BersejarahKelantan, Serambi MekahKedah
PerakSelangorLain-lain

Ini boleh di halang dengan meletakkan arahan NOWRAP kepada tag JADUAL DATA. Kelebaran sel akan bertambah untuk memuatkan isi sel, melupuskan kelebaran sel yang ditentukan oleh anda pada awalnya..

Sebelum mengakhiri bab ini, kita boleh meletakkan `caption'(Tajuk kecil) dengan meletakkan sepasang tag <CAPTION> </CAPTION> melingkungi tag TABLE, tetapi bukan dikawasan baris atau sel. `Caption' akan ditengahkan, dan diletakkan sebelah atas. Kedudukannya boleh diubah di bawah dengan meletakkan ALIGN=BOTTOM di pembukaan tag CAPTION.

Jadual Negeri-Negeri
MelakaKelantanKedah
PerakSelangorLain-lain

Perlu disebutkan di sini bahawa sel TABLE HEADER (<TH> </TH>). Ia menyerupai dengan sel JADUAL DATA (TABLE DATA) dalam semua hal kecuali isinya dakan ditebalkan.

Berhati-hati di dalam menuliskan kod-kodnya. Kesilapan yang kecil akan menjadikan Jadual anda kelihatan janggal.

Pergi ke Indeks.

Mencipta & Menggunakan BORANG (FORMS).

Bahagian ini agak panjang. Mungkin akan hendak merokok sebentar, Silakan...

Untuk permulaan, kita lihat satu BORANG yang menggunakan kebanyakan ciri-ciri sesuatu Borang, dengan kod yang yang dilaksanakan oleh setiap ciri yang ditunjukkan secara huruf tebal di bawah nya.


Pertamanya, BORANG akan dimulai dengan tag FORM . Untuk penerangan berkenaan METHOD dan ACTION, lihat bahagian akhir bab ini.

<FORM METHOD="POST" ACTION="mailto:nobody@nowhere.net">


Sekarang, lihat TEXT FIELD:

Name:
Name:<Input name="name" Value="default text" Size=40 maxlength=40>

Name ialah apakah isi medan teks akan digelarkan di dalam penghantaran borang . Value ialah teks mantap yang akan muncul di dalam medan teks (Jika ada). Size ialah berapa besar kotak yang akan muncul di halaman (selebar berapa banyak huruf). Maxlength ialah bilangan huruf yang maksima yang boleh dimasukkan di dalam medan teks.


Sekarang pada bahagian TEXT AREA:

Tuliskan komen/pandangan anda:

<Textarea Name="Komen" Rows=4 Cols=70> </TEXTAREA>

Name ialah nama isi-isi yang akan dipanggil dalamasa penghantaran borang . Baris dan Lajur (Rows and columns) menerangkan saiz `text area'.


BUTANG RADIO, (RADIO BUTTONS) namanya, mengizinkan pilihan dari apa yang dipaparkan.

Sistem Operasi:
Windows 3.1
Windows for Workgroups 3.11
Windows 95

Sistem Operasi <BR>
<INPUT TYPE="radio" NAME="opsys" VALUE="win3.1" CHECKED>Windows 3.1<BR>
<INPUT TYPE="radio" NAME="opsys" VALUE="wfw3.11">Windows for Workgroups 3.11<BR>
<INPUT TYPE="radio" NAME="opsys" VALUE="win95">Windows 95<BR>

Dalam kes ini sekali lagi, name ialah hasil yang akan dipanggil masuk di dalam penghantaran borang, kecuali dalam hal sebegini, anda perlu mengetahui bahawa kesemua butang-butang dalam kumpulan yang serupa mesti mempunyai nama yang serupa. Value ialah apa yang dikandungi oleh penghantaran borang tatkala butang ini dipilih. DIPILIH (CHECKED) menunjukkan butang mantap (jika ada). Dalam kes butang radio sebegini, hanya satu pilihan yang dibenarkan.


Kotak Pilihan membenarkan pengguna satu atau banyak pilihan.

Saya menggunakan browser-browser ini:
Netscape 3.0
Explorer
Mosaic
Cello

Saya menggunakan browser-browser ini: <BR>
<INPUT type="checkbox" NAME="Netscape 3.0" CHECKED>Nestcape 3.0 <BR>
<INPUT type="checkbox" NAME="Explorer">Explorer <BR>
<INPUT type="checkbox" NAME="Mosaic" CHECKED>Mosaic <BR>
<INPUT type="checkbox" NAME="Cello">Cello <BR>

Name ialah apakah output untuk setiap kotak pilihan itu digelarkan semasa ianya dikembalikan Kesemua kotak pilihan di dalam satu-satu kumpulan tidak boleh mempunyai nama yang sama,kerana hasil tiap-tiap satu kotak terpilih adalah dikembalikan. CHECKED menentukan pilihan mantap di dalam kotak.


Pilihan lis tarik-bawah digunakan untuk membuat satu pilihan tertentu

Umur saya:

My age: <SELECT NAME="age">
<OPTION>Bawah 18
<OPTION>18-25
<OPTION SELECTED>25-50
<OPTION>Melebihi 50
</SELECT>

Name ialah output daripada pilihan tarik-bawah yang akan dipanggil di dalam pengembalian borang..


Lis pilihan boleh juga digunakan untuk memilih lebih dari satu item.

Saya boleh dihubungi dengan: (Jangan lepaskan butang CONTROL untuk memilih lebih dari satu)

Saya boleh dihubungi dengan: (Jangan lepaskan butang CONTROL untuk memilih lebih dari satu)
<SELECT NAME="contact" MULTIPLE SIZE=4>
<OPTION SELECTED>Telefon
<OPTION>Email
<OPTION>Pos Laju
<OPTION>Faks
<OPTION>Pager
<OPTION SELECTED>Telegram

Jika multiple diselitkan di dalamis tag, bererti lebih dari satu pilihan dibenarkan. Size mengawal berapa banyak pilihan yang akan dipaparkan pada lis.


Item-item diatas adalah biasa digunakan didalam menulis input. Sekarang izinkan penjawab untuk membersihkan borangnya atau menghantarkannya dengan butang-butang tertentu.

<INPUT TYPE="submit" value="Hantar">
<INPUT TYPE="reset" value="Isi semula">

Value ialah teks yang akan muncul pada butang berkenaan. Saiz butang akan berubah mengikut keperluan teks.


Jangan lupa untuk menutup borang dengan tag.
</FORM>

Pergi Ke Indeks.

TATACARA(METHOD) DAN TINDAKAN(ACTION)

Buat masa ini, cuma ada satu METHOD, iaitu POST, jadi jangan dileret-leretkan hal ini berpanjangan.

Terdapat dua kemungkinan ACTIONs untuk borang-borang, tetapi hanya satu yang ada untuk para pengguna.

ACTION="nama fail" akan menjanakan penghantaran borang kepada satu fail .exe atau skrip yang terdapat pada server, yang akan memproses penghantaran serta akan melakukan sesuatu dengan keputusan itu, lazimnya menuliskan semula ke atas skrin dalam bentuk HTML. Contohnya apabila anda melakukan Carian InfoSeek, anda memasukkan input di dalam satu borang . Ia akan di berikan kepada satu program pengkalan data, yang melaksanakan carian data-data dan kemudian memaparkannya ke atas skrin apakah hasil cariannya. tetapi kebanyakan server tidak mengizinkan kita menggunakan cara ini atas sebab-sebab kerahsiaan maklumat.

Pilihan kedua ialah ACTION="mailto:alamat email". Yang ini boleh didapati untuk sesiapapun. Dalam kes ini, penghantaran borang oleh penjawab akan diemelkan kepada alamat yang tertera. Jadi apakah itu "Penghantaran borang"? Saya telah memasukkan borang contoh di atas dan menghantarkan ke alamat emel saya sendiri. Begini hasilnya:

name=ZULKIPLY+HARUN&Komen=Ini+dimasukkan+di+dalam+TEXT+AREA.%0D%0A &sistem operasi=win3.1&wordprocessor=on&database=on&Umur=25-50&Hubung=Email &Hubung=Fax

Apa tu? Ya, ia tidak jelas. Tukar + kepada satu jarak, gantikan setiap & dengan tekan butang ENTER, dan tafsirkan kesetiap % dengan nilai ASCII sepadan, dan itulah hasilnya!
Sekarang ini terdapat satu program yang boleh menterjemahkan setiap kandungan isi mailto dengan mudah. Mailto: Formatter ialah program yang dimaksudkan.Terima kasih kepada penciptanya kerana menjadikan tugas kita bertambah mudah. Sila tekannya untuk mendapatkan sekarang, jika mahu!

Untuk maklumat lanjut tentang borang silalah ke:
Form Help atau
Matt's Script Archive


Tutorial Bhg.1 | Tutorial Bhg.2 | Tutorial Bhg.4 | Tutorial Bhg.5 | Buku Pelawat | Siapa Saya? | Institut Merlimau Computers

Home
Ke Halaman Utama

drzul@usa.net