Sistem Login dengan CodeIgniter 4
Artikel pada seri kedua ini kita akan membahas langkah-langkah membuat sistem login, karena artikel ini merupakan artikel berseri maka anda harus membaca dari awal supaya dapat memahami lebih rinci tentang pembahasan ini, pada artikel kali ini masih sama dengan artikel sebelumnya yaitu membahas tentang CodeIgniter 4 dan Ajax.
Membuat Tampilan Login
Kira-kira tampilan halaman login-nya seperti gambar di atas, saya mengambil contohnya dari halaman web https://bootsnipp.com/snippets/bxzmb, nantinya kita akan sedikit ubah sesuai dengan kebutuhan.
Membagi Layout Login
Buatlah sebuah file di dalam folder Views/template, kita beri nama login.php, silahkan salin baris kode berikut:
baris kode login.php
html
<!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, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<link href="<?= base_url() ?>/assets/img/logo/logo.png" rel="icon">
<title><?= $judul ?></title>
<link href="<?= base_url() ?>/assets/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="<?= base_url() ?>/assets/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<!-- css login -->
<link href="<?= base_url() ?>/assets/css/login-style.css" rel="stylesheet">
<!-- jquery -->
<script src="<?= base_url() ?>/assets/vendor/jquery/jquery.min.js"></script>
</head>
<body>
<div id="login">
<h3 class="text-center text-white pt-5"><?= $judul ?></h3>
<div class="container">
<div id="login-row" class="row justify-content-center align-items-center">
<div id="login-column" class="col-md-6">
<div id="login-box" class="col-md-12">
<!-- Login -->
<?= $this->renderSection('form') ?>
</div>
</div>
</div>
</div>
</div>
<script src="<?= base_url() ?>/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="<?= base_url() ?>/assets/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Sweet Alert 2-->
<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>
</body>
</html>
selanjutnya kita akan membuat file css, kita beri nama login-style.css lalu simpan pada folder /public/assets/css, silahkan salin baris kode berikut:
Baris kode login-style.css
css
body {
margin: 0;
padding: 0;
background-color: #6777ef;
height: 100vh;
}
#login .container #login-row #login-column #login-box {
margin-top: 50px;
max-width: 600px;
border: 1px solid #9C9C9C;
background-color: #f5f5f5;
}
#login .container #login-row #login-column #login-box .login-form {
padding: 20px;
}
Membuat View Login Index
Ini merupakan tampilan halaman login, yang akan diakses oleh user, kita akan membuat sebuah folder login dalam folder Views, lalu buatlah sebuah file dengan nama index.php di dalam folder login, perhatikan gambar berikut:
Silahkan salin baris kode berikut:
Baris kode index.php
html
<?= $this->extend('template/login'); ?>
<?= $this->section('form'); ?>
<?= form_open('login/cek', ['class' => 'login-form']); ?>
<?= csrf_field(); ?>
<h3 class="text-center text-primary">Proto Login</h3>
<div class="form-group">
<label for="username" class="text-primary">Email:</label><br>
<input type="text" name="email" id="email" class="form-control" placeholder="Email aktif">
<div class="invalid-feedback errorEmail">
</div>
</div>
<div class="form-group">
<label for="password" class="text-primary">Password:</label><br>
<input type="password" name="password" id="password" class="form-control" placeholder="Password">
<div class="invalid-feedback errorPassword">
</div>
</div>
<div class="form-group m-t-20">
<button class="btn btn-primary btn-block btnlogin" type="submit">Masuk</button>
</div>
<div class="form-group m-t-10 row text-center">
<div class="col-sm-5 m-t-20">
<a href="#" class="text-primary"><i class="fas fa-key"></i> <small>Anda lupa password ?</small></a>
</div>
<div class="col-sm-7 m-t-20">
<a href="#" class="text-primary"><i class="fas fa-user"></i> <small>Mendaftar User Baru</small></a>
</div>
</div>
<?= form_close(); ?>
<script>
$(document).ready(function() {
$('.login-form').submit(function(e) {
e.preventDefault();
$.ajax({
type: "post",
url: $(this).attr('action'),
data: $(this).serialize(),
dataType: "json",
beforeSend: function() {
$('.btnlogin').attr('disabled', 'disabled');
$('.btnlogin').html('Loading...');
},
complete: function() {
$('.btnlogin').removeAttr('disabled');
$('.btnlogin').html('Masuk');
},
success: function(response) {
//klo ada error
if (response.error) {
//error email
if (response.error.email) {
$('#email').addClass('is-invalid');
$('.errorEmail').html(response.error.email);
} else {
$('#email').removeClass('is-invalid');
$('.errorEmail').html('');
}
//error password
if (response.error.password) {
$('#password').addClass('is-invalid');
$('.errorPassword').html(response.error.password);
} else {
$('#password').removeClass('is-invalid');
$('.errorPassword').html('');
}
} //sukses
if (response.sukses) {
window.location = response.sukses.link;
}
},
error: function(xhr, ajaxOptions, thrownError) {
alert(xhr.status + "\n" + xhr.responseText + "\n" + thrownError);
}
});
return false;
});
});
</script>
<?= $this->endsection(''); ?>
Membuat Controller Login
Pada Controller Login ini, akan disusun sebuah logika yang terdiri dari percabangan untuk mencocokan data yang user input dengan data yang terdapat pada database, jika data sesuai maka user dapat mengakses sistem sesuai dengan role user tersebut, jika tidak maka sistem akan memberikan pesan kesalahan, kurang lebih diagram alir data seperti ini.
Ketika user mengisi form login berupa email dan password, jika:
- Email terdaftar dan password sesuai (fungsi verify dapat dibaca di sini), maka dapat mengakses halaman sesuai role
- Email tidak terdaftar, maka sistem akan memberikan pesan "Maaf, email tidak terdaftar"
- Email terdaftar namun tidak aktif, maka sistem akan memberikan pesan "Email tidak aktif"
- Password atau email tidak sesuai, maka sistem akan memberikan pesan "Password atau email salah"
Buatlah Controller Login dengan mengetikan perintah berikut:
css
php spark make:controller login
Nanti akan tersimpan pada folder Controller, silahkan pelajari dan salin baris kode berikut pada file Controller Login.php:
Baris kode Login.php
php
<?php
namespace App\Controllers;
use App\Controllers\BaseController;
use CodeIgniter\HTTP\ResponseInterface;
class Login extends BaseController
{
public function index()
{
// return view('template/login');
$data['judul'] = "Halaman Login";
return view('login/index', $data);
}
public function cek()
{
if ($this->request->isAJAX()) {
// tangkap variabel dari form login
$email = $this->request->getVar('email');
$password = $this->request->getVar('password');
$validation = \Config\Services::validation();
$valid = $this->validate([
'email' => [
'label' => 'Email',
'rules' => 'required|valid_email',
'errors' => [
'required' => '{field} tidak boleh kosong',
'valid_email' => 'Alamat {field} harus valid',
]
],
'password' => [
'label' => 'Password',
'rules' => 'required',
'errors' => [
'required' => '{field} tidak boleh kosong',
]
],
]);
if (!$valid) {
$msg = [
'error' => [
'email' => $validation->getError('email'),
'password' => $validation->getError('password'),
]
];
} else {
//PROSES LOGIN
//akses database
$db = \Config\Database::connect();
$query_cekuser = $db->query("SELECT user.*, role.id_role, role.role FROM user JOIN role ON role.id_role=user.id_role WHERE email='$email'");
$result = $query_cekuser->getResult();
//cek user
if (count($result) > 0) {
//lanjut ke cek password
$row = $query_cekuser->getRow();
$password_user = $row->password;
$aktif_user = $row->aktif;
if ($aktif_user == 'Y') {
if (password_verify($password, $password_user)) {
//lanjut buat session log ini
$simpan_session = [
'login' => true,
'email' => $email,
'id_role' => $row->id_role,
];
//mulai sesi masuk
session()->set($simpan_session);
$id_role = $row->id_role;
//jika id rolenya = member arahkan ke profile sisanya ke home
if ($id_role == 2) {
$msg = [
'sukses' => [
'link' => '/profile'
]
];
} else {
$msg = [
'sukses' => [
'link' => '/dashboard'
]
];
}
} else {
$msg = [
'error' => [
'password' => 'Password atau email salah'
]
];
}
} else {
$msg = [
'error' => [
'email' => 'Email tidak aktif'
]
];
}
} else {
$msg = [
'error' => [
'email' => 'Maaf, email tidak terdaftar'
]
];
}
}
echo json_encode($msg);
} else {
exit('Maaf, tidak dapat diproses');
}
}
public function keluar()
{
// akhiri sesi
session()->destroy();
return redirect()->to('/');
}
}
Membuat file Controller dan Views untuk Dashboard dan Profile
Membuat Controller Dashboard dan Profile
Pada baris kode di atas jika user berhasil login, maka akan diarahkan pada halaman Dashboard jika role user-nya adalah Admin dan halaman Profile jika role user-nya adalah member. Nah, untuk itu kita perlu membuat dua buah Controller yaitu Controller Dashboard dan Profile. Silahkan buat Controller tersebut dengan mengetikan perintah tersebut pada Terminal atau Command Line.
css
php spark make:controller dashboard
css
php spark make:controller profile
Lalu salin baris kode berikut:
Baris kode Dashboard.php
php
<?php
namespace App\Controllers;
use App\Controllers\BaseController;
use CodeIgniter\HTTP\ResponseInterface;
class Dashboard extends BaseController
{
public function index()
{
// menuju dashboard/index
$data['judul'] = "Halaman Dashboard";
return view('dashboard/index', $data);
}
}
Baris kode Profile.php
php
<?php
namespace App\Controllers;
use App\Controllers\BaseController;
use CodeIgniter\HTTP\ResponseInterface;
class Profile extends BaseController
{
public function index()
{
// menuju profile/index
$data['judul'] = "Halaman Profile";
return view('profile/index', $data);
}
}
Membuat Views Dashboard dan Profile
Selanjutnya kita akan membuat Views untuk Dashboard dan Profile, pertama silahkan buat folder Dashboard dan Profile pada folder Views, lalu buatlah file index.php pada masing-masing folder, salin baris kode berikut ini:
Baris kode Views/dashboard/index.php
html
<?= $this->extend('template/main'); ?>
<?= $this->extend('template/menu'); ?>
<?= $this->section('konten'); ?>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800"><?= $judul ?></h1>
</div>
<div class="text-center">
<img src="<?= base_url() ?>/assets/img/think.svg" style="max-height: 90px">
<h4 class="pt-3">Ini adalah halaman dashboard</h4>
</div>
<?= $this->endsection(''); ?>
Baris kode Views/profile/index.php
html
<?= $this->extend('template/main'); ?>
<?= $this->extend('template/menu'); ?>
<?= $this->section('konten'); ?>
<div class="d-sm-flex align-items-center justify-content-between mb-4">
<h1 class="h3 mb-0 text-gray-800"><?= $judul ?></h1>
</div>
<div class="text-center">
<img src="<?= base_url() ?>/assets/img/think.svg" style="max-height: 90px">
<h4 class="pt-3">Ini adalah halaman profile</h4>
</div>
<?= $this->endsection(''); ?>
Menambahkan pada Routes
Kita akan mengarahkan halaman awal supaya menampilkan Controller Login, sehingga kita akan mengubahnya pada file Routes.php, yang terdapat pada folder app/config/, silahkan pelajari kode baris berikut:
php
<?php
use CodeIgniter\Router\RouteCollection;
/**
* @var RouteCollection $routes
*/
// tampilan awal
$routes->get('/', 'Login::index');
// login
$routes->get('/login', 'Login::index');
$routes->post('/login/cek', 'Login::cek');
$routes->get('/login/keluar', 'Login::keluar');
// profile
$routes->get('/profile', 'Profile::index');
// dashboard
$routes->get('/dashboard', 'Dashboard::index');
// user
$routes->get('/user', 'User::index');
$routes->get('/user/tampildata', 'User::tampildata');
$routes->post('/user/ajax_list', 'User::ajax_list');
$routes->get('/user/tambahdata', 'User::tambahdata');
$routes->post('/user/simpandata', 'User::simpandata');
$routes->post('/user/editdata', 'User::editdata');
$routes->post('/user/updatedata', 'User::updatedata');
$routes->post('/user/editpassword', 'User::editpassword');
$routes->post('/user/updatepassword', 'User::updatepassword');
$routes->post('/user/hapus', 'User::hapus');
Uji Coba
Silahkan buka tautan localhost:8080 pada web browser, saya beri nama aplikasinya Proto Login, berikut ini adalah hasilnya:
Tidak ada komentar untuk "Sistem Login dengan CodeIgniter 4"
Posting Komentar
Komentarnya dong cuuuy :D