Mengetahui Tanggal Akhir dari Tanggal Awal Ditambah Sekian Hari di PHPMaker

Sebagai Web Developer, pernahkah Anda mengalami kesulitan ketika ingin mengetahui nilai Tanggal Akhir berdasarkan nilai Tanggal Awal yang ditambahkan dengan nilai sekian hari pada Aplikasi Web yang Anda buat?

Jika ya, maka trik pada artikel ini akan membuktikan kepada Anda bahwa dengan menggunakan PHPMaker, kita dapat mengetahuinya dengan sangat cepat, mudah, dan menyenangkan.

Misalkan nilai Tanggal Awal adalah 23 Desember 2016 pukul 12:38:50, lalu ditambahkan dengan nilai 12 hari, maka nilai Tanggal Akhir adalah 4 Januari 2017 pukul 12:38:50. Artinya, ketika Pengguna memilih nilai Tanggal Awal, lalu memasukkan nilai jumlah hari, maka nilai Tanggal Akhir akan otomatis terbentuk di sisi browser Pengguna.

Baiklah, supaya tidak semakin penasaran, langsung saja ikuti langkah-langkah berikut ini dengan teliti. Jangan sampai ada yang telolet, eh… terlewat, ya! 😀

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

CREATE TABLE `table1` (
  `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 PHPMaker baru, lalu arahkan ke Database tadi. Pada panel Database, pastikan Anda sudah memberi tanda centang dan memilih object table1.

Ketiga, aktifkan extension JSCalendar 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:

$(document).ready(function() {
	$("#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, 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 2016-12-23 12:38:50, lalu Anda memasukkan atau mengetikkan nilai 12 pada bagian Nilai Tambah, maka nilai pada Tanggal Akhir akan terisi menjadi 2017-01-04 12:38:50.

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

Hanya dengan menambahkan sedikit kode itu saja, dan juga mengatur beberapa property dari bagian Field Setup project PHPMaker, kita sudah dapat menghasilkan fitur seperti itu. Selebihnya akan ditangani oleh PHPMaker.

Betapa mudah, cepat, dan menyenangkan sekali menggunakan PHPMaker, bukan? 😉