Tutorial Codeigniter 4 - Membuat Fitur Login dan Logout pada Codeigniter 4

Selamat datang di blog CopyPasteKode, pada tutorial kali ini kita akan belajar bagaimana cara membuat fitur login dan logout pada Codeigniter 4. Tanpa berlama-lama langsung saja kita mulai project kita.

Sebelum mengikuti tutorial nya ada beberapa persyaratan yang harus dipenuhi terlebih dahulu

Requirements : 

• Codeigniter 4 download disini
• File dist (berisi file booststrap 5 css dan js) download disini
• File icon (berisi SVG, icon bootstrap 5) download disini

Untuk teman-teman yang sudah mempunyai File Codeigniter 4, tidak perlu untuk mendownload lagi, hanya tinggal mendownload file bootstrap 5 dan icon, SVG dari bootstrap 5 pada link diatas, jika sudah teman-teman bisa langsung extract filenya kemudian pindahkan atau copy kemudian paste kan pada folder public di project Codeigniter 4 kalian. Seperti contoh gambar berikut :

Extract 2 file diatas kemudian copy kan kedalam folder public

Langkah-langkah membuat Login dan Logout pada Codeigniter 4 :

1.  Membuat Database
2.  Setting & Koneksi Database
3.  Membuat File Migrations
4.  Membuat Controllers Login & method login dan logout
5.  Membuat Models Login
6.  Membuat Views Form Login
7.  Membuat Controllers Dashboard
8.  Membuat Views Dashboard
9.  membuat Routing Login
10.  Membuat Pembatasan Akses dengan menggunakan Filter

Membuat Database

Buka Xampp, kemudian jalankan Apache & MySQL setelah itu buka phpMyAdmin pada web browser, lalu buat / tambahkan database baru dengan nama db_crud, seperti petunjuk gambar dibawah :

Setting & Koneksi Database

Setelah membuat Database seperti langkah diatas, sekarang kita akan mengkoneksikan atau menghubungkan Database yang telah kita buat pada project Codeigniter 4 kita.

Buka project Codeigniter 4 teman-teman pada Code Editor, disini saya menggunakan vs code, saya merekomendasikan teman-teman untuk menggunakan VS Code atau Visual Studio Code ini sebagai code editor yang akan gunakan.

Temukan file dengan nama env, lalu copy file tersebut, sehingga menjadi 2 file, kemudian rename salah 1 file env tersebut menjadi .env seperti petunjuk gambar berikut :

Setelah itu buka file .env, lalu modifikasi seperti contoh gambar berikut :

Sebelum di modifikasi :

Sesudah di modifikasi :

Jika teman-teman yang sudah mempunyai database dan telah terkoneksi dengan project Codeginter 4, teman-teman bisa langsung skip langkah diatas.

Membuat File Migrations

Setelah membuat dan meng-koneksikan datatabse pada project Codeginiter 4 kalian, sekarang kita akan masuk ke tahap selanjutnya yaitu tahap ke-2 "Membuat File Migrations"

Buat file pada folder app/Database/Migrations dengan menggunakan terminal pada visual studio code atau vs code. Buka Visual Studio kalian lalu jalankan Terminal nya dengan cara tekan Ctrl+` atau Ctrl+Shift+M kemudian arahkan ke terminal lalu ketikan perintah seperti dibawah :

php spark make:migration users

Kalian bisa copy Script diatas kemudian paste kan pada Terminal vs code kalian, Kemudian tekan enter tunggu sampai file migration nya selesai dibuat. (development server started dalam kondisi on atau aktif).

Setelah file migrations selesai dibuat, sekarang coba buka folder app/Database/Migrations maka akan muncul file baru dengan format tahun/bulan/tanggal/jam/menit/detik dan nama file. Untuk lebih jelasnya tentang migrations kalian bisa baca dokumentasi Codeigniter 4 pada link berikut https://codeigniter4.github.io

Setelah file migrations nya berhasil dibuat kita tinggal isikan beberapa baris script pada file migrations, sebagai berikut :

<?php 
 
namespace App\Database\Migrations;
 
use CodeIgniter\Database\Migration;
 
class Users extends Migration
{
    public function up()
    {
        $this->forge->addField([
            'username'          => [
                'type'           => 'VARCHAR',
                'constraint'     => '100',
            ],
            'password'       => [
                'type'           => 'VARCHAR',
                'constraint'     => '100',
            ],
            'name'       => [
                'type'           => 'VARCHAR',
                'constraint'     => '100',
            ],
            'created_at' => [
                'type'           => 'DATETIME',
                'null'            => true,
            ],
            'updated_at' => [
                'type'           => 'DATETIME',
                'null'            => true,
            ]
 
        ]);
        $this->forge->addPrimaryKey('username', true);
        $this->forge->createTable('users');
    }
 
    public function down()
    {
        $this->forge->dropTable('users');
    }
}

Kemudian jalankan kembali terminal nya dan ketikan php spark migrate, tunggu hingga proses selesai dan buka database kalian cek apakan sudah ada tabel users atau belum, jika belum mungkin terjadi error atau kalian melewatkan beberapa petunjuk atau langkah diatas, jika tabel users sudah ada, insert tabel users seperti contoh berikut:

Username : admin

Password : $2y$10$yg2n99YZkQyiKNr7Kuv3h.ZXXUXDSyWtOcD0J3RQD2GUE7LWXrAbG

name : admin

created_at : isi terserah kalian.

update_at : biarkan kosong

Membuat Controllers Untuk Login

Buat file Pada app/Controllers, dengan nama Auth.php, kemudian isikan script berikut :

<?php 
 
namespace App\Controllers;
 
use App\Models\Model_auth;
 
class Auth extends BaseController
{
    public function __construct()
    {
        $this->validation = \Config\Services::validation();
        $this->users = new Model_auth();
    }
 
    public function index()
    {
        if (!empty(session()->get('username'))) {
            return redirect()->to('dashboard');
        }
        $data = [
            'title' => 'Login',
            'validation' => $this->validation,
        ];
        return view('login/form_login', $data);
    }
 
    public function login()
    {
        if (!$this->validate([
            'username' => [
                'rules' => 'required',
                'errors' => [
                    'required' => '{field} wajib diisi!',
                    'is_unique' => '{field} sudah terdaftar',
                ]
            ],
            'password' => [
                'rules' => 'required',
                'errors' => [
                    'required' => '{field} wajib diisi!',
                ]
            ],
        ])) {
            return redirect()->to('auth/index')->withInput()->with('validation', $this->validation);
        }                                                                    
        $username = $this->request->getVar('username');
        $password = $this->request->getVar('password');
 
        $users =  $this->users->where('username', $username)->first();
 
        // jika usernya ada
        if ($users) {
            // cek password
            if (password_verify($password, $users['password'])) {
                session()->set([
                    'username' => $users['username'],
                    'name' => $users['name'],
                    'logged_in' => TRUE
                ]);
                return redirect()->to('dashborad');
            } else {
                session()->setFlashdata('error', '<div class="alert alert-danger alert-dismissible fade show" role="alert">
             Password Salah!
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>');
                return redirect()->back();
            }
        } else {
            session()->setFlashdata('error', '<div class="alert alert-danger alert-dismissible fade show" role="alert">
             Username tidak terdaftar!
              <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
          </div>');
            return redirect()->back();
        }
      }
       public function logout()
    {
        session()->destroy();
        return redirect()->to('auth');
    }
}

Jika sudah membuat Controllers dengan nama Auth.php kita lanjut ke tahap 5 membuat Models yang digunakan untuk mengambil dan mengecek data user ketika fungsi login dijalankan.

Membuat Models Untuk Mengecek User

Buka folder app/Models dan buat file baru dengan nama Model_auth.php , kemudia isikan script berikut : 

<?php 
namespace App\Models;
 
use CodeIgniter\Model;
 
class Model_auth extends Model
{
    protected $DBGroup          = 'default';
    protected $table            = 'users';
    protected $primaryKey       = 'username';
    protected $useAutoIncrement = false;
    protected $insertID         = 0;
    protected $returnType       = 'array';
    protected $useSoftDeletes   = false;
    protected $protectFields    = true;
    protected $allowedFields    = [
        'username', 'password', 'name', 'created_at', 'updated_at'
    ];
 
    // Dates
    protected $useTimestamps = false;
    protected $dateFormat    = 'datetime';
    protected $createdField  = 'created_at';
    protected $updatedField  = 'updated_at';
    protected $deletedField  = 'deleted_at';
 
    // Validation
    protected $validationRules      = [];
    protected $validationMessages   = [];
    protected $skipValidation       = false;
    protected $cleanValidationRules = true;
 
    // Callbacks
    protected $allowCallbacks = true;
    protected $beforeInsert   = [];
    protected $afterInsert    = [];
    protected $beforeUpdate   = [];
    protected $afterUpdate    = [];
    protected $beforeFind     = [];
    protected $afterFind      = [];
    protected $beforeDelete   = [];
    protected $afterDelete    = [];
}
 

Langkah selanjutnya adalah langkah ke-6 yaitu membuat file Views untuk tampilan halaman login. Buka folder app/Views kemudian tambjakan file baru dengan nama form_login.php, kemudian isikan dengan script dibawah :

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Form | Login</title>

    <link rel="stylesheet" href="<?= base_url(); ?>/dist/css/bootstrap.min.css">

    <style>

        html,

        body {

            height: 100%;

        }

        body {

            display: flex;

            align-items: center;

            padding-top: 40px;

            padding-bottom: 40px;

            background-color: #f5f5f5;

        }

        .form-signin {

            width: 100%;

            max-width: 450px;

            padding: 15px;

            margin: auto;

        }

        .form-signin .checkbox {

            font-weight: 400;

        }

        .form-signin .form-floating:focus-within {

            z-index: 2;

        }

        .form-signin input[type="username"] {

            margin-bottom: -1px;

            border-bottom-right-radius: 0;

            border-bottom-left-radius: 0;

        }

        .form-signin input[type="password"] {

            margin-bottom: 10px;

            border-top-left-radius: 0;

            border-top-right-radius: 0;

        }

    </style>

</head>

<body class="">

    <main class="form-signin">

        <!-- Outer Row -->

        <div class="row justify-content-center">

            <div class="col-12 my-5 pt-5">

                <div class="card o-hidden border-0 shadow-lg my-5">

                    <div class="card-body p-5">

                        <div class="text-center">

                            <h1 class="h4 text-gray-900 mb-4">Sign in to start your session</h1>

                        </div>

                        <?= session()->getFlashdata('error'); ?>

                        <form action="<?= base_url('auth/login'); ?>" method="post">

                            <?= csrf_field(); ?>

                            <div class="form-floating mb-2">

                                <input type="text" name="username" class="form-control 

                                <?= ($validation->hasError('username')) ? 'is-invalid' : ''; ?>" 

                                id="username" autocomplete="off" placeholder="example">

                                <label for="">Username</label>

                                <div class="invalid-feedback">

                                    <?= $validation->getError('username'); ?>

                                </div>

                            </div>

                            <div class="form-floating">

                                <input type="password" name="password" class="form-control 

                            <?= ($validation->hasError('password')) ? 'is-invalid' : ''; ?>" 

                            id="password" autocomplete="off" placeholder="example">

                                <label for="">Password</label>

                                <div class="invalid-feedback">

                                    <?= $validation->getError('password'); ?>

                                </div>

                            </div>

                            <div class="text-center mt-3">

                                <button type="submit" class="col-12 btn btn-primary btn-user btn-block">

                                    Login

                                </button>

                            </div>

                        </form>

                        <hr>

                        <div class="text-center">

                            <a class="small" href="forgot-password.html">Forgot Password?</a>

                        </div>

                        <div class="text-center">

                            <a class="small" href="register.html">Create an Account!</a>

                        </div>

                    </div>

                </div>

            </div>

        </div>

    </main>

    <script src="<?= base_url(); ?>/dist/js/bootstrap.bundle.min.js" 

    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 

    crossorigin="anonymous"></script>

</body>

</html>

Lanjut ke Step ke ke-6 yaitu membuat Controllers Dashboard

Membuat Controllers Dashboard Untuk Tampilan Halaman Setelah Berhasil Login

Buka app/Controllers, kemudian tambahkan Controllers baru dengan nama Dashboard.php. Setelah itu isikan script berikut :

<?php 
namespace App\Controllers;
 
class Dashboard extends BaseController
{
    public function index()
    {
        $data['title'] = 'Dashboard';
        return view('dashboard',$data);
    }
}

lanjut ke tahap atau langkah ke-8 yaitu membuat  Views Dashboard

Membuat Views Dashboard

Buka kembali folder app/Views dan tambahkan file baru dengan nama dashboard.php, kemudian isikan dengan script berikut : 

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title><?= $title; ?></title>

    <link rel="stylesheet" href="<?= base_url(); ?>/bootstrap-icons-1.8.1/bootstrap-icons.css">

    <link rel="stylesheet" href="<?= base_url(); ?>/dist/css/bootstrap.min.css">

</head>

<body>

    <nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Tenth navbar example">

        <div class="container-fluid">

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" 

                data-bs-target="#navbarsExample08" 

                aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">

                <span class="navbar-toggler-icon"></span>

            </button>

            <div class="collapse navbar-collapse justify-content-md-center" id="navbarsExample08">

                <ul class="navbar-nav">

                    <li class="nav-item">

                        <a class="nav-link active" aria-current="page" href="#">Dahsboard</a>

                    </li>

                    <li class="nav-item">

                        <a class="nav-link" href="#">Link</a>

                    </li>

                    <li class="nav-item">

                        <a class="nav-link" href="<?= base_url('logout'); ?>">

                        <i class="bi bi-box-arrow-right"></i> Logout

                        </a>

                    </li>

                </ul>

            </div>

        </div>

    </nav>

    <div class="container-fluid">

        <div class="mt-5">

            <h4>Selamat Datang ! <?= session()->get('name'); ?></h4>

        </div>

    </div>

    <script src="<?= base_url(); ?>/dist/js/bootstrap.bundle.min.js" 

        integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" 

        crossorigin="anonymous"></script>

</body>

</html>

Langkah ke-9 adalah membuat Routes untuk Proses Login

Membuat Routes Login

Buka file Routes.php pada folder app/Config, kemudia cari file dengan nama Routes.php lalu tambahkan script berikut :

$routes->get('/auth', 'Auth::index');

$routes->post('/auth/login', 'Auth::login');

$routes->get('/login', 'Auth::login');

$routes->get('/logout', 'Auth::logout');

Kemudian ubah Routes default

Sebelum diubah :

$routes->get('/', 'Home::index');

Setelah diubah :

$routes->get('/', 'Dashboard::index');

 

Sehingga Routesnya menjadi sebagai berikut :

$routes->get('/', 'Dashboard::index');

$routes->get('/auth', 'Auth::index');

$routes->post('/auth/login', 'Auth::login');

$routes->get('/login', 'Auth::login');

$routes->get('/logout', 'Auth::logout');

Uji Coba atau Testing Fitur Login

Jalankan local development server, lalu akses URL berikut : http://localhost:8080/auth maka akan tampil halaman login seperti gambar dibawah :

Ketikan username dan password sebagai berikut :

Username : admin

Password  : admin1

Kemudian klik tombol login, maka kita akan diarahkan ke halaman Dashboard

Sampai sini harusnya Fitur login kita sudah bisa digunakan, hanya saja tidak ada fitur pembatasan akses.

Contoh: 

Sebelum kita masuk ke dashboard kita harus melalui login terlebih dahulu, tetapi karena fitur login kita belum memiliki pembatasan akses maka User bisa langsung masuk ke halaman Dashboard tanpa harus login terlebih dahulu dengan mengetik kan URL berikut : http://localhost:8080/dashboard

Langkah ke-10 "Membuat Pembatasan Akses dengan menggunakan Filter"

Membuat Pembatasan Akses dengan menggunakan Filter

Filter ini termasuk jenis Controllers, dengan menggunakan Filter ini, kita bisa menjalankan method tertentu pada Controllers kita sebelum atau sesudah Controllers di eksekusi.

Buka folder Filters pada app/Filters, kemudian tambahkan file baru dengan nama UsersAuthFilter.php, kemudian isikan script berikut :

<?php 
namespace App\Filters;
 
use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use CodeIgniter\Filters\FilterInterface;
 
class UsersAuthFilter implements FilterInterface
{
    public function before(RequestInterface $request, $arguments = null)
    {
        if (is_null(session()->get('logged_in'))) {
            return redirect()->to(base_url('auth/index'));
        }
    }
    //--------------------------------------------------------------------
 
    public function after(RequestInterface $request, ResponseInterface $response, $arguments = null)
    {
        // Do something here
    }
}

tambahkan Filter yang telah kita buat ke dalam file app/Config/Filters.php

seperti gambar dibawah :

Keterangan : 

 

use \App\Filters\UsersAuthFilter adalah untuk mengakses lokasi file UsersAuthFilter yang telah kita buat sebelumnya.

Pada Public $aliases  kita menambahkan usersAuthFilter kita dengan nama alias userAuth

Pada Public $globals 

• Dibagian before kita mengaktifkan 'csrf' untuk membuat token pada form yang kita gunakan.
• usersAuth, pada bagian ini bertujuan untuk melakukan pembatasan akses halaman sebelum login, dan kita tambahkan pengecualian dengan perintah : except yang berisikan method dari Controllers Auth yaitu "auth/*" dan juga "logout", ini digunakan karena saat kita mengakses halaman login sistem tidak mengarahkan kita untuk login lagi yang mana akan membuat sistem menjadi error.

Testing UsersAuthFilter

Untuk melakukan testing, pastikan kalian belum login kedalam sistem, jika yang sudah terlanjur login silahkan logout terlebih dahulu.

Jika kalian diarahkan ke halaman login berarti Filter usersAuthLogin kita berhasil, namun jika kalian langsung masuk ke halaman Dashboard berarti ada yang salah pada Filter usersAuthFilter kalian atau Configurasi Filter nya belum sama persis seperti petunjuk diatas.

Jadi kurang lebih seperti itu ya teman-teman cara untuk membuat fitur Login dan Logout beserta Pembatasan akses nya. Bagaimana teman-teman mudah bukan?

Sampai disini dulu ya teman-teman untuk tutorial, bagaimana cara membuat login dan logout pada Codeigniter 4, jika ada yang ingin teman-teman tanyakan jangan ragu untuk bertanya pada kolom komentar dan sampai jumpa pada tutorial-tutorial selanjutnya semoga bermanfaat bye...bye ^^