Memvalidasi Bulan dan Tahun pada 2 Buah Tanggal Harus Sama dari PHPMaker

Pasti ada begitu banyak business-logic yang bisa terjadi dalam sebuah Aplikasi Web yang terkait dengan data Tanggal. Salah satunya adalah memastikan data Bulan dan Tahun pada dua buah Tanggal harus sama di form Pencarian pada halaman List. Jika tidak, maka sistem tidak dapat melanjutkan proses.

Katakanlah di sebuah table, ada sebuah field bernama Tanggal dengan tipe date (bukan datetime). Sebagai Web Developer, kita ingin ketika Pengguna mencari berdasarkan data Tanggal tadi, nilai Bulan dan Tahun pada range tanggal awal harus sama dengan nilai Bulan dan Tahun pada range tanggal akhir di field tadi.

Untuk itu, ada beberapa langkah yang harus kita lakukan dari dalam project PHPMaker.

Pertama, pastikan kita sudah mengaktifkan extension JSCalendar dari menu/lokasi berikut: Tools -> Extensions -> Type: Popup Calendar, dengan memberikan tanda centang pada kolom Enabled, lalu klik OK.

Kedua, pastikan kita sudah memberi tanda centang pada kolom Ext. Search dari lokasi tab Fields -> kolom List Page untuk field Tanggal tadi. Kemudian, masih pada lokasi yang sama tersebut, pastikan kita sudah memilih BETWEEN dari kolom Advanced Search Page -> Search Opr 1.

Ketiga, masih pada Fields setup tadi, dari panel Edit Tag, pastikan pilih DateTime (yyyy/mm/dd) di bawah lokasi ini: Validation -> Validate, dan beri tanda centang pada Use date/time picker. Lalu dari panel View Tag, pilih DateTime pada item Format, dan pilih yyyy/mm/dd pada bagian Date/Time name format.

Inti dari ketiga pengaturan tadi, supaya kita menampilkan field Tanggal ini pada form Pencarian yang terdapat di halaman List, dan meskipun hanya satu field Tanggal yang kita gunakan, maka PHPMaker nantinya akan men-generate dua textbox yang dilengkapi dengan icon kalender, sehingga ketika Pengguna memilih data tanggal, maka formatnya menjadi yyyy/mm/dd.

Keempat, saat yang ditunggu-ditunggu akhirnya tiba. Kita hanya perlu menambahkan sedikit kode jQuery berikut ke bawah lokasi: Client Scripts -> Table-Specific -> List Page -> Form_CustomValidate, sehingga kode selengkapnya menjadi seperti ini:

function(fobj) { // DO NOT CHANGE THIS LINE!
	// Your custom validation code here, return false if invalid.
	elmTanggal = this.GetElements("y_Tanggal");
  	var Bulan_Tahun_Awal = $("#x_Tanggal").val();
 	Bulan_Tahun_Awal = Bulan_Tahun_Awal.substr(0, 7);
  	var Bulan_Tahun_Akhir = $("#y_Tanggal").val();
  	Bulan_Tahun_Akhir = Bulan_Tahun_Akhir.substr(0, 7);
 	if (Bulan_Tahun_Awal != Bulan_Tahun_Akhir) {
  		return this.OnError(elmTanggal, "Bulan dan Tahun di Tanggal awal harus sama dengan Tanggal akhir.");
  	}
	return true;
}

Perhatikan kode di atas. Karena format Tanggal sudah kita sepakati yyyy/mm/dd, maka kita cukup mengambil 7 karakter pertama dari nilai Tanggal, yaitu dalam hal ini: yyyy/mm. Jika nilai Bulan dan Tahun di Tanggal range awal tidak sama dengan Bulan dan Tahun di Tanggal range akhir, maka tampilkan pesan error kepada Pengguna.

Setelah Anda men-generate semua file script dengan PHPMaker seperti biasa, saatnya menjalankan Aplikasi Web dari browser. Di halaman List, pastikan panel Pencarian sudah terbuka (expanded). Sekarang cobalah memilih data Tanggal yang nilai Bulan dan Tahun di range Tanggal awal tidak sama dengan nilai Bulan dan Tahun di range Tanggal akhir, lalu klik tombol Search atau Cari.

Sistem akan menampilkan pesan error kepada Pengguna tanpa melakukan HTTP Request. Setelah Pengguna mengklik tombol OK pada pesan tersebut, maka kursor akan fokus ke textbox Tanggal pada range akhir, sehingga Pengguna disarankan untuk memperbaiki data Tanggal pada range akhir.

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