Belajar Pemrograman Framework Codeigniter 4

Artikel seputar pemrgoraman framework Codeigniter 4

CodeIgniter 4 Tutorial Sederhana Membuat Form Login dan Logout

23 Dec 2021 12:15
Dipost oleh Admin
3.028
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 LoginController

Kemudian 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.