Tutorial Codeigniter 4 ~ Login dan Register

6 min readApr 25, 2022

Halo teman teman semuanya, kali ini kita akan membahas cara membuat login dan register menggunakan CI4.

1. Install CodeIgniter 4

Untuk proses install codeigniter 4, teman semua dapat di lakukan dengan dua cara, dengan cara manual dan dengan cara menggunakan composer. saya sarakan menggunkaan cara comooser.

Install Dengan Cara manual

Silahkan download file CodeIgniter 4 pada link berikut:

https://codeigniter.com

Kemudian extract pada web server Anda.

Jika Anda menggunakan XAMPP, extract di folder:

C:\xampp\htdocs

Jika Anda menggunakan WAMPSERVER, extract di folder:

C:/wamp64/www

Rename nama foldernya, sesuaikan dengan nama project teman teman semua.

Install Dengan Composer

Di folder di atas root proyek Anda:

composer create-project codeigniter4/appstarter project-root

Perintah di atas akan membuat folder “project-root”.

Jika Anda menghilangkan argumen “project-root”, perintah akan membuat folder “appstarter”, yang dapat diganti namanya sesuai kebutuhan.

Jika Anda tidak membutuhkan atau ingin menginstal phpunit, dan semua dependensi penyusunnya, tambahkan opsi –no-dev ke akhir baris perintah di atas. Itu hanya akan menghasilkan kerangka kerja, dan tiga dependensi tepercaya yang kami bundel, yang diinstal oleh komposer.

Contoh perintah instalasi seperti itu, menggunakan “appstarter” project-root default:

komposer create-project codeigniter4/appstarter –no-dev

2. Buat Database dan Table

Sebelum membuat tabel teman teman di haruskan setting .env pada codeigniter 4.

Selanjutnya, temukan kode berikut:

1# CI_ENVIRONMENT = production

Kemudian ubah menjadi seperti berikut:

1CI_ENVIRONMENT = development

Teman semuanya, untuk buat database menggunakan codeigniter 4 dapat di lakukan dengan dua cara kembali. Dapat di lakukan dengan cara manual dengan membuat di phpmyadmin atau teman semua dapat membuat dengan migration. Saya rekomendasikan menggunakan migration.

Silahkan teman semua, buka terminalnya kita akan membuat data migration.

Kemudian ketik perintah berikut untuk membuat file migrasi:

php spark migrate:create users

Perintah tersebut akan membuat file dengan nama 2022–04–25–061811_Users.php, di dalam folder, app/Database/Migration.

Tanggal dan waktu di awal nama file menandakan versi dari migrasi.

Berikut ini adalah isi file 2022–04–25–061811_Users.php.

<?phpnamespace App\Database\Migrations;use CodeIgniter\Database\Migration;class Users extends Migration
{
    public function up()
    {
        //
    }    public function down()
    {
        //
    }
}

Pada class Users terdapat dua method, yakni up() dan down(). Method ini nantinya akan dijalankan saat melakukan migrasi.

Method up() akan dijalankan saat melakukan migrasi, sedangkan down() saat melakukan rollback.

Silahkan ubah kode pada file 2022-04-25-061811_Users.php menjadi seperti ini:

<?phpnamespace App\Database\Migrations;use CodeIgniter\Database\Migration;class Users extends Migration
{
    public function up()
    {
		$this->forge->addField([
			'id'          => [
				'type'           => 'INT',
				'constraint'     => 5,
				'unsigned'       => true,
				'auto_increment' => true
			],
			'name'       => [
				'type'           => 'VARCHAR',
				'constraint'     => '255'
			],
			'email'      => [
				'type'           => 'VARCHAR',
				'constraint'     => '255',
			],
			'password' => [
				'type'           => 'VARCHAR',
				'constraint'     => '255',
			],
			'created_at'      => [
				'type'           => 'TIMESTAMP',
				'null'           => true,
			],
		]);		// primary key
		$this->forge->addKey('id', TRUE);		// tabel users
		$this->forge->createTable('users', TRUE);
    }    public function down()
    {
        $this->forge->dropTable('users');
    }
}

Oke, sekarang mari kita coba lakuka migrasi pertama.

Lakukan migrasi dengan perintah:

php spark migrate

Output :

3. 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 = ['name','email','password','created_at'];
}

4. Buat file Controller Register.php

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

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().

5. Buat file View register.php

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

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.

6. 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('email', $email)->first();
        if($data){
            $pass = $data['password'];
            $verify_pass = password_verify($password, $pass);
            if($verify_pass){
                $ses_data = [
                    'id'       => $data['id'],
                    'name'     => $data['name'],
                    'email'    => $data['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.

7. 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.

8. 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('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.

9. 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:

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:

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

10. Testing

php spark serve

Cara Menghilangkan Index.php di CodeIgniter

Cara Mengirim permintaan AJAX dengan token CSRF di CodeIgniter 3

Demikian tutorial pembahasan Codeigniter kali ini, semoga bermanfaat, jika ada pertanyaan silahkan tinggalkan komentarnya.

Terimakashi……………