MODEL

const { Sequelize, DataTypes, Op } = require("sequelize");

const sequelize = require("../config/db");

const Langganan = sequelize.define(

  "langganan",
  {
    id_langganan: {
      type: DataTypes.INTEGER,
      primaryKey: true,
      autoIncrement: true,
    },
    id_client: {
      type: DataTypes.INTEGER,
    },
    waktu_mulai: {
      type: DataTypes.DATEONLY,
    },
    waktu_selesai: {
      type: DataTypes.DATEONLY,
    },
    is_aktif: {
      type: DataTypes.INTEGER,
    },
    user_create: {
      type: DataTypes.INTEGER,
    },
    user_update: {
      type: DataTypes.INTEGER,
    },
    time_create: {
      type: "TIMESTAMP",
      defaultValue: Sequelize.literal("CURRENT_TIMESTAMP"),
      allowNull: true,
    },
    time_update: {
      type: "TIMESTAMP",
      defaultValue: Sequelize.literal("CURRENT_TIMESTAMP"),
      allowNull: true,
    },
  },
  {
    timestamps: false,
    tableName: "langganan",
  }
);

const getLangganan = async (

  skip = null,
  offset = null,
  search = null,
  limit = null
) => {
  let langganan = "";
  if (search != null && search != "" && limit != "" && limit != null) {
    langganan = await Langganan.findAll({
      attributes: ["id_langganan","id_client", "waktu_mulai",
"waktu_selesai","is_aktif"],
      where: {
        [Op.or]: {
          waktu_mulai: {
            [Op.like]: "%" + search + "%",
          },
          waktu_selesai: {
            [Op.like]: "%" + search + "%",
          },
        },
      },
      order: [["id_langganan", "asc"]],
      limit: limit,
    });
  }

  if (skip != null && offset != null) {

    langganan = await Langganan.findAll({
      attributes: ["id_langganan","id_client", "waktu_mulai",
"waktu_selesai","is_aktif"],
      order: [["id_langganan", "asc"]],
      limit: skip,
      offset: offset,
    });
  }

  if (limit == null && search != null) {

    langganan = await Langganan.findAll({
      attributes: ["id_langganan","id_client", "waktu_mulai",
"waktu_selesai","is_aktif"],
      where: {
        [Op.or]: {
            waktu_mulai: {
                [Op.like]: "%" + search + "%",
              },
              waktu_selesai: {
                [Op.like]: "%" + search + "%",
              },
        },
      },
      order: [["id_langganan", "asc"]],
    });
  }
  return langganan;
};

module.exports = { Langganan, getLangganan };

controller

const langgananModel = require("../../model/LanggananModel");

const { pagination } = require("../../helper/paginationResult");
var moment = require("moment");
const { validationResult } = require("express-validator");
const clientModel = require("../../model/ClientModel");

const index = async (req, res) => {

  try {
    if (req.xhr) {
      // page
      const page =
        req.query.page == null || req.query.page == "" ? 1 : req.query.page;
      const limit =
        req.query.limit == null || req.query.limit == "" ? 10 :
req.query.limit;
      const search = req.query.search;

      const halamanAkhir = page * limit;

      const halmaanAwal = halamanAkhir - limit;
      const offset = halamanAkhir;
      const skip = halmaanAwal;

      let langganan = await langgananModel.getLangganan(limit, skip);

      let model = await langgananModel.Langganan.count();
      if (search != null && search != "") {
        langganan = await langgananModel.getLangganan(null, null, search,
limit);
        let getModel = await langgananModel.getLangganan(null, null,
search);
        model = getModel.length;
      }

      // pagination
      const getPagination = pagination(page, model, limit);

      let keterangan = {
        from: skip + 1,
        to: offset,
        total: model,
      };

      let output = {
        data: langganan,
        pagination: getPagination,
        keterangan: keterangan,
      };
      return res.status(200).json({
        status: 200,
        message: "Berhasil tangkap data",
        output: output,
      });
    }

    // breadcrumb
    let breadcrumb = [];
    breadcrumb.push({ label: "Home", url: "/admin/dashboard", isActive:
"" });
    breadcrumb.push({
      label: "Langganan",
      url: "/admin/langganan",
      isActive: "active",
    });

    const getClient = await clientModel.Client.findAll();

    res.render("./admin/langganan/index", {
      title: "Langganan",
      breadcrumb: breadcrumb,
      currentUrl: req.originalUrl,
      dbClient: getClient
    });
  } catch (err) {
    console.log(err);
  }
};

const store = async (req, res) => {

  try {
    const errors = validationResult(req);
    if (!errors.isEmpty()) {
      return res.status(400).json({
        status: 400,
        message: "Invalid form validation",
        result: errors.array(),
      });
    } else {
      const response = req.body;
      if (response.page == "add") {
        let dateTime = moment().format("YYYY-MM-DD HH:mm:ss");
        console.log()
        let insert = await langgananModel.Langganan.create({
          id_client: response.id_client,
          waktu_mulai: response.waktu_mulai,
          waktu_selesai: response.waktu_selesai,
          is_aktif: 0,
          user_create: 1,
          user_update: 1,
          time_create: dateTime,
          time_update: dateTime,
        });

        if (insert) {
          return res.status(200).json({
            status: 200,
            message: "Berhasil insert data",
          });
        } else {
          return res.status(400).json({
            status: 400,
            message: "Gagal insert data",
          });
        }
      } else {
        let dateTime = moment().format("YYYY-MM-DD HH:mm:ss");
        let id_langganan = response.id_langganan;
        let update = await langgananModel.Langganan.update(
          {
            id_client: response.id_client,
            waktu_mulai: response.waktu_mulai,
            waktu_selesai: response.waktu_selesai,
            is_aktif: 0,
            user_create: 1,
            user_update: 1,
            time_create: dateTime,
            time_update: dateTime,
          },
          {
            where: {
              id_langganan: id_langganan,
            },
          }
        );

        if (update) {
          return res.json({
            status: 200,
            message: "Berhasil update data",
          });
        } else {
          return res.json({
            status: 400,
            message: "Gagal update data",
          });
        }
      }
    }
  } catch (error) {
    return res.status(400).json({
      status: 400,
      message: "Gagal insert data",
      result: error,
    });
  }
};

const edit = async (req, res) => {

  const id_langganan = req.params.id_langganan;
  const getLangganan = await langgananModel.Langganan.findOne({
    where: { id_langganan: id_langganan },
  });
  if (getLangganan) {
    return res.status(200).json({
      status: 200,
      message: "Berhasil mengambil data langganan",
      result: getLangganan,
    });
  } else {
    return res.status(400).json({
      status: 400,
      message: "Gagal mengambil data langganan",
    });
  }
};

const deleteData = async (req, res) => {

  const id_langganan = req.params.id_langganan;
  const getLangganan = await langgananModel.Langganan.destroy({
    where: {
      id_langganan: id_langganan,
    },
  });

  if (getLangganan) {
    return res.status(200).json({
      status: 200,
      message: "Berhasil menghapus data langganan",
      result: getLangganan,
    });
  } else {
    return res.status(400).json({
      status: 400,
      message: "Gagal menghapus data client",
    });
  }
};

module.exports = {
  index,
  store,
  edit,
  deleteData,
};

Index

<div class="main-content">
    <section class="section">
      <div class="section-header">
        <h1><%- title %></h1>
        <div class="section-header-breadcrumb">
          <%- include('../../layouts/partial/breadcrumb') %>
        </div>
      </div>
 
      <div class="section-body">
        <h2 class="section-title">Table <%- title %></h2>
        <div class="row">
          <div class="col-12 col-sm-6 col-md-6 col-lg-12">
            <div class="card">
              <div class="card-header">
                <i class="fas fa-user-tie"></i> &nbsp; Daftar tabel
langganan
              </div>
              <div class="card-body">
                <div class="mb-1">
                  <a
                    data-toggle="modal"
                    data-target="#modalForm"
                    href="#"
                    class="btn btn-primary icon-left btn-icon mb-2 btn-add"
                    ><i class="fas fa-plus"></i> Tambah
                  </a>
                </div>
                <div class="row">
                  <div class="col-lg-3">
                    <div class="form-group">
                      <label>Select data:</label>
                      <select class="form-control select-limit">
                        <option value="">-- Limit --</option>
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-lg-9">
                    <div class="form-group w-50 ml-auto">
                      <label>Pencarian:</label>
                      <input
                        type="text"
                        class="form-control search"
                        placeholder="Pencarian"
                      />
                    </div>
                  </div>
                </div>
                <span id="keterangan">
                  Showing <span id="from"></span> to <span id="to"></span>
of
                  <span id="total"></span> Entries
                </span>
                <div class="table-responsive">
                  <table class="table table-bordered" id="dataTable">
                    <thead>
                      <tr>
                        <th>No.</th>
                        <th>Nama client</th>
                        <th>Waktu Mulai</th>
                        <th>Waktu Selesai</th>
                        <th>Aktif</th>
                        <th class="text-center">Action</th>
                      </tr>
                    </thead>
                    <tbody></tbody>
                  </table>
                </div>
              </div>
              <div class="card-footer text-right">
                <div id="pagination"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
 
  <!-- Modal -->
  <div
    class="modal fade"
    id="modalForm"
    tabindex="-1"
    aria-labelledby="modalFormLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalFormLabel">Form Langganan</h5>
          <button
            type="button"
            class="close"
            data-dismiss="modal"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form
          action="/admin/langganan"
          method="post"
          class="form-submit"
          enctype="multipart/form-data"
        >
          <div class="modal-body">
            <div id="error-form-submit"></div>
            <input type="hidden" name="page" value="add" />
            <input type="hidden" name="id_langganan" value="" />
            <div class="form-group">
              <label for="">Nama Client</label>
              <select name="id_client" class="form-control" id="">
                <option value="">-- Client --</option>
                <% dbClient.map((v,i) => {  %>
                  <option value="<%- v.id_client %>"><%- v.nama_client
%></option>
                <% }); %>
              </select>
            </div>

            <div class="form-group">
                <label for="">Waktu Mulai</label>
                <input
                  type="date"
                  class="form-control"
                  placeholder="Waktu mulai"
                  name="waktu_mulai"
                  id="waktu_mulai"
                />
              </div>

              <div class="form-group">
                <label for="">Waktu Selesai</label>
                <input
                  type="date"
                  class="form-control"
                  placeholder="Waktu selesai"
                  name="waktu_selesai"
                  id="waktu_selesai"
                />
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-
dismiss="modal">
              <i class="fas fa-window-close"></i> Close
            </button>
            <button type="button" class="btn btn-primary btn-submit">
              <i class="fas fa-paper-plane"></i> Simpan
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
 
  <%- include('./script') %>
 

Script

<script>
    $(document).ready(function () {
      loadTable();
      function loadTable(page = null, limit = null, search = null) {
        $.ajax({
          url: "/admin/langganan",
          dataType: "json",
          type: "get",
          data: {
            page: page,
            limit: limit,
            search: search,
          },
          success: function (dataResult) {
            console.log(dataResult);  
            const {
              output: {
                data,
                pagination: { pagination },
              },
            } = dataResult;
 
            let output = ``;
 
            let no = 1;
            data.map((v, i) => {
              output += `
              <tr>
                <td>${no++}</td>
                <td>${v.client.nama_client}</td>
                <td>${v.waktu_mulai}</td>
                <td>${v.waktu_selesai}</td>
                <td>${
                  v.is_aktif == 1
                    ? '<span class="badge badge-success">Aktif</span>'
                    : '<span class="badge badge-danger">Tidak aktif</span>'
                }</td>
                <td>
                  <div class="text-center">
                    <a class="btn btn-warning btn-edit btn-sm" data-id="${
                      v.id_langganan
                    }" href="/admin/langganan/${
                v.id_langganan
              }/edit"><i class="fas fa-pencil-alt"></i> </a>
                    <a class="btn btn-danger btn-sm btn-delete" data-id="${
                      v.id_langganan
                    }" href="/admin/langganan/${
                v.id_langganan
              }/delete"><i class="fas fa-trash"></i> </a>
                    <a class="btn btn-info btn-sm"
href="/admin/dashboardClient?client_id=${
                      v.id_langganan
                    }"><i class="fas fa-book"></i> </a>
                  </div>
                </td>
              </tr>
              `;
            });
            $("#dataTable").find("tbody").html(output);
 
            // pagination
            const { buttonNext, buttonPrev, linkButtonNext, linkButtonPrev }
=
              dataResult.output.pagination;
            let paginationButton = ` <nav class="d-inline-block">
            <ul class="pagination mb-0">
              <li class="page-item ${buttonPrev == false ? "disabled" :
""}">
                <a class="page-link" href="#" data-page="${linkButtonPrev}"
tabindex="-1"><i class="fas fa-chevron-left"></i></a>
              </li>`;
            let span = ``;
            pagination.map((v, i) => {
              if (v.active == "active") {
                span = `<span class="sr-only">(current)</span>`;
              }
              paginationButton += `
                    <li class="page-item ${v.active}">
                      <a class="page-link" href="#" data-page="${v.page}">$
{v.page} ${span}</a>
                    </li>
              `;
            });
            paginationButton += `
            <li class="page-item ${buttonNext == false ? "disabled" : ""}">
            <a class="page-link" href="#" data-page="${linkButtonNext}"><i
class="fas fa-chevron-right"></i></a>
          </li>
        </ul>
      </nav>`;
 
            $("#pagination").html(paginationButton);
 
            const { keterangan } = dataResult.output;
            $("#keterangan").find("#from").html(keterangan.from);
            $("#keterangan").find("#to").html(keterangan.to);
            $("#keterangan").find("#total").html(keterangan.total);
          },
          error: function (x, t, m) {
            console.log(x.responseText);
          },
        });
      }
 
      $(document).on("click", ".page-link", function (e) {
        e.preventDefault();
        let page = $(this).data("page");
        let limit = $(".select-limit").val();
        let search = $(".search").val();
        loadTable(page, limit, search);
      });
 
      $(document).on("change", ".select-limit", function () {
        let limit = $(this).val();
        let page = $(".page-item.active").find("a.page-link").data("page");
        loadTable(page, limit);
      });
 
      $(document).on("input", ".search", function (e) {
        e.preventDefault();
        let search = $(this).val();
        let limit = $(".select-limit").val();
        loadTable(null, limit, search);
      });
 
      $(document).on("click", ".btn-add", function (e) {
        e.preventDefault();
        $('input[name="page"]').val("add");
        $(".form-submit")[0].reset();
        resetForm();
      });
 
      function resetForm() {
        $("#error-form-submit").html("");
        $(".form-submit").trigger("reset");
      }
 
      $(document).on("click", ".btn-submit", function (e) {
        e.preventDefault();
        $.ajax({
          url: "/admin/langganan",
          method: "post",
          type: "post",
          data: $(".form-submit").serialize(),
          dataType: "json",
          success: function (data) {
            if (data.status == 200) {
              Swal.fire({
                icon: "success",
                title: "Successfully",
                text: data.message,
                showConfirmButton: false,
                timer: 1500,
              });
 
              $("#modalForm").modal("hide");
              loadTable();
              resetForm();
            }
 
            if (data.status == 400) {
              Swal.fire({
                icon: "error",
                title: "Failed",
                text: data.message,
                showConfirmButton: false,
                timer: 1500,
              });
 
              $("#modalForm").modal("hide");
              loadTable();
            }
          },
          error: function (x, t, m) {
            const { result } = x.responseJSON;
            let output = ``;
            if (result.map != "") {
              result.map((v, i) => {
                output += `
              <div class="alert alert-danger alert-dismissible fade show"
role="alert">
                <strong>Fail!</strong> ${v.msg}
                <button type="button" class="close" data-dismiss="alert"
aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
              `;
              });
            }
 
            $("#error-form-submit").html(output);
          },
        });
      });
 
      $(document).on("click", ".btn-edit", function (e) {
        e.preventDefault();
        const id = $(this).data("id");
        const action = $(this).attr("href");
        $.ajax({
          url: action,
          method: "get",
          dataType: "json",
          success: function (data) {
            const { result } = data;
            $('input[name="id_langganan"]').val(result.id_langganan);
            $('input[name="id_client"]').val(result.id_client);
            $('input[name="waktu_mulai"]').val(result.waktu_mulai);
            $('input[name="waktu_selesai"]').val(result.waktu_selesai);
 
            $("#modalForm").modal().show();
            $('input[name="page"]').val("edit");
          },
          error: function (x, t, m) {
            console.log(x.responseText);
          },
        });
      });
 
      $(document).on("click", ".btn-delete", function (e) {
        e.preventDefault();
        const action = $(this).attr("href");
        Swal.fire({
          title: "Deleted",
          text: "Yakin ingin menghapus item ini?",
          icon: "warning",
          showCancelButton: true,
          confirmButtonColor: "#3085d6",
          cancelButtonColor: "#d33",
          confirmButtonText: "Yes, delete it!",
        }).then((result) => {
          if (result.isConfirmed) {
            $.ajax({
              url: action,
              dataType: "json",
              type: "get",
              success: function (data) {
                if (data.status == 200) {
                  Swal.fire("Deleted!", data.message, "success");
                  loadTable();
                } else {
                  Swal.fire("Error!", data.message, "error");
                }
              },
              error: function (x, t, m) {
                console.log(x.responseText);
              },
            });
          }
        });
      });
    });
  </script>
 

Index aku

<div class="main-content">
    <section class="section">
      <div class="section-header">
        <h1><%- title %></h1>
        <div class="section-header-breadcrumb">
          <%- include('../../layouts/partial/breadcrumb') %>
        </div>
      </div>
 
      <div class="section-body">
        <h2 class="section-title">Table <%- title %></h2>
        <div class="row">
          <div class="col-12 col-sm-6 col-md-6 col-lg-12">
            <div class="card">
              <div class="card-header">
                <i class="fas fa-user-tie"></i> &nbsp; Daftar tabel
langganan
              </div>
              <div class="card-body">
                <div class="mb-1">
                  <a
                    data-toggle="modal"
                    data-target="#modalForm"
                    href="#"
                    class="btn btn-primary icon-left btn-icon mb-2 btn-add"
                    ><i class="fas fa-plus"></i> Tambah
                  </a>
                </div>
                <div class="row">
                  <div class="col-lg-3">
                    <div class="form-group">
                      <label>Select data:</label>
                      <select class="form-control select-limit">
                        <option value="">-- Limit --</option>
                        <option value="10">10</option>
                        <option value="25">25</option>
                        <option value="50">50</option>
                        <option value="100">100</option>
                      </select>
                    </div>
                  </div>
                  <div class="col-lg-9">
                    <div class="form-group w-50 ml-auto">
                      <label>Pencarian:</label>
                      <input
                        type="text"
                        class="form-control search"
                        placeholder="Pencarian"
                      />
                    </div>
                  </div>
                </div>
                <span id="keterangan">
                  Showing <span id="from"></span> to <span id="to"></span>
of
                  <span id="total"></span> Entries
                </span>
                <div class="table-responsive">
                  <table class="table table-bordered" id="dataTable">
                    <thead>
                      <tr>
                        <th>No.</th>
                        <th>ID client</th>
                        <th>Waktu Mulai</th>
                        <th>Waktu Selesai</th>
                        <th>Aktif</th>
                        <th class="text-center">Action</th>
                      </tr>
                    </thead>
                    <tbody></tbody>
                  </table>
                </div>
              </div>
              <div class="card-footer text-right">
                <div id="pagination"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
 
  <!-- Modal -->
  <div
    class="modal fade"
    id="modalForm"
    tabindex="-1"
    aria-labelledby="modalFormLabel"
    aria-hidden="true"
  >
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title" id="modalFormLabel">Form Langganan</h5>
          <button
            type="button"
            class="close"
            data-dismiss="modal"
            aria-label="Close"
          >
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form
          action="/admin/langganan"
          method="post"
          class="form-submit"
          enctype="multipart/form-data"
        >
          <div class="modal-body">
            <div id="error-form-submit"></div>
            <input type="hidden" name="page" value="add" />
            <input type="hidden" name="id_langganan" value="" />
            <div class="form-group">
              <label for="">Client</label>
              <select name="id_client" class="form-control" id="">
                <option value="">-- Client --</option>
                <%  %>
              </select>
            </div>

            <div class="form-group">
                <label for="">Waktu Mulai</label>
                <input
                  type="datetime-local"
                  class="form-control"
                  placeholder="Waktu mulai"
                  name="waktu_mulai"
                  id="waktu_mulai"
                />
              </div>

              <div class="form-group">
                <label for="">Waktu Selesai</label>
                <input
                  type="datetime-local"
                  class="form-control"
                  placeholder="Waktu selesai"
                  name="waktu_selesai"
                  id="waktu_selesai"
                />
              </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-
dismiss="modal">
              <i class="fas fa-window-close"></i> Close
            </button>
            <button type="button" class="btn btn-primary btn-submit">
              <i class="fas fa-paper-plane"></i> Simpan
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
 
  <%- include('./script') %>