Menampilkan Tanggal Akhir dari Tanggal Awal Plus Sekian Hari di PHPMaker 2021

Selalu menarik untuk mencoba ulang kode-kode yang sudah pernah kita gunakan pada versi-versi major PHPMaker sebelumnya. Salah satunya tentang cara menampilkan tanggal akhir berdasarkan tanggal awal yang ditambah sekian hari, yang pernah saya tulis sekitar 5 tahun lalu pada artikel berikut: Mengetahui Tanggal Akhir dari Tanggal Awal Ditambah Sekian Hari di PHPMaker.

Misalkan nilai Tanggal Awal adalah 29 April 2021 pukul 10:40:11, lalu ditambahkan dengan nilai 28 hari, maka nilai Tanggal Akhir adalah 27 Mei 2021 pukul 10:40:11. Artinya, ketika Pengguna memilih nilai Tanggal Awal, lalu memasukkan nilai jumlah hari, maka nilai Tanggal Akhir akan otomatis terbentuk di sisi browser Pengguna.

Sama seperti di artikel terdahulu, langsung saja kita mulai.

Pertama sekali, buatlah sebuah Database di MySQL, lalu jalankan script SQL berikut untuk membuat satu buah table di dalamnya:

CREATE TABLE `datetime` (
  `Kode` char(3) NOT NULL,
  `Tanggal_Awal` datetime NOT NULL,
  `Nilai_Tambah` int(11) NOT NULL,
  `Tanggal_Akhir` datetime NOT NULL,
  PRIMARY KEY (`Kode`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1;

Kedua, buatlah sebuah project baru dengan menggunakan PHPMaker 2021, lalu arahkan ke Database tadi. Pada panel Database, pastikan Anda sudah memberi tanda centang dan memilih object datetime.

Ketiga, pastikan extension DateTimePicker sudah aktif dari menu Tools -> Extensions.

Keempat, klik tab Fields lalu klik field Tanggal_Awal, pastikan dari panel Edit Tag, Anda sudah memilih Date dari bagian Validation -> Validate. Pastikan juga pilihan Use date/time picker dan Required sudah ada tanda centangnya. Setelah itu, pada panel View Tag, pastikan Anda sudah memilih Date/Time dari property Format, dan juga sudah memilih YmdHis dari property Date/Time named format.

Kelima, lakukan hal yang sama seperti langkah keempat tadi untuk field Tanggal_Akhir.

Keenam, klik tab Code (Server Events, Client Scripts and Custom Templates), lalu lompat ke lokasi Client Scripts -> Global -> Pages with header/footer -> Global Code, kemudian salin function Javascript berikut ke editor kode tersebut:

function addDays(date, days) {
    var tt = date;
    var time = "";
    if (tt.toString().length > 8) {
        time = tt.substring(11);
    } else {
        time = "";
    }
    var begin_date = new Date(date);
    var newdate = new Date(begin_date);
    newdate.setDate(newdate.getDate() + days);
    var dd = newdate.getDate();
    if (dd.toString().length == 1) dd = "0" + dd;
    var mm = newdate.getMonth() + 1;
    if (mm.toString().length == 1) mm = "0" + mm;
    var y = newdate.getFullYear();
    var sFormattedDate = "";
    sFormattedDate = y + ew.DATE_SEPARATOR + mm + ew.DATE_SEPARATOR + dd;
    return sFormattedDate + ' ' + time;
}

Ketujuh, salin kode jQuery berikut ke dalam lokasi Client Scripts -> Table-Specific -> Add/Copy Page -> Startup Script:

$("#x_Tanggal_Awal").change(function() {
    var sTgl = $("#x_Tanggal_Awal").val();
    var iVal = parseInt($("#x_Nilai_Tambah").val());
    if ($("#x_Nilai_Tambah").val() != "")
    $("#x_Tanggal_Akhir").val(addDays(sTgl, iVal));
});
$("#x_Nilai_Tambah").keyup(function(event) {
    var sTgl = $("#x_Tanggal_Awal").val();
    var iVal = parseInt($("#x_Nilai_Tambah").val());
    if (iVal > 0) {
        $("#x_Tanggal_Akhir").val(addDays(sTgl, iVal));
    } else {
        $("#x_Tanggal_Akhir").val("");
    }
});

Kedelapan, lakukan hal yang sama seperti langkah ketujuh tadi pada lokasi Client Scripts -> Table-Specific -> Edit Page -> Startup Script.

Kesembilan, generate semua file script menggunakan PHPMaker 2021, seperti biasa.

Setelah proses generate selesai, sekarang jalankan Aplikasi Web dari browser favorit Anda. Cobalah menambah data dengan mengklik tombol Add (+), lalu pilih tanggal pada bagian Tanggal Awal, masukkan nilai yang Anda inginkan di bagian Nilai Tambah, lalu perhatikan di bagian Tanggal Akhir, nilai tanggal akan otomatis terisi berdasarkan nilai Tanggal Awal ditambah nilai jumlah hari pada Nilai Tambah.

Misalkan kita menggunakan contoh di atas. Nilai pada bagian Tanggal Awal terisi 2021/04/29 10:40:11, lalu Anda memasukkan atau mengetikkan nilai 28 pada bagian Nilai Tambah, maka nilai pada Tanggal Akhir akan otomatis terisi menjadi 2021/05/27 10:40:11.

Dalam hal ini, maka disarankan untuk selalu menggunakan format data Tanggal dengan urutan: Tahun, Bulan, Tanggal, Jam, Menit, dan Detik.

Kalau kita bandingkan antara kode yang kita tulis 5 tahun yang lalu dengan kode yang kita tulis di artikel ini untuk PHPMaker 2021, maka hanya sedikit saja perbedaannya.

Pertama, untuk variable Javascript EW_DATE_SEPARATOR yang digunakan 5 tahun lalu, sekarang di PHPMaker 2021 diganti menjadi ew.DATE_SEPARATOR, karena variable-variable Javascript tersebut merupakan bagian dari variable object yang bernama ew.

Kedua, kita tidak lagi memerlukan kode $(document).ready(function() {, karena sudah ditangani oleh PHPMaker 2021, sehingga kode yang kita tulis bisa menjadi lebih ringkas lagi.

Bayangkan! Hanya dengan sedikit kode itu saja, dan juga mengatur beberapa property dari bagian Field Setup project PHPMaker 2021, kita sudah dapat menampilkan tanggal akhir berdasarkan tanggal awal dan nilai selisih dalam satuan hari. Selebihnya akan ditangani oleh PHPMaker 2021.

Betapa mudah, cepat, dan menyenangkan sekali menggunakan PHPMaker 2021, bukan? Hal ini semakin membuktikan lagi, bahwa tidak ada alasan takut atau ragu-ragu untuk selalu menggunakan versi major PHPMaker yang terakhir. 😉