MASIGNCLEAN102

Cara Membuat Login dan Logout Session Codeigniter 3

Cara Membuat Login dan Logout dengan Session dengan Codeigniter 3 - Kembali lagi di Belajar Codeigniter 3. Setelah di artikel sebelum – sebelumnya kita sudah memahami cara Install Codeigniter sampai dengan membuat CRUD, pada artikel kali ini kita akan belajar bagaimana cara membuat login dan logout session pada Codeigniter.

Supaya lebih paham ke depan nya, untuk awalan kita akan memahami terlebih dahulu apa itu session. Session adalah variabel sementara yang berisi nilai – nilai tertentu yang disimpan di sisi server. Session dapat dibuat dan dapat ‘dihancurkan’.

Oleh karena itu, pada tutorial kali ini kita akan menggunakan session untuk menyimpan informasi login dari user.

Persiapan

Install Codeigniter

Untuk mengawali projek membuat login dan logout codeigniter kali ini, yang pasti kalian sudah menginstall codeigniter sampai tahap menghapus index.php.

Kalau belum, silahkan install dan baca artikel sebelumnya tentang cara menginstall codeigniter disini :


Folder Assets

Setelah selesai menginstall codeigniter, kita siapkan dulu beberapa assets yang akan kita gunakan pada projek kali ini. Assets yang perlu disiapkan yaitu

Kalau bootstrap dan jquerynya sudah siap, silahkan buat folder assets yang akan kita gunakan untuk menaruh semua CSS dan JS pada projek kita kali ini.



Membuat database

Setelah itu, kita buat database dan tabel untuk mengisi informasi – informasi yang dibutuhkan untuk login. Dalam kasus ini, tabel digunakan untuk menyimpan username dan password.

Execute SQL di bawah ini :

-- phpMyAdmin SQL Dump
-- version 4.5.2
-- http://www.phpmyadmin.net
--
-- Host: 127.0.0.1
-- Generation Time: Oct 29, 2019 at 07:16 AM
-- Server version: 5.5.64-MariaDB-1ubuntu0.14.04.1
-- PHP Version: 5.6.23
 
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
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_user`
--
 
-- --------------------------------------------------------
 
--
-- Table structure for table `tb_user`
--
 
CREATE TABLE `tb_user` (
  `username` varchar(50) NOT NULL,
  `password` varchar(50) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;
 
--
-- Dumping data for table `tb_user`
--
 
INSERT INTO `tb_user` (`username`, `password`) VALUES
('admin', 'e10adc3949ba59abbe56e057f20f883e');
 
--
-- Indexes for dumped tables
--
 
--
-- Indexes for table `tb_user`
--
ALTER TABLE `tb_user`
  ADD PRIMARY KEY (`username`);
 
/*!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 */;

Setting Autoload, Config, Routes dan Database.

Autoload.php

Tahap selanjutnya yaitu kita atur file autoload.php di folder /application/config/autoload.php.

Buka file tersebut kemudian ubah / isi bagian :
$autoload['libraries'] = array();
dan
$autoload['helper'] = array();

Menjadi seperti ini,

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

dan

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

Fungsinya yaitu untuk meload libraries database dan session dan juga helper url.

Lebih jelasnya kalian bisa baca – baca tentang file konfigurasi codeigniter disini : 


Database.php

Setelah kita membuat db_user dan tabel tb_user. Kemudian, kita atur database.php untuk mengkoneksikan codeigniter kita ke database yang sudah kita buat tadi.

$db['default'] = array(
    'dsn'   => '',
    'hostname' => '127.0.0.1',
    'username' => 'root',
    'password' => '123',
    'database' => 'db_user',
    '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
);
Sesuaikan konfigurasi di atas dengan konfigurasi login phpmyadmin kalian.

Config.php

Kita atur config.php kita dengan mengisi bagian base_url.

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

Sesuaikan dengan nama projek kalian di web server.

Oh iya, jangan lupa untuk menghapus bagian index_page.

$config['index_page'] = '';

Routes.php

Selanjutnya, kita atur file routes.php

Ubah default_controller dengan C_Index.

Kemudian tambahkan baris ini

$route['C_Index/(:any)'] = 'C_Index/$1';
Lebih lengkapnya, baca artikel sebelumnya tentang file konfigurasi codeigniter ya 🙂

Yap, bagian persiapan sudah selesai. Saatnya kita ke bagian pembuatan controller, model dan view.

Controller

Pada bagian ini, kita akan mengatur controller sedemikian rupa untuk menyimpan session.

Buat File C_Index

Yang pertama – tama. buatlah file C_Index di /controllers.

Kemudian, isi dengan kode berikut :

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
 
class C_Index extends CI_Controller {
 
    function __construct(){
        parent::__construct();
        $this->load->model('M_index');
    }
     
    public function index()
    {
        if($this->session->logged_in == FALSE){
            $this->load->view('V_Login');
        }else{
            $this->load->view('V_Index');
        }
 
         
    }
 
    public function Login()
    {
        $username       = $this->input->post('username');
        $password       = $this->input->post('password');
 
        $status         = $this->M_index->getDetail($username,md5($password));
        if($status){
            $session = array(
                'nama'          => $username,
                'logged_in'     => TRUE
                );
            $this->session->set_userdata($session);
            $this->session->unset_userdata('gagal');
            redirect('C_Index');
        }else{
            $session = array('gagal' => 1);
            $this->session->set_userdata($session);
            redirect('C_Index');
        }
    }
 
    public function Logout()
    {
        $this->session->sess_destroy();
        redirect('C_Index');
    }
}

Yuk, sedikit kita bahas

$status         = $this->M_index->getDetail($username,md5($password));
Syntax di atas digunakan untuk menyimpan return value dari fungsi getDetail() pada Model M_index.
$session = array(
                'nama'          => $username,
                'logged_in'     => TRUE
                ); 
Syntax di atas digunakan untuk mengisi variabel $session dengan beberapa nilai. Dalam hal ini, nilainya yaitu nama dan juga logged_in.

$this->session->set_userdata($session); //set array nilai ke session
$this->session->unset_userdata('gagal'); //Unset key 'gagal' pada session
Syntax di atas digunakan masing – masing untuk set session dan juga unset_session (Melepaskan / Menghapus nilai dari session )

Logika Lengkapnya seperti ini,

if($status){
            $session = array(
                'nama'          => $username,
                'logged_in'     => TRUE
                );
            $this->session->set_userdata($session);
            $this->session->unset_userdata('gagal');
            redirect('C_Index');
        }else{
            $session = array('gagal' => 1);
            $this->session->set_userdata($session);
            redirect('C_Index');
        }
Jika $status bernilai TRUE maka kita set / menambahkan session dengan nilai nama dan logged_in pada session. Dan apabila terdapat session gagal maka kita unset.

Jika $status bernilai FALSE, maka kita set key gagal pada session dan kita redirect kan lagi ke C_Index

bernilai false, maka kita set key gagal pada session dan kita redirect kan lagi ke C_Index

public function Logout()
    {
        $this->session->sess_destroy();
        redirect('C_Index');
    }
Fungsi logout() berisikan perintah untuk menghancurkan session dan redirect ke C_Index.

Model

Buat Model M_index

Buatlah file baru di models kemudian beri nama M_index.

Setelah itu, isikan M_index dengan script di bawah ini : 

<?php
defined('BASEPATH') OR exit('No direct script access allowed');
 
class M_index extends CI_Model {
     
 
    function getDetail($username,$password){
 
        $sql    = "SELECT * from tb_user where username='$username' and password='$password'";
        $query  = $this->db->query($sql);
        if($query->num_rows() > 0){
            return true;
        }else{
            return false;
        }
    }
}
Kita bahas ya,

fungsi getDetail() pada model di atas membawa parameter username dan password yang didapat dari controller C_Index.

Kemudian parameter tersebut digunakan sebagai kondisi pada query di atas.

Fungsi getDetail() akan bernilai TRUE jika hasil query di atas lebih dari 0 baris, sedangkan akan bernilai FALSE jika tidak lebih dari 0 baris

View

Buat View V_Login

Buatlah File baru pada /views , kemudian beri nama V_Login.

V_Login digunakan sebagai tampilan login user. Berisikan form input username dan password.

Isi V_Login dengan script berikut :

<!DOCTYPE html>
<html>
<head>
    <title>Login</title>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css'); ?>">
    <script type="text/javascript" src="<?php echo base_url('assets/jquery/jquery-3.2.1.min.js'); ?>"></script>
</head>
<body style="margin: 50px;">
<div class="container">
 
<div class="panel panel-primary">
    <div class="panel-heading">
        <h4 style="font-weight: bold;">Login</h4   >
    </div>
<div class="panel-body">
    <form method="post" action="<?php echo base_url('C_Index/Login'); ?>">
    <div class="row">
        <div class="col-md12">
            <div class="col-md-4"></div>
            <div class="form-group col-md-4">
                <label for="username">Username</label>
                <input required id="username" class="form-control" type="text" name="username"></input>
            </div>
        </div>
    </div>
 
    <div class="row">
        <div class="col-md12">
            <div class="col-md-4"></div>
            <div class="form-group col-md-4">
                <label for="password">Password</label>
                <input required id="password" class="form-control" type="password" name="password"></input>
            </div>
        </div>
    </div>
 
 
    <center><button type="submit" class="btn btn-success">Submit</button></center>
</form>
</div>
</div>
</div>
</body>
<script type="text/javascript">
    $(document).ready(function(){
        var gagal = '<?php echo $this->session->gagal; ?>';
 
        if(gagal==1){
            alert('Username atau Password Salah');
        }
    })
</script>
</html>
Kita bahas pada bagian javascriptnya saja ya hehe,
<script type="text/javascript">
    $(document).ready(function(){
        var gagal = '<?php echo $this->session->gagal; ?>';
 
        if(gagal==1){
            alert('Username atau Password Salah');
        }
    })
</script>
Script di atas, digunakan untuk memunculkan alert apabila variabel gagal bernilai 1. Variabel gagal mendapat nilai dari $this->session->gagal.

Lebih lengkapnya, simak bagian controller ya.

Buat View V_Index

V_Index digunakan sebagai tampilan setelah login berhasil. V_Login berisikan antara lain panel selamat datang dan tombol Logout.

Isi V_Index dengan script berikut :
<!DOCTYPE html>
<html>
<head>
    <title>Halaman User</title>
    <link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/bootstrap/css/bootstrap.min.css'); ?>">
</head>
<body style="margin: 50px;">
 
<div class="panel panel-success">
    <div class="panel-heading">
        <h4>Halaman Admin</h4>
    </div>
    <div class="panel-body">
         <h4>Halo <?php echo $this->session->nama; ?>, anda berhasil login</h4>
         <a href="<?php echo base_url('C_Index/Logout'); ?>" class="btn btn-danger">Logout</a>
    </div>
</div>
 
 
 
</body>
</html>
Kalau sudah, silahkan jalankan projek kalian.

Screenshot





Kesimpulan

Session adalah variabel yang berisi nilai – nilai tertentu yang disimpan di sisi server dan bersifat sementara / temporary. Session dapat dibuat dan dapat ‘dihancurkan’.

Gimana gan? apa udah paham dengan apa itu yang dinamakan session?.

Apa projek membuat login dan logout codeigniter dengan session kalian berhasil? Kalau belum berhasil, itu artinya kamu perlu baca artikel Belajar Codeigniter sebelumnya.

Yuk baca artikel lainnya :

  • 6 Module Magisk Terbaik untuk Gaming
  • Cara Menggunakan Fontawesome di Aplikasi Android
  • 5 Rekomendasi Earphone Gaming Murah Terbaik
  • Membuat Aplikasi CRUD Android dengan MySQL Database
  • 8 Extension Visual Studio Code untuk Programmer

Kalau berhasil, jangan lupa tinggalkan komentar ya
Share This :
Funtechsy