Cara Menginput Umur Otomatis Berdasarkan Tanggal Lahir Pada Php Dan Mysql

Penginputan Umur secara otomatis merupakan hal penting saat melakukan suatu pengolahan data. Hal ini perlu dilakukan agar user tidak perlu repot-repot untuk menghitung usia orang yang akan di inputkan datanya sehingga efektifitas pekerjaan dapat lebih mudah dilakukan. Ada banyak contoh penginputan yang berkaitan dengan umur atau usia seseorang, contoh yaitu: Penginputan data siswa pada sekolah, penginputan data penduduk pada desa atau kelurahan, penginputan biodata, dan masih banyak lagi penginputan yang berhubungan dengan umur. Pada tutorial kali ini saya akan memberikan  Inspirasi Source Code tentang Cara Menginput Umur Otomatis Berdasarkan Tanggal Lahir Pada Php Dan Mysql. 

 

Lihat juga: Cara Insert Tanggal Otomatis Tanpa Coding Pada phpMyAdmin

 

Ok… langsung saja saya berikan langkah-langkahnya yaitu sebagai berikut:

• Siapkan terlebih dahulu database untuk penyimpanan data yang akan di inputkan
• Download file  jquery-ui.css dan jquery-ui.js
• Kemudian masukan ke-2 file tersebut kedalam file index.php yang kalian punya, contoh seperti berikut:

<link href="css/jquery-ui.css" rel="stylesheet">

<script src="js/jquery-ui.js"></script>

<script type="text/javascript">

     $(function() {

       $( "#tgl_lahir" ).datepicker({

              changeMonth: true,

              changeYear: true

          });

     });

        window.onload=function(){

            $('#tgl_lahir').on('change', function() {

                var dob = new Date(this.value);

                var today = new Date();

var age = Math.floor((today-dob) / (365.25 * 24 * 60 * 60 * 1000));

                $('#umur').val(age);

            });

        }

          </script>

• Ketikan source code file penginputan data pada form seperti berikut:

 

<div class="row">

<div class="col-lg-2 form-control ">

<label class="control-label">Tanggal Lahir</label>

</div>

<div class="col-sm-3">

<input id="tgl_lahir" name="tgl_lahir" type="text" class="form-control" />

</div>

           

<div class="col-lg-2 form-control-label">

<label class="control-label">Usia</label>

</div>

<div class="col-sm-3">

<input id="umur" name="umur" type="text" class="form-control" />

</div></div>

 

**)Keterangan:

** Tulisan yang berwarna merah merupakan item untuk proses penginputan.

• Proses penginputan tampak seperti gambar berikut:

• Apabila berhasil maka hasil dari proses penginputan data akan tampak seperti gambar berikut:

Demikian tutorial singkat yang dapat saya bagikan dan semoga bermanfaat dan terinspirasi dengan source code yang saya persembahkan. Apabila ada source code yang tidak berjalan, error atau  tidak sesuai,, silahkan isi kolom komentar pada bagian bawah tutorial ini...!.