Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Memaksa Pengguna Memilih Tanggal 20 s.d. 19 Bulan Berikutnya dari PHPMaker
Wow! Requires search criteria Ternyata Bisa Dibuat Dinamis dari PHPMaker
Begini Mudahnya Men-Debug Aplikasi Web yang Dihasilkan Oleh PHPMaker

Memaksa Pengguna Memilih Tanggal 20 s.d. 19 Bulan Berikutnya dari PHPMaker

Sab, 23 April 2016 oleh Masino Sinaga 4 Komentar

Pernah mengalami kesulitan untuk memaksa Pengguna di Aplikasi Web yang Anda buat supaya memilih tanggal mulai 20 sampai dengan 19 bulan berikutnya? Yang jelas, jika Anda membangun Aplikasi Web dengan menggunakan PHPMaker, hal ini bisa dilakukan dengan sangat mudah.

Katakanlah nama field yang sedang kita bicarakan ini adalah Tanggal_Masuk. Kita ingin menampilkan field ini pada panel Pencarian di halaman List sebagai Extended Search. Field ini bersifat mandatory. Artinya, jika Pengguna tidak memasukkan tanggal awal dan tanggal akhir, maka proses pencarian tidak dapat dilakukan.

Saat Pengguna memilih tanggal awal, maka otomatis tanggal berubah menjadi 20 sesuai dengan bulan yang dipilih. Di saat yang sama, tanggal akhir otomatis terisi menjadi tanggal 19 bulan berikutnya.

Biasanya business-logic seperti ini cocok untuk menampilkan laporan dengan range tanggal yang bulannya berbeda, tetap harus tetap dalam range satu bulan saja. Sudah ada gambaran sekarang?

  1. Pertama sekali, dari Fields setup, klik field Tanggal_Masuk, lalu beri tanda centang pada item Use date/time picker pada panel Edit Tag. Pastikan juga format Tanggal yang digunakan adalah yyyy/mm/dd dari bagian Validate.
  2. Masih pada Fields setup, pastikan sudah memilih BETWEEN pada kolom Search Opr 1 di bawah kolom Advanced Search Page. Tujuannya supaya di form Pencarian nanti field ini menggunakan dua Textbox, yaitu tanggal awal dan tanggal akhir.
  3. Jangan lupa untuk mengaktifkan extension untuk menampilkan control DateTime Picker. Klik menu Tools -> Extensions, lalu beri tanda centang pada kolom Enabled untuk extension yang bernama JSCalendar, lalu klik tombol OK.
  4. Langkah selanjutnya kita akan menulis kode jQuery untuk memaksa Pengguna memilih tanggal 20 sampai dengan 19 bulan berikutnya. Klik tab Code (Server Events, Client Scripts and Custom Templates), lalu tambahkan kode jQuery berikut pada lokasi Client Scripts -> Table-Specific -> List Page -> Startup Script:

    $(document).ready(function(){
    	$("#x_Tanggal_Masuk").change(function(){
    		var date1 = new Date($("#x_Tanggal_Masuk").val());
    		var lastDay1 = new Date(date1.getFullYear(), date1.getMonth(), 20);
    		lastMonth1 = ( (lastDay1.getMonth() + 1) < 10) ? '0' + (lastDay1.getMonth() + 1) : (lastDay1.getMonth() + 1);
    		var newDate1 =  lastDay1.getFullYear() + '/' + lastMonth1 + '/' + lastDay1.getDate();
    		$("#x_Tanggal_Masuk").val(newDate1);		
    		var lastDay = new Date(date1.getFullYear(), date1.getMonth() + 1, 19);
    		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() + '/' + lastMonth + '/' + lastDate;
    		$("#y_Tanggal_Masuk").val(newDate);
    	});
    });
    
  5. Terakhir, untuk memastikan Pengguna harus memilih tanggal, salin kode Javascript berikut ke dalam lokasi Client Scripts -> Table-Specific -> List Page -> Form_CustomValidate:

    function(fobj) { // DO NOT CHANGE THIS LINE!
    	// Your custom validation code here, return false if invalid.
    	elm = this.GetElements("x_Tanggal_Masuk");
     	if (elm && !ew_IsHidden(elm) && !ew_HasValue(elm))
     		return this.OnError(elm, "<?php echo ew_JsEncode2(str_replace("%s", CurrentPage()->Tanggal_Masuk->FldCaption(), CurrentPage()->Tanggal_Masuk->ReqErrMsg)) ?>");	
    	return true;
    }
    
  6. Terakhir, seperti biasa, generate ulang semua file script seperti biasa dari PHPMaker.
  7. Setelah itu, jalankan Aplikasi Web yang sudah dihasilkan tadi dari browser. Pada halaman List table tersebut, pastikan panel Pencarian sudah terbuka. Klik icon DateTime Picker dari tanggal awal, lalu silahkan pilih sebuah tanggal yang Anda inginkan. Perhatikan bahwa di tanggal awal otomatis terpilih menjadi tanggal 20 sesuai bulan yang sedang terpilih, dan di tanggal akhir otomatis terisi dengan tanggal 19 bulan berikutnya.

Dengan cara di atas, maka sistem juga akan menangani kemungkinan jika tahun di tanggal awal berbeda dengan tahun di tanggal akhir. Contoh, jika Pengguna memilih salah satu tanggal di bulan Desember 2015, maka nilai tanggal awal menjadi 2015/12/20, dan nilai di tanggal akhir otomatis berubah menjadi 2016/01/19.

Betapa mudah, cepat, dan menyenangkan sekali, bukan? Tidak perlu lagi cara-cara manual atau konvensional seperti selama ini mungkin masih Anda lakukan dengan hanya mengubah nilai bulannya saja, tetap tahunnya tidak.

Selamat menikmati PHPMaker yang begitu keren! 🙂

Ditempatkan di bawah: PHPMaker Ditag dengan:Belajar PHPMaker, Client Scripts, Javascript, jQuery, PHPMaker Indonesia, Startup Script, Tutorial PHPMaker

Masino Sinaga

Web Developer pengguna PHPMaker untuk membangun Aplikasi Web sejak tahun 2004. Sampai sekarang masih aktif dan rajin membagikan pengalamannya menggunakan PHPMaker melalui situs masinosinaga.com, ilovephpmaker.com, dan phpmakerprojects.com.

Wow! Requires search criteria Ternyata Bisa Dibuat Dinamis dari PHPMaker
Begini Mudahnya Men-Debug Aplikasi Web yang Dihasilkan Oleh PHPMaker

Komentar

  1. agus s mengatakan

    Kam, 26 April 2018 pada 3:18 am

    mau nanya gan, apakah phpmaker dapat di desain untuk menampilkan bulan saja? maksud saya jika saya ingin menampilkan data dengan kelompok yang memiliki tanggal lahir yang sama dalam satu bulan, walaupun tahun berbeda. bagaimana caranya?

    Balas
    • Masino Sinaga mengatakan

      Rab, 2 Mei 2018 pada 10:08 pm

      Anda bisa mendefinisikan kriteria Filter menggunakan server event Recordset_Selecting, contoh:

      ew_AddFilter($filter, "Tanggal LIKE '%-04-%'"); // misalkan ingin mencari semua yang berulang tahun bulan April 
      
      Balas
  2. bagus mengatakan

    Sen, 26 Juli 2021 pada 9:06 pm

    kalo mau membuat pilihan search option amount: misal 0 – 500, 501-1000, 1001-1500 bagaimana cara. mohon sarannya bang Masino. Jadi ketika di klik option searnya. muncul berapa range pilihan tadi Terimakasih sebelumnya

    Balas
    • Masino Sinaga mengatakan

      Sen, 2 Agustus 2021 pada 8:23 am

      Bisa dengan membuat table khusus yang menyimpan kategori tersebut, berikut nilainya yang akan disimpan ke database. Setelah itu, field yang menggunakan nilai tadi dibuat menjadi menggunakan Lookup Table ke table khusus tadi. Kira-kira seperti itu tekniknya.

      Balas

Tinggalkan Balasan Batalkan balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Situs ini menggunakan Akismet untuk mengurangi spam. Pelajari bagaimana data komentar Anda diproses.

Pos-pos Terbaru

  • Masino Extensions untuk PHPMaker 2024 Sudah Dirilis, Silahkan Download!
  • Fitur-Fitur Masino Extensions untuk PHPMaker 2024
  • Review PHPMaker 2024
  • Mudahnya Mengunci Record dengan Javascript Count Down di PHPMaker 2023
  • Ini Alasan Kenapa Kalian Harus Beralih ke PHP 8

Menu

  • Siapa Saya?
  • Web Development
  • PHPMaker
  • Umum
  • Syarat dan Ketentuan
  • Sitemap (Peta Situs)
  • Komentar

Komentar Terbaru

  • Masino Extensions untuk PHPMaker 2024 Sudah Dirilis, Silahkan Download! – Masino Sinaga pada Fitur-Fitur Masino Extensions untuk PHPMaker 2024
  • Fitur-Fitur Masino Extensions untuk PHPMaker 2024 – Masino Sinaga pada Custom Domain URL di Masino Extensions untuk PHPMaker 2020
  • Fitur-Fitur Masino Extensions untuk PHPMaker 2024 – Masino Sinaga pada Membatasi Akses Versi Live dan Versi Development Aplikasi Web dari PHPMaker
  • Fitur-Fitur Masino Extensions untuk PHPMaker 2024 – Masino Sinaga pada Nomor Urut Record di Export Data pada PHPMaker 2020 dan PHPMaker 2021
  • Masino Sinaga pada Review PHPMaker 2024

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. PHPMaker Projects
  6. PHPMaker Learning

Baru di PHPMaker?

Baca ini terlebih dulu ...

  1. Ayo Menjadi Web Developer yang Cerdas!
  2. PHPMaker: PHP Code Generator + PHP Framework
  3. Pertanyaan-Pertanyaan yang Paling Sering Diajukan Seputar PHPMaker
  4. Tips buat Anda Pemula yang Baru Mengenal dan Menggunakan PHPMaker
  5. Bacalah Help, Bacalah Help, dan Bacalah Help di PHPMaker!

(c) Masino Sinaga 2009 - 2023 | WordPress | Catat masuk | Kembali ke atas