23 Dec 2021 12:15
Dipost oleh Admin
2.792
0
Sobatcoding.com - Tutorial membuat form login dan logout menggunakan CodeIgniter 4
Pada artikel kali ini kita akan membuat form login sederhana beserta fungsi logout menggunakan Codeigniter 4. Mari kita langsung saja perhatikan langkah-langkah berikut.
Membuat Controller
Kita buat sebuah controller bernama LoginController.php menggunakan spark dengan command line seperti berikut.
php spark make:controller LoginControllerKemudian kita masukkan kode seperti berikut.
<?php
namespace App\Controllers;
use App\Controllers\BaseController;
use App\Models\Users;
class LoginController extends BaseController
{
public function index()
{
return view('login');
}
public function doLogin()
{
$email = $this->request->getVar('email');
$password = $this->request->getVar('password');
$user = new Users();
$data = $user->where('email', $email)->first();
if( $data )
{
$session = session();
if( password_verify($password, $data['password']) )
{
//create session
$login = [
'islogin' => true,
'email'=> $data['email'],
'name' => $data['name']
];
$session->set($login);
return redirect()->to('/home');
}else{
$session->setFlashdata('msg', 'Email/Password invalid');
return redirect()->to('/login');
}
}
}
public function logout()
{
$session = session();
$session->destroy();
return redirect()->to('/login');
}
}
Tersdapat tiga function yaitu index, doLogin dan logout. Fungsi index digunakan untuk menampilkan halaman form login, fungsi doLogin untuk handle request login user sedangkan function logout untuk menghapus session user yang berhasil login.
Di dalam function doLogin terdapat helper password_verify . Fungsi password_verify di codeigniter 4 adalah untuk verifikasi (mencocokkan) data yang telah terhash memakai fungsi password_hash().
Contoh penggunaan password_hash() adalah sebagai berikut.
$pwd = "12345678";
echo password_hash($pwd , PASSWORD_DEFAULT);
Jika user berhasil login akan didirect ke halaman home tetapi jika gagal login karena email atau password invalid akan didirect kembali ke halaman login beserta ditambahkan tampilan notif error login.
Membuat View
Kita buat sebuah view untuk halaman login bernama login.php dan masukkan kode seperti 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.0">
<title>Contoh Form Login</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
body {
margin: 0;
padding: 0;
background-color: #17a2b8;
height: 100vh;
}
#login .container #login-row #login-column #login-box {
margin-top: 120px;
max-width: 600px;
height: 320px;
border: 1px solid #9C9C9C;
background-color: #EAEAEA;
}
#login .container #login-row #login-column #login-box #login-form {
padding: 20px;
}
#login .container #login-row #login-column #login-box #login-form #register-link {
margin-top: -85px;
}
</style>
</head>
<body>
<section>
<div id="login">
<h3 class="text-center text-white pt-5">LOGIN FORM</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">
<?php if(session()->getFlashdata('msg')):?>
<div class="alert alert-danger"><?= session()->getFlashdata('msg') ?></div>
<?php endif;?>
<form id="login-form" class="form" action="<?= base_url('login') ?>" method="post">
<div class="form-group">
<label for="username" class="text-info">Email:</label><br>
<input type="email" name="email" id="email" class="form-control" required >
</div>
<div class="form-group">
<label for="password" class="text-info">Password:</label><br>
<input type="password" name="password" id="password" class="form-control" required>
</div>
<div class="form-group">
<button type="submit" name="submit" class="btn btn-info btn-md" > LOGIN</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</section>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Konfigurasi Route
Tambahkan sebuah route untuk halaman login dan logout seperti berikut
...
$routes->get('/login', 'LoginController::index');
$routes->get('/logout', 'LoginController::logout');
$routes->post('/login', 'LoginController::doLogin');
Demikian artikel kali ini, Jika teman-teman memiliki pertanyaan atau saran mengenai artikel ini, jangan ragu untuk meninggalkan komentar pada form di bawah ini.
CodeIgniter (22)
Komentar 0