Menghitung Tanggal Baru dari Periode Terpilih dengan Javascript dari PHPMaker

Sebagai Web Developer kita harus selalu siap mengimplementasikan business-logic yang terkait dengan perhitungan data Tanggal. Tidak hanya menggunakan kode PHP di sisi server saja, bahkan kita juga harus bisa menerapkannya lewat kode Javascript di sisi browser Client.

Katakanlah di Aplikasi Web yang dibuat dengan PHPMaker, Pengguna memilih data Tanggal Awal kemudian memilih salah satu dari tiga periode (bulanan, triwulanan, atau tahunan), maka data di Tanggal Akhir akan otomatis terisi. Jadi nilai Tanggal Akhir tadi akan otomatis terisi berdasarkan nilai periode yang dipilih oleh Pengguna tadi.

Pernah mengalami kesulitan ketika ingin menerapkan contoh seperti itu? Kini Anda tidak perlu khawatir lagi, karena jika Anda membangun Aplikasi Web dengan PHPMaker, hal itu bisa dihasilkan dengan sangat mudah, cepat dan menyenangkan.

Silahkan ikuti langkah-langkah berikut:

1. Buat sebuah database baru di MySQL dengan nama date, lalu jalankan script berikut untuk membuat table baru yang bernama table1:

   CREATE TABLE `table1` (
     `ID` int(11) NOT NULL AUTO_INCREMENT,
     `Begin_Date` date DEFAULT NULL,
     `Periodic` enum('monthly','quarterly','yearly') DEFAULT NULL,
     `End_Date` date DEFAULT NULL,
     `Description` text,
     PRIMARY KEY (`ID`)
   ) ENGINE=MyISAM AUTO_INCREMENT=3 DEFAULT CHARSET=latin1;
   

2. Buat sebuah project PHPMaker baru dengan menggunakan database di atas, lalu klik object table1 dari panel Database.
3. Klik field Begin_Date, lalu beri tanda centang pada item Required dan item Use date/time picker pada panel Edit Tag. Pastikan juga format Tanggal yang digunakan adalah Ymd dari bagian Format -> Date/Time named format pada panel View Tag. Asumsi, kita menggunakan PHPMaker versi 2017.
4. Klik field End_Date, lalu beri tanda centang juga pada item Required dan item Use date/time picker pada panel Edit Tag. Pastikan juga format Tanggal yang digunakan adalah Ymd dari bagian Format -> Date/Time named format pada panel View Tag. Asumsi, kita menggunakan PHPMaker versi 2017.
5. Klik field Periodic, lalu pastikan control Radio sudah terpilih dari panel Edit Tag, dan beri tanda centang pada item Required dari panel Edit Tag.
6. Klik menu Tools -> Extensions, lalu beri tanda centang pada kolom Enabled untuk extension yang bernama JSCalendar, lalu klik tombol OK.
7. Klik tab Code (Server Events, Client Scripts and Custom Templates), lalu tambahkan kode jQuery berikut pada lokasi Client Scripts -> Table-Specific -> Add/Copy Page -> Startup Script:

   $(document).ready(function() {
   	$('input[name=x_Periodic]:radio').click(function(){
   		var date = new Date($("#x_Begin_Date").val());
   		if($(this).attr("value")=="monthly"){
   			var lastDay = new Date(date.getFullYear(), date.getMonth() + 1, date.getDate());			
   		} else if ($(this).attr("value") == "quarterly") {
   			var lastDay = new Date(date.getFullYear(), date.getMonth() + 3, date.getDate());
   		} else if ($(this).attr("value") == "yearly") {
   			var lastDay = new Date(date.getFullYear(), date.getMonth() + 12, date.getDate());
   		}
   		lastMonth = ( (lastDay.getMonth() + 1) < 10) ? '0' + (lastDay.getMonth() + 1) : (lastDay.getMonth() + 1);
   		lastDate = ( lastDay.getDate() < 10 ) ? '0' + lastDay.getDate() : lastDay.getDate();
   		var newDate =  lastDay.getFullYear() + EW_DATE_SEPARATOR + lastMonth + EW_DATE_SEPARATOR + lastDate;
   		if (isNaN(lastMonth) == false) $("#x_End_Date").val(newDate);
   	});
   });
   

8. Terakhir, generate semua file script menggunakan PHPMaker seperti biasa.
9. Setelah proses generate selesai, jalankan Aplikasi Web dari browser, lalu klik tombol Add (+) pada halaman List dari table1 tadi. Pada form Add, pilih Tanggal yang Anda inginkan dari bagian Begin Date, pilih salah satu Periodic, lalu perhatikan di bagian End Date. Seharusnya sekarang nilai Tanggal pada field End_Date sudah terisi sesuai dengan nilai Periodic yang terpilih.

Dari contoh kode Javascript di atas, ada beberapa hal yang bisa kita pelajari.

Pertama, untuk menghitung atau mendapatkan nilai Tanggal Baru berdasarkan nilai Tanggal Awal dan Periodic tertentu, kita bisa mengoptimalkan object Date Javascript yang terdapat di browser. Selanjutnya kita bisa mengambil nilai komponen Tahun, Bulan, dan Tanggal masing-masing dengan menggunakan method getFullYear, getMonth, dan getDate.

Kedua, nilai balikan dari method getMonth selalu berbasis nol (0). Contoh, jika nilai balikan adalah 0, maka itu artinya bulan 1, jika nilai balikan adalah 4, maka itu artinya bulan 5, dan seterusnya. Oleh karena itu, pastikan kita sudah menambahkan nilai satu sebelum menampilkan atau menggunakan hasilnya.

Ketiga, dengan kode tersebut, maka sistem akan otomatis menghitung nilai Tanggal Baru dengan Tanggal yang valid. Contoh, jika misalnya Tanggal di Begin Date adalah 2016/01/31, maka ketika nilai Periodic yang dipilih adalah monthly, nilai di bagian End Date adalah 2016/03/02, dan bukan 2016/02/31.

O iya, kode di atas sudah berhasil dicoba dengan sukses menggunakan PHPMaker versi 2017.

Betapa mudah, cepat, dan menyenangkan sekali, bukan? 🙂