بِسْمِ اللَّهِ Mudah-mudahan tutorial Merubah tampilan Myth:Auth bermanfaat
Setelah menyelesaikan instalasi dan konfigurasi library Myth:Auth, waktunya merubah tampilan sesuai dengan template SB Admin 2. Tampilan sebelumnya seperti gambar ini sudah bagus, tapi akan jadi kalau dipaksakan dengan tampilan sebelumnya (SB Admin 2) dan sudah dibuat templatenya.
Jika Anda tidak mempermasalahkan tampilan, tutorial ini boleh dilewati, tapi sayang juga nanti tampilannya jadi aneh kalau tidak diubah
Persiapan Merubah tampilan Myth:Auth
Untuk bisa melanjutkan pastikan sudah ada ini:
Editor yang digunakan adalah Visual Studio Code
Project Codeigniter dengan library Myth:Auth didalamnya, tutorialnya bisa dilihat Codeigniter 4 Login multiuser dengan library Myth:Auth
Sudah mengerjakan tutorial Codeigniter 4 – Membuat layout dengan template
Update tampilan
Buat folder baru di \app\Views dengan nama auth kemudian copy login.html, register.html dari template SB Admin 2 ke folder tersebut. Kemudian ganti nama menjadi login.php dan register.php.
Nah untuk yang forgot.php itu copy saja dari login.php karena isinya hampir sama.
Ubah login.php dengan script ini
<!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>
<?=lang('Auth.loginTitle')?>
</title>
<!-- Custom fonts for this template-->
<link href="<?= base_url() ?>/assets/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() ?>/assets/css/sb-admin-2.min.css" rel="stylesheet">
</head>
<body class="bg-gradient-primary">
<div class="container">
<!-- Outer Row -->
<div class="row justify-content-center">
<div class="col-xl-5 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<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"><?=lang('Auth.loginTitle')?></h1>
</div>
<?= view('Myth\Auth\Views\_message_block') ?>
<form action="<?= route_to('login') ?>" class="user" method="post">
<?= csrf_field() ?>
<?php if ($config->validFields === ['email']): ?>
<div class="form-group">
<input type="email" class="form-control form-control-user <?php if(session('errors.login')) : ?>is-invalid<?php endif ?>"
name="login" placeholder="<?=lang('Auth.email')?>">
<div class="invalid-feedback">
<?= session('errors.login') ?>
</div>
</div>
<?php else: ?>
<div class="form-group">
<input type="text" class="form-control form-control-user <?php if(session('errors.login')) : ?>is-invalid<?php endif ?>"
name="login" placeholder="<?=lang('Auth.emailOrUsername')?>">
<div class="invalid-feedback">
<?= session('errors.login') ?>
</div>
</div>
<?php endif; ?>
<div class="form-group">
<input type="password" name="password" class="form-control form-control-user <?php if(session('errors.password')) : ?>is-invalid<?php endif ?>" placeholder="<?=lang('Auth.password')?>">
<div class="invalid-feedback">
<?= session('errors.password') ?>
</div>
</div>
<?php if ($config->allowRemembering): ?>
<div class="form-group">
<div class="custom-control custom-checkbox small">
<input type="checkbox" class="custom-control-input" id="customCheck" <?php if(old('remember')) : ?> checked <?php endif ?> >
<label class="custom-control-label" for="customCheck"><?=lang('Auth.rememberMe')?></label>
</div>
</div>
<?php endif; ?>
<button type="submit" class="btn btn-primary btn-user btn-block"><?=lang('Auth.loginAction')?></button>
</form>
<hr>
<?php if ($config->allowRegistration) : ?>
<div class="text-center">
<p><a class="small" href="<?= route_to('register') ?>"><?=lang('Auth.needAnAccount')?></a></p>
</div>
<?php endif; ?>
<?php if ($config->activeResetter): ?>
<div class="text-center">
<p><a class="small" href="<?= route_to('forgot') ?>"><?=lang('Auth.forgotYourPassword')?></a></p>
</div>
<?php endif; ?>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="<?= base_url() ?>/assets/vendor/jquery/jquery.min.js"></script>
<script src="<?= base_url() ?>/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="<?= base_url() ?>/assets/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="<?= base_url() ?>/assets/js/sb-admin-2.min.js"></script>
</body>
</html>
Ubah register.php dengan script ini
<!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><?=lang('Auth.register')?></title>
<!-- Custom fonts for this template-->
<link href="<?= base_url() ?>/assets/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() ?>/assets/css/sb-admin-2.min.css" rel="stylesheet">S
</head>
<body class="bg-gradient-primary">
<div class="container">
<div class="card o-hidden border-0 shadow-lg my-5">
<div class="card-body p-0">
<!-- Nested Row within Card Body -->
<div class="row">
<div class="col-lg-12">
<div class="p-5">
<div class="text-center">
<h1 class="h4 text-gray-900 mb-4"><?=lang('Auth.register')?></h1>
</div>
<?= view('Myth\Auth\Views\_message_block') ?>
<form action="<?= route_to('register') ?>" class="user" method="post">
<?= csrf_field() ?>
<div class="form-group row">
<div class="col-sm-12">
<input type="email" class="form-control form-control-user <?php if(session('errors.email')) : ?>is-invalid<?php endif ?>"
name="email" aria-describedby="emailHelp" placeholder="<?=lang('Auth.email')?>" value="<?= old('email') ?>">
<small id="emailHelp" class="form-text text-muted"><?=lang('Auth.weNeverShare')?></small>
</div>
</div>
<div class="form-group row">
<div class="col-sm-12">
<input type="text" class="form-control form-control-user <?php if(session('errors.username')) : ?>is-invalid<?php endif ?>" name="username" placeholder="<?=lang('Auth.username')?>" value="<?= old('username') ?>">
</div>
</div>
<div class="form-group row">
<div class="col-sm-6 mb-3 mb-sm-0">
<input type="password" name="password" class="form-control form-control-user <?php if(session('errors.password')) : ?>is-invalid<?php endif ?>" placeholder="<?=lang('Auth.password')?>" autocomplete="off">
</div>
<div class="col-sm-6">
<input type="password" name="pass_confirm" class="form-control form-control-user <?php if(session('errors.pass_confirm')) : ?>is-invalid<?php endif ?>" placeholder="<?=lang('Auth.repeatPassword')?>" autocomplete="off">
</div>
</div>
<br>
<button type="submit" class="btn btn-primary btn-user btn-block"><?=lang('Auth.register')?></button>
</form>
<hr>
<div class="text-center">
<p><?=lang('Auth.alreadyRegistered')?> <a class="small" href="<?= route_to('login') ?>"><?=lang('Auth.signIn')?></a></p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="<?= base_url() ?>/assets/vendor/jquery/jquery.min.js"></script>
<script src="<?= base_url() ?>/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="<?= base_url() ?>/assets/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="<?= base_url() ?>/assets/js/sb-admin-2.min.js"></script>
</body>
</html>
Ubah forgot.php dengan script ini
<!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>
<?=lang('Auth.forgotPassword')?>
</title>
<!-- Custom fonts for this template-->
<link href="<?= base_url() ?>/assets/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() ?>/assets/css/sb-admin-2.min.css" rel="stylesheet">
</head>
<body class="bg-gradient-primary">
<div class="container">
<!-- Outer Row -->
<div class="row justify-content-center">
<div class="col-xl-5 col-lg-12 col-md-9">
<div class="card o-hidden border-0 shadow-lg my-5">
<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"><?=lang('Auth.forgotPassword')?></h1>
</div>
<?= view('Myth\Auth\Views\_message_block') ?>
<p class="mb-4"><?=lang('Auth.enterEmailForInstructions')?></p>
<form action="<?= route_to('forgot') ?>" class="user" method="post">
<?= csrf_field() ?>
<div class="form-group">
<input type="email" class="form-control form-control-user" <?php if(session('errors.email')) : ?>is-invalid<?php endif ?>"
name="email" aria-describedby="emailHelp" placeholder="<?=lang('Auth.email')?>">
<div class="invalid-feedback">
<?= session('errors.email') ?>
</div>
</div>
<button type="submit" class="btn btn-primary btn-user btn-block"><?=lang('Auth.sendInstructions')?></button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript-->
<script src="<?= base_url() ?>/assets/vendor/jquery/jquery.min.js"></script>
<script src="<?= base_url() ?>/assets/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Core plugin JavaScript-->
<script src="<?= base_url() ?>/assets/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom scripts for all pages-->
<script src="<?= base_url() ?>/assets/js/sb-admin-2.min.js"></script>
</body>
</html>
Konfigurasi
Kemudain cari Auth.php lokasinya di \vendor\myth\auth\src\Config
kemudian cari array $views update seperti ini
public $views = [
// 'login' => 'Myth\Auth\Views\login',
'login' => '\App\Views\auth\login',
// 'register' => 'Myth\Auth\Views\register',
'register' => '\App\Views\auth\register',
// 'forgot' => 'Myth\Auth\Views\forgot',
'forgot' => '\App\Views\auth\forgot',
'reset' => 'Myth\Auth\Views\reset',
'emailForgot' => 'Myth\Auth\Views\emails\forgot',
'emailActivation' => 'Myth\Auth\Views\emails\activation',
];
Silakan dicoba masukan alamat login, register dan forgot ke browser.
Contoh login => http://localhost:8080/login
Tampilan login
Tampilan register
Tampilan forgot
Silakan dicoba dan mudah-mudahan bermanfaat dan bisa mudah dimengerti
