Jumat, 03 Oktober 2014

Membuat Aplikasi KTP Menggunakan PHP dan HTML

di
Pada artikel ini saya akan berbagi ilmu tentang pembuatan aplikasi Kartu Tanda Penduduk (KTP) berbasis web. aplikasi ini hanya ada dua halaman: halaman pertama untuk menginputkan data warga negara dan hasilnya akan ditampilan pada halaman kedua.

Dibawah ini adalah tampilan input data warga negara.

KTP
KTP

ya pada halaman ini user diminta untuk menginputkan datanya dan mengupload fotonya. setelah selesai.
klik button CETAK. kemudian data user tersebut akan tercetak seperti gambar berikut ini:
ektp

Gimana sih coding nya supaya bisa jadi program seperti itu??
codingnya lumayan panjang tapi mudah dipahami kok :)
untuk tampilan input data warga negara, saya menggunakan html.

<html>
<head>
<title>Data Warga Negara RI</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"></head>
<body bgcolor="#333333">
<form action="KTP.php" enctype="multipart/form-data" method="post">
<table width="638" height="960" border="1" align="center">
  <tr>
    <td height="94" valign="top" bgcolor="#CC6633"><font color="#FFFFFF"><br>
      </font>
      <blockquote>
        <p>
          <center>
            <font color="#FFFFFF" size="+2">DATA WARGA NEGARA REPUBLIK INDONESIA</font>
          </center>
      </blockquote></td>
  </tr>
  <tr>
    <td width="669" valign="top" bgcolor="#FFFFFF"><blockquote><p>
  <p><font color="red">* Menginputkan data menggunakan huruf capital</Font></p>
  <br>
  <p> Nik  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;: <input type="text" name="nik"></p>
  <p> Nama Lengkap &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:  <input type="text" name="nama" size=40></p>
 
  <p> Tempat/Tanggal Lahir :  <input type="text" name="tl" placeholder= Tempat>
              <select name="tgl" placeholder= Tl>
                   <option value="01">01</option>
                      <option value="02">02</option>
                      <option value="03">03</option>
                      <option value="04">04</option>
                      <option value="05">05</option>
              <option value="06">06</option>
                      <option value="07">07</option>
                      <option value="08">08</option>
                      <option value="09">09</option>
                      <option value="10">10</option>
              <option value="11">11</option>
                      <option value="12">12</option>
                      <option value="13">13</option>
                      <option value="14">14</option>
                      <option value="15">15</option>
              <option value="16">16</option>
                      <option value="17">17</option>
                      <option value="18">18</option>
                      <option value="19">19</option>
                      <option value="20">20</option>
              <option value="21">21</option>
                      <option value="22">22</option>
                      <option value="23">23</option>
                      <option value="24">24</option>
                      <option value="25">25</option>
              <option value="26">26</option>
              <option value="27">27</option>
                      <option value="28">28</option>
                      <option value="29">29</option>
                      <option value="30">30</option>
                      <option value="31">31</option>
            </select>
       
        <select name="bln">
                   <option value="01">01</option>
                      <option value="02">02</option>
                      <option value="03">03</option>
                      <option value="04">04</option>
                      <option value="05">05</option>
              <option value="06">06</option>
                      <option value="07">07</option>
                      <option value="08">08</option>
                      <option value="09">09</option>
                      <option value="10">10</option>
              <option value="11">11</option>
                      <option value="12">12</option>
            </select>

        <input type="text" name="thn" placeholder=Tahun></p>
  
  <p>Jenis Kelamin  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:
    <input type="radio" name="sex" value="LAKI-LAKI">LAKI-LAKI
    <input type="radio" name="sex" value="PEREMPUAN">PEREMPUAN</p>
  <p>Golongan Darah  &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:
    <select name="darah">
      <option value="A">A</option>
      <option value="B">B</option>
      <option value="AB">AB</option>
      <option value="O">O</option>
    </select>
  </p>
  <p> Alamat &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:
    <input type="text" name="alamat" size=60>
  </p>
  <p>RT     &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:
    <select name="rt">
                   <option value="01">01</option>
                      <option value="02">02</option>
                      <option value="03">03</option>
                      <option value="04">04</option>
                      <option value="05">05</option>
              <option value="06">06</option>
                      <option value="07">07</option>
                      <option value="08">08</option>
                      <option value="09">09</option>
                      <option value="10">10</option>
            </select></p>
    <p>RW &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :
    <select name="rw">
                  <option value="01">01</option>
                      <option value="02">02</option>
                      <option value="03">03</option>
                      <option value="04">04</option>
                      <option value="05">05</option>
              <option value="06">06</option>
                      <option value="07">07</option>
                      <option value="08">08</option>
                      <option value="09">09</option>
                      <option value="10">10</option>
            </select></p>
  <p> Kel/Desa    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:
    <input type="text" name="desa">
  </p>
  <p> Kecamatan    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :
    <input type="text" name="kecamatan">
  </p>
  <p> Agama    &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;:
    <select name="agama">
      <option value="ISLAM">ISLAM</option>
      <option value="KRISTEN">KRISTEN</option>
      <option value="KATOLIK">KATOLIK</option>
      <option value="BUDHA">BUDHA</option>
      <option value="HINDU">HINDU</option>
    </select>
  </p>
  <p> Status &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :
    <input type="checkbox" name="status" value="BELUM KAWIN">
    BELUM KAWIN
    <input type="checkbox" name="status" value="MENIKAH">
    MENIKAH</p>
  <p> Pekerjaan     &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; :
    <input type="text" name="pekerjaan">
  </p>
  <p> Kewarganegaraan &nbsp; &nbsp; &nbsp;: <select name="warganegara">
      <option value="WNI">WNI</option>
      <option value="WNA">WNA</option>
    </select>
  <p> <input name="MAX_FILE_SIZE" type="hidden" value="3000000" />
    File Name &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;  : <input name="userfile" type="file" />
    </p>
  </p>
</blockquote>
<br>
<p> <center><input type="submit" value="CETAK">
<input type="reset" value="BATAL"></center></p>
</td>
  </tr>
</table>
</form>
</body>
</html>

simpan file tersebut dengan nama DATA.html.  Selanjutnya buat file baru untuk menampilkan hasil cetak KTP tersebut. untuk menampilkan hasilnya disini saya menggunakan PHP. untuk lebih jelasnya silahkan lihat coding nya di bawah ini.

KTP dengan html




Simpan file diatas dengan nama KTP.php
maaf ya codingnya dalam bentuk image :)
supaya kalian tidak hanya copy paste hehehe....
semoga artikel ini bermanfaat buat kalian. amiin ^.^
Diposting oleh di Label: ,
Share this article :

19 komentar:

  1. Juragan Briket5 Oktober 2014 pukul 02.11

    bikin aplikasi video chat bisa gak ?

    BalasHapus
  2. Unknown14 Oktober 2014 pukul 07.12

    Terima kasih sudah berkunjung..
    maaf untuk bikin aplikasi video chat saya masi belum bisa karena saya juga masi tahap pemula :)

    BalasHapus
    Balasan
    1. Juragan Briket24 September 2018 pukul 03.14

      sekarang sudah 2018, sudah ahli apa saja mbak, haha..dishare dong ilmunya...

      Hapus
  3. Unknown10 Maret 2015 pukul 19.47

    kalau kk ada tidak?

    BalasHapus
  4. Unknown24 Mei 2015 pukul 22.50

    Kartu Keluarga tidak ada :)
    Terima kasih atas kunjungannya

    BalasHapus
  5. rona16 September 2015 pukul 07.48

    sangat membantu trimakasi gan . ..

    BalasHapus
  6. Unknown7 Januari 2016 pukul 20.31

    kenapa saya tidak bisa mencetaknya?

    BalasHapus
  7. Unknown17 Januari 2016 pukul 09.09

    Untuk form pengisian nya gimana agar bisa otomatis tersimpan di database

    BalasHapus
  8. Unknown25 Maret 2016 pukul 02.13

    nice, saya boleh kembangin kan
    :)

    BalasHapus
  9. Unknown21 Desember 2016 pukul 22.42

    min kok punyaku untuk form cetak hasil nggak muncul sesuai gambar ya, padahal code nya udah aku samain banget.. mohon pencerahannya min

    BalasHapus
  10. Unknown15 Maret 2017 pukul 00.25

    pelit lo bagi ilmu setengah setengah

    BalasHapus
  11. sucamzo22 Oktober 2017 pukul 17.21

    pembuatan databasenya bagaimana??

    BalasHapus
  12. Neles_Kogoya18 November 2017 pukul 02.39

    Makasih atas contohnya sangat
    Bermanfaat bagi pemula

    BalasHapus
  13. Huang20 April 2019 pukul 20.50

    kak kok saya ga bsa cetak gambar yah? padahal koddingnya udh sama smua

    BalasHapus
  14. Unknown24 Juni 2019 pukul 16.03

    terima kasih. Sangat bermanfaat mba. Baca juga cara melacak no hp

    BalasHapus
  15. Alexander aresta putra30 November 2019 pukul 19.11

    Hasil nya kalo dicetak pdf bisa gak mbak??

    BalasHapus
  16. Tempat Makan di bandung26 Desember 2020 pukul 22.50

    kak knpa yang saya gabisa padahal udah sesuai sama codingannya

    BalasHapus
  17. Tempat Makan di bandung26 Desember 2020 pukul 22.50

    minta bantuan nya kak

    BalasHapus

Langganan: Posting Komentar (Atom)