Pendahuluan
Setelah kita selesai membahas bagaimana membuat dan mengelola data buku dan user, maka kita pada artikel kali ini akan membuat form untuk login. Login yang kita maksud disini adalah login multi user, artinya sistem akan mengarahkan user ke halaman tertentu sesuai dengan level yang dimiliki user. Pastikan anda sudah membuat dan menampilkan user di UI halaman web ya...
Materi
Nah, ada beberapa materi yang akan kita singgung di artikel ini. Silahkan di ikut:
Merubah Jalur Controller
Hal pertama yang harus kita lakukan adalah merubah/ membuat jalur untuk login. Tentu kita akan melakukan sedikit settingan pada rooters kita. Jadi Silahkan buka file rooters.php yang ada di folder Config dan rubah scriptnya seperti berikut:
$routes->get('/', 'Home::index');
Rubah script di atas menjadi
$routes->get('/beranda', 'Home::index');
Script di atas bertujuan untuk membuat jalur saat login dan berhasil maka sistem akan mengarahkan user ke halaman beranda.
Jangan sampai lupa edit juga link di menu navbar kita. Buka file temp_main.php yang ada di folder Views dan rubahlah link untuk menu Beranda seperti berikut:
<a class="nav-link text-white" href="<?= base_url('beranda') ?>">Beranda</a>
dan Sekarang jika anda jalankan program anda maka sistem akan eror karena tidak ada jalur url yang terbaca. Oleh sebab itu kita tambahkan script rooters satu lagi seperti berikut:
$routes->get('/', Home::login');
Script tersebut meminta agar saat pertama di jalankan akan tampil halaman login. Oleh sebab itu kita perlu membuat control untuk membuka halaman login tersebut. Silahkan buka folder Controllers dan cari file Home.php. Silahkan lengkapi script seperti berikut:
<?phpnamespace App\Controllers;use App\Models\M_User;class Home extends BaseController{public function __construct(){$this->mUser = new M_User();}public function index(): string{$data = ['title' => 'Beranda'];return view('v_beranda', $data);}public function login(){return view('v_login');}}
👉: Ingat di langkah ini pastikan anda sudah membuat file Model untuk USer. Jika belum silahkan di buat dengan mempelajari materi sebelumnya di :https://barintek.blogspot.com/2024/03/crud-aplikasi-perpustakaan-menampilkan.html.
Membuat UI/UX Halaman Login
Selanjutnya kita akan membuat halam User Interface untuk menampilkan form login. Silahkan anda buat file baru di folder views dan beri nama file tersebut dengan nama "v_login.php". Perhatikan susunan folder seperti berikut:
📁Views
📁Buku
📁USers
📁Templates
🗋 v_beranda
🗋v_login
Ketikkan script berikut pada v_login.php
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Aplikasi Perpustakaan</title><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"></head><body class="bg-dark"><div class="header bg-light p-2"><div class="container text-center"><h4 class="text-info">APLIKASI PUSTAKA DIGITAL</h4><h2 class="text-success">SILAHKAN LOGIN TERLEBIH DAHULU</h2></div></div><div class="main container border mt-2 w-25 bg-white rounded"><form class="m-4" action="<?= base_url('login') ?>"><?php if (session()->getFlashdata('msg')) : ?><div class="alert alert-danger"><?= session()->getFlashdata('msg') ?></div><?php endif; ?><div class="mb-3"><label class="form-label">Username</label><input type="text" class="form-control" name="username"></div><div class="mb-3"><label class="form-label">Password</label><input type="password" class="form-control" name="password" id="password"></div><div class="mb-3 form-check"><input type="checkbox" class="form-check-input" onclick="lihat()"><label class="form-check-label">Lihat Password</label></div><div class="d-grid gap-2"><button class="btn btn-primary" type="submit">Login</button><button class="btn btn-danger" type="reset">Reset</button></div></form></div><div class="footer bg-dark text-white text-center position-absolute w-100 sticky-bottom"><div class="container"> copyright © <?= date('Y') ?></div></div></body><script>function lihat() {var x = document.getElementById("password");if (x.type === "password") {x.type = "text";} else {x.type = "password";}}</script></html>
Disini kita menambahkan untuk cek keakuratan password kita dengan cara membuat checkbok untuk mengecek password. Script Javascirpt akan merubah tipe dari password menjadi text.
Berikut hasilnya:
Oke, kita sudah berhasil membuat halaman login. Langkah selanjutnya apa lagi? Kita akan membuat jalur untuk melakukan Cek login. Buka file rooters.php di dalam folder config dan tambahkan script berikut:
$routes->get('login', 'Home::cekLogin');
Membuat Controller
Sekarang kembali ke file Home.php. Kita akan membuat function cekLogin(). Pertama tama kita tangkap terlebih dahulu variabel yang dikirim dan kita tangkap juga nilai yang ada di dalam database. Perhatikan script berikut:
public function cekLogin(){$username = $this->request->getVar('username');$password = $this->request->getVar('password');$data = $this->mUser->where('username', $username)->first();$pass = $this->mUser->where('password', $password)->first();}
Selanjutnya kita lakukan pengecekan terhadap kebenaran username
public function cekLogin(){..........if ($data) {echo "Username Ditemukan";} else {session()->setFlashdata('msg', 'Data Tidak Ditemukan');return redirect()->to('');}}
Kalau username ditemukan kita lakukan pengecekan terhadap password
public function cekLogin(){....................if ($data) {if ($pass) {return redirect()->to('beranda');} else {session()->setFlashdata('msg', 'Password Salah');return redirect()->to('');}}..........}
Terakhir kita berikan session untuk mengirim nama lengkap dan level user yang masuk kesistim. Berikut scirpt lengkapnya:
public function cekLogin(){$username = $this->request->getVar('username');$password = $this->request->getVar('password');
$data = $this->mUser->where('username', $username)->first();$pass = $this->mUser->where('password', $password)->first();if ($data) {if ($pass) {session()->set(['nama' => $data['nama_lengkap'],'level' => $data['level']]);return redirect()->to('beranda');} else {session()->setFlashdata('msg', 'Password Salah');return redirect()->to('');}} else {session()->setFlashdata('msg', 'Data Tidak Ditemukan');return redirect()->to('');}}
Kita akan menangkap session nama lengkap yang di kirim oleh controller Home tadi. Nama lengkap akan kita masukkan pada halaman Beranda. Jadi silahkan buka v_beranda.php dan tambahkan perintah session get ke dalamnya. Perhatikan script dan tambahkan:
<?php$this->extend('templates/temp_main');$this->section('konten');?><div class="main"><h6>Selamat Datang <label class="bg-info"><?= session()->get('nama') ?> </label>Di Aplikasi Pustaka</h6></div><?= $this->endSection();
Perintah <?= session()->get('nama') ?> merupakan session yang menangkap variabel nama lengkap yang di kirim oleh controller.
Nah, sampai disini kita sudah bisa membuat login sederhana. Apakah aplikasi ini sudah bisa diterapkan? tentu belum, karena kita dalam tahap membahas bagaimana melakukan pengecekan terhadap user yang masuk ke sistem. Namun kita belum membuat pengelolaan halam untuk user.
Lalu bagaimana dengan metode Multi USernya? Yok kita lanjut.
konsep Mulit User
Konsep multiuser yang kita buat disini hanyalah konsep sederhana saja. Di sini kita asumsikan bahwa level user yang menggunakan sistem terdiri dari 2 level, yaitu user dan admin. Masing masing user akan diberi hak akses tersendiri seperti berikut:
user => Beranda, Buku, Peminjaman, Pengembalian, keluar
Admin => Beranda, Buku, data Anggota, keluar
Nah silahkan buka file temp_main.php dan sempurnakan script seperti berikut:
<!doctype html>..................<div class="navbar bg-info"><nav class="container navbar navbar-expand-lg"><ul class="navbar-nav"><li class="nav-item"><a class="nav-link text-white" href="<?= base_url('beranda') ?>">Beranda</a></li><li class="nav-item"><a class="nav-link text-white" href="<?= base_url('buku') ?>">Buku</a></li><?php if (session()->get('level') == 'user') { ?><li class="nav-item"><a class="nav-link text-white" href="">Peminjaman</a></li><li class="nav-item"><a class="nav-link text-white" href="">Pengembalian</a></li><?php } ?><?php if (session()->get('level') == 'admin') { ?><li class="nav-item"><a class="nav-link text-white" href="<?= base_url('user') ?>">Data Anggota</a></li><?php } ?><li class="nav-item"><a class="nav-link text-white" href="<?= base_url('keluar') ?>">Keluar</a></li></ul></nav></div>.......................</html>
Oke, konsepnya kita disini kita cuman menambahkan logika if saja pada menu. Jika logika terpenuhi maka akan diberikan hak akses. Perintah session()->get('level') ini di dapatkan dari session yang dikirim dari controller yang di buat 'level' => $data['level'].
Sekarang coba anda login sebagai admin kemudian perhatikan menu navbar yang muncul, dan coba login sebagai user lalu perhatikan menu yang muncul.
Keluar dari sistim.
Buka rootes.php dan tambahkan script berikut:
$routes->get('keluar', 'Home::Keluar');
Kemudian di file Home.php kita buat fungsi keluar().
public function keluar(){session()->close();return view('/');}
Perintah di atas merupakan perintah untuk menutup semua session().
