Memastikan Data Tanggal Tidak Boleh Lebih Kecil dari Tanggal Hari Ini di PHPMaker

Lagi-lagi kita akan membuktikan betapa PHPMaker dapat membantu Web Developer mempercepat proses pengembangan Aplikasi Web. Kali ini saya akan menunjukkan kepada Anda bagaimana mudahnya memvalidasi data Tanggal yang dimasukkan oleh Pengguna harus lebih besar atau sama dengan tanggal hari ini. Dengan kata lain, Tanggal yang dimasukkan tidak boleh lebih kecil dari tanggal hari ini.

Seperti biasa, kita bisa melakukan hal ini dengan dua cara. Pertama dengan mengoptimalkan fitur Server Events, dan Kedua dengan mengoptimalkan fitur Client Scripts. Jadi, sama sekali kita tidak perlu mengutak-atik kode yang sudah dibangkitkan oleh PHPMaker. Kita cukup menambahkan sedikit kode saja dari dalam project PHPMaker.

Katakanlah kita memiliki field yang bernama Tanggal_Mulai dengan tipe Date (ingat, bukan DateTime) di suatu table, dan kita ingin memastikan data tanggal yang dimasukkan oleh Pengguna melalui form Add tidak boleh lebih kecil dari tanggal hari ini.

Jika menggunakan fitur Server Events, maka kita bisa menggunakan Row_Inserting yang terdapat di bawah lokasi Server Events -> Table-Specific -> Common, sehingga kode selengkapnya menjadi seperti ini:

// Row Inserting event
function Row_Inserting($rsold, &$rsnew) {
	// Enter your code here
	// To cancel, set return value to FALSE
	if ( strtotime($rsnew["Tanggal_Mulai"]) < strtotime(ew_CurrentDate()) ) {
		$this->setFailureMessage("Tanggal Mulai tidak boleh lebih kecil dari tanggal hari ini.");
		return FALSE;
	}
	return TRUE;
}

Perhatikanlah bahwa kita cukup hanya menambahkan empat baris kode PHP itu saja ke dalam server event tersebut. Kita hanya perlu membandingkan nilai Tanggal_Mulai dengan nilai tanggal hari ini menggunakan global function ew_CurrentDate() yang sudah disediakan oleh PHPMaker. Supaya kedua nilai tersebut dapat dibandingkan, maka kita mengkonversi data tanggal tadi menggunakan fungsi PHP strtotime.

Yang menariknya lagi adalah, di samping menggunakan fitur kode PHP di atas yang terjadi di sisi Server, kita bisa juga menggunakan kode jQuery yang terjadi di sisi Client. Proses validasi dilakukan di sisi browser si Client. Artinya, dengan menggunakan kode di sisi Client, sistem tidak perlu melakukan HTTP request terlebih dulu ke Server untuk mendapatkan hasil validasi tadi.

Cukup tambahkan kode jQuery berikut ke dalam Form_CustomValidate yang terdapat di bawah lokasi Client Scripts -> Table-Specific -> Add/Copy Page, 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("x_Tanggal_Mulai");
 	var CurrentDate = new Date();
	CurrentDate = ew_ParseDate(CurrentDate, 1);
	var SelectedDate = new Date($("#x_Tanggal_Mulai").val());
	SelectedDate = ew_ParseDate(SelectedDate, 1);
	if (SelectedDate < CurrentDate) {
 		return this.OnError(elmTanggal, "Tanggal Mulai harus lebih besar atau sama dengan tanggal hari ini.");
 	}
	return true;
}

Dari kode jQuery barusan, kita bisa mempelajari beberapa hal.

Pertama, untuk mengambil data tanggal hari ini, maka kita bisa membuatnya dari object Date. Karena nilai tanggal yang dihasilkan oleh object ini menyertakan data Jam, Menit, dan Detik, maka kita perlu menghilangkan komponen waktu tersebut. Caranya, kita menggunakan global function ew_ParseDate. Parameter kedua dari fungsi ini bernilai 1, artinya kita hanya mengambil komponen Tanggal tanpa disertai komponen Jam, Menit, dan Detik.

Kedua, kita mengambil nilai Tanggal_Mulai yang dimasukkan Pengguna, lalu lakukan hal yang sama seperti waktu kita mengambil data tanggal hari ini. Alasan mengapa kita tidak perlu menyertakan komponen waktu seperti Jam, Menit, dan Detik, karena kita hanya ingin membandingkan nilai tanggalnya saja.

Ketiga, kita membandingkan antara nilai Tanggal_Mulai dan tanggal hari ini. Jika nilai Tanggal_Mulai lebih kecil dari tanggal hari ini, maka tampilkan pesan kepada Pengguna dan setelah itu kita memastikan kursor akan otomatis fokus kembali ke field Tanggal_Mulai tadi.

Dengan menggunakan kode jQuery tersebut, ketika nilai Tanggal Mulai yang dimasukkan Pengguna lebih kecil dari tanggal hari ini, maka sistem akan langsung menampilkan pesan kepada Pengguna tanpa harus terlebih dulu menghubungi Server. Cara ini tentu saja dapat menghemat waktu Pengguna saat sedang menambah data.

Setelah Pengguna mengklik OK pada kotak pesan yang muncul, maka kursor akan otomatis fokus ke field Tanggal_Mulai tadi, sehingga Pengguna dapat segera memperbaiki data Tanggal Mulai tersebut.

Betapa fleksibelnya PHPMaker dapat membantu meringankan pekerjaan Web Developer. Tidak perlu repot-repot. Tidak perlu memikirkan hal-hal teknis lainnya. Hidup pun menjadi semakin indah dan bahagia. 🙂