PEMROGRAMAN WEB - · PDF fileTeks ini akan tertulis di dalam textarea ... sebagai scroll box....

[FORM AND FRAME]

PEMROGRAMAN WEB MODUL

[ O L E H : Y U N I T A P R A S T Y N I N G S I H , S . K O M ]

Modul

FORM DAN FRAME 1. TEORI DASAR FORM

Form identik dengan formulir. Form sangat dibutuhkan pada saat anda mengizinkan

adanya nilai (data) yang dipilih atau dimasukkan oleh pengguna, seperti komentar tamu ke

suatu situs web (guestbook). Kapasitas dari form hanya menyediakan media entry data dan

mengirimkannya tetapi tidak untuk menerima dan mengolah. Yang akan menangani lebih

lanjut data adalah web scripting yang bersifat server side.

Form dalam HTML merupakan jembatan komunikasi antara client dengan server. Untuk

melakukan validasi pengisian elemen form, dibutuhkan bahasa pemrograman web lanjut

karena HTML tidak memiliki perintah untuk pengujian validasi dari nilai elemen form.

Gambar Contoh Form

Bagian berikut menerangkan elemen-elemen yang dapat ditempatkan dalam suatu form : Elemen Atribut fungsi INPUT

TYPE Bentuk masukan. Diisi dengan TEXT atau PASSWORD

NAME Nama komponen input VALUE Isi/nilai dari komponen input

SIZE Panjang komponen input MAXLENGTH Batasan panjang penulisan isi input

INPUT TYPE

Bentuk masukan RADIO

NAME Nama komponen input radio VALUE Pemberian nilai pada radio

CHEKED Memilih salah satu radio INPUT TYPE Bentuk masukan CHECKBOX

NAME Nama komponen input checkbox VALUE Pemberian nilai pada checkbox

CHEKED Memilih checkbox SELECT

NAME Nama komponen select /pull down list

OPTION Pilihan dalam list VALUE Isi pada list

SELECTED Option yang dipilih SIZE Ukuran list

TEXTAREA TYPE Bentuk komponen TEXTAREA NAME Nama komponen textarea ROWS Jumlah baris pada textarea COLS Jumlah kolom pada textarea

INPUT

Submit Reset

TYPE Bentuk masukan tombol. Diisi dengan SUBMIT atau RESET

VALUE Judul pada tombol · Tag <FORM>

Tag <FORM> merupakan tag yang digunakan untuk mendefinisikan sebuah form. Tag

ini mempunyai tiga atribut, yaitu NAME, METHOD dan ACTION.

ATRIBUT KETERANGAN NAME (optional) nama untuk form yang berlaku, digunakan untuk form

hadling METHOD GET= data yang dikirimkan melalui URL address

POST= data dikirimkan bersama HTTP header ACTION Untuk menentukan URL atau direktori dari file yang digunakan

untuk mengolah form tersebut

Penulisan tag <form>

<FORM METHOD="….." ACTION="……">

· Tag <TEXTAREA>

Tag <TEXTAREA> digunakan untuk membuat sebuah kotak teks multi baris. Tag ini

mempunyai beberapa atribut, yaitu :

ATRIBUT KETERANGAN NAME Mendefinisikan nama objek textarea ROWS Menentukan jumlah baris textarea COLS Menentukan lebar textarea

<HTML> <HEAD> <TITLE>Text Area</TITLE> </HEAD> <BODY> <FORM> <TEXTAREA NAME=teksarea1 ROWS=10 COLS=40> Teks ini akan tertulis di dalam textarea </TEXTAREA> </FORM> </BODY> </HTML>

· Tag <SELECT>

Tag <SELECT> digunakan untuk membuat sebuah daftar pilihan. Tag ini memiliki

beberapa atribut, yaitu :

ATRIBUT KETERANGA

N NAME Mendefinisikan nama dari objek select SIZE Menentukan berapa pilhan yang akan ditampilkan. Jika atribut ini tidak

disertakan atau diberi nilai 1, pilihan akan ditampilkan sebagai drop- down list. Jika diberi nilai 2 atau lebih, pilihan akan ditampilkan sebagai scroll box. Jika nilai SIZE lebih besar dari jumlah pilihan yang ada pada <SELECT>, pilihan kosong akan ditambahkan. Jika user memilih pilihan ini maka nilainya adalah kosong.

MULTIPLE Mengizinkan untuk memilih lebih dari satu

Pilihan yang disediakan oleh tag <SELECT> diberikan di dalam tag <OPTION>. Tag

<OPTION> sendiri mempunyai dua atribut yaitu VALUE yang digunakan untuk memberi

nama item pilihan dan SELECTED yang menunjukkan pilihan yang terpilih secara deafult.

Tag <OPTION> tidak perlu ditutup dengan </OPTION>.

<HTML> <HEAD> <TITLE>SELECT</TITLE> </HEAD> <BODY> Berapa besar memori yang Anda pakai : <FORM> <SELECT NAME=”memori”> <OPTION SELECTED VALUE=”16 MB”>16 MB <OPTION VALUE=”32 MB”>32 MB <OPTION VALUE=”64 MB”>64 MB <OPTION VALUE=”128 MB”>128 MB <OPTION VALUE=”128keatas”>Lebih 128 MB </SELECT> </FORM> </BODY> </HTML>

· Tag <INPUT>

Tag <INPUT> digunakan untuk membuat komponen-komponen yang digunakan untuk meminta

informasi dari user, misalnya kotak teks, kotak pilihan, tombol dan lain-lain. Tag ini tidak

memerlukan tag penutup. Tag ini mempunyai beberapa atribut, yaitu :

ATRIBUT KETERANGAN NAME Mendefinisikan nama dari objek input. Atribut ini harus dituliskan

kecuali untuk tipe submit dan clear SIZE Menentukan ukuran kotak teks MAXLENGTH Menentukan jumlah maksimum karakter yang dapat dimasukkan

pada kotak teks VALUE Untuk kotak teks, menentukan teks yang tertulis. Untuk check box

atau radio, menentukan nilai item yang dipilih. Untuk Submit dan Reset, menentukan teks yang tertulis pada tombol

CHECKED Hanya digunakan untuk check box atau radio. Menentukan pilihan yang terpilih secara default.

TYPE Menentukan tipe input yang dibuat

Tipe input yang dapat dibuat adalah :

· Text : digunakan untuk membuat kotak teks

· Password : digunakan untuk membuat kotak teks, tetapi semua karakter

akan ditampilkan dengan tanda *.

· Check Box : digunakan untuk membuat suatu daftar pilihan yang dapat dipilih lebih

dari satu.

· Radio : digunakan untuk membuat suatu daftar pilihan yang hanya dapat

dipilih satu saja.

· Reset : digunakan untuk membuat tombol yang fungsinya untuk menghapus

semua isian form yang telah diberikan.

· Submit : digunakan untuk membuat tombol yang fungsinya untuk

mengirimkan data form agar diolah.

· File : digunakan untuk memasukkan (upload) data dokumen atau file seperti

gambar atau suara.

<HTML> <HEAD> <TITLE>Belajar Form</TITLE> </HEAD> <BODY> <FORM METHOD="POST" ACTION="formarea.html"> LOGIN Nama :<INPUT TYPE=text NAME=txtnama> Password :<INPUT TYPE="PASSWORD" NAME="pwd" size="8" maxlenght="8"> <PRE> Silakan masukkan data pribadi Anda : Nama :<INPUT TYPE=text NAME=txtnama> Alamat :<INPUT TYPE=text NAME=txtalamat SIZE=50> No Telpon :<INPUT TYPE=text NAME=txttelpon SIZE=10> Masukkan Password Anda : <INPUT TYPE=password MAXLENGTH=6> Hobby Anda (boleh lebih dari satu) : <INPUT TYPE=checkbox NAME=hobby VALUE=baca> Membaca <INPUT TYPE=checkbox NAME=hobby VALUE=ORaga> Olah Raga <INPUT TYPE=checkbox NAME=hobby VALUE=nonton> Nonton Film <INPUT TYPE=checkbox NAME=hobby VALUE=travel> Travelling  Jenis Kelamin : <INPUT TYPE=radio NAME=jk VALUE=pria> Laki-laki <INPUT TYPE=radio NAME=jk VALUE=wanita> Perempuan <HR> <INPUT TYPE=submit VALUE=kirim> <INPUT TYPE=Reset VALUE=hapus> <HR> Upload Foto <INPUT TYPE=file NAME=upload> </FORM> </BODY> </HTML>

2. TEORI DASAR FRAME

Frame banyak digunakan untuk membuat halaman web yang area tampilannya terbagi-bagi.

Konsep frame hampir sama dengan table, namun perbedaannya adalah masing-masing bagian

tersebut yang berupa baris atau kolom dalam frame adalah merupakan file, sedangkan dalam

tabel adalah sel. Sehingga frame dapat diartikan kumpulan dari banyak file dokumen HTML

yang tersusun sedemikian rupa.

Karakteristik dari frame

Ø Lebih dari satu dokumen dapat ditampilkan secara bersamaan dalam satu tampilan

dokumen

Ø Setiap dokumen ditampilkan dalam sebuah frame, jadi minimal satu frame memiliki 1

file dokumen

Ø Dibutuhkan 1 dokumen tersendiri yang berisi definisi frameset. Frameset inilah yang

akan membungkus keseluruhan file frame. Dokumen frameset tersebut tidak mempunyai

isi dokumen (tidak ada<body> </body>)

Ø Skema dasar dokumen frameset

<frameset frameborder=”x”>

<frame src=”nama file1.html”>

<frame src=”nama file2.html”>

….dst(atau frameset yang lain)

<noframes>

Bagian ini ditampilkan jika browser tidak mendukung frames

</noframes>

</frameset>

§ Sebuah frameset menentukan tata letak,ukuran dan banyaknya frame yang akan

ditampilkan. Untuk menyatakan tata letak dokumen dalam frame yang tersusun secara

baris maka ditambahkan atribut rows=”ukuran1,ukuran2… ukuran n”. adapun untuk

kolom digunakan atribut cols=”ukuran1,ukuran2,…ukuran n”. sebuah frameset hanya

memiliki salah satu saja (rows atau cols). Pendefinisian ukuran digunakan dengan aturan:

§ Nilai angka dalam pixel

§ Nilai angka dalam persentase (%) yang menandakan persentase dari keseluruhan

area tampilan yang disediakan

§ Tanda bintang (*) yang menandakan sisa ruang yang masih ada. Contoh:

<frameset rows=”50,10%,*,2*”>

………….

</frameset>

Yang berarti area tampilan terbagi menjadi 4 baris

<frameset cols=”30%,*”>

….

</frameset>

Yang berarti area tampilan terbagi menjadi 2 kolom

· Dengan mendefinisikan ukuran-ukuran tersebut maka frameset otomatis akan

membagi area tampilan frame sebanyak pendefinisian ukurannya.

· Frame name digunakan oleh hyperlink untuk mengaktifkan link halaman ke

dalam frame tertentu yang sesuai dengan target name-nya

· Di dalm frameset boleh terdapat frameset lain (nested frameset).

<html> <head> <title>frame</title> </head> <body> <h1>frame sell</h1> file latihan 5-1.html digunakan dalam frame sell ini </body> </html>

<html> <head> <title>frame dengan borders</title> </head> <frameset rows="40%,60%"> <frame src="latihan5-1.html"> <frameset cols="*,*"> <frame src="latihan5-1.html"> <frame src="latihan5-1.html"> </frameset> <noframes> <body> browser anda tidak mendukung frame,silahkan lihat: <a href="latihan5-1.html"> noframes version</a> </body> </noframes> </frameset> </html>

<html> <head> <title>contoh baris frame</title> </head> <frameset rows="55%,45%"> <frameset cols="*,*,*"> <frame src="latihan5-1.html"> <frame src="latihan5-1.html"> <frame src="latihan5-1.html"> </frameset> <frameset cols="*,*"> <frame src="latihan5-1.html"> <frame src="latihan5-1.html"> </frameset> <noframes> <body> browser anda tidak mendukung frame,silahkan lihat: <a href="latihan5-1.html"> noframes version</a> </body> </noframes> </frameset> </html>

<html> <head> <title>contoh kolom frame</title> </head> <frameset cols="55%,45%"> <frameset rows="*,*,*"> <frame src="latihan5-1.html"> <frame src="latihan5-1.html"> <frame src="latihan5-1.html"> </frameset> <frameset rows="*,*"> <frame src="latihan5-1.html"> <frame src="latihan5-1.html"> </frameset> <noframes> <body> browser anda tidak mendukung frame,silahkan lihat: <a href="latihan5-1.html"> noframes version</a> </body> </noframes> </frameset> </html>

PEMROGRAMAN WEB - · PDF fileTeks ini akan tertulis di dalam textarea ... sebagai scroll box....

Documents

Transcript of PEMROGRAMAN WEB - · PDF fileTeks ini akan tertulis di dalam textarea ... sebagai scroll box....