Belum lama ini saya kebagian tugas untuk membuat CRUD beserta report per transaksi. Gambaran sederhananya, setiap transaksi menghasilkan empat report yang berbeda, dan salah satu report harus diberi tanggal sesuai dengan tanggal hari kerja berikutnya. Opsinya ada dua, kita tambahkan field untuk input tanggal secara manual, atau otomatis by system.

Untuk minimalisasi kesalahan input akhirnya saya putuskan menggunakan opsi kedua, yang tentu saja nambah kerjaan lagi, yaitu membuat tabel hari libur sesuai kalender. Sehingga tanggal report akan menjadi tanggal hari ini ditambah 1 hari. Jika tanggal report tersebut jatuh pada hari libur, maka tambah 1 hari lagi, kemudian cek lagi apakah tanggal tersebut termasuk hari libur atau tidak. Begitu seterusnya sampai diperoleh tanggal yang bukan hari libur.

Ok logikanya sudah dapet, sekarang beralih ke database. Struktur tabel hari libur hanya berisi tiga field yaitu :

  • id (int, peimary)
  • tahun (int)
  • tgl_libur (text)

Field tgl_libur berupa text karena saya ingin menyimpan tanggal hari libur ini dalam satu field sekaligus, dengan separator berupa tanda koma (,). Sehingga end-user nantinya cukup melakukan satu kali entry data tanggal hari libur dalam setahun.

Tabel Liburan

Nah sekarang kita akan membahas frontend form input tanggal hari libur untuk satu tahun. Di sini saya menggunakan jQuery DatPicker. Untuk penerapan kodenya, saya akan melanjutkan demo dari postingan notifikasi kenaikan pangkat yang menggunakan template SB Admin. Berikut langkah-langkahnya :

1. Download dan Insert jQuery Datepicker

Download jQuery DatPicker, letakkan di bawah folder js, dan insert file pada template.

Struktur Folder DatePicker

 

2. Buat Halaman Form Data Libur Kalender

Halaman libur_kalender.php diletakkan di bawah folder “view”.

 

Legenda :

  1. Halaman ini saya bagi menjadi dua kolom, col-sm-6 yang pertama untuk form input data, dan sisanya untuk menampilkan tabel data hari libur yang sudah direkam.
  2. Pada baris ke 29, terdapat textarea untuk memuat tanggal hari libur kalender.
  3. id “multidate” digunakan sebagai selector. Data attribute data-datepick=”firstDay: 1″ menunjukkan bahwa hari pertama adalah hari senin.
  4. Proses sulapnya ada di baris 108-112. Untuk date format saya gunakan yyyy-mm-dd, sama dengan format tanggal MySQL, sehingga kita tidak perlu lagi melakukan konversi tanggal.
  5. Baris 113-149 (optional) hanya untuk insert data

Sampai disini kita sudah bisa memilih banyak tanggal untuk hari libur dalam satu tahun. Proses insert data kurang lebih sama seperti insert data biasa. Untuk proses pencarian data tanggal hari kerja berikutnya asap akan dibahas pada postingan selanjutnya.

DEMO