<![CDATA[Catatan Harian: Membuat Halaman Login }]]> https://sharka.site/3blog/pages/view/62/membuat-halaman-login https://sharka.site/3blog/pages/view/62/membuat-halaman-login Wed, 22 Oct 2025 17:15:47 +0800 https://sharka.site/3blog/pages/view/62/membuat-halaman-login <![CDATA[Membuat Halaman Login ]]>

🔐 Tutorial Membuat Halaman Login di CodeIgniter 4

Lengkap dengan Model, Controller, Routes, View, dan Filter

Pada tutorial ini, kita akan membuat sistem Login sederhana di CodeIgniter 4 yang menggunakan tabel pengguna berisi username, password, dan level (admin atau user). Setelah berhasil login, pengguna akan diarahkan ke halaman berbeda sesuai levelnya.

📊 1. Struktur Database

Buat tabel users pada database Anda, misalnya dengan SQL berikut:

CREATE TABLE users (
  id INT AUTO_INCREMENT PRIMARY KEY,
  username VARCHAR(50) NOT NULL,
  password VARCHAR(255) NOT NULL,
  level ENUM('admin','user') DEFAULT 'user'
);

Contoh data awal:

INSERT INTO users (username, password, level)
VALUES 
('admin', PASSWORD('12345'), 'admin'),
('user1', PASSWORD('12345'), 'user');
Catatan: Saat di PHP/CI4 gunakan password_hash() untuk menyimpan password, bukan fungsi PASSWORD() MySQL.

🧩 2. Membuat Model UserModel.php

Buat file: app/Models/UserModel.php

<?php
namespace App\Models;
use CodeIgniter\Model;
class UserModel extends Model
{
    protected $table = 'users';
    protected $primaryKey = 'id';
    protected $allowedFields = ['username', 'password', 'level'];
    public function getUser($username)
    {
        return $this->where('username', $username)->first();
    }
}

🧭 3. Membuat Controller Auth.php

Buat file: app/Controllers/Auth.php

<?php
namespace App\Controllers;
use App\Models\UserModel;
class Auth extends BaseController
{
    public function login()
    {
        return view('auth/login');
    }
    public function doLogin()
    {
        $session = session();
        $model = new UserModel();
        $username = $this->request->getPost('username');
        $password = $this->request->getPost('password');
        $data = $model->getUser($username);
        if ($data) {
            $pass = $data['password'];
            if (password_verify($password, $pass)) {
                $ses_data = [
                    'id' => $data['id'],
                    'username' => $data['username'],
                    'level' => $data['level'],
                    'logged_in' => TRUE
                ];
                $session->set($ses_data);
                if ($data['level'] == 'admin') {
                    return redirect()->to('/admin/dashboard');
                } else {
                    return redirect()->to('/user/dashboard');
                }
            } else {
                $session->setFlashdata('msg', 'Password salah!');
                return redirect()->back();
            }
        } else {
            $session->setFlashdata('msg', 'Username tidak ditemukan!');
            return redirect()->back();
        }
    }
    public function logout()
    {
        session()->destroy();
        return redirect()->to('/login');
    }
}

🖥️ 4. Membuat View Login

Buat file: app/Views/auth/login.php

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login - CodeIgniter 4</title>
  <style>
    body {font-family: 'Poppins', sans-serif;background:#f5f6fa;}
    .login-box {width:320px;margin:100px auto;background:white;padding:30px;border-radius:12px;box-shadow:0 5px 15px rgba(0,0,0,0.1);}
    input {width:100%;padding:10px;margin:8px 0;border:1px solid #ccc;border-radius:8px;}
    button {width:100%;padding:10px;background:#023e8a;color:#fff;border:none;border-radius:8px;cursor:pointer;}
    button:hover {background:#0353a4;}
    .msg {color:red;text-align:center;font-size:13px;margin-bottom:10px;}
  </style>
</head>
<body>
  <div class="login-box">
    <h2 style="text-align:center;color:#023e8a;margin-bottom:20px;">Form Login</h2>
    <?php if (session()->getFlashdata('msg')): ?>
      <div class="msg"><?= session()->getFlashdata('msg'); ?></div>
    <?php endif; ?>
    <form action="/doLogin" method="post">
      <input type="text" name="username" placeholder="Username" required>
      <input type="password" name="password" placeholder="Password" required>
      <button type="submit">Login</button>
    </form>
  </div>
</body>
</html>

🛣️ 5. Menambahkan Routes

Edit file: app/Config/Routes.php

$routes->get('/login', 'Auth::login');
$routes->post('/doLogin', 'Auth::doLogin');
$routes->get('/logout', 'Auth::logout');
$routes->get('/admin/dashboard', 'Admin::index', ['filter' => 'auth']);
$routes->get('/user/dashboard', 'User::index', ['filter' => 'auth']);

🧱 6. Membuat Filter Autentikasi

Buat file: app/Filters/AuthFilter.php

<?php
namespace App\Filters;
use CodeIgniter\HTTP\RequestInterface;
use CodeIgniter\HTTP\ResponseInterface;
use CodeIgniter\Filters\FilterInterface;
class AuthFilter implements FilterInterface
{
    public function before(RequestInterface $request, $arguments = null)
    {
        if (! session()->get('logged_in')) {
            return redirect()->to('/login');
        }
    }
    public function after(RequestInterface $request, ResponseInterface $response, $arguments = null)
    {
        // kosong
    }
}

⚙️ 7. Daftarkan Filter ke Config/Filters.php

Edit file: app/Config/Filters.php dan tambahkan di bagian aliases:

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

🎉 8. Hasil Akhir

  • Login berhasil akan menyimpan sesi dan mengarahkan ke halaman dashboard sesuai level.
  • Jika belum login, pengguna akan otomatis diarahkan ke halaman login.
  • Gunakan session()->get('level') di halaman lain untuk menampilkan peran pengguna.

Kesimpulan:

Dengan langkah-langkah di atas, Anda telah membuat sistem login sederhana di CodeIgniter 4 yang aman menggunakan password_hash(), sesi login, dan filter autentikasi. Anda bisa mengembangkannya dengan fitur tambahan seperti remember me, manajemen pengguna, atau login multi-level lanjutan.

 

Contoh : 

==== 

🔐 Tutorial Membuat Login dengan CodeIgniter 4

Lengkap dengan Model, View, Controller, Routes, dan Filter

📘 Pendahuluan

CodeIgniter 4 (CI4) mendukung konsep MVC dan sistem routing yang modern. Dalam tutorial ini, kita akan membuat sistem login sederhana dengan tabel database berisi:

users
├── id (INT, AUTO_INCREMENT)
├── username (VARCHAR)
├── password (VARCHAR)
└── level (ENUM: 'admin', 'user')

🧠 Struktur Folder CI4

/app
 ├── Controllers
 │    ├── Login.php
 │    ├── Dashboard.php
 │
 ├── Models
 │    └── UserModel.php
 │
 ├── Views
 │    ├── login.php
 │    ├── dashboard_admin.php
 │    └── dashboard_user.php
 │
 ├── Filters
 │    └── AuthFilter.php

1️⃣ Membuat Model: UserModel.php

<?php
namespace App\Models;

use CodeIgniter\Model;

class UserModel extends Model
{
    protected $table = 'users';
    protected $primaryKey = 'id';
    protected $allowedFields = ['username', 'password', 'level'];

    public function getUser($username)
    {
        return $this->where('username', $username)->first();
    }
}

2️⃣ Membuat Controller: Login.php

<?php
namespace App\Controllers;

use App\Models\UserModel;

class Login extends BaseController
{
    public function index()
    {
        return view('login');
    }

    public function auth()
    {
        $session = session();
        $model = new UserModel();
        $username = $this->request->getPost('username');
        $password = $this->request->getPost('password');
        $data = $model->getUser($username);

        if ($data) {
            if (password_verify($password, $data['password'])) {
                $sessionData = [
                    'id' => $data['id'],
                    'username' => $data['username'],
                    'level' => $data['level'],
                    'logged_in' => true
                ];
                $session->set($sessionData);

                if ($data['level'] === 'admin') {
                    return redirect()->to('/dashboard/admin');
                } else {
                    return redirect()->to('/dashboard/user');
                }
            } else {
                $session->setFlashdata('msg', 'Password salah.');
                return redirect()->to('/login');
            }
        } else {
            $session->setFlashdata('msg', 'Username tidak ditemukan.');
            return redirect()->to('/login');
        }
    }

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

3️⃣ Membuat View: login.php

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Login</title>
  <style>
    body{font-family:Poppins,sans-serif;background:#f1f3f6;display:flex;align-items:center;justify-content:center;height:100vh;}
    .login-box{background:#fff;padding:30px;border-radius:12px;width:320px;box-shadow:0 6px 12px rgba(0,0,0,0.08);}
    input{width:100%;padding:10px;margin:6px 0;border:1px solid #ccc;border-radius:6px;}
    button{width:100%;padding:10px;background:#0077b6;color:#fff;border:none;border-radius:6px;cursor:pointer;}
    button:hover{background:#023e8a;}
  </style>
</head>
<body>
  <div class="login-box">
    <h3>🔐 Login</h3>
    <?php if(session()->getFlashdata('msg')): ?>
      <p style="color:red;"><?= session()->getFlashdata('msg'); ?></p>
    <?php endif; ?>
    <form method="post" action="/login/auth">
      <input type="text" name="username" placeholder="Username" required>
      <input type="password" name="password" placeholder="Password" required>
      <button type="submit">Login</button>
    </form>
  </div>
</body>
</html>

4️⃣ Membuat Controller Dashboard

<?php
namespace App\Controllers;

class Dashboard extends BaseController
{
    public function admin()
    {
        echo view('dashboard_admin');
    }

    public function user()
    {
        echo view('dashboard_user');
    }
}

5️⃣ Membuat Filter: AuthFilter.php

<?php
namespace App\Filters;

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

class AuthFilter implements FilterInterface
{
    public function before(RequestInterface $request, $arguments = null)
    {
        if (!session()->get('logged_in')) {
            return redirect()->to('/login');
        }
    }

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

6️⃣ Daftarkan Filter ke Config/Filters.php

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

7️⃣ Tambahkan Route

$routes->get('/login', 'Login::index');
$routes->post('/login/auth', 'Login::auth');
$routes->get('/logout', 'Login::logout');

$routes->group('dashboard', ['filter' => 'auth'], function($routes){
    $routes->get('admin', 'Dashboard::admin');
    $routes->get('user', 'Dashboard::user');
});

8️⃣ Menambahkan Extend & Section (untuk View Dashboard)

<!-- layout_main.php -->
<!DOCTYPE html>
<html>
<head><title>Dashboard</title></head>
<body>
  <header><h3>Halo, <?= session('username'); ?></h3></header>
  <main>
    <?= $this->renderSection('content'); ?>
  </main>
</body>
</html>

<!-- dashboard_admin.php -->
<?= $this->extend('layout_main'); ?>
<?= $this->section('content'); ?>
  <h2>Selamat datang, Admin!</h2>
<?= $this->endSection(); ?>

💬 Kesimpulan:

Dengan langkah-langkah di atas, Anda sudah memiliki sistem login dasar di CI4 lengkap dengan autentikasi, session, dan proteksi halaman dengan filter.

]]> Muh.Taqiuddin.S