Langkah awal untuk membuat fitur login adalah dengan membuat tabel member pada database belajarci4 yang sudah kita buat, isi field nya adalah sebagai berikut :
Setelah tabel terbuat, sekarang kita akan membuat sebuah controller Login sebagai berikut :
<?php
namespace App\Controllers;
use App\Models\ModelLogin;
class Login extends BaseController
{
public function index()
{
//$buku = $this->BukuModel->findAll();
$data = [
'title' => 'Member Login',
//'buku' => $this->BukuModel->getBuku()
];
return view('login/login', $data);
}
}Selanjutnya kita akan membuat sebuah halaman login.php pada folder Views untuk menampilkan data yang diperintahkan oleh Controller Login sebagai berikut :
<!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="">
<title><?= $title; ?></title>
<!-- Custom fonts for this template-->
<link href="<?= base_url() ?>/sb-admin/vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
<!-- Custom styles for this template-->
<link href="<?= base_url() ?>/sb-admin/css/sb-admin-2.min.css" rel="stylesheet">
</head>
<body class="bg-gradient-secondary">
<div class="container">
<!-- Outer Row -->
<div class="row justify-content-center">
<div class="card o-hidden border-0 shadow-lg my-5 col-lg-7 mx-auto">
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4">LOGIN</h1>
</div>
<?= csrf_field(); ?>
<form class="user" method="post" action="login/cekUser">
<div class="form-group">
<?php
//if(session()->getFlashdata('errIdUser')){
// $isInvalidUser = 'is-invalid';
//}else {
// $isInvalidUser = '';
//}
// atau dengan cara menggunakan ternari
$isInvalidUsername = (session()->getFlashdata('errUsername')) ? 'is-invalid' : '';
?>
<input type="text" class="form-control form-control-user <?= $isInvalidUsername ?>" name="username" id="username" placeholder="Inputkan Username" autofocus>
<?php
if (session()->getFlashdata('errUsername')) {
echo '<div id="validationServer03Feedback" class="invalid-feedback">
' . session()->getFlashdata('errUsername') . '
</div>';
}
?>
</div>
<div class="form-group">
<?php
$isInvalidPassword = (session()->getFlashdata('errPassword')) ? 'is-invalid' : '';
?>
<input type="password" class="form-control form-control-user <?= $isInvalidPassword ?>" name="password" id="password" placeholder="Inputkan Password">
<?php
if (session()->getFlashdata('errPassword')) {
echo '<div id="validationServer03Feedback" class="invalid-feedback">
' . session()->getFlashdata('errPassword') . '
</div>';
}
?>
</div>
<button type="submit" class="btn btn-primary btn-user btn-block"> Login </button>
</form>
<hr>
<div class="text-center">
<a class="small" href="<?= base_url() ?>/login/registrasi">Buat Akun Baru</a></a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="<?= base_url() ?>/sb-admin/vendor/jquery/jquery.min.js"></script>
<script src="<?= base_url() ?>/sb-admin/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="<?= base_url() ?>/sb-admin/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="<?= base_url() ?>/sb-admin/js/sb-admin-2.min.js"></script>
</body>
</html>Selanjutnya silahkan setting terlebih dahulu template yang digunakan pada halaman login, untuk template silahkan download pada link TEMPLATE LOGIN setelah terdownload silahkan simpan pada folder public/sb-admin
Maka tampilanya akan seperti gambar berikut :
Setelah tampilan berhasil kita buat sekarang kia akan membuat sebuah method cekUser pada Controller Login, tujuannya adalah ketika tombol Login di klik maka akan langsung diarahkan kedalam Controller Buku dan akan menampilkan view detail data buku, Code nya sebagai berikut :
public function cekUser()
{
$username = $this->request->getPost('username');
$password = $this->request->getPost('password');
$validation = \Config\Services::validation();
$valid = $this->validate([
'username' => [
'label' => 'Username',
'rules' => 'required',
'errors' => [
'required' => '{field} tidak boleh kosong'
]
],
'password' => [
'label' => 'Password',
'rules' => 'required',
'errors' => [
'required' => '{field} tidak boleh kosong'
]
],
]);
if (!$valid) {
$sessError = [
'errUsername' => $validation->getError('username'),
'errPassword' => $validation->getError('password'),
];
session()->setFlashdata($sessError);
return redirect()->to(site_url('login'));
} else {
$modelLogin = new ModelLogin();
$username = $this->request->getVar('username');
$password = $this->request->getVar('password');
$dataUser = $modelLogin->where([
'username' => $username,
])->first();
if ($dataUser == null) {
$sessError = [
'errUsername' => 'Maaf username tidak terdaftar',
];
session()->setFlashdata($sessError);
return redirect()->to(site_url('login'));
} else {
$passwordUser = $dataUser['password'];
if (password_verify($password, $passwordUser)) {
$level = $dataUser['level'];
$simpan_session = [
'username' => $username,
'level' => $level,
];
session()->set($simpan_session);
return redirect()->to(base_url('buku'));
} else {
$sessError = [
'errPassword' => 'Password anda salah',
];
session()->setFlashdata($sessError);
return redirect()->to(site_url('login'));
}
}
}
}Pada method cekUser diatas ada proses Validasi yang digunakan untuk membuat proses login tidak dilakukan sembarangan dan bertujuan sebagai fitur keamanan pada codeigniter 4.
Selanjutnya, Agar kita dapat mensimulasikannya silahkan tambahkan 1 data pada tabel member sebagai contoh.
Jika sudah silahkan di coba proses loginnya. Jika berhasil login maka tampilannya adalah sebagai berikut :
Untuk menambahkan tombol Logout disebelah kanan, silahkan tabahkan code berikut pada halaman Views/template/header
<div class="collapse navbar-collapse" id="navbar">
<ul class="navbar-nav me-auto my-2 my-lg-0 navbar-nav-scroll" style="--bs-scroll-height: 100px;">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="/">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="/halaman/aboutme">About Me</a>
</li>
<?php if (session()->level == 1) : ?>
<li class="nav-item ">
<a class="nav-link" href="/buku/">Buku</a>
</li>
<?php endif; ?>
</ul>
<?php if (session()->level == 1) : ?>
Welcome <?= session()->get('username'); ?> | <a href="<?= base_url() ?>/login/logout" class="btn"> Logout</a>
<?php endif; ?>
<?php if (session()->level != 1) : ?>
<a href="<?= base_url() ?>/login" class="btn btn-secondary"> Login</a>
<?php endif; ?>
</div>Selanjutnya supaya tombol Logout bisa menjalankan fungsinya ketika di klik, silahkan tambahkan Method logout yang isinya sebagai berikut :
public function logout()
{
session()->destroy();
return redirect()->to('halaman');
}
