HTML Form Lanjut
Dalam Kesempatan kali ini kita akan
membahas tentang pengaplikasian form dalam web yang sering kita jumpai.
Sudah kita ketahui pada pembahasan
sebelumnya Form biasanya digunakan untuk halaman web yang bersifat
dinamis yang memungkinkan terjadinya
komunikasi antara user dengan web server. Kili ini kita akan mencoba membuat
form input data dan menampilkannya atau output. Memang teknik ini belum
dikatakan sebagai web dinamis, karena selain belum bias merubah isi konten
tanpa melakukan perubahan pada code-nya, tehnik ini juga belum menggunakan
database seperti web dinamis lain.
Kita akan menggunakan file .php
untuk menampilkan hasil data yang kita input-kan,sehingga kita merlukan Web server untuk menjalankan php
tersebut, untuk itu kita perlu menyaikan apache,
atau bisa aplikasi xampp.
Untuk contoh saya akan membuat CV. Pertama kita buat halaman
input. Buat file html dan isi seperti form untuk memasukan CV serperti pada
contoh :
<html>
<head>
<title>Form CV</title>
</head>
<body
background="gambar/v.jpg" bgcolor="#7A5454">
<h1 align="center">Curriculum Vitaes</h1>
<table align="center" bgcolor="#CCFF33">
<form method="post" action="output.php"
name="form1">
<hr>
<tr><td width="119">Nama</td><td> :
<input name="nama"
type="text"></td></tr>
<tr><td>Jenis Kelamin</td><td> : <input
name="kelamin" type="radio" value="Pria"
checked>Pria
<input type="radio" value="Wanita"
name="kelamin">Wanita</td></tr>
<tr><td>Kota</td><td> : <input
name="kota" type="text"></td></tr>
<tr><td>Tanggal Lahir</td><td> : <select
name="tgl">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
<option>13</option>
<option>14</option>
<option>15</option>
<option>16</option>
<option>17</option>
<option>18</option>
<option>19</option>
<option>20</option>
<option>21</option>
<option>22</option>
<option>23</option>
<option>24</option>
<option>25</option>
<option>26</option>
<option>27</option>
<option>28</option>
<option>29</option>
<option>30</option>
<option>31</option></select>
<select name="bln">
<option>Januari</option>
<option>Februari</option>
<option>Maret</option>
<option>April</option>
<option>Mei</option>
<option>Juni</option>
<option>Juli</option>
<option>Agustus</option>
<option>September</option>
<option>Oktober</option>
<option>November</option>
<option>Desember</option>
</select>
<select name="thn">
<option>1991</option>
<option>1992</option>
<option>1993</option>
<option>1994</option>
<option>1995</option>
<option>1996</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
<option>2001</option>
<option>2002</option>
<option>2003</option></select>
</td>
</tr>
<tr><td>Agama<td> : <select size="1"
name="agama">
<option>Islam</option>
<option>Kristen</option>
<option>Katolik</option>
<option>Hindu</option>
<option>Budha</option></select>
<tr><td valign="top">Alamat</td>
<td valign="top"> :
<textarea name="alamat" width=100
></textarea></td>
</tr>
<tr>
<td>Email</td>
<td> : <input name="email"
type="text"></td>
</tr>
<tr><td>Telepon</td><td> : <input
name="tlp" type="text"></td></tr>
<tr><td>Hoby</td>
<td> :
<input name="hoby1" type="checkbox"
value="Olah Raga">Olah Raga
<input name="hoby2" type="checkbox"
value="Musik">Musik
<input name="hoby3" type="checkbox" value="Jalan">Jalan
<input name="hoby4" type="checkbox"
value="Lain-lain">Lain-lain</td></tr>
<tr><td valign="top">Pesan</td>
<td valign="top"> : <textarea
name="pesan" width=200 ></textarea></td>
</tr>
<tr>
<td>Riwaya Pendidikan
<td> : <textarea name="rp" width=200
></textarea>
<tr>
<td>Riwayat Organisasi
<td> : <textarea name="ro" width=200
></textarea>
<tr>
<td>Kemampuan
<td> : <textarea name="kmp" width=200
></textarea>
<tr><td><td><input type="submit"
value="Simpan" name="form1"
onClick="sublogin()"> <input type="reset"
value="Batal" >
</form>
</table>
<hr>
</body>
</html>
|
Save pada foder xampp/htdoc beri nama input.html
kemudian jalnkan aplikasi xampp dan pangil file tersebut pada web browser : localhost/input.html maka akan tampil
seperti gambar.
Kemudian kita buat file untuk menampilkan data yang akan
kita masukan. Kunci dari trik ini adalah perintah echo pada php. Dalam bahasa php perintah echo berfungsi untuk
menampilkan suatu hasil dari variable. Sehingga data yang kita masukan dalam
file html melalui form akan disambungkn pada file php. Kemudian php kan
menampilkan data tersebut.
Untuk lebih jelasnya lihat file php dibawah ini. Simpan file
ini pada xampp/htdocx sebagai output.php
<html>
<head> <title> data
CV</title>
</head>>
<body
background="gambar/v.jpg" bgcolor="#7A5454">
<?php
$nama=$_POST['nama'];
$kelamin=$_POST['kelamin'];
$kota=$_POST['kota'];
$tgl=$_POST['tgl'];
$bln=$_POST['bln'];
$thn=$_POST['thn'];
$agama=$_POST['agama'];
$alamat=$_POST['alamat'];
$email=$_POST['email'];
$tlp=$_POST['tlp'];
$hoby1=$_POST['hoby1'];
$hoby2=$_POST['hoby2'];
$hoby3=$_POST['hoby3'];
$hoby4=$_POST['hoby4'];
$rp=$_POST['rp'];
$ro=$_POST['ro'];
$kmp=$_POST['kmp'];
echo "<h1 align=’center’>Data Diri
Anda</h1></br></br>";
echo "<table align=center bgcolor=#CCFF33>
<hr>
<tr><td>Nama</td><td> : $nama</td></tr>
<tr><td>Jenis Kelamin</td><td> :
$kelamin</td></tr>
<tr><td>Kota</td><td> :
$kota</td></tr>
<tr><td>Tanggal Lahir</td><td> :
$tgl-$bln-$thn</td></tr>
<tr><td>Agama</td><td> :
$agama</td></tr>
<tr><td>Alamat</td><td> : $alamat</td></tr>
<tr><td>Email</td><td>
: $email</td></tr>
<tr><td>Telepon</td><td> :
$tlp</td></tr>
<tr><td>Hoby</td><td> : $hoby1, $hoby2,
$hoby3, $hoby4</td></tr>
<tr><td>Riwayat Pendidikan</td><td> :
$rp</td></tr>;
<tr><td>Riwayat
Organisasi</td><td> : $ro</td></tr>;
<tr><td>Kemampuan</td><td>
: $kmp</td></tr>";
?>
</body>
</html>
|
Setelah selesai kemudian cek apakah sudah berhasil:
bagus Gan... nice,,
BalasHapustambah ilmu.