LISTING PROGRAM 1 :
Misalkan
kita simpan file dengan nama ika.html
<html>
<head>
<title>
Membuat Form Sederhana
</title>
</head>
<body>
<form
action="tes2.html" method = "post">
<table
border="0" cellpadding="2" cellspacing="1"
width="50%" height="228">
<tr>
<td width="100%"
colspan="2" height="35"> <b> Membuat Form
Sederhana </b> <hr> </td>
</tr>
<tr>
<td
width="15%" height="22"> Nama</td>
<td
width="40%" height="22"> <input type="text"
name="nama" size="32"> </td>
</tr>
<tr>
<td
width="15%" height="22"> Keterangan</td>
<td
width="40%" height="36"> <textarea rows="2"
cols="25" name="keterangan"> </textarea>
</td>
</tr>
<tr>
<td
width="15%" height="21"> Jenis Kelamin </td>
<td
width="40%" height="21">
<input
type="radio" value="laki-laki" checked
name="kelamin"> Laki-Laki
<input
type="radio" value="perempuan" checked
name="kelamin"> Perempuan
</td>
<tr>
<td
width="15%" height="22"> Agama </td>
<td
width="40%" height="22">
<select
size="1" name="agama">
<option>Islam</option>
<option>Kristen
Katolik</option>
<option>Kristen
Protestan</option>
<option>Hindu</option>
<option>Budha</option>
</select>
</td>
</tr>
<tr>
<td
width="15%" height="49"> </td>
<td
width="40%" height="49">
<input
type=submit name=submit value=Submit>
<input
type=reset name=reset value=Reset>
</td>
</tr>
</table>
</form>
</body>
</html>
LISTING PROGRAM 2 :
Misalkan kita simpan file dengan nama
test2.html
<html>
<head>
<title>
Hasil
</title>
</head>
<body>
<h1
align="center"> Berhasil Input Data </h1>
</body>
</html>
LOGIKA PROGRAM 1 :
Disini saya akan membuat sebuah form inputan yang
nantinya jika inputan tersebut di submit maka akan tampil suatu informasi bahwa
data tersebut telah berhasil diinput. Disini menggunakan dua halaman html atau
web page. Dimana halaman yang pertama
adalah form inputan dan halaman kedua adalah halaman informasi keduanya
dihubungkan melalui suatu link yang pendeklarasian codignya terdapat di listing
program pertama.
Berikut ini penjelasannya :
<html>
Tag ini merupakan tanda awal
dari dokumen HTML dan di akhiri dengan tag </HTML> yang merupakan tanda
akhir dari dokumen HTML.
<head>
Tag ini berfungsi
sebagai informasi page header. Dimana pada tag ini kita dapat meletakkan
tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE dan META.
<title> Membuat
Form Sederhana </title>
Tag ini digunakan untuk
menampilkan judul halaman di bagian title bar pada browser untuk mengakhiri
gunakan tag </title>.
</head>
Tag ini merupakan tag penutup dari tag <head>.
<body>
<form action="tes2.html"
method = "post">
<table border="0"
cellpadding="2" cellspacing="1" width="50%"
height="228">
Statement
ini digunakan untuk membuat isi dari tampilan web. Disini dideklarasikan suatu
aksi jika tombol submit ditekan, aksi yang diberikan adalah menghubungkan ke
halaman page dengan nama tes2.html. Kemudian akan dibuat suatu tabel dengan
pengaturan garis pinggir tabel (border) tidak terlihat,
cellpadding yang
digunakan untuk menentukan jarak antara isi dengan tepi kolom, cellspacing
yang digunakan untuk menentukan jarak antar kolom dimana jarak antar kolom
adalah 2 pixel, width dan height digunakan untuk mengatur lebar dan tinggi tabel
dari tampilan layar sebenarnya.
<tr>
<td
width="100%" colspan="2" height="35">
<b> Membuat Form Sederhana </b> <hr> </td>
</tr>
Tag
<tr> digunakan untuk membuat satu baris baru pada tabel dan <td> digunakan untuk membuat kolom baru
pada tabel. Dimana ukuran lebar dari kolom adalah 100 persen dari ukuran layar,
kemudian akan mejadikan dua kolom menjadi satu dengan perintah colspan dan
tinggi dari kolom adalah 35 pixel. Kemudian pada layar output akan tecetak
kalimat yang bercetak tebal yaitu Membuat Fomr sederhana. Untuk menutup
pembuatan kolom tulisakn tag </td> dan untuk baris tuliskan tag </tr>.
<tr>
<td width="15%"
height="22"> Keterangan</td>
<td width="40%"
height="36"> <textarea rows="2" cols="25"
name="keterangan"> </textarea> </td>
</tr>
Blok
statement ini digunakan untuk membuat satu baris dan stu kolom baru lagi pada
tabel. Baris dan kolom ini adalah baris dan kolom kedua pada tabel. Dimana
pengaturan dari kolom adalah dengan lebar kolom adalah 15 persen, tinggi kolom
adalah 22 dan nama kolom tersebut adalah Keterangan. Kemudian buat satu kolom
lagi pada baris yang sama dimana pengaturan dari lebar dan tinggi kolom
masing-masing adalah 40 persen dan 36 pixel. Kemudian terdapat suatu textarea,
kegunaan dari textarea adalah pengguana dapat mengetikkan keterangan/informasi
pada text area tersebut. Text area disini etlah diberi pengaturan untuk ukuran
kolom dan barisnya dan nama dari textarea ini adalah keterangan.
<tr>
<td width="15%"
height="21"> Jenis Kelamin </td>
<td width="40%"
height="21">
<input type="radio"
value="laki-laki" checked name="kelamin"> Laki-Laki
<input type="radio"
value="perempuan" checked name="kelamin"> Perempuan
</td>
Sama
seperti blok program sebelumnya, blok program ini digunakan untuk membuat satu
baris dan kolom baru. Pengaturan untuk kolom pertama lebar dan tinggi
masing-masing adalah 15 persen dan 21 pixel, sedangkan untuk kolom kedua lebar
dan tinggi masing-masing adalah 40 persen dan 21 pixel. Nama dari kolom pertama
adalah Jenis Kelamin. Di tabel ini terdapat suatu menu pilihan dimana pengguna
hanya dapat meilih satu pilihan yaitu Laki-laki atau perempuan komponen yang
digunakan adalah radio button.
<tr>
<td width="15%"
height="22"> Agama </td>
<td width="40%"
height="22">
<select size="1"
name="agama">
<option>Islam</option>
<option>Kristen
Katolik</option>
<option>Kristen
Protestan</option>
<option>Hindu</option>
<option>Budha</option>
</select>
</td>
</tr>
Blog
statement ini juga digunakan untuk membuat suatu baris dan kolom baru. Disini
juga telah diatur tinggi dari kolom pertama dan kolom kedua, kolom pertama
dengan lebar dan tinggi masing-masing adalah 15 persen dan 22 pixel, sedangkan
kolom kedua 40 persen dan tinggi 22 pixel, kolom pertama diberi nama Agama.
Disini terdapat beberapa pilihan, dimana user diminta untuk memilih salah satu
dari agama yang terdapat pada pilihan. User hanya dapat meilih satu dari
pilihan yang ada. Menu pilihan seperti ini menggunakan komponen jump menu.
<tr>
<td width="15%"
height="49"> </td>
<td width="40%"
height="49">
<input type=submit name=submit
value=Submit>
<input type=reset name=reset
value=Reset>
</td>
</tr>
Pembuatan
kolom dan baris ini digunakan untuk membuat suatu tampilan command button
submit dan reset. Dimana jika tombol submit ditekan maka akan menuju ke
tes2.html dan jika menekan tombol reset maka semua informasi yang telah
diketikka akan dihapus.
</table>
</form>
</body>
</html>
Tag-tag diatas ini digunakan untuk mengakhiri pembuatan
tabel, form, bagan isi dari web dan mengakhiri pembuatan halaman web.
LOGIKA PROGRAM 2 :
Jika
pada tampilan halaman web pertama ditekan tombol submit maka akan ditampilkan
halaman web pada listing program kedua ini. Berikut ini penjelasan mengenai
statement-statement yang digunaka dalam web page kedua ini :
<html>
Tag ini merupakan tanda awal
dari dokumen HTML dan di akhiri dengan tag </HTML> yang merupakan tanda
akhir dari dokumen HTML.
<head>
Tag ini berfungsi
sebagai informasi page header. Dimana pada tag ini kita dapat meletakkan
tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE dan META.
<title> Hasil
</title>
Tag ini digunakan untuk
menampilkan judul halaman di bagian title bar pada browser untuk mengakhiri
gunakan tag </title>.
</head>
Tag ini merupakan tag penutup dari tag <head>.
<body>
<h1 align="center">
Berhasil Input Data </h1>
</body>
Blok
program ini digunakan untuk membuat isi dari halaman web. Dimana pada tampilan
halaman web ini hanya terdapat satu baris yaitu sebuah informasi jika data
berhasil diinput, pengaturan tulisannya adalah h1 dan terletak di tengah-tengah layar. Kemudian
untuk mengakhiri pembuatan bagan isi dari web gunakan statement </body>.
</html>
Tag diatas ini digunakan untuk mengakhiri pembuatan halaman
web.
OUTPUT
PROGRAM :
Tampilan
Form pertama user diminta untuk menginput data. Jika sudah menginput data tekan
tombol submit.
Tampilan
hasil ketika data berhasil diinput.
No comments:
Post a Comment