Tutorial Codeigniter Part 8 – Membuat Modul Login Menggunakan Session

codeigniter-kcdev
Advertisements

Aplikasi yang digunakan oleh instansi besar maupun organisasi profesional pastinya memiliki banyak modul dan fitur. Modul dan fitur ini biasanya bersifat private atau hanya bisa diakses oleh user tertentu saja. Di bahasa pemrograman PHP (dibaca Pi Eitch Pi bukan Pe Ha Pe) kita menggunakan session untuk menyimpan data user yang sedang login seperti siapa username nya, apa level atau hak akses nya, dsb. Tutorial kali ini akan membahas mengenai cara membuat modul login menggunakan session.

Sebagai pengingat kembali, pada tutorial sebelumnya kita telah mempelajari bagaimana cara menyatukan dua insan yang saling menyayangi mengintegrasikan framework css pada project codeigniter kita. Bagi yang belum memahami silahkan dibaca kembali dan sebarkan.

1. Konfigurasi Load Library Otomatis

Agar memudahkan kita dalam membuat modul login, sebaiknya kita memanggil beberapa library codeigniter secara otomatis. Hal ini juga mengurangi jumlah baris kode yang akan kita ketik sehingga meminimalkan ukuran controller kita. Mari kita buka file autoload.php pada folder application/config dan memanggil library secara otomatis yaitu:

  • database, untuk menggunakan library database codeigniter.
  • session, seperti namanya untuk membantu kita menyimpan dan memanggil data di dalam variable session.
  • form_validation, untuk membantu kita memvalidasi inputan user.
$autoload['libraries'] = array('database', 'session', 'form_validation');

2. Membuat Tabel Users Pada Database

Selanjutnya mari kita kita membuat tabel users pada database dimana tabel ini akan berisi data akun yang bisa digunakan untuk login ke dalam aplikasi kita nantinya.

-- ----------------------------
-- Table structure for users
-- ----------------------------
DROP TABLE IF EXISTS `users`;
CREATE TABLE `users` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `username` varchar(50) NOT NULL,
  `password` varchar(255) NOT NULL,
  `level` enum('administrator','alumni') NOT NULL DEFAULT 'administrator',
  `active` enum('0','1') NOT NULL DEFAULT '1',
  `last_login` datetime NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB AUTO_INCREMENT=2 DEFAULT CHARSET=latin1;

-- ----------------------------
-- Records of users
-- ----------------------------
INSERT INTO `users` VALUES ('1', 'administrator', '$2y$10$msjK0HDeOOHMyOJXM7jY6Oc09YuslmGZV18BekjJ2i1acDQ6PPq/C', 'administrator', '1', '0000-00-00 00:00:00');

Di dalam tabel users ada enam kolom yang masing-masing berfungsi untuk:

  • id, field ini akan menampung kode unique dari setiap user.
  • username, akan berisi username yang bersifat unique.
  • password, seperti namanya akan berisi password user yang telah di hashing.
  • level, memiliki tipe data enum artinya field ini hanya akan berisi 2 nilai saja yaitu ‘administrator’ atau ‘alumni’
  • active, sama seperti di atas memiliki tipe data enum jika bernilai 1 berarti active jika bernilai 0 berarti inactive dan tidak bisa login.
  • last_login, akan berisi waktu login terakhir dari user.

3. Membuat Core Controller

Tugas kita berikutnya adalah membuat core controller. Fungsi utama core controller adalah mencegah penulisan kode yang berulang-ulang di sebuah controller. Function atau method yang akan kita buat adalah function untuk mengecek apakah user sudah login atau belum. Contohnya ketika user mengakses sebuah controller, maka kita membutuhkan function cekLogin() di controller tersebut. Tentu kita tidak mau jika function cekLogin() ini kita tulis berulang-ulang pada controller lain padahal fungsi dan kodenya sama saja.

Membuat Modul Login Menggunakan Session
Bad Practice – Tidak Menggunakan Core Controller
Membuat Modul Login Menggunakan Session
Best Practice – Menggunakan Core Controller

Seperti yang bisa kita lihat pada diagram di atas, jika kita menggunakan core controller maka kita hanya cukup menulis function cekLogin() pada MY_Controller saja sehingga semua controller lain yang menggunakan atau meng-extends MY_Controller akan bisa menggunakan function cekLogin() juga.

Buat sebuah file baru bernama MY_Controller.php di dalam folder application/core. File ini berisi kode seperti berikut.

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

class MY_Controller extends CI_Controller 
{
  public function cekLogin()
  {
    if (!$this->session->userdata('username')) {
      redirect('auth/login');
    }
  }
}

Kemudian update controller Dashboard untuk meng-extends MY_Controller dan tambahkan function __construct(). Function construct ini adalah method yang pertama kali dijalankan saat sebuah kelas dipanggil atau digunakan. Bisa kita lihat di dalam function construct ini kita juga memanggil $this->cekLogin(), dimana $this berarti class Dashboard itu sendiri dan karena kita sudah meng-extends core controller maka si class Dashboard ini bisa menggunakan semua function yang berada di dalam MY_Controller.

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

class Dashboard extends MY_Controller 
{
  public function __construct()
  {
    parent::__construct();
    $this->cekLogin();
  }

  public function index()
  {
    $data['pageTitle'] = 'Dashboard';
    $data['pageContent'] = '<h1>Ini fungsi index dari controller dashboard</h1><h1>Ini fungsi index dari controller dashboard</h1><h1>Ini fungsi index dari controller dashboard</h1>';

    $this->load->view('template/layout', $data);
  }

  public function routing_ka_ayah()
  {
    echo 'Hahaha';
  }
}

4. Membuat Controller Auth

Berikutnya kita akan membuat sebuah controller baru yang kita beri nama Auth. Di controller auth inilah kita akan membuat logic untuk melakukan login, logout, cek akun dan memanggil halaman login. Jadi langsung saja kita buat file baru Auth.php di dalam folder application/controllers.

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

class Auth extends CI_Controller 
{
  public function cekAkun()
  {
    // Memanggil model users
    $this->load->model('model_users');

    // Mengambil data dari form login dengan method POST
    $username = $this->input->post('username');
    $password = $this->input->post('password');

    // Jalankan function cekAkun pada model_users
    $query = $this->model_users->cekAkun($username, $password);
    
    // Jika query gagal maka return false
    if (!$query) {
      
      // Mengatur pesan error validasi data
      $this->form_validation->set_message('cekAkun', 'Username atau password yang Anda masukkan salah!');
      return FALSE;
    
    // Jika berhasil maka set user session dan return true
    } else {

      // data user dalam bentuk array
      $userData = array(
        'username' => $query->username,
        'level' => $query->level,
        'logged_in' => TRUE
      );
			
      // set session untuk user
      $this->session->set_userdata($userData);

      return TRUE;
    }
  }

  public function login()
  {
    // Jika user telah login, redirect ke base_url
    if ($this->session->userdata('logged_in')) redirect(base_url());

    // Jika form di submit jalankan blok kode ini
    if ($this->input->post('submit')) {
      
      // Mengatur validasi data username,
      // required = tidak boleh kosong
      $this->form_validation->set_rules('username', 'Username', 'required');

      // Mengatur validasi data password,
      // required = tidak boleh kosong
      // callback_cekAkun = menjalankan function cekAkun()
      $this->form_validation->set_rules('password', 'Password', 'required|callback_cekAkun');
			
      // Mengatur pesan error validasi data
      $this->form_validation->set_message('required', '%s tidak boleh kosong!');

      // Jalankan validasi jika semuanya benar maka redirect ke controller dashboard
      if ($this->form_validation->run() === TRUE) {
        redirect('dashboard');
      } 
    }
    
    // Jalankan view auth/login.php
    $this->load->view('auth/login');
  }

  public function logout()
  {
    // Hapus semua data pada session
    $this->session->sess_destroy();

    // redirect ke halaman login	
    redirect('auth/login');
  }
}

5. Membuat Model Users

Perlu diperhatikan bahwa setiap kita membuat model pada codeigniter, ada baiknya nama model nya kita samakan dengan nama table yang ada di dalam database kita. Ini dilakukan agar kita bisa dengan mudah mengetahui tugas atau fungsi model hanya dengan melihat namanya saja. Pada folder application/models mari membuat file baru dengan nama Model_users.php dan berisi kode berikut.

<?php
  class Model_users extends CI_Model {
  
    public $table = 'users';

    public function cekAkun($username, $password)
    {
      // Get data user yang mempunyai username == $username dan active == 1
      $this->db->where('username', $username);
      $this->db->where('active', '1');
			
      // Jalankan query
      $query = $this->db->get($this->table)->row();
      
      // Jika query gagal atau tidak menemukan username yang sesuai 
      // maka return false
      if (!$query) return false;
			
      // Ambil data password dari database
      $hash = $query->password;
      
      // Jika $hash tidak sama dengan $password maka return false
      if (!password_verify($password, $hash)) return false;

      // Jika username dan password benar maka return data user
      return $query;        
    }

  }

6. Membuat View Atau Halaman Login

Advertisements

Halaman login ini akan kita beri nama login.php dan akan berdomisili di dalam folder application/views/auth. User akan diarahkan ke halaman ini jika belum melakukan login.

<!DOCTYPE html>
<html lang="en">
    
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0"/>
    <title>Kcdev Codeigniter</title>
    <!-- CSS  -->
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link href="<?php echo base_url('assets/materialize/css/materialize.min.css'); ?>" type="text/css" rel="stylesheet" media="screen,projection"/>
    <style>
      body {
        display: flex;
        min-height: 100vh;
        flex-direction: column;
      }
      main {
        flex: 1 0 auto;
      }
      .login-box {
        margin-top: 7%;
      }
    </style>
  </head>

  <body>
    <nav class="light-blue lighten-1" role="navigation">
      <div class="nav-wrapper container"><a id="logo-container" href="<?php echo base_url(); ?>" class="brand-logo">Kcdev Codeigniter</a></div>
    </nav>
        
    <main>
      <div class="container login-box">
        <div class="card z-depth-5">
          <div class="card-content">
            <span class="card-title">Login</span>
            <div class="row">
              <form class="col s12" id="login-form" method="post" action="<?php echo base_url('auth/login'); ?>">
                <div class="row">
                  <?php if(validation_errors()): ?>
                  <div class="col s12">
                    <div class="card-panel red">
                      <span class="white-text"><?php echo validation_errors('<p>', '</p>'); ?></span>
                    </div>
                  </div>
                  <?php endif; ?>
                  <div class="input-field col m12">
                    <input id="username" type="text" class="validate" name="username">
                    <label for="username">Username</label>
                  </div>
                  <div class="input-field col m12">
                    <input id="password" type="password" class="validate" name="password">
                    <label for="password" data-error="Password yang anda masukkan salah">Password</label>
                  </div>
                  <div class="input-field col m12 right-align">
                    <button class="btn waves-effect waves-light btn-login amber" type="submit" name="submit" value="login">
                      Submit <i class="material-icons right">send</i>
                    </button>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </main>

    <footer class="page-footer white">
      <div class="footer-copyright  blue darken-3">
        <div class="container center-align">
          Copyright &copy; <a class="white-text text-lighten-3" href="https://www.kcdev.id">Kcdev Interactive Software</a>
        </div>
      </div>
    </footer>
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
    <script src="<?php echo base_url('assets/materialize/js/materialize.js'); ?>"></script>
  </body>
</html>

7. Mengupdate Template Sidebar

Tugas kita yang terakhir hahaha adalah mengupdate sidebar.php yang berada di dalam folder application/views/layout/sidebar.php. Disini kita hanya akan menambahkan sebuah menu logout yang akan mengarahkan kita ke controller auth/logout dan menghapus semua session user jika di klik.

<aside>
  <ul id="sidenav" class="side-nav fixed">
    <li>
      <div class="userView">
        <div class="background">
          <img src="<?php echo base_url('assets/images/nav6.jpg'); ?>">
        </div>
        <a href="#!user"><img class="circle" src="<?php echo base_url('assets/images/noavatar.png'); ?>"></a>
        <a href="#!name"><span class="white-text name">Abdul Manaaf Saparuddin</span></a>
        <a href="#!email"><span class="white-text email">nafplann@gmail.com</span></a>
      </div>
    </li>
    <li>
      <a class="waves-effect"  href="<?php echo base_url('dashboard'); ?>"><i class="material-icons">home</i>Dashboard</a>
    </li>
    <li>
      <a class="waves-effect"  href="<?php echo base_url('auth/logout'); ?>"><i class="material-icons">exit_to_app</i>Logout</a>
    </li>
  </ul>
</aside>

8. Testing

Saatnya melakukan testing. Pada saat kita mengakses http://localhost/codeigniter kita akan langsung diarahkan ke halaman login.

Membuat Modul Login Menggunakan Session

Saat kita memasukkan username atau password yang salah, maka akan muncul error message pada login box.Membuat Modul Login Menggunakan Session

Jika kita memasukkan username dan password yang benar, maka kita akan diarahkan ke controller dashboard. Di menu sebelah kiri kita juga bisa melihat menu logout yang sudah kita tambahkan tadi. BTW username defaultnya adalah administrator dengan password kcdev.

Membuat Modul Login Menggunakan Session

Untuk tombol logout, saat di klik maka session kita akan dihapus dan kita diarahkan ke halaman http://localhost/codeigniter/auth/login.

Advertisements

Oke sekian dulu, sangat banyak bagian yang sama-sama kita kerjakan pada tutorial kali ini mudah-mudahan bermanfaat untuk adiks.

Hai orang-orang beriman apabila dikatakan kepadamu: “Berlapang-lapanglah dalam majlis”, maka lapangkanlah niscaya Allah akan memberi kelapangan untukmu. Dan apabila dikatakan: “Berdirilah kamu”, maka berdirilah, niscaya Allah akan meninggikan orang-orang yang beriman di antaramu dan orang-orang yang diberi ilmu pengetahuan beberapa derajat. Dan Allah Maha Mengetahui apa yang kamu kerjakan (QS Al-Mujadilah:11).

Tetap Semangat,

kaceManaf

Author: kaceManaf

Founders of kcdev.id, freelance full stack web developer and also a web-tech wanderer. Passionate about code readability and simplicity. https://www.linkedin.com/in/nafplann/

31 Replies to “Tutorial Codeigniter Part 8 – Membuat Modul Login Menggunakan Session

  1. mau tanya, saya bikin login juga pake session tapi kok gak bisa jalan sessionnya di controller lain.

    misal mau nampilin username (pake session saat login) di controller beranda, tapi gak bisa tampil.

    padahal sudah di set session library di file autoload.php, juga sudah di set load library session di bagian function controller beranda.

    kira-kira ada solusi gak ya?

    1. hai banghaji.. coba di cek dulu semua session yang tersimpan, bisa dengan cara die(print_r($this->session->userdata()));

      kalau hasilnya kosong berarti data session nya belum berhasil tersimpan

  2. di tutor kan cek login dan cek aktif nya ga dipisah. gimana caranya supaya cek aktif dan loginnya terpisah. jadi error yg muncul klo akun belum aktif walaupun username sama password benar “maaf akun belum aktif”

    1. hai rian.. untuk kasus yang dimaksud, bisa ditambahkan kondisi ‘if’ sebelum kita memasang data user pada session. Pada file Auth.php line ke 34.
      kurang lebih seperti ini:

      if (!$query->active) {
      // Mengatur pesan error validasi data
      $this->form_validation->set_message(‘cekAkun’, ‘Maaf akun belum aktif!’);
      return false;
      }

      dan jangan lupa pada Model_users.php pada line ke 10, menghapus kode ini:
      $this->db->where(‘active’, ‘1’);

    1. kok data last login nya ga sesuai dengan jam / wktu indonesia ya min ? tp klo tanggal bulan tahunnya aman, mohon bantuanya min

  3. kok data last login nya ga sesuai dengan jam / wktu indonesia ya min ? tp klo tanggal bulan tahunnya aman, mohon bantuanya min

  4. Gan…
    kenapa kok muncul Object not found..??
    Padahal udah sama banget kyak di tutorialnya…

    Mohon pencerahannya Min…

Leave a Reply

Your email address will not be published. Required fields are marked *