› › ›

Cara Membuat Form Input Biodata dan Menampilkannya dengan HTML dan PHP

Wednesday, February 20, 2019 Add Comment Edit

Tutorial Membuat Form Input Biodata Sederhana dan Menampilkannya Menggunakan Bahasa HTML dan PHP

Assalamualaikum wr wb.. Pada artikel sebelumnya admin sudah membuat form Biodata siswa/ mahasiswa sederhana menggunakan bahasa pemrograman HTML. Namun belum ada opsi untuk menampilkan data yang diinputkan tersebut.

Nah kali ini akan memeberikan tutorial cara menampilkan data yang diinputkan kehalaman baru dan dibungkus dalam sebuah tabel. mau tau caranya baca artikel ini sampai habis.

Untuk menampilkan data yang sudah diinputkan pada sebuah form, kita membutuhkan bahasa pemrograman PHP. Bagi teman-teman belum tau apa itu pemrograman PHP, teman bisa kunjungi Tutorial dasar bahasa pemrograman PHP terlebih dahulu. Biar teman tidak bingung nantinya.

Pertama buka terlebih dahulu text editor pada laptop/komputer teman-teman. buat folder baru simpan dengan format Biodata.html. dan ketikkan kode berikut :


File Biodata.html
<!DOCTYPE html>
<html>
 <head>
  <title>Biodata</title>
 </head>
 <body>
  <table border=0>
  <form action="Hasil.php" method="POST">
  <tr>
   <td>NPM</td>
   <td>:</td>
   <td><input type=text name=NPM></td>
  </tr>
  
  <tr>
   <td>Nama Lengkap</td>
   <td>:</td>
   <td><input type=text name=Nama></td>
  </tr>
 
  <tr>
   <td>Lama Study</td>
   <td>:</td>
   <td><input type=text name=Tahun size=5>Tahun<input type=text name=Bulan size=5>Bulan</td>
  </tr>
   
  <tr>
   <td>IPK Terakhir</td>
   <td>:</td>
   <td><input type=text name=IPK size=5></td>
  </tr>
  
  <tr>
  <td>Jurusan</td>
  <td>:</td>
   <td>
<input type=radio name="jurusan" value="TI">Teknik Informatika
<input type=radio name="jurusan" value="Elektro">Teknik Elektro
<input type=radio name="jurusan" value="Sipil">Teknik Sipil
   </td>
  </tr>
  
  <tr>
   <td>Tempat dan Tanggal Lahir</td>
   <td>:</td>
   <td><input type=text name=Tempat size=15>
   <select name=Tgl>
   <option name=Tgl>Tanggal
   <option name=Tgl>1
   <option name=Tgl>2
   <option name=Tgl>3
   <option name=Tgl>4
   <option name=Tgl>5
   <option name=Tgl>6
   <option name=Tgl>7
   <option name=Tgl>8
   <option name=Tgl>9
   <option name=Tgl>10
   <option name=Tgl>11
   <option name=Tgl>12
   <option name=Tgl>13
   <option name=Tgl>14
   <option name=Tgl>15
   <option name=Tgl>16
   <option name=Tgl>17
   <option name=Tgl>18
   <option name=Tgl>19
   <option name=Tgl>20
   <option name=Tgl>21
   <option name=Tgl>22
   <option name=Tgl>23
   <option name=Tgl>24
   <option name=Tgl>26
   <option name=Tgl>27
   <option name=Tgl>28
   <option name=Tgl>29
   <option name=Tgl>30
   <option name=Tgl>31
   </select>
   <select name=Bln>
   <option name=Bln>Bulan
   <option name=Bln>Januari
   <option name=Bln>Februari
   <option name=Bln>Maret
   <option name=Bln>April
   <option name=Bln>Mei
   <option name=Bln>Juni
   <option name=Bln>Juli
   <option name=Bln>Agustus
   <option name=Bln>September
   <option name=Bln>Oktober
   <option name=Bln>November
   <option name=Bln>Desember
   </select>
   <select name=Thn>
   <option name=Thn>Tahun
   <option name=Thn>2020
   <option name=Thn>2019
   <option name=Thn>2018
   <option name=Thn>2017
   <option name=Thn>2016
   <option name=Thn>2015
   <option name=Thn>2014
   </select>
   </td>
  </tr>
  
  <tr>
   <td>Jenis Kelamin</td>
   <td>:</td>
   <td><input type=radio name=JK value=Laki-laki>Laki-laki<input type=radio name=JK value=Perempuan>Perempuan</td>
  </tr>
  
  <tr>
   <td>Alamat</td>
   <td>:</td>
   <td><input type=textfield name=alamat></td>
  </tr>
  
  <tr>
   <td>Tentang Anda</td>
   <td>:</td>
   <td><textarea rows="5" cols="22" name="tentang"></textarea></td>
  </tr>
  
  <tr>
   <td> </td>
   <td> </td>
   <td><input type="submit" name="submit" value="INPUT DATA">
   <input type="reset" name="reset" value="BERSIH"></td>
  </tr>
  </form>
  </table>
 </body>
</html>

Copykan kode program diatas ke dalam text editor teman atau notepad. simpan didalam folder Xampp/Htdocs/Newfolder/Biodata.html, kalau teman tidak menginstal Xampp simpan saja ditempat yang teman sukai. kemudian baut projek baru/ kosong lagi dan ketikkan kode berikut :

File Hasil.php
<!DOCTYPE html>
<html>
 <head>
  <title>Biodata</title>
 </head>

 <body>
<?php
$npm=$_POST['NPM'];
$Nama=$_POST['Nama'];
$IPK=$_POST['IPK'];
$Tahun=$_POST['Tahun'];
$Bulan=$_POST['Bulan'];
$jurusan=$_POST['jurusan'];
$Tempat=$_POST['Tempat'];
$Tgl=$_POST['Tgl'];
$Bln=$_POST['Bln'];
$Thn=$_POST['Thn'];
$JK=$_POST['JK'];
$alamat=$_POST['alamat'];
$tentang=$_POST['tentang'];
?>
<table border="1" cellpadding="5" cellspacing="0">
<tr>
   <td>NPM</td>
   <td> <?php echo $npm ?> </td>
</tr>
<tr>
   <td>Nama Lengkap</td>
   <td> <?php echo $Nama ?> </td>
</tr>
<tr>
   <td>Lama Study</td>
   <td> <?php echo $Tahun ?>Th,<?php echo $Bulan ?>Bl </td>
</tr>
<tr>
   <td>IPK Terakhir</td>
   <td> <?php echo $IPK ?> </td>
</tr>
<tr>
   <td>Jurusan</td>
   <td> <?php echo $jurusan ?> </td>
</tr>
<tr>
   <td>TTL</td>
   <td> <?php echo $Tempat ?>,<?php echo $Tgl ?>/<?php echo $Bln ?>/<?php echo $Thn ?> </td>
</tr>
<tr>
   <td>Jenis Kelamin</td>
   <td> <?php echo $JK ?> </td>
</tr>
<tr>
   <td>Alamat</td>
   <td> <?php echo $alamat ?> </td>
</tr>
<tr>
   <td>Tentang Anda</td>
   <td> <?php echo $tentang ?> </td>
</tr>
</table>
 </body>
</html>

Jika kode program diatas sudah dicopykan ke projek baru pada notepad, kemudian simpan dengan format Hasil.php. Letakkan keuda file diatas ditempat yang sama.

setelah semua kode program diatas dibuat dan file disimpan ditempat yang sama. selanjutnya kita akan mencoba menjalankan program tersebut di browser, bisa mozilla atau chrome.

Caranya ketikkan Localhost/Newfolder/Biodata.html jika file disimpan di dalam folder Xampp. atau bisa dengan cara klik kanan >Open with google chrome. Maka tampilannya seperti gambar berikut :
Cara Membuat Form Input Biodata dan Menampilkannya dengan HTML dan PHP
Tampilan form Biodata
Kemudian Jika data diinputkan maka akan menampilkan seperti gambar berikut :
Cara Membuat Form Input Biodata dan Menampilkannya dengan HTML dan PHP
Tampilan Hasil Biodata
Ok teman-teman mudah bukan,, sebagai catatan pada tutorial kali ini admin tidak akan menjelaskan maksud kode-kode diatas. karena admin sudah menyediakan tutorial khusus untuk belajar bahasa pemrograman. teman bisa cek di menu navigasi Zikritekno ini.

Terima kasih sudah membaca artikel ini sampai habis, semoga apa yang admin berikan bermanfaat dan mudah dimengerti. jangan lupa share ke teman lain yang membutuhkan.



0 Response to "Cara Membuat Form Input Biodata dan Menampilkannya dengan HTML dan PHP"

Post a Comment

Subscribe to: Post Comments (Atom)

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel