Tugas web base

Laporan Praktikum Frame, Table, Form

Disusun untuk memenuhi tugas dari ibu Dian



Disusun Oleh : Muhammad Akbar AriIin







Program SertiIikasi D1 Polman Bandung
2011




eb base Iorm , Muhammad akbar ariIin

I . FRAME





html~
Irameset cols"*,140px"~
Irame src"merah.html"~
Irame src"kuning.html"~
/Irameset~
/html~


html~
Irameset cols"100px,*"~
Irame src"merah.html"~
Irame src"kuning.html"~
/Irameset~
/html~


html~
Irameset rows"100px,*"~
Irame src"merah.html"~
Irame src"kuning.html"~
/Irameset~
/html~

html~
Irameset rows"*,60px"~
Irame src"merah.html"~
Irame src"kuning.html"~
/Irameset~
/html~


html~
Irameset rows"*,60px"~
Irame src"merah.html"~
Irameset cols"50,50"~
Irame src"kuning.html"~
Irame src"hijau.html"~
/Irameset~
/Irameset~
/html~

html~
Irameset cols"50,50"~
Irame src"merah.html"~
Irameset rows"15,15,*"
~
Irame src"kuning.html"~
Irame src"hijau.html"~
Irame src"biru.html"~
/Irameset~
/Irameset~
/html~

html~
Irameset cols"50,50"~
Irameset rows"50,50"~
Irame src"merah.html"~
Irame src"kuning.html"~
/Irameset~
Irameset rows"50,50,*"~
Irame src"biru.html"~
Irame src"hijau.html"~
/Irameset~
/Irameset~
/html~

html~
Irameset
rows"15,*,15"~
Irame src"merah.html"~
Irameset cols"15,*,15"
~
Irame src"kuning.html"~
Irame src"hijau.html"~
Irame src"biru.html"~
/Irameset~
Irame src"merah.html"~
/Irameset~
/html~

I.1 kesimpulan
- Irame adalah sebuah tag yang di gunakan untuk menggabungkan beberapa halaman web menjadi
satu halaman yang di tampilkan menjadi beberapa bagian, tergantung dari halaman web yang kita
gabungkan . untuk mengeset pembagian Irame,kita bisa menggunakan tag Irameset~, dan untuk
mengisi bagian2 dari tag Irameset~ kita bisa menggunakan tag Irame~

eb base Iorm , Muhammad akbar ariIin

3

html~
head~title~navigasi/title~
/head~
body bgcolor"black" vlink"white" link"white"
text"white"~
h2~Navigasi/h2~
a hreI"1 Irame.html" target"index"~ latihan Irame 1
/a~br~
a hreI"2 Irame.html" target"index"~ latihan Irame 2
/a~br~
a hreI"3 Irame.html" target"index"~ latihan Irame 3
/a~br~
a hreI"4 Irame.html" target"index"~ latihan Irame 4
/a~br~
a hreI"5 Irame.html" target"index"~ latihan Irame 5
/a~br~
a hreI"6 Irame.html" target"index"~ latihan Irame 6
/a~br~
a hreI"7 Irame.html" target"index"~ latihan Irame 7
/a~br~
a hreI"8 Irame.html" target"index"~ latihan Irame 8
/a~br~
a hreI"TABLE.html" target"index"~ FEED BACK
FORM /a~br~
/body~
/html~

html~
body~
div align"center"~
img src"mekatronika.jpg" width"100px"
height"100px" align"middle" hspace"10"~
Iont size"20"~ELCOME TO
MEKATRONIKA/Iont~
/div~
/body~
/html~


eb base Iorm , Muhammad akbar ariIin

4

html~
head~ title~Ieedback Iorm/title~/head~
body~
div align "center"~
h1~b~FEEDBACK FORM/b~/H1~
you can help us to improve our website by using the
Iollowing Iorm to let us know what you think or what needs
to be changedbr~
hr width "98" size"3px" ~
br~
table~
tr~
td~Name:/td~
td~input type"text" name"nama"~/td~
/tr~
tr~
td~Email addres:/td~
td~input type"text" name"email"~/td~
/tr~
tr~
td~Password:/td~
td~input type"password" name"pass"~/td~
/tr~
tr~
td~Re-type your password:/td~
td~input type"password" name"repass"~/td~
/tr~
tr~
td~Are you a club member:/td~
td~input type"checkbox" name"member"/td~
/tr~
tr~
td~Your age:/td~
td~
input type"radio" value"abg" name"pil"~ 20 br~
input type"radio" value"sedang" name"pil"~ 21- 30
br~
input type"radio" value"dewasa" name"pil"~ 31-
40br~

html~
body~
Irameset rows"17,*"~
Irame src"header.html"~
Irameset cols"15,*"~
Irame src"navigasi.html" noresize~
Irame src"table.html" name"index"~
/Irameset~
/Irameset~
/body~
/html~
eb base Iorm , Muhammad akbar ariIin

3

input type"radio" value"tua" name"pil"~ ~40 br~

/td~
tr~
td~Your State:/td~
td~
select name"negara"~
option~australia/option~
option~brazil/option~
option~canada/option~
option~denmark/option~
option~england/option~
option selected~indonesia/option~
/select~
/td~
/tr~
tr~
td~How did you Iind our site:/td~
td~textarea name"alasan"~web search link on another
site
Irom Iriends/textarea~
/td~
/tr~
tr~
td~Site Suggestion:/td~
td~textarea name"sugesti"~type your suggestion
here/textarea~
/td~
/tr~
tr~
td~Other comments:/td~
td~textarea name"komentar"~additional comments
here/textarea~
/td~
/tr~
tr~
td~/td~
td~input type"submit" value"Submit data"~ input
type"reset" value"clear all"~/td~
/tr~
/table~
/body~
/html~



I.2 kesimpulan
- pada praktikum ini kita membuat sebuah halaman web yang terdiri dari 3 bagian, yaitu header,
navigasi dan content, yang di gabungkan menggunakan tag Irameset~, pada bagian navigasi
terdapat beberapa link yang apabila link itu di klik maka yang berubah hanya bagian contentnya saja,
itu di karenakan pada bagian link tersebut di beri atribut targetnama target/nama frame
tujuan. Jadiketika link tersebut di klik maka yang berubah hanya bagian target dari link tersebut.
Pada praktikum di atas, bagian yang menjadi target saya beri nama 'index <frame srcex.html
nameindex>

eb base Iorm , Muhammad akbar ariIin

6

II. TABEL


html~
head~
title~tugas membuat table - web base |m. akbar|/title~
/head~
body~
table border"7"~
tr~
td width"150px" height"40px" valign"top"~kiri atas
/td~
td width"250px" align"right" ~kanan tengah
/td~
/tr~
tr~
td height"80px" align"right" valign"bottom"~kanan
Bawah
/td~
td align"center" valign"middle"~tengah tengah/td~
/tr~
/table~
/body~
/html~


html~
head~
title~tugas membuat table - web base |m. akbar|/title~
/head~
body~
table border"5" width"400"~
tr~
th colspan"4" height"50"~Table Heading Cell Spanning 4
Columns/th~
/tr~
tr~
td width"100"~Normal cell/td~
td colspan"2" width"100"~Cell spanning 2 columns/td~
td~Normal cell/td~
/tr~
tr~
td rowspan"3"~Cell spanning 3 rows with a gray
background/td~
td width"100"~Normal Cell/td~
td width"100"~Normal Cell/td~
td width"100"~Normal Cell/td~
/tr~
tr~
td ~Normal Cell/td~
td rowspan"2" colspan"2"~Cell spanning 2 rows and 2
columns/td~
/tr~
tr~
td~Normal Cell/td~
/tr~
/table~
/body~
/html~


eb base Iorm , Muhammad akbar ariIin

7

html~
head~
title~tugas membuat table - web base |m.
akbar|/title~
/head~
body~
table border"1" width"400"~
tr~
td width"100" align"center"~1/td~
td width"200" align"center"
bgcolor"violet"~2/td~
td width"100" align"center"~3/td~
/tr~
tr~
td height"100" align"center"~4/td~
td colspan"2" bgcolor"orange"~
table border"1" align"center" bgcolor"pink"~
tr~
td colspan"2" width"200" align"center"~5/td~
/tr~
tr~
td align"center"~6/td~
td align"center"~7/td~
/tr~
/table~
/td~
/tr~
tr~
td colspan"2" bgcolor"green"~
table border"1" align"center" width"200"
bgcolor"yellow"~
tr~
td rowspan"2" align"center"~8/td~
td align"center" ~9/td~
/tr~
tr~
td align"center"~10/td~
/tr~
/table~
/td~
td height"100" align"center"
bgcolor"gray"~11/td~
/tr~
/table~
/body~
/html~


II.1 KESIMPULAN
- table : table pada intinya, berIungsi untuk membuat baris dan kolom, pada html baris menggunakan
tag tr~ kolom atau data menggunakan tag td~ dan table header menggunakan tag th~,. untuk
mengatur tinggi dan lebar sebuah table kita bisa menggunakan atribut height dan width, untuk tinggi
sebuah kolom, akan mengikuti height kolom yang pling panjang, sama halnya dengan baris, panjang
baris juga akan mengikuti width baris yang paling panjang.
eb base Iorm , Muhammad akbar ariIin

8

- Pada table kita bisa menggabungkan beberapa kolom atau baris, dengan menggunakan atribut
colspan dan rowspan.
- sama seperti tag-tag yang lain, table~,tr~,td~th~ bisa kita atur warna dan bckgroundnya,
menggunakan atribut bgcolor dan background
III. FORM
1. Jelaskan dua buah nilai/value atribut method pada tag Iorm~ !
- Get : cara pengiriman data dari sebuah Iorm dengan menggunakan url sebagai media
pengirimnya, method ini cocok untuk Iorm search, dan sangat tidak cocok untuk data yang
mengandung data penting seperti password, karena akan terlihat atau di ketahui oleh orang lain
dari url nya
- Post : cara mengiriman data secara terpisah dari sebuah Iorm ke halaman lain, untuk kemudian di
olah kembali menggunakan php , asp ,dll. Method ini sangat cocok untuk data-data penting.
Seperti account data, Karena data di kirim secara terpisah. Dan tidak dapat di ketahui oleh orang
lain.

2. Jelaskan perbedaan penggunaan type radio dan checkbox !
- Radio : Radio adalah sebuah type dari tag input, radio di gunakan untuk menyediakan Iorm
berupa pilihan pilihan yang hanya salah satu saja yang bisa di pilih oleh user. Contoh nya,
pilihan mengenai gender, pasti setiap orang hanya memiliki 1 gender, berbeda dengan
- Checkbox : checkbox mempunyai pengertian yang hampir sama dengan input type radio, namun
yang membedakan, cara pengambilan inIormasi dari user, yaitu user bias memilih pilihan lebih
dari satu, contohnya pilihan mengenai hoby, setiap orang mempunyai hobi yang berbeda, dan
lebih dari satu.

3. Jelaskan Iungsi atribut size, multiple dan selected pada tag select~ dibawah ini!
select name"extras" size3 multiple~
option selected~ electric windows /option~
option~ am/Im radio /option~
option~ turbocharger /option~
/select~
- Size : size, seperti namanya size adalah ukuran, biasanya atribut ini di gunakan untuk mengatur
ukuran sebuah elemen-elemen pada halaman web. Tapi berbeda untuk tag select~ size disini
berIungsi untuk mengatur berapa bnyak option yang di tampilkan. Di bawah ini contoh tag select
dengan size2




eb base Iorm , Muhammad akbar ariIin

9

- Multiple : atribut ini berIungsi untuk mengeset agar user bisa memilih beberapa pilihan,
- Selected : selected mempunyai arti telah di pilih, dari sini sudah ketahuan Iungsi dari atribut ini,
selected di gunakan untuk menentukan pilihan deIault dari sebuah tag select~,
-
4. Iorm


html~
head~
title~tugas membuat Iorm - web base |m. akbar|
/title~
head~
body~
Iieldset~
legend align"center"~B~FORM PENDAFTARAN CLUB
IT/b~/legend~
Iorm action"data.php" method"post"~
table cellspacing"0" cellpadding"3" align"center"~
tr~
td bgcolor"#e7ebe7"~Nama:/td~
td bgcolor"#99dd00"~input type"text" name"nama"
size"70"/td~
/tr~
tr~
td bgcolor"#e7ebe7"~Kelas:/td~
td bgcolor"#99dd00"~
input type"radio" name"kelas" value"X"~X
input type"radio" name"kelas" value"XI"~XI
input type"radio" name"kelas" value"XII"~XII
/td~
/tr~
tr~
td bgcolor"#e7ebe7"~Tanggal lahir:/td~
td bgcolor"#99dd00"~
?php
$nama $POST|'nama'|;
$kelas $POST|'kelas'|;
$hari $POST|'day'|;
$bulan $POST|'month'|;
$tahun $POST|'year'|;
$alamat $POST|'alamat'|;
$kota $POST|'kota'|;
$pos $POST|'pos'|;
$darah $POST|'darah'|;
$agama $POST|'agama'|;
$gender $POST|'kelamin'|;
$jurusan $POST|'jurusan'|;
$telepon $POST|'telepon'|;
$membaca $POST|'membaca'|;
$olahraga $POST|'olahraga'|;
$musik $POST|'musik'|;
$game $POST|'game'|;
?~
html~
head~
title~data dari Iorm/title~
/head~
body~
div align"center"~
h1~Data user/h1~
/div~
table align"center" border"2"~
eb base Iorm , Muhammad akbar ariIin

10

input type"text" name"day" size"2"~-

input type"text" name"month" size"2"~-
input type"text" name"year" size"2"~dd-mm-yy
/tr~
tr~
td bgcolor"#e7ebe7"~Alamat:/td~
td bgcolor"#99dd00"~
textarea name"alamat" cols"40" rows"5"~/textarea~
/td~
/tr~
tr~
td bgcolor"#e7ebe7"~Kota:/td~
td bgcolor"#99dd00" ~input type"texs" name"kota"
size"30"~/td~
/tr~
tr~
td bgcolor"#e7ebe7"~Kode Pos:/td~
td bgcolor"#99dd00"~input type"text" name"pos"
size"5"~/td~
/tr~
tr~
td bgcolor"#e7ebe7"~Golongan Darah:/td~
td bgcolor"#99dd00"~
input type"radio" name"darah" value"A"~A
input type"radio" name"darah" value"B"~B
input type"radio" name"darah" value"O"~O
input type"radio" name"darah" value"AB"~AB
/td~
/tr~
tr~
td bgcolor"#e7ebe7"~Agama:/td~
td bgcolor"#99dd00"~
select name"agama"~
option value"islam"~Islam/option~
option Value"kristen"~Kristen/option~
option value"budha"~Budha/option~
option value"katholik"~Khatholik/option~
option Value"hindu"~Hindu/option~
/select~
/td~
/tr~
tr~
td bgcolor"#e7ebe7"~Jenis Kelamin:/td~
td bgcolor"#99dd00"~
input type"radio" name"kelamin" value"Pria"~Pria
input type"radio" name"kelamin"
value"anita"~anita
/td~
/tr~
tr~
td bgcolor"#e7ebe7"~Subject yang Anda Pilih:/td~
td bgcolor"#99dd00"~
input type"radio" name"jurusan"
value"Database"~Databasebr~
input type"radio" name"jurusan" value"Design
GraIik"~Design GraIikbr~
input type"radio" name"jurusan" value"eb
rogramming"~eb rogrammingbr~
input type"radio" name"jurusan"
value"Networking"~Networkingbr~
input type"radio" name"jurusan"
tr~
td~Nama:/td~
td~?php echo $nama; ?~/td~
/tr~
tr~
td~Kelas:/td~
td~?php echo $kelas; ?~/td~
/tr~
tr~
td~Tanggal lahir:/td~
td~?php echo $hari,'-', $bulan,'-', $tahun; ?~/td~
/tr~
tr~
td~Alamat:/td~
td~?php echo $alamat; ?~/td~
/tr~
tr~
td~kota:/td~
td~?php echo $kota; ?~/td~
/tr~
tr~
td~kode pos:/td~
td~?php echo $pos;?~/td~
/tr~
tr~
td~Golongan darah:/td~
td~?php echo $darah;?~/td~
/tr~
tr~
td~Agama:/td~
td~?php echo $darah;?~/td~
/tr~
tr~
td~gender:/td~
td~?php echo $gender;?~/td~
/tr~
tr~
td~jurusan:/td~
td~?php echo $jurusan;?~/td~
/tr~

tr~
td~telepon:/td~
td~?php echo $telepon;?~/td~
/tr~

tr~
td~hobi:/td~
td~
membaca : ?php echo $membaca;?~ br~
olahraga : ?php echo $olahraga;?~br~
musik : ?php echo $musik;?~br~
game : ?php echo $game;?~br~
/td~
/tr~
/table~
/body~
/html~
eb base Iorm , Muhammad akbar ariIin

11

value"Programing"~Programingbr~
/td~
/tr~
tr~
td bgcolor"#e7ebe7" ~Email:/td~
td bgcolor"#99dd00"~input type"text" name"Email"
size"55"~/td~
/tr~
tr~
td bgcolor"#e7ebe7"~Phone/Handphone:/td~
td bgcolor"#99dd00"~
input type"text" name"telepon"~
/td~
/tr~
tr~
td bgcolor"#e7ebe7"~Hobby/td~
td bgcolor"#99dd00"~
input type"checkbox" name"membaca"
value"ya"~Membaca br~
input type"checkbox" name"olahraga" value"ya"~Olah
Raga br~
input type"checkbox" name"musik"
value"ya"~Mendengarkan Musik br~
input type"checkbox" name"game" value"ya"~Main
Game
/td~
/tr~
tr~
td~/td~
td~
input type"submit" value"Save Data"~
input type"reset" value"Clear Form"~
/td~
/tr~
/table~
/Iorm~
/Iieldset~
/body~
/html~

III.1 Kesimpulan
- Iorm adalah elemen html yang berguna untuk mendapatkan inIormasi dari user, tag Iorm~
mempunyai beberapa subtag, diantaranya tag input~, tagselect~, tagtextarea~, tag input
mempunyai beberapa type yaitu type : text, password, radio, checkbox, button, dll

- data2 yang telah di isikan user ke dalam Iorm, kemudian input typesubmit di klik maka data
data yang ada dalam Iorm akan di kirim kan ke halaman yang sudah di tentukan dalam atribut
action dengan method post atau get. Kemudian data tersebut di olah lagi menggunakan bahasa
programming web.