Bab 7 Form dan Buku Tamu

Barangkali anda  pernah  melihat  suatu  web  site  yang  mempekerjakan
semacam   formulir  untuk  diisi  oleh  pengguna  ( seperti  yang  anda
lakukan  untuk  mendaftar  ke  geocities  pada  bab  sebelumnya),  atau
formulir untuk berbelanja lewat web, atau  macam-macam  lain.  Formulir
(selanjutnya disebut form)  semacam  ini  memungkinkan  pengguna  untuk
berinteraksi dengan pihak penyedia informasi web. Anda sebagai  penulis
dokumen web, dapat dengan mudah  membuat  form  semacam  ini  di  dalam
dokumen anda dengan HTML.

Merancang Form Untuk Dokumen
 
Form dalam  HTML   ditandai   dengan   container   tag   < FORM >   dan 
</FORM>. Sewaktu kita  membuat   sebuah   elemen   form ,  kita   perlu 
menentukan bagaimana dan  kemana  data  yang  diisikan  ke  dalam  form 
tersebut akan dikirimkan dari browser ke web server.

Hal  ini   dilakukan   dengan  pernyataan  ACTION  dan  METHOD.  ACTION
menunjukkan lokasi tempat program CGI yang hendak  dijalankan.  Umumnya
program ini adalah suatu  scipt  (program)  CGI di  web  server  tempat
dokumen  itu  berasal.  METHOD  menunjukkan  bagaimana  informasi  yang
diisikan dalam form harus dikirimkan ke web server.  METHOD  yang  umum
adalah GET dan POST. Mengenai perbedaan kedua metode ini  akan  dibahas
di Bab 15.

Berikut ini adalah contoh  tag  <FORM>  yang  mengirimkan  formulir  ke 
suatu script bernama "mail.pl" di geocities dengan metode  POST.  Tanda 
"?dios" setelah nama script menunjukkan parameter ekstra nama  pengguna 
script.

<FORM ACTION="http://www.oocities.org / cgi-bin / homestead / mail.pl?
dios"METHOD=POST>

Mungkin  anda   bertanya  ,   seperti  apakah  script itu.  Script  CGI 
adalah   suatu usaha untuk mengembangkan kemampuan  server  World  Wide 
Web, yang memungkinkan pengguna  World  Wide  Web  berinteraksi  secara 
aktif dengan penyedia informasinya. Script dibuat agar suatu server Web 
dapat berhubungan dengan suatu program aplikasi.

Script dijalankan di server Web. Server Web dan program aplikasi  dapat
saling berhubungan melalui  suatu  standar  yang  disebut  CGI  (common
gateway  interface).   Dengan  CGI,  Web  server  dapat  memanggil  dan
menjalankan suatu program, sembari melewatkan data  yang  berasal  dari 
klien / browser  ke  program  tersebut.  Program  yang  dipanggil  tadi 
selanjutnya akan memproses data dan mengirimkan balik  hasilnya  kepada 
Web server, dan pada giliranya menyerahkan pada  browser.  Program  ini 
bisa beragam macamnya, dan kebanyakan program CGI dibuat dengan  bahasa
pemrograman  Perl (Practical  Extraction  &  Report  Language).  Contoh 
jelas dari penerapan CGI ini  misalnya  search  engine (mesin  pencari) 
World Wide  Web  semacam  Altavista  (http://www.altavista.digital.com)
dan  lycos (http://www.lycos.com).  Mengenai  CGI  dan  Perl  ini  akan 
sedikit dibahas pada Bab 15.

Agar sebuah form dapat mengirimkan data dari browser  ke  server,  kita
memerlukan script khusus untuk itu. kecuali kita memiliki sebuah server
web sendiri, umumnya kita bergantung kepadda pemilik server web.  Untuk
alasan keamanan, banyak pemilik  server  tidak  mengijinkan  penggunaan
script selain yang memang telah mereka sediakan.

Geocities (mengenai geocities  dapat  dilihat  di  Bab  4)  menyediakan 
beberapa buah script yang dapat dipergunakan  oleh  anggota-anggotanya. 
Salah satu darinya adalah  sript  untuk  mengirimkan  form.  Penjelasan 
mengenai penggunaan  script-script  ini  dapat  dilihat  di http://www.
oocities.com/homestead/faq

TextArrea

Ada beberapa elemen form yang dapat  kita  pergunakan  dengan  < FORM >
, mereka adalah TEXTAREA, SELECT dan INPUT.


TEXTAREA dipakai terutama bila kita menginginkan tempat  bagi  pengguna 
web untuk memasukkan informasi yang panjangnya beberapa baris  perintah 
yang dipergunakan adalah

<TEXTAREA NAME="nama" ROWS=n COLS=n>

NAME menyatakan  nama  data  yang  akan dimasukkan  ke  dalam  textarea
ini. COLS dan ROWS berturut-turut menentukan banyak lebar textarea  dan
jumlah baris di dalam textarea. Bila COLS  dan  ROWS  tidak  ditentukan
dalam kode TEXTAREA,  maka  nilai  yang  akan  dipergunakan  adalah  40
karakter lebar dan 4 baris tinggi.

Karena <TEXTAREA>adalah sebuah  container  tag ,  maka  diperlukan  tag
penutup </TEXTAREA>.Di antara  kedua  tag  ini  kita  dapat  meletakkan
sembarang teks yang akan ditampilkan di dalam TEXTAREA.

Select

Terkadang anda  ingin  menyediakan  beberapa  pilihan  kepada  pengguna
dokumen web   anda   sebagai   masukan.   <SELECT>   akan   menampilkan
suatu daftar pilihan yang dapat dipilih oleh pengguna,baik dalam bentuk
menu pop-up maupun menu gulung.

Teks yang  berada  setelah  open  tag    akan  dianggap   oleh   browser
sebagai salah satu dari pilihan (item menu) yang akan ditampilkan  pada 
menu, Dalam contoh di atas, kita mempergunakan  empat  buah  item,  dan 
masing-masing didefinisikan dengan <OPTION>.

Adapun perintah tambahan yang  harus  ditambahkan  setelah  < OPTION >
adalah VALUE dan SELECTED. VALUE menentukan nilai yang akan ditetapkan 
pada suatu item. Dalam contoh  di  atas  item  pertama  akan  bernilai 
"pilihan1" apabila pengguna web mengklik mouse pada item ini. SELECTED 
hanya boleh diberikan pada satu  item  saja,  yaitu  item  yang  sudah 
terpilih dari awal (default).Karena item pertama dalam contoh di  atas 
ditentukan sebagai SELECTED,  maka  item  inilah  yang  akan  disoroti
(hightlighted) dan pengguna tinggal menekan ENTER atau klik mouse.

Seperti  pada  TEXTAREA ,  NAME  juga  diperlukan ,  SIZE  menunjukkan
jumlah pilihan yang ingin kita tampilkan dalam menu (dalam  contoh  di 
atas, SIZE tidak ditentukan). Bila kita  meniadakan  pernyataan  SIZE, 
atau nilai SIZE=1, menu akan ditampilkan  dalam  bentuk  pop-up, bukan 
gulung.

Bilamana SIZE ditentukan  bernilai 2  atau  lebih,  dengan  sendirinya 
browser akan menampilkan menu dalam bentuk gulung (scrollable).
<SELECT NAME="pilih" SIZE=4>
<OPTION SELECTED VALUE="bagus"> Bagus !
<OPTION VALUE="lumayan"> Lumayan
<OPTION VALUE="biasa"> Biasa saja
<OPTION VALUE="jelek"> Jelek
</SELECT>

Dalamtag<SELECT>, kita dapat  pula  meletakkan  pernyataan  MULTIPLE,
Pernyataan ini memungkinkan pengguna Web memilih lebih dari satu item
dari menu. Lihatlah contoh berikut;

<SELECT NAME="pilih" SIZE=4 MULTIPLE>

Jangan lupa untuk meletakkan tag penutup </SELECT>.

Input

Input  adalah  elemen form  yang  mungkin  paling  banyak  dipakai, <
INPUT> dibentuk dalam  beragam  bentuk, yang dapat berupa kotak teks, 
tombol-tombol dan checkbox.

Macam-macam bentuk <INPUT> adalah;

1. TEXT

Dipergunakan   untuk  menampilkan  kotak  teks  sebagai  masukan  dari
pengguna. Panjang kotak teks ini dibatasi satu  baris  saja.  Perintah 
yang dipergunakan adalah <INPUT TYPE="text">.


Seperti sebelumnya,pernyataan SIZE dipergunakan untuk menentukan lebar
kotak teks. Dalam contoh di atas  SIZE=20,  berarti  kotak  teks  akan 
memiliki lebar 20 karakter. Sedangkan  MAXLENGTH  menunjukkan  panjang
maksimum dari karakter yang dapat dimasukkan sebagai data dalam  kotak
teks tersebut.

2. TOMBOL

Tombol-tombol  pilihan   (atau  sering  disebut  radio  button)  dapat  
ditampilkan dengan  perintah <INPUT TYPE="radio">. Tombol-tombol 
akan nampak seperti sebuah lingkaran  kosong  yang  bilamana  dipilih, 
akan berisi lingkaran lain yang berwarna hitam di dalamnya.

<FORM>
Apakah anda bersedia diberi hadiah ? <BR>
<INPUT TYPE="radio" NAME="pilihan" VALUE="ya"> Ya
<INPUT TYPE="radio" NAME="pilihan" VALUE="tidak"> Tidak.

Pernyataan SELECTED menunjukkan bahwa  suatu  pilihan  adalah  pilihan
yang default, yang bila tidak diganti,akan dengan sendirinya terpilih, 
Seperti contoh di atas, kita meletakkan SELECTED  pada  pilihan  "YA", 
sehingga sekalipun pengguna dokumen kita  tidak  mengklikkan  mousenya 
pada salah satu pilihan, pilihan"YA"sudah terpilih. Ini untuk mencegah 
browser mengirimkan data yang kosong.

Kita dapat menyajikan pilihan yang sederhana seperti "YA" atau "TIDAK"
atau dapat juga  memberikan  pilihan yang lebih banyak dari itu. Perlu 
Anda perhatikan bahwa pengguna hanya dapat memilih  satu pilihan saja.

<FORM>
Seberapa cepat hubungan Anda ke Internet ? <P>
<INPUT TYPE="radio" NAME="pilihan" VALUE="28800" SELECTED>
27.800 bps<BR>
<INPUT TYPE="radio" NAME="pilihan" VALUE="14400"> 14.400
bps<BR>
<INPUT TYPE="radio" NAME="pilihan" VALUE="9600"> 9.600 bps<BR>
<INPUT TYPE="radio" NAME="pilihan" VALUE="2400"> 2.400 bps<BR>
<INPUT TYPE="radio" NAME="pilihan" VALUE="lainya"> selain
</FORM>

CHECKBOX

Serupa dengan tombol, checkbox  memungkinkan  pengguna  dokumen  untuk 
memilih suatu pilihan dari beberapa  pilihan  yang  tersedia. Bedanya, 
tidakseperti tombol, checkbox mengijinkan pengguna  memilih lebih dari 
satu pilihan.

Checkbox ditampilkan dalam bentuk kotak-kotak  segiempat  kosong, yang
bilamana  dipilih,  akan  memberikan  tanda  silang  atau  centang  di 
dalamnya.

Perintah  yang   dipergunakan  adalah  <INPUT  TYPE="checkbox">, 
Seperti sebelumnya, kita harus mensuplai form dengan  informasi  NAME, 
VALUE dan SELECTED.

<FORM>
Apakah hobi anda? (pilih semua yang cocok)<P>
<INPUT TYPE="checkbox" NAME="pilihan" VALUE="memancing">
Memancing<BR>
<INPUT TYPE="checkbox" NAME="pilihan" VALUE="memasak">
Memasak<BR>
<INPUT TYPE="checkbox" NAME="pilihan" VALUE="berburu">
Berburu<BR>
<INPUT TYPE="checkbox" NAME="pilihan" VALUE="balapan">
Balapan<BR>
<INPUT TYPE="checkbox NAME="pilihan" VALUE="menjahit">
Menjahit<BR>
</FORM>
Tombol Submit
Pada akhir sebuah form,haruslah terdapat satu tombol yang dipergunakan
untuk mengirimkan data-data  yang  telah  dimasukkan  ke  dalam  form. 
Biasanya tombol ini diberi tulisan "SUBMIT" atau "KIRIMKAN".

Ini dapat dilakukan dengan mudah. Perintahnya pendek saja  yaitu  <
INPUT   TYPE="submit">.   Pernyataan    VALUE   dipergunakan  untuk 
menunjukkan teks yang akan ditampilkan pada tombol tersebut.

<FORM>
<INPUT TYPE="submit" VALUE="kirimkan data!">
</FORM>

Ada kalanya seorang pengguna dokumen web   berubah   pikiran   sewaktu
mengisi data ke dalam form dan berniat  merubah  data  yang  telah  ia
masukkan. Kita dapat menyediakan tombol RESET  untuk  menghapus  semua
informasi yang telah  ada  di  dalam  form,  sehingga  pengguna  dapat 
memulai lagi proses pengisian form dari awal.

Serupa dengan SUBMIT, perintah yang dipergunakan adalah <INPUT
TYPE="reset">.

<FORM>
<INPUT TYPE="submit" VALUE="kirimkan data !">
<INPUT TYPE="reset" VALUE="Hapus Formulir">
</FORM>

Password

Bentuk input yang lain  adalah PASSWORD.  Ini  mungkin  tidak  terlalu 
sering dipergunakan.

PASSWORD sebenarnya adalah kata teks  biasa, namun  tidak  menampilkan
ke layar data yang dimasukkan ke dalamnya. Ini terutama berguna  untuk
meminta pengguna Web memasukkan kata sandi (password).

<FORM>
Masukkan kata sandi anda :
<INPUT TYPE="password" NAME="kata sandi">
</FORM>

Membuat Buku Tamu
Baiklah, anda telah mempelajari bagaimana cara membuat form di dokumen 
Web anda. Namun apa saja kegunaan membuat form ?


Bila anda telah menempatkan homepage pribadi  anda  di  Internet, anda
tentu ingin mengetahui siapa-siapa yang telah mengunjungi dan  melihat
dokumen  web  anda.  Salah  satu  caranya  adalah  dengan  menyediakan
semacam "buku tamu"  di mana pengguna atau  pengunjung  homepage  anda 
dapat mengisikan nama, alamat, komentar-komentar dan sebagainya. Data-
data yang telah diisikan  oleh  "tamu"  anda  tersebut  kemudian  akan 
dikirimkan kepada anda lewat e-mail.

Salah   satu  cara  yang  sederhana  adalah  mempergunakan  pernyataan
ACTION="MAILTO=<alamat e-mail>". Data dari form yang diisi  oleh
pengguna akan dikirimkan ke alamat e-mail yang  ditentukan.  Sayangnya
cara ini akan mengirimkan data dalam bentuk yang  tidak  terformat dan 
sulitdibaca.

Geocities
Geocities telah menyediakan sebuah script yang  bagus  untuk ini. anda
tinggal membuat sebuah form  yang  memanfaatkan  script  mereka  dalam
pernyataan ACTION dalam tag <FORM>. Untuk  cara-cara  penggunaan
script dapat dilihat di http://www.oocities.org/homestead/faq

Singkatnya. untuk mempergunakan  script "buku  tamu"  Geocities,  kita
cukup mempergunakan perintah seperti di bawah ini.

<FORM METHOD=POST ACTION="/cgi-bin/homestead/
mail.pl?namaUser">

Perhatikan bahwa NamaUser harus diganti dengan nama user anda di
Geocities.

Bilamana pengguna dokumen Web  menekan  pada  tombol "Selesai Mengisi"
(tombol tipe "submit"),data form akan dikirimkan ke alamat e-mail anda
(alamat e-mail  anda  ditentukan  sewaktu  anda  mendaftarkan  diri ke
Geocities). 

Buku tamu anda yang telah selesai,dapat segera di-upload ke Geocities.
Anda dapat menguji apakah buku  tamu and a bekerja baik dengan mengisi 
sendiri form anda.

Selamat mencoba !


                                                  (kembali ke katalog)
 
    

---------------------------

HTML 3
UNTUK PUBLIKASI DI INTERNET
Oleh DIOS KURNIAWAN
Edisi Pertama, Maret 1997
Dicetak & Diterbitkan
BPFE-YOGYAKARTA
Yogyakarta
Anggota IKAPI
No-003
---------------------------