Home > HTML, Kuliah, Pemrograman, PHP > Menampilkan Hasil Input Form HTML dengan PHP

Menampilkan Hasil Input Form HTML dengan PHP


Jika pada artikel sebelumnya kita sudah membahas mengenai cara membuat formulir dalam bentuk HTML, sekarang kita akan mencoba menampilkannya. Pertama-tama kita buat sebuah form HTML untuk mengimput datanya, misal saya membuat sebuah form dengan nama Input.html. Berikut source kodenya:

Input.html

<html>

<head>

<title>Form Data Diri</title>

</head>
<body>
<h1 align=”center”>Masukkan Data Diri Anda</h1>
<table align=”center”>
<form method=”post” action=”output.php” name=”form1″>
<hr>
<tr><td>Nama</td><td colspan=”2″> : <input name=”nama” type=”text”></td></tr>
<tr><td>Jenis Kelamin</td><td colspan=”2″> : <input name=”kelamin” type=”radio” value=”Pria” checked>Pria
<input type=”radio” value=”Wanita” name=”kelamin”>Wanita</td></tr>
<tr><td>Kota</td><td colspan=”2″> : <input name=”kota” type=”text”></td></tr>
<tr><td>Tanggal Lahir</td><td colspan=”2″> : <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>1981</option>
<option>1982</option>
<option>1983</option>
<option>1984</option>
<option>1985</option>
<option>1986</option>
<option>1987</option>
<option>1988</option>
<option>1989</option>
<option>1990</option>
<option>1991</option>
<option>1992</option>
<option>1993</option></select>
</td>
</tr>

<tr><td>Agama<td colspan=”2″> : <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 width=”2″ valign=”top”> :

</td>
<td><textarea name=”alamat” width=100 ></textarea></td>
</tr>
<tr><td>Telepon</td><td colspan=”2″> : <input name=”tlp” type=”text”></td></tr>
<tr><td>Sekolah</td><td colspan=”2″> : <input name=”sekolah” type=”text”></td></tr>
<tr><td>Jurusan</td><td colspan=”2″> : <input name=”jurusan” type=”text”></td></tr>
<tr><td>Hoby</td>
<td colspan=”2″> :
<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 width=”2″ valign=”top”> : </td>
<td valign=”top”><textarea name=”pesan” width=200 ></textarea></td>
</tr>

<tr><td><td colspan=”2″><input type=”submit” value=”Simpan” name=”form1″ onClick=”sublogin()”> <input type=”reset” value=”Batal” >
</form>
</table>
<hr>
</body>
</html>

Selanjutnya kita buat sebuah file dalam format PHP. Seperti dibawah ini:

Output.php

<?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’];
$tlp=$_POST[‘tlp’];
$sekolah=$_POST[‘sekolah’];
$jurusan=$_POST[‘jurusan’];
$hoby1=$_POST[‘hoby1’];
$hoby2=$_POST[‘hoby2’];
$hoby3=$_POST[‘hoby3’];
$hoby4=$_POST[‘hoby4’];
$pesan=$_POST[‘pesan’];

echo “<h1 align=’center’>Data Diri Anda</h1></br></br>”;
echo “<table align=’center’>
<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>Telepon</td><td> : $tlp</td></tr>
<tr><td>Sekolah</td><td> : $sekolah</td></tr>
<tr><td>Jurusan</td><td> : $jurusan</td></tr>
<tr><td>Hoby</td><td> : $hoby1, $hoby2, $hoby3, $hoby4</td></tr>
<tr><td>Pesan</td><td> : $pesan</td></tr>”;

?>

Kemudian simpan kedua file tersebut pada folder htdocs (misal, C:\xampp\htdocs\biodata) tergantung anda menginstal XAMPPnya dimana. Kemudian buka browser dan masukkan url http://localhost/biodata dan pilih file Input.html.

Demikian sedikit informasi yang dapat saya sampaikan kurang dan lebihnnya mohon maaf karena saya juga masih dalam tahap belajar. Jika kurang jelas silahkan tinggalkan comment.

  1. 29 March 2011 at 11:17

    baru selesai nyobain scriptnya,
    tapi kok pas disimpan outputnya nama jenis kelamin kota sama pesan ga keluar ya???

    Like

  2. Bobby cooL
    29 March 2011 at 16:31

    sudah saya coba kembali bisa ko…
    coba cek lg scriptnya…
    kalo kopi paste langsung ganti semua tanda β€œ jadi “…
    cara mudahnya di notepad ++ atau dreamweaver tekan ctrl+f..

    Like

  3. 30 March 2011 at 06:16

    haha, iya udah bisa, gw nya yang salah ketik!
    haha, thx, sangat membantu !πŸ˜€

    Like

  4. iman muslihudin
    6 June 2012 at 07:17

    MAKASIH YA GAN, SY JADI TAMBAH ILMU

    Like

  5. 6 June 2012 at 10:36

    mantap . . .

    Like

  6. Bobby cooL
    9 June 2012 at 06:03

    terimakasih atas kunjungannya…πŸ™‚

    Like

  7. hidsan
    1 November 2012 at 09:24

    gan, gimana cari validasi kalo user input tanggal 28 keatas di bulan februari ? atau misal user input tanggal 31 di bulan oktober ? mohon pencerahannya. terima kasih

    Like

  8. kend
    11 October 2013 at 08:17

    wah ana baru nemu nih gan, itu pake database gan gan? mohon pencerahannya.. buat skipsi gan..😦

    Like

    • Bobby cooL
      11 October 2013 at 08:31

      gak pake database gan..itu cuma nampilin inputan aja pake method post…. πŸ™‚

      Like

  9. kend
    11 October 2013 at 09:08

    udah saya covba gan, terus sya taruh di forlder htdoc – biodata, terus sya jalanin lewat browser localhost/biodata gak muncul dia gan, terus tak jalanin yg output aja, di klik prosesnya enggak jalan juga gan….. help meee….😦

    Like

  10. kend
    11 October 2013 at 09:10

    oya gan kita buat site lokal dulu apa gimana nih gan? masih newbie nih… help me gan….😦

    Like

  11. erna
    6 November 2013 at 15:28

    mas ini database’nya mana???

    Like

    • Bobby cooL
      7 November 2013 at 06:54

      gak pake database, cuma menampilkan hasil inputan pake method post…. πŸ™‚

      Like

  12. Rini
    28 March 2014 at 05:15

    ini yg textbox hobby, klo dicentang semua ga ada notice tp klo yg dicentang cuma 1, 2, atau 3 muncul notice kayak gini
    Notice: Undefined index: hoby2 in C:\xampp\htdocs\studi_kasus\Output.php on line 14
    caranya biar gk keluar notice diapakan???

    Like

    • Bobby cooL
      28 March 2014 at 10:35

      bisa ditambah script:

      error_reporting(E_ALL ^ (E_NOTICE | E_WARNING));

      di awal baris file output.php πŸ™‚

      Like

  13. Rini
    28 March 2014 at 13:28

    terimakasih ^_^
    sangat membantu

    Like

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: