Membuat Drop Down Tanggal & Bulan dengan PHP

Pada tutorial kali ini saya akan berbagi sedikit tips tentang pembuatan dropdown tanggal dan bulan yang terdapat pada form pendaftaran dengan memanfaatkan kosntruksi perulangan (looping) dan array pada skrip php.

Pada contoh tampilan diatas, sekilas kita dapat membuatnya dengan menggunakan skrip html biasa dengan menambahkan value pada setiap option pada komponen dropdown.


<html>

<head>

<title>Title here!</title>

</head>

<body>

<select name="tgl">

 <option selected="selected">Tanggal</option>

 <option value="1">1</option>

 <option value="2">2</option>

 <option value="3">3</option>

 <option value="4">4</option>

 <option value="5">5</option>

 <option value="6">6</option>

 <option value="7">7</option>

 <option value="8">8</option>

</select>

</body>

</html>

Namun hal tersebut terkadang kurang efektif apabila kita harus membuat option value satu persatu, misalnya pada kasus dropdown tanggal dari 1 sampai 31 atau dropdown tahun dari batas 1905 sampai 2011.

Apabila kita menggunakan skrip html sangat tidak efektif karena faktor waktu yang terlalu lama hanya untuk menambahkan option value yang di inginkan.

Nah, kasus seperti ini dapat diatasi dengan memanfaatkan skrip perulangan yang dapat menangani perulangan kondisi increment (kelipatan nilai dari kecil ke besar) dan decrement (kelipatan dari besar ke kecil) seperti yang terdapat pada kasus dropdown tanggal dan tahun yaitu terdapat kondisi peningkatan kelipatan satu point increment atau decrement, sedangkan untuk dropdown bulan masing-masing option atau pemilihan nya adalah berupa karakter string yaitu berurutan dari Januari sampai Desember. Pada kasus seperti ini tidak dapat hanya ditangani dengan penggunaan looping, pada kasus ini kita dapat memanfaatkan array yang dapat menampung data lebih dari satu dalam satu variable.

Baiklah untuk lebih jelasnya langsung saja kita bahas.

Langkah 1

Buatlah skrip html seperti berikut dan simpan dengan nama file tanggal.php


<html>
<head>
<title>Membuat Dropdown Tanggal</title>
</head>
<body>
<form action="" method="post">
Tanggal Lahir
<select name="tgl">
<option selected="selected">Tanggal</option>
</select>
-
<select name="bln">
<option selected="selected">Bulan</option>
</select>
-
<select name="thn">
<option selected="selected">Tahun</option>
</select>
</form>
</body>
</html>

Langkah 2

Selanjutnya sisipkan skrip berikut sebelum tag </select> pada dropdown tanggal.


<select name="tgl">
<option selected="selected">Tanggal</option>
<?php
for($a=1; $a<=31; $a+=1){
	echo"<option value=$a> $a </option>";
}
?>
</select>

Langkah 3

Pada dropdown sisipkan skrip berikut sebelum tag </select>


<select name="bln">
<option selected="selected">Bulan</option>
<?php
$bulan=array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember");
$jlh_bln=count($bulan);
for($c=0; $c<$jlh_bln; $c+=1){
	echo"<option value=$bulan[$c]> $bulan[$c] </option>";
}
?>
</select>

Dengan cara yang sama tambahkan skrip berikut pada dropdown tahun

<select name="thn">
<option selected="selected">Tahun</option>
<?php
for($i=2011; $i>=1905; $i-=1){
echo"<option value=$bulan[$c]> $i </option>";
}
?>
</select>

Berikut susunan skrip lengkapnya.

<html>
<head>
<title>Membuat Dropdown Tanggal</title>
</head>

<body>
<form action="" method="post">
Tanggal Lahir
<select name="tgl">
<option selected="selected">Tanggal</option>
<?php
for($a=1; $a<=31; $a+=1){
echo"<option value=$a> $a </option>";
}
?>
</select>
-
<select name="bln">
<option selected="selected">Bulan</option>
<?php
$bulan=array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember");
$jlh_bln=count($bulan);
for($c=0; $c<$jlh_bln; $c+=1){
echo"<option value=$bulan[$c]> $bulan[$c] </option>";
}
?>
</select>
-
<select name="thn">
<option selected="selected">Tahun</option>
<?php
for($i=2011; $i>=1905; $i-=1){
echo"<option value=$bulan[$c]> $i </option>";
}
?>
</select>
</form>
</body>
</html>

Selanjutnya jalankan skrip diatas di browser hingga tampil seperti gambar berikut.

Keterangan Skrip :

Penggunaan Looping

<?php
for($a=1; $a<=31; $a+=1){
echo"<option value=$a> $a </option>";
}
?>

Skrip diatas adalah skrip perulangan atau looping dengan menentukan batas kelipatan dan kondisi penjumlahan 1 yang berurutan ditambahkan dari batas 1 sampai dengan 31. Kondisi ini ditentukan pada variable $a+=1 artinya $a yang nilai nya 1 akan terus ditambahkan sampai nilai nya sama dengan 31.

Sedangkan pada dropdown tahun digunakan cara yang sama dan hanya berbeda pada penentuan batas perulangan, operator yang digunakan ($i>=1905) serta konidisi increment atau pengurangan nilai dari 2011 sampai dengan 1905.

Penggunaan Array

<?php
$bulan=array("Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember");
$jlh_bln=count($bulan);
for($c=0; $c<$jlh_bln; $c+=1){
echo"<option value=$bulan[$c]> $bulan[$c] </option>";
}
?>

Pada skrip diatas terdapat array pada $bulan yang menampung nilai string Januari sampai Desember, dikarenakan pada prinsipnya dropdown akan menampilkan nilai yang berurutan, maka kita membutuhkan nilai maksimal index pada array dan dapat tentukan dengan menggunakan perintah count sehingga menjadi

$jlh_bln=count($bulan);

Hasil dari $jlh_bln adalah 11, didapat dari index array yang berurutan dari 0.

Selanjutnya untuk menampilkan masing-masing nilai pada array digunakan looping yang berfungsi untuk mendapatkan urutan nilai 0 sampai dengan 11 yang digunakan sebagai rujukan dalam menampilkan option value pada dropdown tahun.

A. Efryanto

Efry bekerja sebagai staff pengajar di LKP PalComTech Prabumulih. Bidang materi yang diajarkan adalah pemrograman seperti PHP.

12 comments

  1. om admin tolong perbaiki penulisan skrip pada langkah ketiga setelah kalimat “Dengan cara yang sama tambahkan skrip berikut pada dropdown tahun”
    coba cek lagi, oom salah ketik tuh…
    skrip yang benar

    Tahun
    =1905; $i-=1){
    echo” $i “;
    }
    ?>

    • :think: :think: ada script lain yang langsung nyatu gag om, mulai dari tanggal, bulan, sampai tahunnya?
      jadi ga ngebuat 3 tabel drop down.
      :think:

  2. bagus,,,
    tp ada cara lain ga’,,,cz cara ini udah dapat di materi kuliah,,
    makasih,,,,
    :)

  3. om numpang tanya, kalo mau dimasukin ke database tanggalnya gimana ya?dan cara untuk preview tanggalnya.trimakasih atas bantuannya…

  4. nice inpo…
    tengkyuuu berat..

  5. maaf.. kalao cara agar tanggal tsb, masuk kedalam database, gimana ya ? terimakasih sebelumnya

  6. mantap gan.. ane kls 1smk lg belajar ini

  7. makasih om.. ilmunya berguna banget

  8. ntk koneksi nya ke db mysql gmna ya bung??

  9. Agar bisa insert ke mysql gmn gan? Terutama nilai dari hasil perulangan (‘tahun’)?

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>