11
|
LAPORAN PRAKTIKUM
PENGENALAN
WEB
Modul 4
Membuat
Form
Disusun
Oleh :
HERI PURNAMA
125410101
TI 03
UPT LABORATORIUM
Sekolah Tinggi Manajemen Informatika dan Komputer
AKAKOM
Yogyakarta
2014
Membuat Form
1).PEMBAHASAN
A.LISTING
TYPE HTML>
·
Tag ini digunakan untuk jaminan bagi anda
bahwa tag-tag yang anda buat sepenuhnya berjenis HTML murni ,tanpa ada
embel-embel tag lain yang mempegaruhinya.Ketika broser menemimui tag tersebut
maka browser akan mengenali script tersebut sebagai 100% html.
·
Tag diatas
menunjukkan bahwa yang dituliskan adalah kode HTML atau kata kunci yang
terletak didalam angle brackets.Tag ini disebut juga sebagai start tag atau
opening start.
·
Ini adalah tag
yang ada didalam tag
yakni tag
|
·
Tag ini
adalah end tag /closing tag dari tag
sebelumnya.Ini juga disebut sebagai HTML element.
Ø Tag ini diggunakan untuk membuat
background pada halaman Web yang mana background tersebut berwarna merah
terang.
Isikan data Pribadi
Anda
Ø
Tag
ini digunakan untuk membuat form pada halaman Web yang mana menggunakan dua
atribut yakni Action dan method.Action digunakan untuk menentukan URL yang
akan dijalankan dan menerima semua masukkan dari formulir.Method digunakan
menetukan cara pengiriman informasi,yaitu dengan nilai gaet atau Post.Dan
sini menggunakan nilai Post nilai Post yakni digunakan jika informasi yang
dikirim secara terpisah dengan URL.
Ø Tag ini digunakan untuk membuat tabel
pada halaman Web
Ø
Tag
ini digunakan untuk membuat baris yakni baris pertama pada sebuah tabel yang
kita buat.
Nama :
Ø
Tag
ini digunakan untuk membuat kolom pada baris pertama pada halaman Web yang
mana kata yang ada diantara tag tersebut yang akan ditampilkan dalam kolom
yang telah dibuat.
Ø Tag ini digunakan untuk membuat kolom
kedua pada baris pertama yang mana mengunakan tipe inputan dengan disertai
atributnya masing-masing,atribut type
digunakan untuk menentukan tipe kotak masukkan pada kolom ini digunakan tipe
yakni tipe text dan atribut
selanjutnya adalah name atribut ini
digunakan untuk menentukan nama data pada hal ini dinamai dengan nama name dan atribut Size digunakan untuk menentukan ukuran kotak masukan dan pada
hal ini mengunakan panjang ukuranya adalah 30.
Ø Tag ini digunakan untuk membuat baris
kedua pada sebuah tabel yang telah kita buat pada halaman Web tadi
Umur :
Ø Tag ini digunakan untuk membuat kolom
pada baris kedua yang mana kata diantara tag tersebut yang akan ditampilkan dan
kata yang akan ditampilkan adalah kata Umur.
Ø
Tag
ini digunakan untuk membuat kolom kedua pada baris kedua yang mana pada kolom
ini dibuat atau didesain menggunakan tag select
Ø
Terlihat
pada tag diatas mengunakan tag select tag select ini digunakan untuk
menampilkan beberapa pilihan dengan menggunakan kotak kombo (drop-down).
Ø Tag ini digunakan untuk membuat baris
ketiga pada tabel yang akan kita buat tadi.
alamat :
Ø Tag ini digunakan untuk membuat kolom
pertama pada baris ketiga yang mana pada kata yang ada diantara tag ini yang
akan ditampilkan di dalam kolom ini.
Ø Tag ini digunakan untuk membuat Kolom
kedua pada baris ketiga yang mana disisipkan mengunakan tipe inputan yakni
textarea.
Ø Inputan text area digunakan untuk
membuat Tipe inputan yang panjang.Yang mana menggunakan atribut yaitu atribut
Cols atribut yang digunakan menentukan lebar textarea atribut rows digunakan
untuk menentukan panjang text area dan atribut Dame digunakan untuk
menentukan nama textarea.
Ø
Tag
ini digunakan untuk membuat baris keempat pada for tabel pada halaman Web
yang telah kita buat.
hobi :
Ø Tag ini digunakan untuk membuat kolom
pertama pada baris keempat pada halaman Web yang mana kata yang ada diantara
tag yang akan muncul pada kolom pada halaman Web ini.
Ø
Tag
ini digunakan untuk membuat kolom kedua pada baris keempat yang mana
mengunakan tipe inputan yakni tipe input yaitu checkbox.
makan
tidur
baca
nonton
Ø
Inputan
checkbox adalah tipe inputan yakni membuat kotak cek yang mana user bisa
memilih lebih dari satu pilihan.atribut tipe digunakan untuk menentukan tipe
kotak masukkan,name digunakan untuk menentukan nama data,value digunakan
untuk menentukan nilai awal untuk kotak masuk. Sedangkan kata yang ada
diantara tag adalah kata yang akan ditampilkan dan akan menjadi pilihan pada saat ditampilkan pada
halaman Web.
Ø
Tag
ini digunakan untuk membuat baris kelima pada halaman Web yang akan dibuat
mempunyai dua buah kolom.
Foto :
Ø Tag ini digunakan untuk membuat kolom
pertama pada baris kelima yang mana kata yang ada diantara tag adalah kata
yang akan ditampilkan pada kolom ini.
Ø Tag ini digunakan untuk membuat tipe
inputan pada sebuah tabel yang mana menggunakan atribut yakni tipe atribut
ini digunakan untuk menentukan tipe kotak masukkan atribut name digunakan
untuk menentukan nama data.
Ø
Tag
ini digunakan untuk membuat baris kelima pada sebuah halaman Web yang mana
menggunakan tag inputan yakni submit dan reset.
Ø Tag ini digunakan untuk membuat kolom
pada baris ini yang mana menggunakan tipe inputan dan atribut colspan
digunakan untuk mengabungkan kolom dan pada hal ini digunakan untuk
menggabungkan dua kolom.
Ø Pada kolom ini menggunakan atribut yakni
tipe digunakan untuk menentukan tipe kotak masukkan dan kotak masukanya
dengan subunit yakni membuat Tombol.jika tombol ditekan maka URL yang
disebutkan pada atribut ACTION dalam tag
Ø tag ini adalah akhir dari tag yakni tag
baris atau bisa disebut endtag
Ø tag ini adalah akhir dari tag yakni tag
Tabel atau bisa disebut endtag
Ø tag ini adalah akhir dari tag yakni tag
untuk membuat form atau bisa disebut endtag
Ø tag ini adalah akhir dari tag yakni tag
untuk membuat form atau bisa disebut endtag
Ø tag ini adalah akhir dari tag yakni tag
html atau bisa disebut endtag
v Tampilan pada form Pengisian
B.LISTING
·
Tag ini digunakan untuk jaminan bagi anda
bahwa tag-tag yang anda buat sepenuhnya berjenis HTML murni ,tanpa ada
embel-embel tag lain yang mempegaruhinya.Ketika broser menemimui tag tersebut
maka browser akan mengenali script tersebut sebagai 100% html.
·
Tag diatas
menunjukkan bahwa yang dituliskan adalah kode HTML atau kata kunci yang
terletak didalam angle brackets.Tag ini disebut juga sebagai start tag atau
opening start.
|
·
Ini adalah tag
yang ada didalam tag
yakni tag </b>yang mana
tag ini disebut start tag dan yang ini <b>
disebut end tag/closing tag.
…….. disebut sebagai HTML
element.Sedangkan kata ”Dari
input di form” sebagai element content.yang
mana elemen konten adalah semua yang terletak diantara start tag dan end tag.
Ø Tag ini diggunakan untuk membuat
background pada halaman Web yang mana background tersebut berwarna merah
terang.
Anda telah belajar membuat formulir
Terima kasih
Ø
Kalimat
yang ditulisakan diatas adalah kalimat yang akan ditampilkan di dalam halaman
Web dan
Ø
Tag
br digunakan untuk membuat ganti baris adu sama halnya Center pada keyboard.
Ø Tag ini digunakan untuk menandakan bahwa
tag Body sudah berakhir dan tag ini juga bisa disebut sebagai endtag
Ø Tag ini digunakan untuk menandakan bahwa
tag html sudah berakhir dan tag ini juga bisa disebut sebagai endtag
v Tampilan pada saat pada tombol simpan ditekan pada form isi data pribadi
2). A.PEMBAHASAN TUGAS
Ø
Tag-tag
diatas digunakan untuk membuat sebuah halaman Web yang mana dengan titel yang
berjudul “Membuat Form”
Ø Tag-tag diatas digunakan untuk membuat
form dan tabel yang mana tag pada baris kedua digunakan untuk pengalihan ke
halaman Web lain jika pada saat tombol Buton simpan ditekan itu dikarenakan
menggunakan method yakni Post yaitu digunakan untuk pindah ke halaman Web
lain yang berbeda dengan URL.Dan pada Table ini digunakan lebar bordernya
yakni setebal 3.
Form input
data penduduk
Ø
Tag-tag
diatas digunakan untuk membuat baris pertama dengan satu kolom.Pada kolom
yang pertama dibuat dengan menggabungkan dua kolom menjadi satu dengan teks rata tengah.Dan pada kolom
ini dimasukkan kalimat yakni “Form input data penduduk”.
No.KTP
Ø
Pada
tag-tag diatas digunakan untuk membuat baris dengan dua kolom ini terlihat
adanya dua tag yakni tag
yang artinya membuat kolom.denag spesifikasinya adalah dengan warna baris ini berwarna “silver” dengan kolom pertama dimasukkan kalimat “No.KTP” dengan dicetak miring ukuran font 16 warna biru tipe Courier new.
yang artinya membuat kolom.denag spesifikasinya adalah dengan warna baris ini berwarna “silver” dengan kolom pertama dimasukkan kalimat “No.KTP” dengan dicetak miring ukuran font 16 warna biru tipe Courier new.
Ø
Pada
kolom kedua di sini dibuat atau didesain dengan membuat jenis tipe inputan
dengan atribut tipe dengan tipe inputan “teks” pada atribut name dengan
nama “on.ktp”.
Nama
Ø
Pada
tag-tag ini digunakan untuk membuat baris dengan spesifikasi sama dengan yang
pertama.Dan membuat dua kolom yang mana pada kolom yang pertama dimasukkan
kata “Nama”
Ø
Dan
pada kolom kedua digunakan tipe inputan yang mana pada kolom ini pada atribut
tipe menggunakan tipe “teks” dan dengan nama pada atribut name adalah “nama”
Ø
Pada
tag-tag ini digunakan untuk membuat baris dengan spesifikasi sama dengan yang
pertama.Dan membuat dua kolom yang mana pada kolom yang pertama dimasukkan
kata “alamat”
Ø
Dan
pada kolom kedua digunakan tipe inputan yakni dengan tag yakni tag yang digunakan
untuk memasukkan teks yang panjang yang mana menggunakan atribut name atribut yang digunakan untuk
menentukan nama teksarea,Id
menentukan Id area , rows dan Cols
untuk menentukan panjang dan lebar teksarea dan wrap untuk menentukan teks secara otomatis akan dilipat atau
tidak pada area teks dengan memberikan nilai hard , off dan soft .
Jenis
Kelamin
Ø
Pada
tag-tag ini digunakan untuk membuat baris dengan spesifikasi sama dengan yang
pertama. Dan membuat dua kolom yang mana pada kolom yang pertama dimasukkan
kata “Jenis Kelamin”
Ø
Dan
pada kolom kedua digunakan tipe inputan yakni “radio” pada atribut tipe radio adalah tipe inputan yang
membuat tombol radio dalam bentuk 2 pilihan atau lebih yang mana user hanya
dapat memilih satu pilihan.
Agama
Ø
Pada
tag-tag ini digunakan untuk membuat baris dengan spesifikasi sama dengan yang
pertama. Dan membuat dua kolom yang mana pada kolom yang pertama dimasukkan
kata “Agama”
Ø
dan
pada kolom kedua ini mengunakan tag
yakni tag yang digunakan untuk menamplkan beberapa pilihan dengan
menggunakan kotak Como (drop-down).
Pekerjaan
Wiraswasta
Pendidik
Buruh
Pengusaha
Dagang
Lainya
Ø
Pada
tag-tag ini digunakan untuk membuat baris dengan spesifikasi sama dengan yang
pertama. Dan membuat dua kolom yang mana pada kolom yang pertama dimasukkan
kata “Pekerjaan”
Ø
Dan
pada kolom kedua ini mengunakan tipe inputan yakni “checkbox” yakni membuat
kotak cek.dengan beberapa atribut didalamnya yakni tipe,name , Id .tipe untuk
menentukan tipe kotak masukan name yakni menentukan nama data , Id untuk
menentukan nama Id Noya.
Foto
Ø
Pada
tag-tag ini digunakan untuk membuat baris dengan spesifikasi sama dengan yang
pertama. Dan membuat dua kolom yang mana pada kolom yang pertama dimasukkan
kata “Foto”
Ø
Dan
pada kolom yang kedua dengan menggunakan tipe inputan yakni tipe fIke yakni
tipe inputan untuk memasukkan file bisa foto atau berkas dan pada halaman Web
ini yang akan dimasukkan adalah file foto terlihat pada atribut name yang
mana pada atribut ini adalah menentukan nama data.Dengan nama data foto.
Ø
Pada
tag-tag ini digunakan untuk membuat baris dengan spesifikasi sama dengan yang
pertama.
Ø
Pada
baris ini mengunakan atribus colspan pada kolomnya yakni mengabungkan kolom
menjadi satu.align menentukan format pengaturan teks.
Ø
Pada
kolom ini mengunakan tipe input yakni ‘submit’ yaitu akan membentuk tombol
submit yaitu tombol yang menyebabkan URL yang disebutkan pada ACTION pada tag
Ø
Pada
kolom ini juga menggunakan input yakni ‘reset’ yakni akan membentuk tombol
reset yaitu tombol yang akan menghapus data yang telah dimasukkan pada bagian
form tadi.
Ø
Tag-tag
ini digunakan untuk mengakhiri tag yang sudah disebutkan diatas atau bisa
Juga disebut sebagai endtag.
Sintak Halaman b
Anda telah belajar membuat
formulir
Terima kasih
Ø
Tag
ini digunakan untuk menampilkan halaman Web pada saat tombol submit ditekan
dapat seperti itu dikarenakan Link halaman Web ini telah disebutkan pada tag
form pada atribut Action.
Ø
Pada
halaman Web ini terlihat bahwa nama judul webnya adalah ‘dari inpput form’ Yang
mana pada halaman Web ini akan menampilkan kalimat yang telah dimasukkan
dalam teks dan akan menyertakan gambar
yang telah dipilih dengan spesifikasi yang telah ditentukan.
B.TUGAS
· Tugas 1
Sintak Halaman A
Form
input data penduduk
No.KTP
Nama
Jenis
Kelamin
Agama
Pekerjaan
Wiraswasta
Pendidik
Buruh
Pengusaha
Dagang
Lainya
Foto
RUNNING
v
Tampilan diatas adalah tampilan dari
proses pegunaan tag yang telah dibuat diatas.
Sintak Halaman b
Anda
telah belajar membuat formulir
Terima
kasih
RUNNING
v Tampilan pada saat pada tombol simpan ditekan pada form input data
penduduk.
· Tugas 2
Type
|
Description
|
Type=”button”
|
Digunakan untuk
menjalankan aksi yang ada di skrip saat tombol ini ditekan
|
Type=”checkbox”
|
Digunakan untuk memilih
Item pada form lebih dari satu
|
Type=”hidden”
|
Digunakan untuk
menciptakan field yang tidak terlihat pada tabel for
|
Type=”image”
|
Digunakan untuk
menjalankan aksi yang ada di skrip saat ditekan hanya saja berupa tampilan gambar
|
Type=”password”
|
Tampilkan textbox yang
mana text yang dimasukkan oleh pengguna akan disembunyikan
|
Type=”reset”
|
Tampilan Button yang
mana akan menyetel ulang tampilan form saat ditekan
|
Type=”submit”
|
Tampilan Button yang
mana akan memasukan data pada form yang dimasukkan oleh pengguna saat tombol
ini ditekan
|
Type=”text”
|
Tampilan text Box yang
mana akan menampilkan text yang telah dimasukkan oleh user
|
Type=”radio”
|
Digunakan untuk memilih
Item pada form yang hanya dapat memilih satu
|
· Tugas 3
Pengembangan desain web
Pariwisata
v Tampilan awal pada browser
Sintak
pada halaman web sign in
SIGN IN
user
name :
password
:
v
Tampilan
saat link sign In ditekan
Sintak
pada halaman web sign up
Form
Registrasi Anggota
No.KTP
Nama
Jenis Kelamin
Agama
Pekerjaan
Wiraswasta
Pendidik
Buruh
Pengusaha
Dagang
Lainya
Foto
v
Tampilan
saat link sign up ditekan
Sintak
pada halaman web poling&voting
Form
Poling & Voting
Hari/Tanggal Pengisian
Pekerjaan
Wiraswasta
Pendidik
Buruh
Pengusaha
Dagang
Lainya
Jenis
Pariwisata Paling Disukai dan Dikunjungi
Tempat
Pariwisata yang paling menarik diJogja
Sintak
yang digunakan untuk tampilan pada saat tombol simpan ditekan
Proses input data telah
selesai
Terima kasih karna
anda
Telah mengisikan data dengan
benar. . . . !!!!!
v Tampilan pada saat pada kaliamat Poling&voting pada halaman Web dipilih
v Tampilan pada saat pada tombol simpan ditekan pada form Poling & Voting
Sintak
pada halaman web input data pariwisata
Form
input data pariwisata
Nama
Obyek Wisata
Jenis
Pariwisata
Foto
Sintak
yang digunakan untuk tampilan pada saat tombol simpan ditekan
Proses input data telah
selesai
Terima kasih karna
anda
Telah mengisikan data dengan
benar. . . . !!!!!
v Tampilan pada saat pada kaliamat data pariwisata pada halaman Web dipilih
v Tampilan pada saat pada tombol simpan ditekan pada form Poling & Voting
3).KESIMPULAN
Ø Dengan menggunakan form maka kita dapat membuat halaman Web
untuk menggambil data yang kita butuhkan
Ø Mempermudah penggabilan
data dari penggunjung halaman Web kita bila menggunakan form
Ø
Dengan
menggunakan tampilan form kita data membuat sebuah halaman Web lebih menarik
pada halaman web
Ø sebuah halaman web yang berisikan formulir
dengan format yang berbeda beda dimana dalam form itu kita dapat mengisikan
password,menggunakan checkbox,tombol radio dan berbagai macam keperluan lainnya
dalam menampilkan formulir di dalam halaman web.
4).LISTING
TERLAMPIR
0 komentar:
Post a Comment
Thanks For Your Feedback.