KATA pengantar contoh kata (1)
1
KATA PENGANTAR
Puji syukur kami panjatkan kehadirat Tuhan Yang Maha Esa
karena dengan rahmad, karunia, serta taufik dan hidayah-Nya lah kami
dapat menyelesaikan makalah “Memahami Format Pada Halaman Web”
ini sebatas pengetahuan dan kemampuan yang dimiliki. Dan juga kami
berterima kasih pada guru mata pelajaran Pemprograman Web.
Kami sangat berharap web ini dapat bermanfaat , yaitu : Materi
Web Html. Kami juga menyadari sepenuhnya bahwa didalam tugas ini
terdapat kekurangan dan jauh dari apa yang kami harapkan. Untuk itu
kami harap dan kritik dan saran demi perbaikan di masa yang akan
datang.
Semoga Web sederhana ini dapat dipahami bagi siapapun yang
membacanya. Sekiranya makalah ini disusun ini dapat bergunabagi kami
sendiri maupun orang yang membacanya. Sebelum kami mohon maaf
apabila terdapat kesalahaan kata-kata maupun ejaan yang kurang benar
mohon kritik atau saran semoga dapat di perbaiki di masa depan.
Karanganyar, 08 Mar 2014
DAFTAR ISI
HAL
2
HALAMAN JUDUL
KATA PENGANTAR
DAFTAR ISI
BAB I PENDAHULUAN
A. Latar Belakang Masalah
B. Batasan Masalah
BAB II ISI
1. Anatomi dan cara kerja form
2. Format formulir
3. Komponen entri teks (input teks password, dan input
1
2
3
4
4
4
6
6
14
multiline) pada formulir halaman web
4. Komponen entri pilihan (input file, radio, checkbox,
select dan datalist) pada formulir halaman web
BAB III PENUTUP
LAMPIRAN GAMBAR
DAFTAR PUSTAKA
21
22
24
BAB I
PENDAHULUAN
A. Latar Belakang Masalah
komponen check box, sering digunakan untuk input yang
berupa check list dari pilihan option yang ada. Barang kali ada
kesalahan dalam java script yang menyebabkan tidak bisa. Dan
dengan makalah ini, dapa lebih mengerti tentang komponen check
box, sering digunakan untuk input yang berupa check list.
B. Batasan Masalah
3
Untuk mempermudah penyusunan makalah dan pemahaman
siswa dalam pelaksanaan perakerin, di berlakukan batasan
masalah, sehingga siswa dapat mempelajari hal-hal yang berkaitan
dengan bidangnya secara lebih terfokus. Dalam makalah ini,
masalah
yang
akan
di
batasi
hanya
seputar
tentang
penanggulangan masalah pada computer seperti halnya terjadi
hang, tidak masuk windows, harddisk tidak terdeteksi, dll.
BAB I
ISI
1. Anatomi dan cara kerja form
Penggunaan Form pada HTML
Form adalah salah satu elemen HTML yang sangat sering
dijumpai bagi anda pengguna layanan internet. Hampir seluruh
halaman web yang anda kunjungi mengandung unsur form
didalamnya. Form dapat ditemukan pada halaman web yang
memiliki fungsi komunikasi, bukan hanya komunikasi antar
pengguna internet seperti chatting, social network, dan email,
tetapi juga komunikasi antara pengguna internet dengan web
server seperti format pendaftaran untuk membuat account
sebuah situs. Saat seseorang hendak membuat account sebuah
situs, dia memberikan informasi kepada web server yang
4
biasanya berupa identitas diri. Identitas tersebut diinputkan
melalui form kemudian dikirim ke database web server.
Jadi, form biasanya digunakan untuk halaman web yang
bersifat dinamis sehingga memungkinkan terjadinya komunikasi
antara user dengan web server atau user lain. Form
memungkinkan suatu web server untuk menerima informasi
dari user melalui sejumlah elemen kontrol. Elemen kontrol yang
dapat digunakan untuk membuat form yaitu :
a.
Teks baris tunggal
b.
Teks baris jamak
c.
Teks password
d.
Tombol submit dan reset
e.
Checkbox
f.
Radio button
g.
Menu pop-up
Sebelum mempelajari cara membuat elemen-elemen kontrol
di atas, anda sebaiknya mengetahui terlebih dahulu struktur tag
yang digunakan untuk membuat
form. Berikut strukturnya :
(Gambar-1.Lampiran)
Dari struktur di atas dapat diketahui bahwa cara pembuatan
form dalam HTML adalah dengan menambahkan tag ...
5
, kemudian ditambahkan dengan atribut tag METHOD
dan ACTION.
Fungsi atribut METHOD adalah untuk menentukan metoda
apa yang digunakan untuk mengirim data ke script tujuan.
Dalam hal ini ada 2 cara yang dapat digunakan yaitu GET dan
POST. Keduanya tentu memiliki perbedaan dari cara
mengirimkan data. Sedangkan untuk fungsi dari atribut ACTION
adalah untuk menentukan URL tujuan dari script yang akan
menerima data dari form.
Sebagai contoh perhatikan tag berikut :
... elemen kontrol ...
Dari tag di atas dapat diketahui bahwa pada form tersebut, data
yang diinputkan oleh user akan dikirimkan dengan cara post ke
sebuah file PHP dengan nama identitas.php yang letaknya ada
di direktori tempat dimana file HTML (yang berisi form tersebut)
berada.
Setelah mengetahui struktur dari tag form, selanjutnya akan
dibahas mengenai elemen kontrol pada form. Ada 3 tag yang
digunakan untuk membuat elemen kontrol pada form yaitu :
a. Tag , untuk membuat elemen text, checkbox,
radio button, tombol submit, dan tombol reset.
b. Tag , untuk membuat menu pop-up.
c. Tag , untuk membuat kolom isian teks panjang
TAG
Tag ini digunakan untuk membuat elemen text (default
6
text, password text, hidden text), checkbox, radio button, tombol
submit, dan tombol reset. Dalam penggunaannya, tag ini tidak
dapat berdiri sendiri, tag ini membutuhkan atribut tag
pendukung sehingga dapat menampilkan form pada HTML.
Atribut tersebut adalah TYPE, NAME, dan VALUE. Berikut
strukturnya :
Fungsi dari atribut TYPE adalah untuk menentukan
tipe elemen kontrol yang akan digunakan. Berikut
daftar nilai atribut TYPE yang dapat digunakan
beserta fungsinya :
(Gambar-2.Lampiran)
2. Format formulir
Dasar Penggunaan Formulir
Didalam sebuah halaman web terkadang kita menjumpai
adanya buku tamu bagi pengunjung, umpan balik dan
pendaftaran anggota. Diantara ketiga bentuk tampilan tersebut
pasti telah menggunakan komponen formulir. Untuk membentuk
sebuah formulir diperlukan pasangan tag dan .
Dan menggunakan atribut pendukung form yaitu action dan
method.
ACTION digunakan untuk menentukan tujuan apabila
sebuah tombol pada formulir dijalankan.
METHOD
digunakan
untuk
menentukan
teknis
penyampaian informasi setelah tombol dijalankan untuk
mengakses atau mengirim sebuah informasi. Umumnya
method terdiri dari dua jenis yaitu get dan post. Bila
7
menggunakan get berarti informasi yang ditampilkan
akan diperoleh pada halaman itu sendiri dalam hal ini url
pada action. Sedangkan post informasi tersebut akan
dikirimkan terpisah dari url.
Untuk lebih jelasnya penggunaan action dan method dapat
dilihat pada potongan program berikut ini :
< form action=”kirim.html”
method=”post”>………….
Tag Input Pada Formulir
Untuk menginputkan sebuah data atau teks diperlukan
sebuah area yang jelas. Area tersebut bermacam-macam
bentuknya ada yang berupa kotak isian ada juga yang berupa
kotak kecil atau lingkaran yang cara mengisinya cukup dengan
mengklik pada area tersebut serta masih ada bentuk-bentuk
yang lainnya. Untuk membentuknya pada formulir diperlukan
tag dan beberapa atribut pendukung dan letaknya
berada dalam pasangan tag dan . Tag input
memiliki sejumlah atribut. Atribut-atributnya seperti yang terlihat
pada tabel berikut :
(Gambar-3.Lampiran)
Contoh berikut ini memperlihatkan penggunaan formulir yang
melibatkan field teks, tombol submit dan reset.
Formulir.html
formulir
Nama :
8
Hobby :
Berkas program info.html
Info.html
Informasi yang anda butuhkan ada di sini
Untuk menujukan bahwa jika tombol submit diklik maka berkas
HTML yang disebutkan dalam atribut action pada tag
akan dimuat.. Setelah anda mempelajari PHP, ASP atau
database web lainya, anda akan mengetahui bagaimana cara
menangkap nilai-nilai yang dimasukan pada kedua field teks di
atas
3. Komponen entri teks (input teks password, dan input multiline)
pada formulir halaman web.
9
Passwor merupakan kata sandi yang digunakan untuk
membuka atau mengakses suatu informasi. Password
umumnya merupakan karakter baik itu angka maupun huruf.
Cara memasukan password biasanya telah disediakan area
khusus dan karakter yang dituliskan tidak terlihat seperti kata
aslinya. karakter yang telah dimasukan tersebut umumnya
diterjemahkan dalam kode tertentu dan yang sering dijumpai
berbentuk karakter “ * ”. Berikut adalah contoh kode htmlnya :
Password.html
password
Nama User :
Password :
4. Komponen entri pilihan (input file, radio, checkbox, select dan
datalist) pada formulir halaman web
10
a. Radio
Penggunaan Tipe Radio
Tipe radio umumnya sama penggunaanya dengan
checkbox. Hanya saja kalau checkbox berbentuk kotak dan
tandanya berupa karakter centang, kalau pada radio
berbentuk bulatan dengan ditandai karakter titik berwarna
hitam apabila kita telah memilihnya. Berikut ini diberikan
contoh untuk penggunaan tipe radio :
Radio.html
radio
Jenis kelamin:
pria
wanita
Agama :
islam
kristen
katolik
budha
11
hindu
lain-lain
b. Checkbox
Penggunaan Tipe Checkbox
Memilih sebuah informasi dengan cara mengklik kotak
tertentu dan selanjutnya terdapat karakter khusus yang
menandai
kotak
tersebut,
pada
formulir
inilah
yang
dinamakan tipe checkbox. Karakter tersebut umumnya
berbentuk tanda checklist/centang.
Berikut ini adalah contoh penggunaan tipe checkbox
Checkbox.html
radio
Sayur Kesukaan Anda :
Bayam
Kol
Sawi
Lain-lain
12
c. Select dan Data List
Untuk menentukan pilihan dengan cara memilih
sendiri terhadap yang ditampilkan pada daftar tertentu dapat
dibuat dengan menggunakan pasangan tag dan
, istilah lain dari select adalah kotak kombo (dropdown)
atau
daftar
pilihan.contoh
penggunaan
select
diperlihatkan pada contoh berikut ini :
Select.html
textarea
BAB II
PENUTUP
13
A. KEIMPULAN.
Dari materi diatas kita bisa membuat sebauh form
dan kita memperoleh wawasan tentang tentang pemprograman
web kita juga bisa membuat Formulir di halaman web.
14
LAMPIRAN FOTO
15
DAFTAR PUSTAKA
http://pemprograman-web/09/02/2009
http://from-formulir/01/01/2010-117
16
KATA PENGANTAR
Puji syukur kami panjatkan kehadirat Tuhan Yang Maha Esa
karena dengan rahmad, karunia, serta taufik dan hidayah-Nya lah kami
dapat menyelesaikan makalah “Memahami Format Pada Halaman Web”
ini sebatas pengetahuan dan kemampuan yang dimiliki. Dan juga kami
berterima kasih pada guru mata pelajaran Pemprograman Web.
Kami sangat berharap web ini dapat bermanfaat , yaitu : Materi
Web Html. Kami juga menyadari sepenuhnya bahwa didalam tugas ini
terdapat kekurangan dan jauh dari apa yang kami harapkan. Untuk itu
kami harap dan kritik dan saran demi perbaikan di masa yang akan
datang.
Semoga Web sederhana ini dapat dipahami bagi siapapun yang
membacanya. Sekiranya makalah ini disusun ini dapat bergunabagi kami
sendiri maupun orang yang membacanya. Sebelum kami mohon maaf
apabila terdapat kesalahaan kata-kata maupun ejaan yang kurang benar
mohon kritik atau saran semoga dapat di perbaiki di masa depan.
Karanganyar, 08 Mar 2014
DAFTAR ISI
HAL
2
HALAMAN JUDUL
KATA PENGANTAR
DAFTAR ISI
BAB I PENDAHULUAN
A. Latar Belakang Masalah
B. Batasan Masalah
BAB II ISI
1. Anatomi dan cara kerja form
2. Format formulir
3. Komponen entri teks (input teks password, dan input
1
2
3
4
4
4
6
6
14
multiline) pada formulir halaman web
4. Komponen entri pilihan (input file, radio, checkbox,
select dan datalist) pada formulir halaman web
BAB III PENUTUP
LAMPIRAN GAMBAR
DAFTAR PUSTAKA
21
22
24
BAB I
PENDAHULUAN
A. Latar Belakang Masalah
komponen check box, sering digunakan untuk input yang
berupa check list dari pilihan option yang ada. Barang kali ada
kesalahan dalam java script yang menyebabkan tidak bisa. Dan
dengan makalah ini, dapa lebih mengerti tentang komponen check
box, sering digunakan untuk input yang berupa check list.
B. Batasan Masalah
3
Untuk mempermudah penyusunan makalah dan pemahaman
siswa dalam pelaksanaan perakerin, di berlakukan batasan
masalah, sehingga siswa dapat mempelajari hal-hal yang berkaitan
dengan bidangnya secara lebih terfokus. Dalam makalah ini,
masalah
yang
akan
di
batasi
hanya
seputar
tentang
penanggulangan masalah pada computer seperti halnya terjadi
hang, tidak masuk windows, harddisk tidak terdeteksi, dll.
BAB I
ISI
1. Anatomi dan cara kerja form
Penggunaan Form pada HTML
Form adalah salah satu elemen HTML yang sangat sering
dijumpai bagi anda pengguna layanan internet. Hampir seluruh
halaman web yang anda kunjungi mengandung unsur form
didalamnya. Form dapat ditemukan pada halaman web yang
memiliki fungsi komunikasi, bukan hanya komunikasi antar
pengguna internet seperti chatting, social network, dan email,
tetapi juga komunikasi antara pengguna internet dengan web
server seperti format pendaftaran untuk membuat account
sebuah situs. Saat seseorang hendak membuat account sebuah
situs, dia memberikan informasi kepada web server yang
4
biasanya berupa identitas diri. Identitas tersebut diinputkan
melalui form kemudian dikirim ke database web server.
Jadi, form biasanya digunakan untuk halaman web yang
bersifat dinamis sehingga memungkinkan terjadinya komunikasi
antara user dengan web server atau user lain. Form
memungkinkan suatu web server untuk menerima informasi
dari user melalui sejumlah elemen kontrol. Elemen kontrol yang
dapat digunakan untuk membuat form yaitu :
a.
Teks baris tunggal
b.
Teks baris jamak
c.
Teks password
d.
Tombol submit dan reset
e.
Checkbox
f.
Radio button
g.
Menu pop-up
Sebelum mempelajari cara membuat elemen-elemen kontrol
di atas, anda sebaiknya mengetahui terlebih dahulu struktur tag
yang digunakan untuk membuat
form. Berikut strukturnya :
(Gambar-1.Lampiran)
Dari struktur di atas dapat diketahui bahwa cara pembuatan
form dalam HTML adalah dengan menambahkan tag ...
5
, kemudian ditambahkan dengan atribut tag METHOD
dan ACTION.
Fungsi atribut METHOD adalah untuk menentukan metoda
apa yang digunakan untuk mengirim data ke script tujuan.
Dalam hal ini ada 2 cara yang dapat digunakan yaitu GET dan
POST. Keduanya tentu memiliki perbedaan dari cara
mengirimkan data. Sedangkan untuk fungsi dari atribut ACTION
adalah untuk menentukan URL tujuan dari script yang akan
menerima data dari form.
Sebagai contoh perhatikan tag berikut :
... elemen kontrol ...
Dari tag di atas dapat diketahui bahwa pada form tersebut, data
yang diinputkan oleh user akan dikirimkan dengan cara post ke
sebuah file PHP dengan nama identitas.php yang letaknya ada
di direktori tempat dimana file HTML (yang berisi form tersebut)
berada.
Setelah mengetahui struktur dari tag form, selanjutnya akan
dibahas mengenai elemen kontrol pada form. Ada 3 tag yang
digunakan untuk membuat elemen kontrol pada form yaitu :
a. Tag , untuk membuat elemen text, checkbox,
radio button, tombol submit, dan tombol reset.
b. Tag , untuk membuat menu pop-up.
c. Tag , untuk membuat kolom isian teks panjang
TAG
Tag ini digunakan untuk membuat elemen text (default
6
text, password text, hidden text), checkbox, radio button, tombol
submit, dan tombol reset. Dalam penggunaannya, tag ini tidak
dapat berdiri sendiri, tag ini membutuhkan atribut tag
pendukung sehingga dapat menampilkan form pada HTML.
Atribut tersebut adalah TYPE, NAME, dan VALUE. Berikut
strukturnya :
Fungsi dari atribut TYPE adalah untuk menentukan
tipe elemen kontrol yang akan digunakan. Berikut
daftar nilai atribut TYPE yang dapat digunakan
beserta fungsinya :
(Gambar-2.Lampiran)
2. Format formulir
Dasar Penggunaan Formulir
Didalam sebuah halaman web terkadang kita menjumpai
adanya buku tamu bagi pengunjung, umpan balik dan
pendaftaran anggota. Diantara ketiga bentuk tampilan tersebut
pasti telah menggunakan komponen formulir. Untuk membentuk
sebuah formulir diperlukan pasangan tag dan .
Dan menggunakan atribut pendukung form yaitu action dan
method.
ACTION digunakan untuk menentukan tujuan apabila
sebuah tombol pada formulir dijalankan.
METHOD
digunakan
untuk
menentukan
teknis
penyampaian informasi setelah tombol dijalankan untuk
mengakses atau mengirim sebuah informasi. Umumnya
method terdiri dari dua jenis yaitu get dan post. Bila
7
menggunakan get berarti informasi yang ditampilkan
akan diperoleh pada halaman itu sendiri dalam hal ini url
pada action. Sedangkan post informasi tersebut akan
dikirimkan terpisah dari url.
Untuk lebih jelasnya penggunaan action dan method dapat
dilihat pada potongan program berikut ini :
< form action=”kirim.html”
method=”post”>………….
Tag Input Pada Formulir
Untuk menginputkan sebuah data atau teks diperlukan
sebuah area yang jelas. Area tersebut bermacam-macam
bentuknya ada yang berupa kotak isian ada juga yang berupa
kotak kecil atau lingkaran yang cara mengisinya cukup dengan
mengklik pada area tersebut serta masih ada bentuk-bentuk
yang lainnya. Untuk membentuknya pada formulir diperlukan
tag dan beberapa atribut pendukung dan letaknya
berada dalam pasangan tag dan . Tag input
memiliki sejumlah atribut. Atribut-atributnya seperti yang terlihat
pada tabel berikut :
(Gambar-3.Lampiran)
Contoh berikut ini memperlihatkan penggunaan formulir yang
melibatkan field teks, tombol submit dan reset.
Formulir.html
formulir
Nama :
8
Hobby :
Berkas program info.html
Info.html
Informasi yang anda butuhkan ada di sini
Untuk menujukan bahwa jika tombol submit diklik maka berkas
HTML yang disebutkan dalam atribut action pada tag
akan dimuat.. Setelah anda mempelajari PHP, ASP atau
database web lainya, anda akan mengetahui bagaimana cara
menangkap nilai-nilai yang dimasukan pada kedua field teks di
atas
3. Komponen entri teks (input teks password, dan input multiline)
pada formulir halaman web.
9
Passwor merupakan kata sandi yang digunakan untuk
membuka atau mengakses suatu informasi. Password
umumnya merupakan karakter baik itu angka maupun huruf.
Cara memasukan password biasanya telah disediakan area
khusus dan karakter yang dituliskan tidak terlihat seperti kata
aslinya. karakter yang telah dimasukan tersebut umumnya
diterjemahkan dalam kode tertentu dan yang sering dijumpai
berbentuk karakter “ * ”. Berikut adalah contoh kode htmlnya :
Password.html
password
Nama User :
Password :
4. Komponen entri pilihan (input file, radio, checkbox, select dan
datalist) pada formulir halaman web
10
a. Radio
Penggunaan Tipe Radio
Tipe radio umumnya sama penggunaanya dengan
checkbox. Hanya saja kalau checkbox berbentuk kotak dan
tandanya berupa karakter centang, kalau pada radio
berbentuk bulatan dengan ditandai karakter titik berwarna
hitam apabila kita telah memilihnya. Berikut ini diberikan
contoh untuk penggunaan tipe radio :
Radio.html
radio
Jenis kelamin:
pria
wanita
Agama :
islam
kristen
katolik
budha
11
hindu
lain-lain
b. Checkbox
Penggunaan Tipe Checkbox
Memilih sebuah informasi dengan cara mengklik kotak
tertentu dan selanjutnya terdapat karakter khusus yang
menandai
kotak
tersebut,
pada
formulir
inilah
yang
dinamakan tipe checkbox. Karakter tersebut umumnya
berbentuk tanda checklist/centang.
Berikut ini adalah contoh penggunaan tipe checkbox
Checkbox.html
radio
Sayur Kesukaan Anda :
Bayam
Kol
Sawi
Lain-lain
12
c. Select dan Data List
Untuk menentukan pilihan dengan cara memilih
sendiri terhadap yang ditampilkan pada daftar tertentu dapat
dibuat dengan menggunakan pasangan tag dan
, istilah lain dari select adalah kotak kombo (dropdown)
atau
daftar
pilihan.contoh
penggunaan
select
diperlihatkan pada contoh berikut ini :
Select.html
textarea
BAB II
PENUTUP
13
A. KEIMPULAN.
Dari materi diatas kita bisa membuat sebauh form
dan kita memperoleh wawasan tentang tentang pemprograman
web kita juga bisa membuat Formulir di halaman web.
14
LAMPIRAN FOTO
15
DAFTAR PUSTAKA
http://pemprograman-web/09/02/2009
http://from-formulir/01/01/2010-117
16