Tutorial Codeigniter #4: Multiple Login dan Hak Akses dengan Jquery

Halo coder, episode ke 4 kali ini akan membahas tutorial multiple login dan hak akses dengan jquery dengan Codeigniter.

Selama ini banyak programmer yang menggunakan hak ases pada multiple login menggunakan session dan system if else. Namun tidak banyak programmer yang menggunakan jquery sebagai alat untuk memberikan hak ases pada system.

Misalnya ada 3 level user, yaitu:

1. Super Admin
2. Admin
3. User

Asumsinya, Super Admin bisa melakukan Lihat, Detail, Edit, Create dan Delete. Admin hanya bisa Lihat, Create, Edit dan Detail tanpa Delete. Sedangkan User hanya diberikan hak akses berupa Lihat saja.

Nah, bagaimana dengan jquery bisa melakukan kemampuan di atas menggunakan Codeigniter?

Oke, tanpa berlama-lama mari kita mulai saja proses codingnya.

Step 1 – Persiapan

Sebelum kita mulai ngoding, sebaiknya kita siapkan perangkat / softwarenya terlebih dahulu, yaitu:

1. XAMPP
2. File Codeigniter
3. Visual Code

Step 2 – Menyiapkan File Codeigniter

Selesai download file codeigniter, silahkan pindahkan file codeigniter yang sudah di download ke direktori C:/xampp/htdocs (kami asumsikan coder menginstall xampp di direktori C, jika di D atau E tinggal menyesuaikan saja).

Lalu klik kanan pada file codeigniter yang bertipe .zip dan pilih extract here.

Setelah berhasil melakukan extract, kami akan merename nama filenya menjadi ci_jquery_hak_akses. (Anda boleh memberikan nama sesuai selera).

Oke! File codeigniter telah siap.

Step 3 – Menyiapkan Database

Kami asumsikan coder menggunakan Visual Code seperti pada tutorial ini.

Buka visual code, lalu pilih file -> klik open folder.

Lalu pilih folder codeigniter yang tadi sudah direname.

Klik Select Folder.

Kemudian tambahkan ci_jquery_hak_akses pada kolom database, username diisi dengan root dan password kosongkan saja.

Rekomendasi: Tutorial Export Data ke PDF dengan Codeigniter

Selanjutnya untuk mengatur database, mari kita buat terlebih dahulu database ci_jquery_hak_akses di phpmyadmin (pastikan coder sudah mengaktifkan apache dan mysql di control panel xampp).

Klik tombol Create

Lalu buat table users yang isinya:

CREATE TABLE users(
    id BIGINT PRIMARY KEY AUTO_INCREMENT NOT NULL,
    name varchar(50) NOT NULL,
    email varchar(150) NOT NULL,
    password varchar(255) NOT NULL,
    level ENUM('SuperAdmin','Admin','User'));

Buat table category yang isinya:

CREATE TABLE category(
    id BIGINT PRIMARY KEY AUTO_INCREMENT NOT NULL,
    name varchar(50) NOT NULL,
    status ENUM('Active','Inactive'));

Hasilnya:

Setelah selesai membuat table, sekarang tinggal menghubungkannya ke file codeigniter yang telah dibuat sebelumnya.

Silahkan coder buka file database.php di directory application/config/database.php

Cari baris:

'hostname' => 'localhost',
'username' => '',
'password' => '',
'database' => '',

Ubah menjadi:

'hostname' => 'localhost',
'username' => 'root',
'password' => '',
'database' => 'ci_jquery_hak_akses',

Selanjutnya perlu diatur untuk mengkonfigurasi database. Silahkan buka file autoload.php di direktori application/config/autoload.php. Pada baris ke ke 61, coder akan melihat:

$autoload['libraries'] = array();

Ubah menjadi:

$autoload['libraries'] = array(‘database’);

Oke, sampai di sini telah selesai mengatur databasenya.

Step 4 – Mengatur Konfigurasi

Sebelum coder membuat aplikasi, ada beberapa hal yang perlu disiapkan. Misalnya base_url, url helper dan lain-lain. Mari coba dengan satu per satu.

Konfigurasi base_url:

Tujuan mengatur base_url agar memudahkan coder dalam menggunakan site url tanpa harus pusing menulis link yang panjang.

Contohnya ketika link http://localhost/ci_jquery_hak_akses/index.php/dashboard bisa diperpendek menjadi: <?=base_url(‘index.php/dashboard’) ?>

Lebih singkat, bukan?

Sekarang mari buka file config.php di direktori applications/config/config.php

Cari baris ke 26 yang berisi:

$config['base_url'] = '';

Ubah menjadi:

$config['base_url'] = 'http://localhost/ci_jquery_hak_akses/index.php';

Konfigurasi url helper:

Agar sub bab 4.1. bisa berjalan dengan baik, maka kita perlu mengaktifkan url helper yang telah disediakan codeigniter.

Caranya cari baris ke 92 pada autoload.php yang berisi:

$autoload['helper'] = array();

Ubah menjadi:

$autoload['helper'] = array(‘url’);

Step 5 – Membuat Controller Auth

Auth digunakan untuk menangani proses login dan register.

Silahkan buat Auth.php dan simpan di direktori application/controllers/Auth.php, berikut kodenya:

<?php

class Auth extends CI_Controller

{
    public function __construct()
    {
        parent::__construct();
        $this->load->model('auth_model');
        $this->load->library('form_validation');
        $this->load->library('session');
    }

    public function index()
    {
        $this->load->view('auth/login');
    }

    public function loginForm()
    {
        $this->form_validation->set_rules('email', 'Email', 'required');
        $this->form_validation->set_rules('password', 'Password', 'required');

        if ($this->form_validation->run() == FALSE) {

            $errors = $this->form_validation->error_array();
            $this->session->set_flashdata('errors', $errors);
            $this->session->set_flashdata('input', $this->input->post());
            redirect('index.php/auth');
        
        } else {

            $email = htmlspecialchars($this->input->post('email'));
            $pass = htmlspecialchars($this->input->post('password'));
            $cek_login = $this->auth_model->cek_login($email);  

            if($cek_login == FALSE)
            {

                $this->session->set_flashdata('error_login', 'Email yang Anda masukan tidak terdaftar.');
                redirect('index.php/auth');

            } else {

                if(password_verify($pass, $cek_login->password)){
                    $this->session->set_userdata('id', $cek_login->id);
                    $this->session->set_userdata('name', $cek_login->name);
                    $this->session->set_userdata('email', $cek_login->email);
                    $this->session->set_userdata('level', $cek_login->level); 

                    redirect('/category');

                } else {

                    $this->session->set_flashdata('error_login', 'Email atau password yang Anda masukan salah.');
                    redirect('auth');

                }
            }
        }
    }

    public function register()
    {

        $this->load->view('auth/register');

    }

    public function registerForm()

    {

        $this->form_validation->set_rules('name', 'Nama', 'required');
        $this->form_validation->set_rules('email', 'Email', 'required|is_unique[users.email]|valid_email');
        $this->form_validation->set_rules('password', 'Password', 'required|trim');
        $this->form_validation->set_rules('confrim_password', 'Konfirmasi Password', 'required|trim|matches[password]');
        $this->form_validation->set_rules('level', 'Level', 'required');

        if ($this->form_validation->run() == FALSE) {

            $errors = $this->form_validation->error_array();
            $this->session->set_flashdata('errors', $errors);
            $this->session->set_flashdata('input', $this->input->post());
            redirect('auth/register');

        } else {

            $name = $this->input->post('name');
            $email = $this->input->post('email');
            $password = $this->input->post('password');
            $pass = password_hash($password, PASSWORD_DEFAULT);
            $level = $this->input->post('level');

            $data = [
                'name' => $name,
                'email' => $email,
                'password' => $pass,
                'level' => $level
            ];

            $insert = $this->auth_model->register("users", $data);

            if($insert){

                $this->session->set_flashdata('success_login', 'Sukses, Anda berhasil register. Silahkan login sekarang.');
                redirect('auth');

            }
        }
    }

    public function logout()
    {
        $this->session->sess_destroy();
        echo '<script>
            alert("Sukses! Anda berhasil logout."); 
            window.location.href="'.base_url('index.php/auth').'";
            </script>';
    }
}

Step 6 – Membuat Controller Category

Pada module kategori nantinya akan dipisahkan mana yang bisa hapus, edit, tambah, detail ataupun create.

Berikut Kodenya:

<?php

class Category extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        $this->load->model('category_model');
        $this->cek_status();
    }

    public function index()
    {
        $data['categories'] = $this->category_model->get('category');
        $this->load->view('category/index', $data);
    }
?>

Step 7 – Membuat Fitur Cek Hak Akses di Controller

Pada kesempatan kali ini akan sedikit menambahkan sebuah function yang berguna apakah si user udah melakukan login atau belum. Jika belum pengguna akan diarahkan ke halaman login dan jika sudah pengguna akan diarahkan ke Category.

Langsung saja buka file Controller.php yang ada di direktori system/core/Controller.php

Tambahkan kode di bawah ini tepat dibawah function &get_instance()

Berikut codenya:

public function cek_status()
{
    $this->load->library('session');
    if($this->session->userdata('id') == NULL){
        $this->session->set_flashdata('error_login', 'Silahkan login terlebih dahulu untuk mengakses data.');
        redirect('auth');
    }
}

Step 9 – Membuat Auth Model

Berikut codenya:

<?php

class Auth_model extends CI_Model
{

    public function cek_login($email)
    {

        $hasil = $this->db->where('email', $email)->limit(1)->get('users');
        if($hasil->num_rows() > 0){
            return $hasil->row();
        } else {
            return array();
        }
    }

    public function register($table, $data)
    {
        return $this->db->insert($table, $data);
    }
}
?>

Step 10 – Membuat Model Category

Berikut codenya:

<?php

class Category_model extends CI_model
{
    public function get($table)
    {
        $result = $this->db->get($table);
        return $result;
    }
}
?>

Step 11 – Membuat Halaman View Login dan Register

Silahkan buat folder auth di direktori application/views terlebih dahulu.

Sekarang buatlah login.php. Berikut codenya:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">   <meta name="description" content="Tutorial Codeigniter Membuat Hak Akses Menggunakan Jquery dan Mysql">
    <meta name="author" content="Ilmucoding">
    <title>Login</title>   <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sign-in/">
    <!-- Bootstrap core CSS -->   <link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" rel="stylesheet">
  </head>
  <body class="text-center">
    <form class="form-signin" action="<?= base_url('index.php/auth/loginForm') ?>" method="post">
      <h1 class="h3 mb-3 font-weight-normal">Please Sign In</h1>
        <?php
        $errors = $this->session->flashdata('errors');
        if(!empty($errors)){
        ?>
          <div class="row">
              <div class="col-md-12">
              <div class="alert alert-danger text-center">
                  <?php foreach($errors as $key=>$error){ ?>
                  <?php echo "$error<br>"; ?>
                  <?php } ?>
              </div>
              </div>
          </div>
        <?php 
        }
        if($msg = $this->session->flashdata('error_login')){ ?>
          <div class="row">
              <div class="col-md-12">
                <div class="alert alert-danger text-center">
                    <?= $msg ?>
                </div>
              </div>
          </div>
        <?php } else if($msg = $this->session->flashdata('success_login')){ ?>
          <div class="row">
              <div class="col-md-12">
                <div class="alert alert-success text-center">
                    <?= $msg ?>
                </div>
              </div>
          </div>
        <?php } ?>
      <input name="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>     <input name="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
      <div class="checkbox mb-3">
        <label>
          <input type="checkbox" value="remember-me"> Remember me
        </label>
      </div>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      <a href="<?= base_url('index.php/auth/register') ?>" class="float-left mt-1">Register</a>
      <p class="mt-5 mb-3 text-muted">&copy; 2017-2019</p>
    </form>
  </body>
</html>

Lalu buat register.php. Berikut codenya:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">   <meta name="description" content="Tutorial Codeigniter Membuat Hak Akses Menggunakan Jquery dan Mysql">
    <meta name="author" content="Ilmucoding">
    <title>Register</title> 
    <!-- Bootstrap core CSS -->   <link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Custom styles for this template -->
    <link href="https://getbootstrap.com/docs/4.0/examples/sign-in/signin.css" rel="stylesheet">
  </head>
  <body class="text-center">
    <form class="form-signin" action="<?= base_url('index.php/auth/registerForm') ?>" method="post">
      <h1 class="h3 mb-3 font-weight-normal">Registration</h1>
        <?php
        $errors = $this->session->flashdata('errors');
        if(!empty($errors)){
        ?>
          <div class="row">
              <div class="col-md-12">
              <div class="alert alert-danger text-center">
                  <?php foreach($errors as $key=>$error){ ?>
                  <?php echo "$error<br>"; ?>
                  <?php } ?>
              </div>
              </div>
          </div>
        <?php 
        }
        if($msg = $this->session->flashdata('error_login')){ ?>
          <div class="row">
              <div class="col-md-12">
                <div class="alert alert-danger text-center">
                    <?= $msg ?>
                </div>
              </div>
          </div>
        <?php } ?>
      <input name="name" type="text" class="form-control" placeholder="Full Name" required autofocus>
      <div style="margin-top:10px"></div>
      <input name="email" type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
      <div style="margin-top:10px"></div>
     <input name="password" type="password" id="inputPassword" class="form-control" placeholder="Password" required>
      <div style="margin-top:10px"></div>     <input name="confrim_password" type="password" id="inputPassword" class="form-control" placeholder="Confrim Password" required>
      <select name="level" id="" class="form-control" autofocus style="height: 45px;">
          <option value="">Choose Level</option>
          <option value="Admin">Admin</option>
          <option value="SuperAdmin">Super Admin</option>
          <option value="User">User</option>
      </select>
      <br>
      <button class="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      <a href="<?= base_url('index.php/auth') ?>" class="float-left mt-1">Login</a>
      <p class="mt-5 mb-3 text-muted">&copy; 2017-2019</p>
    </form>
  </body>
</html>

Step 12 – Membuat Halaman Index Category

Buat folder category di direktori application/views, lalu buat file index.php.

Berikut codenya:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">   <meta name="description" content="Tutorial Codeigniter Membuat Hak Akses Menggunakan Jquery dan Mysql">
    <meta name="author" content="Ilmucoding">
    <title>List Category</title>   <link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sign-in/">
    <!-- Bootstrap core CSS -->
    <link href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css" rel="stylesheet">   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="container mt-5">
<div class="col-md-12 justify-align-center">
    <!-- Main content -->
    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-12">
                    <div class="card">
                        <div class="card-header">
                            List all Category
                            <div class="float-right">
                                <a href="<?= base_url('index.php/auth/logout') ?>" class="btn btn-primary">Logout</a>
                            </div>
                        </div>
                        <div class="card-body">
                            
                            <div class="table-responsive">
                                <table class="table table-bordered table-hover">
                                    <thead>
                                        <tr>
                                            <th style="width: 20px;">No</th>
                                            <th>Nama</th>
                                           <th style="width: 30%;">Status</th>
                                           <th style="width: 25%;" id="btn-action">Action</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <?php
                                        $no = 1;
                                        foreach($categories->result() as $data) { ?>
                                        <tr>
                                            <td><?= $no++ ?></td>
                                            <td><?= $data->name ?></td>
                                            <td><?= $data->status ?></td>
                                            <td class="td-btn">
                                                <a href="" class="btn btn-info">
                                                    Detail
                                                </a>
                                                <a href="" class="btn btn-success">
                                                    Edit
                                                </a>
                                                <a href="" class="btn btn-danger">
                                                    Hapus
                                                </a>
                                            </td>
                                        </tr>
                                        <?php } ?>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.row -->
        </div><!-- /.container-fluid -->
    </div>
    <!-- /.content -->
</div>
</div>
<script>

<?php if($this->session->userdata('level') == "Admin"){ ?>

  $(document).ready(function(){

    $(".btn-danger").remove();

  });

<?php } else if($this->session->userdata('level') == "User"){ ?>

  $(document).ready(function(){

    $("#btn-action").remove();

    $(".td-btn").remove();

  });

<?php } else {}; ?>

</script>
</body>
</html>

Pengujian

Berikut tampilan multiple login dan hak akses dengan jQuery dan Codeigniter jika login sebagai Super Admin: (Super Admin mampu mendapatkan hak akses penuh)

Berikut tampilan aplikasi jika login sebagai Admin: (Admin hanya hampu edit dan detail tetapi tidak mampu menghapus)

Berikut tampilan aplikasi jika login sebagai User: (User tidak mampu melakukan apa-apa selain lihat saja)

Kesimpulan

Ketimbang coder membuat script if else yang lumayan memakan waktu, ada baiknya mencoba dengan jquery yang lebih simple.

Kami sadari, mungkin masih banyak yang perlu diperbaiki. Kemungkinan, coder mampu mengembangkannya. Aamiin.

Demikianlah tutorial cara membuat fitur multiple login dan hak akses dengan jquery dan mysql di framework codeigniter.

Semoga bermanfaat.

Related posts:

Tutorial CRUD Codeigniter 4 dengan Firebase dan Bootstrap

Tutorial Cara Upload Project Codeigniter 4 ke Hosting

Tutorial Lengkap Cara Membuat Slug di Codeigniter 4