Login merupakan fitur yang wajib ada di setiap sistem apapun.

Pada sistem informasi modern, login merupakan cara untuk mengamankan data dari pihak yang tidak berwenang.

Login juga merupakan cara untuk membagi hak akses halaman (page) kepada pengguna tertentu.

Didalam sistem login, terdapat session atau token yang digunakan untuk melacak aksi dari pengguna (user). Dengan demikian, hak akses user akan dengan mudah dikelompokkan.

Membuat sistem login dengan codeigniter, terkadang merupakan hal yang sulit bagi sebagai besar pemula.

Lebih sulit lagi jika multilevel yang dimaksud berasal dari table yang berbeda.

Seperti yang saya alami dulunya, membutuhkan waktu yang lama bagi saya untuk dapat membuat sistem login ini agar sesuai dengan yang diharapkan.

Bagaimana meng-set session, mengatur akses untuk setiap function, dan mengatur akses pada menu.

Saya coba googling, akan tetapi tidak ada yang memposting artikel yang cukup lengkap untuk membuat sistem login ini.

Apalagi login multilevel dari tabel yang berbeda seperti yang saya uraikan diatas.

Saya yakin anda juga mengalami hal yang sama dengan saya.

Setelah berjuang cukup lama, akhirnya saya bisa membuat sistem login yang menurut saya sudah cukup sempurna.

Untuk menutupi kegelisahan anda, pada kesempatan kali ini saya akan sharing secara detail bagaimana membuat sistem login multilevel dari tabel yang berbeda menggunakan framework php yaitu codeigniter.

Pada kasus kali ini, saya akan uraikan bagaimana membuat sistem login multilevel dari table yang berbeda dengan codeigniter, bagaimana mengatur hak akses pada menu, dan mengatur hak akses pada setiap function.

Studi kasus yang saya gunakan pada artikel kali ini adalah, login sebagai dosen dan mahasiswa.

Dimana table dosen berbeda dengan table mahasiswa.

Hak akses sebagai dosen saya bagi lagi menjadi dua level, yaitu ada dosen yang berberan sebagi admin dan ada yang akses loginnya hanya sebagi dosen biasa.

Untuk dosen yang memiliki hak akses sebagai admin diberikan level angka 1=Admin, dosen biasa angka 2=dosen, dan level login mahasiswa adalah 3=mahasiswa.

Jika anda masih bingung dengan penjelasan diatas, terus lanjutkan karena anda akan segera mengerti setelah mencobanya sendiri nantinya.

Ok, berikut cara bagaimana membuat login multilevel dari table yang berbeda dengan codeigniter.

 

PERSIAPAN

Sebelum proses pembuatan, ada tahap yang tidak boleh anda lewatkan begitu saja. Yaitu tahap persiapan.

Apa saja yang perlu anda persiapkan?

Berikut listnya:

Codeiginter, jika anda belum memilikinya silahkan download di situs resminya www.codeigniter.com

Jquery, Jika anda belum memilikinya, silahkan download di situs resminya www.jquery.com

Bootstrap, bootstrap ini berfungsi untuk mempercantik tampilan. Jika anda belum memilikinya, silahkan download di situs resminya www.getbootstrap.com

 

#1. Pembuatan Struktur Database dan Table

Berikutnya, yang perlu anda lakukan adalah pembuatan database dan struktur table.

Database, buat database dengan mengeksekusi query berikut:

CREATE DATABASE db_login;

Pada query diatas, anda akan mendapatkan sebuah database dengan nama db_login.

Table, buat dua table yaitu table dosen dan tabel mahasiswa.

Buat Tabel dosen dengan mengeksekusi query berikut:

CREATE TABLE dosen(
nip VARCHAR(15) PRIMARY KEY,
nama VARCHAR(90),
pass VARCHAR(40),
level INT
)ENGINE=INNODB;

Buat Tabel mahasiswa dengan mengeksekusi query berikut:

CREATE TABLE mahasiswa(
nim VARCHAR(15) PRIMARY KEY,
nama VARCHAR(90),
pass VARCHAR(40)
)ENGINE=INNODB;

Insert data pada tabel dosen dengan mengeksekusi query berikut:  

INSERT INTO dosen (nip,nama,pass,LEVEL) VALUES 
('100001','Joko',MD5('123456'),'1'),
('100002','Dasha',MD5('qwerty'),'2');

Insert juga  data pada tabel mahasiswa dengan mengeksekusi query berikut:  

INSERT INTO mahasiswa (nim,nama,pass) VALUES 
('1210158','M Fikri',MD5('123456')),
('1210159','Keysha',MD5('qwerty'));

 

#2. Installasi Codeigniter

Untuk menginstall codeigniter, silahkan extract codeigniter yang sudah di download sebelumnya ke folder www (jika menggunakan wampserver) atau htdocs (jika menggunakan XAMPP).

Kemudian rename (ganti nama) project codeigniter anda sesuai dengan project Anda. Disini saya memberi nama ci_login.

Setelah di extract, buat folder assets sejajar dengan folder application dan system, kemudian sertakan file bootstrap dan jquery didalam folder assets. Sehingga terlihat struktur project kita seperti berikut:

Pada gambar diatas dapat dilihat, bahwa didalam folder assets terdapat folder css dan js.

Didalam folder css, terdapat file bootstrap.css dan didalam folder js, terdapat file bootstrap.js, bootstrap.min.js dan jquery.js.

 

#3. Konfigurasi Codeigniter

Buka application/config/autoload.php atur menjadi seperti berikut:

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

Buka application/config/config.php dan atur menjadi seperti berikut:

$config['base_url'] = 'http://localhost/ci_login/';

Terakhir buka application/config/database.php

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

$db['default'] = array(
        'dsn'   => '',
        'hostname' => 'localhost',
        'username' => 'root',
        'password' => '',
        'database' => 'db_login', //sesuaikan dengan database anda!
        '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
);

 

#4. Buat model dengan nama Login_model.php

Kemudian ketikan kode berikut:

<?php
class Login_model extends CI_Model{
        //cek nip dan password dosen
        function auth_dosen($username,$password){
                $query=$this->db->query("SELECT * FROM dosen WHERE nip='$username' AND pass=MD5('$password') LIMIT 1");
                return $query;
        }

        //cek nim dan password mahasiswa
        function auth_mahasiswa($username,$password){
                $query=$this->db->query("SELECT * FROM mahasiswa WHERE nim='$username' AND pass=MD5('$password') LIMIT 1");
                return $query;
        }

}

 

#5. Buat view dengan nama v_login.php

Kemudian ketikan kode berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Sign In</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Produk By Mfikri.com">
    <meta name="author" content="M Fikri Setiadi">
    <!-- Bootstrap -->
    <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet">
  </head>
  <body>

    <div class="container">
        <div class="col-md-4 col-md-offset-4">
          <form class="form-signin" action="<?php echo base_url().'index.php/login/auth'?>" method="post">
            <h2 class="form-signin-heading">Please sign in</h2>
            <?php echo $this->session->flashdata('msg');?>
            <label for="username" class="sr-only">Username</label>
            <input type="text" id="username" name="username" class="form-control" placeholder="Username" required autofocus>
            <label for="password" class="sr-only">Password</label>
            <input type="password" id="password" name="password" class="form-control" placeholder="Password" required>
            <div class="checkbox">
              <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>
          </form>
        </div>
        </div> <!-- /container -->


    <!-- jQuery-->
    <script src="<?php echo base_url().'assets/js/jquery.js'?>"></script>
    <!-- Bootsrap -->
    <script src="<?php echo base_url().'assets/js/bootstrap.min.js'?>"></script>

  </body>
</html>

View diatas akan membuat sebuah form dengan input username dan password.

 

#6. Buat controller dengan nama Login.php

Kemudian ketikan kode berikut:

<?php
class Login extends CI_Controller{
        function __construct(){
                parent::__construct();
                $this->load->model('login_model');
        }

        function index(){
                $this->load->view('v_login');
        }

        function auth(){
        $username=htmlspecialchars($this->input->post('username',TRUE),ENT_QUOTES);
        $password=htmlspecialchars($this->input->post('password',TRUE),ENT_QUOTES);

        $cek_dosen=$this->login_model->auth_dosen($username,$password);

        if($cek_dosen->num_rows() > 0){ //jika login sebagai dosen
                                                $data=$cek_dosen->row_array();
                        $this->session->set_userdata('masuk',TRUE);
                         if($data['level']=='1'){ //Akses admin
                            $this->session->set_userdata('akses','1');
                            $this->session->set_userdata('ses_id',$data['nip']);
                            $this->session->set_userdata('ses_nama',$data['nama']);
                            redirect('page');

                         }else{ //akses dosen
                            $this->session->set_userdata('akses','2');
                                                                $this->session->set_userdata('ses_id',$data['nip']);
                            $this->session->set_userdata('ses_nama',$data['nama']);
                            redirect('page');
                         }

        }else{ //jika login sebagai mahasiswa
                                        $cek_mahasiswa=$this->login_model->auth_mahasiswa($username,$password);
                                        if($cek_mahasiswa->num_rows() > 0){
                                                        $data=$cek_mahasiswa->row_array();
                                $this->session->set_userdata('masuk',TRUE);
                                                        $this->session->set_userdata('akses','3');
                                                        $this->session->set_userdata('ses_id',$data['nim']);
                                                        $this->session->set_userdata('ses_nama',$data['nama']);
                                                        redirect('page');
                                        }else{  // jika username dan password tidak ditemukan atau salah
                                                        $url=base_url();
                                                        echo $this->session->set_flashdata('msg','Username Atau Password Salah');
                                                        redirect($url);
                                        }
        }

    }

    function logout(){
        $this->session->sess_destroy();
        $url=base_url('');
        redirect($url);
    }

}

 

#7. Buat Sebuah Controller dengan nama Page.php

Controller page ini berfungsi untuk mengatur bagaimana pembagian hak akses dari setiap function.

Adapun kode dari controller page adalah sebagai berikut:

<?php
class Page extends CI_Controller{
  function __construct(){
    parent::__construct();
    //validasi jika user belum login
    if($this->session->userdata('masuk') != TRUE){
                        $url=base_url();
                        redirect($url);
                }
  }

  function index(){
    $this->load->view('v_dashboard');
  }

  function data_mahasiswa(){
    // function ini hanya boleh diakses oleh admin dan dosen
    if($this->session->userdata('akses')=='1' || $this->session->userdata('akses')=='2'){
      $this->load->view('v_mahasiswa');
    }else{
      echo "Anda tidak berhak mengakses halaman ini";
    }

  }

  function input_nilai(){
    // function ini hanya boleh diakses oleh admin dan dosen
    if($this->session->userdata('akses')=='1' || $this->session->userdata('akses')=='2'){
      $this->load->view('v_input_nilai');
    }else{
      echo "Anda tidak berhak mengakses halaman ini";
    }
  }

  function krs(){
    // function ini hanya boleh diakses oleh admin dan mahasiswa
    if($this->session->userdata('akses')=='1' || $this->session->userdata('akses')=='3'){
      $this->load->view('v_krs');
    }else{
      echo "Anda tidak berhak mengakses halaman ini";
    }
  }
  function lhs(){
    // function ini hanya boleh diakses oleh admin dan mahasiswa
    if($this->session->userdata('akses')=='1' || $this->session->userdata('akses')=='3'){
      $this->load->view('v_lhs');
    }else{
      echo "Anda tidak berhak mengakses halaman ini";
    }
  }
}

 

#8. Buat Sebuah view dengan nama menu.php

View menu ini berfungsi untuk melihat bagaimana cara pembagian hak akses pada setiap menu.

Adapun kode dari view menu.php ini adalah sebagi berikut:

<nav class="navbar navbar-inverse">
<div class="container-fluid">
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav">
  <!--Akses Menu Untuk Admin-->
  <?php if($this->session->userdata('akses')=='1'):?>
      <li class="active"><a href="<?php echo base_url().'index.php/page'?>">Dashboard</a></li>
      <li><a href="<?php echo base_url().'index.php/page/data_mahasiswa'?>">Data Mahasiswa</a></li>
      <li><a href="<?php echo base_url().'index.php/page/input_nilai'?>">Input Nilai</a></li>
      <li><a href="<?php echo base_url().'index.php/page/krs'?>">KRS</a></li>
      <li><a href="<?php echo base_url().'index.php/page/lhs'?>">LHS</a></li>
  <!--Akses Menu Untuk Dosen-->
  <?php elseif($this->session->userdata('akses')=='2'):?>
      <li class="active"><a href="<?php echo base_url().'index.php/page'?>">Dashboard</a></li>
      <li><a href="<?php echo base_url().'index.php/page/data_mahasiswa'?>">Data Mahasiswa</a></li>
      <li><a href="<?php echo base_url().'index.php/page/input_nilai'?>">Input Nilai</a></li>
  <!--Akses Menu Untuk Mahasiswa-->
  <?php else:?>
      <li class="active"><a href="<?php echo base_url().'index.php/page'?>">Dashboard</a></li>
      <li><a href="<?php echo base_url().'index.php/page/krs'?>">KRS</a></li>
      <li><a href="<?php echo base_url().'index.php/page/lhs'?>">LHS</a></li>
  <?php endif;?>
  </ul>

  <ul class="nav navbar-nav navbar-right">
    <li><a href="<?php echo base_url().'index.php/login/logout'?>">Sign Out</a></li>
  </ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav> 

 

#9. Buat view lagi dengan nama v_dashboard.php

View ini berfungsi untuk halaman dashboard dari setiap user (pengguna).

Adapun kode dari view v_dashboard ini adalah sebagai berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Masuk</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Produk By Mfikri.com">
    <meta name="author" content="M Fikri Setiadi">
    <!-- Bootstrap -->
    <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet">


  </head>
  <body>

    <div class="container">
      <?php $this->load->view('menu');?> <!--Include menu-->
      <div class="container">
        <div class="row">
          <h2>Welcome back <?php echo $this->session->userdata('ses_nama');?></h2>
        </div>
      </div>
    </div> <!-- /container -->


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="<?php echo base_url().'assets/js/jquery.js'?>"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?php echo base_url().'assets/js/bootstrap.min.js'?>"></script>

  </body>
</html>

 

#10. Buat view lagi dengan nama v_mahasiswa.php

View ini berfungsi untuk menampilkan data mahasiswa. View ini hanya boleh diakses oleh admin dan dosen saja.

Adapun kode dari view v_mahasiswa ini adalah sebagai berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Data Mahasiswa</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Produk By Mfikri.com">
    <meta name="author" content="M Fikri Setiadi">
    <!-- Bootstrap -->
    <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet">


  </head>
  <body>

    <div class="container">
      <?php $this->load->view('menu');?> <!--Include menu-->
      <div class="col-md-12">
        <div class="row">
          <h2>Data Mahasiswa</h2>
          <table class="table table-striped table-bordered">
            <thead>
              <tr>
                <th>NIM</th>
                <th>Nama</th>
                <th>Prodi</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>1210158</td>
                <td>M Fikri</td>
                <td>Sistem Informasi</td>
              </tr>
              <tr>
                <td>1210157</td>
                <td>Joko</td>
                <td>Sistem Komputer</td>
              </tr>
              
            </tbody>
          </table>
        </div>
      </div>
    </div> <!-- /container -->


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="<?php echo base_url().'assets/js/jquery.js'?>"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?php echo base_url().'assets/js/bootstrap.min.js'?>"></script>

  </body>
</html>

 

#11. Buat view lagi dengan nama v_input_nilai.php

View ini berfungsi untuk input nilai mahasiswa dan hanya boleh diakses oleh admin dan dosen saja.

Adapun kode dari view v_input_nilai.php ini adalah sebagai berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>Input Nilai</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Produk By Mfikri.com">
    <meta name="author" content="M Fikri Setiadi">
    <!-- Bootstrap -->
    <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet">
  </head>
  <body>

    <div class="container">
      <?php $this->load->view('menu');?> <!--Include menu-->
      <div class="col-md-12">
        <div class="row">
          <h2>Laporan Hasil Studi</h2>
          <table class="table table-striped table-bordered">
            <thead>
              <tr>
                <th>Kode</th>
                <th>Mata Kuliah</th>
                <th>Sks</th>
                <th>Nilai</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>MK0001</td>
                <td>Bahasa Pemrograman I</td>
                <td>2</td>
                <td><button class="btn btn-info btn-xs">Input Nilai</button></td>
              </tr>
              <tr>
                <td>MK0002</td>
                <td>Web I</td>
                <td>2</td>
                <td><button class="btn btn-info btn-xs">Input Nilai</button></td>
              </tr>
              <tr>
                <td>MK0003</td>
                <td>Algoritma II</td>
                <td>2</td>
                <td><button class="btn btn-info btn-xs">Input Nilai</button></td>
              </tr>
              <tr>
                <td>MK0004</td>
                <td>Bahasa Inggris I</td>
                <td>2</td>
                <td><button class="btn btn-info btn-xs">Input Nilai</button></td>
              </tr>
            </tbody>

          </table>
        </div>
      </div>
    </div> <!-- /container -->


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="<?php echo base_url().'assets/js/jquery.js'?>"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?php echo base_url().'assets/js/bootstrap.min.js'?>"></script>

  </body>
</html>

 

#12. Buat view lagi dengan nama v_krs.php

View ini berfungsi untuk menampilkan krs mahasiswa dan hanya boleh diakses oleh admin dan mahasiswa.

Adapun kode dari view v_krs.php ini adalah sebagai berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>KRS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Produk By Mfikri.com">
    <meta name="author" content="M Fikri Setiadi">
    <!-- Bootstrap -->
    <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet">


  </head>
  <body>

    <div class="container">
      <?php $this->load->view('menu');?> <!--Include menu-->
      <div class="col-md-12">
        <div class="row">
          <h2>Kartu Rencana Studi</h2>
          <table class="table table-striped table-bordered">
            <thead>
              <tr>
                <th>Kode</th>
                <th>Mata Kuliah</th>
                <th>Sks</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>MK0001</td>
                <td>Bahasa Pemrograman I</td>
                <td>2</td>
              </tr>
              <tr>
                <td>MK0002</td>
                <td>Web I</td>
                <td>2</td>
              </tr>
              <tr>
                <td>MK0003</td>
                <td>Algoritma II</td>
                <td>2</td>
              </tr>
              <tr>
                <td>MK0004</td>
                <td>Bahasa Inggris I</td>
                <td>2</td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div> <!-- /container -->


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="<?php echo base_url().'assets/js/jquery.js'?>"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?php echo base_url().'assets/js/bootstrap.min.js'?>"></script>

  </body>
</html>

 

#13. Buat view satu lagi dengan nama v_lhs.php

View ini berfungsi untuk menampilkan data nilai mahasiswa dan hanya boleh diakses oleh admin dan mahasiswa.

Adapun kode dari view v_lhs.php ini adalah sebagai berikut:

<!DOCTYPE html>
<html>
  <head>
    <title>LHS</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="description" content="Produk By Mfikri.com">
    <meta name="author" content="M Fikri Setiadi">
    <!-- Bootstrap -->
    <link href="<?php echo base_url().'assets/css/bootstrap.css'?>" rel="stylesheet">


  </head>
  <body>

    <div class="container">
      <?php $this->load->view('menu');?> <!--Include menu-->
      <div class="col-md-12">
        <div class="row">
          <h2>Laporan Hasil Studi</h2>
          <table class="table table-striped table-bordered">
            <thead>
              <tr>
                <th>Kode</th>
                <th>Mata Kuliah</th>
                <th>Sks</th>
                <th>Nilai</th>
              </tr>
            </thead>
            <tbody>
              <tr>
                <td>MK0001</td>
                <td>Bahasa Pemrograman I</td>
                <td>2</td>
                <td>A</td>
              </tr>
              <tr>
                <td>MK0002</td>
                <td>Web I</td>
                <td>2</td>
                <td>A</td>
              </tr>
              <tr>
                <td>MK0003</td>
                <td>Algoritma II</td>
                <td>2</td>
                <td>A</td>
              </tr>
              <tr>
                <td>MK0004</td>
                <td>Bahasa Inggris I</td>
                <td>2</td>
                <td>A</td>
              </tr>
            </tbody>
            <tfoot>
              <tr>
                <th colspan="3">Index Prestasi</th>
                <th>4</th>
              </tr>
            </tfoot>
          </table>
        </div>
      </div>
    </div> <!-- /container -->


    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="<?php echo base_url().'assets/js/jquery.js'?>"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?php echo base_url().'assets/js/bootstrap.min.js'?>"></script>

  </body>
</html>

Related: Tutorial Lengkap CodeIgniter 4 Untuk Pemula

#14. Selesai

Sekarang silahkan jalan projectnya dengan mengunjungi url http://localhost/ci_login/index.php/login

Maka akan tampil form loginnya seperti gambar berikut:

Silahkan login sebagai dosen atau mahasiswa dan perhatikan perbedaan menu yang ditampilkan.

Sekian tutorial kali ini, semoga bermanfaat!

Download Source