Tutorial Membuat Authentication di Adonis JS #4 : Membuat Proses Login - Halo teman-teman semuanya, diartikel sebelumnya kita sudah berhasil membuat sebuah proses register di adonis JS.
Pada kesempatan kali ini kita semua akan belajar bagaimana cara membuat sebuah login di Adonis JS. Langsung saja kita mulai.
Silahkan teman-teman jalankan perintah dibawah ini untuk membuat sebuah controller baru
adonis make:controller Auth/Login --type=http
Jika berhasil, kita akan mendapatkan output kurang lebih seperti berikut ini
✔ create app/Controllers/Http/Auth/LoginController.js
Sekarang kita sudah berhasil membuat sebeuah file controller baru dengan nama LoginController.js di dalam folder app/Http/Controllers/Auth.
Sekarang silahkan teman-teman buka file LoginController.js dan ubahhlah menjadi seperti berikut ini :
'use strict'
class LoginController {
index({ view }) {
return view.render('auth.login')
}
async check({ request, auth, session, response }) {
/**
* get data from form
*/
const { email, password } = request.all()
/**
* attemp auth
*/
await auth.attempt(email, password)
return response.route('dashboard')
}
async logout({ auth, response }) {
await auth.logout()
return response.route('login.index')
}
}
module.exports = LoginController
Bisa kita perhatikan bersama, di dalam file LoginController.js di atas kita menambahkan 3 fungsi baru diantaranya :
-
index - untuk fungsi index ini kita gunakan untuk merender sebuah file dengan nama resources/views/auth/login.edge
-
check - fungsi ini kita gunakan untuk melalkukan proses authentication di Adonis JS. disini kita menggunakan fungsi attempt() untuk proses loginnya
-
logout - fungsi ini kita gunakan untuk logout dari aplikasi kita
Selanjutnya kita akan membuah sebuah view baru untuk form login, silahkan teman-teman jalankan perintah dibawah ini :
adonis make:view auth/login
Jika berhasil, kita akan mendaptkan output kurang lebih seperti ini :
✔ create resources/views/auth/login.edge
Sekarang silahkan teman-teman buka file login.edge di dalam folder resources/views/auth dan silahkan masukkan kode beriku ini :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<title>Adonis Auth - Login</title>
</head>
<body style="background: #edf2f7">
<div class="container" style="margin-top: 80px">
<div class="row justify-content-center">
<div class="col-md-5">
<div class="text-center">
<h4>ADONIS JS AUTH - LOGIN</h4>
</div>
<div class="card">
<div class="card-body">
<form action="{{ route('login.check') }}" method="POST">
{{ csrfField() }}
<div class="form-group">
<label>EMAIL</label>
<input type="email" class="form-control {{ hasErrorFor('email') ? 'is-invalid' : '' }}" name="email" placeholder="Masukkan Email">
{{ elIf('<span class="text-danger">$self</span>', getErrorFor('email'), hasErrorFor('email')) }}
</div>
<div class="form-group">
<label>PASSWORD</label>
<input type="password" class="form-control {{ hasErrorFor('password') ? 'is-invalid' : '' }}" name="password" placeholder="Masukkan Password">
{{ elIf('<span class="text-danger">$self</span>', getErrorFor('password'), hasErrorFor('password')) }}
</div>
<button class="btn btn-success btn-md btn-block" type="submit">LOGIN</button>
</form>
</div>
</div>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</body>
</html>
Terakhir kita akan menambahkan sebuah route baru untuk login, silahkan teman-teman buka file routes.js di dalam folder start dan silahkan tambahkan kode dibawah ini :
Route.get('login', 'Auth/LoginController.index').as('login.index')
Route.post('login', 'Auth/LoginController.check').as('login.check')
Route.get('logout', 'Auth/LoginController.logout').as('logout')
Sekrang kita bisa mencoba project kita, untuk mencobanya silahkan buka http://localhost:3333/login di browser kita, jika berhasil maka kurang lebih seperti berikut ini :
Sekarang silahkan teman-teman melakukan login dengan akun yang sebelumnya di buat di form register, jika berhasil login teman-teman akan melihat kurang lebih tampilannya seperti berikut ini :
Dari sini sebenarnya kita sudah berhasil membuat proses login, error tersebut muncul karena kita belum membuat halaman untuk dashboardnya, untuk membuat halaman dashboard kita akan lanjukan di artikel selanjunya.
Terima Kasih