Default page

Viewing : list.php

<!-- Content Header (Page header) -->
<div class="content-header">
  <div class="container-fluid">
    <div class="row mb-2">
      <div class="col-sm-6">
        <h1 class="m-0"><?=$title?></h1>
      </div><!-- /.col -->
      <div class="col-sm-6">
        <ol class="breadcrumb float-sm-right">
          <li class="breadcrumb-item"><a href="#">Dashboard</a></li>
          <li class="breadcrumb-item active"><?=$li_1?></li>
        </ol>
      </div><!-- /.col -->
    </div><!-- /.row -->
  </div><!-- /.container-fluid -->
</div>
<!-- /.content-header -->

<!-- Main content -->
<section class="content">
  <div class="container-fluid">
    <div class="row">
        <div class="col-12">
          <div class="card">
            <div class="card-header">
              <div class="card-tools">
                <a class="btn btn-sm btn-primary" onclick="add(0)">Tambah</a>
              </div>
              
            </div>
            <div class="card-body">
              <table id="example1" class="table table-bordered table-striped">
                <thead>
                  <tr>
                    <th>No</th>
                    <th>Nama</th>
                    <th>Username</th>
                    <th>Level</th>
                    <th>Aksi</th>
                  </tr>
                </thead>
                <tbody>
                  <?php
                    $no =1;
                    foreach ($users as $k) {

                      echo '<tr><td>'.$no++.'</td>';
                      echo '<td>'.esc($k->nama).'</td>';
                      echo '<td>'.esc($k->un).'</td>';
                      echo '<td>'.esc(level($k->level)).'</td>';
                      echo '<td>
                        <a class="btn btn-danger btn-sm" onclick="hapus(`user/delete/'.esc($k->id).'`)">Hapus</a>&nbsp;
                        <a class="btn btn-warning btn-sm" onclick="add(`'.esc($k->id).'`)">Edit</a>&nbsp;
                        <a class="btn btn-primary btn-sm" onclick="reset(`'.esc($k->id).'`)">Reset Password</a>

                      </td></tr>';
                    }
                  ?>
                </tbody>
              </table>
            </div>
            <!-- /.card-body -->
          </div>
        </div>
    </div>
  </div><!-- /.container-fluid -->
</section>
<!-- /.content -->
<div class="modal fade" id="add">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <form class="form-horizontal" method="post" id="form_user">
        <div class="modal-header">
          <h4 class="modal-title">Form <?=$title?></h4>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <div class="modal-body">

          <input type="text" name="data_id" class="d-none" id="data_id">
          <?php 
            echo csrf_field();
            $o['options'] = ['Super Admin', 'Operator', 'Keuangan', 'Wali/Siswa'];
            $o['value'] = [1,2,3,4];
            echo form_text('nama');
            echo form_text('username');
            echo form_password('password');
            echo form_password('konfirmasi password');
            echo form_select('level', $o);
          ?>
        </div>
        <div class="modal-footer justify-content-between">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          <button type="submit" class="btn btn-primary">Save changes</button>
        </div>
      </form>
    </div>
    <!-- /.modal-content -->
  </div>
  <!-- /.modal-dialog -->
</div>
<script type="text/javascript">
  $(function () {
    $("#example1").DataTable({
      "responsive": true, "lengthChange": false, "autoWidth": false,
      "buttons": ["excel", "pdf", "print"]
    }).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
    
    $('.show_pass').on('click', function() {
        var currentType = $('.password_form').attr('type'); 

        if (currentType === 'text') {
            $('.password_form').attr('type', 'password');
        } else {
            $('.password_form').attr('type', 'text');
        }
    });

    $('#form_user').validate({
      rules: {
        username: {
          required: true
        },
        password: {
          required: true,
          minlength: 5
        },
        nama: {
          required: true,
          minlength: 3
        },
        level: {
          required: true,
        },
      },
      messages: {
        username: {
          required: "Please enter a username address"
        },
        password: {
          required: "Please provide a password",
          minlength: "Your password must be at least 5 characters long"
        },
        nama: {
          required: "Please provide a Name",
          minlength: "Your name must be at least 3 characters long"
        },
        konfirmasi_password: {
          required: "Please provide a Password Confirmation",
          minlength: "Your password didn't same"
        },
      },
      errorElement: 'span',
      errorPlacement: function (error, element) {
        error.addClass('invalid-feedback');
        element.closest('.form-group').append(error);
      },

      highlight: function (element, errorClass, validClass) {
        $(element).addClass('is-invalid');
      },

      unhighlight: function (element, errorClass, validClass) {
        $(element).removeClass('is-invalid');
      }

    });

  });

  function add(id){
    $('#data_id').val(id);

    if(id == '0'){
      $('#form_user').attr('action', '<?=base_url('user/add')?>');
      $('#tag_nama').show();
      $('#tag_username').show();
      $('#tag_level').show();
      $('#form_nama').val('');
      $('#form_username').val('');
      $('#form_level').val('');
      $('#tag_password').show();
      $('#tag_konfirmasi_password').show();
    }else{
      $('#tag_nama').show();
      $('#tag_username').show();
      $('#tag_level').show();
      $('#form_user').attr('action', '<?=base_url('user/edit')?>');
      $.ajax({
        url : '<?=base_url('user/get')?>/' + id,
        dataType : 'JSON',
        success : function(d){
          $('#form_nama').val(d.nama);
          $('#form_username').val(d.un);
          $('#form_level').val(d.level);
          $('#tag_password').hide();
          $('#tag_konfirmasi_password').hide();
          console.log(d.nama);
        }
      })
    }

    $('.select2').select2({
      theme: 'bootstrap4'
    })
    $('#add').modal('show');
  }

  function reset(id){
    $('#data_id').val(id);
    $('#form_user').attr('action', '<?=base_url('user/reset')?>');
    $('#tag_nama').hide();
    $('#tag_username').hide();
    $('#tag_level').hide();
    $('#tag_password').show();
    $('#tag_konfirmasi_password').show();
    $('#add').modal('show');
  }
</script>