Masino Sinaga

Web Development and PHPMaker

Anda di sini: Beranda / PHPMaker / Menampilkan Tanggal Akhir dari Tanggal Awal Plus Sekian Hari di PHPMaker 2021
Modal Dialog Edit Sekarang Bisa Tetap Terbuka Setelah Edit Data di PHPMaker 2021
Begini Cara Menampilkan Konten Custom Files ke File PDF dari PHPMaker 2021 dan FPDF

Menampilkan Tanggal Akhir dari Tanggal Awal Plus Sekian Hari di PHPMaker 2021

Kam, 29 April 2021 oleh Masino Sinaga 4 Komentar

Selalu menarik untuk mencoba ulang kode-kode yang sudah pernah kita gunakan pada versi-versi major PHPMaker sebelumnya. Salah satunya tentang cara menampilkan tanggal akhir berdasarkan tanggal awal yang ditambah sekian hari, yang pernah saya tulis sekitar 5 tahun lalu pada artikel berikut: Mengetahui Tanggal Akhir dari Tanggal Awal Ditambah Sekian Hari di PHPMaker.

Misalkan nilai Tanggal Awal adalah 29 April 2021 pukul 10:40:11, lalu ditambahkan dengan nilai 28 hari, maka nilai Tanggal Akhir adalah 27 Mei 2021 pukul 10:40:11. Artinya, ketika Pengguna memilih nilai Tanggal Awal, lalu memasukkan nilai jumlah hari, maka nilai Tanggal Akhir akan otomatis terbentuk di sisi browser Pengguna.

Sama seperti di artikel terdahulu, langsung saja kita mulai.

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

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

Ketiga, pastikan extension DateTimePicker sudah aktif 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:

$("#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 2021, 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 2021/04/29 10:40:11, lalu Anda memasukkan atau mengetikkan nilai 28 pada bagian Nilai Tambah, maka nilai pada Tanggal Akhir akan otomatis terisi menjadi 2021/05/27 10:40:11.

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

Kalau kita bandingkan antara kode yang kita tulis 5 tahun yang lalu dengan kode yang kita tulis di artikel ini untuk PHPMaker 2021, maka hanya sedikit saja perbedaannya.

Pertama, untuk variable Javascript EW_DATE_SEPARATOR yang digunakan 5 tahun lalu, sekarang di PHPMaker 2021 diganti menjadi ew.DATE_SEPARATOR, karena variable-variable Javascript tersebut merupakan bagian dari variable object yang bernama ew.

Kedua, kita tidak lagi memerlukan kode $(document).ready(function() {, karena sudah ditangani oleh PHPMaker 2021, sehingga kode yang kita tulis bisa menjadi lebih ringkas lagi.

Bayangkan! Hanya dengan sedikit kode itu saja, dan juga mengatur beberapa property dari bagian Field Setup project PHPMaker 2021, kita sudah dapat menampilkan tanggal akhir berdasarkan tanggal awal dan nilai selisih dalam satuan hari. Selebihnya akan ditangani oleh PHPMaker 2021.

Betapa mudah, cepat, dan menyenangkan sekali menggunakan PHPMaker 2021, bukan? Hal ini semakin membuktikan lagi, bahwa tidak ada alasan takut atau ragu-ragu untuk selalu menggunakan versi major PHPMaker yang terakhir. 😉

Ditempatkan di bawah: PHPMaker Ditag dengan:Belajar PHPMaker, PHPMaker 2021, PHPMaker Indonesia, Server Events and Client Scripts, 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 dan ilovephpmaker.com.

Modal Dialog Edit Sekarang Bisa Tetap Terbuka Setelah Edit Data di PHPMaker 2021
Begini Cara Menampilkan Konten Custom Files ke File PDF dari PHPMaker 2021 dan FPDF

Komentar

  1. Syahruddin Noor mengatakan

    Kam, 29 April 2021 pada 10:18 pm

    Selamat malam, saya berdomisili di Kalimantan tengah dan saya sangat tertarik untuk belajar/kursus secara Online tentang PHPmaker. Bagaimana caranya agar saya bisa kursus PHPmaker secara online?

    Balas
    • Masino Sinaga mengatakan

      Jum, 30 April 2021 pada 8:17 am

      Supaya belajarnya lebih asyik, Anda bisa menggunakan Masino Extensions dengan cara terlebih dulu mendaftar menjadi member di situs http://www.ilovephpmaker.com.

      Balas
  2. irvan mengatakan

    Sab, 1 Mei 2021 pada 11:21 am

    Hallo, saya mau bertanya kalo saya mempunyai web dengan phpmaker 2018 versi php 7.1 kalo saya update versi php ke 7.3 itu bakal mengalami error tdk ya atau support tdk?

    Balas
    • Masino Sinaga mengatakan

      Sab, 1 Mei 2021 pada 11:55 am

      Kalau dari 7.1 ke 7.3 seharusnya tidak.

      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

  • Hati-Hati Memilih Versi PHP Sebelum Generate Code di PHPMaker 2022
  • Alasan AlwaysUseEnglishUSLocale Sebaiknya Aktif di Masino Extensions untuk PHPMaker 2022
  • MasinoInputMask18 Extension, Autoformat Angka dengan Fitur Lebih Kaya di PHPMaker 2022
  • MasinoSignature18 Extension, Mudahnya Mengelola Tanda Tangan di PHPMaker 2022
  • MasinoFormWizard18 Extension, Mengubah Tampilan Multi-Page di PHPMaker 2022

Menu

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

Komentar Terbaru

  • Masino Sinaga pada Hati-Hati Memilih Versi PHP Sebelum Generate Code di PHPMaker 2022
  • Thien Rudi pada Hati-Hati Memilih Versi PHP Sebelum Generate Code di PHPMaker 2022
  • Masino Sinaga pada Cara Menggunakan Login by session variables di Aplikasi Web dari PHPMaker 2021
  • Masino Sinaga pada Cara Menggunakan Login by session variables di Aplikasi Web dari PHPMaker 2021
  • Masino Sinaga pada Cara Menggunakan Login by session variables di Aplikasi Web dari PHPMaker 2021

Situs Terkait

  1. I Love PHPMaker
  2. Situs Resmi PHPMaker
  3. Forum Diskusi PHPMaker
  4. PHPMaker di IlmuKomputer.com
  5. 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 - 2021 | WordPress | Catat masuk | Kembali ke atas