Login Multi User Fitur Login di Codeigniter




Login Multi User Fitur Login di Codeigniter

Login adalah fitur  wajib dari semua sistem. 
 Dalam sistem informasi modern, login adalah cara untuk melindungi informasi dari orang yang tidak berwenang. 
 Login juga merupakan cara untuk membagi hak akses suatu halaman  kepada pengguna tertentu. 
 Sistem login memiliki sesi atau izin yang digunakan untuk melacak tindakan pengguna. Dengan demikian, hak akses pengguna dapat dengan mudah dikelompokkan. 
 Membuat sistem login dengan alih kode terkadang  sulit bagi kebanyakan pemula. 
 Lebih rumit lagi jika target bertingkat berasal dari tabel lain. 
 Seperti yang saya alami sebelumnya, butuh waktu  lama  untuk  membuat sistem login ini berfungsi seperti yang diharapkan. 
 Cara mengonfigurasi sesi, mengonfigurasi akses ke setiap fungsi, dan mengonfigurasi akses  menu. 
 Saya mencoba googling tetapi tidak ada yang menerbitkan artikel yang cukup lengkap untuk membuat sistem login ini. 
 Selain itu, login multi-level dari tabel yang berbeda, seperti yang saya jelaskan di atas. 
 Saya yakin Anda merasakan hal yang sama dengan saya. 
 Setelah perjuangan panjang akhirnya saya berhasil membuat sistem login yang menurut saya benar-benar sempurna. 
 Untuk menutupi kekhawatiran Anda, di sini saya merinci cara membuat sistem login multi-level dari tabel yang berbeda menggunakan framework php yaitu code-switch. 
 Dalam hal ini, saya akan menjelaskan cara membuat sistem login multi-level dari tabel yang berbeda menggunakan alih kode, cara mengatur izin menu dan mengatur izin untuk setiap fungsi. 
 Studi kasus yang akan saya gunakan dalam artikel  ini adalah masuk sebagai anggota fakultas dan sebagai mahasiswa. 
 Jika meja guru berbeda dengan meja siswa. 
 Saya membagi hak akses  dosen  menjadi dua tingkatan yaitu ada dosen yang berperan sebagai administrator dan ada yang login hanya berperan sebagai dosen biasa. 
 Dosen dengan hak administratif diberi tingkatan nomor 1=administrator, dosen biasa nomor 2=dosen dan tingkat login mahasiswa  3=mahasiswa. 
 Jika penjelasan di atas masih membuat Anda bingung, lanjutkan karena Anda akan segera mengerti saat mencobanya sendiri nanti. 
 Oke, ini adalah bagaimana Anda dapat membuat login multi-level dari tabel yang berbeda menggunakan alih kode.

PERSIAPAN
 Sebelum persiapan, ada satu langkah yang tidak boleh Anda lewati. Ini adalah tahap persiapan. 
 Apa yang harus Anda persiapkan? 
 Berikut daftarnya : 
 Codeigninter jika belum punya silahkan download di website resminya www.codeigniter.com 
 Jquery jika belum punya download di website resminya www.codeigniter.com jquery.com 
 Bootstrap Bootstrap ini berfungsi untuk mempercantik tampilan. Jika Anda belum memilikinya, unduh dari situs web resmi 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 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:

Multi User

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 gilakodingan.blogspot.com">
    <meta name="author" content="Gilkodingan">
    <!-- 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 gilakodingan.blogspot.com">
    <meta name="author" content="Gilakodingan">
    <!-- 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 gilakodingan.blogspot.com">
    <meta name="author" content="Gilakodingan">
    <!-- 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 gilakodingan.blogspot.com">
    <meta name="author" content="Gilakodingan">
    <!-- 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 gilakodingan.blogspot.com">
    <meta name="author" content="Gilakodingan">
    <!-- 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 gilakodingan.blogspot.com">
    <meta name="author" content="Gilakodingan">
    <!-- 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>

#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!
Tags

Post a Comment

Post a Comment

Previous Post Next Post