Pada tutorial ini Anda akan belajar bagaimana membuat Login dan Register menggunakan CodeIgniter 4.

Tidak hanya itu,

Saya juga akan berbagi kepada Anda bagaimana penggunaan filter untuk mengontrol hak akses pada route sehingga aplikasi yang akan di bangun menjadi lebih aman tanpa menulis banyak baris kode.

(Step-by-Step)

Mari kita mulai.

 

Step #1. Install CodeIgniter 4

Untuk menginstal CodeIgniter 4 dapat dilakukan dengan 2 cara yaitu: Instalasi manual dan Instalasi melalui composer.

Pada tutorial ini, saya akan menggunakan installasi manual.

Silahkan download file CodeIgniter 4 pada link berikut:

https://codeigniter.com

Kemudian extract pada web server Anda.

Jika Anda menggunakan WAMPSERVER, extract di folder: 

C:/wamp64/www

Jika Anda menggunakan XAMPP, extract di folder:

C:/xampp/htdocs

Pada tutorial ini, saya menggunakan XAMPP.

Kemudian rename (ganti nama) menjadi “login” seperti gambar berikut:

Kemudian, open folder project “login” menggunakan code editor.           

Pada tutorial ini, saya menggunakan “Visual Studio Code”, Anda dapat menggunakan Sublime Text, PHP Storm, atapun code editor lainnya.

 

Step #2. Buat Database dan Table

Buat sebuah database baru pada MySQL, Anda dapat menggunakan tools seperti SQLyog, PHPMyAdmin atau sejenisnya.

Disini saya membuat database dengan nama “login_db”.

Jika Anda membuat database dengan nama yang sama itu lebih baik.

Untuk  membuat database dengan MySQL, dapat dilakukan dengan mengeksekusi query berikut:

CREATE DATABASE login_db;

Perintah SQL diatas akan membuat sebuah database dengan nama “login_db”.

Selanjutnya, buat sebuah table di dalam database “login_db”.

Disini saya membuat sebuah table dengan nama “users”.

Jika Anda membuat table dengan nama yang sama itu lebih baik. 

Untuk membuat table “users”, dapat dilakukan dengan mengeksekusi perintah SQL berikut:

CREATE TABLE users(
    user_id INT PRIMARY KEY AUTO_INCREMENT,
    user_name VARCHAR(100),
    user_email VARCHAR(100),
    user_password VARCHAR(200),
    user_created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
) ENGINE=INNODB;

Perintah SQL diatas, akan membuat sebuah table dengan nama “users” dengan fields: user_id, user_name, user_email, user_password, dan user_created_at.

Jika Anda masih bingung bagaimana membuat table dengan MySQL, saya sarankan Anda untuk mempelajari “Data Manipulation Language (DML)” pada MySQL.

 

Step #3. Buat Koneksi ke Database

Selanjutnya, buat koneksi antara database dengan project CodeIgniter.

Temukan file env pada root project, kemudian rename (ganti nama) menjadi .env dan open file tersebut.

Kemudian temukan kode berikut:

# database.default.hostname = localhost
# database.default.database = ci4
# database.default.username = root
# database.default.password = root
# database.default.DBDriver = MySQLi

Ubah menjadi seperti berikut:

database.default.hostname = localhost
database.default.database = login_db
database.default.username = root
database.default.password = 
database.default.DBDriver = MySQLi

Selanjutnya, temukan kode berikut:

# CI_ENVIRONMENT = production

Kemudian ubah menjadi seperti berikut:

CI_ENVIRONMENT = development

Itu artinya Anda masuk ke mode development, mode ini akan membantu Anda mempermudah melacak error saat Anda membangun project.

 

Step #4. Buat file Model

Pada tutorial ini, hanya dibutuhkan satu file model yaitu “UserModel.php”.

Buat sebuah file model bernama “UserModel.php” pada folder “app/Models”, kemudian ketikan kode berikut:

<?php namespace App\Models;

use CodeIgniter\Model;

class UserModel extends Model{
    protected $table = 'users';
    protected $allowedFields = ['user_name','user_email','user_password','user_created_at'];
}

 

Step #5. Buat file Controller Register.php

Buat sebuah file controller bernama “Register.php” pada folder “app/Controllers”, kemudian ketikan kode berikut:

<?php namespace App\Controllers;

use CodeIgniter\Controller;
use App\Models\UserModel;

class Register extends Controller
{
    public function index()
    {
        //include helper form
        helper(['form']);
        $data = [];
        echo view('register', $data);
    }

    public function save()
    {
        //include helper form
        helper(['form']);
        //set rules validation form
        $rules = [
            'name'          => 'required|min_length[3]|max_length[20]',
            'email'         => 'required|min_length[6]|max_length[50]|valid_email|is_unique[users.user_email]',
            'password'      => 'required|min_length[6]|max_length[200]',
            'confpassword'  => 'matches[password]'
        ];
        
        if($this->validate($rules)){
            $model = new UserModel();
            $data = [
                'user_name'     => $this->request->getVar('name'),
                'user_email'    => $this->request->getVar('email'),
                'user_password' => password_hash($this->request->getVar('password'), PASSWORD_DEFAULT)
            ];
            $model->save($data);
            return redirect()->to('/login');
        }else{
            $data['validation'] = $this->validator;
            echo view('register', $data);
        }
        
    }

}

Pada controller “Register.php” diatas, terdapat dua function, yaitu: function index(), dan function save().

Function index(), berfungsi untuk menampilkan sebuah view benama “register”, sedangkan function save() berfungsi untuk menyimpan data ke table “users” yang ada di database sekaligus mengenkripsi password dengan fungsi password_hash().

 

Step #6. Buat file View register.php

Buat sebuah file view bernama “register.php” pada folder “app/Views”, kemudian ketikan kode berikut:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

    <title>Register</title>
  </head>
  <body>
    <div class="container">
        <div class="row justify-content-md-center">

            <div class="col-6">
                <h1>Sign Up</h1>
                <?php if(isset($validation)):?>
                    <div class="alert alert-danger"><?= $validation->listErrors() ?></div>
                <?php endif;?>
                <form action="/register/save" method="post">
                    <div class="mb-3">
                        <label for="InputForName" class="form-label">Name</label>
                        <input type="text" name="name" class="form-control" id="InputForName" value="<?= set_value('name') ?>">
                    </div>
                    <div class="mb-3">
                        <label for="InputForEmail" class="form-label">Email address</label>
                        <input type="email" name="email" class="form-control" id="InputForEmail" value="<?= set_value('email') ?>">
                    </div>
                    <div class="mb-3">
                        <label for="InputForPassword" class="form-label">Password</label>
                        <input type="password" name="password" class="form-control" id="InputForPassword">
                    </div>
                    <div class="mb-3">
                        <label for="InputForConfPassword" class="form-label">Confirm Password</label>
                        <input type="password" name="confpassword" class="form-control" id="InputForConfPassword">
                    </div>
                    <button type="submit" class="btn btn-primary">Register</button>
                </form>
            </div>
            
        </div>
    </div>
    
    <!-- Popper.js first, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
  </body>
</html>

Pada view “register.php”, kita memanggil Bootstrap 5 CDN, baik CSS dan juga JavaScript-nya.

Kunjungi URL berikut untuk info lebih lanjut tentang Bootstrap 5:

https://v5.getbootstrap.com/

Selain itu, juga terdapat sebuah form untuk register berupa: input name, email, password, dan Confirm password.

 

Step #7. Buat file Controller Login.php

Buat sebuah file Controller lagi bernama “Login.php” pada folder “app/Controllers”, kemudian ketikan kode berikut:

<?php namespace App\Controllers;

use CodeIgniter\Controller;
use App\Models\UserModel;

class Login extends Controller
{
    public function index()
    {
        helper(['form']);
        echo view('login');
    } 

    public function auth()
    {
        $session = session();
        $model = new UserModel();
        $email = $this->request->getVar('email');
        $password = $this->request->getVar('password');
        $data = $model->where('user_email', $email)->first();
        if($data){
            $pass = $data['user_password'];
            $verify_pass = password_verify($password, $pass);
            if($verify_pass){
                $ses_data = [
                    'user_id'       => $data['user_id'],
                    'user_name'     => $data['user_name'],
                    'user_email'    => $data['user_email'],
                    'logged_in'     => TRUE
                ];
                $session->set($ses_data);
                return redirect()->to('/dashboard');
            }else{
                $session->setFlashdata('msg', 'Wrong Password');
                return redirect()->to('/login');
            }
        }else{
            $session->setFlashdata('msg', 'Email not Found');
            return redirect()->to('/login');
        }
    }

    public function logout()
    {
        $session = session();
        $session->destroy();
        return redirect()->to('/login');
    }
} 

Pada controller “Login.php” diatas terdapat tiga function, yaitu: function index(), function auth(), dan function logout().

Function index() berfungsi untuk menampilkan view bernama “login” yang akan menampilkan form login.

Function auth() berfungsi untuk melakukan autentikasi beserta meng-set variable session jika autentikasi valid.

Function logout() berfungsi untuk logout beserta menghancukan variable session. 

 

Step #8. Buat file View login.php

Buat sebuah file view lagi bernama “login.php” pada folder “app/Views”, kemudian ketikan kode berikut:

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css" integrity="sha384-r4NyP46KrjDleawBgD5tp8Y7UzmLA05oM1iAEQ17CSuDqnUK2+k9luXQOfXJCJ4I" crossorigin="anonymous">

    <title>Login</title>
  </head>
  <body>
    <div class="container">
        <div class="row justify-content-md-center">

            <div class="col-6">
                <h1>Sign In</h1>
                <?php if(session()->getFlashdata('msg')):?>
                    <div class="alert alert-danger"><?= session()->getFlashdata('msg') ?></div>
                <?php endif;?>
                <form action="/login/auth" method="post">
                    <div class="mb-3">
                        <label for="InputForEmail" class="form-label">Email address</label>
                        <input type="email" name="email" class="form-control" id="InputForEmail" value="<?= set_value('email') ?>">
                    </div>
                    <div class="mb-3">
                        <label for="InputForPassword" class="form-label">Password</label>
                        <input type="password" name="password" class="form-control" id="InputForPassword">
                    </div>
                    <button type="submit" class="btn btn-primary">Login</button>
                </form>
            </div>
            
        </div>
    </div>
    
    <!-- Popper.js first, then Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.min.js" integrity="sha384-oesi62hOLfzrys4LxRF63OJCXdXDipiYWBnvTl9Y9/TRlw5xlKIEHpNyvvDShgf/" crossorigin="anonymous"></script>
  </body>
</html>

Pada view “login.php”, kita juga memanggil Bootstrap 5 CDN, baik CSS maupun JavaScript-nya.

Selain itu, juga terdapat sebuah form untuk login berupa: input email dan password.

 

Step #9. Buat file Controller Dashboard.php

Selain Controller Register.php dan Login.php, buat sebuah file Controller lagi bernama “Dashboard.php” pada folder “app/Controllers”.

Kemudian ketikan kode berikut:

<?php namespace App\Controllers;

use CodeIgniter\Controller;

class Dashboard extends Controller
{
    public function index()
    {
        $session = session();
        echo "Welcome back, ".$session->get('user_name');
    }
}

Pada Controller “Dashboard.php” hanya terdapat satu function, yaitu function index() yang berfungsi untuk menampilkan text “Welcome Back [username yang login]”.

Tujuan dari Controller ini nantinya untuk di proteksi agar user tidak dapat mengakses Dashboard tanpa login.

Dengan demikian, Anda akan punya gambaran secara umum bagaimana mem-proteksi halaman atau route dari user yang tidak berwenang.

 

Step #10. Buat file Filters Auth.php

CodeIgniter 4 menyediakan fitur Filter yang berfungsi untuk menghandle Before Request ataupun After Request.

Fitur ini sangat bermanfaat untuk menangani pengecekan atau memvalidasi setiap request atau beberapa request yang di tulis dengan kode yang sama.

Mungkin terdengar rumit, tapi sebenarnya tidak.

Pada kasus ini, kita akan mem-proteksi function index() pada Controller Dashboard.php dari users yang belum login menggunakan Filter.

Dengan demikian, Anda akan memiliki gambaran secara umum seperti apa cara kerja Filter pada CodeIgniter 4.

Buat sebuah file Filter bernama “Auth.php” pada folder “app/Filters”, kemudian ketikan kode berikut:

<?php namespace App\Filters;

use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use CodeIgniter\Filters\FilterInterface;

class Auth implements FilterInterface
{
    public function before(RequestInterface $request, $arguments = null)
    {
        // jika user belum login
        if(! session()->get('logged_in')){
            // maka redirct ke halaman login
            return redirect()->to('/login'); 
        }
    }

    //--------------------------------------------------------------------

    public function after(RequestInterface $request, ResponseInterface $response, $arguments = null)
    {
        // Do something here
    }
}

Pada Filter “Auth.php” diatas, terdapat 2 function yaitu: function before() dan function after().

Pada kasus ini, kita hanya bermain di function before().

Function before, berfungsi untuk memvalidasi request sebelum request itu sendiri dilakukan.

Pada filter “Auth.php” diatas, kita me-redirect users ke halaman login jika mengakses suatu halaman sebelum login.

Hal ini bisa berlaku secara global, dengan kata lain berlaku untuk setiap request, atau bisa juga untuk beberapa request saja.

Pada kasus ini, kita hanya menggunakannya untuk mem-proteksi Controller “Dashboard.php”.

Jadi, kita tidak memberlakukannya secara global, karena kita ingin Controller Login.php dan Register.php tetap dapat diakses tanpa login.

Selanjutnya buka file “Filters.php” yang terdapat pada Folder “app/Config”, kemudian temukan kode berikut:

public $aliases = [
      'csrf'     => CodeIgniter\Filters\CSRF::class,
      'toolbar'  => CodeIgniter\Filters\DebugToolbar::class,
      'honeypot' => CodeIgniter\Filters\Honeypot::class,
];

Kemudian ubah menjadi seperti berikut:

public $aliases = [
      'csrf'     => CodeIgniter\Filters\CSRF::class,
      'toolbar'  => CodeIgniter\Filters\DebugToolbar::class,
      'honeypot' => CodeIgniter\Filters\Honeypot::class,
      'auth'     => App\Filters\Auth::class,
];

Pada kode diatas, kita menambahkan satu baris kode tambahan yaitu “auth”.

Selanjutnya buka file “Routes.php” yang terdapat pada Folder “app/Config”, kemudian temukan kode berikut:

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

Kemudian ubah menjadi seperti berikut:

$routes->get('/', 'Home::index');
$routes->get('/dashboard', 'Dashboard::index',['filter' => 'auth']);

Pada kode diatas, kita menambahkan satu route yaitu dashboard yang di proteksi oleh filter “auth” yang dibuat sebelumnya.

Sekarang, jika user mengakses Dashboard tanpa login, maka akan otomatis di arahkan ke halaman Login.

Jika Anda memiliki halaman lain yang ingin di proteksi, maka tinggal tambahkan di route dan tambahkan juga filter “auth”-nya, maka halaman tersebut tidak dapat diakses sebelum login tanpa harus membuat file Filter lagi.

Keren bukan?

 

Step #11. Testing

Untuk memastikan apakah aplikasi yang dibangun berjalan dengan baik, lakukan pengujian dengan mengetikan perintah berikut pada Terminal / Command Prompt:

php spark serve

Seperti gambar berikut:

Selanjutnya kunjungi URL berikut untuk Register user baru:

http://localhost:8080/register

Jika berjalan dengan baik, maka akan tampil form Sign Up seperti berikut:

Kemudian masukan Name, Email, Password, dan Confirm Password, kemudian klik tombol “Register” untuk mendaftar.

Jika register berhasil, maka akan langsung diarahkan ke form login seperti berikut:

Masukan Email dan Password yang didaftarkan sebelumnya, kemudian klik tombol “Login” untuk login.

Jika login berhasil, maka akan langsung diarahkan ke halaman dashboard seperti berikut:

Untuk Logout, silahkan akses URL berikut:

http://localhost:8080/login/logout

Setelah Logout, silahkan akses halaman dashboard untuk memastikan apakah halaman dashboard dapat di akses tanpa login.

Kunjungi URL berikut untuk mengakses halaman dashboard:

http://localhost:8080/dashboard

Jika diarahkan kembali ke halaman login, maka kita berhasil memproteksi halaman dashboard dari user yang tidak berwenang.

Related: Tutorial Lengkap CRUD CodeIgniter 4 dan Vue JS (Full-Stack)

Kesimpulan:

Pembahasan kali ini adalah bagaimana membuat Login dan Register menggunakan CodeIgniter 4.

Tidak hanya itu, Anda juga telah belajar bagaimana meng-set variable session dengan CodeIgniter 4, mengenkripsi password, dan memproteksi route menggunakan Filters.

Jadi tunggu apalagi, Let’s Coding!

Download Source Code