Anda di halaman 1dari 24

Pertemuan IV

Ir. Anggun Nugroho, M.Kom.


anggun.nugroho10@gmail.com

Pemrograman Web 1
Materi minggu ini:

Frame
Form dan elemen-elemenya

Pemrograman Web 2
Pemrograman Web 3
Konsep Frame
o Berfungsi untuk memecah/membagi beberapa
tampilan yang berbeda dalam satu jendela browser.
o Masing-masing bagian tampilan dapat berisi sebuah
tampilan dari file HTML
o Dalam satu jendela browser dapat dibuka beberapa
file HTML sekaligus (tergantung berapa frame
dibuat).
o Untuk dapat menampilkan beberapa file HTML
dalam satu window browser, dibutuhkan tag untuk
membuat window menjadi beberapa bingkai (frame).

Pemrograman Web 4
Sintaks Tag Frame
Tag Keterangan

Mendefinisikan himpunan
<frameset>....... </frameset>
frame

<frame>................ </frame> Mendefinisikan frame


Mendefinisikan sebuah
<iframe>................ </iframe frame inline (tidak semua
browser mendukung)

Pemrograman Web 5
Atribut Tag Frame
Atribut keterangan
Rows Ukuran baris frame
Cols Ukuran kolom frame
Frameborder Border frame, berisi yes/no atau angka 1/0
Bordercolor Warna border frame
Scrolling Status penggulungan, yes/no
Src Nama file sumber yang akan dimuat dlm frame
Name Nama frame

Pemrograman Web 6
Atribut Tag Frame
Atribut Keterangan
Marginwidth Lebar margin frame
Marginheight Tinggi margin frame
noresize Status ukuran dapat
dirubah/tidak
Target Pembukaan jendela:
_blank-->jendela baru
_self --> jenela tempat link
berada
Framespacing Spasi tambahan antarframe
(pixel)

Pemrograman Web 7
contoh

Pemrograman Web 8
FORM DAN ELEMENNYA

Pemrograman Web 9
Kegunaan Form
 Memperoleh data-data user baik nama, alamat
dan data lainnya untuk mendaftar pada service
yang disediakan
 Memperoleh informasi dari customer secara
online
 Memperoleh feedback dari user mengenai
website kita

Pemrograman Web 10
Sintaks & Atribut Form
• Menggunakan tag <form>
<form action="action" method="GET"|"POST">
...........................
</form>
• Atribut yang disediakan

Pemrograman Web 11
Element/Komponen Input Form
• Komponen input (kontrol) biasanya diletakkan
setelah tag <form> dan sebelum </form>
• Sintak untuk menambahkan komponen input
dengan tag <input> diikuti nama komponen input
<input
name="name"
size="number"
type="text"|"checkbox"|"radio"|"submit"|"reset"
value="value“ checked >

Pemrograman Web 12
Komponen Input: Button
• Component ini memiliki attribute:
 Name = Nama dari control
 Size = Ukuran control
 Type = <input type=”button”>
 Value = Untuk memberikan value ke input
• Sintaks:
<INPUT TYPE="submit/reset" NAME=“namavar"
VALUE=“namavalue">
• Contoh:
• <INPUT TYPE="submit" NAME="var1"
VALUE=“Kirim">

Pemrograman Web 13
Komponen Input: text
 Untuk membuat inputan teks sebaris.
 Attribute size digunakan untuk menentukan
jumlah karakter yang bisa ditampilkan,
 Atribut maxlength digunakan untuk
menentukan panjang maksimum karakter yang
bisa dimasukkan.
 Sintaks dan contoh:
<INPUT TYPE=”TEXT” NAME=”textbox” VALUE=”” SIZE=”20”>

Pemrograman Web 14
Komponen Input: TextArea
• Textarea digunakan untuk inputan berupa teks
banyak baris
• Atribut yang dimiliki:
 cols = Lebar dari text area
 rows = Jumlah baris
 Name = Nama dari control
 Size = Ukuran control
 Sintaks dan contoh:
<TEXTAREA NAME=”text1” COLS=20 rows=5></TEXTAREA>

Pemrograman Web 15
Komponen Input: Checkbox
• Checkbox berfungsi untuk membuat
pilihan majemuk
• Atribut yang dimiliki:
 Checked = Untuk memberi default check
 Name = Nama dari control
 Size = UKURAN CONTROL
 Type = <INPUT TYPE=”CHECKBOX”>
 Value = UNTUK MEMBERIKAN VALUE KE INPUT

• Sintaks dan contoh:


<INPUT TYPE="checkbox" NAME="var2“ size=10”>

Pemrograman Web 16
Komponen Input: Radio
Setiap radio button control harus memiliki nama
yang sama, sehingga user hanya bisa memilih
satu option saja. Radio button juga harus secara
explisit memberikan nilai ke atribut value.
Atribut yang dimiliki:
 Checked Untuk memberi default check
 Name Nama dari control
 Size Ukuran control
 Type <input type=”radio”>
 Value Untuk memberikan value ke input

Pemrograman Web 17
Komponen Input: Select
• Tag <SELECT> digunakan untuk membuat
component combo box, sementara untuk item
dari combo box menggunakan tag <OPTION>
• Atribut yang dimiliki:
 Name = Untuk memberi nama element
 Size = Untuk menentukan jumlah baris yang ditampilkan (ini yg
membedakan antara combobox dan listbox)
 Multiple = Untuk menentukan apakah user boleh memilih lebih dari satu
option atau tidak.

Pemrograman Web 18
Komponen Input: Select
Listbox Combobox
<select name="job" <select
size=“3"> name="Experience"
size=“1"
<option value="1">Web
multiple>
Developer</option>
<option value="1"
<option value="2">Web selected>1
Designer</option> year</option>
32
<option value="2"> 1-
3
year</option>
Pemrograman Web 19
Contoh penggunaan komponen
<html><head><title>Creating <br><br>Experience
Form</title>
<select name="Experience" size="3"
</head><body>
multiple> <option value="1"
<h3><center><font color="#0000FF">Job
selected>1
Description</font></center></h3>
<form
year</option>
action="http://domain.com/process" <option value="2"> 1- 3
method="post"> year</option>
<p> <option value="3">None</option>
Job Discription
</select>
<select name="job" size="1">
</p>
<option value="1">WebDeveloper
</option> </form></body></html>
<option value="2">Web Designer</option>
<option value="3">Web Administrator
</option>
</select>

Pemrograman Web 20
Contoh penggunaan komponen
<title>Latihan4-2</title> <OPTION VALUE="BG">Bulgaria
</head> <OPTION VALUE="UK">United Kingdom
<body> <OPTION VALUE="USA" SELECTED>USA
<FORM METHOD="POST" </SELECT>
ACTION=“proses.php"> <BR><BR><B>Your comment:</B>
<H4>FORM</H4> <BR><TEXTAREA NAME="var7" COLS="30"
<INPUT TYPE="text" NAME="var1" ROWS="6">
SIZE="30" VALUE="Enter </TEXTAREA><BR><BR>
your name here."><BR><BR> <INPUT TYPE="submit" NAME="var4"
<B>Are you a student?</B> VALUE="Send">
<INPUT TYPE="checkbox" NAME="var2"> <INPUT TYPE="reset" NAME="var5"
<BR><BR><B>How old are you?</B> VALUE="Clear">
<BR><INPUT TYPE="radio" NAME="var3" </FORM></body></html>
VALUE="r1">10 - 15
<BR><INPUT TYPE="radio" NAME="var3"
VALUE="r2">16 - 20
<BR><INPUT TYPE="radio" NAME="var3"
VALUE="r3">21 - 25
<BR><BR>
<B>Where are you from?</B>
<BR><SELECT NAME="var6" SIZE="1">

Pemrograman Web 21
Pemrograman Web 22
Referensi
• http://www.w3.org
• Firrar Utdirartatmo, Segudang Trik Pengembangan Situs
Web, Penerbit Andi, 2006
• Ori Novanda, Deny Chaidir, Menjadi Web Master dengan
Macromedia Flash MX, Dreamweaver dan Microsoft
ASP.Net, Ekuator Digital Publishing, 2004.
• Alb. V. Dian Sano, HTML, JSP dan MySQL, Penerbit Andi,
2005.
• Lukmanul Hakim & Uus Musalini, Cara Cerdas Menguasai
Layout, Desain dan Aplikasi Web, Elexmedia Komputindo,
2004
• Sebesta, R.W., Programming the World Wide Web, Addison
Wesley, 2002

Pemrograman Web 23
Materi pekan depan: CSS

Pengantar CSS
Sintaks CSS
Properti CSS

Pemrograman Web 24