pemrograman web - · pdf fileteks ini akan tertulis di dalam textarea ... sebagai scroll box....
Post on 23-Feb-2018
219 Views
Preview:
TRANSCRIPT
[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 <!--perhatikan bahwa untuk satu kelompok pilihan yang sama nilai atribut NAME harus sama--> 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>
top related