Tutorial Bagaimana Cara Membuat Multiple Login User Dengan Framework CodeIgniter
Software Engineer | Blogger | Creator of RubyPedia.com
6 April 2019

Hallo teman-teman developer, pada kesempatan kali ini saya akan berbagi tentang bagaimana cara membuat login multi level atau dengan hak akses yang berbeda di framework codeigniter.

Jika sebelumnya saya sudah pernah membagikan tutorial membuat login session di framework codeigniter, maka di tutorial kali ini saya akan melanjutkan dengan memberikan hak akses atau level yang berbeda pada setiap user.

Karena banyak sekali dari teman-teman yang request atau meminta dibuatkan artikel tentang multi level user di codeigniter, maka kita akan memulai belajar tentang itu di artikel ini.

Oke langsung saja kita mulai, Pertama teman-teman bisa mengunduh framework codeigniter di situs resminya di www.codeigniter.com, setelah berhasil mengunduhnya kita akan mendapatkan frameowrk codeigniter dengan format zip.

Silahkan teman-teman extract dan taruh di folder C:/XAMPP/htdocs/ (jika kalian menggunakan XAMPP). Silahkan rename hasil extract dari framework codeigniter misal dengan nama login-level-ci.

Sebelumnya saya akan menjelaskan tentang pembuatan database dan coloumn tabel yang akan kita gunakan.

Pertama, teman-teman buka phpmyadmin, biasanya di http://localhost/phpmyadmin. setelah berhasil terbuka, silahkan buat database baru dengan nama db_login_level, atau bisa lihat gambar dibawah ini.

Setelah database berhasil terbuat, silahkan buat sebuah tabel baru dengan nama tbl_users dengan 5 coloumn, kurang lebih seperti gambar dibawah ini.

Setelah berhasil terbuat, maka akan tampil isian dari coloumn-coloumn, dan silahkan isi seperti pada gambar dibawah ini.

Penjelasan dari isian-isian berikut kurang lebih seperti berikut ini.

  1. ada colom dengan id_user, coloumn ini digunakan sebagai primary key / perwakilan dari sebuah tabel, jadi disini kita isikan dengan tipe data INT atau integer dengan value 11 dan kita jadikan sebagai primary.

  2. pada isian kedua ada coloumn dengan nama username, pada kolom ini nantinya kita gunakan sebagai salah satu cridensial dari login kita, pada coloumn ini kita berikan tipe dana VARCHAR dengan value 50.

  3. pada coloumn yang ketiga ada yang namanya password, pada coloumn ini kita berikan tipe data VARCHAR juga dengan value 50, sama seperti username.

  4. dan yang ke 4 ini adalah coloumn nama_user yang berfungsi menyimpan nama user yang sedang login, disini kita berikan tipe data VARCHAR dan value 100.

  5. yang kelima ini adalah coloumn role, atau bisa disebut hak akses, jadi coloumn ini nanti yang akan menentukan kita, apakah user yang login itu admin ataukah user biasa, pada coloumn ini kita berika tipe data ENUM, kurang lebih seperti pada gambar dibawah ini.

Setelah semuanya selesai, silahkan klik simpan/go, maka akan terbuat sebuah tabel baru dengan nama tbl_users.

Setalah tabel berhasil terbuat, sekarang kita akan mengisi tabel tesebut, silahkan klik menu insert pada menu tabel di phpmyadmin, atau teman-teman bisa lihat pada gambar dibawah ini.

CATATAN: ketika kita memasukkan password, jangan lupa untuk function pada password kita rubah menjadi MD5. Jika berhasil kita akan melihat kurang lebih seperti berikut ini.

atau teman-teman bisa menggunakan script ini, dan pastekan di menu SQL pada phpmyadmin, berikut script SQLnya.

-- phpMyAdmin SQL Dump
-- version 4.8.5
-- https://www.phpmyadmin.net/
--
-- Host: localhost
-- Generation Time: Apr 06, 2019 at 11:44 AM
-- Server version: 5.7.25
-- PHP Version: 7.2.9

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";

/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `db_login_level`
--

-- --------------------------------------------------------

--
-- Table structure for table `tbl_users`
--

CREATE TABLE `tbl_users` (
  `id_user` int(11) NOT NULL,
  `username` varchar(50) NOT NULL,
  `password` varchar(50) NOT NULL,
  `nama_user` varchar(100) NOT NULL,
  `role` enum('admin','user') NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Dumping data for table `tbl_users`
--

INSERT INTO `tbl_users` (`id_user`, `username`, `password`, `nama_user`, `role`) VALUES
(1, 'admin', '21232f297a57a5a743894a0e4a801fc3', 'Fika Ridaul Maulayya', 'admin'),
(2, 'user', 'ee11cbb19052e40b07aac0ca060c23ee', 'Indah Permata Sari', 'user');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `tbl_users`
--
ALTER TABLE `tbl_users`
  ADD PRIMARY KEY (`id_user`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `tbl_users`
--
ALTER TABLE `tbl_users`
  MODIFY `id_user` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=3;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

Jika berhasil, kalian akan menemukan hasil kurang lebih seperti ini.

Oke sampai disini pembahasan tentang pembuatan database dan tabelnya, sekarang kita akan masuk ke framework codeigniternya dan coding-codingnya.

Jadi sebelumnya kita sudah berhasil extract codeigniter dan kita sudah taruh di folder htdocs, silahkan buka project kita menggunakan text editor, seperti sublime text, notepad ++, atau yang lainnya.

Untuk pertama kita lakukan konfigurasi awal untuk codeigniter, seperti mengatur base_url, form, form validasi, helper dan lain-lain.

Pertama, buka file config.php di folder application/config, kemudia rubah kode berikut ini:

$config['base_url'] = "";

Menjadi seperti berikut ini:

$config['base_url'] = "http://".$_SERVER['HTTP_HOST'].
str_replace(basename($_SERVER['SCRIPT_NAME']),"",$_SERVER['SCRIPT_NAME']);

Buka file autoload.php di folder application/config/, dan ubah beberapa konfigurasi seperi ini.

Cari variabel ini

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

Ubah menjadi seperti ini

$autoload['libraries'] = array('database', 'session', 'form_validation');

Selanjutnya cari variabel

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

Ubah menjadi seperti ini

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

Selanjutnya berhasil semuanya, kita buka file database.php di folder application/config/. dan kita ubah beberapa konfigurasi database menjadi seperti berikut ini.

$active_group = 'default';
$query_builder = TRUE;

$db['default'] = array(
    'dsn'   => '',
    'hostname' => 'localhost',
    'username' => 'root',
    'password' => '',//kita kosongin
    'database' => 'db_login_level', //sesuai nama database yang sudah kita buat sebelumnya
    'dbdriver' => 'mysqli',
    'dbprefix' => '',
    'pconnect' => FALSE,
    'db_debug' => (ENVIRONMENT !== 'production'),
    'cache_on' => FALSE,
    'cachedir' => '',
    'char_set' => 'utf8',
    'dbcollat' => 'utf8_general_ci',
    'swap_pre' => '',
    'encrypt' => FALSE,
    'compress' => FALSE,
    'stricton' => FALSE,
    'failover' => array(),
    'save_queries' => TRUE
);

Setelah konfigurasi berhasil semua, mari kita memulai untuk coding, pada artikel membuat login multi level dengan codeigniter ini, ada beberapa file yang akan kita buat dan bahas, berikut beberapa file yang akan kita siapkan.

CONTROLLER

  • Login.php
  • admin/Dashboard.php
  • user/Dashboard.php

MODEL

  • Admin.php

VIEWS

  • login.php
  • admin/dashboard.php
  • user/dashboard.php

Mari kita buat file-file yang sudah kita list diatas satu-persatu, untuk pertama kita buat sebuah controller baru dengan nama Login.php di folder application/controllers/, untuk nama file perlu kita perhatikan untuk penamaan file huruf awal harus dengan capital atau huruf besar. Dan silahkan masukkan kode berikut ini di dalam file Login.php

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Login extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        //load library form validasi
        $this->load->library('form_validation');
        //load model admin
        $this->load->model('admin');
    }

    public function index()
    {

            if($this->admin->is_logged_in())
            {
                //jika memang session sudah terdaftar, maka redirect ke halaman dahsboard
                redirect("dashboard");

            }else{

                //jika session belum terdaftar

                //set form validation
                $this->form_validation->set_rules('username', 'Username', 'required');
                $this->form_validation->set_rules('password', 'Password', 'required');

                //set message form validation
                $this->form_validation->set_message('required', '<div class="alert alert-danger" style="margin-top: 3px">
                    <div class="header"><b><i class="fa fa-exclamation-circle"></i> {field}</b> harus diisi</div></div>');

                //cek validasi
                if ($this->form_validation->run() == TRUE) {

                //get data dari FORM
                $username = $this->input->post("username", TRUE);
                $password = MD5($this->input->post('password', TRUE));

                //checking data via model
                $checking = $this->admin->check_login('tbl_users', array('username' => $username), array('password' => $password));

                //jika ditemukan, maka create session
                if ($checking != FALSE) {
                    foreach ($checking as $apps) {

                        $session_data = array(
                            'user_id'   => $apps->id_user,
                            'user_name' => $apps->username,
                            'user_pass' => $apps->password,
                            'user_nama' => $apps->nama_user,
                            'role'      => $apps->role
                        );
                        //set session userdata
                        $this->session->set_userdata($session_data);

                        //redirect berdasarkan level user
                        if($this->session->userdata("role") == "admin"){
                            redirect('admin/dashboard/');
                        }else{
                            redirect('user/dashboard/');
                        }

                    }
                }else{

                    $data['error'] = '<div class="alert alert-danger" style="margin-top: 3px">
                        <div class="header"><b><i class="fa fa-exclamation-circle"></i> ERROR</b> username atau password salah!</div></div>';
                    $this->load->view('login', $data);
                }

            }else{

                $this->load->view('login');
            }

        }

    }
}

Selanjutnya kita buat file Dashboard.php untuk level admin silahkan buat sebuah folder baru dengan nama admin di dalam folder controllers jadi kurang lebih akan menjadi seperti ini application/admin/Dashboard.php, dan silahkan file Dashboard.php kita masukkan kedalam folder admin yang sudah barusan kita buat. Dan masukkan kode berikut ini.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Dashboard extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        //load model admin
        $this->load->model('admin');
        //cek session dan level user
        if($this->admin->is_role() != "admin"){
            redirect("login/");
        }
    }

    public function index()
    {

        $this->load->view("admin/dashboard");       

    }

    public function logout()
    {
        $this->session->sess_destroy();
        redirect('login');
    }

}

Sama seperti tahap sebelumnya silahkan buat folder di dalam folder controllers dangan nama user dan didalam folder user kita buat file dengan nama Dashboard.php, jadi kurang lebih strukturnya menjadi seperti berikut ini application/user/Dashboard.php, setelah itu kita masukkan kode untuk kode untuk Dashboard.php user, berikut kodenya.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Dashboard extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        //load model admin
        $this->load->model('admin');
        //cek session dan level user
        if($this->admin->is_role() != "user"){
            redirect("login/");
        }
    }

    public function index()
    {

        $this->load->view("user/dashboard");            

    }

    public function logout()
    {
        $this->session->sess_destroy();
        redirect('login');
    }

}

Setelah semua file dan coding untuk controller selesai, kita selanjutnya akan membuat sebuah Model baru, buatlah sebuah file baru dengan nama Admin.phpdi folder application/models/ dan masukkan coding berikut ini.

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Admin extends CI_Model
{
    //fungsi cek session logged in
    function is_logged_in()
    {
        return $this->session->userdata('user_id');
    }

    //fungsi cek level
    function is_role()
    {
        return $this->session->userdata('role');
    }

    //fungsi check login
    function check_login($table, $field1, $field2)
    {
        $this->db->select('*');
        $this->db->from($table);
        $this->db->where($field1);
        $this->db->where($field2);
        $this->db->limit(1);
        $query = $this->db->get();
        if ($query->num_rows() == 0) {
            return FALSE;
        } else {
            return $query->result();
        }
    }
}

Setelah model juga selesai, terakhir kita buat beberapa file views di folder application/views.

Pertama buat sebuah file dengan nama login.phpdi dalam folder application/views, dan masukkan cding berikut ini.

<html>
<head>
    <title>Login - CodeIgniter</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <style>
        .form-signin
        {
            max-width: 330px;
            padding: 15px;
            margin: 0 auto;
        }
        .form-signin .form-signin-heading, .form-signin .checkbox
        {
            margin-bottom: 10px;
        }
        .form-signin .checkbox
        {
            font-weight: normal;
        }
        .form-signin .form-control
        {
            position: relative;
            font-size: 16px;
            height: auto;
            padding: 10px;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
        }
        .form-signin .form-control:focus
        {
            z-index: 2;
        }
        .form-signin input[type="text"]
        {
            margin-bottom: -1px;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
        }
        .form-signin input[type="password"]
        {
            margin-bottom: 10px;
            border-top-left-radius: 0;
            border-top-right-radius: 0;
        }
        .account-wall
        {
            margin-top: 20px;
            padding: 40px 0px 20px 0px;
            background-color: #f7f7f7;
            -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
            -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
            box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
        }
        .login-title
        {
            color: #555;
            font-size: 18px;
            font-weight: 400;
            display: block;
        }
        .profile-img
        {
            width: 96px;
            height: 96px;
            margin: 0 auto 10px;
            display: block;
            -moz-border-radius: 50%;
            -webkit-border-radius: 50%;
            border-radius: 50%;
        }
        .need-help
        {
            margin-top: 10px;
        }
        .new-account
        {
            display: block;
            margin-top: 10px;
        }
    </style>
</head>
<body>
<div class="container" style="margin-top: 50px">
    <div class="row">
        <div class="col-sm-6 col-md-4 col-md-offset-4">
            <h1 class="text-center login-title">Masuk Administrator</h1>
            <?php if(isset($error)) { echo $error; }; ?>
            <div class="account-wall">
                <img class="profile-img" src="https://lh5.googleusercontent.com/-b0-k99FZlyE/AAAAAAAAAAI/AAAAAAAAAAA/eu7opA4byxI/photo.jpg?sz=120"
                    alt="">    
                <form class="form-signin" method="POST" action="<?php echo base_url() ?>index.php/login">
                <div class="form-group">
                    <input type="text" class="form-control" name="username" placeholder="Masukkan Username Anda" autofocus>
                    <?php echo form_error('username'); ?>
                </div>
                <div class="form-group">
                    <input type="password" name="password" class="form-control" placeholder="Masukkan Password Anda">
                    <?php echo form_error('password'); ?>
                </div>

                <button class="btn btn-lg btn-primary btn-block" name="btn-login" id="btn-login" type="submit">
                    Masuk</button>

                <label class="checkbox pull-left">
                    <input type="checkbox" value="remember-me">
                    Ingatkan Saya
                </label>
                <a href="#" class="pull-right need-help">Butuh bantuan? </a><span class="clearfix"></span>
                </form>
            </div>
            <a href="#" class="text-center new-account">Buat Akun </a>
            <div id="error" style="margin-top: 10px"></div>
        </div>
    </div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
</body>
</html>

Selanjutnya buat sebuah file dashboard.phpuntuk admin, buat folder admin didalam folder application/views/ dan didalam folder admin kita buat sebuah file dengan nama dashboard.php dan masukkan coding berikut ini.


<!DOCTYPE html>
<html>
<head>
    <title> Dashboard - Login CodeIgniter & Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Login CodeIgniter & Bootstrap</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <div class="navbar-form navbar-right">
                <a href="<?php echo base_url() ?>index.php/admin/dashboard/logout" type="submit" class="btn btn-success"><i class="fa fa-sign-out"></i> Logout</a>
            </div>
      </div>
    </nav>
<div class="container" style="margin-top: 80px">
    <div class="row">
        <div class="col-md-3">
            <div class="list-group">
              <a href="#" class="list-group-item active" style="text-align: center;background-color: black;border-color: black">
                ADMINISTRATOR
              </a>
              <a href="dashboard.php" class="list-group-item"><i class="fa fa-dashboard"></i> Dashboard</a>
              <a href="#" class="list-group-item"><i class="fa fa-book"></i> Blog</a>
              <a href="#" class="list-group-item"><i class="fa fa-folder"></i> Kategori</a>
              <a href="#" class="list-group-item"><i class="fa fa-comments-o"></i> Komentar</a>
              <a href="logout.php" class="list-group-item"><i class="fa fa-sign-out"></i> Logout</a>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-dashboard"></i> Dashboard</h3>
              </div>
              <div class="panel-body">
                Selamat Datang <b><?php echo $this->session->userdata("user_nama") ?></b> di halaman Administrator System
              </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Terakhir kita buat juga view untuk dashboard user, buatlah sebuah folder baru didalam folder application/views dengan nama user, dan didalam folder user buatlah filde dengan nama dashboard.php dan masukkan coding berikut ini.


<!DOCTYPE html>
<html>
<head>
    <title> Dashboard - Login CodeIgniter & Bootstrap</title>
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Login CodeIgniter & Bootstrap</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <div class="navbar-form navbar-right">
                <a href="<?php echo base_url() ?>index.php/user/dashboard/logout" type="submit" class="btn btn-success"><i class="fa fa-sign-out"></i> Logout</a>
            </div>
      </div>
    </nav>
<div class="container" style="margin-top: 80px">
    <div class="row">
        <div class="col-md-3">
            <div class="list-group">
              <a href="#" class="list-group-item active" style="text-align: center;background-color: black;border-color: black">
                USER
              </a>
              <a href="dashboard.php" class="list-group-item"><i class="fa fa-dashboard"></i> Dashboard</a>
              <a href="#" class="list-group-item"><i class="fa fa-book"></i> Blog</a>
              <a href="#" class="list-group-item"><i class="fa fa-folder"></i> Kategori</a>
              <a href="#" class="list-group-item"><i class="fa fa-comments-o"></i> Komentar</a>
              <a href="logout.php" class="list-group-item"><i class="fa fa-sign-out"></i> Logout</a>
            </div>
        </div>
        <div class="col-md-9">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h3 class="panel-title"><i class="fa fa-dashboard"></i> Dashboard</h3>
              </div>
              <div class="panel-body">
                Selamat Datang <b><?php echo $this->session->userdata("user_nama") ?></b> di halaman User System
              </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>

Oke teman-teman, setelah semua selesai, kita bisa langsunung menguji aplikasi login multi level di codeigniter ini dengan mengakses di address bar / url pada browser http://localhost/login-level-ci. Kurang lebih tampilannya akan seperti berikut ini.

Blog ini telah dibaca sebanyak 11.808 kali
Login Login Multi User Multi User CodeIgniter Login Level CodeIgniter

Sekilas Tentang Penulis

Fika Ridaul Maulayya
Software Engineer | Blogger | Creator of RubyPedia.com

KOMENTAR

blog comments powered by Disqus